/*
Theme Name: Maucaillou
Version: 1.0
Theme URI: http://www.bonbay.fr/
Author: Bonbay
Author URI: http://www.bonbay.fr/
Text Domain: 
*/

/*	Copyright: (c) 2013 Alexander "Alx" Agnarson
	License: GNU General Public License v3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html*/


/*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,sub,sup,tt,var,b,u,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,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;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}


/*  Base awesome
================================================== */
.fa { width: 1em; text-align: center; }

.grecaptcha-badge{ display:none!important; visibility: hidden!important; }

.cookiebtn{ background: black!important; }

/*  Base formulaire
================================================== */
input, textarea, button, select, label { font-family: inherit; }
input,
textarea,
button,
select,
label { font-size: 14px; }
input::-moz-focus-inner, 
button::-moz-focus-inner { border: 0; padding: 0; }
input[type="text"],
input[type="password"],
input[type="email"],
input[type="submit"],
input[type="tel"],
button,
select,  
textarea { margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0; border-radius: 0; width:100%;}
input, 
textarea,
select, 
button { -moz-appearance: none; -webkit-appearance: none; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; transition: all .2s ease; }
input[type="checkbox"] { -moz-appearance: checkbox; -webkit-appearance: checkbox; }
input[type="radio"] { -moz-appearance: radio; -webkit-appearance: radio; }
label { font-weight: 600; color: #444; }
input[type="text"], 
input[type="password"], 
input[type="email"],
input[type="tel"],
input[type="number"],
select, 
textarea { 
    background: #fff; 
    border: 1px solid #8d001a; 
    color: #000; 
    display: block; 
    max-width: 100%; 
    outline: none; 
    padding: 7px 8px; 
}
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus, 
textarea:focus { border-color: #ccc; color: #444; -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1); box-shadow: 0 0 3px rgba(0,0,0,0.1); }
label .required { color: #8d001a; }
input[type="submit"],
button[type="submit"] { 
    background: #CA3030; 
    color: #fff; 
    padding: 8px 14px; 
    font-weight: 600; 
    display: inline-block; 
    border: none; 
    cursor: pointer;
    font-size: 20px;
   /* max-width: 50%;*/
}
input[type="submit"]:hover,
button[type="submit"]:hover { background: #000; }

div.wpcf7-validation-errors, 
div.wpcf7-acceptance-missing{
    border: 1px solid #8d001a;
}


/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */

 
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: auto; padding: 0;width:100%;display: block;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; position:relative} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block; border: none;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {position: relative;  zoom: 1; float: left;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}


/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 37px; height: 49px;  display: block; background: url(gfx/fleches.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 5000; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav .flex-next {background-position: 100% 0; right:-80px; }
.flex-direction-nav .flex-prev {left:-80px;}
.flexslider:hover .flex-next {opacity: 0.8; }
.flexslider:hover .flex-prev {opacity: 0.8; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled { cursor: default;}

/* Control Nav */
.flex-control-nav { width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; display: inline;}
.flex-control-paging{
    width: 50%; position: absolute; left: 25%;  bottom:0px; text-align: center; height: 9px;
}
.flex-control-paging li{ display: inline-block; margin: 0 6px; width: 60px; height: 9px; }
.flex-control-paging li a {
    width: 60px; 
    height: 9px; 
    display: inline-block; 
    background: rgba(255,255,255,0.4); 
    cursor: pointer; 
    text-indent: -9999px; 
}
.flex-control-paging li a:hover { background:#fff;}
.flex-control-paging li a.flex-active { background: #fff; cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
  .flex-direction-nav .flex-next {opacity: 1; right: 0;}
}

a.flex-caption{ background: url(img/fleche-txt.png) no-repeat;  padding-left:25px; ; padding-right:15px; font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; color:#000; display:block; width:auto; position:absolute; bottom: 0px; width: 60%; left:22%; text-decoration:none; height: 36px; }
div.flex-caption{ background: url(img/fleche-txt.png) no-repeat;  padding-left:25px; ; padding-right:15px; font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; color:#000; display:block; width:auto; position:absolute; bottom: 0px; width: 60%; left:22%; text-decoration:none; height: 36px; }
.etiquette-slogan{padding-top: 5px;}
a.flex-caption:hover{background: url(../img/fleche-txt.png) no-repeat 5px 12px #e2003b;color:#fff;text-decoration:none;}


@media screen and (max-width: 480px) {
 a.flex-caption{ background: url(../img/fleche-txt.png); font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; color:#000; display:block; width:auto; position:absolute; bottom: 0px; width: 60%; left:22%; text-decoration:none; height: 36px; }
a.flex-caption:hover{background: url(../img/fleche-txt.png) no-repeat 5px 5px #e2003b;color:#fff;text-decoration:none;}
}

#mylightbox{ display: none; }
#mylightbox.featherlight-inner{ display: block; }

/** GRID ***/
.row{ float: left; width: 100%; }
    .spannomargin-1, .spannomargin-2, .spannomargin-3,
    .spannomargin-4, .spannomargin-5, .spannomargin-6,
    .spannomargin-7, .spannomargin-8, .spannomargin-9,
    .spannomargin-10, .spannomargin-11, .spannomargin-12,
    .spannomargin-13, .spannomargin-14, .spannomargin-15,
    .spannomargin-16, .spannomargin-17, .spannomargin-18,
    .spannomargin-19, .spannomargin-20, .spannomargin-21,
    .spannomargin-22, .spannomargin-23, .spannomargin-24{ width: 100%; }

/* tablette portrait */
@media (min-width: 768px){
    .spannomargin-1{ width: 25%; }
    .spannomargin-2{ width: 25%; }
    .spannomargin-3{ width: 25%; }
    .spannomargin-4{ width: 25%; }
    .spannomargin-5{ width: 50%; }
    .spannomargin-6{ width: 50%; }
    .spannomargin-7{ width: 50%; }
    .spannomargin-8{ width: 50%; }
    .spannomargin-9{ width: 50%; }
    .spannomargin-10{ width: 50%; }
    .spannomargin-11{ width: 50%; }
    .spannomargin-12{ width: 50%; }
    .spannomargin-13{ width: 50%; }
    .spannomargin-14{ width: 50%; }
    .spannomargin-15{ width: 50%; }
    .spannomargin-16{ width: 50%; }
    .spannomargin-17{ width: 75%; }
    .spannomargin-18{ width: 75%; }
    .spannomargin-19{ width: 75%; }
    .spannomargin-20{ width: 75%; }
    .spannomargin-21{ width: 100%; }
    .spannomargin-22{ width: 100%; }
    .spannomargin-23{ width: 100%; }
    .spannomargin-24{ width: 100%; }   
}
/* tablette paysage */
@media (min-width: 1024px){
    .spannomargin-1{ width: 4.16666667%; }
    .spannomargin-2{ width: 8.33333333%; }
    .marginl-2{ margin-left: 8.33333333%; }
    .marginr-2{ margin-right: 8.33333333%; }
    .spannomargin-3{ width: 12.5%; }
    .spannomargin-4{ width: 16.666666666667%; }
    .marginl-4{ margin-left: 16.666666666667%; }
    .spannomargin-5{ width: 20%; }
    .spannomargin-6{ width: 25%; }
    .spannomargin-7{ width: 29.16666667%; }
    .spannomargin-8{ width: 33.333%; }
    .marginl-8{ margin-left: 33.333%; }
    .spannomargin-9{ width: 37.5%; }
    .spannomargin-10{ width: 41.66%; }
    .marginl-10{ margin-left: 41.66%; }
    .spannomargin-11{ width: 45.833333333333%; }
    .spannomargin-12{ width: 50%; }
    .marginl-12{ margin-left: 50%; }
    .spannomargin-13{ width: 54.166666666667%; }
    .spannomargin-14{ width: 58.3333333%; }
    .spannomargin-15{ width: 62.5%; }
    .spannomargin-16{ width: 66.666%; }
    .spannomargin-17{ width: 70.8266666%; }
    .spannomargin-18{ width: 75%; }
    .spannomargin-19{ width: 79.16%; }
    .spannomargin-20{ width: 83.32%; }
    .spannomargin-21{ width: 87.4866666%; }
    .spannomargin-22{ width: 91.6533333%; }
    .spannomargin-23{ width: 95.82%; }
    .spannomargin-24{ width: 100%; }
    .mille{ max-width: 960px; }
}
@media (min-width: 1280px){
    .mille{ max-width: 1080px; }
}
@media (min-width: 1480px){
    .mille{ max-width: 1440px; }
}

.nomobile{ display: none; }
@media (min-width: 1024px){ .nomobile{ display: block; } }
.onlymobile{ display: block; }
@media (min-width: 1024px){ .onlymobile{ display: none; } }

/*****************************************/

/*FONTS*/
    .raleway{ font-family: 'Raleway', sans-serif; }
    .alexbrush{ font-family: 'Alex Brush', cursive; }
    .thin{ font-weight: 100; }
    .light{ font-weight: 300; }
    .regular{ font-weight: 400; }
    .medium{ font-weight: 600; }
    .bold{ font-weight: 700; }
    .ultrabold{ font-weight: 900; }
/**/

img, iframe{ max-width: 100%; }
h1, h2, h3, h4, h5, h6{ }
h1{ font-size: 32px; }
h2{ font-size: 28px; }
h3{ font-size: 24px; }
h4{ font-size: 20px; }
.italique, i, em{ font-style: italic; }
.lowercase{ text-transform: lowercase; }
.uppercase{ text-transform: uppercase; }
.black, a.black{ color:#000; }
.white, a.white{ color: #fff; }
.orange, a.orange{ color: #d0a93d; }
.red, a.red{ color:#ca3030; }
.grey, a.grey{ color: #c2c0c0; }
.blue, a.blue{ color:#5f6e86; }

strong, b{ font-weight: 700; }
.align-left, .alignleft{ text-align: left; }
.align-right, .alignright{ text-align: right; }
.align-center, .aligncenter{ text-align: center; }

img.alignleft, img.align-left{ float: left; margin: 0 2em 1em 0 }
img.alignright, img.align-right{ float: right; margin: 0 0 1em 2em }
img.aligncenter, img.align-center{ float: none; margin: 0 auto 1em auto }

.justify{ text-align: justify; }

.button{
    display: block;
    width: auto;
    text-decoration: underline;
    font-size: 16px;
    text-align: center;
    transition: ease-in-out all 0.1s;
    cursor: pointer;
    background: white;
    text-decoration: none;
}
.button:hover{
    background: black!important;
    text-decoration: none;
}

a{ color: #5f6e86; text-decoration: none; cursor: pointer; }
a:hover{ text-decoration: underline; }
p{ margin: 10px 0; }
label, input[type="text"], input[type="tel"], input[type="email"], textarea, select{
    width: 100%;
    float: left;
    margin: 5px 0;
    font-size: 16px;
}
article ul{ margin: 1em 0; }
article ul li{ list-style-type: square; margin-left: 2em; }

.left{ float: left; }
.right{ float: right; }
.center{ margin: 0 auto; }

.relative{ position: relative!important; }
.absolute{ position: absolute!important; }

.error{ color: red; font-weight: bold; }

/*****/
/* base */

    body{
        background: #fff;
        margin:0;
        padding:0;
        color:#000;
        font-family: 'Raleway', sans-serif;
        font-weight: 400;
        font-size: 18px;
    }
    .conteneur{ max-width: 1920px; margin: 0 auto; }
    header{
        width: 100%;
        float: left;
        position: relative;
        height: 116px;
    }
    a#logo{
        display: block;
        background: transparent url('gfx/logo-menu.png') no-repeat center top;
        width: 100%;
        background-size: 100%;
        max-width: 240px;
        height: 95px;
        float: none;
        margin: 0 auto;
    }
    #home a#logo{
        /*background: transparent url('gfx/petit-logo.png') no-repeat center top;
        width: 57px;
        height: 55px;
        margin: 30px auto 0 auto;*/
        background: transparent url('gfx/petit-logo2.png') no-repeat center top;
        width: 70px;
        height: 67px;
        margin: 18px auto 0 auto;
    }
 
    .slider{
        position: relative;
        float: left;
        width: 100%;
    }
    .slider ul{ margin:0; padding:0; float: left }
 
    main, footer, .home_contenu{
        float: left;
        width: 100%;
    }
    label, input[type="text"], input[type="tel"], input[type="email"], textarea, select{
        width: 100%;
        margin: 8px 0; 
    }
    .clear{ width: 100%; float: left; clear: left; height: 1px; }


    footer{  width: 100%; float: left; }

    .menu-toggle{
        width: 45px;
        height: 45px;
        padding: 0;
        background: transparent;
        color: #fff;
        border:0;
        display: block;
        float: none;
        margin: 40px auto 0 auto;
        text-align: center;
        cursor: pointer;
    }
   .menu-toggle:active, .menu-toggle:focus, .menu-toggle:hover{
        text-decoration: none;
    }

    .out-menu-menu-principal-container{
        position: absolute;
        left: 0;
        top: -588px;
        z-index: 6667;
        width: 100%;
        height: 528px;
        background: white;
        transition: ease-in-out all 0.3s;
        box-shadow: 0 0 60px rgba(3,25,49,1);
    }
    .out-menu-menu-principal-container.toggled-on{ top: 0; transition: ease-in-out all 0.3s; }
    .out-menu-menu-principal-container .mille.center{ position: relative; height: 528px; }
    .close-menu{ width: 60px; padding: 10px; cursor: pointer; margin: 30px auto 0 auto; text-align: center; }
    .close-menu img{ transition: ease-in-out all 0.15s; }
    .close-menu:hover img{ transform: rotate(90deg); transition: ease-in-out all 0.15s; }

    .logo-menu{ margin: 0px 0 20px 0; }
    
    .nav-menu{ display: block; }

    .trait-menu{
        bottom: 0;
        left: 0;
        width: 100%;
        height: 6px;
        z-index: 10;
        background-image: linear-gradient(to left, #031931, #559dcf );
    }

    nav ul{
        padding:0;
    }
    nav ul li{
        list-style-type: none;
        display: inline-block;
        float: left;
        width: 25%;
        position: relative;
        text-align: center;
        background: transparent;
    }
    nav ul li a{
        display: block;
        position: relative;
        line-height: 40px;
        text-transform: uppercase;
        font-size: 18px;
        font-weight: 400;
        color:#d0a93d;
        text-decoration: none;
        padding: 0px;
        margin: 0;
        width: auto;
        background: transparent;
        transition: ease-in-out all 0.1s;
        position: relative;
    }
    nav ul li a:hover, nav ul li.current-menu-item a{ cursor: auto; color:#d0a93d; text-decoration: none; }
    nav ul li ul li{ display: list-item; width: 100%;  }
    nav ul li ul li a{ 
        color: #263040;
        font-size: 16px;
        text-transform: none;
    }
     nav ul li ul li a::after{ 
         content:" ";
         width: 54px;
         height: 1px;
         left: 50%;
         margin-left: -27px;
         bottom: 5px;
         position: absolute;
         transition: ease-in-out all 0.1s; 
         background:transparent; 
         text-decoration: none; 
    }
    nav ul li ul li a:hover{  cursor: pointer; transition: ease-in-out all 0.1s; color:#d0a93d; text-decoration: none; }
    nav ul li ul li a:hover::after{ 
         bottom: 0;
         background:#d0a93d; 
    }
    .lienboutique{
        display: block;
        position: relative;
        width: 60%;
        padding: 26px 0 0 40%;
        height: 50px;
        font-size: 13px;
        border: 1px solid #ca3030;
        color: #ca3030;
        margin: 20px 0 0 0;
        text-align: left;
        text-transform: uppercase;
        text-decoration: none!important;
        transition: ease-in-out all 0.15s;
    }
    .lienboutique span{ display: block; width: 100%; color: black; font-style: italic; text-transform: none; }
    .lienboutique::after{
        content: " ";
        display: block;
        background: transparent url('gfx/logo-boutique.png') no-repeat 0 0;
        width: 56px;
        height: 99px;
        position: absolute;
        left: 20%;
        top: -12px;
        transition: ease-in-out all 0.15s;
    }
    .lienboutique:hover{ border-color: black; color: black; text-decoration: none; transition: ease-in-out all 0.15s; }
    .lienboutique:hover::after{ transform: rotate(-5deg); transition: ease-in-out all 0.15s; }
    .marginb70{ margin-bottom: 70px; }
    .langues{ margin-top: 50px; }

    #page .lefond{ 
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 100% ;
        /*background: white url('gfx/background-pages.jpg') no-repeat center top;*/
        /*background-size: 100%;*/
    }
    /*#page .lefond.pageparente31{ 
        background: white url('gfx/background-vin.jpg') no-repeat center top;
    } */  
    #home h2.homeslogan { 
        left: 54%;
        top: 60px;
        z-index: 3;
        font-size: 50px;
        line-height: 60px;
        width: 35%;
        text-align: center;
    }
    #home h2.homeslogan span{ font-weight: 300; display: block; width: 100%; font-size: 30px; line-height: 40px; }
    #home .homeblles{  
        z-index: 5559;
        bottom: -70px;
        left: 38%;
        max-width: 82%;
    }
    .masqueslider{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 5557;
        background: rgba(0,0,0,0.5);
    }
    #home .logoslide{
        left: 0;
        width: 100%;
        top: 22%;
        z-index: 5558;
    }
    #home .logoslide img{ max-width: 50% }
    #home .trait-logoslide{
        margin: 100px auto 0 auto;
        width: 20%;
        height: 1px;
        background: white;
    }
    .homescroll{
        z-index: 5560;
        bottom: 52px;
        left: 20%;
        animation-duration: 2s;
        animation-name: scrollit;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }
    @keyframes scrollit {
        0{ transform: translateY(0px) ;}
        50%{ transform: translateY(10px) ;}
        100% { transform: translateY(0px) ; }
    }  
    .on-vin{
        z-index: 10;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .blocblanchome{
        max-width: 784px;
        width: 42%;
        height: 724px;
        background: white;
        position: absolute;
        bottom: 0;
        right: 15%;
        box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    }
    .in-blocblanchome{
        width: 50%;
        margin: 0 0 0 15%;
        font-size: 18px;
        line-height: 30px;
    }
    .in-blocblanchome h2{ font-size: 74px; line-height: 80px; margin-top: 110px; }
    .pad-blocblanchome{ padding-left: 40px; }
    .blocblanchome-blle{
        top: -164px;
        right: 0;
        z-index: 3;
    }
    .petit-trait{ 
        width: 52px;
        height: 1px;
        background: #ca3030;
        margin: 10px 0 30px 0;
    }
    .btn-decouvrez{
        display: block;
        position: relative;
        width: 100%;
        padding: 30px 0 0 0;
        height: 46px;
        font-size: 12px;
        border: 1px solid #ca3030;
        color: #ca3030;
        margin: 20px 0 0 0;
        text-align: center;
        text-transform: uppercase;
        transition: ease-in-out all 0.15s;
    }
    .btn-decouvrez.alter{
        border-color: #d0a93d;
        color: #d0a93d;
    }
    .btn-decouvrez.alter:hover, .btn-decouvrez.alterdesact, .btn-decouvrez.alterdesact:hover{
        background: #fff;
        border-color: #000;
        color: #000;
    }
    .btn-decouvrez::after{
        content:" ";
        display: block;
        position: absolute;
        z-index: 4;
        width: 6%;
        left: 47%;
        bottom: -1px;
        background: rgba(255,255,255,0);
        height: 4px;
        transition: ease-in-out all 0.3s;
    }
    .btn-decouvrez:hover{
        background: #ca3030;
        text-decoration: none;
        color: white;
        transition: ease-in-out all 0.15s;
    }
    .btn-decouvrez:hover::after{ background: white;transition: ease-in-out all 0.3;s }
    .btn-decouvrez.alter::after, .btn-decouvrez.alterdesact::after{ display:none }
    /*
    .blocblanchome .btn-decouvrez{ position: absolute; top: 50px; left: -60px; z-index: 3; }
    .blocblanchome .lienboutique{ top: 50px; right: -60px; z-index: 3;  }
    */
    .blocblanchome .btn-decouvrez{ position: absolute; top: 50px; left: 20px; z-index: 3; width: 75%; }
    .blocblanchome .lienboutique{ top: 50px; right: 20px; z-index: 3;  }   

    .in-ornementation{ 
        z-index: 5;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    
    .carreshome{
        display: block;
        text-align: center;
        position: absolute;
        padding: 230px 0 180px 0;
        height: 60px;
        font-size: 40px;
        font-weight: 300;
        box-shadow: 0 0 24px rgba(0,0,0,0);
        transition: box-shadow 0.2s ease-in-out;
    }
    .carreshome::after{
        content:" ";
        display: block;
        position: absolute;
        z-index: 20;
        width: 64px;
        left: 30%;
        bottom: 35%;
        background: rgba(255,255,255,0);
        height: 1px;
        transition: ease-in-out all 0.3s;
    }
    .carreshome:hover{ 
        text-decoration: none; 
        background: white no-repeat center!important;
        color:#ca3030;
        box-shadow: 0 0 24px rgba(0,0,0,0.24);
        transition: box-shadow 0.2s ease-in-out;
    }
    .carreshome:hover::after{
        background: #ca3030;
        left: 50%;
        margin-left: -32px;
        transition: ease-in-out all 0.3s;
    }
    #carre1{
        background: transparent url('gfx/carre1.jpg') no-repeat center; 
        background-size: cover;
        left: 33.33333333%;
        z-index: 10;
        top: 0;
    }
    #carre2{ 
        background: transparent url('gfx/carre2.jpg') no-repeat center; 
        background-size: cover;
        left: 66.66666666%;
        z-index: 11;
        top: 82px;
    }
    #carre3{
        background: transparent url('gfx/carre3.jpg') no-repeat center; 
        background-size: cover; 
        left: 16.66666666%;
        top: 270px;
        z-index: 8;
    }
    #carre4{
        background: transparent url('gfx/carre4.jpg') no-repeat center; 
        background-size: cover;
        top: 470px;
        left: 50%;
        z-index: 9;
    }

    /*FOOTER*/
	.restonscontact{ margin: 3rem 0; color: white }
	.restonscontact h2{ font-family: 'Alex Brush',cursive; color: white; font-size: 28px; }
	.restonscontact label{ color: white; float: none; margin: 0 0 .5rem 0; }
	.restonscontact label input[type="checkbox"]{ float: left;}
	.restonscontact input[type="submit"]{ margin-top: 2rem;}

    #back-to-top{ 
        position: fixed;
        bottom: 100px;
        right: 60px;
        z-index: 999999;
        cursor: pointer;
        opacity: 0.75;
        transition: ease-in-out all 0.1s;
    }
    #back-to-top:hover{ 
        opacity: 1;
        transition: ease-in-out all 0.1s;
    }
    footer{
        background-color: #263040;
        padding: 160px 0 0 0;
    }
    .footactus{ 
        font-size: 48px;
        line-height: 80px;
        margin: 40px 0;
        position: relative;
    }
    .footactus a:hover{ color: white; text-decoration: none; }
    .footactus::after{
        content:" ";
        display: block;
        position: absolute;
        z-index: 20;
        width: 64px;
        left: 40px;
        bottom: 0;
        background: #ca3030;
        height: 1px;
        transition: ease-in-out all 0.3s;
    }
    footer article h3{ font-size: 54px; line-height: 50px; }
    footer article h3 a:hover{ color:#ca3030; text-decoration: none; }
    footer article{ margin-left: 6%; width: 64%; }
    footer article .row.blue{ margin: 10px 0 40px 0; }
    footer article .row.blue p{ font-size: 16px; line-height: 24px; }
    footer article .btn-decouvrez{ margin-bottom: 28px; }
    footer .out-clindoeil h2{
        display: block;
        position: absolute;
        left: 20%;
        top: 70px;
        width: 50%;
        z-index: 2;
        font-size: 87px;
    }
    footer .out-clindoeil h2 span{ 
        display: block;
        width: 100%;
        font-size: 56px; 
    }
    footer .out-clindoeil h2 a:hover{ color: white; text-decoration: none; }
    .btnplus{
        display: block;
        color: #ca3030;
        font-size: 72px;
        width: 60px;
        height: 60px;
        border-bottom: 1px solid #ca3030;
        text-align: center;
        line-height: 60px;
    }
    .btnplus:hover{ color: white; border-color: white; text-decoration: none; }
    footer .out-clindoeil .btnplus{
        position: absolute;
        right: 30%;
        top: 150px;
        z-index: 3;
    }

    .footer-bas{
        background: transparent url('gfx/footer.jpg') no-repeat center top;
        border-top: 1px solid #ca3030;
        padding: 120px 0 0 0;
    }
    .footpadl{ margin-left: 30px; }
    .footer-bas p.coordonnees{ font-size: 14px; line-height: 24px; }
    .footer-bas h4{ 
        font-size: 24px;
        line-height: 24px;
        padding-bottom: 14px;
        margin: 0 0 8px 0;
        display: block;
        position: relative;
    }
    .footer-bas h4::after{
        content:" ";
        display: block;
        position: absolute;
        z-index: 20;
        width: 34px;
        left: 16px;
        bottom: 0;
        background: #ca3030;
        height: 1px;
        transition: ease-in-out all 0.3s;
    }

    footer .suiveznous{ 
        height: 48px;
        width: 94%;
        padding: 30px 0 0 6%;
        margin: 28px 0 0 0;
        float: left;
        background: #ca3030;
    }
    footer .suiveznous span{
        font-size: 30px;
        line-height: 30px;
        margin-right: 20px;
    }
    footer .suiveznous img{ margin: 0 10px; }

    .footer2{ margin-top: 0px; }
    .footer2 .abus{ margin: 48px 0 0 20px; font-size: 11px; }
    .footer2 .mentions{ margin-top: 4px; font-size: 11px; }

    #page main{ margin-top: 94px; }
     #page article p.ariane{
        text-transform: uppercase;
        font-style:italic;
        font-size: 12px;
        line-height: 12px;
        margin: 20px auto 20px auto;
        color: #b2b4a9;
    }
    #page h1{ font-size: 60px; padding-bottom: 40px; line-height: 60px; position: relative; margin-bottom: 20px; }
    #page h1::after, 
    .bloctexte h2::after{ 
        content:" ";
        width: 54px;
        height: 1px;
        background: #ca3030;
        position: absolute;
        bottom: 0;
        left: 30px;
    }
    #page h2{ font-size: 36px; }
    #page .catactu h2{ margin-top: 40px; }
    #page .catactu h2:first-child{ margin-top: 0px; }
    .carrepages{
        background: #e8e9e3 url('gfx/encart-bas.png') no-repeat right bottom;
        padding-bottom: 196px;
        background-size: contain;
    }
    article.vino .carrepages{ padding-bottom: 46px; }
    .in-carrepages{
        background: transparent url('gfx/encart-haut.jpg') no-repeat right top;
        padding-top: 246px;
        background-size: contain;
    }
    #page article p{
        font-size: 16px;
        line-height: 24px;
        margin: 24px 0;
        text-align: justify;
    }
    #page article .carrepages a { color: #CA3030; text-decoration: underline; }
    /**/
    .absoimg{ 
        bottom: 0;
        left: 0;
        position: absolute;
            width: 33.333%;
    }
    .row.classicpage{  margin-bottom: 15vw; }
    .bloctexte{ margin-bottom: 80px; }
    .blocimage{ margin-top: 24px; }
    .bloctexte h2{ margin-top: 20px; padding-bottom: 24px; margin-bottom: 30px; position: relative; }
    .trait-bloc{
        content:" ";
        width: 54px;
        height: 1px;
        background: #ca3030;
        margin: 74px 30px 24px 30px;
    }

    .bouteilledevin{ position: absolute; left: -84px; bottom: 0; z-index: 3; }
    #page article p.appellation{ text-align: left; margin-top: 34px; font-size: 14px; }
    .presseimg{ margin-top: 20px; }
    .btnsuite{ font-size: 24px; margin: 10px 0 }
    .catactu{ margin-bottom: 48px; }
    .familletitre{ font-size: 42px; }

    .lienssupp { text-align: center; }
    .lienssupp .spannomargin-4.left{
        float: none; display: inline-flex;
    }


/**/
@media (min-width: 2px) and (max-width: 1023px){
    header > nav .spannomargin-8{ width: 33.3333%; }
    .out-menu-menu-principal-container{
        top: -1300px;
        height: 1200px;
    }
    .out-menu-menu-principal-container .mille.center{ height: 1200px; }
    nav ul li{ width: 100%; }
    nav ul li a{ width: 80%; margin: 0 10%; }
    .toggled-on .lienboutique::after{ display: none; }
    .toggled-on .lienboutique{ width: 90%; padding: 10px 0 0 10%; }
    .menulogo{ margin-top: 20px; }
    .marginb70{ margin-bottom: 30px; }    
    
    .lienboutique::after{ left: 10%; }
    
    #home h2.homeslogan{
        left: 5%;
        width: 90%;
        font-size: 36px;
        line-height: 30px;
    }
    #home h2.homeslogan span{ font-size: 22px; }
    #home .homeblles{ 
        width: 70%;
        left: 15%; 
    }
    #home .logoslide img { max-width: 70%; }
    .homescroll{ width: 6%; left: 47%; bottom: 22px; }
    .blocblanchome{
        width: 70%;
        left: 15%;
        bottom: auto;
        right: auto;
        top: 60px;
        height: auto;
        padding-bottom: 130px;
    }
    .blocblanchome-blle {
        top: -30px;
        right: -25%;
        z-index: 3;
        width: 40%;
    }
    .in-blocblanchome h2 {
        font-size: 34px;
        line-height: 80px;
        margin-top: 10px;
    }
    .in-blocblanchome {
        width: 80%;
        margin: 0 0 60px 5%;
        font-size: 12px;
        line-height: 20px;
    }
    .pad-blocblanchome {
        padding-left: 30px;
    }
    .blocblanchome .lienboutique{     
        width: 60%;
        bottom: 0;
        right: 0;
        top: auto; 
    }
    .blocblanchome .btn-decouvrez{
        width: 100%; 
        left: 0;
        bottom: 0;
    }
    .in-ornementation{ position: relative!important; }
    .carreshome, #carre1, #carre2, #carre3, #carre4{ 
        position: relative; 
        top: auto; 
        bottom: auto; 
        left: auto; 
        right: auto; 
        padding: 80px 0 80px 0; 
        height: 40px;
        font-size: 30px;
    }
    #carre1{ margin-top: 300px; }
    footer{ padding-top: 0; }
    .footactus{ 
        font-size: 28px;
        width: 80%;
        margin-left: 10%; 
    }
    footer article h3 {
        font-size: 34px;
        line-height: 40px;
    }
    footer article .row.blue {
        margin: 10px 0 10px 0;
    }
    footer .out-clindoeil h2{ font-size: 40px; left: 10%; }
    footer .out-clindoeil h2 span{ font-size: 36px; }
    footer .out-clindoeil .btnplus { top: 250px; }
    .footer-bas{ padding: 40px 0 0 0; }
    .logofoot{ width: 50%; margin: 20px auto 30px auto; }
    .footpadlmobile{ margin-left: 30px; }
    .footer2 .abus{ width: 90%; text-align: center; margin: 20px 5%; }
    
    #back-to-top{ right: 5%; }
    
    a#logo{ margin-top: 18px; } 
    #page main{ margin-top: 74px; }
    #page article p.ariane{ width: 90%; margin-left: 5%; }
    #page h1 {
        font-size: 46px;
        line-height: 50px;
        width: 90%; 
        margin-left: 5%;
    }
    .carrepages{ width: 90%; margin: 0 5%; }
    .in-carrepages {
        width: 90%; 
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 86px;
    }
    #page article p {
        font-size: 14px;
        line-height: 22px;
    }

    .absoimg{ width: 50%; }
    
    .bloctexte{ width: 90%; margin-left: 5%; margin-bottom: 30px; }
    .bloctexte .marginl-2{ width: 90%; margin-left: 10%; }
    .bloctexte .marginr-2{ width: 90%; margin-right: 10%; }
    
    .lienssupp .spannomargin-4 { width: 89%; margin-left: 5%; }
    #page h2{ width: 85%; margin-left: 5%; margin-bottom: 20px; }
    .btn-decouvrez {
        padding: 20px 0 0 0;
        height: 36px;
    }
    #page article p.appellation{ width: 90%; margin-left: 5%; }
    .vino .in-carrepages {
        width: 65%;
        padding-left: 30%;
        padding-right: 5%;
        padding-top: 86px;
    }
    .vino .absoimg{ display: none; }
    .bouteilledevin{
        width: 35%;
        left: -20px;
        top: 20px;
        bottom: auto;
    }
    
    
    
}

/**/
@media (min-width: 2px) and (max-width: 767px){
    .lefond.row > img.right{ display:none; } 
    #page main{ margin-top: 14px; }
    #page h2 { font-size: 32px; }
    #page h1{ font-size: 40px; }
    a#logo, #home a#logo{
        display: block;
        background: transparent url(gfx/petit-logo2.png) no-repeat center top;
        background-size: auto;
        width: 100%;
    }
    .toggled-on .lienboutique {
        width: 75%;
        padding: 10px 0 0 10%;
    }
}

/**/
@media (min-width: 768px) and (max-width: 1023px){

    #home .homeblles {
        width: 100%;
        left: 75%;
        bottom: -90px;
    }
    .in-blocblanchome {
        width: 80%;
        margin: 0 0 60px 5%;
        font-size: 16px;
        line-height: 26px;
    }
    .in-blocblanchome h2 { font-size: 54px; }
    
    .blocblanchome .lienboutique{ padding-top: 6px; right: -20%; }
    .blocblanchome .btn-decouvrez{ top: auto; left: -20%; }
    .blocblanchome-blle {
        top: -140px;
        right: -15%;
        z-index: 3;
        width: 30%;
    }
    .blocblanchome{ padding-bottom: 70px; top: 30%; }
    .carreshome{ float: left; }
    #carre1{ margin-top: 0; }
    .toggled-on .lienboutique{ margin-top: 50px; }
    .logofoot{ display: none; }
    
    .in-carrepages{ width: 100%; padding-left: 0; padding-right: 0; }
    .absoimg{ width: 33.3333%; bottom: -100px; }
    .vino .in-carrepages {
        width: 85%;
        padding-left: 15%;
        padding-right: 0;
    }
    #page h2{ width: 100%; margin-left: 0; }
    .lienboutique::after {
        left: 0;
    }
    .bouteilledevin {
        width: 30%;
        left: -20px;
        top: auto;
        bottom: 0;
    }
    .blocimage { width: 50%; }
    
    .bloctexte .marginl-2, .bloctexte .marginr-2 { width: 80%; margin-left: 10%; margin-right: 10%; }
    
    
    
}
/**/
@media (min-width: 1024px) and (max-width: 1279px) {
    nav ul li ul li a{ font-size: 13px; }
    .lienboutique::after{ left: 10%; }
    
    #home h2.homeslogan {
        left: 20%;
        top: 20px;
        font-size: 30px;
        line-height: 30px;
        width: 70%;
    }
    #home h2.homeslogan span {
        font-size: 18px;
        line-height: 30px;
    }
    #home .trait-logoslide{ margin: 60px auto 0 auto; }
    .blocblanchome{
        height: auto;
        max-height: 724px;
        min-height: 550px;
    }
    .blocblanchome-blle{ width: 30%; top: -50px; }
    .in-blocblanchome h2 {
        font-size: 54px;
        line-height: 60px;
        margin-top: 50px;
    }
    .in-blocblanchome {
        width: 62.5%;
        margin: 0 0 0 7.5%;
        font-size: 14px;
        line-height: 24px;
    }
    .blocblanchome .btn-decouvrez, .blocblanchome .lienboutique{ top: 20px; }
    .pad-blocblanchome{ padding-left: 20px; }
    .carreshome{ padding: 130px 0 100px 0; font-size: 24px; }
    #carre3{ top: 190px; }
    #carre4{ top: 290px; }
    .footactus{ 
        font-size: 40px;
        line-height: 70px;
    }
    footer article h3{ font-size: 40px; line-height: 40px; }
    footer .out-clindoeil h2{ font-size: 67px; }
    footer .out-clindoeil h2 span{ font-size: 42px; }
    footer .out-clindoeil .btnplus{ right: 20%; top: 90px; }    
    
    #page h1{ font-size: 40px; padding-bottom: 30px; line-height: 40px; }
    #page h2{ font-size: 26px; }
    .carrepages{ padding-bottom: 120px; }
    .in-carrepages{ padding-top: 120px; }
    /*.row.classicpage{ margin-bottom: 360px; }*/
    #page article p.appellation{ font-size: 10px; }
}
/**/
@media (min-width: 1280px) and (max-width: 1479px){
    nav ul li ul li a{ font-size: 14px; }
    .lienboutique::after{ left: 15%; }
    
    #home h2.homeslogan {
        left: 40%;
        top: 20px;
        font-size: 36px;
        line-height: 36px;
        width: 50%;
    }
    #home h2.homeslogan span {
        font-size: 22px;
        line-height: 34px;
    }    
    #home .trait-logoslide{ margin: 80px auto 0 auto; }
    .blocblanchome{
        height: auto;
        max-height: 724px;
        min-height: 550px;
    }
    .blocblanchome-blle{ width: 32%; }
    .in-blocblanchome h2 {
        font-size: 58px;
        line-height: 68px;
        margin-top: 50px;
    }
    .in-blocblanchome{
        width: 60%;
        margin: 0 0 0 10%;
        font-size: 16px;
        line-height: 24px;
    }
    .blocblanchome .btn-decouvrez, .blocblanchome .lienboutique{ top: 40px; }
    .pad-blocblanchome{ padding-left: 20px; }
    .carreshome{ padding: 160px 0 120px 0; font-size: 30px; }
    #carre3{ top: 200px; }
    #carre4{ top: 340px; }
    footer article h3{ font-size: 46px; line-height: 46px; }
    footer .out-clindoeil h2{ font-size: 77px; }
    footer .out-clindoeil h2 span{ font-size: 50px; }
    footer .out-clindoeil .btnplus{ right: 20%; top: 90px; } 
    
    #page h1{ font-size: 50px; padding-bottom: 36px; line-height: 50px; }
    #page h2{ font-size: 30px; }
    .carrepages{ padding-bottom: 160px; }
    .in-carrepages{ padding-top: 160px; }
    /*.row.classicpage{ margin-bottom: 300px; }*/
    #page article p.appellation{ font-size: 11px; }
}
/**/
@media (min-width: 1480px) and (max-width: 1599px){
    nav ul li a{ width: 80%; margin: 0 10%; }
    
    #home h2.homeslogan {
        top: 30px;
        font-size: 40px;
        line-height: 46px;

    }
    #home h2.homeslogan span {
        font-size: 22px;
        line-height: 34px;
    }     
    .in-blocblanchome{ font-size: 16px; }
    
    .carreshome{ padding: 180px 0 130px 0; }
    #carre3{ top: 210px; }
    #carre4{ top: 370px; }    
    .in-carrepages{ min-height: 470px; }
    footer .suiveznous{ width: 80%; padding: 30px 0 0 20%; }
}
/**/
@media (min-width: 1600px) and (max-width: 1799px){

    #home h2.homeslogan {
    top: 40px;
       width: 40%;

    }
    .carreshome{ padding: 190px 0 140px 0; }
    #carre3{ top: 220px; }
    #carre4{ top: 390px; }
    .in-carrepages{ min-height: 470px; }
    footer .suiveznous{ width: 80%; padding: 30px 0 0 20%; }
}
/**/
@media (min-width: 1800px){
   .in-carrepages{ min-height: 470px; }
    footer .suiveznous{ width: 80%; padding: 30px 0 0 20%; }
}
/**/

#cookie-notice .cn-button{
	padding: 6px 8px; color: white;
}
#cookie-notice #cn-refuse-cookie{ background: white!important; color: black; }