* {
	margin:0px;
	padding:0px;
}


.wrapper {margin: 0 auto;width: 980px;}
.cleara:after {
    content:"";
    display:table;
    clear:both;
}
body {
font-family: 'Karla', sans-serif;
  background: #336193;
  color: #333;
  padding: 0;
  margin: 0;
  display:flex;
  flex-direction:column;
}
/*-----------------------------------------------*\
/* MENU SITE                                     *|
/*-----------------------------------------------*/
.navDesktop{
    display:block;    
    font-weight: 800;
    line-height:34px;
    font-size:14px;
    text-transform: uppercase;
    background-color: #f28505;
}
.navDesktop a{
    float:left;
    padding: 0 24px;
    color:#000;
    -webkit-transition:color .5s,background .9s;        
    transition: color .5s, background .9s;      
}
.navDesktop a:hover,
.navDesktop a:active,
.navDesktop a:focus{
    color:#fff;
    background-color: #c56d05;
	text-decoration: none;
}


.company > a:hover,
.company > a:active,
.company > a:focus,
.company > a:-webkit-any-link{
	text-decoration: none;
	color:#1876fb;
	font-weight:bold;
}

//*!----------------------------------------------*\
/* MENU MOBILE                                   *|
/*-----------------------------------------------*/
.navResponsive, .navResponsive #toggle {display:none;}
/*!Hamburger*/
.navResponsive .hamburger {z-index:11;position:absolute;top:3.7em;right:3%; /*! 10% si ecran plus petit que et mode croix */width:2em;height:45px;margin-top:-45px;margin-left:-2em;cursor:pointer;}
.navResponsive .hamburger div {position:relative;width:3em;height:7px;margin-top:8px;border-radius:3px;background-color:#025287;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
/*!Nav Styles*/
.navResponsive .fullScreen {z-index:10;position:fixed;top:-200%;right:0;bottom:0;left:0;width:100%;height:100%;overflow:hidden;background-color:#025287;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition-timing-function:cubic-bezier(.17,.04,.03,.94);transition-timing-function:cubic-bezier(.17,.04,.03,.94);-webkit-transition-duration:300ms;transition-duration:300ms;}
.navResponsive .nav-wrapper {position:relative;height:100%;overflow:hidden;overflow-y:auto;}
.navResponsive nav {margin-left:25%;text-transform:uppercase;margin-top:100px;}
.navResponsive nav a {margin-left:20px;display:block;position:relative;margin-top:1.25em;text-decoration:none;font-size:2em;line-height:1.1em;letter-spacing:1px;color:#fff;-webkit-transition:color .2s ease-in-out;transition:color .2s ease-in-out;}
.navResponsive nav a:before {content:'';position:absolute;left:-.5em;width:.25em;height:0;background-color:white;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
.navResponsive nav a:hover {color:#ff4500;}
.navResponsive nav a:hover:before {height:100%;}
/*!Animations Burger*/
.navResponsive #toggle:checked + .hamburger div {background-color:#fff;}
.navResponsive #toggle:checked + .hamburger {position:fixed;}
.navResponsive #toggle:checked + .hamburger .top-burger {margin-top:25px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
.navResponsive #toggle:checked + .hamburger .bottom-burger {opacity:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.navResponsive #toggle:checked + .hamburger .middle-burger {margin-top:-7px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.navResponsive #toggle:checked ~ .hamburger ~ .fullScreen {top:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
.navResponsive #toggle {position:relative;width:30px;height:26px;margin:100px auto;display:none;}


.nav-wrapper nav ul { list-style-type:none; }

#MAIN {
	width:100%;
	position:absolute;
	display:flex;
	flex-direction:column;
}

#MAIN h1 {
	width:100%;
	color:#0368b0;
	display:flex;
	justify-content:center;
	margin-top:200px;
	font-size:10.8em;
	margin-left:-8px;
	font-family: 'Heebo', sans-serif;
	letter-spacing:-3px;
}

#MAIN h2 {
	width:100%;
	color:#0368b0;
	display:flex;
	justify-content:center;
	font-size:3em;
	margin-top:-1.5em;
	font-family: 'Heebo', sans-serif;
	letter-spacing:0px;
}


header #LOGO {
	margin-left:20px;
	margin-top:10px;
}

header #LOGO a{
	font-weight:bold;
	color:#0368b0;
	font-size:50px;
	font-family: 'Heebo', sans-serif;
	letter-spacing:-1px;
}

header #LOGO #SUB_LOGO{
	margin-left:15px;
	margin-top:10px;
	font-size:25px;
}


header #LOGO a:link { text-decoration:none; }
header #LOGO a:visited { text-decoration:none; }
header #LOGO a:hover { text-decoration:none; }
header #LOGO a:active { text-decoration:none; }

footer {
	display:flex;
	width:100%;
	height:200px;
	background:#fff;
	color:#333;
	flex-direction:column;
	border-top:1px solid #ccc;
}

article {
	flex:1;
	padding:20px;
	display:flex;
}

article img {
	width:900px;
}

article .content{
	display:flex;
	padding:10px;
	flex-direction:column;
}

article .content h2{
	font-size:2.5em;
}

article .content p{
	font-size:1.5em;
}

article .content ol li{
	font-size:1.5em;
	margin-top:20px;
	margin-left:20px;
}

.mt_10 {
	margin-top:10px;
}

.mt_20 {
	margin-top:20px;
}

.mt_60 {
	margin-top:60px;
}

#COPYRIGHT {
	margin-top:20px;
	display:flex;
	width:100%;
	flex-direction:row;
	justify-content:center;
	font-weight:bold;
	padding-bottom:20px;
}

#COMPANY {
	margin-top:20px;
	display:flex;
	width:100%;
	justify-content:space-around;
}

.company {
	padding:10px;
}

.sns {
	width:50px;
}


article .content{
	display:flex;
	padding:10px;
	flex-direction:column;
}

article.center{
	justify-content:center;
}

@media screen and (max-width:1400px) {
	article{
	flex-direction:column;
	}
	



}

@media screen and (max-width:980px) {
.navResponsive {display:flex;}
.navResponsive .hamburger { right:6%;}
#MAIN h1 {
margin-top:150px;
	font-size:7.4em;
	margin-left:-5px;
}

#MAIN h2 {
	font-size:2em;
}

.navResponsive nav a {
	font-size:1.8em;
}

#COMPANY {
	flex-direction:column;
}

article img {
	width:100%;
}

article .content {
	padding:0px;
}

article .content h2{
	font-size:2em;
}

article .content p{
	font-size:1.2em;
}


}




@media screen and (max-width:580px) {

.navResponsive nav {margin-left:2%;}
.navResponsive .hamburger { right:10%;}
#MAIN h1{
margin-top:200px;
	font-size:5.7em;
	margin-left:-4px;
}

#MAIN h2 {
	font-size:1.5em;
}

.navResponsive nav a {
	font-size:1.5em;
}

header #LOGO #SUB_LOGO{
	font-size:1.2em;
	margin-left:5px;
}


article .content h2{
	font-size:1.3em;
}

article .content p{
	font-size:1em;
}


header #LOGO a{
	font-size:40px;
}

.navResponsive #toggle:checked + .hamburger .middle-burger {
	margin-top:-5px;
}

.navResponsive .hamburger div {
	width:2.5em;
	height:5px;
	margin-top:5px;
}

.sns {
	width:40px;
}

}