/* 
 * You can use this file to small changes in the css rules without modifying the file style.php
 */
<p>body {<br />
  margin: 0;<br />
  background: #EEE;<br />
  user-select: none;<br />
}</p>
<p>#slider {<br />
  position: relative;<br />
  width: 50%;<br />
  height: 30vw;<br />
  margin: 80px auto;<br />
  #font-family: 'Helvetica Neue', sans-serif;<br />
  perspective: 1400px;<br />
  transform-style: preserve-3d;<br />
}</p>
<p>input[type=radio] {<br />
  position: relative;<br />
  top: 108%;<br />
  left: 50%;<br />
  width: 18px;<br />
  height: 18px;<br />
  margin: 0 15px 0 0;<br />
  opacity: 0.4;<br />
  transform: translateX(-83px);<br />
  cursor: pointer;<br />
}</p>
<p>input[type=radio]:nth-child(5) {<br />
  margin-right: 0px;<br />
}</p>
<p>input[type=radio]:checked {<br />
  opacity: 1;<br />
}</p>
<p>#slider label {<br />
  position: absolute;<br />
  width: 100%;<br />
  height: 100%;<br />
  left: 0;<br />
  top: 0;<br />
  color: white;<br />
  font-size: 70px;<br />
  font-weight: bold;<br />
  border-radius: 5px;<br />
  cursor: pointer;<br />
  display: flex;<br />
  align-items: center;<br />
  justify-content: center;<br />
  transition: transform 400ms ease;<br />
}</p>
<p>#slide1 {<br />
  background: tomato;<br />
}</p>
<p>#slide2 {<br />
  background: yellowgreen;<br />
}</p>
<p>#slide3 {<br />
  background: dodgerblue;<br />
}</p>
<p>#slide4 {<br />
  background: slateblue;<br />
}</p>
<p>#slide5 {<br />
  background: violet;<br />
}</p>
<p>/* Slider Functionality */</p>
<p>/* Active Slide */<br />
#s1:checked ~ #slide1, #s2:checked ~ #slide2, #s3:checked ~ #slide3, #s4:checked ~ #slide4, #s5:checked ~ #slide5 {<br />
  box-shadow: 0 13px 26px rgba(0,0,0, 0.3), 0 12px 6px rgba(0,0,0, 0.2);<br />
  transform: translate3d(0%, 0, 0px);<br />
}</p>
<p>/* Next Slide */<br />
#s1:checked ~ #slide2, #s2:checked ~ #slide3, #s3:checked ~ #slide4, #s4:checked ~ #slide5, #s5:checked ~ #slide1 {<br />
  box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);<br />
  transform: translate3d(15%, 0, -100px);<br />
}</p>
<p>/* Next to Next Slide */<br />
#s1:checked ~ #slide3, #s2:checked ~ #slide4, #s3:checked ~ #slide5, #s4:checked ~ #slide1, #s5:checked ~ #slide2 {<br />
  box-shadow: 0 1px 4px rgba(0,0,0, 0.4);<br />
  transform: translate3d(30%, 0, -250px);<br />
}</p>
<p>/* Previous to Previous Slide */<br />
#s1:checked ~ #slide4, #s2:checked ~ #slide5, #s3:checked ~ #slide1, #s4:checked ~ #slide2, #s5:checked ~ #slide3 {<br />
  box-shadow: 0 1px 4px rgba(0,0,0, 0.4);<br />
  transform: translate3d(-30%, 0, -250px);<br />
}</p>
<p>/* Previous Slide */<br />
#s1:checked ~ #slide5, #s2:checked ~ #slide1, #s3:checked ~ #slide2, #s4:checked ~ #slide3, #s5:checked ~ #slide4 {<br />
  box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);<br />
  transform: translate3d(-15%, 0, -100px);<br />
}</p>