/***** Reset *****/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu,
nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; outline: none; list-style-type: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/***** Modal *****/
#overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); } 
#modal { position:absolute; } 
#modal-content { padding:20px; background-color: #fff; } 
#modal-close { position:absolute; background: url("../images/close.png") 0 0 no-repeat; width:24px; height:27px; display:block; text-indent:-9999px; letter-spacing: -5px; overflow: hidden; top:-7px; right:-7px;}

/***** Global *****/
#message-info { position: fixed; width: 100%; top: -5px; left: 0px; z-index: 100; text-align: center; display: none; }
#message-info span { display: inline-block; padding: 20px; background-color: #fff; font-size: 16px; }
#message-info span.rapport { color: #4c8a3d; border: solid 5px #4c8a3d; }
#message-info span.erreur{ color: #ff0000; border: solid 5px #ff0000; }

body, html { width: 100%; height: 100%; font-size: 14px; font-family: 'Open Sans', sans-serif; color: #000; font-weight: 300; background-color: #f8f6f7; }

a { text-decoration: none; }

#global { width: 100%; height: 100%; overflow: hidden; position: relative; }

#wrap-mobile { display: none; width: 100%; height: 100%; text-align: center; }
#wrap-mobile img { max-width: 70%; margin-top: 50px; }
#wrap-mobile #baseline-mobile { text-align: center; padding: 20px 10% 0 10%; font-size: 15px; color: #031a5c; }
#wrap-mobile #baseline-mobile a { display: block; width: 30px; height: 30px; margin: 20px auto 0 auto; background-color: #393939; color: #fff; line-height: 30px; text-align: center; border-radius: 30px; -webkit-border-radius: 30px; }
#wrap { width: 100%; height: 100%; overflow: hidden; position: relative; }
#wrap2 { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0px; left: 0px; z-index: 4; background-color: #f8f6f7; }
#wrap2 div#wrap2-0 { display: block; position: absolute; top: 50%; margin-top: -50px; left: 50%; margin-left: -50px; width: 100px; height: 100px; }
#wrap2 div#wrap2-0 span { display: block; width: 10px; height: 10px; overflow: hidden; letter-spacing: -5px; text-indent: -9999px; background-color: #E3017E; position: absolute; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
#wrap2 div#wrap2-0 span#wrap2-1 { top: 25px; left: 15px; }
#wrap2 div#wrap2-0 span#wrap2-2 { top: 25px; left: 45px; }
#wrap2 div#wrap2-0 span#wrap2-3 { top: 25px; left: 75px; }
.animation1 { animation: bulle 2s linear infinite; -webkit-animation: bulle 2s linear infinite; -o-animation: bulle 2s linear infinite; -moz-animation: bulle 2s linear infinite; }
.animation2 { animation: bulle 2s linear infinite 0.5s; -webkit-animation: bulle 2s linear infinite 0.5s; -o-animation: bulle 2s linear infinite 0.5s; -moz-animation: bulle 2s linear infinite 0.5s; }
.animation3 { animation: bulle 2s linear infinite 1s; -webkit-animation: bulle 2s linear infinite 1s; -o-animation: bulle 2s linear infinite 1s; -moz-animation: bulle 2s linear infinite 1s; }

#wrap2 div#wrap2-0 div { position: absolute; bottom: 0px; left: 0px; width: 100%; text-align: center; font-size: 12px; }   

h1 { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; display: none; }
h1 img { display: block; position: absolute; top: 0px; left: 0px; }

#video { position: absolute; top: 0px; left: 0px; z-index: 2; }

h2 { display: none; position: absolute; top: 780px; left: 0px; text-align: center; width: 100%; z-index: 3; font-size: 15px; color: #031a5c; padding-top: 5px; font-weight: 300; }
h2 a { display: block; width: 30px; height: 30px; margin: 20px auto 0 auto; background-color: #393939; color: #fff; line-height: 30px; text-align: center; border-radius: 30px; -webkit-border-radius: 30px; }

@keyframes bulle {
    0% { top: 25px; }  
    25% { top: 0px; }  
    50% { top: 25px; }
    75% { top: 50px; }  
    100% { top: 25px; }
}
@-webkit-keyframes bulle {
    0% { top: 25px; }  
    25% { top: 0px; }  
    50% { top: 25px; }
    75% { top: 50px; }  
    100% { top: 25px; }  
}
@-o-keyframes bulle {
    0% { top: 25px; }  
    25% { top: 0px; }  
    50% { top: 25px; }
    75% { top: 50px; }  
    100% { top: 25px; }
}
@-moz-keyframes bulle {
    0% { top: 25px; }  
    25% { top: 0px; }  
    50% { top: 25px; }
    75% { top: 50px; }  
    100% { top: 25px; }
}

/***** Menu *****/
#menu-full-mobile, #menu-mobile, #mobile-arrow { display: none; }

menu { visibility: hidden; opacity: 0; position: fixed; bottom: 0px; left: 0px; width: 100%; padding: 15px 0; background-color: #fff; z-index: 10; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; }
menu.actif { visibility: visible; opacity: 1; }
menu #menu { width: 1170px; margin: 0 auto; }
menu #menu:after { content: " "; display: block; clear: both; }
menu #menu-partie-gauche { float: left; }
menu #menu-partie-droite { float: right; position: relative; }
menu #menu-partie-gauche #menu-partie-gauche-navigation { float: left; }
menu #menu-partie-gauche #menu-partie-gauche-navigation a, menu #menu-partie-gauche #menu-partie-gauche-menu a { font-size: 15px; color: #a0a0a0; margin-right: 30px; }
menu #menu-partie-gauche #menu-partie-gauche-navigation a i, menu #menu-partie-gauche #menu-partie-gauche-menu a i { color: #00528f; }
menu #menu-partie-gauche #menu-partie-gauche-menu { float: left; position: relative; }
menu #menu-partie-gauche #menu-partie-gauche-menu #menu-partie-gauche-menu-realisations { display: none; position: absolute; bottom: 50px; left: -190px; text-align: center; width: 280px; }
menu #menu-partie-gauche #menu-partie-gauche-menu #menu-partie-gauche-menu-realisations #menu-partie-gauche-menu-realisations-close { position: absolute; top: 5px; right: 5px; margin: 0; color: #00528f; }
menu #menu-partie-gauche #menu-partie-gauche-menu #menu-partie-gauche-menu-realisations ul { background-color: #fff; padding: 25px 0; }
menu #menu-partie-gauche #menu-partie-gauche-menu #menu-partie-gauche-menu-realisations ul li { padding: 2px 0; }
menu #menu-partie-gauche #menu-partie-gauche-menu #menu-partie-gauche-menu-realisations ul li a { text-transform: uppercase; color: #7f7f7f; font-size: 15px; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; margin: 0; }
menu #menu-partie-gauche #menu-partie-gauche-menu #menu-partie-gauche-menu-realisations ul li a:hover, 
menu #menu-partie-gauche #menu-partie-gauche-menu #menu-partie-gauche-menu-realisations ul li a.actif { color: #00528f; }
menu #menu-partie-gauche #menu-partie-gauche-menu #menu-partie-gauche-menu-realisations span { display: block; font-size: 50px; line-height: 0px; text-align: right; }
menu #menu-partie-gauche #menu-partie-gauche-menu #menu-partie-gauche-menu-realisations span .fa { line-height: 0; color: #fff; margin-right: 50px; }
menu #menu-partie-droite h3 { font-size: 18px; text-transform: uppercase; color: #00528f; float: right; margin-right: 20px; font-weight: 400; }
menu #menu-partie-droite #menu-partie-droite-picto { float: right; }
menu #menu-partie-droite #menu-partie-droite-picto a.menu-partie-droite-picto-fa { vertical-align: top; display: inline-block; font-size: 15px; width: 25px; height: 25px; text-align: center; background-color: #00528f; color: #fff; border-radius: 25px; -webkit-border-radius: 25px; font-weight: 300; }
menu #menu-partie-droite #menu-partie-droite-picto a img { margin: 0 10px; }
menu #menu-partie-droite #menu-partie-droite-details { display: none; position: absolute; bottom: 55px; right: 25px; width: 350px; }
menu #menu-partie-droite #menu-partie-droite-details a { position: absolute; top: 5px; right: 5px; color: #00528f; }
menu #menu-partie-droite #menu-partie-droite-details div { background-color: #fff; padding: 25px 10px; }
menu #menu-partie-droite #menu-partie-droite-details div h4 { color: #00528f; font-weight: 300; text-transform: uppercase; font-size: 16px; }
menu #menu-partie-droite #menu-partie-droite-details span { display: block; font-size: 50px; line-height: 0px; text-align: right; }
menu #menu-partie-droite #menu-partie-droite-details span .fa { line-height: 0; color: #fff; margin-right: 50px; }
@media only screen and (max-width:1172px) { 
    menu #menu { width: 920px; margin: 0 auto; }
}

/***** Strate *****/
.strate { width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; position: absolute; left: 0px; bottom: -150%; z-index: 6; margin: 0; }
.strate-animation { transition: bottom 0.5s ease-out; -webkit-transition: bottom 0.5s ease-out; }
#strate-1 *,#strate-2 *,#strate-3 *,#strate-4 *,#strate-5 *,#strate-6 *,#strate-7 *,#strate-8 *,#strate-9 *,#strate-10 *,#strate-11 * { display: none; }
#strate-1 { background-image: url("../images/strate-1.jpg"); }
#strate-2 { background-image: url("../images/strate-2.jpg"); }
#strate-3 { background-image: url("../images/strate-3.jpg"); }
#strate-4 { background-image: url("../images/strate-4.jpg"); }
#strate-5 { background-image: url("../images/strate-5.jpg"); }
#strate-6 { background-image: url("../images/strate-6.jpg"); }
#strate-7 { background-image: url("../images/strate-7.jpg"); }
#strate-8 { background-image: url("../images/strate-8.jpg"); }
#strate-9 { background-image: url("../images/strate-9.jpg"); }
#strate-10 { background-image: url("../images/strate-10.jpg"); }
#strate-11 { background-image: url("../images/strate-11.jpg"); }

.strate-contact { background-color: #f8f6f7; overflow: hidden; }
.strate-contact #map { width: 55%; height: 100%; float: left; }
.strate-contact #strate-contact { width: 45%; height: 100%; float: left; position: relative; }
.strate-contact #strate-contact div { width: 100%; position: absolute; bottom: 100px; left: 100px; }
.strate-contact #strate-contact p { padding-top: 30px; }
.strate-contact #strate-contact p img#strate-contact-logo { display: block; max-width: 45%; }
.strate-contact #strate-contact p a { color: #000; }
.strate-contact #strate-contact p a { margin-right: 15px; }

/***** Responsive < 920px *****/
@media only screen and (max-width:920px) { 
    #wrap { display: none; }
    #wrap-mobile { display: block; }
    
    menu { bottom: -2000px; }
    #menu-mobile { display: none; position: fixed; top: 0px; left: 0px; width: 100%; z-index: 10; background-color: #fff; padding: 10px 0; min-height: 20px; }    
    #menu-mobile #menu-mobile-picto-menu { position: absolute; left: 5px; top: 0px; font-size: 25px; color: #00528F; }
    #menu-mobile #menu-mobile-picto-essentiel { position: absolute; right: 5px; top: 10px; }
    #menu-mobile p { width: 100%; position: absolute; top: 40px; left: 0px; background-color: #fff; }
    #menu-mobile p span { display: none; padding: 15px; }
    #menu-mobile #menu-mobile-picto-plus { position: absolute; bottom: -18px; left: 50%; margin-left: -12px; display: inline-block; font-size: 15px; width: 25px; padding: 3px 0; text-align: center; background-color: #00528f; color: #fff; border-radius: 25px; -webkit-border-radius: 25px; font-weight: 300; }
    #menu-mobile div { text-align: center; font-size: 14px; text-transform: uppercase; color: #00528f; font-weight: 400; }
    
    #menu-full-mobile { display: none; width: 100%; height: 100%; position: fixed; z-index: 30; top: 0px; left: 0px; overflow: auto; background-color: rgba(255, 255, 255, 0.95); }
    #menu-full-mobile img { display: block; margin: 20px auto; max-width: 40%; }
    #menu-full-mobile ul { padding-bottom: 100px; }
    #menu-full-mobile ul li { text-align: center; padding-top: 5px; }
    #menu-full-mobile ul li a { text-transform: uppercase; color: #7f7f7f; font-size: 15px; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; margin: 0; }
    #menu-full-mobile ul li a:hover, #menu-full-mobile ul li a.actif { color: #00528f; }
    #menu-full-mobile span { display: block; position: absolute; top: 10px; right: 10px; font-size: 30px; color: #00528f; }
    
    .strate-contact { background-color: #f8f6f7; overflow: auto; }
    .strate-contact #map { width: 100%; height: 350px; float: none; }
    .strate-contact #strate-contact { width: 100%; height: auto; float: none; position: relative; }
    .strate-contact #strate-contact div { width: 100%; position: static; text-align: center; padding-bottom: 100px; }
    .strate-contact #strate-contact p { padding: 30px 0; }
    .strate-contact #strate-contact p img#strate-contact-logo { display: block; max-width: 45%; margin: 0 auto; }
    .strate-contact #strate-contact p a { color: #000; }
    .strate-contact #strate-contact p a { margin: 0 5px; }
    
    #mobile-arrow { display: none; position: fixed; z-index: 100; bottom: 10px; left: 0px; text-align: center; width: 100%; }            
    #mobile-arrow a { display: inline-block; font-size: 30px; width: 50px; padding: 3px 0; text-align: center; background-color: #00528f; color: #fff; border-radius: 25px; -webkit-border-radius: 25px; font-weight: 300; margin: 0 5px; }
}