@charset "UTF-8";
body {
  margin: 0;
  /*background: #EEE;*/
  user-select: none;
  /*font-family: sans-serif;*/
}


#slider {
  position: relative;
  width: 30%;
  height: 22vw;
  margin: 50px auto;
  /*background: #EEE;*/
  font-family: 'Helvetica Neue', sans-serif;
  perspective: 800px;
  transform-style: preserve-3d;
}

#slider input[type=radio] {
  background-color: black;	
  position: relative;
  top: 120%;
  left: 30%;
  width: 14px;
  height: 14px;
  margin: 0 5px 0 0;
  opacity: 0.4;
  transform: translateX(-90px);
  cursor: pointer;
}


#slider input[type=radio]:nth-child(13) {
  margin-right: 0px;
}

#slider input[type=radio]:checked {
  opacity: 1;
}

#slider label,
#slider label img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  color: white;
  font-size: 70px;
  font-weight: bold;
  border-radius: 30px;
  border-style : solid; /*moi*/
  border-width: 1px; /*moi*/
  border-color: #408080; /*moi*/
  padding : 0px; /*moi*/
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 400ms ease;
}



/* Slider Functionality */

/* Active Slide */
#s1:checked ~ #slide1,
 #s2:checked ~ #slide2,
  #s3:checked ~ #slide3,
   #s4:checked ~ #slide4,
	#s5:checked ~ #slide5,
	 #s6:checked ~ #slide6,
	  #s7:checked ~ #slide7,
	   #s8:checked ~ #slide8,
		#s9:checked ~ #slide9,
		 #s10:checked ~ #slide10,
		  #s11:checked ~ #slide11,
		   #s12:checked ~ #slide12,
		    #s13:checked ~ #slide13 
{
	  box-shadow: 13px 13px 16px rgba(0,0,0, 0.3), 12px 12px 6px rgba(0,0,0, 0.2);
	  transform: translate3d(0%, 0, 0px);
}
/* 2  next1*/

 #s1:checked ~ #slide2,
  #s2:checked ~ #slide3,
   #s3:checked ~ #slide4,
	#s4:checked ~ #slide5,
	 #s5:checked ~ #slide6,
	  #s6:checked ~ #slide7,
	   #s7:checked ~ #slide8,
		#s8:checked ~ #slide9,
		 #s9:checked ~ #slide10,
		  #s10:checked ~ #slide11,
		   #s11:checked ~ #slide12,
		    #s12:checked ~ #slide13,
		     #s13:checked ~ #slide1 
{
	  box-shadow: 12px 12px 14px rgba(0,0,0, 0.3), 12px 12px 6px rgba(0,0,0, 0.2);
	  transform: translate3d(30%, 0, -70px);
}
/*3 next2*/
  #s1:checked ~ #slide3,
   #s2:checked ~ #slide4,
	#s3:checked ~ #slide5,
	 #s4:checked ~ #slide6,
	  #s5:checked ~ #slide7,
	   #s6:checked ~ #slide8,
		#s7:checked ~ #slide9,
		 #s8:checked ~ #slide10,
		  #s9:checked ~ #slide11,
		   #s10:checked ~ #slide12,
		    #s11:checked ~ #slide13,
		     #s12:checked ~ #slide1,
		       #s13:checked ~ #slide2		     
{
	  box-shadow: 10px 10px 10px rgba(0,0,0, 0.3), 0 10px 5px rgba(0,0,0, 0.2);
	  transform: translate3d(60%, 0, -140px);
}

/*4 next3*/
   #s1:checked ~ #slide4,
	#s2:checked ~ #slide5,
	 #s3:checked ~ #slide6,
	  #s4:checked ~ #slide7,
	   #s5:checked ~ #slide8,
		#s6:checked ~ #slide9,
		 #s7:checked ~ #slide10,
		  #s8:checked ~ #slide11,
		   #s9:checked ~ #slide12,
		    #s10:checked ~ #slide13,
		     #s11:checked ~ #slide1,
		       #s12:checked ~ #slide2,
		         #s13:checked ~ #slide3		     
{
	  box-shadow: 8px 8px 6px rgba(0,0,0, 0.3), 0 8px 4px rgba(0,0,0, 0.2);
	  transform: translate3d(90%, 0, -210px);
}

