@charset "UTF-8";

@font-face {
	font-family: 'henrymorganhandregular';
	src: url('../polices/henrymorganhand-webfont.eot');
	src: url('../polices/henrymorganhand-webfont.eot?#iefix') format('embedded-opentype'), url('../polices/henrymorganhand-webfont.woff2') format('woff2'), url('../polices/henrymorganhand-webfont.woff') format('woff'), url('../polices/henrymorganhand-webfont.ttf') format('truetype'), url('../polices/henrymorganhand-webfont.svg#henrymorganhandregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
body {
	margin: 0;
	padding: 0;
	font-family: Times, "Times New Roman", "Liberation Serif", Cambria, serif;
	font-size:1em;
}
body#rose {
	background-color: #ffdce3;
}
body#bleu {
	background-color: #02DFFF;
}
div.conteneur_site {
	width: 1024px;
	margin:0 auto;
}
.clear {
	clear:both;
}
section a:link {
	color: #00748A;
}
section a:hover {
	color: #659DAB;
}
section a:visited {
	color: #003541;
}
a:active, a:focus {
    outline: none;
}
/* ----------------------------------------
											   |
  	          MENU	            			   |
											   |
-----------------------------------------*/

ul#menu {
	margin:30px 0 0 30px;
	border-radius: 8px;
	font-size:0.9em;
	width:430px;
}
ul#menu.rose {
	background-color: #fff0f3;
}
ul#menu.bleu {
	background-color: #70EDFF;
}
#menu, #menu ul {
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
}
#menu li {
	display: inline-block;
	position: relative;
}
#menu ul li {
	display: inherit;
	border-radius: 0;
}
#menu ul li:hover {
	border-radius: 0;
}
#menu ul li:last-child {
	border-radius: 0 0 8px 8px;
}
#menu ul {
	position: absolute;
	max-height: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	-moz-transition: .8s all .1s;
	-webkit-transition: .8s all .1s;
	transition: .8s all .1s;
}
#menu li:hover ul {
	max-height: 15em;
}
/* background des liens sous menus */
#menu li li {
	background: rgba(255, 255, 255, 0.8);
}
/* background des liens menus et sous menus au survol */
#menu li:hover, #menu li li:hover {
	background: rgba(255, 255, 255, 1);
}
/* les a href */
#menu a {
	text-decoration: none;
	display: block;
	padding: 4px 22px;
	color: #000;
}
#menu ul a {
	padding: 4px 0;
}
#menu li:hover li a {
	color: #000;
	text-transform: inherit;
}
#menu li:hover a, #menu li li:hover a {
	color: #f14b6b;
}
#menu li a.actif, #menu li li a.actif {
	color:#f14b6b;
	font-style:italic;
}
/* position du papillon du menu  */
nav img {
    position: relative;
    left: 40px;
    top: -40px;
	-webkit-transform : rotate(30deg);
	-moz-transform : rotate(30deg);
	-ms-transform : rotate(30deg);
	-o-transform : rotate(30deg);
	transform : rotate(30deg);
}
nav img.qui {
	left:200px;
}
nav img.classe_chant {
	left:330px;
}
nav img.contact {
	left:430px;
}

/* ----------------------------------------
											   |
  	          ACCUEIL	            		   |
											   |
-----------------------------------------*/

#accueil {
	text-align:center;
	color:#f14b6b;
	margin-bottom:40px;
}
#accueil h1 {
	font-family: 'henrymorganhandregular';
	font-size: 5.6em;
	font-weight: lighter;
	background: url(../images/fond_accueil.jpg) center 5px no-repeat;
	height: 494px;
	width: 515px;
	margin: auto;
}
#accueil article {
	color:#000;
	font-size:1.1em;
	margin-top:-17px;
}
#accueil article#citation {
	color:#f14b6b;
	font-style:italic;
	font-size:1.5em;
	margin-top:20px;
}

#accueil_images #papillon {
	-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	transform: rotate(20deg);
	position:relative;
	top:-530px;
	left:290px;
}
#accueil_images #papillon2 {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
	position:relative;
	top:-465px;
	left:205px;
}
#accueil_images #papillon3 {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	position:relative;
	top:-310px;
	left:210px;
}
/* animations */

