/*--------------------------------------------
Eléments adaptatifs et slider
---------------------------------------------*/
/*============================================
maximum
=============================================*/
@media (min-width: 1401px) {
	body {
	background: url(../images/background2000.jpg) no-repeat center fixed; 
	-webkit-background-size: cover; /* Chrome et Safari */
	-moz-background-size: cover; /* Firefox */
	-o-background-size: cover; /* Opera */
	background-size: cover; /* version standardisée */
	}
	#content {min-height: 80vh;}
	#conteneur {width: 80%; margin: auto; position: relative;}
	#videos {position: absolute; top:0; left: 15%;}
	.annonce_texte {font-size: 120%; width: 45%; margin-left: 50%; background-color: rgba(255, 255, 255, 0.9);}
	.moyen {font-size: 100%;}
	.small {font-size: 90%;}
	.presentation p {font-size: 150%; width: 60%; margin: auto;}
	.rslides {max-width:65%; margin: 0 auto;}
	#personnages {margin-left: 15%;}
	.personnages {width: 46%; float: right;}
	.contact {width: 30%; padding: 10% 0;}
}
/*============================================
wider
=============================================*/
@media (min-width: 1301px) and (max-width: 1400px) {
	body {
	background: url(../images/background1400.jpg) no-repeat center fixed; 
	-webkit-background-size: cover; /* Chrome et Safari */
	-moz-background-size: cover; /* Firefox */
	-o-background-size: cover; /* Opera */
	background-size: cover; /* version standardisée */
	}
	#content {min-height: 80vh;}
	#conteneur {width: 80%; margin: auto; position: relative;}
	#videos {position: absolute; top:0; left: 15%;}
	.annonce_texte {font-size: 120%; width: 45%; margin-left: 50%; background-color: rgba(255, 255, 255, 0.9);}
	.moyen {font-size: 100%;}
	.small {font-size: 90%;}
	.presentation p {font-size: 150%; width: 60%; margin: auto;}
	.rslides {max-width:70%; margin: 0 auto;}
	#personnages {margin-left: 15%;}
	.personnages {width: 42%; float: right;}
	.contact {width: 30%; padding: 10% 0;}
}
/*============================================
wide
=============================================*/
@media (min-width: 1059px) and (max-width: 1300px) {
	body {
	background: url(../images/background1300.jpg) no-repeat center fixed; 
	-webkit-background-size: cover; /* Chrome et Safari */
	-moz-background-size: cover; /* Firefox */
	-o-background-size: cover; /* Opera */
	background-size: cover; /* version standardisée */
	}
	content {min-height: 80vh;}
	#conteneur {width: 80%; margin: auto; }
	#videos { top:0; left: 15%;}
	.annonce_texte {width: 50%; margin-left: 50%; font-size: 110%; background-color: rgba(255, 255, 255, 0.9); padding-bottom: 6%;}
	.moyen {font-size: 100%;}
	.small {font-size: 90%;}
	/*.video {float: left;}*/
	.presentation {font-size: 150%; padding-top: 1em;}
	.rslides {max-width:80%; margin: 0 auto;}
	#personnages {margin-left:8em;}
	.personnages {width: 33%; float: right;}
	.contact {width: 30%; padding: 10% 0;}
}
/*============================================
medium
=============================================*/
@media (min-width: 869px) and (max-width: 1058px) {
	body {
	background: url(../images/background1100.jpg) no-repeat center fixed; 
	-webkit-background-size: cover; /* Chrome et Safari */
	-moz-background-size: cover; /* Firefox */
	-o-background-size: cover; /* Opera */
	background-size: cover; /* version standardisée */
	}
	.presentation {font-size: 130%; line-height: 1.3em;}
	.annonce_texte {font-size: 150%; width: 50%; background-color: rgba(255, 255, 255, 0.9); margin: auto; margin-bottom: 8%; }
	.moyen {font-size: 90%;}
	.video {margin: auto;}
	.personnages {float: left;margin-left: 4%;}
	.rslides {max-width:80%; margin: 0 auto;}
	#personnages {padding: 20px;}
	.contact {width: 40%; padding: 10% 0;}
	table {padding: 50px;}
}
/*============================================
narrow
=============================================*/
@media (min-width: 481px) and (max-width: 868px) {
	body {
	background: url(../images/background700.jpg) no-repeat center fixed; 
	-webkit-background-size: cover; /* Chrome et Safari */
	-moz-background-size: cover; /* Firefox */
	-o-background-size: cover; /* Opera */
	background-size: cover; /* version standardisée */
	}
	#wrapper {width: 96%; margin: auto;}
	.annonce_texte {font-size: 150%; width: 60%; background-color: rgba(255, 255, 255, 0.9); margin: auto; margin-bottom: 6%; }
	.annonce_affiche {width: 80%;}
	.moyen {font-size: 80%;}
	.video {margin: auto;}
	.presentation {font-size: 120%; line-height: 1.3em;}
	.rslides {max-width:80%; margin: 0 auto;}
	/*.rslides {display: none;}*/
	.personnages {width: 60%; padding: 0 10%; margin: auto;}
	.contact {width: 40%; padding: 10% 0;}
	table {width: 70%; margin: auto;}
}
/*============================================
narrow smartphone
=============================================*/
@media (min-width: 321px) and (max-width: 480px) {
	body {
	background: url(../images/background480.jpg) no-repeat center fixed; 
	-webkit-background-size: cover; /* Chrome et Safari */
	-moz-background-size: cover; /* Firefox */
	-o-background-size: cover; /* Opera */
	background-size: cover; /* version standardisée */
	}
	#wrapper {width: 100%;}
	.annonce_texte {font-size: 150%; width: 100%; background-color: rgba(255, 255, 255, 0.9); margin: auto; margin-bottom: 6%; }
	.presentation {font-size: 120%; line-height: 1.3em; padding-top: 1.2em; width: 100%;}
	.moyen {font-size: 100%;}
	.video {margin: auto;}
	.rslides {max-width:80%; margin: 0 auto;}
	/*.rslides {display: none;}*/
	.annonce_affiche {width: 100%;}
	.personnages {width: 100%; padding: 0 10% 2% 10%;}
	.contact {padding: 10% 5%;}
	table {width: 100%;}
	td {max-width: 80px; max-height: 80px; padding: 10px; overflow: hidden;}
	footer {background-color: #fff;}
}
/*============================================
iPhone
=============================================*/
@media screen and (max-width: 320px) {
	body {
	background: url(../images/background340.jpg) no-repeat center fixed; 
	-webkit-background-size: cover; /* Chrome et Safari */
	-moz-background-size: cover; /* Firefox */
	-o-background-size: cover; /* Opera */
	background-size: cover; /* version standardisée */
	}
	#wrapper {width: 100%;}
	.annonce_texte {font-size: 140%; max-width: 100%; background-color: rgba(255, 255, 255, 0.9); margin: auto;}
	.moyen {font-size: 110%;}
	.video {margin: auto;}
	.presentation {max-width: 100%; font-size: 120%; line-height: 1.3em; padding-top: 1.2em; width: 100%;}
	.rslides {max-width:80%; margin: 0 auto;}
	/*.rslides {display: none;}*/
	.personnages {max-width: 100%; padding: 0 10% 2% 5%;}
	.contact {padding: 10% 5%;}
	table, td, tr {display: block;}	
	tr {margin: auto; padding: 0 4.8em;}
	footer {background-color: #fff;}
}