*{box-sizing: border-box }




.slideshow{

border: 5px solid white;
box-shadow: 0 0 5px hsla(0,0%,0%,.5);
overflow: hidden;
max-width: 610px;
margin-left: 190px;
position: relative

}
  
  
.slideshow ul{

padding-bottom: 66.67%;/* ratio pour le responsive */
margin: 0;
list-style-type: none;
position: relative
	
}
    
    
.slideshow li{

top: 0;
left: 0;
animation: slideshow 25s ease infinite;
position: absolute;
opacity: 0;

}
    

.slideshow li:nth-child(2){

animation-delay: 5s

}

.slideshow li:nth-child(3){

animation-delay: 10s

}


.slideshow li:nth-child(4){

animation-delay: 15s

}


.slideshow li:nth-child(5){

animation-delay: 20s

}

    
@keyframes slideshow{
	
0%{opacity: 0}

10%{opacity: 1}

20%{opacity: 1}

25%{opacity: 0}

100%{opacity: 0}
	
} 

    
.slideshow span{

background: rgba(0,0,0,0.7);
height: 40px;
align-items: center;
justify-content: center;
display: flex;
color: white;
position: absolute;
bottom: 0;
right: 0;
left: 0

}

    
/*****barre progression *****/
.barre_progression{ 
	
position: absolute;
left: 0;
width:600px;
bottom: 40px;
height: 5px;
background: white;
animation: barre_progression 25s 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: 0}
	
	}