html, body, header{
    margin: 0;
    padding: 0;
}
body{
    
    overflow: hidden;
    
}
aside{
    margin-left: 7%;
    height: 90%;
    width: 50%;
    margin-top: 10%;
    position: fixed;
    z-index: 10;
    

}
.partenaire{
    border: 1px solid rgb(3, 14, 116);
    border-radius: 15px;
    height:80%;
    width: 50%;
    background-color: rgba(247, 223, 89, 0.5);
    text-align: center;
}
.partenaire h3{
    color: rgb(21, 3, 87);
    font-weight: bold;
    font-family: 'poppins';
    font-size: 30px;
    border: solid rgb(150, 3, 3);
    border-radius: 10px;
    width: 300px;
   
}
a{
    text-decoration: none;
    color: firebrick;
}
a :hover{
    color: rgb(110, 4, 4);
}



h1{
    font-family:Vivaldi ;
    margin-top: 2px;
}
.conteneur{
    width: 100%;
    height: 100%;
    animation: glisse 20s infinite;

}
    
.navigation{
    position: fixed;
    margin:0;
    padding: 0;
    z-index: 10;
}
    
.menu{
    position: fixed;
    display: inline;
    
    background-color: rgba(13, 192, 236, 0.5);
    box-shadow: 0 6px 15px #333;
    width: 100%;
    padding-left: 0px;
    margin: 0;
    
 }
   


.menu li{
    display: inline;
    list-style: none;
    margin-left: 35px;
    
    
}
.menu a {
    display: inline-block;
    font-weight: bold;
    color:rgb(1, 1, 87) ;
    text-decoration: none;
    padding:  5px 7px;
    margin: 3px 2px;
    
}
 .menu a:hover{
    
    color: rgb(241, 243, 243);
    
}
.menu li:hover{
    background-color:rgb(1, 1, 87) ;
    border-radius: 4px;
    padding: 2px 2px;
}
.menu_connexion a{
	display:inline-block;
	color: #FFF;
	border-radius:2px;
}
.menu_connexion li{
	display:inline;
	margin-left: 5px;
	background-color:rgb(1, 1, 87);
	border-radius:3px;
	padding: 2px 2px;
}
.menu_connexion {
	display:inline;
}
.menu_connexion a:hover{
	color: rgb(1, 1, 87) ;
}
.menu_connexion li:hover {
	background-color:rgb(241, 243, 243);
}
form{
	display:inline;
	margin-left:30px;
	
}
#search{
	padding:5px;
	border-radius: 30px;
    outline:none;
    padding-left:30px;
	border:3px solid rgb(1, 1, 87);
	margin-bottom:2px;
	 width: 40px;
	background:url(../image/boutonrecherche.png) right no-repeat;
	transition: width 2s;
}
#search:hover{
	width: 300px;
	
}

.media{
	display:inline;
	margin-left:15px;
	transition: margin-top 2s;
}

#media1{
display:inline;
vertical-align:middle;
}
#media2{
	display:inline;
	vertical-align:middle;
	margin-left:-5px;
}
#media3{
	display:inline;
	vertical-align:middle;
	margin-left:-5px;
}
#media4{
	display:inline;
	vertical-align:middle;
	margin-left:-5px;
}
#media5{
	display:inline;
	vertical-align:middle;
	margin-left:-5px;
}
	
	
	
	
    

@keyframes glisse {
    0% {
        transform: translateY(0);
    }
    20%{
        transform: translateY(0);
    }
    25%{
        transform: translateY(-100%);
    }
    45%{
        transform: translateY(-100%);
    }
    50%{
        transform: translateY(-200%);
    }
    70%{
        transform: translateY(-200%);
    }
    75%{
        transform: translateY(-300%);
    }
    95%{
        transform: translateY(-300%);
    }
    100%{
        transform: translateY(-300%);
    }
}



