/* ==========================================================================
  Base styles: opinionated defaults

  01-toggle-button

  02-toggle-button-checkbox-onof

  03-toggle-button-right-close

  04-toggle-button-selected

  05-toggle-button-cfade

  06-toggle-button-icon-fade

  07-toggle-button-checkbox	

 ========================================================================= */



.group{
	padding: 60px 30px;
	background: #fff;
	border-bottom: 4px solid #f4f4f4;
}

.col-md-6{
	padding: 0px 2px;
}

.section{
	padding: 80px 0px;
	border-bottom: 1px solid #000;
}

.title {
	font-size: 1.5em;
	text-transform: uppercase;
	letter-spacing: 4px;
	color: #000;
	margin-bottom: 2em; 
}




/* ==========================================================================
  01-toggle-button
 ========================================================================= */

.toggle-button {
	margin: 0 20px; 
}

.toggle-button {
	position: relative;
	display: inline-block;
	color: #fff; 
}

.toggle-button label {
	display: inline-block;
	cursor: pointer;
	text-align: left; 
}

.toggle-button input {
	display: none; 
}

.toggle-button__icon {
	cursor: pointer;
	pointer-events: none; 
}

.toggle-button__icon:before, .toggle-button__icon:after {
	content: "";
	position: absolute;
	top: 45%;
	left: 35%;
	transition: 0.2s ease-out; 
}

/* ==========================================================================
  02-toggle-button-checkbox-onof
 ========================================================================= */

.toggle-button-checkbox-onof label {
	height: 50px;
	line-height: 50px;
	transition: all 0.2s;
	border-radius: 5px; 
}

.toggle-button-checkbox-onof label:before, .toggle-button-checkbox-onof label:after {
	position: absolute;
	right: 1.5rem;
	transition: all 0.2s .1s ease-out; 
}

.toggle-button-checkbox-onof label:before {
	content: attr(data-on-text); 
}

.toggle-button-checkbox-onof label:after {
	content: attr(data-off-text); 
}

.toggle-button-checkbox-onof input[type=radio] + label,
.toggle-button-checkbox-onof input[type=checkbox] + label {
	width: 120px;
	background: #444; 
}

.toggle-button-checkbox-onof input[type=radio] + label:before,
.toggle-button-checkbox-onof input[type=checkbox] + label:before {
	opacity: 0;
	transform: translate(0, 20px); 
}

.toggle-button-checkbox-onof input[type=radio] + label:after,
.toggle-button-checkbox-onof input[type=checkbox] + label:after {
	opacity: 1;
	transform: translate(0, 0); 
}

.toggle-button-checkbox-onof input[type=radio]:checked ~ label,
.toggle-button-checkbox-onof input[type=checkbox]:checked ~ label {
	width: 120px;
	background: #313d53; 
}

.toggle-button-checkbox-onof input[type=radio]:checked ~ label:before,
.toggle-button-checkbox-onof input[type=checkbox]:checked ~ label:before {
	opacity: 1;
	transform: translate(0, 0); 
}

.toggle-button-checkbox-onof input[type=radio]:checked ~ label:after,
.toggle-button-checkbox-onof input[type=checkbox]:checked ~ label:after {
	opacity: 0;
	transform: translate(0, -20px); 
}

.toggle-button-checkbox-onof input[type=radio]:checked ~ .toggle-button__icon:before,
.toggle-button-checkbox-onof input[type=checkbox]:checked ~ .toggle-button__icon:before {
	transform: translate(-10%, 100%) rotate(45deg);
	width: 16.66667px; 
}

.toggle-button-checkbox-onof input[type=radio]:checked ~ .toggle-button__icon:after, 
.toggle-button-checkbox-onof input[type=checkbox]:checked ~ .toggle-button__icon:after {
	transform: translate(30%) rotate(-45deg); 
}

.toggle-button-checkbox-onof .toggle-button__icon {
	position: absolute;
	left: 0;
	top: 0;
	height: 50px;
	width: 50px; 
}

