@charset "utf-8";
/* CSS Document */

@charset "utf-8";
/* CSS Document */

* {margin: 0;border: 0;padding: 0;}
html {height:auto; background-color: #161F28;}
body {height:100%;margin:0;padding:0;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-size:100%;font-weight: lighter;color: white;background-color: #161F28;}
html, body{-webkit-text-size-adjust:none;}
body a {list-style:none;text-decoration:none;border:0;color:#FFF;}
body a:hover, body a:focus, body a:active {color:white;text-decoration: none;}
body img {border:0;}
a:focus  {outline: none;}
h1 {font-size:1.7em;line-height:1.2em;}
h1 a{color: #FFF;text-decoration: none;} h1 a:hover{color:#F8B707;text-decoration: none;}
h2 {font-size:1.3em;line-height:1.3em;font-weight:lighter;padding:0; margin:0;}
h2 a{color: white;text-decoration: none;}
h3 {font-size:1.2em;font-weight:lighter;line-height:1.2em;padding:0;}

.both{clear: both;}
.bothleft {clear:left;}
.center {text-align:center;}
.flex-height{max-height:100%; width:auto; margin:0; padding:0;}
.flex-width{max-width:100%; height:auto; margin:0; padding:0;}
.bold {font-weight:bold;}
.blu {color:#86C8E0;} .blu a{color:#86C8E0;}
.blu a:hover, .blu a:focus, .blu a:active {color:white;text-decoration: none;}
.red {color:red;}
.green {color: #0C0;}
.border {border:1px solid white;}
.padding50 {padding:0 7%;}

#conteneur-site {width:100%;height:auto;margin:0 auto ;padding:0;text-align:center;}
#conteneur_mobile {width:100%;height:45px;margin:0 auto 0 auto;border-bottom:2px solid red;margin-top:5px;display:none;}
#conteneur-navigation {width:100%;height: 30px;line-height:30px;margin:0 auto ;font-size:1em;font-weight:lighter;text-align:center;background-color:#313041;border-bottom:1px red solid;}
#navigation {margin: 0 auto;width:80%;padding: 0 ;list-style: none ;}
#navigation li {display: inline ;margin:0 2.1%;float:none;padding:0;}
#navigation ul.navigation {margin:0; width:auto;padding:0;}
#navigation li a {color:#fff;text-decoration:none;text-align:center;}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {color:#86C8E0;}

#header {width:80%;height:110px;margin:0 auto;padding:0;}
#header_logo {width:35%;height:40px;margin: 0 auto;padding: 35px 0 35px 22px ;float:left;text-align:left;}
#header_social {width:50%;height:24px;margin: 0 auto;padding: 43px 22px 43px 0 ;float:right;text-align:right;}
#header_social img{margin-left:20px;}

#contenu {width:80%;height:auto;margin: 0 auto;padding: 0 ;background-color:black;}
#slider {width:100%;height:auto;margin: 0 auto;padding: 0 ;}
#home {width:95%;height:auto;margin: 0 auto;padding:2.5%;text-align:justify;font-size:80%;}

.footer2 {width:100%;height:40px;line-height:40px;margin: 0 auto;padding: 0 ;text-align:center;background-color:#313041;border-top:1px red solid;font-size:13px;} .footer2m {display: none;}



@media only screen and (max-width: 320px) {
h1 {font-size:1.5em;}
#conteneur_mobile {}
.footer2m {font-size:0.8em;}
}

@media only screen and (min-width: 321px) and (max-width: 480px) {
#conteneur_mobile {}
.footer2m {font-size:0.8em;}	

}


@media only screen and (min-width: 481px) and (max-width: 600px) {
/* Tablet */
#conteneur_mobile {}
}

@media only screen and (min-width: 601px) and (max-width: 768px) {
/* Tablet */
#conteneur_mobile {}

}

@media screen and (max-width: 768px) {
body {font-size:85%;}
.padding50 {padding:0;}
#conteneur_mobile {display:inherit;width:96%;height:auto;margin:0;padding:1% 2%;}
.menu {position:relative;display:inline-block;float:left;}
.menu ul.active {display:none;}
.menu ul {width:150px;position:absolute;top:120%;left:0px;padding:10px 5px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);border-radius:3px;background:#3A5269;display:inline-block; }
.menu ul:after {width:0px;height:0px;position:absolute;top:0%; left:12px;content:'';
transform:translate(0%, -100%);border-left:7px solid transparent;border-right:7px solid transparent;
border-bottom:7px solid #3A5269;}
.menu li {margin:10px 0px 10px 0px;padding: 2px 3px;list-style:none;font-size:14px;text-align:left;float:none;
display:block; font-weight:bold;}
.menu li:last-child {margin-right:0px;}
.menu a {display:block;text-decoration:none;text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color: white;transition:color linear 0.15s;}
.menu a:hover, .menu .current-item a {text-decoration:none;color:red;}
.toggle-nav {padding:4px 13px 7px 13px;float:left;display:inline-block; box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;background:#3A5269;text-shadow:0px 1px 0px rgba(0,0,0,0.5);color:#777;font-size:20px;
transition:color linear 0.15s; text-decoration:none;}
.toggle-nav:hover, .toggle-nav:focus, .toggle-nav.active {text-decoration:none;color:#aabb8d;}
#networks {width:auto;float:right;height:40px;margin:0;text-align:right;} #networks img{margin-left:10px;}
#conteneur-navigation {display:none;}
#header {width:100%;height:auto;} #header_logo {width:100%;height:auto;padding: 30px 0 ;float:none;text-align:center;} #header_social {display:none;}
#contenu {width:100%;}
#home {font-size:100%;height:auto;} 
.footer2 {display: none;}
.footer2m {display: inherit;width:100%;height:30px;line-height:30px;margin: 0 auto;padding: 0 ;text-align:center;background-color:#313041;border-top:1px red solid;}

}


@media only screen and (min-width: 769px) and (max-width: 900px) {
body {font-size:85%;}
#navigation {width:100%;} #navigation li {margin:0 1.7%;}	
#header {width:100%;}
#contenu {width:100%;}
	
}


@media only screen and (min-width: 901px) and (max-width: 1024px) {
#navigation {}
body {font-size:85%;}
#navigation {width:90%;} #navigation li {margin:0 2%;}
#header {width:90%;}
#contenu {width:90%;}


}


@media only screen and (min-width: 1025px) and (max-width: 1200px) {
#navigation {}
body {font-size:92%;}
#navigation {width:85%;} #navigation li {margin:0 1.9%;}
#header {width:85%;}
#contenu {width:85%;}
	
}