@charset "UTF-8";

/*##################################################*/
/*#################### GENERAL #####################*/
/*##################################################*/

body, html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: "OpenSans","Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight:100;
	font-style:normal;
	font-size: 1rem;
	color: #333;
}
@media screen and (max-width: 699px) {
	body, html {-moz-text-size-adjust:none;-webkit-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none;}
}

section { width:100%; margin:0; padding:0; overflow:hidden;  position:relative; background-color:white;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
 }


h1 { font-weight:bold; text-transform:uppercase; }
h2 { font-weight:bold; text-transform:uppercase; }
h3 { text-transform:uppercase; }
p, cite {  }
a { cursor:pointer; color:#333; text-decoration:none; }
h1 span, h2 span { font-weight:100; }
span.after {background:#333; display:block; width:15%; height:1px; margin:0 auto;}

@media screen and (max-width: 699px) { /*mobile*/
h1 { font-size:1.5rem;  }
h2 { font-size:1.4rem;  }
h3 { font-size:1.1rem; }
p, cite  { font-size:1rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { /*tablette*/
h1 { font-size:2.5rem;  }
h2 { font-size:2.2rem;  }
h3 { font-size:1.87rem; }
p, cite  { font-size:1.25rem; }
}
@media screen and (min-width: 1350px) { /*desktop*/
h1 { font-size:2.5rem;  }
h2 { font-size:2.2rem;  }
h3 { font-size:1.87rem; }
p, cite  { font-size:1.13rem; }/*1.25*/
#contact span.after {width:30%;}
}

/*##################################################*/
/*#################### HEADER ######################*/
/*##################################################*/
#header { height:4.2rem; width:100%; background:white; z-index:50;  }
#header nav { height:4.2rem; width:100%; }
#header ul, #header li {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#header ul { display:block; padding:0; }
#header ul.gauche { height:4.2rem; float:left; }
#header ul.droite { float:right; }
#header li { display:block; text-transform:uppercase; overflow:hidden; height:4.2rem; }
#header .gauche li img { width:auto; }
#header ul.droite li.separator { background:none; margin:none; padding:none; border:none; -webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none;}
#header li a { display:block; color:#666;}
#header li a:hover,#header li:hover a {color:#333;}
#header li.reseaux img { width:auto; height:1.9rem; display:none; }
#header li.reseaux img+img { display:inline; }
#burger, #burger2 { cursor: pointer; background-image:url(../images/bouton-menu2.svg); background-position:center; background-repeat:no-repeat; background-color:#FCFF00; -webkit-background-size:50%; -moz-background-size:50%; background-size:50%;  }
@media screen and (max-width: 1349px) {
#burger, #burger span {display:none; width:0; height:0;}
#header { position:relative; }
#header ul { width:100%; background-color:white; }	
#header ul.gauche { border-bottom:1px solid #EEE; }
#header ul.droite { height:0rem; background:rgba(255,255,255,1);  overflow:auto;}
#header li { float:none; border-bottom:1px solid #EEE; }
#header .gauche li{ float:left; width:100%;  }	 
#header .gauche li img { height:3.4rem; margin:0.4rem; margin-left:1.05rem; }	 
#header .droite li { text-align:center; font-size:1.1rem; font-weight:normal; }
#header ul.droite li.separator { height:0; }
#burger2 {display:block; right:0; z-index:60; width:4.2rem; height:4.2rem;  }
#burger2 span { color: rgba(0,0,0,0); font-size:0.3rem; }	
.fixed { position:fixed; top:0; }
.absolute { position:absolute; top:0; }
}
@media screen and (max-width: 699px) {
#header li a { padding:1.55rem 1rem; }
#header li.reseaux a { padding:1.15rem;}
}
@media screen and (min-width: 700px) and (max-width: 1349px) {
#header .droite li { height:5.25rem; }
#header li a { padding:2rem 1rem; }
#header li.reseaux a { padding:1.6rem;}
}
@media screen and (min-width: 1350px) {
#burger2, #burger2 span {display:none;width:0; height:0;}
#header { position:fixed; border-bottom:1px solid #EEE; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#header ul { height:4.2rem;}
#header ul.gauche { margin-left:5.2rem; }
#header li { float:left; }
#header .gauche li img { height:3rem; margin:0.6rem 0; }
#header .droite li { background-image:url(../images/jaune.png); background-repeat:no-repeat;background-position:0 -4.3rem;-webkit-background-size:100% 4.2rem; -moz-background-size:100% 4.2rem; -o-background-size:100% 4.2rem; background-size:100% 4.2rem; }
#header ul.droite li.reseaux { background-image:url(../images/noir.png); }
#header ul.droite li:hover {  background-position:0 0; }
#header ul.droite li.separator { width:4.2rem; height:4.2rem; }
#header li.selected { border-bottom:0.25rem solid rgba(252,255,0,1); }
#header li a { padding:1.5rem 1rem; }
#header li.reseaux a { padding:1.15rem; }
#header li.reseaux:hover img { display:inline; }
#header li.reseaux:hover img+img { display:none; }
#header { -webkit-transition:top 0.5s ease; -moz-transition:top 0.5s ease; -o-transition:top 0.5s ease; transition:top 0.5s ease; }
#header ul.droite li { -webkit-transition:background-position ease 0.5s;-moz-transition:background-position ease 0.5s;-o-transition:background-position ease 0.5s;transition:background-position ease 0.5s;}
#burger {display:block; position: fixed; top: 0; left: 0; z-index:40; width:4.2rem; height:4.2rem; }
#burger span { color: rgba(0,0,0,0); font-size:0.3rem; }	
}

/*##################################################*/
/*#################### LAYOUT ######################*/
/*##################################################*/

/*****FOND TEXTURE*****/
.texture { background-color:#ffffff; -webkit-background-size:100%;-moz-background-size:100%;-o-background-size:100%;background-size:100%;  }
@media screen and (max-width: 699px) {
	/*.texture {background-image:url(../images/bg-page_small.jpg);}*/
}
@media screen and (min-width: 700px) and (max-width: 1349px) {
	.texture {background-image:url(../images/bg-page_medium.jpg);}
}
@media screen and (min-width: 1350px) {
	.texture {background-image:url(../images/bg-page_big.jpg);}
}

.bgfcff00 { background-color:#fcff00; }

/*****IMG100*****/
.img100 img { width:100%;height:auto; vertical-align:middle; }

/*****TITRE1*****/
.titre1 {
	padding-left:5%; padding-right:5%; 
	text-align:center;
	position:fixed; z-index:-2;
}

@media screen and (max-width: 699px) { 
	.titre1 h1 { margin:0; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	.titre1 h1 { margin:0 8.35%; }
}
@media screen and (min-width: 1350px) { 
	.titre1 h1 { margin:0 17.66%;}
}

/*****ECART 1*****/
.ecart1 {
	padding-left:5%; padding-right:5%;
	text-align:center;
}

@media screen and (max-width: 699px) { 
	.ecart1 h2, .ecart1 h3, .ecart1 p, .ecart1 ul { margin:0; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	.ecart1 h2, .ecart1 h3, .ecart1 p, .ecart1 ul { margin:0 8.35%; }
}
@media screen and (min-width: 1350px) { 
	.ecart1 h2, .ecart1 h3, .ecart1 p, .ecart1 ul { margin:0 17.66%; }
}

/*##################################################*/
/*#################### SPECIFIC ####################*/
/*##################################################*/

/*****VIDETITRE1*****/
#videtitre1 { pointer-events:none; background-color:rgba(255,255,255,0); }

p#mail { cursor:pointer; font-weight:normal; }

/*****CONTACT*****/
#contact {
	padding-left:5%; padding-right:5%;
	text-align:center; 
}

#contact span.after {margin:0;}

@media screen and (max-width: 699px) { /*mobile*/
	#contact .tel { color:#999; }
	#contact .tel { font-size:1.6rem; }
	#contact .adresse { font-size:1.1rem; }
	#contact .email { font-size:1.1rem; }
}

#contact div { margin-left:1%; margin-right:1%; text-align:left; }
#contact .contact-form label { display:none; }

#contact .contact-form input, .contact-form textarea, .contact-form button {
	font-family: "OpenSans","Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight:100;
	font-style:normal;
	font-size: 1rem;
	color:#333;
	border:1px solid #999;
	padding:1rem;
	margin: 0 0 3.5rem 0;
	background-color:white;
	border-radius: 0px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

#contact .contact-form { position:relative; }
#contact .contact-form input.nom  { margin-right:3%}
#contact .contact-form input { height:3.5rem;  }
#contact .contact-form textarea { width:100%; }
#contact .contact-form button { 
	width:100%; height:3.5rem;
	padding:1rem; margin:0;
	font-size:1.13rem;  text-transform:uppercase; 
	border-radius: 0px; text-align:left;
	background:#fcff00;  border:1px solid #fcff00;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
	-webkit-transition:background 0.5s ease, border 0.5s ease; -moz-transition:background 0.5s ease, border 0.5s ease; -o-transition:background 0.5s ease, border 0.5s ease; transition:background 0.5s ease, border 0.5s ease;
}

#contact .contact-form button:hover { background:#333; border:1px solid #333; color:#fff; }

#contact .contact-form input.error,
#contact .contact-form textarea.error { background:#FCFF00; }
#contact .displaynone { display:none; }
#contact .tip { display:none; }

#success, #error { display:none; position:absolute; top:5rem;  }

.contact-form input[type=checkbox] { width:auto!important; height:auto!important; margin: 0 1rem 3.5rem 0!important; vertical-align:baseline; }
.contact-form input[type=checkbox]+span { display:inline-block; margin-bottom:3.5rem; }
.contact-form input[type=checkbox]+span a { font-weight:normal; }
.contact-form input[type=checkbox]+span a:hover { background-color:#FCFF00; }
.contact-form input[type=checkbox].error+label.error+span { background-color:#FCFF00!important; }

@media screen and (max-width: 699px) { 
	#contact div { width:98%; margin:0 auto; }
	#contact .contact-form { margin-top:20%; }
	.contact-form input, .contact-form button { width:100%; }
	#contact .contact-form input, .contact-form textarea, .contact-form button { margin: 0 0 1.5rem 0; }
	#contact p { font-size:1.7rem; }
	
.contact-form input[type=checkbox] { margin: 0 1rem 1.5rem 0!important; vertical-align:top; }
.contact-form input[type=checkbox]+span { margin-bottom:1.5rem; width:85%; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) {
	#contact div { width:98%; margin:0 auto;  }
	#contact .contact-form { margin-top:20%; }
	.contact-form input { width:100%; }
}
@media screen and (min-width: 1350px) {
	#contact div.coordonnees, #contact div.contact-form { width:48%; float:left;  }
	.contact-form input { width:48%; } 
}

/*****CARTE*****/
#carte { position:relative; -webkit-background-size:cover;-moz-background-size:cover;background-size:cover; }
#connectMap { opacity:0; background-color: #fcff00; height: 100%; position: absolute; text-align: center; top: 0; width: 100%; -webkit-transition:opacity 0.5s ease;-moz-transition:opacity 0.5s ease;-o-transition:opacity 0.5s ease;transition:opacity 0.5s ease; }
#connectMap span { border: 1px solid #333; color:#666; display: inline-block; margin: 18% auto; padding: 1rem;text-transform:uppercase; height:4.2rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#connectMap:hover span { color:#333;}

@media screen and (max-width: 699px) { 
#carte { background-image:url(../images/contact/carte_small.svg); }
#connectMap a {  padding: 1rem; }
#connectMap span { font-size:1.1rem; padding:1.5rem 1rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
#carte { background-image:url(../images/contact/carte_medium.svg); }
#connectMap a {  padding: 1rem; }
#connectMap span { font-size:1.1rem; padding:1.5rem 1rem; }
}
@media screen and (min-width: 1350px) { 
#carte { background-image:url(../images/contact/carte_big.svg); }
#connectMap a { display: block; padding: 1rem; }
#connectMap span { font-size:1.13rem; padding:1.4rem 1rem; }
}

/*##################################################*/
/*#################### FOOTER ######################*/
/*##################################################*/
/*****FOOTER*****/
#footer { height:5.25rem; background:url(../images/border.gif) white repeat-x;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#footer div { position:absolute; top:0; height:5.25rem; overflow:hidden; }
#footer a {display:block; color:#666;}
#footer a:hover { color:#333;}
#footer p { text-transform:uppercase;  }
#footer p span { font-weight:normal;  }
#footer .prev { left:0; text-align:left; }
#footer .next { right:0; text-align:right; }
#footer .prev .fleche { float:left; margin-right:1rem; }
#footer .next .fleche { float:right; margin-left:1rem; }

#footer .fleche { display:block; width:2.62rem; height:2.62rem; margin:0; padding:1.31rem;padding-bottom:1.45rem;float:right; background-color:#fcff00;} 
#footer img { width:2.62rem; height:2.62rem; margin:0; } 
#footer .noir { display:block; }
#footer .blanc {display:none; }

@media screen and (max-width: 699px) { 
#footer div { width:100%;  }
#footer .prev { display:none;}
#footer p { font-size:1.1rem; padding:1.3rem 1rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
#footer div { width:50%;  }
#footer p { font-size:1.1rem; padding:1.3rem 1rem; }
}
@media screen and (min-width: 1350px) { 
#footer div { width:40%; } 
#footer p { padding:1rem; }
#footer  a:hover .blanc { display:block; }
#footer a:hover .noir { display:none; }
#footer a  .fleche { 	
	background-image:url(../images/noir.png); background-repeat:no-repeat;
	-webkit-background-size:100% 105%; -moz-background-size:100% 105%; -o-background-size:100% 105%; background-size:100% 105%; 
	-webkit-transition:background-position ease 0.5s; -moz-transition:background-position ease 0.5s; -o-transition:background-position ease 0.5s; transition:background-position ease 0.5s; 
	}
#footer .prev .fleche { background-position:5.25rem; }
#footer .next .fleche { background-position:-5.25rem; }
#footer a:hover .fleche { background-position:center; }
}

/*##################################################*/
/*#################### CORRECTIFS ##################*/
/*##################################################*/
/*****EFFET APPARITION AU SCROLL*****/
@media screen and (min-width: 1350px) { 

h3, p, div {-webkit-transition:opacity 1s ease;-moz-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;}
.delais05, .delais05 h3, .delais05 p {-webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;transition-delay:0.5s;}
.delais1, .delais1 h3, .delais1 p {-webkit-transition-delay:1s;-moz-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s;}
.delais15, .delais15 h3, .delais15 p {-webkit-transition-delay:1.5s;-moz-transition-delay:1.5s;-o-transition-delay:1.5s;transition-delay:1.5s;}
.delais2, .delais2 h3, .delais2 p {-webkit-transition-delay:2s;-moz-transition-delay:2s;-o-transition-delay:2s;transition-delay:2s;}
}
/*****NOMOBILE*****/
@media screen and (max-width: 699px) { 
	.nomobile { display:none; height:0; width:0; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	.nomobile { display:none; height:0; width:0; }
}

/****MYDEVICE****/
#mydevice {display:none;}
@media screen and (max-width: 699px) { #mydevice { float:left;} }
@media screen and (min-width: 700px) and (max-width: 1349px) { #mydevice {float:right;} }
@media screen and (min-width: 1350px) { #mydevice {float:none;} }
@media screen and (max-width: 1999px) { #mydevice { position:relative;} }
@media screen and (min-width: 2000px) { #mydevice { position:absolute;} }

img {vertical-align: bottom; text-align:center;}