@-webkit-keyframes tourne {
    0% {
    opacity: 1;
    -webkit-transform: rotate(0deg);
  }
  100% {
    opacity: 0.2;
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes tourne {
  0% {
    opacity: 1;
    -moz-transform: rotate(0deg);
  }
  100% {
    opacity: 0.2;
    -moz-transform: rotate(360deg);
  }
}
@keyframes tourne {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }
  100% {
    opacity: 0.2;
    transform: rotate(360deg);
  }
}
@-webkit-keyframes tourne2 {
    0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes tourne2 {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@keyframes tourne2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#accueil_images #roue_rose {
	position:relative;
	top:-630px;
	left:700px;
  -webkit-animation: tourne2 12s infinite linear;
  -moz-animation: tourne2 12s infinite linear;
  animation: tourne2 12s infinite linear;
}
#accueil_images #roue_rose2 {
	position:relative;
	top:-434px;
	left:583px;
  -webkit-animation: tourne2 12s infinite linear;
  -moz-animation: tourne2 12s infinite linear;
  animation: tourne2 12s infinite linear;
}
#accueil_images #roue_rose3 {
	position:relative;
	top:-456px;
	left:86px;
  -webkit-animation: tourne2 12s infinite linear;
  -moz-animation: tourne2 12s infinite linear;
  animation: tourne2 12s infinite linear;
}
#accueil_images #roue_rose4 {
	position:relative;
	top:-170px;
	left:400px;
  -webkit-animation: tourne 12s infinite linear;
  -moz-animation: tourne 12s infinite linear;
  animation: tourne 12s infinite linear;
}
#accueil_images #roue_blanche {
	position:relative;
	top:-530px;
	left:210px;
  -webkit-animation: tourne 12s infinite linear;
  -moz-animation: tourne 12s infinite linear;
  animation: tourne 12s infinite linear;
}
#accueil_images #roue_blanche2 {
	position:relative;
	top:-235px;
	left:-15px;
  -webkit-animation: tourne2 12s infinite linear;
  -moz-animation: tourne2 12s infinite linear;
  animation: tourne2 12s infinite linear;
}
#accueil_images a {
	text-align:center;
	display:block;
	margin-top:-120px;
}

/* ----------------------------------------
											   |
  	      CLASSE DE CHANT	          		   |
											   |
-----------------------------------------*/

body#bleu div.conteneur_site {
	background:url(../images/roue_blanche_tourne.gif) no-repeat 441px 7px, url(../images/fond_classe5.jpg) no-repeat 0 17px;
	padding-top:1px;
	margin-top:10px;
}

#classe_de_chant, #avis_eleves, #bio, #tarifs_lieu {
	text-align:center;
	color:#FFF;
	margin-bottom:40px;
	min-height:800px;
	background:url(../images/papillon_bleu_vole.gif) no-repeat 370px 33px;
	background-size:50px auto;
}
#classe_de_chant article, #avis_eleves article#video_eleves {
	background:url(../images/papillon_bleu_vole.gif) no-repeat 0px 60px;
	background-size:25px auto;
}
#classe_de_chant h1, #avis_eleves h1, #bio h1, #bio2 h1, #photos h1, #tarifs_lieu h1 {
	background:url(../images/papillon_bleu_vole.gif) no-repeat 780px 0px;
	background-size:60px auto;
	font-family: 'henrymorganhandregular';
	font-size: 4.3em;
	font-weight: lighter;
	text-align:left;
	margin:0 0 0 33px;
}
#classe_de_chant h2, #avis_eleves h2, #bio h2, #bio2 h2, #photos h2, #tarifs_lieu h2 {
	margin:-41px 0 0 560px;
	font-size:2em;
	font-style:italic;
	font-weight:normal;
	text-align:left;
}
#classe_de_chant h2 + p, #avis_eleves h2 + p, #bio h2 + p, #bio2 h2 + p, #photos h2 + p, #tarifs_lieu h2 + p {
	color:#000;
	text-align:left;
	margin:-5px 0 50px 33px;
}
#classe_de_chant h2 + p span, #avis_eleves h2 + p span, #tarifs_lieu h2 + p span {
	margin-left:200px;
}
#classe_de_chant article#prof {
	background: url(../images/papillon_bleu_vole.gif) 33px 389px no-repeat,  url(../images/fond_classe2.jpg) no-repeat 0 0;
	background-size:50px auto, 343px auto ;
    width: 1020px;
	padding: 50px 0 0 0;
	text-align:justify;
	min-height:800px;
}

