/* Slider Styling */



#slider {

	text-align: center;

	margin-top:50px;
    clear:both;
}



#slide1:checked ~ #slides .inner { margin-left:0; }

#slide2:checked ~ #slides .inner { margin-left:-100%; }

#slide3:checked ~ #slides .inner { margin-left:-200%; }

#slide4:checked ~ #slides .inner { margin-left:-300%; }

#slide5:checked ~ #slides .inner { margin-left:-400%; }



#overflow {

	width: 100%;

	overflow: hidden;

}



#slides .inner {

	width: 500%;

	/*line-height: 0;*/

}



#slides article {

	width: 20%;

	float: left;

}



/* Slider Styling */



/* Control Setup */



#controls {

	width: 100%;

	height: 50px;

}



#controls label { 

	display: none;

	width: 50px;

	height: 50px;

	opacity: 0.3;

}



#active {

	margin: 23% 0 0;

	text-align: center;

}



#active label {

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

	display: inline-block;

	width: 10px;

	height: 10px;

	background: Fuchsia;

}



#active label:hover {

	background: #ccc;

	border-color: #777 !important;

}



#controls {

	text-align: center;

}



#controls label:hover {

	opacity: 0.8;

}



#slides {

	margin: 45px 0 0;	

	padding: 0%;

	background: transparent;

}



/* Animation */



#slides .inner {

	-webkit-transform: translateZ(0);

	-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 

	-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 

    -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 

     -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 

        transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */



	-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 

	-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 

    -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 

     -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 

        transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

}



#slider {

	-webkit-transform: translateZ(0);

	-webkit-transition: all 0.5s ease-out;

	-moz-transition: all 0.5s ease-out;

	-o-transition: all 0.5s ease-out;

	transition: all 0.5s ease-out;

}



#controls label{

	-webkit-transform: translateZ(0);

	-webkit-transition: opacity 0.2s ease-out;

	-moz-transition: opacity 0.2s ease-out;

	-o-transition: opacity 0.2s ease-out;

	transition: opacity 0.2s ease-out;

}



#slide1:checked ~ #slides article:nth-child(1) .info,

#slide2:checked ~ #slides article:nth-child(2) .info,

#slide3:checked ~ #slides article:nth-child(3) .info,

#slide4:checked ~ #slides article:nth-child(4) .info,

#slide5:checked ~ #slides article:nth-child(5) .info {

	opacity: 1;

	-webkit-transition: all 1s ease-out 0.6s;

	-moz-transition: all 1s ease-out 0.6s;

	-o-transition: all 1s ease-out 0.6s;

	transition: all 1s ease-out 0.6s;

}



#slide1:checked ~ #controls label:nth-child(2), 

#slide2:checked ~ #controls label:nth-child(3), 

#slide3:checked ~ #controls label:nth-child(4), 

#slide4:checked ~ #controls label:nth-child(5), 

#slide5:checked ~ #controls label:nth-child(1) {

	background: url('../images/next.png') no-repeat;

	float: right;

	margin: 125px 0px 0 0;

	display: block;

}



#slide1:checked ~ #controls label:nth-child(5),

#slide2:checked ~ #controls label:nth-child(1),

#slide3:checked ~ #controls label:nth-child(2),

#slide4:checked ~ #controls label:nth-child(3),

#slide5:checked ~ #controls label:nth-child(4) {

	background: url('../images/prev.png') no-repeat;

	float: left;

	margin: 125px 0 0 0px;

	display: block;

}



#slide1:checked ~ #active label:nth-child(1),

#slide2:checked ~ #active label:nth-child(2),

#slide3:checked ~ #active label:nth-child(3),

#slide4:checked ~ #active label:nth-child(4),

#slide5:checked ~ #active label:nth-child(5) {

	background: #333;

	border-color: #333 !important;

}



