/*REMEMBER TO ADD THE BROWSER PREFIXES TO ALL APPLICABLE PROPERTIES!*/
/*Adapted from publicly available code at:
 *http://csscience.com/responsiveslidercss3/
 *
 *Original CSS created by Ian Hansson (@teapoted), Feb. 2012
 * 
 */

/* Slider Setup */

div.slideshowcontainer
{
  text-align:left;
  max-width:1280px;
  max-height:280px;
  margin-left:auto;
  margin-right:auto;
  margin-top:5px;
  
  box-shadow: 1px 1px 4px #555;
  padding: 0;
}

input.slidecontrols
{
  display: none;
}

#slide1:checked ~ .slideshowcontainer .inner { margin-left:0; }
#slide2:checked ~ .slideshowcontainer .inner { margin-left:-100%; }
#slide3:checked ~ .slideshowcontainer .inner { margin-left:-200%; }
#slide4:checked ~ .slideshowcontainer .inner { margin-left:-300%; }

.slidecontainer
{
  width: 100%;
  overflow: hidden;
}

div.slide
{
  width:25%;
  float:left;
}

div.slide img
{
  width: 100%;
  max-height:280px;
}

.slideshowcontainer .inner
{
  width: 400%;
  line-height: 0;
}

/* Slider Styling */

/* Control Setup */
#active
{
  margin-top: 10px;
  text-align: center;
}

#active:hover
{
  cursor:default;
}

#active label
{
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left:5px;
  margin-right:5px;
  background: #bbb;
}

#active label:hover
{
  background: #68D6FF;
  cursor:pointer;
  border-color: #777 !important;
}

#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)
{
  background-color: #006DB6;
  background-size: 16px 16px;
  background-image: url("/img/misc/SlideSelector.png");
  background-repeat: no-repeat;
  border-color: #FFFFFF !important;
}

/* Animation */

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

.slideshowcontainer, #active, #active label
{
  -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;
}



@media only screen and (max-width: 850px) and (min-width: 450px)
{

	#slider .slideshowcontainer
	{
	  padding: 1% 0;
	  -webkit-border-radius: 0px;
	  -moz-border-radius: 0px;
	  border-radius: 0px;
	}

}

@media only screen and (max-width: 450px) {

	#slider .slideshowcontainer
	{
	  padding: 1% 0;
	  -webkit-border-radius: 0px;
	  -moz-border-radius: 0px;
	  border-radius: 0px;
	}

}