html{ height: 100%; }
body{ padding-top: 100px; height: 100%; }

.wrap{ max-width: 960px; margin: auto; }
.col-50{ width: 50%; float: left; }
.col-clear{ clear: both; }
.left{ padding-right: 1px; }
.right{ padding-left: 1px; }

header{ position: fixed; background: #fff; box-shadow: 0 2px 3px 0 rgba(0,0,0,0.2);top: 0; width: 100%; height: 100px; z-index: 15; }
    header h1{ margin: 40px 10px; float: left; height: 20px; line-height: 10px; }
    header h1 img{ width: 280px; }

    nav{ padding: 40px 20px 0; font-size: 11px; letter-spacing: 2px; font-family: michroma, sans-serif; text-transform: uppercase; float: right; }
    .menu-toggler{ display: none; line-height: 30px; text-align: right; cursor: pointer; }
    .menu-toggler:before{ content: "\e80b"; font-family: flexslider; font-size: 36px; font-weight: normal; line-height: 30px; float: right; margin-left: 10px; }
    .menu-toggler:hover{ color: #7aa2c3 }
    nav ul{ margin: 0; }
    nav li{ display: inline; }
    nav li a{ color: #333; padding: 5px 10px; }

    @media screen and (max-width: 1024px) {
        .menu-toggler{ display: block; }
        
        nav .menu-toggler + ul{ height: 0; overflow: hidden;
            -webkit-transition: height 200ms linear;
            -moz-transition: height 200ms linear;
            transition: height 200ms linear; }
        nav .menu-toggler.opened + ul{ height: 130px; }
        nav ul{ position: fixed; width: 100%; background-color: #fff; left: 0; top: 100px; box-shadow: 0 2px 3px 0 rgba(0,0,0,0.2); }
        nav li{ display: block; border-top: 1px solid #eee; }
        nav li a{ display: block; padding: 10px 55px 10px 10px; text-align: right; }
    }
    @media screen and (max-width: 480px) {
        body{ padding-top: 60px; }
        header{ height: 60px; }
        header h1{ margin: 0; height: 60px; font-size: 16px; padding: 20px 70px 20px 10px; float: left; width: 100%; margin: 0; box-sizing: border-box; }
        .menu-toggler{ width: 30px; white-space: nowrap; overflow: hidden; text-indent: 30px; }
        nav{ padding-top: 15px; margin-left: -70px; }
        nav ul{ top: 60px; }
    }

section{ overflow: hidden; }
    .flexslider { margin: 0; border: 0px; }

    #slide-vitrine{ overflow: visible; }

    #edito .wrap{ margin: 200px auto 200px; text-align: center; }

    #slide-produits{}
    #slide-produits .flex-direction-nav a:before { content: '\e800'; }
    #slide-produits .flex-direction-nav a.flex-next:before { content: '\e801'; }

    #headlines{ overflow: hidden; }
    #headlines .col-50.left { background: url(/img/marques.jpg) no-repeat 0 50%; background-attachment: fixed; background-size: 50%; }
    #headlines .col-50.left img{ opacity: 0; max-width: 115%; }

    #headlines  .col-50.right{ padding: 30px 70px 0px; }
    #headlines   ul.marques li{ list-style: none; width: 60%; float:left; margin: 0; padding: 5%; position: relative; }
    #headlines   ul.marques li.odd{ float: right; }
    #headlines   ul.marques li.even{  }
    #headlines   ul.marques li img{  }
    #headlines   ul.marques li span { display: block; text-align: center; font-size: 12px; min-width: 100px; }

    #headlines2{ overflow: hidden; }
    #headlines2 .col-50.left{ padding: 50px 70px 0px; }
    #headlines2 .col-50.right{ background: url(/img/boutique.jpg) no-repeat 100% 50%; background-attachment: fixed; background-size: 50%; }
    #headlines2 .col-50.right img{ opacity: 0; }

    #quote{ background-color: #7aa2c3; color: #fff; border: 3px solid #fff; }
    #quote .wrap{ margin: 200px auto; }
        .quote{ padding: 0 40px; max-width: 500px; margin: auto; }
        .quote h3{ line-height: 1em; color: inherit; }
        .quote h3:before{ content: '\e804'; font-family: 'flexslider'; display: inline-block; position: relative; top: -14px; text-indent: -22px; }
        .quote p{ text-align: right; margin: 2em 0 0; }

    #contact{ background: #fff; }
    #contact .wrap{ margin: 80px auto 50px; padding: 0 20px; overflow: hidden; }
    #contact .wrap .col-50.left{ padding-right: 40px; text-align: right; }
    #contact .wrap .col-50.right{ padding-left: 10px; }
    #contact    h2{ text-align: center; margin-bottom: 80px; }
    #contact    .adresse{ text-align: center; margin: 0px 0 80px; }
    #contact .type-submit input{ width: 100px; box-sizing: content-box; padding: 0; float: right; }
        
        #contact .msg{ padding: 5px 10px; margin: 0 0 2em; border: 1px dotted; }
        #contact .msg.error{ color: #900; border-color: #900; background-color: #e8dddd; }
        #contact .msg.sent{ color: #040; border-color: #040; background-color: #dde8dd; }

    #map{ height: 70%; border-top: 1px solid #eee; }
    #map iframe{ min-height: 400px; height: 100% !important; }
        .scrolloff{ pointer-events: none; }

#footer{ background-color: #7aa2c3; color: #fff; }
#footer .wrap{ text-align: right; padding: 10px; }


.go-back-up{ display: block; position: fixed; bottom: 20px; right: 20px; opacity: 0.5; background-color: #a2c0d8; width: 30px; height: 30px; border-radius: 5px; white-space: nowrap; overflow: hidden; z-index: 1; }
.go-back-up:before{ content: '\e807'; font-family: "flexslider"; color: #fff; width: 100%; height: 100%; display: block; text-align: center; line-height: 30px; font-size: 34px; }
.go-back-up:hover{ opacity: 1; }


@media screen and (max-width: 480px) {
    #edito,
    #headlines,
    #headlines2,
    #quote,
    #contact{ display: table; min-height: 70%; }
        #edito .wrap,
        #headlines .wrap,
        #headlines2 .wrap,
        #quote .wrap,
        #contact .wrap{ display: table-cell; vertical-align: middle; padding: 50px 20px !important; }

    #headlines .col-50.left ,
    #headlines2 .col-50.right{ background-size: 100%; }

    #headlines .col-50.right,
    #headlines2 .col-50.left{ padding: 50px 20px 0; }
    
    .quote,
    .quote-title,
    .quote-text{ display: block; width: auto; }

    .col-50{ width: 100%; float: none; }
    
    #contact .wrap .col-50.left{ padding-right: 0; text-align: left; }
    #contact .wrap .col-50.right{ padding-left: 0; }
}