.toggle-button-checkbox-onof .toggle-button__icon:before, .toggle-button-checkbox-onof .toggle-button__icon:after {
	height: 3px;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); 
}

.toggle-button-checkbox-onof .toggle-button__icon:before {
	width: 25px;
	transform: rotate(45deg); 
}

.toggle-button-checkbox-onof .toggle-button__icon:after {
	width: 25px;
	transform: rotate(-45deg); 
}

/* ==========================================================================
  03-toggle-button-right-close
 ========================================================================= */

.toggle-button-right-close label {
	height: 50px;
	line-height: 50px;
	transition: all 0.2s;
	border-radius: 50px; 
}

.toggle-button-right-close label:before, .toggle-button-right-close label:after {
	position: absolute;
	right: 1rem;
	transition: all 0.2s .1s ease-out; 
}

.toggle-button-right-close input[type=radio] + label, 
.toggle-button-right-close input[type=checkbox] + label {
	width: 50px;
	background: #444; 
}

.toggle-button-right-close input[type=radio] + label:before,
.toggle-button-right-close input[type=checkbox] + label:before {
	opacity: 0;
	transform: translate(0, 20px); 
}

.toggle-button-right-close input[type=radio] + label:after,
.toggle-button-right-close input[type=checkbox] + label:after {
	opacity: 1;
	transform: translate(0, 0); 
}

.toggle-button-right-close input[type=radio]:checked ~ label, 
.toggle-button-right-close input[type=checkbox]:checked ~ label {
	width: 50px;
	background: #313d53; 
}

.toggle-button-right-close input[type=radio]:checked ~ .toggle-button__icon:before, 
.toggle-button-right-close input[type=checkbox]:checked ~ .toggle-button__icon:before {
	transform: translate(-30%, 100%) rotate(45deg) scale(0.6, 1); 
}

.toggle-button-right-close input[type=radio]:checked ~ .toggle-button__icon:after, 
.toggle-button-right-close input[type=checkbox]:checked ~ .toggle-button__icon:after {
	transform: translate(20%) rotate(-45deg); 
}

.toggle-button-right-close .toggle-button__icon {
	position: absolute;
	height: 50px;
	width: 50px;
	top: 0;
	left: 0; 
}

.toggle-button-right-close .toggle-button__icon:before, .toggle-button-right-close .toggle-button__icon:after {
	width: 25px;
	height: 3px;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	margin-left: -10%;
	top: 48%; 
}

.toggle-button-right-close .toggle-button__icon:before {
	transform: rotate(45deg); 
}

.toggle-button-right-close .toggle-button__icon:after {
	transform: rotate(-45deg); 
}

/* ==========================================================================
  04-toggle-button-selected
 ========================================================================= */

.toggle-button-selected label {
	height: 50px;
	line-height: 50px;
	transition: all 0.2s;
	border-radius: 5px; 
}

.toggle-button-selected label:before, .toggle-button-selected label:after {
	position: absolute;
	right: 1.5rem;
	transition: all 0.2s .15s ease-out; 
}

.toggle-button-selected label:before {
	content: attr(data-on-text); 
}

.toggle-button-selected label:after {
	content: attr(data-off-text); 
}

.toggle-button-selected input[type=radio] + label,
.toggle-button-selected input[type=checkbox] + label {
	width: 150px;
	background: #444; 
}

.toggle-button-selected input[type=radio] + label:before,
.toggle-button-selected input[type=checkbox] + label:before {
	opacity: 0;
	transform: translate(0, 20px); 
}

.toggle-button-selected input[type=radio] + label:after,
.toggle-button-selected input[type=checkbox] + label:after {
	opacity: 1;
	transform: translate(0, 0); 
}

.toggle-button-selected input[type=radio]:checked ~ label,
.toggle-button-selected input[type=checkbox]:checked ~ label {
	width: 160px;
	background: #313d53; 
}

