@charset "utf-8";
/* CSS Document */
	*,*:before,*:after {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;	box-sizing: border-box;}
	*{ text-decoration: none;list-style:none;margin:0 auto;padding:0;}
	html{ font-size:62.5%;}
	body{background-color:rgba(0,0,0,1.00);/*background-image:url(../img/fond%20boule%20noire%203.jpg)*/; background-repeat:repeat; color:rgba(255,255,255,1.00); font-size:100%;}
	h1, h2, h3, h4, h5, h6{font-weight:bold;}
	h1{font-size:5rem;}
	ul li a, h2{font-size:3rem;}
	.cb{clear:both;}
	header{border-bottom: 2px double rgba(77,161,213,1.00);}
	.logo_img{width:21.47%;float:left;text-align:center;}
	.logo_txt, .phrase, .contact {float:left;width:78%;text-align:center;}
	.logo_txt {font-size:4rem; color:rgba(77,161,213,1.00); font-variant:small-caps;}
	.phrase{font-size:3rem;}
	.contact {font-size:3rem;color:rgba(77,161,213,1.00);} 
	.desktop{right:2%;top:210px; width: 25%; position:fixed;}
	.mobile{width: 100%;bottom:0;}
/* NAV <-> MENU */
#navMain #navMobile{width:100%;margin:0 auto;}
#navMain ul, #navMain a {padding:0;margin:0;border:0;}
#navMain ul li {display:block;}
#navMobile ul li a, #navMain ul li a {display:block;color:#fff;padding:10px 10px;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);}
#navMobile > ul > li > a ,#navMain > ul > li > a {background: rgba(32,99,143,.90);box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;}
#navMobile > ul > li:hover > a,#navMain > ul > li:hover > a { background: rgba(32,99,143,.40) ;transition: all 200ms;-webkit-transition: all 200ms;}
#navMobile ul ul > li > a, #navMain ul ul > li > a {padding-left:20px;}
#navMobile ul ul > li,#navMain ul ul > li { background:rgba(32,99,143,.60);box-shadow: 0 1px 0 #444 inset, 0 -1px 0 #222 inset;}
#navMobile ul ul > li:hover{ background: rgba(32,99,143,.40);transition: all 200ms;-webkit-transition: all 200ms;}
#navMobile ul ul ul > li > a,#navMain ul ul ul > li > a {padding-left:40px;}
#navMobile ul ul ul > li ,#navMain ul ul ul > li {background: rgba(32,99,143,.50);box-shadow: 0 1px 0 #666 inset, 0 -1px 0 #444 inset;}
#navMain ul ul ul ul > li > a {padding-left:60px;}
#navMain ul ul ul ul > li {background: rgba(32,99,143,.40);box-shadow: 0 1px 0 #999 inset, 0 -1px 0 #777 inset;}
#navMain ul li:hover {background: rgba(32,99,143,.40);box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;transition: all 200ms;-webkit-transition: all 200ms;}
#navMain li.hasSub > ul {display:none;}
/* ------------------------------- */
/* fleche, avec rotation */
#navMain .hasSub:after {position:absolute;content:'\25BC';display:block;font-size:0.7em;color:#fff;top:14px;right:10px;cursor:pointer;
    -o-transition: -o-transform 0.5s;
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -moz-transition: -moz-transform 0.5s;
    -webkit-transform: rotate(0deg);
    -webkit-transition: -webkit-transform 0.5s;
    transform: rotate(0deg);
    transition: transform 0.5s;
}
#navMain .hasSub.open:after {
    -o-transition: -o-transform 0.5s;
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -moz-transition: -moz-transform 0.5s;
    -webkit-transform: rotate(180deg);
    -webkit-transition: -webkit-transform 0.5s;
    transform: rotate(180deg);
    transition: transform 0.5s;
}
/* ------------------------------- */
/* croix de fermeture des sous-menus */
#navMainClose { position:absolute; top:1px; right:1px; width:16px; height:16px; font-size:16px; line-height:12px; text-align:center; color:#fff; cursor:pointer; border:1px solid #fff; font-family:arial; }
section{width:80%;margin:0;}
section p{ width:60%; text-align:justify;font-size:2rem;}
section p b, h2 b{ color:rgba(77,161,213,1.00);}
/* ------------------------------- */
@keyframes warning {
	0% {text-shadow: 0px 0px 4px rgba(0,110,245,1.00);}
	50% {text-shadow: 0 0 40px  rgba(0,110,245,1.00);}
	100% {text-shadow: 0 0 4px  rgba(0,110,245,1.00);}
}
@keyframes swing {
	0% {transform: rotate(3deg);}
	20% {transform: rotate(7deg);}
	60% {transform: rotate(10deg);}
	80% {transform: rotate(7deg);}
	100% {transform: rotate(3deg);}
}
/* RESPONSIVE */
@media screen and (max-width :335px){
	h1{font-size: 1.2rem;}h2{font-size: .9rem;}
	.logo_txt{font-size: 1.3rem;} 
	.contact{font-size: 1.1rem;}
	.phrase{font-size:.8rem;}
	ul li a { font-size:1.2rem;}
	.video{width:90%;}.desktop{ display:none;}
	section{width:90%;margin:4% 0;}
section p{ width:92%; text-align:justify;font-size:1.2rem;}
}		
@media screen and (min-width : 336px ) and (max-width : 490px ){
	.logo_txt{ float:right;font-size:2rem;margin-top:1.5%; letter-spacing:.05rem;}
	.phrase{ float:right; font-size:.9rem; margin-top:.5%;text-align:center;} 
	.contact { float:right;font-size:1rem;;text-align:center; margin:.5%,0,0,0;}
	.desktop{ display:none;}
	ul li a { font-size:1.5rem;}
	h1{font-size:1.4rem;}h2{font-size:1.2rem;}.video{width:80%;}
	section{width:90%;margin:4% 0;}
	section p{ width:92%; text-align:justify;font-size:1.3rem;}
}
@media screen and (min-width : 491px ) and (max-width : 645px ){
	.logo_txt{ font-size:2.8rem;margin-top:.5%;} .phrase{ font-size:1.3rem; margin-top:.5%;} .contact {font-size:1.2rem; margin:.5%,0,1%,0;}
	.desktop{ display:none;}
	ul li a { font-size:1.5rem;}
	h1{font-size:1.4rem;}h2{font-size:1.2rem;}.video{width:80%;}
	section{width:90%;margin:4% 0;}
	section p{ width:92%; text-align:justify;font-size:1.3rem;}
}
@media screen and (min-width: 646px ) and (max-width: 805px){
	h1{font-size: 2.5rem;}h2{font-size: 1.5rem;}
	.logo_txt{font-size: 3.2rem; letter-spacing:0.33rem;} 
	.contact{font-size: 1.9rem;}
	.phrase{font-size:1.7rem;}
	ul li a { font-size:2rem;}
	.video{width:80%;}.contact::after { content:' 800'}.desktop{ display:none;}
	section{width:90%;margin:4% 0;}
	section p{ width:92%; text-align:justify;font-size:1.4rem;}
}
@media screen and (min-width: 806px ) and (max-width: 965px){
	.logo_txt{ font-size:4rem;margin-top:.5%;letter-spacing:0.25rem;} .phrase{ font-size:2.1rem; margin-top:.5%;} .contact {font-size:2rem; margin:.5%,0,1%,0;}
	.desktop{ display:none;}
	ul li a { font-size:2rem;}
	h1{font-size:2.67rem;}h2{font-size:1.5rem;}.video{width:70%;}
	section{width:90%;margin:4% 0;}
	section p{ width:92%; text-align:justify;font-size:1.5rem;}
}
@media screen and (min-width: 966px ) and (max-width: 1029px){
	.logo_txt{ font-size:4.5rem;margin-top:.5%;letter-spacing:.12rem} .phrase{ font-size:2.2rem; margin-top:.5%;} .contact {font-size:2.1rem; margin:.5%,0,1%,0;}
	.mobile{ display:none;}.desktop{top: 123px;right:.5%; width: 31%;}
	ul li a { font-size:1.3rem;}
	h1{font-size:2.8rem;}h2{font-size:2rem;}.video{width:70%;}
}
@media screen and (min-width: 1030px ) and (max-width: 1285px){
	.logo_txt{ font-size:5rem;margin-top:.5%; letter-spacing:.1rem;} .phrase{ font-size:2.4rem; margin-top:.5%;} .contact {font-size:2.6rem; margin:.5%,0,1%,0;}
	.contact::after { content:' 1280'}
	.mobile{ display:none;}.desktop{top: 154px;right:.5%; width: 31%;}
	ul li a { font-size:1.5rem;}
	h1{font-size:3rem;}h2{font-size:2.5rem;}.video{width:70%;}
}
@media screen and (min-width: 1286px ) and (max-width: 1920px){.mobile{ display:none;}
	.logo_txt{ font-size:6rem;margin-top:.5%; letter-spacing:.2rem;} .phrase{ font-size:3.rem; margin-top:.5%;} .contact {font-size:2.8rem; margin:.5%,0,1%,0;}
	.desktop{top: 203px;right:.5%; width: 30%;}
	ul li a { font-size:1.9rem;}
	h1{ font-size:3.6rem;padding: 0 1%;}h2{font-size:2.5rem;}.video{width:70%;}
}
@media screen and (min-width: 1921px ){.mobile{ display:none;}
mobile{ display:none;}
	.logo_txt{ font-size:8rem;margin-top:.5%; letter-spacing:.3rem;} .phrase{ font-size:4rem; margin-top:.5%;} .contact {font-size:3.8rem; margin:.5%,0,1%,0;}
	.desktop{top: 203px;right:.5%; width: 30%;}
	ul li a { font-size:1.9rem;}
	
section p{ font-size:2.5rem;}
}
   #navMain > ul > li { float:left; width:100%; }
   #navMain > ul > li > ul { width:100%; z-index:1;}