@font-face{font-family:'bebas';src:url('fonts/BebasNeue Regular.otf');font-weight:500;font-style:normal}
@font-face{font-family:'ubuntu';src:url('fonts/Ubuntu-L.ttf');font-weight:500;font-style:normal}

*{transition:all 0.5s ease}

body{display:block;margin:0;padding:0;font-family:"ubuntu"}

h2,h3{font-weight:normal}

ul{padding:0 0 0 0;list-style:none}
a{text-decoration:none;color:#446CB3} 

nav{display:block;position:fixed;z-index:3;top:0;left:0;opacity:0.8;height:100%}
nav:hover{opacity:1}
nav .bande{display:block;position:absolute;z-index:4;background-color:#2c3e50;width:50px;height:360px}
nav .bande .pourcentage{display:block;height:0;width:50px;background-color:#52B3D9}
nav ul{display:block;position:absolute;z-index:10;width:50px;overflow-x:hidden}
nav li{display:inline-block;border-bottom:1px solid transparent;border-top:1px solid transparent;height:25%;width:300px;color:white;padding:0}
nav li:hover{border-bottom:1px solid white;border-top:1px solid white}
nav li a{display:block;z-index:5;padding:19px 0;width:100%;text-transform:uppercase;font-size:1.3em;color:white}
nav li a i{padding-right:12px;padding-left:14px}

nav:hover ul{width:250px}
nav:hover .bande,nav:hover .bande .pourcentage{width:250px}


header{margin-top:-27px;display:block;transition:none;box-shadow: inset 3px 3px 12px 0 rgba(0,0,0,0.3);background:url(img/background.png) 50% 0 no-repeat fixed;text-align:center;width:100%}
/*header:hover h1{text-shadow:2px 2px 20px white;opacity:0.7}*/
header h1{font-size:2.5em}
header h1 .first{display:block;color:white;font-size:1.6em;padding-top:200px}
header h1 .two{display:block;color:white;font-size:2.5em;margin-top:-15px;padding-top:0}
header i.fa{display:block;position:absolute;bottom:20px;left:50%;margin-left:-40px;text-align:center;color:white;font-size:5em}


article h2{font-size:2em;padding-top:20px;text-align:center;color:#446CB3}

article#lebateau{padding:0 0 50px 0}
article#lebateau ul{text-align:center;font-size:0.9em}
article#lebateau li{display:inline-block;background-color:#ecf0f1;margin-top:30px}
article#lebateau li span.figure{display:block;padding:15px;background-color:#446CB3;text-align:center;font-size:2em;color:white;font-family:"bebas"}
article#lebateau li span.figure span{font-size:0.8em;color:#F5F5F5;padding:0 5px}
article#lebateau li p{display:block;padding:15px}
article#lebateau img{display:block;width:95%;max-width:600px;margin:20px auto}

article#lesplans{transition:none;background:url(img/plan.gif) 50% 0 no-repeat fixed;height:500px}
article#lesplans .fond{display:block;box-shadow: inset 3px 3px 12px 0 rgba(0,0,0,0.3);position:absolute;height:500px;width:100%;left:0;background-color:rgba(68, 132, 192,0.95)}
article#lesplans h2{position:absolute;color:white;z-index:2;text-align:center;width:100%;left:0}
article#lesplans h3{display:block;position:absolute;margin-top:180px;color:white;font-size:2em;z-index:2;text-align:center;width:100%;left:0}
article#lesplans a{display:block;font-family:"bebas";transform:scale(1.2);left:50%;font-size:1.5em;z-index:2;position:absolute;color:white;border:1px solid white;padding:17px 0 16px 0;width:260px;text-align:center;margin:300px auto 0 -131px}
article#lesplans a i{padding-right:5px}
article#lesplans a:hover{color:#446CB3;transform:scale(1.4);background-color:white}

article#lesmateriaux img{display:block;width:95%;max-width:600px;margin:0 auto}

article#lesnavigations{background-color:#ecf0f1}
article#lesnavigations h3{text-align:center;font-weight:normal}
article#lesnavigations .video{height:369px}
article#lesnavigations iframe{height:315px;left:50%;margin-left:-280px;width:560px;position:absolute;z-index:1}


article#leprojet{display:block;width:95%;max-width:1000px;margin:0 auto}
article#leprojet img{display:block;width:100%;max-width:500px;margin:0 auto}

footer{display:block;padding:0 0 20px 0;margin-top:50px;background-color:#bdc3c7;color:#3D3D3D;font-size:0.9em}
footer .contact{text-align:center;display:block;padding:20px 0 60px 0;background-color:#ecf0f1}
footer .contact p{display:block;margin-bottom:50px;font-size:2em}
footer .contact a{font-size:1.5em;font-family:"bebas";color:white;background-color:#446CB3;padding:20px}
footer .contact a:hover{transform:scale(1.5)}
footer .contact a i{padding-right:10px}
footer .credits{width:95%;max-width:1000px;margin:30px auto 0 auto}
footer b{display:block;color:#446CB3;font-weight:normal;font-size:1.2em;text-transform:uppercase}

@media (max-width:1400px){
    body{font-size:0.87em}
    nav li a i{padding:0 15px 0 14px}
}
@media (max-width:1200px){
    body{font-size:0.86em}   
    header h1 .first{padding-top:100px}
}
@media (max-width:1100px){
    nav .bande,nav .bande .pourcentage,nav a span{display:none}
    nav {display:block;top:0;position:fixed;height:35px;width:100%;background-color:#446CB3}
    nav ul{overflow-x:visible;width:100%}
    nav ul li{display:inline-block;height:35px;text-align:center;padding:0;margin-left:-4px;position:relative;top:-14px;width:20%;border:none}
    nav ul li:hover{border:none;background-color:#62BADC}
    nav ul li a{padding:0}
    nav ul li a i{padding-top:10px}
    nav:hover ul{width:100%}
}
@media (max-width:1000px){
    body{font-size:0.84em} 
    nav li a i{padding:0 16px 0 15px}
    article#lesplans{background:none}
}
@media (max-width:800px){
    body{font-size:0.82em} 
}
@media (max-width:600px){
    body{font-size:0.8em} 
    article.video{height:369px}
    article iframe{height:315px;left:auto;margin-left:0;width:100%;position:absolute;z-index:1}
}