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

figure{
	float: left;
	width:40%;
	font-size: smaller;
	text-align:center;
	/*border: thin silver solid;*/
	border: solid #f19008 2px; 
	moz-box-shadow: 8px 8px 12px #aaa; 
	box-shadow: 8px 8px 12px #aaa; 
	-webkit-box-shadow: 8px 8px 12px #aaa;
	margin: 0.5em;
	padding: 0.5em;
	height:400px;
	margin-left:5%;}

figcaption {
  padding: 0.5em;}

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

figure a:hover{
	color:#00C;
	font-style:italic;}
		 
.bloc  { /*pour positionner en savoir + */
	text-transform: uppercase;
	font-weight:bold;
	border:1px solid blue ;/*dotted #CCCCCC;*/
	padding:1%; /*0.5em;*/
	font-size:1em;}


@media (max-width: 480px) { /*jaune*/
figure{
	float: left;
	width: 100%;
	font-size: 10px;
	padding: 0.5em;
	height:350px;
	margin-left:1%;}
	
.bloc {
	font-size:10px;}
	
h2 {font-size:12px;}
p {font-size:12px;}	


}
@media (min-width: 481px) and (max-width: 768px) { /*rouge*/
figure{
	float:left;
	width: 80%;
	font-size: 10px;
	/*padding: 0.5em;*/
	height:350px;
	margin-left:10%;}
	
.bloc {
	font-size:10px;}
	
h2 {font-size:12px;}
p {font-size:12px;}		

}
@media (min-width: 769px) and (max-width: 1024px) {	/*vert*/
figure{
	float: left;
	width: 60%;
	font-size: 12px;
	/*padding: 0.5em;*/
	height:320px;
	margin-left:15%;}
	
.bloc {
	font-size:12px;}
	
h2 {font-size:12px;}
p {font-size:12px;}		

}
@media (min-width: 1025px) and (max-width: 1280px) { /*bleu*/
	
figure{
	float: left;
	width: 40%;
	font-size: 12px;
	/*padding: 0.5em;*/
	height:350px;
	margin-left:5%;}
	
.bloc {
	font-size:12px;}
	
h2 {font-size:14px;}
p {font-size:12px;}		


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

figure{
	float: left;
	width: 40%;
	font-size: 12px;
	/*padding: 0.5em;*/
	height:350px;
	margin-left:2%;}
	
.bloc {
	font-size:12px;}
	
h2 {font-size:14px;}
p {font-size:12px;}		


}