/*5 next4*/
	#s1:checked ~ #slide5,
	 #s2:checked ~ #slide6,
	  #s3:checked ~ #slide7,
	   #s4:checked ~ #slide8,
		#s5:checked ~ #slide9,
		 #s6:checked ~ #slide10,
		  #s7:checked ~ #slide11,
		   #s8:checked ~ #slide12,
		    #s9:checked ~ #slide13,
		     #s10:checked ~ #slide1,
		       #s11:checked ~ #slide2,
		         #s12:checked ~ #slide3,
		           #s13:checked ~ #slide4		     
{
	  box-shadow: 6px 6px 4px rgba(0,0,0, 0.3), 0 6px 3px rgba(0,0,0, 0.2);
	  transform: translate3d(120%, 0, -280px);
}
/*6 next5*/
 #s1:checked ~ #slide6,
  #s2:checked ~ #slide7,
   #s3:checked ~ #slide8,
	#s4:checked ~ #slide9,
	 #s5:checked ~ #slide10,
	  #s6:checked ~ #slide11,
	   #s7:checked ~ #slide12,
	    #s8:checked ~ #slide13,
	     #s9:checked ~ #slide1,
	       #s10:checked ~ #slide2,
	        #s11:checked ~ #slide3,
	         #s12:checked ~ #slide4,
	          #s13:checked ~ #slide5		            		     
{
	  box-shadow: 4px 4px 3px rgba(0,0,0, 0.3), 0 4px 2px rgba(0,0,0, 0.2);
	  transform: translate3d(150%, 0, -350px);
}

/*7 next6*/
  #s1:checked ~ #slide7,
   #s2:checked ~ #slide8,
	#s3:checked ~ #slide9,
	 #s4:checked ~ #slide10,
	  #s5:checked ~ #slide11,
	   #s6:checked ~ #slide12,
	    #s7:checked ~ #slide13,
	     #s8:checked ~ #slide1,
	       #s9:checked ~ #slide2,
	         #s10:checked ~ #slide3,
	           #s11:checked ~ #slide4,
	            #s12:checked ~ #slide5,
	             #s13:checked ~ #slide6		            		     
{
	  box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
	  transform: translate3d(180%, 0, -420px);
}
/*8 previous6*/
   #s1:checked ~ #slide8,
	#s2:checked ~ #slide9,
	 #s3:checked ~ #slide10,
	  #s4:checked ~ #slide11,
	   #s5:checked ~ #slide12,
	    #s6:checked ~ #slide13,
	     #s7:checked ~ #slide1,
	       #s8:checked ~ #slide2,
	         #s9:checked ~ #slide3,
	           #s10:checked ~ #slide4,
	            #s11:checked ~ #slide5,
	             #s12:checked ~ #slide6,
	               #s13:checked ~ #slide7	            		     
{
	  box-shadow: 2px 2px 2px rgba(0,0,0, 0.3);
	  transform: translate3d(-180%, 0, -420px);
}
/*9 previous5*/
	#s1:checked ~ #slide9,
	 #s2:checked ~ #slide10,
	  #s3:checked ~ #slide11,
	   #s4:checked ~ #slide12,
	    #s5:checked ~ #slide13,
	     #s6:checked ~ #slide1,
	       #s7:checked ~ #slide2,
	         #s8:checked ~ #slide3,
	           #s9:checked ~ #slide4,
	            #s10:checked ~ #slide5,
	             #s11:checked ~ #slide6,
	               #s12:checked ~ #slide7,
	                 #s13:checked ~ #slide8	               	            		     
{
	  box-shadow: 4px 4px 3px rgba(0,0,0, 0.3), 0 4px 2px rgba(0,0,0, 0.2);
	  transform: translate3d(-150%, 0, -350px);
}

