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


.gauche {
	width:15%;
	float:left;
	margin-top:5%;
	margin-left:2%;}
.centre {
	float:left;
	width:60%;
	}
.droite {
	width:15%;
	float:right;
	margin-top:8%;
	margin-right:2%;
	}

#icones {
	margin:0 auto;
	width:100%;
	background-image:url(../images/bandeau_contact0.gif);
	/*background-image:url(../images/bandeau-fond-contact.jpg);*/
	height:440px;	
	}
.icone-responsive {
	max-width : 100%;
	display: block;
	height: auto;
	vertical-align:bottom;
	}	

marquee {
	width:50%;
	font-size:48px;
	animation: defilement 5s infinite linear;
	color:white;
    text-shadow: 2px 2px 4px black;
}	

#container {
  box-sizing : border-box;
  border-radius:5px;
  background-color:#eae4e6; /*#f2f2f2;*/
  padding:20px;
  width: 90%;
  /* redéfinition 400 + 2*20 */
/*  max-width: 780px;*/
  margin:0 auto;
	}	

h2  {
  color: #ffc800;
  width: 100%;
}

	
@media (max-width: 480px) { /*jaune*/

#icones {
	margin:0 auto;
	width:100%;
	/*background-image:url(images/bandeau.jpg);*/
	height:120px;}
	
marquee p{
	width:50%;
	color:#000;
	font-size:14px;
	color:white;
    text-shadow: 2px 2px 4px black;
}

}

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

#icones {
height:180px;
padding-top:30px;}


	
marquee p{
	width:50%;
	color:#000;
	font-size:18px;
	 -webkit-animation: marquee 50s linear infinite;
          animation: marquee 50s linear infinite;
		  padding-bottom:20px;
		  color:white;
    text-shadow: 2px 2px 4px black;
}
}
@media (min-width: 769px) and (max-width: 1024px) {	/*vert*/

#icones {
height:220px;}



	
marquee p{
	width:50%;
	color:#000;
	font-size:24px;
	padding-bottom:30px;
	color:white;
    text-shadow: 2px 2px 4px black;
	}	

}
@media (min-width: 1025px) and (max-width: 1280px) { /*bleu*/

#icones {
height:300px;
padding-top:30px;}


marquee p{
	width:50%;
	color:#000;
	font-size:24px;
	padding-bottom:50px;
	color:white;
    text-shadow: 2px 2px 4px black;
	}	


}
@media (min-width: 1281px) and (max-width: 1600px) { /*rose*/
#icones {
height:350px;
padding-top:30px;}

.icone1{	
	margin-top:-0.5em;	}
	
.icone2{	
	margin-top:-0.5em;}
	
.icone3{	
	margin-top:-0.5em;}
	
.icone4{	
	margin-top:-0.5em;
	}
	
.class_test   p.text {
	color:#00F;/* #000;*/
	font-weight:normal;
	font-size:14px;	
	width:12em;
	margin-left:-2.6em;}
	
marquee p{
	width:50%;
	color:#F0F;
	font-size:28px;
	padding-bottom:50px;	
color:white;
    text-shadow: 2px 2px 4px black;
}

}