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


#planning { /* emplacement image*/
	margin:o auto;
	width:100%;
	height:auto;	
	/*background-color:#FF0;*/
	text-align: center;
	border-bottom-color:#FF0;
  }

figure{
	display: block;
    margin-left: 20%;
    margin-right: auto ;
	float:left;
	width:60%; /*120px;*/
	border: solid #f19008 2px; 
	moz-box-shadow: 8px 8px 12px #aaa; 
	box-shadow: 8px 8px 12px #aaa; 
	-webkit-box-shadow: 8px 8px 12px #aaa;
	text-align: center;
	/*background-color:#F00;*/
	}

figcaption {
	width:100%;
	margin-top:2%;
	margin-right:5%;
	height: auto; /*100px;*/
	vertical-align:middle;
	/*background-color:#00F;*/
}

figure a {
	text-decoration:none;
	color:#00c;}

figure a:hover{
	color:#00C;
	font-style:italic;}
	
	
	
.lien{
	text-decoration: none;
	color:#00C;
	font-style:italic;
}

.stylemarquee {
	position:absolute;
	left: 629px;
	top: 280px;
	font-family: Gabriola, "Gentium Basic", Georgia;
	/*font-family: 'Roboto', sans-serif;*/
	font-size: 72px;
	color:#FFFFFF;
	font-weight:bold;
}
	
.styletexte {
	position:absolute;
	left: 650px;
	top: 120px;
	/*font-family: 'Roboto', sans-serif;*/
	font-family: Gabriola, "Gentium Basic", Georgia;
	font-size: 72px;
	color:#FFFFFF;
	font-weight:bold;
	width: 933px;
	}	

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

.stylemarquee {
	left: 100px;
	top: 80px;
	font-size: 20px;
		}

.styletexte {
	left: 100px;
	top: 35px;
	font-size: 24px;
	font-weight:bold;	}
	
figure {
	width:100%;
	margin-left:2%;}
	
.responsive {
	width:80%;}		
}
@media (min-width: 481px) and (max-width: 768px) { /*rouge*/

.stylemarquee {
	left: 200px;
	top: 150px;
	font-size: 20px;
	marquee-speed:slow;
	}

.styletexte {
	left: 200px;
	top: 100px;
	font-size: 24px;
		}
	
figure {
	width:100%;
	margin-left:2%;}
	
	.responsive {
	width:auto;				
}

@media (min-width: 769px) and (max-width: 1024px) {	/*vert*/

.stylemarquee {
	left: 250px;
	top: 160px;
	font-size: 32px;
	marquee-speed:slow;
	}

.styletexte {
	left: 250px;
	top: 110px;
	font-size: 32px;
		}	
}
@media (min-width: 1025px) and (max-width: 1280px) { /*bleu*/
.stylemarquee {
	left: 280px;
	top: 200px;
	font-size: 36px;
	marquee-speed:normal;
	}

.styletexte {
	left: 280px;
	top: 130px;
	font-size: 36px;
		}	
}

@media (min-width: 1281px) and (max-width: 1600px) { /*rose*/

.stylemarquee {
	left: 500px;
	top: 280px;
	font-size: 60px;
	marquee-speed:normal;
}
	
.styletexte {
	left: 500px;
	top: 200px;
	font-size: 60px;
	}