@keyframes figcaptionner {
    0% {
        transform: translateX(1000px);
    }
    3% {
        transform: translateX(1000px);
    }
    5% {
        transform: translateX(0px);
    }
    17% {
        transform: translateX(0px);
    }
    21% {
        transform: translateX(1000px);
    }
    25%{
        transform: translateX(1000px);
    }
    
    27%{
        transform: translateX(0px);
    }
    42%{
        transform: translateX(0px);
    }
    46%{
        transform: translateX(1000px);
    }
    50%{
        transform: translateX(1000px);
    }
    52%{
        transform: translateX(0px);
    }
    67%{
        transform: translateX(0px);
    }
    71%{
        transform: translateX(1000px);
    }
    75%{
        transform: translateX(1000px);
    }
    77%{
        transform:translateX(0px);
    }
    93%{
        transform:translateX(0px);
    }
    96%{
        transform:translateX(1000px);
    }
    100%{
        transform: translateX(1000px);
    }
}
.legende figcaption{
    animation: figcaptionner 20s infinite;
}

/* styles de nos légendes */


.entete figcaption {
    position: absolute;
    right: 40px;
    bottom: 30%;    
    width: 400px;
   padding-left: 20px;
	padding-right: 20px;
	padding-bottom:40px;
   height:200px;
	margin-right: 20px;
    border-top: 2px solid rgb(3, 14, 116);
    border-radius: 15px;
	
	
	background: rgb(13, 192, 236);
	background: rgba(13, 192, 236,0.6);
	
	text-shadow: -1px -1px 0 rgba(175, 174, 174, 0.3);
}
.lireplus{
    position: absolute;
    right: 15px;
    bottom: 15px;
    font-family: Georgia, Times, serif;
    font-size: 0.7em;
    text-align: center;
    border-radius: 6px;
    background: rgb(3, 14, 116);
    background: rgba(3, 14, 116,0.9);
    width: 100px;
    height: 30px;
    color: blanchedalmond;
	padding-left:20px;

}
.lireplus p{
    margin-top: 6px;
}
.lireplus a{
    text-decoration: none;
    color:cornsilk;
}
.lireplus:hover {
    border-radius: 6px;
    background: rgba(255, 248, 220, 1.2);

    color:rgb(3, 14, 116) ;
}
.lireplus a:hover {
   font-weight: bold;
    color:rgb(3, 14, 116) ;
}


.image1 figcaption {
    position: absolute;
    right: 40px;
    bottom: 30%;    
    width: 400px;
    height: 200px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom:40px;
	margin-right: 20px;
    border-top: 2px solid rgb(3, 14, 116);
    border-radius: 15px;
	
	background: rgb(13, 192, 236);
	background: rgba(13, 192, 236,0.6);
	
	text-shadow: -1px -1px 0 rgba(175, 174, 174, 0.3);
}
figcaption h2{
	font-family: Vivaldi;
	text-align: center;
	color: red;
	margin-top: -5px;
	font-size: 45px;
}

figcaption p{
	text-align:justify;
    letter-spacing: 0.02em;
    font-size: 1.2em;
    word-spacing: 0.03em;
	color: rgb(250, 250, 250);
	
	
}
	

.image2 figcaption {
	position: absolute;
    right: 40px;
    bottom: 30%; 
    width: 400px;
    height: 200px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom:40px;
	margin-right: 20px;
    border-top: 2px solid rgb(3, 14, 116);
    border-radius: 15px;
	
	
	background: rgb(13, 192, 236);
	background: rgba(13, 192, 236,0.6);
	
	text-shadow: -1px -1px 0 rgba(175, 174, 174, 0.3);
}
.image3 figcaption {
	position: absolute;
    right: 40px;
    bottom: 30%; 
    width: 400px;
    height: 200px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom:40px;
	margin-right: 20px;
    border-top: 2px solid rgb(3, 14, 116);
    border-radius: 15px;
	
	
	background: rgb(13, 192, 236);
	background: rgba(13, 192, 236,0.6);
	
	text-shadow: -1px -1px 0 rgba(175, 174, 174, 0.3);
}



header, body, html {
    width: 100%;
    height: 100%;
}

header{
    
    background-image: url(../image/image_glory6.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100%;
    color: rgb(241, 243, 243);

    

}

.image1{
    background-image: url(../image/Transport1.jpg);
    position: relative;
    height: 100vh;
    background-size: cover;
    
    background-position: center;
}
.image2{
    background-image: url(../image/Assurance1.jpg);
    position: relative;
    height: 100vh;
    background-size: cover;
    
    background-position: center;
}
.image3{
    background-image: url(../image/agriculture.jpg);
    position: relative;
    height: 100vh;
    background-size: cover;
    
    background-position: center;
}