body {
	width: 100%;
}

.ml5 {
  font-weight: 200;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: green;
  text-align: center;
}

a:hover {
	text-decoration: underline;
	background-color: #31D116;
}

a:active {
	background-color: #FFCC66;
}

a:focus {
	background-color: #FFCC66;
}

a {
  display: block;
  background: green;
  color: white;
  font: 1em Arial,sans-serif;
  line-height: 1.6em;
  text-align: center;
  text-decoration: none;
  padding: 4px 4px;
  border-radius: 5px;
  box-shadow: 0px 6px 6px black;
  border: 2px solid black;
  -webkit-transition-property: all;
				-webkit-transition-duration: 1s;
				
          	-moz-transition-property: all;
				-moz-transition-duration: 1s;
				
			-o-transition-property: all;
				-o-transition-duration: 1s;
				
			-ms-transition-property: all;
				-ms-transition-duration: 1s;

				transition-property: all;
				transition-duration: 1s;
}

nav {
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 30px;
	padding-bottom: 30px;
	width: 300px;
	opacity: 1;
}

h1 {
	font-weight: bold;
}
	
.title{
    position:relative;
    text-align:center;
}
.title::before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    background:#32CD32;
    height:2px;
    z-index:-1;
}
.title span{
    background:#32CD32;
    padding:4px 8px;
	box-shadow: 5px 5px 5px black;
}

.slideshow{
border:5px solid white;
box-shadow:0 0 5px hsla(0,0%,0%,.5);
overflow:hidden;
max-width:800px;
margin:10px auto;
position:relative}

.slideshow ul{
height:500px;
margin:0;
position:relative}


.slideshow li{
width:800px;
height: 500px;
top:0;
left:0;
animation:slideshow 25s ease infinite;
-webkit-animation:slideshow 25s ease infinite;
position:absolute;
opacity:0;
list-style:none}

.slideshow li img{height:auto;max-width:100%}



.slideshow li:nth-child(2){animation-delay:5s;-webkit-animation-delay:5s}
.slideshow li:nth-child(3){animation-delay:10s;-webkit-animation-delay:10s}
.slideshow li:nth-child(4){animation-delay:15s;-webkit-animation-delay:15s}
.slideshow li:nth-child(5){animation-delay:20s;-webkit-animation-delay:20s}


@keyframes slideshow{0%{opacity:0}10%{opacity:1}20%{opacity:1}25%{opacity:0}100%{opacity:0}} 
@-webkit-keyframes slideshow{0%{opacity:0}10%{opacity:1}20%{opacity:1}25%{opacity:0}100%{opacity:0}} 

.description_slideshow{
background:rgba(0,0,0,0.7);
width:100%;
height:48px;
text-align:center;
position:absolute;
bottom:0;
left:0}

.description_slideshow span{
color:white;
display:block;
font-size:1rem;
line-height:48px}

/*****barre progression *****/
.barre_progression{ 
position:absolute;
bottom:48px;
width:100%; 
height:5px;
background:white;
animation:barre_progression 25s ease-out infinite;
-webkit-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}}

@-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:0}} 


@media screen and (max-width:41.6rem){

.slideshow,
.slideshow ul li,
.description_slideshow{

width:100%

}

.slideshow ul{

height:auto

}

.description_slideshow span{

font-size:1rem
} 
} 

.animate-in {
    -webkit-animation: fadeIn .5s ease-in;
    animation: fadeIn .5s ease-in;
	animation-duration: 3s;
}
.animate-out {
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    opacity: 0;
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}