#classe_de_chant article#prof h3, #classe_de_chant article#prof p {
padding-left: 0;
}

#classe_de_chant article#prof div.prof, #bio article#bio_artiste div.artiste_lyrique {
	float:left;
	width:200px;
	margin-right:16px;
	padding:0 0 40px 294px;
}
.lecteur {
	margin:0 auto;
}
div.jwplayer {
	margin-bottom: 38px;
}
article#prof div#video1 {
	float:left;
}
#classe_de_chant article#prof .lecteur > p {
	padding-right:20px;
}
article#science_et_vie {
	margin-top:32px;
	background-size:40px;
	background-position:10px 0px;
}
article#science_et_vie a {
	padding:0 4px;
}

#signature {
	margin-top:30px;
}
/* ----------------------------------------
											   |
  	      AVIS DES ÉLÈVES          		   |
											   |
-----------------------------------------*/

#avis_eleves {
	text-align:center;
	color:#FFF;
	margin-bottom:40px;
	min-height:800px;
	background:url(../images/papillon_bleu_vole.gif) no-repeat 370px 33px;
	background-size:50px auto;
}
#avis_eleves article#video_eleves {
	background:url(../images/papillon_bleu_vole.gif) no-repeat 17px 71px, url(../images/papillon_bleu_vole.gif) no-repeat 166px 154px;
	background-size:25px auto, 35px auto;
}
#avis_eleves  h2#eleves {
	float:left;
	margin:0 0 0 33px;
}
#video_eleves #video1 {
	float:none;
	margin-left:276px;
}
#avis_eleves table#avis_ecrits {
	text-align:justify;
	margin-top:20px;
	border-spacing:20px 36px;
}
table#avis_ecrits td {
	vertical-align:top;
}
table#avis_ecrits td:first-child {
	width:108px;
}
table#avis_ecrits img {
	width:105px;
}
table#avis_ecrits img + p, table#avis_ecrits .image_avec_p + p, .legende_photo {
	color: #0599B3;
	font-size:0.8em;
	font-style:italic;
	text-align:left;
	margin:0.6em 0;
	padding-right:9px;
	width:99px;
}
table#avis_ecrits .image_avec_p {	/* au cas où, en mettant une image, l'éditeur html ajoute automatiquement un <p> autour de l'image */
	margin:0;
}
table#avis_ecrits p {
	margin-bottom:0;
}
table#avis_ecrits td:first-child + td {
	border-left: 1px solid #6AEEFF;
	padding-left:9px;
}
table#avis_ecrits td:first-child + td:first-line {
	font-size:1.17em;
	font-weight:bold;
}

/* ----------------------------------------
											   |
  	    BIO - ARTISTE LYRIQUE       		   |
											   |
-----------------------------------------*/


