/*--------- slider ---------*/

.slider { 
     width: 600px; 
     height: 450px;
     overflow: hidden; 
     margin: auto
   }

.slides { 
     width: 2400px;
     animation-duration: 20s;
     animation-name: glisse;
     animation-iteration-count: infinite;
   }

.slide {
     float: left
   }

@keyframes glisse {
   0% { transform: translateX(0);}
   10% { transform: translateX(0);}
   25% { transform: translateX(-600px);}
   35% { transform: translateX(-600px);}  
   50% { transform: translateX(-1200px);}
   60% { transform: translateX(-1200px);}
   75% { transform: translateX(-1800px);}
   85% { transform: translateX(-1800px);}
   100% { transform: translateX(0);}
	}