.toggle-button-selected input[type=radio]:checked ~ label:before,
.toggle-button-selected input[type=checkbox]:checked ~ label:before {
	opacity: 1;
	transform: translate(0, 0); 
}

.toggle-button-selected input[type=radio]:checked ~ label:after,
.toggle-button-selected input[type=checkbox]:checked ~ label:after {
	opacity: 0;
	transform: translate(0, -20px); 
}

.toggle-button-selected input[type=radio]:checked ~ .toggle-button__icon:before,
.toggle-button-selected input[type=checkbox]:checked ~ .toggle-button__icon:before {
	transform: translate(-10%, 100%) rotate(45deg);
	width: 16.66667px; 
}

.toggle-button-selected input[type=radio]:checked ~ .toggle-button__icon:after, 
.toggle-button-selected input[type=checkbox]:checked ~ .toggle-button__icon:after {
	transform: translate(30%) rotate(-45deg); 
}

.toggle-button-selected .toggle-button__icon {
	position: absolute;
	left: 0;
	top: 0;
	height: 50px;
	width: 50px; 
}

.toggle-button-selected .toggle-button__icon:before, .toggle-button-selected .toggle-button__icon:after {
	height: 3px;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); 
}

.toggle-button-selected .toggle-button__icon:before {
	width: 25px;
	transform: rotate(90deg); 
}

.toggle-button-selected .toggle-button__icon:after {
	width: 25px;
	transform: rotate(0); 
}

/* ==========================================================================
  05-toggle-button-cfade
 ========================================================================= */
.toggle-button-cfade {
	width: 100px;
	height: 20px; 
	color: #444;
}

.toggle-button-cfade label {
	position: absolute;
	left: 0;
	width: 20px;
	height: 20px;
	line-height: 20px;
	transition: all 0.2s;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); 
}

.toggle-button-cfade label:before, .toggle-button-cfade label:after {
	position: absolute;
	top: 0;
	left: 30px;
	transition: all 0.2s .1s ease-out; 
}

.toggle-button-cfade label:before {
	content: attr(data-on-text); 
}

.toggle-button-cfade label:after {
	content: attr(data-off-text); 
}

.toggle-button-cfade input + label:before {
	opacity: 0;
	transform: translate(20px, 0); 
}

.toggle-button-cfade input + label:after {
	opacity: 1;
	transform: translate(0, 0); 
}

.toggle-button-cfade input:checked ~ label:before, 
.toggle-button-cfade input:checked ~ label:before {
	opacity: 1;
	transform: translate(0, 0); 
}

.toggle-button-cfade input:checked ~ label:after,
.toggle-button-cfade input:checked ~ label:after {
	opacity: 0;
	transform: translate(20px, 0); 
}

.toggle-button-cfade input[type=radio]:checked ~ .toggle-button__icon:before, .toggle-button-cfade input[type=radio]:checked ~ .toggle-button__icon:after,
.toggle-button-cfade input[type=checkbox]:checked ~ .toggle-button__icon:before, .toggle-button-cfade input[type=checkbox]:checked ~ .toggle-button__icon:after {
	background: #313d53; 
}

.toggle-button-cfade input[type=radio]:checked ~ .toggle-button__icon:before,
.toggle-button-cfade input[type=checkbox]:checked ~ .toggle-button__icon:before {
	transform: translate(-30%, 70%) rotate(45deg) scale(0.7, 1); 
}

.toggle-button-cfade input[type=radio]:checked ~ .toggle-button__icon:after ,
.toggle-button-cfade input[type=checkbox]:checked ~ .toggle-button__icon:after {
	transform: translate(20%) rotate(-45deg); 
}

.toggle-button-cfade .toggle-button__icon {
	position: absolute;
	height: 20px;
	width: 20px;
	top: 0;
	left: 0; 
}