#bio, #bio2 {
	text-align:center;
	color:#FFF;
	margin-bottom:40px;
	min-height:800px;
	background:url(../images/papillon_vole2.gif) no-repeat 370px 33px,  url(../images/fond_bio_artiste.jpg) no-repeat 0 0;
	background-size:50px auto, 610px auto ;
}
#bio h1, #bio2 h1 {
	background:url(../images/papillon_vole2.gif) no-repeat 780px 0px;
	background-size:60px auto;
}
#bio h2, #bio2 h2, #photos h2 {
	margin-left:671px;
}
#bio h2 + p, #bio2 h2 + p {
	margin:-5px 0 24px 33px;
}
#bio article#bio_artiste, article#bio_star_Ac {
	background: url(../images/papillon_vole2.gif) 33px 323px no-repeat;
	background-size: 50px auto;
	width: 490px;
	padding: 7px 0 0 0;
	float: left;
	text-align: justify;
	margin-right: 20px;
	color: #666;
}
#bio article#bio_artiste div.artiste_lyrique, article#bio_star_Ac div.artiste_lyrique {
	position:relative; /* pour faire tourner le background-image */
	overflow:hidden; 	/* pour faire tourner le background-image */
	margin-right: 23px;
	padding: 0 0 20px 222px;
	width:266px;
}
#bio article#bio_artiste div.artiste_lyrique:after {
	content: "";
	position: absolute;
	top: 337px;
	left: 148px;
	width: 50px;
	height: 50px;
	background: url(../images/roue_rose.png) no-repeat;
	background-size:50px;
	-webkit-animation: tourne2 12s infinite linear;
	-moz-animation: tourne2 12s infinite linear;
	animation: tourne2 12s infinite linear;
}

article#bio_artiste2 {
    width: 490px;
	text-align:justify;
	float:left;
	background:url(../images/fond_bio_artiste2.jpg) right bottom no-repeat;
	padding-bottom:269px;
}
article#bio_artiste2 h3 {
	margin-top: 0;
	text-align: center;
	color: #666;
}
article#bio_artiste2 .lecteur {
	margin-bottom:38px;
	text-align:left;
}
#bio_artiste2 #roue_rose {
	position:relative;
	top:-19px;
	left:40px;
  -webkit-animation: tourne2 12s infinite linear;
  -moz-animation: tourne2 12s infinite linear;
  animation: tourne2 12s infinite linear;
}
#bio_artiste2 #roue_blanche {
	position:relative;
	top:-59px;
	left:230px;
  -webkit-animation: tourne 12s infinite linear;
  -moz-animation: tourne 12s infinite linear;
  animation: tourne 12s infinite linear;
}
#bio_artiste2 #roue_rose2 {
	position:relative;
	top:58px;
	left:340px;
  -webkit-animation: tourne2 12s infinite linear;
  -moz-animation: tourne2 12s infinite linear;
  animation: tourne2 12s infinite linear;
}
#bio_artiste2 #roue_rose3 {
	position:relative;
	top:102px;
	left:86px;
  -webkit-animation: tourne2 12s infinite linear;
  -moz-animation: tourne2 12s infinite linear;
  animation: tourne2 12s infinite linear;
}
#bio_artiste2 #roue_blanche2 {
	position:relative;
	top:196px;
	left:-220px;
  -webkit-animation: tourne2 12s infinite linear;
  -moz-animation: tourne2 12s infinite linear;
  animation: tourne2 12s infinite linear;
}
#bio_artiste2 #roue_rose4 {
	position:relative;
	top:350px;
	left:-5px;
  -webkit-animation: tourne 12s infinite linear;
  -moz-animation: tourne 12s infinite linear;
  animation: tourne 12s infinite linear;
}
#bio_artiste2 #papillon {
	-webkit-transform: rotate(320deg);
	-moz-transform: rotate(320deg);
    transform: rotate(35deg);
    position: relative;
    top: 291px;
	left: 92px;
}
/* ----------------------------------------
											   |
  	    BIO - STAR AC			       		   |
											   |
-----------------------------------------*/

#bio2 {
	background:url(../images/papillon_vole2.gif) no-repeat 370px 33px,  url(../images/fond_bio_starAc.jpg) no-repeat 0 0;
	background-size:50px auto, 610px auto;
}
article#bio_star_Ac {
	background: none;
}
article#bio_star_Ac div.artiste_lyrique {
	padding-bottom:0;
}
#bio2 article#bio_star_Ac div.artiste_lyrique:after {
	content: "";
	position: absolute;
	width: 70px;
	height: 70px;
	top: 259px;
	left: -1px;
	background: url(../images/roue_blanche.png) no-repeat;
	background-size:60px;
	-webkit-animation: tourne2 12s infinite linear;
	-moz-animation: tourne2 12s infinite linear;
	animation: tourne2 12s infinite linear;
}
#bio2 #bio_artiste2 #roue_blanche {
	top:-22px;
	left:377px;
}
#bio2 #bio_artiste2 #roue_rose2 {
	top:124px;
	left:250px;
}
#bio2 #bio_artiste2 #roue_rose3 {
	top:164px;
	left:4px;
}
#bio2 #bio_artiste2 #papillon {
	top:284px;
	left:-179px;
}
/* ----------------------------------------
											   |
  	   GALERIE DE PHOTOS		       		   |
											   |
-----------------------------------------*/

