
@-webkit-keyframes cart_beat {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(5);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}
@keyframes cart_beat {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(5);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}
/*---- header nav --------------------------------------------------*/

.header_nav_container { display: block;}
.header_nav_container .header_container {
    display: block; width: 100%; padding: 0; position: fixed; top: 0; z-index: 900;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.header_nav_container .header_container.nav-up {transform: translateY(-100%);}
.header_nav_container .header_container.nav-down {position: fixed; transform: translateY(0%);}
.header_nav_container .header_container .topbar_promo {
    position: relative; display: block; height: 30px; padding:5px; background-color: #a9001f; overflow: hidden;
    color: #fff; font-size: 16px; text-align: center; z-index: 200;
    -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease;
}
.header_nav_container .header_container.nav-down .topbar_promo {
    display: block; height: 0px; padding:0px;
    -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease;
}
.header_nav_container .header_container .topbar_promo a {color: #fff;}
.header_nav_container .header_container .topbar_promo a:hover {color: #eee;}
.topbar_slider .slick-prev, .topbar_slider .slick-next {
    font-size: 0; line-height: 0; text-align: center;
    position: absolute; top: 50%; display: inline-block; width: 20px; height: 20px; transform: translateY(-50%);
    z-index: 10; padding: 0;
    cursor: pointer; color: transparent; border: none; outline: none; background: transparent;
}
.topbar_slider .slick-prev {right: 20px;}
.topbar_slider .slick-next  {right: 0px;}
.topbar_slider .slick-prev::before {content: "\f104";}
.topbar_slider .slick-next::before { content: "\f105";}
.topbar_slider .slick-prev:before, .topbar_slider .slick-next:before {
    font-family: "FontAwesome"; font-size: 16px; line-height: 1; color: #fff; z-index: 10;
    -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease;
}
.topbar_slider .slick-prev:hover:before, .topbar_slider .slick-next:hover:before {color: #eee;}

.header_nav_container .header_container .header {
    display: block; position: relative; width: 100%; height: 80px; padding: 15px 0 5px; text-align: center;
    border-top: 3px solid #a9001f; background-color: #fff; z-index: 900;
    -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;
}
.header_nav_container .header_container.nav-down .header { padding: 10px 0;}
.header_nav_container .header_container .navbar-brand {
    display: inline-block; float: left; max-width: 360px; text-align: center; padding: 15px 50px 10px; text-align: center;
}
.header_nav_container .header_container .navbar-brand .brand img {
    -webkit-filter:brightness(100%);
    -moz-filter:brightness(100%);
    -ms-filter:brightness(100%);
    -o-filter:brightness(100%);
    filter:brightness(100%);
    -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;
}
.header_nav_container .header_container .navbar-brand .brand:hover img {
    -webkit-filter:brightness(90%);
    -moz-filter:brightness(90%);
    -ms-filter:brightness(90%);
    -o-filter:brightness(90%);
    filter:brightness(90%);
}
.header_nav_container .header_container .header_cart,
.header_nav_container .header_container .header_account,
.header_nav_container .header_container .header_cave {  display: inline-block; float: right; text-align: center; padding: 5px 15px 0; box-sizing: border-box; width: 120px; }
.header_nav_container .header_container .header_account {border-right: 1px solid #5e5858;}
.header_nav_container .header_container .header_cart a,
.header_nav_container .header_container .header_account a,
.header_nav_container .header_container .header_cave a {
    display: block; height: 50px; width: 90px; position: relative;
    font-size: 14px; font-weight: 600; color: #5e5858;
    -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;
}
.header_nav_container .header_container .header_cart a span,
.header_nav_container .header_container .header_account a span,
.header_nav_container .header_container .header_cave a span {display: block;}
.header_nav_container .header_container .header_cart a span strong,
.header_nav_container .header_container .header_account a span strong,
.header_nav_container .header_container .header_cave a span strong {display: block; font-weight: 600; }
.header_nav_container .header_container .header_cart a:hover,
.header_nav_container .header_container .header_account a:hover,
.header_nav_container .header_container .header_cave a:hover { color: #ada7a7; }

.header_nav_container .header_container .header_cart a span::before,
.header_nav_container .header_container .header_account a span::before,
.header_nav_container .header_container .header_cave a span::before {
    content: ""; display: block; width: 100%; height: 27px; margin: 2px auto;
    background-repeat: no-repeat; background-position: center; background-size: contain;
    -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;
}
.header_nav_container .header_container .header_cart a span::before { background-image: url(../img/header_cart-ico.svg); }
.header_nav_container .header_container .header_account a span::before { background-image: url(../img/header_account-ico.svg); }
.header_nav_container .header_container .header_cave a span::before { background-image: url(../img/header_cave-ico.svg); }
.header_nav_container .header_container .header_cart a:hover span::before,
.header_nav_container .header_container .header_account a:hover span::before,
.header_nav_container .header_container .header_cave a:hover span::before{
    -webkit-filter:brightness(170%);
    -moz-filter:brightness(170%);
    -ms-filter:brightness(170%);
    -o-filter:brightness(170%);
    filter:brightness(170%);
}
.header_nav_container .header_container .header_cart.active a::before {
    content: ""; display: block; position: absolute; top:6px; right: 22px; height: 6px; width: 6px; transform: translate(-50%, -50%);
    background-color: #a9001f; border-radius: 50%;
}
.header_nav_container .header_container .header_cart.active a::after {
    content: ""; display: block; position: absolute; top:6px; right: 22px; height: 6px; width: 6px;
    background-color: #a9001f; border-radius: 50%;
    -webkit-animation-name: cart_beat;
    animation-name: cart_beat;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.header_nav_container .header_container .header_search {
    display: inline-block; width: calc(100% - 720px); padding: 5px 15px 0;
}
.header_nav_container .header_container .header_search form {position: relative;}
.header_nav_container .header_container .header_search input.form-control {
    height: 50px; border: 1px solid #ada7a7; border-radius: 0; padding-left: 50px;
}
.header_nav_container .header_container .header_search .btn_search {
    position: absolute; top: 0; left: 0; display: block; height: 50px; width: 50px;
    background: url(../img/search-ico.svg) no-repeat center; background-size: 50%; border:none; opacity: 0.6;
    -webkit-filter:grayscale(1);
    -moz-filter:grayscale(1);
    -ms-filter:grayscale(1);
    -o-filter:grayscale(1);
    filter:grayscale(1);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.header_nav_container .header_container .header_search .btn_search:hover {
    -webkit-filter:grayscale(0);
    -moz-filter:grayscale(0);
    -ms-filter:grayscale(0);
    -o-filter:grayscale(0);
    filter:grayscale(0);
}

/*---- auto completion --------------------------------------------------*/

.autocompletion_container.ui-menu {background-color: white; border:solid 1px #a5a5a5; text-align: left; padding: 20px; list-style: none}
.autocompletion_container li {list-style: none; padding: 1px 10px 1px 30px; margin: 0}
.autocompletion_container li.autocomplete_category {padding: 0; margin-top: 5px; color: #a80226; font-size: 16px;}
.autocompletion_container li.autocomplete_category:first-of-type {margin-top: 0}
.autocompletion_products.autocompletion_products {padding: 0}
.autocompletion_simple_links:first-of-type {margin-top: 0}
.autocompletion_simple_links {margin: 5px 0}
.autocompletion_simple_links em {font-style: normal; font-weight: bold;}
.autocompletion_product_line {border-bottom: solid 1px #eee; font-size: 0; margin:0 50px; padding:10px 0;}
.autocompletion_product_line.link {border: none; padding-bottom: 0}
.autocompletion_product_line > div {float: none; display: inline-block; vertical-align: middle; color: #686868; font-size: 14px}
.autocompletion_product_line > div a { color: #686868}
.autocompletion_price {text-align: right; display: block; font-weight: bold; color: #a80226; font-size: 18px}
.autocompletion_promo {display: inline-block; vertical-align: middle; background-color: #a80226; color: white; padding: 0 15px 0 0; font-weight: bold; height: 30px; line-height: 30px}
.autocompletion_promo:before {width: 0;height: 0; content: "";border-style: solid;border-width: 0 0 30px 10px;border-color: transparent transparent #a80226 transparent; display: inline-block; vertical-align: middle; position: relative; left: -10px; top: -1px}
.autocompletion_product_line a em {font-weight: bold; font-style: normal;}
.autocompletion_product_line a:hover {color:#ada7a7;}
.autocompletion_product_line a.btn_see_all {font-size: 16px;color: #a80226}

/* navbar-custom
----------------------------------------------------------------------------*/
.mp-menu { display: none; }

.header_nav_container .header_container .navbar-custom {
    display: block; min-height: 0; height:40px;  padding: 0px; margin: 0; position: relative; text-align: center; z-index: 1;
    background-color: #fff; border: none; border-bottom: 1px solid #eee; border-radius: 0;
    -webkit-perspective: 600px;
    perspective: 600px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.header_nav_container .header_container.nav-down .navbar-custom,
.header_nav_container .header_container.nav-up .navbar-custom {
    overflow: hidden; height: 0; opacity: 0;
}
.header_nav_container .navbar-custom .nav {
    display: inline-block;  margin: 0 auto; float: none; padding-top: 5px; font-size: 0;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.header_nav_container .navbar-custom .nav>li {float: none; display: inline-block; position: static;}
.header_nav_container .navbar-custom .nav>li>a {
    color: #5e5858; font-size: 14px; font-weight: bold; letter-spacing: 1px; padding: 5px 15px 5px; z-index: 500;
    border: 1px solid transparent; border-top: 4px solid transparent; border-bottom: none; height: 35px; box-sizing: border-box;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.navbar-custom .nav>li>a:focus, .navbar-custom .nav>li>a:hover {
    color: #292727; text-decoration: none; background-color: transparent;
}
.header_nav_container .navbar-custom .nav>li>a.red { color: #a9001f; }
.header_nav_container .navbar-custom .nav>li>a.dropdown-toggle {padding-right: 10px;}
.header_nav_container .navbar-custom .nav>li>a.dropdown-toggle::after {
    content: "\f0d7"; display: inline-block; padding:0 3px; font-family: "FontAwesome";
    -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s;
}
.header_nav_container .navbar-custom .nav>li>a.dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg);}
.header_nav_container .navbar-custom .nav>li>a.dropdown-toggle[aria-expanded="true"],
.header_nav_container .navbar-custom .nav>li:hover>a.dropdown-toggle {
    background-color: #fff; border-color: #eee; border-top-color: #a9001f; border-bottom: none;
}
.header_nav_container .navbar-custom .nav>li>a + .dropdown-menu {
    display: block; width: 100%; position: absolute; top: 100%; left: 0;
    min-width: auto; padding: 20px 0; z-index: -999;
    font-size: 12px!important; text-align: left; list-style: none;
    background-color: #fff; border:none; border-bottom: 2px solid #ada7a7; border-top: 1px solid #eee; border-radius: 0;
    -webkit-box-shadow: 0 30px 30px rgba(0,0,0,.2);
    box-shadow: 0 30px 30px rgba(0,0,0,.2);
    -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s;
}
.header_nav_container .navbar-custom .nav>li a[aria-expanded="false"] + .dropdown-menu,
.header_nav_container .navbar-custom .nav>li a:not(:hover) + .dropdown-menu {
    visibility: hidden; opacity: 0; /*transform: translate(0, -100%);*/
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 100% 0 0;
    transform-origin: 100% 0 0;
    /*transform: scaleY(0);*/

}
.header_nav_container .navbar-custom .nav>li a[aria-expanded="true"] + .dropdown-menu,
.header_nav_container .navbar-custom .nav>li a:hover + .dropdown-menu,
.header_nav_container .navbar-custom .nav>li a + .dropdown-menu:hover {
    visibility: inherit; opacity: 1; /*transform: translate(0, 0);*/
    -webkit-transform: rotateX(0deg); z-index: 100;
    transform: rotateX(0deg);
    -webkit-transform-origin: 100% 0 0;
    transform-origin: 100% 0 0;
    /*transform: scaleY(1);*/
}
.header_nav_container .navbar-custom .nav>li a[aria-expanded="true"] + .dropdown-menu {z-index: 0;}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu ul {padding: 0;}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu li {display: block;}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu li.title,
.header_nav_container .navbar-custom .nav>li>.dropdown-menu span.like-li_title {
    position: relative; display: block; padding: 5px 0; margin: 0 0 5px; border-bottom: 1px solid #eee;
    font-size: 14px; text-transform: uppercase; color: #a9001f; font-weight: bold; letter-spacing: 0.5px
}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu li.title::after,
.header_nav_container .navbar-custom .nav>li>.dropdown-menu span.like-li_title::after {
    content: ""; width: 30px; height: 1px; position: absolute; left: 0; bottom: -1px;
    background: #d8d5d5;  z-index: 1;
}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu li a {
    position: relative; display: inline-block; margin: 0 auto; padding: 2px 0;
    text-decoration: none; font-size: 12px;
    -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;
}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu li a:hover {
    text-decoration: none; color: #a9001f; background-color: transparent; transform: skew(-10deg); transform-origin: 0 100% 0;
}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu li a.btn_see_all {
    position: relative; padding: 5px 0; line-height: 15px;
    -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;
}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu li a.btn_see_all:hover {transform: skew(0);}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu li a.btn_see_all::before {
    content: "\f105"; display: inline-block; width: 15px; height: 15px; margin-right: 5px; background-color: #a9001f; border-radius: 50%;
    font-family: "FontAwesome"; font-size: 12px; color: #fff; text-align: center; line-height: 15px;
    -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;
}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu li a.btn_see_all:hover::before {margin-right: 8px; }

.header_nav_container .navbar-custom .nav>li>.dropdown-menu li.btn_liste a {
    display: block; position: relative; padding: 20px 40px 20px 60px; border: 1px solid #d8d5d5; margin-top: 10px;
    color: #292727; font-size: 14px; font-weight: bold;
}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu li.btn_liste :first-child a{margin-top: 0;}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu li.btn_liste a:hover {
    border-color: #a9001f;  color: #a9001f; transform: none;
}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu li.btn_liste a::before {
    content: ""; display: block; position: absolute; left: 0; top: 0; height: 100%; width: 55px;
    background-repeat: no-repeat; background-position: center; background-size: 70%; opacity: 0.6;
    -webkit-filter:grayscale(1);
    -moz-filter:grayscale(1);
    -ms-filter:grayscale(1);
    -o-filter:grayscale(1);
    filter:grayscale(1);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu li.btn_liste a:hover::before {
    opacity: 1;
    -webkit-filter:grayscale(0);
    -moz-filter:grayscale(0);
    -ms-filter:grayscale(0);
    -o-filter:grayscale(0);
    filter:grayscale(0);
}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu li.btn_liste a::after {
    content: "\f105"; display: block; position: absolute; right: 0; top: 0; height: 100%; width: 40px; padding: 20px 0;
    text-align: center; font-family: "FontAwesome"; font-size: 18px;
}
.header_nav_container li.btn_liste a.btn_liste-vins::before {background-image: url(../img/btn_liste-vins-ico.svg);}
.header_nav_container li.btn_liste a.btn_liste-domaines::before {background-image: url(../img/btn_liste-domaines-ico.svg);}
.header_nav_container li.btn_liste a.btn_liste-appellations::before {background-image: url(../img/btn_liste-appellations-ico.svg);}
.header_nav_container li.btn_liste a.btn_liste-help::before {background-image: url(../img/btn_liste-help-ico.svg);}
.header_nav_container li.btn_liste a.btn_liste-prix::before {background-image: url(../img/btn_liste-prix-ico.svg);}
.header_nav_container li.btn_liste a.btn_liste-promo::before {background-image: url(../img/btn_liste-promo-ico.svg);}
.header_nav_container li.btn_liste a.btn_liste-best_sellers::before {background-image: url(../img/btn_liste-best_sellers-ico.svg);}
.header_nav_container li.btn_liste a.btn_liste-magnum::before {background-image: url(../img/btn_liste-magnum-ico.svg);}
.header_nav_container li.btn_liste a.btn_liste-cadeau::before {background-image: url(../img/btn_liste-cadeau-ico.svg);}
.header_nav_container li.btn_liste a.btn_liste-guides_fav::before {background-image: url(../img/btn_liste-guides_fav-ico.svg);}
.header_nav_container li.btn_liste a.btn_liste-clients_fav::before {background-image: url(../img/btn_liste-clients_fav-ico.svg);}
.header_nav_container li.btn_liste a.btn_liste-caviste::before {background-image: url(../img/btn_liste-caviste-ico.svg);}

.header_nav_container .navbar-custom .nav>li>.dropdown-menu .dl-horizontal { padding: 10px 0; margin: 0 auto; }
.header_nav_container .navbar-custom .nav>li>.dropdown-menu .dl-horizontal + .dl-horizontal {border-top: 1px solid #eee;}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu .dl-horizontal dt {font-size: 15px;}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu .dl-horizontal dd {font-size: 12px; font-style: italic;}

.header_nav_container .navbar-custom .nav>li>.dropdown-menu .title_line { display: block; position: relative; margin-bottom: 30px;}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu .title_line > span {
    display: inline-block; margin: 0 auto; color: #292727; padding: 0 10px; background-color: #fff; z-index: 10;
}
.header_nav_container .navbar-custom .nav>li>.dropdown-menu .title_line::before {
    content: ""; display: block; position: absolute; width: 100%; height: 1px; top: 50%; left: 0; background-color: #eee; z-index: -1;
}

.header_nav_container .primeur-mode_emploi .border_block {
    display: block; position: relative; height: 170px; width: 100%; padding: 10px;
    text-align: center; color: #292727; border: 1px solid #d8d5d5;
}
.header_nav_container .primeur-mode_emploi .border_block .border_block-title {
    position: absolute; display: inline-block; top: 0; left: 50%; padding: 0 5px; background-color: #fff; transform: translate(-50%, -50%);
    font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 24px;
}
.header_nav_container .primeur-mode_emploi .border_block img { max-width: 80px; text-align: center; margin: 15px auto 10px;}
.header_nav_container .primeur-mode_emploi .border_block p {line-height: 18px; font-size: 14px;}

.header_nav_container .btn_img {
    display: block; position: relative;
    background-repeat: no-repeat; background-position: center; background-size: cover;
}
.header_nav_container .btn_img + .btn_img {margin-top: 20px;}
.header_nav_container .btn_img.big {height: 200px;}
.header_nav_container .btn_img.small {height: 170px;}
.header_nav_container .btn_img::after{
    content: ""; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(255,255,255,0.6); z-index: 0;
    -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}
.header_nav_container .btn_img:hover::after{background-color: rgba(255,255,255,0.8);}
.header_nav_container .btn_img .btn_img-caption {
    position: absolute; display: block; left: 0; top: 50%; transform: translateY(-50%); padding: 0 15px; z-index: 1;
}
.header_nav_container .btn_img .btn_img-caption .title_head {
    display: block; position: relative; width: 100%;
    font-size: 16px; color: #a9001f; text-transform: uppercase;
}
.header_nav_container .btn_img .btn_img-caption .title_head > strong {
    display: block;
    font-family: 'Libre Baskerville', serif; font-weight: bold; font-size: 26px; color: #292727;
}
.header_nav_container .btn_img .btn_img-caption .btn-red {padding: 5px 10px; font-size: 14px;}
.header_nav_container .btn_img:hover .btn_img-caption .btn-red {color: #a9001f;}
.header_nav_container .btn_img:hover .btn_img-caption .btn-red::after { height: 2px; }

.header_nav_container .btn_img.domaines {background-image: url(../img/btn_img-domaines.jpg);}
.header_nav_container .btn_img.primeur-2015 {background-image: url(../img/btn_img-primeur-2015.jpg);}
.header_nav_container .btn_img.primeur-2016 {background-image: url(../img/btn_img-primeur-2016.jpg);}

/*------responsive navbar ----------------*/

@media screen and (max-width: 1200px){
    .header_nav_container .header_container .topbar_promo {height: 25px; padding:5px; font-size: 14px; }
    .header_nav_container .header_container .navbar-brand { max-width: 260px; padding: 20px 20px 10px; }
    .header_nav_container .header_container .header_search {width: calc(100% - 620px); padding: 5px 0px 0;}
    .header_nav_container .header_container .header_cart,
    .header_nav_container .header_container .header_account,
    .header_nav_container .header_container .header_cave { padding: 5px 10px 0; width: 110px; }
    .header_nav_container .header_container .header_cart a,
    .header_nav_container .header_container .header_account a,
    .header_nav_container .header_container .header_cave a { height: 50px; width: 100%; font-size: 13px;}
    .header_nav_container .header_container .header_cart a span::before,
    .header_nav_container .header_container .header_account a span::before,
    .header_nav_container .header_container .header_cave a span::before {height: 25px;}

    .header_nav_container .navbar-custom .nav>li>a {letter-spacing: 0px; padding: 5px 10px 5px; }
    .header_nav_container .navbar-custom .nav>li>a.dropdown-toggle { padding-right: 5px;}
    .header_nav_container .primeur-mode_emploi .border_block { height: 160px; }
    .header_nav_container .primeur-mode_emploi .border_block .border_block-title {font-size: 18px; }
    .header_nav_container .primeur-mode_emploi .border_block img { max-width: 60px;}
    .header_nav_container .primeur-mode_emploi .border_block p {line-height: 14px; font-size: 12px;}

    .autocompletion_product_line {margin:0 0px;}

}
@media (min-width: 992px){
    .header_nav_container .navbar-toggle {display: none!important; }
}
@media screen and (max-width: 991px) {
    .header_nav_container .header_container .navbar-custom {display: none;}
    .mp-menu {
        position: absolute; /* we can't use fixed here :( */
        display: block;
        top: 0;
        left: 0;
        z-index: 1;
        width: 300px;
        height: 100%;
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    .mp-level {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #a9001f;
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    /* overlays for pusher and for level that gets covered */
    .mp-pusher::after,
    .mp-level::after,
    .mp-level::before {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        content: '';
        opacity: 0;
    }

    .mp-pusher::after,
    .mp-level::after {
        background: rgba(0,0,0,0.5);
        -webkit-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
        -moz-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
        transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s; z-index: 100;
    }

    .mp-level::after {
        z-index: -1;
    }

    .mp-pusher.mp-pushed::after,
    .mp-level.mp-level-overlay::after {
        width: 100%;
        height: 100%;
        opacity: 1;
        -webkit-transition: opacity 0.3s;
        -moz-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }

    .mp-level.mp-level-overlay {
        cursor: pointer;
    }

    .mp-level.mp-level-overlay.mp-level::before {
        width: 100%;
        height: 100%;
        background: transparent;
        opacity: 1;
    }

    .mp-pusher,
    .mp-level {
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }

    /* overlap */
    .mp-overlap .mp-level.mp-level-open {
        box-shadow: 1px 0 2px rgba(0,0,0,0.2);
        -webkit-transform: translate3d(-40px, 0, 0);
        -moz-transform: translate3d(-40px, 0, 0);
        transform: translate3d(-40px, 0, 0);
    }

    /* First level */
    .mp-menu > .mp-level,
    .mp-menu > .mp-level.mp-level-open,
    .mp-menu.mp-overlap > .mp-level,
    .mp-menu.mp-overlap > .mp-level.mp-level-open {
        box-shadow: none;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    /* cover */
    .mp-cover .mp-level.mp-level-open {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .mp-cover .mp-level.mp-level-open > ul > li > .mp-level:not(.mp-level-open) {
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    /* content style */
    .mp-menu ul {
        margin: 0; padding: 0; list-style: none; display: block; float: left; width: 100%;
    }

    .mp-menu span.menu-title {
        margin: 0; padding: 15px; display: block;
        color: rgba(0,0,0,0.6);	text-shadow: 0 0 1px rgba(0,0,0,0.1);
        font-weight: 300; font-size: 1.6em;
    }

    .mp-menu.mp-overlap span.menu-title::before {
        position: absolute;
        top: 0;
        right: 0;
        margin-right: 8px;
        font-size: 75%;
        line-height: 1.8;
        opacity: 0;
        -webkit-transition: opacity 0.3s, -webkit-transform 0.1s 0.3s;
        -moz-transition: opacity 0.3s, -moz-transform 0.1s 0.3s;
        transition: opacity 0.3s, transform 0.1s 0.3s;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    .mp-menu ul li > a {
        display: block;
        padding: 0.7em 1em 0.7em 1.5em;
        outline: none; color: rgba(255,255,255,1);
        box-shadow: inset 0 -1px rgba(0,0,0,0.2);
        text-shadow: 0 0 1px rgba(255,255,255,0.1);
        font-size: 1.2em;
        -webkit-transition: background 0.3s, box-shadow 0.3s;
        -moz-transition: background 0.3s, box-shadow 0.3s;
        transition: background 0.3s, box-shadow 0.3s;
    }
    .mp-menu ul li > a:hover { color: rgba(255,255,255,0.8); }
    .mp-menu ul li > a > i { margin-right: 0.6em;}
    .mp-menu ul li > a > i.ico-solde { display: inline-block; height: 16px; width: 16px; background: url(../img/ico-solde.svg) no-repeat center; background-size: contain;}


    .mp-menu ul li::before {
        position: absolute;
        left: 10px;
        z-index: -1;
        color: rgba(0,0,0,0.5);
        line-height: 3.5;
    }

    .mp-level > ul > li:first-child > a {
        box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
    }

    .mp-menu ul li a:hover,
    .mp-level > ul > li:first-child > a:hover {
        background: rgba(0,0,0,0.1);
        box-shadow: inset 0 -1px rgba(0,0,0,0);
    }

    .mp-menu .mp-level.mp-level-overlay > ul > li > a,
    .mp-level.mp-level-overlay > ul > li:first-child > a {
        box-shadow: inset 0 -1px rgba(0,0,0,0);
    }

    .mp-level > ul > li:first-child > a:hover,
    .mp-level.mp-level-overlay > ul > li:first-child > a {
        box-shadow: inset 0 -1px rgba(0,0,0,0), inset 0 1px rgba(0,0,0,0);
    } /* seems like Chrome 34.0.1847.131 needs the second shadow otherwise the transition breaks */

    .mp-back {
        background: rgba(0,0,0,0.1);
        outline: none;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 700;
        display: block;
        font-size: 0.8em;
        padding: 1em;
        position: relative;
        box-shadow: inset 0 1px rgba(0,0,0,0.1);
        -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s;
    }
    .mp-back:hover { color: #fff; background: rgba(0,0,0,0.3); }

    .mp-back::after {
        font-family: "FontAwesome";
        position: absolute;
        content: "\f0da";
        right: 10px;
        font-size: 1.3em;
        color: rgba(0,0,0,0.3);
    }

    .mp-menu .mp-level.mp-level-overlay > .mp-back,
    .mp-menu .mp-level.mp-level-overlay > .mp-back::after {
        background: transparent;
        box-shadow: none;
        color: transparent;
    }

    /* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
    /* We'll show the first level only */
    .no-csstransforms3d .mp-pusher,
    .no-js .mp-pusher {
        padding-left: 300px;
    }

    .no-csstransforms3d .mp-menu .mp-level,
    .no-js .mp-menu .mp-level {
        display: none;
    }

    .no-csstransforms3d .mp-menu > .mp-level,
    .no-js .mp-menu > .mp-level {
        display: block;
    }

    .icon:before {
        font-family: "FontAwesome";
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        display: inline-block;
        margin-right: 0.6em;
        -webkit-font-smoothing: antialiased;
    }

    .icon-arrow-left:before {
        content: "\f104";
    }

    .header_nav_container li.btn_liste a {
        display: block; position: static; padding: 20px 40px 20px 60px; border: none;
        color: #fff; font-size: 14px; font-weight: 400;
    }
    .header_nav_container li.btn_liste a > span {line-height: 0;}
    .header_nav_container li.btn_liste a:hover {
        color: #fff; transform: none;
    }
    .header_nav_container li.btn_liste a::before {
        content: ""; display: block; position: absolute; left: 0px; top: auto; height: 50px; width: 50px;
        z-index: -1; transform: translateY(-15px);
        background-repeat: no-repeat; background-position: center; background-size: 70%; opacity: 1;
        -webkit-filter:grayscale(1) brightness(800%);
        -moz-filter:grayscale(1) brightness(800%);
        -ms-filter:grayscale(1) brightness(800%);
        -o-filter:grayscale(1) brightness(800%);
        filter:grayscale(1) brightness(800%);
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
    .header_nav_container li.btn_liste a:hover::before {
        -webkit-filter:grayscale(1) brightness(800%);
        -moz-filter:grayscale(1) brightness(800%);
        -ms-filter:grayscale(1) brightness(800%);
        -o-filter:grayscale(1) brightness(800%);
        filter:grayscale(1) brightness(800%);
    }

}

@media screen and (max-width: 991px) {
    .header_nav_container .button_toggle_container {display: inline-block; height: 60px; width: 60px; float: left; padding: 15px 15px; text-align: center;}
    .header_nav_container .navbar-toggle {
        display: inline-block; position: relative; height: 2.3rem; width: 30px; margin: 0 auto;
        background-color: transparent;
        background-image: linear-gradient(to right, currentColor, currentColor);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 3px;
        padding: 0; outline: 0; border: 0;
        color: #a9001f; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: .25s cubic-bezier(.17,.67,.89,1.4);
        transition-property: transform;
        will-change: transform;
    }
    .header_nav_container .navbar-toggle::before,
    .header_nav_container .navbar-toggle::after {
        content: ""; position: absolute; left: 0; right: 0; display: block; height: 3px;
        background: currentColor;
        transition: .25s;
        transition-property: transform, top;
        will-change: transform, top;
    }
    .header_nav_container .navbar-toggle::before { top: 0;}
    .header_nav_container .navbar-toggle::after { top: calc(100% - 3px); }
    .mp-pushed .header_nav_container .navbar-toggle::before { width: 60%; transform: rotate(-45deg) translate3d(-36%, 0, 0); }
    .mp-pushed .header_nav_container .navbar-toggle::after { width: 60%; transform: rotate(45deg) translate3d(-36%, 0, 0); }
    .header_nav_container .navbar-toggle > span {
        display: block; position: absolute; bottom: -70%; left: 0; width: 100%;
        text-align: center; font-size: 10px;
    }

    .header_nav_container .header_container .navbar-brand { max-width: 230px; padding: 20px 15px 10px; }
    .header_nav_container .header_container .header_search {width: calc(100% - 510px); padding: 5px 0px 0;}
    .header_nav_container .header_container .header_search input.form-control { height: 45px; padding-left: 40px;}
    .header_nav_container .header_container .header_search .btn_search {height: 45px; width: 40px;}
    .header_nav_container .header_container .header_cart,
    .header_nav_container .header_container .header_account { padding: 5px 5px 0; width: 100px; }
    .header_nav_container .header_container .header_cart a,
    .header_nav_container .header_container .header_account a { height: 40px; width: 100%; font-size: 12px;}
    .header_nav_container .header_container .header_cart a span::before,
    .header_nav_container .header_container .header_account a span::before {height: 25px;}

    .header_nav_container .mp-menu .header_cave {width: 100%; float: left; padding: 10px; border-bottom: 1px solid rgba(0,0,0,0.3);  }
    .header_nav_container .mp-menu .header_cave a {
        display: block; width: 100%; position: relative; float: left;
        font-size: 14px; font-weight: 600; color: #fff;
    }
    .header_nav_container .mp-menu .header_cave a span {display: block;}
    .header_nav_container .mp-menu .header_cave a span strong {display: inline-block; font-weight: 600; float: left; margin: 10px 5px;}

    .header_nav_container .mp-menu .header_cave a span::before {
        content: ""; display: inline-block; width: 40px; height: 40px; margin: 0 5px; float: left; border-radius: 50%;
        background-color: rgba(0,0,0,0.15); background-image: url(../img/header_cave-ico.svg); background-repeat: no-repeat; background-position: center; background-size: 70%;
        -webkit-filter:brightness(600%); -moz-filter:brightness(600%); -ms-filter:brightness(600%); -o-filter:brightness(600%); filter:brightness(600%);
    }

}

@media screen and (max-width: 768px) {
    .header_nav_container .header_container .header { height: 75px; padding: 10px 0 5px ;}
    .header_nav_container .button_toggle_container {display: inline-block; height: 60px; width: 20%; text-align: center; padding: 10px 5px;}
    .header_nav_container .button_toggle_container .navbar-toggle {float: none;}
    .header_nav_container .button_toggle_container .navbar-toggle span {display: none;}

    .header_nav_container .header_container .navbar-brand { min-width: 30px; width: 20%; height: 50px; padding: 0px 5px; margin: 0 auto; float: none; }
    .header_nav_container .header_container .navbar-brand .brand { display: inline-block; float: none; margin: 0 auto; max-width: 50px; }
    .header_nav_container .header_container .navbar-brand .brand:hover img {
        -webkit-filter:brightness(100%); -moz-filter:brightness(100%); -ms-filter:brightness(100%); -o-filter:brightness(100%); filter:brightness(100%);
    }
    .header_nav_container .header_container .header_search,
    .header_nav_container .header_container .header_search[aria-expanded="false"] {
        position: absolute; left:0; right:0; padding: 0; margin:0;
        display: block; width: 100%; background-color: #d8d5d5;
        visibility: hidden; opacity: 0; transform-origin : 100% 0 0; transform: scaleY(0);
        -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;
    }
    .header_nav_container .header_container .header_search[aria-expanded="true"] {
        display: block; visibility: visible; opacity: 1; transform-origin : 100% 0 0; transform: scaleY(1);
    }
    .header_nav_container .header_container .header_search form {margin: 10px;}
    .header_nav_container .header_container .header_search input.form-control { height: 35px; padding-left: 40px;}
    .header_nav_container .header_container .header_search .btn_search {height: 35px; width: 35px;}
    .header_nav_container .header_container .header_search-button_collapse {
        display: inline-block; position: relative; float: left; text-align: center; box-sizing: border-box; padding: 5px 5px 0; width: 20%;
    }
    .header_nav_container .header_container .header_search-button_collapse::before {
        content: ""; display: block; width: 100%; height: 25px; margin: 5px auto 0;
        background-image:url(../img/search-ico.svg); background-repeat: no-repeat; background-position: center; background-size: contain;
        opacity: 0.6; -webkit-filter:grayscale(1); -moz-filter:grayscale(1); -ms-filter:grayscale(1); -o-filter:grayscale(1); filter:grayscale(1);
    }
    .header_nav_container .header_container .header_search-button_collapse[aria-expanded="true"]::after {
        content: "\f00d"; display: block; position: absolute; bottom: 50%; left: 50%; width: 13px; height: 13px; background-color: #fff; border-radius: 50%;
        font-family: "FontAwesome"; color: #a9001f; font-size: 10px; text-align: center; line-height: 10px;
    }


    .header_nav_container .header_container .header_cart,
    .header_nav_container .header_container .header_account { padding: 5px 5px 0; width: 20%; }
    .header_nav_container .header_container .header_cart a,
    .header_nav_container .header_container .header_account a { display: inline-block; height: 30px; width: 40px; max-width: 100%; margin: 5px auto 0; }
    .header_nav_container .header_container .header_cart a span,
    .header_nav_container .header_container .header_account a span {display: inline-block; width: 100%; max-width: 100%; }
    .header_nav_container .header_container .header_cart a span::before,
    .header_nav_container .header_container .header_account a span::before {height: 25px; width:100%;  max-width: 100%; margin: 0 auto;}
    .header_nav_container .header_container .header_cart a span strong,
    .header_nav_container .header_container .header_account a span strong {display: none; }
    .header_nav_container .header_container .header_account {border-right: none;}
    .header_nav_container .header_container .header_cart a::before,
    .header_nav_container .header_container .header_cart a::after {top:6px; right: 0;}


    .header_nav_container .mp-menu .mp-menu-head {float: left; width: 100%;}
    .header_nav_container .mp-menu .mp-menu-head .mobile-brand { display: block; width: 100%; text-align: center; }
    .header_nav_container .mp-menu .mp-menu-head .mobile-brand > a { display: inline-block; width: 200px; max-width:100%; margin: 15px auto; }

}
