@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;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
 }
 
h1 { font-weight:bold; text-transform:uppercase; }
h2,p.h3 { font-weight:bold; }
a { cursor:pointer; color:#333; text-decoration:none; }
h1 span, h2 span { font-weight:100; }
p.h3 span { font-weight:400; }
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; }
p { font-size:1rem; }
p.h3 { font-size:1.1rem; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { /*tablette*/
h1 { font-size:2.5rem; }
h2 { font-size:2.2rem; }
p { font-size:1.25rem; }/*1.19*/
p.h3 { font-size:1.87rem; }
}
@media screen and (min-width: 1350px) { /*desktop*/
h1 { font-size:2.5rem;  }
h2 { font-size:2.4rem; /*font-size:2.2rem;*/  }
p { font-size:1.13rem; }/*1.25*/
p.h3 { font-size:2rem; /*font-size:1.87rem;*/ }
}

/*##################################################*/
/*#################### 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 ######################*/
/*##################################################*/

/*****COLORWHITE*****/
.colorwhite { color:white; }
.colorwhite .after { background-color:white; }

/*****BGCOLOR*****/
.bgffffff { background-color:#ffffff; }
.bg333333 { background-color:#333333; }
.bge2001a { background-color:#E2001A; }
.bgce001a { background-color:#ce001a; }

/*****IMG100 IMG75 IMG50*****/
.img100 img { width:100vw;height:auto; vertical-align:middle; }
.img75 img { width:75%;height:auto; vertical-align:middle; }
.img50 img { width:50%;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 { margin:0; }
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	.ecart1 h2 { margin:0 8.35%; }
}
@media screen and (min-width: 1350px) { 
	.ecart1 h2 { margin:0 17.66%; }
}

/*****ECART 2*****/
.ecart2 {
	padding-left:5%; padding-right:5%;
	text-align:center;
}
.ecart2 div { margin:1%; overflow:hidden; position:relative;  }

@media screen and (max-width: 699px) { 
	.ecart2 div { width:98%; margin:0 auto; text-align:center; }
	.ecart2 img { width:40%; height:auto; text-align:left;}
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	.ecart2 div { width:98%; margin:0 auto; text-align:center; }
	.ecart2 img { width:25%; height:auto; text-align:left;}
}
@media screen and (min-width: 1350px) { 
	.ecart2 div { width:26.1%; float:left; text-align:left; margin-left:6.25%;  }
	.ecart2 div+div { width:59.4%; text-align:left; margin-left:1%; margin-right:6.25%; }
	.ecart2 img { width:50%; height:auto;}
}



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

/*****VIDETITRE1*****/
#videtitre1 { pointer-events:none; }

/*****TOPO*****/
#topo ul { list-style:none; text-transform:uppercase; margin:0; padding:0; font-weight:normal; }
#topo li { -webkit-transition:opacity 1s ease;-moz-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease; }

/*****P.H3 LEFT RIGHT*****/
.left { text-align:left; }
.right { text-align:right; }
video { width:100%; height:auto; }
p.left { position:absolute; text-align:right; }
p.right { position:absolute; text-align:left; }
p.onlyone { text-align:right; }	
.shooting,#triangle1,#triangle2,#eye1,#eye2,#halo1,#halo2 { display:none; }
@keyframes animclipright {
		0%   {left:0;}
		25%  {left:33.2%;}
		50%  {left:58.2%;}
		75%  {left:77.1%;}
		100% {left:100%;}
	}
@keyframes animclipleft {
		0%   {left:0;}
		33%  {left:54%;}
		66%  {left:79%;}
		100% {left:100%;}
	}
@keyframes animtriangle1 {
		0%   {top:-18vw; left:-23.85vw;}
		50%  {top:0; left:0;}
		100% {top:-18vw; left:-23.85vw;}
	}
@keyframes animtriangle2 {
		0%   {top:18vw; left:23.85vw;}
		50%  {top:0; left:0;}
		100% {top:18vw; left:23.85vw;}
	}	
@keyframes animeyes {
		0%   {width:0.5vw;}
		100%  {width:100vw;}
	}	
@keyframes animhalo {
		0%   {background-color:rgba(255, 0, 0, 0);box-shadow: 0px 0px 0vw red;}
		100%  {background-color:rgba(255, 0, 0, 0.5);box-shadow: 0px 0px 1vw red;}
	}
	
@media screen and (max-width: 699px) { 
	p.left { left:4.15vw; top:0; width:45.85vw; padding-left:4.15vw; }
	p.right { left:50vw; top:0; width:41.7vw; padding:0 4.15vw; }
	p.onlyone { text-align:center; padding:0 4.15vw; }	
}
@media screen and (min-width: 700px) and (max-width: 1349px) { 
	p.left { left:4.15vw; top:0; width:45.85vw; padding-left:4.15vw; }
	p.right { left:50vw; top:0; width:41.7vw; padding:0 4.15vw; }
	p.onlyone { width:45.85vw; margin-left:4.15vw; padding-left:4.15vw; }	
}
@media screen and (min-width: 1350px) { 
	p.left { left:4.15vw; top:0; width:45.85vw; padding-left:4.15vw; }
	p.right { left:50vw; top:0; width:41.7vw; padding:0 4.15vw; }
	p.onlyone { width:45.85vw; margin-left:4.15vw; padding-left:4.15vw; }	
	
	img.slideleft { margin-left:-20vw; }
	img.slideright { margin-right:-20vw; }
	
	
	span.clipright { display:block; position:absolute; top:0;width:100%; height:100%; background-color:#333333; 
		animation-duration:1s; animation-fill-mode:forwards; animation-timing-function:step-start;
	}
		span.clipleft { display:block; position:absolute; top:0;width:100%; height:100%; background-color:#333333; 
		animation-duration:1s; animation-fill-mode:forwards; animation-timing-function:step-start;
	}

	img.fadein { opacity:0; }
	
	
	.shooting { display:block; position:absolute; top:33.6vw; left:1.05vw; width:23.85vw; height:18vw; overflow:hidden; }
	#triangle1 { display:block; position:absolute; top:-18vw; left:-23.85vw; width:0; height:0; border-top: 18vw solid #333333; border-right:23.85vw solid transparent;
		animation-duration:0.5s; animation-fill-mode:forwards;
	} 
	#triangle2 { display:block; position:absolute; top:18vw; left:23.85vw; width:0; height:0; border-bottom: 18vw solid #333333; border-left:23.85vw solid transparent;
		animation-duration:0.5s; animation-fill-mode:forwards;
	} 
	
	#eye1,#eye2 { display:block; position:absolute; height:0.5vw; width:0.5vw; background-color:rgba(255, 0, 0, 0.6); border-radius:0.5vw; box-shadow: 0px 0px 1vw red; 
		animation-duration:1s; animation-fill-mode:forwards;
	}
	#eye1 {  top:16.6vw; left:16.6vw; transform: rotate(-13deg); transform-origin:0 0; }
	#eye2 {  top:15.9vw; left:26.1vw; transform: rotate(-13deg); transform-origin:0 0; }
	
	#halo1,#halo2 { display:block; position:absolute; height:1vw; width:1vw; background-color:rgba(255, 0, 0, 0); border-radius:1vw; box-shadow: 0px 0px 0vw red; animation-duration:1s; animation-fill-mode:forwards;
	}
	#halo1 {  top:16.25vw; left:16.45vw; }
	#halo2 {  top:15.55vw; left:25.9vw;  }
}




/*##################################################*/
/*#################### 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:50%;  }
#footer p { display:none;}
}
@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,.fadein {-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;}
.delais25, .delais25 h3, .delais25 p {-webkit-transition-delay:2.5s;-moz-transition-delay:2.5s;-o-transition-delay:2.5s;transition-delay:2.5s;}

.slideleft, .slideright {-webkit-transition:margin 1s ease;-moz-transition:margin 1s ease;-o-transition:margin 1s ease;transition:margin 1s ease;}
}


/****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,video { vertical-align: bottom; text-align:center; }