/* NEW EXPERIMENT */

/* Slider Setup */



input {

	display: none;

}



#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 .slider-link  img {
	width: 100%;
}



#slides .inner {

	width: 500%;

	line-height: 0;

}



#slides .slider-link {
	width: 20%;
	position: relative;
	float: left;
	transition: ease all 0.5s;
}



/* Control Setup */



#controls {

	margin: -25% 0 0 0;

	width: 100%;

}



#controls label { 

	display: none;

	width: 50px;

	height: 50px;

	opacity: 0.85;

}



#active {

	margin: 29% 0 0;

	text-align: center;	

}



#active label {

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 10px;

	display: inline-block;

	width: 22px;

	height: 22px;

	background: #bbb;

	cursor: pointer;

	box-shadow: 1px 1px 5px #6b6b6b;



}



#active label:hover {

	background: #ccc;

	border-color: #777 !important;

}



#controls label:hover {

	opacity: 1.8;

}



#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) {

	width: 43px;

	height: 43px;

	background: url('../images/next.png') no-repeat;

	float: right;

	margin: 0 -70px 0 0;

	display: block;

	cursor: pointer !important;

		

}





#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) {

	width: 43px;

	height: 43px;

	background: url('../images/prev.png') no-repeat;

	float: left;

	margin: 0 0 0 -70px;

	display: block;

	cursor: pointer;

}



#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: #ff6153;

	border-color: #ff6153 !important;

	box-shadow: 1px 1px 1px #6b6b6b;

	cursor: pointer !important;

}



/* Info Box */



.info {

	line-height: 20px;

	margin: 0 0 -150%;

	position: absolute;

	font-style: italic;

	padding: 30px 30px;

	opacity: 0;

	color: #000;

	text-align: left;

}



.info a{

    color:	#ffffff;

	color: #d6d6d6;

	font-family: 'lowveticaregular';

    font-weight: bold;

	font-size: 25px;

	display: none;

   

}



.info h3 {

	color: #ffffff;

	margin: 0 0 5px;

	font-weight: normal;

	font-size: 40px;

	font-style: normal;

	font-family: 'lowveticaregular';

	display: none;

}



/* Slider Styling */



#slides {

	margin: 20px 0 0;

	padding: 1%;

	z-index: 1;

}





/* 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;

}



.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;

}



/* Respond Options */



#desktop:checked ~ #slider {

	max-width: 889px;

	margin: 0px auto 0px auto;

}



#tablet:checked ~ #slider {

	max-width: 850px;

	margin: 10px auto 0px auto;

}



#mobile:checked ~ #slider {

	max-width: 450px;

		margin: 5px auto 0px auto;

}



#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;

}



.desktop {

	background: url('desktop.png') no-repeat;

}



.tablet {

	background: url('tablet.png') no-repeat;

}



.mobile {

	background: url('mobile.png') no-repeat;

}



/* 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);

	}



}
