@charset "utf-8";
/* CSS Document */


.responnsive {
	width:100%;
	margin:0 auto;
	display:block;
	}

.img-responsive{ /*images bandeau */
	max-width : 100%;
	display: block;
}
.logo-responsive { /*image logo en-tete*/
	max-width : 100%;
	display: block;
	height: auto;
}

.img-plan {
	width:50%;
	}
.formation-responsive { /* image à droite illustrant la formation */
	float:right;
	width:auto;
	display:block;
	margin-right:10%;
	margin-top: 5%;
}
	
.img-formation {
	text-align:center;
    vertical-align:middle;
    padding-top:30px;
}	
/*img {
	margin-left: auto;
    margin-right: auto;
	}*/
.figure-responsive {
	width:100%;
	margin:0 auto;
	display:block;
	}	
	
.he-responsive {
	width:90%;
	margin: 0 auto;
	height:auto;
	display:block;
	}


.img-responsive-cat {
	/*Cette classe ajoute les propriétés suivantes à l'image :*/
	float:left;
	width:50%;
    height: auto;
	display:block;
}		
@media (max-width: 480px) { /*jaune*/

.logo-responsive {	
	width:100%;
	height:auto;
	display: block;}
	
.img-responsive {
	width : 100%;
	display: block;
	height: auto;
}
.he-responsive {
	width:100%;
	}

.formation-responsive { /* image à droite illustrant la formation */
	float:right;
	width:30%;
	display:block;
	margin-right:10%;
	margin-top: 5%;
}

.img-responsive-cat {
	/*Cette classe ajoute les propriétés suivantes à l'image :*/
	width:30%;
    height: auto;
	background-color:#FF0;
}		
.pied-responnsive {
	width:50%;
	margin:0 auto;
	display:block;
	}
.figure-responsive {
	width:100%;
	margin:0 auto;
	display:block;
	}		
}

@media (min-width: 481px) and (max-width: 768px) { /*rouge*/

.logo-responsive {	
	width:100%;
	height:auto;
	display: block;}
	
.figure-responsive {
	width:100%;
	height:auto;
	display:block;
	}	
	
.img-responsive {
	width : 100%;
	display: block;
	height: auto;}
		
}
@media (min-width: 769px) and (max-width: 1024px) {	/*vert*/

.logo-responsive {	
	width:80%;
	height:auto;
	display: block;}
	
.img-responsive {
	width : 100%;
	display: block;
	height: auto;
}	
	
		
}
	
@media (min-width: 1025px) and (max-width: 1280px) { /*bleu*/	

.logo-responsive {	
	width:70%;
	height:auto;
	display: block;}
	
		
.img-responsive {
	width : 100%;
	display: block;
	height: auto;
}
}
@media (min-width: 1281px) and (max-width: 1600px) {/*rose*/
	
.logo-responsive {	
	width:60%;
	height:auto;
	display: block;}
		
	
.img-responsive {
	width : 100%;
	display: block;
	height: auto;
}
}