.slideshow{
border:0px solid white;
box-shadow:0 0 5px hsla(0,0%,0%,.5);
overflow:hidden;

max-width:1366px;
margin:0px auto;
position:relative}
    
.slideshow ul{height:500px;
margin:0;
position:relative}
    
    
.slideshow li{
width:100%;
top:0;
left:0;
position:absolute;
opacity:0;
list-style:none}

.slideshow li img{height:500px;max-width:100%}
.slideshow li:nth-child(1),
.slideshow li:nth-child(2),
.slideshow li:nth-child(3),
.slideshow li:nth-child(4),
.slideshow li:nth-child(5),
.slideshow li:nth-child(6){animation:slideshow 60s ease infinite;-webkit-animation:slideshow 60s ease infinite}    

.slideshow li:nth-child(2){animation-delay:5s;-webkit-animation-delay:5s}
.slideshow li:nth-child(3){animation-delay:15s;-webkit-animation-delay:15s}
.slideshow li:nth-child(4){animation-delay:25s;-webkit-animation-delay:25s}
.slideshow li:nth-child(5){animation-delay:35s;-webkit-animation-delay:35s}
.slideshow li:nth-child(6){animation-delay:35s;-webkit-animation-delay:45s}

       
@keyframes slideshow{0%{opacity:0}10%{opacity:1}20%{opacity:1}25%{opacity:1}30%{opacity:0}100%{opacity:0}} 
@-webkit-keyframes slideshow{0%{opacity:0}10%{opacity:1}20%{opacity:1}25%{opacity:1}30%{opacity:0}100%{opacity:0}} 
    
.description_slideshow{
background:rgba(0,0,0,0.0,7);
width:100%;
height:40px;
position:absolute;
bottom:5px;
left:0}
    
.description_slideshow span{
color:white;
display:block;
font-size:1rem;
line-height:40px}

/*****barre progression *****/
.barre_progression{ 
position:absolute;
top:0;
width:100%; 
height:5px;
background:#ccc;
animation:barre_progression 45s ease-out infinite;
-webkit-animation:barre_progression 45s ease-out infinite}
    
/*****animation barre progression *****/    
@keyframes barre_progression{
0%,20%,40%,60%,80%,100%{width:0%;opacity:0}
4%,24%,44%,64%,84%{width:0%;opacity:.3}
16%,36%,56%,76%,96%{width:100%;opacity:.7}
17%,37%,57%,77%,97%{width:100%;opacity:.3}
18%,38%,58%,78%,98%{width:100%;opacity:.7}
19%,39%,59%,79%,99%{width:100%;opacity:0}}   

@-webkit-keyframes barre_progression{
0%,20%,40%,60%,80%,100%{width:0%;opacity:0}
4%,24%,44%,64%,84%{width:0%;opacity:.3}
16%,36%,56%,76%,96%{width:100%;opacity:.7}
17%,37%,57%,77%,97%{width:100%;opacity:.3}
18%,38%,58%,78%,98%{width:100%;opacity:.7} 
19%,39%,59%,79%,99%{width:100%;opacity:0}}    
   
    
@media screen and (max-width:83.2rem){
.slideshow,
.slideshow ul li,
.description_slideshow{width:100%}      
.slideshow ul{height:500px}
.description_slideshow span{font-size:1rem} 
}  
.classe {
width: 100%;
height: 200px;
right:0;
left:0;
background-color: #FFFFFF;
}