/* slider container properties */
#image-slider {
  background: #323232;
  border: 5px solid #646464;
  text-align: left; 
  margin: 30px 0px;
  max-width: 350px;
  position:relative; 
}

/* Forces images into the width of the container */
#image-slides article img {
  width: 100%;
}

/* Hides checkboxes */
#image-slider input {
  display: none;
}

image-slider label, a {
  cursor: pointer;
  text-decoration: none;
}

/*#image-slider label:hover {
	color: #8080ff !important;
}*/

/* Makes the checkboxes actually switch images */
#slide1:checked ~ #image-slides .inner { margin-left:0; }
#slide2:checked ~ #image-slides .inner { margin-left:-100%; }
#slide3:checked ~ #image-slides .inner { margin-left:-200%; }
#slide4:checked ~ #image-slides .inner { margin-left:-300%; }
#slide5:checked ~ #image-slides .inner { margin-left:-400%; }

/* hides the four overflown images */
#overflow {
  width: 100%;
  overflow: hidden;
}

/* Sets the total with 5 times the with of a single image */
#image-slides .inner {
  width: 500%;
  line-height: 0;
}

/* Only one image is shown */
#image-slides article {
  width: 20%;
  float: left;
}

/* Set controls width and height */
#controls {
  width: 100%; 
  height: 35px; 
}

/* Set button size and hide initially */
#controls label { 
  display: none;
  width: 35px;
  height: 35px;
  opacity: 0.6;
}

/* Hover opacity of buttons */
#controls label:hover {
  opacity: 1;
}

/* Shows "next" button */
#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/slide-next.png') no-repeat; 
  float: right;
  margin: 0 0 0 0;
  display: block;
  background-color:#323232; 
}

/* Shows previous button */
#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/slide-prev.png') no-repeat; 
  float: left;
  margin: 0 0 0 0;
  display: block;
  background-color:#323232;
}

/* Animation */
#image-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 */
}

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