.info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile {

	-webkit-transform: translateZ(0);

	-webkit-transition: all 0.5s ease-out;

	-moz-transition: all 0.5s ease-out;

	-o-transition: all 0.5s ease-out;

	transition: all 0.5s ease-out;

}



/* Info Box */



.info {

	line-height: 20px;

	margin-top: -30px;

	margin-left: 30px;

	position: absolute;

	font-style: italic;

	padding: 30px 30px;

	opacity: 0;

	color: #E7E7E7;

	text-align: left;

}



.info h3 {

	color: #E7E7E7;

	margin: 0 0 5px;

	font-weight: normal;

	font-size: 22px;

	font-style: normal;

}



/* Respond Options */



#desktop:checked ~ #slider {

	max-width: 960px;

}



#tablet:checked ~ #slider {

	max-width: 850px;

}



#mobile:checked ~ #slider {

	max-width: 450px;

}



#desktop:checked ~ #slider .desktop,

#tablet:checked ~ #slider .tablet,

#mobile:checked ~ #slider .mobile {

	color: #777;

	opacity: 1;

}



.desktop, .tablet, .mobile {

	display: inline-block;

	width: 60px;

	height: 60px;

	padding-top: 50px;

	opacity: 0.35;

	font-size: 12px;

}



.desktop:hover, .tablet:hover, .mobile:hover {

	opacity: 0.2;

}



/* Responsive Styling */



/* Tablet */



#tablet:checked ~ #slider #controls {

	margin: -25% 0 0 12%;

	width: 76%;

	height: 50px;

}



#tablet:checked ~ #slider #controls label {

	-moz-transform: scale(0.8);

	-webkit-transform: scale(0.8);

	-o-transform: scale(0.8);

	-ms-transform: scale(0.8);

	transform: scale(0.8);

}



#tablet:checked  ~ #slider #slides, #mobile:checked  ~ #slider #slides {

	padding: 1% 0;

	-webkit-border-radius: 0px;

	-moz-border-radius: 0px;

	border-radius: 0px;

}



#tablet:checked ~ #slider #active {

	margin: 22% 0 0;

}



@media only screen and (max-width: 850px) and (min-width: 450px) {



	#slider #controls {

		margin: -25% 0 0 15%;

		width: 70%;

		height: 50px;

	}



	#slider #controls label {

		-moz-transform: scale(0.8);

		-webkit-transform: scale(0.8);

		-o-transform: scale(0.8);

		-ms-transform: scale(0.8);

		transform: scale(0.8);

	}



	#slider #slides {

		padding: 1% 0;

		-webkit-border-radius: 0px;

		-moz-border-radius: 0px;

		border-radius: 0px;

	}



	#slider #active {

		margin: 22% 0 0;

	}



}



/* Mobile */



#mobile:checked ~ #slider #controls {

	margin: -28% 0 0 24%;

	width: 50%;

	height: 50px;

}



#mobile:checked ~ #slider #active {

	margin: 23% 0 0;

}



#mobile:checked ~ #slider #slides .info {

	opacity: 0 !important;

}



#mobile:checked ~ #slider #controls label {

	-moz-transform: scale(0.6);

	-webkit-transform: scale(0.6);

	-o-transform: scale(0.6);

	-ms-transform: scale(0.6);

	transform: scale(0.6);

}





@media only screen and (max-width: 450px) {



	#slider #controls {

		margin: -28% 0 0 24%;

		width: 50%;

		height: 50px;

	}



	#slider #active {

		margin: 23% 0 0;

	}



	#slider #slides {

		padding: 1% 0;

		-webkit-border-radius: 0px;

		-moz-border-radius: 0px;

		border-radius: 0px;

	}



	#slider #slides .info {

		opacity: 0 !important;

	}



	#slider #controls label {

		-moz-transform: scale(0.6);

		-webkit-transform: scale(0.6);

		-o-transform: scale(0.6);

		-ms-transform: scale(0.6);

		transform: scale(0.6);

	}



}





/* end slider */