/*
Theme Name: Konig Wheels Product Slider
Theme URI: http://www.konigwheels.com
Author: Konig American
Description: Konig Wheels Product Slide Theme.
Version: 1.0
Text Domain: Konig Wheels
Tags: Konig Wheels, Konig Rims, Konig Wheels USA, Konig American

*/

#pslider-outer {margin:auto; position:relative; padding-bottom: 10px; m} /* change padding to move arrows */

#pslider {display: block;overflow: hidden;width: 100%;margin: 0 auto;max-width: 1280px; height: auto; position:relative;}

#pslider-outer .slide-check { position:absolute; left:-9999px }



#pslider .slides { width:500%;     float: left; } /* #### (slides x 100) #### */

#pslider .slides > div { width:20%; /* #### (100 / slides) #### */

  float:left; overflow:hidden; position:relative; 

  -webkit-transform:translate3d(0,0,0); /* http://davidwalsh.name/translate3d */

  -webkit-transition:-webkit-transform .5s ease-in-out; transition:transform .5s ease-in-out

  }

#pslider label.btns {background: #404040;}
   
#btn-1:checked ~ #pslider label.btns#circle-1,
#btn-2:checked ~ #pslider label.btns#circle-2,
#btn-3:checked ~ #pslider label.btns#circle-3,
#btn-4:checked ~ #pslider label.btns#circle-4,
#btn-5:checked ~ #pslider label.btns#circle-5 {
  background: #0066b4;}  

#pslider-outer .arrows { 
  font: 1em/2em Arial;
  position: absolute;
  display: none;
  z-index: 9999;
  bottom: 23%;
  color: #fff;
  background: #222;
  cursor: pointer;
  padding: 20px 10px;
  }

#pslider-outer .arrows:hover { background:#666; color:#222; }

label#circle-1 {left:0; top: 90%;} 
label#circle-2 {left:50px;top: 90%;}
label#circle-3 {left:100px;top: 90%;}
label#circle-4 {left:150px;top: 90%;}
label#circle-5 {left:200px;top: 90%;}



/* #### - define ids of checked buttons/arrows here - #### */

#btn-goto-first:checked ~ #arrow-1, 

#btn-1:checked ~ #arrow-2, 

#btn-2:checked ~ #arrow-3,

#btn-3:checked ~ #arrow-4, 

#btn-4:checked ~ #arrow-5, 

#btn-5:checked ~ #arrow-1 { /* last button always goes to #arrow-1 */
  right:-4px;
  display:block;
  border-radius: 4px;

  }



/* #### - define ids of checked buttons/arrows here - reposition/rotate '>' arrows to fake '<' arrows - #### */

#btn-2:checked ~ #arrow-1, 

#btn-3:checked ~ #arrow-2,

#btn-4:checked ~ #arrow-3, 

#btn-5:checked ~ #arrow-4, 

#btn-1:checked ~ #arrow-5 { /* #btn-1 always goes to last arrow */

  left:-4px; display:block; 
  -webkit-transform:rotate(-180deg); -ms-transform:rotate(-180deg); transform:rotate(-180deg);
  border-radius: 4px;

  }



/* #### - define ids of checked buttons/arrows here - (% increment per slide) - move slides when checked - #### */

#pslider-outer #btn-1:checked ~ #pslider .slides > div, #pslider #btn-goto-first:checked ~ #pslider .slides > div { -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0) }

#pslider-outer #btn-2:checked ~ #pslider .slides > div { -webkit-transform:translate(-100%,0); -ms-transform:translate(-100%,0); transform:translate(-100%,0) }

#pslider-outer #btn-3:checked ~ #pslider .slides > div { -webkit-transform:translate(-200%,0); -ms-transform:translate(-200%,0); transform:translate(-200%,0) }

#pslider-outer #btn-4:checked ~ #pslider .slides > div { -webkit-transform:translate(-300%,0); -ms-transform:translate(-300%,0); transform:translate(-300%,0) }

#pslider-outer #btn-5:checked ~ #pslider .slides > div, #pslider #btn-goto-last:checked ~ #pslider .slides > div { -webkit-transform:translate(-400%,0); -ms-transform:translate(-400%,0); transform:translate(-400%,0) }





/* - #### custom styles for slide content - #### */

#pslider .slides > div > div { font-size:0.875em; padding:1.25em 2em }

#pslider .slides img { float: left;max-width: 180px;height: auto;width: 100%;margin-top: 0.25em;margin-right: .6em; cursor:pointer; }

#pslider .slides .title { display:inline-block; margin-bottom:0.75em }

#pslider .slides .num { float:right; font-size:0.625em; color:#999 }

#pslider .slides .more { text-align:right; font-size:0.875em }





@media ( max-width:30em ) { /* #### - make better use of space at 480px (480/16=30 - 16px being default browser font-size) - #### */

  #pslider-outer { font-size:0.9375em; line-height:1.5em; padding:0 0 1.125em 0 }

  #pslider .slides > div > div { padding:1em 0.75em 1.25em }

  #pslider .slides .more { text-align:center }

}

@media screen and (max-width: 1200px) {
label#circle-1.arrows {left:90%;}
label#circle-2.arrows {left:80%;}
label#circle-3.arrows {left:70%;}
label#circle-4.arrows {left:60%;}
label#circle-5.arrows {left:50%;}
}