/*10 previous4*/
 #s1:checked ~ #slide10,
  #s2:checked ~ #slide11,
   #s3:checked ~ #slide12,
    #s4:checked ~ #slide13,
     #s5:checked ~ #slide1,
       #s6:checked ~ #slide2,
         #s7:checked ~ #slide3,
           #s8:checked ~ #slide4,
            #s9:checked ~ #slide5,
             #s10:checked ~ #slide6,
               #s11:checked ~ #slide7,
                 #s12:checked ~ #slide8,
                  #s13:checked ~ #slide9	                 	               	            		     
{
	  box-shadow: 6px 6px 4px rgba(0,0,0, 0.3), 0 6px 3px rgba(0,0,0, 0.2);
	  transform: translate3d(-120%, 0, -280px);
}

/*11 previous3*/
  #s1:checked ~ #slide11,
   #s2:checked ~ #slide12,
    #s3:checked ~ #slide13,
     #s4:checked ~ #slide1,
       #s5:checked ~ #slide2,
         #s6:checked ~ #slide3,
           #s7:checked ~ #slide4,
            #s8:checked ~ #slide5,
             #s9:checked ~ #slide6,
               #s10:checked ~ #slide7,
                 #s11:checked ~ #slide8,
                  #s12:checked ~ #slide9,
                   #s13:checked ~ #slide10                 	                 	               	            		     
{
	  box-shadow: 8px 8px 6px rgba(0,0,0, 0.3), 0 8px 4px rgba(0,0,0, 0.2);
	  transform: translate3d(-90%, 0, -210px);
}

/*12 previous2*/
   #s1:checked ~ #slide12,
    #s2:checked ~ #slide13,
     #s3:checked ~ #slide1,
       #s4:checked ~ #slide2,
         #s5:checked ~ #slide3,
           #s6:checked ~ #slide4,
            #s7:checked ~ #slide5,
             #s8:checked ~ #slide6,
               #s9:checked ~ #slide7,
                 #s10:checked ~ #slide8,
                  #s11:checked ~ #slide9,
                   #s12:checked ~ #slide10,
                     #s13:checked ~ #slide11                  	                 	               	            		     
{
	  box-shadow: 10px 10px 10px rgba(0,0,0, 0.3), 0 10px 5px rgba(0,0,0, 0.2);
	  transform: translate3d(-60%, 0, -140px);
}

/*13 previous1*/
    #s1:checked ~ #slide13,
     #s2:checked ~ #slide1,
       #s3:checked ~ #slide2,
         #s4:checked ~ #slide3,
           #s5:checked ~ #slide4,
            #s6:checked ~ #slide5,
             #s7:checked ~ #slide6,
               #s8:checked ~ #slide7,
                 #s9:checked ~ #slide8,
                  #s10:checked ~ #slide9,
                   #s11:checked ~ #slide10,
                     #s12:checked ~ #slide11,
                        #s13:checked ~ #slide12                                       	                 	               	            		     
{
	  box-shadow: 12px 12px 14px rgba(0,0,0, 0.3), 0 12px 6px rgba(0,0,0, 0.2);
	  transform: translate3d(-30%, 0, -70px);
}

/* ---------------------------------------------------------------------------- 

 Next Slide 
#s1:checked ~ #slide2,
 #s2:checked ~ #slide3,
  #s3:checked ~ #slide4,
   #s4:checked ~ #slide5,
    #s5:checked ~ #slide1 {
  box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
  transform: translate3d(30%, 0, -100px);
}


 Next to Next Slide 
#s1:checked ~ #slide3,
 #s2:checked ~ #slide4,
  #s3:checked ~ #slide5,
   #s4:checked ~ #slide1,
    #s5:checked ~ #slide2 {
  box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
  transform: translate3d(60%, 0, -250px);
}

 Previous to Previous Slide 
#s1:checked ~ #slide4,
 #s2:checked ~ #slide5,
  #s3:checked ~ #slide1,
   #s4:checked ~ #slide2,
    #s5:checked ~ #slide3 {
  box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
  transform: translate3d(-60%, 0, -250px);
}

 Previous Slide 
#s1:checked ~ #slide5,
 #s2:checked ~ #slide1,
  #s3:checked ~ #slide2,
   #s4:checked ~ #slide3,
    #s5:checked ~ #slide4 {
  box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
  transform: translate3d(-30%, 0, -100px);
}
*/