section#photos {
	background:url(../images/fond_bio_artiste2.jpg) no-repeat;
	min-height:436px;
}
section#photos article:first-child {
	background:url(../images/papillon_vole2.gif) no-repeat 370px 33px;
	background-size:50px auto;
}
#photos h1, #photos h2 {
	color:#FFF;
}
#photos h1 {
	background:url(../images/papillon_vole2.gif) no-repeat 841px 1px;
	background-size:55px auto;
}
#photos .active {
	background-color: #eee;
	border-radius: 3px;
}
#photos .row-fluid {
	height: 100%;
}
#photos .gallery img {
	background: none repeat scroll 0 0 #fff;
    border: 1px ridge #fff;
    border-radius: 7px;
    box-shadow: 0 0 11px 1px #fff;
    display: inline-block;
    margin: 10px;
    padding: 2px;
}
#photos div.col-md-10 {
    width: 100%;
}
/* ----------------------------------------
											   |
  	   TARIFS - LIEU		  	     		   |
											   |
-----------------------------------------*/

#tarifs_lieu {
	text-align:center;
	color:#FFF;
	margin-bottom:12px;
	background:url(../images/papillon_bleu_vole.gif) no-repeat 370px 33px;
	background-size:50px auto;
	min-height:inherit;
}
section#tarifs {
	background:url(../images/fond_classe6.gif) no-repeat left 17px;
	color:#FFF;
	min-height:220px;
}
section#tarifs h2 {
	width:300px;
	float:left;
	margin:0;
	font-size:2em;
	font-weight:normal;
}
#tarifs_lieu h2 + p {
	margin-bottom:0;
}
#tarifs_lieu h2 + p span {
    display: inline-block;
    margin-left: 200px;
    vertical-align: top;
    width: 455px;
}
article#tarifs {
	margin-left:32px;
	float:left;
}
article#tarifs + p {
	clear:left;
}
#organismes {
	clear:both;
}
#organismes ol {
	padding:0;
	list-style-position:inside;
}
article#organismes img {
	height:34px;
}
#metro {
	margin-top:10px;
}
article#RER {
	margin-top:10px;
}
img#RER {
	float:left;
	margin-right:15px;
}
/* ----------------------------------------
											   |
  	   	CONTACT		 		 	     		   |
											   |
-----------------------------------------*/

p.contact {
	margin-left:263px;
	padding-top:17px;
}
span.gros {
	font-size:2em;
}
form {
	width:450px;
	margin-left:263px;
}
label {
    display:block;
    margin-top:20px;
    letter-spacing:1px;
}
input, textarea {
	width: 439px;
	height: 9px;
	background: #efefef;
	border: 1px solid #dedede;
	padding: 8px;
	margin-top: 3px;
	color: #002B33;
	-moz-box-shadow: inset 1px 1px 0px 0px #cfcfcf;
	-webkit-box-shadow: inset 1px 1px 0px 0px #cfcfcf;
	-o-box-shadow: inset 1px 1px 0px 0px #cfcfcf;
	box-shadow: inset 1px 1px 0px 0px #cfcfcf;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=134, Strength=3);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
textarea {
	height:213px;
	background:url(images/textarea-bg.jpg) right no-repeat #efefef;
}
input:focus, textarea:focus {
    border:1px solid #97d6eb;
}
#submit {
    width:84px;
    height:26px;
    border:1px solid #CCC;
    margin-top:20px;
    cursor:pointer;
	font-size:0.9em;
	padding:0;
}
#submit:hover {
	opacity:.9;
}
p.resultat_mail {
	margin-left: 263px;
	color: #007086;
}