.toggle-button-cfade .toggle-button__icon:before, .toggle-button-cfade .toggle-button__icon:after {
	width: calc(20px - 8px);
	height: 3px;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	margin-left: -3px;
	top: 40%;
	background: #444; 
}

.toggle-button-cfade .toggle-button__icon:before {
	transform: rotate(45deg); 
}

.toggle-button-cfade .toggle-button__icon:after {
	transform: rotate(-45deg); 
}

.toggle-button-cfade:hover label {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
}

.toggle-button-cfade:hover input[type=radio]:not(:checked) ~ .toggle-button__icon:before,
.toggle-button-cfade:hover input[type=checkbox]:not(:checked) ~ .toggle-button__icon:before {
	animation: icon-hover-before .2s; 
}

.toggle-button-cfade:hover input[type=radio]:not(:checked) ~ .toggle-button__icon:after,
.toggle-button-cfade:hover input[type=checkbox]:not(:checked) ~ .toggle-button__icon:after {
	animation: icon-hover-after .2s; 
}

@keyframes icon-hover-before {
	0% {
		transform: rotate(45deg) scale(1, 1); 
	}
	100% {
		transform: rotate(45deg) scale(1.2, 1.2); 
	}
}

@keyframes icon-hover-after {
	0% {
		transform: rotate(-45deg) scale(1, 1); 
	}
	50% {
		transform: rotate(-45deg) scale(1.2, 1.2); 
	}
}

/* ==========================================================================
  06-toggle-button-icon-fade
 ========================================================================= */
.toggle-button-icon-fade {
	width: 100px;
	height: 20px; color: #444;
}

.toggle-button-icon-fade label {
	position: absolute;
	left: 0;
	width: 20px;
	height: 20px;
	line-height: 20px;
	transition: all 0.2s;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); 
}

.toggle-button-icon-fade label:before, .toggle-button-icon-fade label:after {
	position: absolute;
	top: 0;
	left: 30px;
	transition: all 0.2s .1s ease-out; 
}

.toggle-button-icon-fade label:before {
	content: attr(data-on-text); 
}

.toggle-button-icon-fade label:after {
	content: attr(data-off-text); 
}

.toggle-button-icon-fade input + label:before {
	opacity: 0;
	transform: translate(20px, 0); 
}

.toggle-button-icon-fade input + label:after {
	opacity: 1;
	transform: translate(0, 0); 
}

.toggle-button-icon-fade input:checked ~ label:before {
	opacity: 1;
	transform: translate(0, 0); 
}

.toggle-button-icon-fade input:checked ~ label:after {
	opacity: 0;
	transform: translate(20px, 0); 
}

.toggle-button-icon-fade input[type=radio]:checked ~ .toggle-button__icon:before, .toggle-button-icon-fade input[type=radio]:checked ~ .toggle-button__icon:after,
.toggle-button-icon-fade input[type=checkbox]:checked ~ .toggle-button__icon:before, .toggle-button-icon-fade input[type=checkbox]:checked ~ .toggle-button__icon:after {
	background: #313d53;
	transition: none;
	transform-origin: left center; 
}

.toggle-button-icon-fade input[type=radio]:checked ~ .toggle-button__icon:before,
.toggle-button-icon-fade input[type=checkbox]:checked ~ .toggle-button__icon:before {
	animation: iconShowBefore .3s;
	transform: translate(0, 0) rotate(45deg) scale(0.6, 1); 
}

.toggle-button-icon-fade input[type=radio]:checked ~ .toggle-button__icon:after,
.toggle-button-icon-fade input[type=checkbox]:checked ~ .toggle-button__icon:after {
	animation: iconShowAfter .6s;
	transform: translate(4px, 6px) rotate(-45deg); 
}

.toggle-button-icon-fade .toggle-button__icon {
	position: absolute;
	height: 20px;
	width: 20px;
	top: 0;
	left: 0; 
}

.toggle-button-icon-fade .toggle-button__icon:before, .toggle-button-icon-fade .toggle-button__icon:after {
	width: calc(20px - 6px);
	height: 3px;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	margin-left: -4px;
	top: 40%;
	background: #444;
	transform-origin: center center; 
}

.toggle-button-icon-fade .toggle-button__icon:before {
	transform: rotate(45deg); 
}

.toggle-button-icon-fade .toggle-button__icon:after {
	transform: rotate(-45deg); 
}

.toggle-button-icon-fade:hover label {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
}

.toggle-button-icon-fade:hover input[type=radio]:not(:checked) ~ .toggle-button__icon:before ,
.toggle-button-icon-fade:hover input[type=checkbox]:not(:checked) ~ .toggle-button__icon:before {
	animation: iconHoverBefore .2s; 
}

.toggle-button-icon-fade:hover input[type=radio]:not(:checked) ~ .toggle-button__icon:after, 
.toggle-button-icon-fade:hover input[type=checkbox]:not(:checked) ~ .toggle-button__icon:after {
	animation: iconHoverAfter .2s; 
}

@keyframes iconShowBefore {
	0% {
		transform: translate(0, 0) rotate(45deg) scale(0, 1); 
	}
	100% {
		transform: translate(0, 0) rotate(45deg) scale(0.6, 1); 
	}
}

@keyframes iconShowAfter {
	0% {
		opacity: 0; 
	}
	49% {
		opacity: 0; 
	}
	50% {
		opacity: 1;
		transform: translate(4px, 6px) rotate(-45deg) scale(0, 1); 
	}
	100% {
		transform: translate(4px, 6px) rotate(-45deg) scale(1, 1); 
	}
}

@keyframes iconHoverBefore {
	0% {
		transform: rotate(45deg) scale(1, 1); 
	}
	100% {
		transform: rotate(45deg) scale(1.2, 1.2); 
	}
}

@keyframes iconHoverAfter {
	0% {
		transform: rotate(-45deg) scale(1, 1); 
	}
	50% {
		transform: rotate(-45deg) scale(1.2, 1.2); 
	}
}


/* ==========================================================================
  07-toggle-button-checkbox
 ======================================================================== */

.toggle-button-checkbox label {
	line-height: 20px;
	text-indent: 30px; color: #444;
}

.toggle-button-checkbox input[type=radio]:checked ~ .toggle-button__icon,
.toggle-button-checkbox input[type=checkbox]:checked ~ .toggle-button__icon {
	background: #fff; 
}

.toggle-button-checkbox input[type=radio]:checked ~ .toggle-button__icon:before, .toggle-button-checkbox input[type=radio]:checked ~ .toggle-button__icon:after, 
.toggle-button-checkbox input[type=checkbox]:checked ~ .toggle-button__icon:before, .toggle-button-checkbox input[type=checkbox]:checked ~ .toggle-button__icon:after {
	opacity: 1; 
}

.toggle-button-checkbox .toggle-button__icon {
	position: absolute;
	top: 4px;
	left: 0;
	width: 20px;
	height: 20px;
	transition: all 0.2s;
	border: 2px solid #fff;
	border-radius: 1px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); 
}

.toggle-button-checkbox .toggle-button__icon:before, .toggle-button-checkbox .toggle-button__icon:after {
	top: 5px;
	left: 2px;
	width: 12px;
	height: 2px;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	top: 35%;
	background: #313d53;
	opacity: 0;
	transform-origin: left center; 
}

.toggle-button-checkbox .toggle-button__icon:before {
	transform: translate(0, 0) rotate(45deg) scale(0.6, 1); 
}

.toggle-button-checkbox .toggle-button__icon:after {
	transform: translate(4px, 6px) rotate(-45deg); 
}

.toggle-button-checkbox:hover input[type=radio]:not(:checked) ~ .toggle-button__icon,
.toggle-button-checkbox:hover input[type=checkbox]:not(:checked) ~ .toggle-button__icon {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
}