/*
Theme Name: Central Pub
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; }


/*  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,
input[type="date"]{ 
    background: #133138; 
    border: 1px solid #133138; 
    color: #fff; 
    display: block; 
    /*max-width: 100%; */
    outline: none; 
    padding: 18px 18px;
}
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: #fff; -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: #8d001a; 
    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: #fff; color: #8d001a; }
input::placeholder, 
textarea::placeholder, 
input[type="date"]::placeholder{color:#366873;}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(1);
}

div.wpcf7-validation-errors, 
div.wpcf7-acceptance-missing{
    border: 1px solid #8d001a;
}
.wpcf7-not-valid-tip {pointer-events:none;}
.wpcf7-form-control-wrap {
    position: relative;
    float: left;
	width: 100%;
}
.wpcf7 form.sent .wpcf7-response-output{ float: left; }

/*
 * 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;}
}

.featherlight .featherlight-close-icon, 
.featherlight-next span, 
.featherlight-previous span{ color:#981802!important }


.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output{
    color: red; border-width: 1px; border-color: red; float: left
}


.cn-close-icon{ display:none!important; }
#cookie-notice .cn-button{ background: #00212A; }
#cookie-notice .cn-button:hover{ color: #00212A; background: white }
.cn-position-bottom{ bottom: 0; }

/** 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%; }
    .spannomargin-13{ width: 54.166666666667%; }
    .spannomargin-14{ width: 58.3333333%; }
    .spannomargin-15{ width: 62.5%; }
    .spannomargin-16{ width: 66.666%; }
    .marginl-16{ margin-left: 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*/

@font-face {
    font-family: 'Adobe Caslon Pro';
    src: url('fonts/ACaslonPro-Bold.woff2') format('woff2'),
        url('fonts/ACaslonPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Adobe Caslon Pro';
    src: url('fonts/ACaslonPro-Italic.woff2') format('woff2'),
        url('fonts/ACaslonPro-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Adobe Caslon Pro';
    src: url('fonts/ACaslonPro-BoldItalic.woff2') format('woff2'),
        url('fonts/ACaslonPro-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Adobe Caslon Pro';
    src: url('fonts/ACaslonPro-SemiboldItalic.woff2') format('woff2'),
        url('fonts/ACaslonPro-SemiboldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'URBANO';
    src: url('fonts/URBANOLight.woff2') format('woff2'),
        url('fonts/URBANOLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nubolts Rounded Regular Outline';
    src: url('fonts/NuboltsRoundedRegularOutline.woff2') format('woff2'),
        url('fonts/NuboltsRoundedRegularOutline.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nubolts Rounded';
    src: url('fonts/NuboltsRounded.woff2') format('woff2'),
        url('fonts/NuboltsRounded.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nubolts Rounded';
    src: url('fonts/NuboltsRoundedBold.woff2') format('woff2'),
        url('fonts/NuboltsRoundedBold.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Adobe Caslon Pro';
    src: url('fonts/ACaslonPro-Semibold.woff2') format('woff2'),
        url('fonts/ACaslonPro-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Adobe Caslon Pro';
    src: url('fonts/ACaslonPro-Regular.woff2') format('woff2'),
        url('fonts/ACaslonPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

    .caslon{ font-family: 'Adobe Caslon Pro'; }
    .urbano{ font-family: 'URBANO'; }
    .nubolts{ font-family: 'Nubolts Rounded Regular Outline'; }
    .nuboltsrounded{ font-family: 'Nubolts Rounded'; }

    .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; }
.red, a.red{ color: #981702; }
.blue, a.blue{ color: #002129; }
.lightblue, a.lightblue{ color:#134d59; }
.midblue, a.midblue{ color:#39656f }
.pink, a.pink{ color:#ff4848; }

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 1em 1em 0 }
img.alignright, img.align-right{ float: right; margin: 0 0 1em 1em }
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: #981702; text-decoration: none; cursor: pointer; }
a:hover{ color: #fff; text-decoration: underline; }
p{ margin: 10px 0; }
label, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select , input[type="date"]{
    width: 100%;
    float: left;
    margin: 5px 0;
    font-size: 21px;
}
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; }
.absolute{ position: absolute; }

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

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

    body{
        background: #002129 url('gfx/fond-home1-pages.png') no-repeat center top; 
        margin:0;
        padding:0;
        color:#fff;
        font-family: 'Adobe Caslon Pro';
        font-weight: 400;
        font-size: 18px;
    }
    .conteneur{ max-width: 1920px; margin: 0 auto; }
    header{
        width: 100%;
        float: left;
        position: relative;
        height: 104px;
        background: transparent url('gfx/deco-menu.png') no-repeat right top;
    }
    body:not(#home) .row.deco{
        height: 104px;
        background: transparent url('gfx/deco-menu-gauche.png') no-repeat left top; 
    }

    a#logo{ }
    /*.outlogo{ margin-top: 28px; }*/
    .outlogo{ margin-top: 8px; }
    .englishflag, .menumargt{
        position: relative;
        margin-top: 28px;
        padding-top: 12px;
    }
    .englishflag::before, .englishflag::after, .outlogo::before{
        content:" ";
        display: block;
        height: 100%;
        width: 2px;
        position: absolute;
        top: 0;
        left: 0;
        background: transparent url('gfx/dots-menu.png') no-repeat 0 0;
    }
    .englishflag::after, .outlogo::before{left: auto; right: 0; }
    body#home .outlogo::before{ display:none }

    .slider{
        position: relative;
        float: left;
    }
    .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"], input[type="date"], textarea, select{
        width: 100%;
        margin: 8px 0; 
    }
    .clear{ width: 100%; float: left; clear: left; height: 1px; }

    #home .in-header{position: absolute; z-index: 8888; left: 0; top: 0; width: 100%; }


    .menu-toggle{ display: none; }
    .nav-menu{ display: block; }
    .in-header.fixe{
        position: fixed!important;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 100%;
        background: #002129 url('gfx/deco-menu.png') no-repeat right top;
        height: 104px;
        transition: ease-in-out all 0.1s;
        box-shadow: 0 14px 20px rgba(0,0,0,0.5);
    }
    nav{
        float: left;
        margin: 0;
        display: block;
        width: auto;
    }
    nav ul{ padding:0; margin: 0 auto; }
    nav ul li{
        list-style-type: none;
        display: inline-block;
        position: relative;
        text-align: center;
        background: transparent;
        transition: ease-in-out all 0.1s;
        margin: 0 4px;
        padding: 0 8px 8px 8px;
    }
    nav ul li a{
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 300;
        display: block;
        color: white;
        text-decoration: none;
        line-height: 32px;
        padding: 40px 6px 0 6px;
        margin: 0;
        width: auto;
        background: transparent;
        transition: ease-in-out all 0.1s; 
    }
    nav ul li.current-menu-item > a, 
    nav ul li a:hover{ 
        transition: ease-in-out all 0.1s; 
        text-decoration: none; 
        color: #002129; 
        background: white;
    }
    nav ul li a:hover::after, 
    nav ul li.current-menu-item > a::after{
        content:" ";
        display: block;
        width: 100%;
        height: 5px;
        position: absolute;
        bottom: 3px;
        left: 0;
        background: transparent url('gfx/menu-trait.png') no-repeat center bottom;
        background-size: contain;
        transition: ease-in-out all 0.1s; 
    }
    nav ul li:nth-child(6){ background: transparent url('gfx/menu-reservation.png') no-repeat center bottom; background-size: contain; }
    nav ul li:nth-child(6) a:hover, 
    nav ul li:nth-child(6).current-menu-item a{ 
        background: transparent; 
        color: #f46464;
    }
    nav ul li:nth-child(6) a:hover::after, 
    nav ul li:nth-child(6).current-menu-item a::after{ display: none; }
    nav ul li ul{
        position: absolute;
        top: 80px;
        left: -100%;
        width: 300%;
        z-index: 5001;
        padding: 20px 0;
        background: #002129;
        border: 1px solid rgba(223,67,68,0.8);
        display: none;
        margin: 0;
    }
    nav ul li ul::before, 
    nav ul li ul::after{
        content:" ";
        display: block;
        width: 100%;
        height: 21px;
        position: absolute;
        top: 0px;
        left: 0;
        background: transparent url('gfx/menudots.png') no-repeat center bottom;
        background-size: contain;         
    }
    nav ul li ul::after{ top: auto; bottom: 0; }

    nav ul li:hover ul{ display: block;  }
    nav ul li ul li{
        display: list-item;
        margin: 0;
        padding: 0;
    }
    nav ul li ul li a{
        color: #df4344;
        border-bottom: 0px;
        padding: 2px 2px;
        margin: 0px 0px;
        text-transform: none;
        font-style: italic;
        font-size: 22px;
        line-height: 34px;
    }
    nav ul li ul li a:hover, 
    nav ul li ul li.current-menu-item a{
        color: white;
        background: transparent;
        text-decoration: none;
    }
    nav ul li ul li a:hover::after{ display: none }  
    nav ul li ul li:nth-child(6){ background: transparent; } 
    nav ul li ul li:nth-child(6) a:hover{ color:white; }

    /* HOME */
    .backhome{ 
        position: relative;
        background: transparent;
        background: transparent url('gfx/fond-home-red.png') no-repeat center top;
    }
    #flexslider2{
        position: absolute;
        top: -104px;
        right: 0;
        bottom: 0;
        width: 50%;
    }    

    .bigtitre{
        float: left;
        position: absolute;
        z-index: 5;
        width: 40%;
        margin-left: 18%;
        margin-top: 90px;
    }
    #home h1{
        text-align: right;
        font-size: 64px;
        line-height: 64px;
        font-weight: 600;
    }
    #home h2{
        margin-left: 55%;
        font-size: 15px;
        line-height: 17px;
    }
    #home h3{
        margin-top: 386px;
        font-size: 80px;
        line-height: 70px;
    }
    #home h4{ font-size: 30px; margin-top: 10px; margin-bottom: 297px; }
    #home .photomargt{ margin-top: 245px }
    #home .rectbleu{
        position: absolute;
        left: 0;
        top: -173px;
        background: rgba(3,57,67,0.65);
        width: 59.5%;
        height: 420px;
    }
    #home .bxrived{ 
        font-size: 124px;
        line-height: 104px;
        position: absolute;
        left: 32%;
        top: -50px;
    }
    #home .presentation{
        font-size: 30px;
        line-height: 36px;
        position: absolute;
        left: 46%;
        top: 40px;  
    }
    .btn{
        color: white;
        text-decoration: none;
        background: transparent url('gfx/btn-savoirplus.png') no-repeat 0 0;
        text-align: center;
        display: block;
        width: 133px;
        height: 37px;
        font-family: 'URBANO';
        font-size: 20px;
        line-height: 37px;
        transition: ease-in-out all 0.1s;
        margin-top: 32px;
    }
    .btn:hover{ color:#ff4848; text-decoration: none; transition: ease-in-out all 0.1s; }

    .bghome3{ background: transparent url('gfx/font-home2.png') no-repeat center bottom; }
    #home .motcles{
        font-size: 124px;
        line-height: 104px;
        position: absolute;
        left: 0;
        top: 30px;  
        z-index: 2;
    }
    .btndecouvrir{
        position: relative;
        color: white;
        text-decoration: none;
        background: transparent url('gfx/btn-decouvrir.png') no-repeat 100% 100%;
        text-align: center;
        display: block;
        width: 220px;
        padding: 0 130px 0 0;
        height: 130px;
        font-size: 38px;
        font-weight: 600;
        text-transform: uppercase;
        text-align: right;
    }
    .btndecouvrir::after{
        text-transform: none;
        position: absolute;
        font-family: 'URBANO';
        font-size: 19px;
        content: "decouvrir !";
        right: 85px;
        bottom: 10px; 
        transition: ease-in-out all 0.1s;
    }
    .btndecouvrir:hover{ text-decoration: none; }
    .btndecouvrir:hover::after{ color:#002129; text-decoration: none; transition: ease-in-out all 0.1s; }
    .btndecouvrir.alignleft{ text-align: left; padding-right: 0; width: 260px;  }

    #home .faitmaison{  background: transparent url('gfx/faitmaison.png') no-repeat 80% center;  }
    #home .btndecouvrir{ margin: 0 auto }
    #home .btndecouvrir.alignleft{ margin: 260px 0 420px 0; }
    #home .btndecouvrir.bieres{ top: 122px; right: 11%; position: absolute; z-index: 3; }
    #home .btndecouvrir.cocktails{ margin-top: 440px; }

    /* FOOTER*/
    .colf{ position: relative; }
    .colf::before{
        content:" ";
        display: block;
        width: 3px;
        height: 100%;
        position: absolute;
        bottom: 0px;
        left: 0px;
        background: transparent url('gfx/dots-vert-footer.png') no-repeat center center;   
    }
    footer{ background: transparent url('gfx/footer.png') no-repeat center bottom; }
    .horfoot br{ display:none;  }
    .horfoot{ text-transform: uppercase; font-size: 12px; margin-top: 16px; margin-bottom: 40px; /*margin-left: 43.66%;*/  margin-left: 20%; }
    footer .margint60{ margin-top: 60px; }
    .logofoot{ /*margin-top: 18px; */ margin-top: -32px; margin-left: 10%; }
    footer .nav-menu li a{ font-size: 16px; line-height: 36px; text-transform: uppercase; color: white; }
    footer .nav-menu li a:hover{ text-decoration: none; color: #ff4848; }
    footer .nav-menu{ padding: 10px 0 20px 0; }
    footer p.lightblue.uppercase{ font-size: 11px; }
    .btn-reservation{
        display: block;
        background: transparent url('gfx/reservation-footer.png') no-repeat center top;
        width: 194px;
        height: 44px;
        color: white;
        text-transform: uppercase;
        font-size: 16px;
        margin: -20px 0 20px 20px;
        padding: 75px 0 0 16px;
        transition: ease-in-out all 0.1s;
    }
    .btn-reservation span{ text-transform: none; font-size: 30px; transition: ease-in-out all 0.1s; }
    .btn-reservation:hover{ text-decoration: none;color: #ff4848; transition: ease-in-out all 0.1s; }
    .btn-reservation:hover span{ color: #fff; transition: ease-in-out all 0.1s; }
    footer .sociaux img{ margin-top: 28px; margin-bottom: 16px; }

    .reservation-fixe{
        position: fixed;
        top: 55%;
        right: 0;
        z-index: 999999;
        display: block;
        background: transparent url('gfx/reservation-fixe.png') no-repeat right top;
        width: 240px;
        height: 118px;
        color: #7e1909;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 600;
        text-align: right;
        padding: 18px 80px 0 0;
        transition: ease-in-out all 0.1s;
    }
    .reservation-fixe span{ font-size: 36px; text-transform: none; font-weight: 400; }
    .reservation-fixe:hover{ padding-right: 78px; }
    .reservation-fixe:hover, .reservation-fixe:hover span{ 
        text-decoration: none; 
        color: #ff4848; 
        transition: ease-in-out all 0.1s; 
    }
    /* pages */
    body#page{ background-position: center -210px; }
    .backd{
        background-color: transparent;
        background-position: right 270px;
        background-size: 58.3333333%;
        background-repeat: no-repeat;
    }
    .backg{
        background-color: transparent;
        background-position: left 150px;
        background-size: 50%;
        background-repeat: no-repeat;
    }
    body#page h1{ 
        text-transform: uppercase;
        margin: 60px auto 0 auto;
        font-size: 65px;
        font-weight: 600;
    }
    body#page .bxbastide{
        right: 25%;
        text-align: right;
        font-size: 124px;
        line-height: 100px;
        top: 20px;
        z-index: -1;
    }
    body#page p.intro{
        font-style: italic;
        color: white;
        margin-top: 374px;
        font-size: 30px;
    }
    body#page .lignebloc1{ margin-top: 190px; }
    body#page .lignebloccontactresa{ margin-top: 40px; }
    .txtpages h2{
        font-family: 'Nubolts Rounded Regular Outline';
        font-size: 70px;
        /*color: #134d59 ;*/
        /*color: #98a0ab;*/
        color:#a2c1c8;
        line-height: 60px;
    }
    .txtpages h3{
        font-family: 'Nubolts Rounded Regular Outline';
        font-size: 55px;
        /*color: #134d59 ;*/
        color: #98a0ab;
        line-height: 50px;
    }
    .txtpages h4{
        font-family: 'Nubolts Rounded Regular Outline';
        font-size: 45px;
        /*color: #134d59 ;*/
        color: #98a0ab;
        line-height: 40px;
    }
    .txtpages p{ font-size: 18px; line-height: 24px; text-align: justify; margin: 18px 0; }
    .txtpages{ 
        padding-bottom: 90px; 
        background: transparent url('gfx/fin-carte.png') no-repeat right bottom; 
        margin-bottom: 80px; 
        width: 100%;
        float: left;
    }
    .imgbloc1{ margin-top: 140px; }
    .imgbloc1, .imgbloc2, .imgbloc3{ 
        filter: grayscale(1); 
        /* mix-blend-mode: difference; */
        transition: ease-in-out all 0.2s; 
    }
    a:hover .imgbloc1, a:hover .imgbloc2, a:hover .imgbloc3{ 
        filter: none; 
        /*mix-blend-mode: inherit; */
        transition: ease-in-out all 0.2s; 
    }
    .cadrerge::after{
        content: " ";
        position: absolute;
        top: 45px;
        left: 45px;
        width: 100%;
        height: 100%;
        background: transparent url('gfx/lepub-cadre.png') no-repeat 0 0;
        background-size: contain;
        z-index: 2;
    }
    .lignebloc1 .cadrerge::after{ top: 115px; width: 90%; }
    .lignebloc2{ margin-top: 60px; }
    .imgbloc2, .imgbloc3{ margin-top: 70px; }
    .lignebloc2 .cadrerge::after{ width: 85%; }
    .lignebloc2 .cadrerge.cadredr::after{ left: 25px }
    .txtpages h2.white{ color: white }

    /* cartes */
    .illusbiere{ margin-bottom: 240px; }
    .happyhours{
        background: transparent url('gfx/happy-hours.png') no-repeat center top;
        background-size: contain;
        padding: 230px 10% 50px 10%;
        width: 80%;
        margin-bottom: 50px;
    }
    .happyhours p.uppercase{ font-size: 28px; width: 60%; margin: 0 20%; height: 190px; font-weight: 600; }
    .happyhours p.italique{ height: 100px; }

	.tapas{ margin-bottom: 80px; }
    .tapas1{
        background: transparent url('gfx/tapas-middle.png') repeat-y center top;
        background-size: contain;
    }
    .tapas2{
        background: transparent url('gfx/tapas-top.png') no-repeat center top;
        padding-top: 240px;
        background-size: contain;
    }
    .tapas3{
        background: transparent url('gfx/tapas-bottom.png') no-repeat center bottom;
        padding: 0 10% 50px 10%;
        background-size: contain;
        width: 80%;
        text-align: center;
    }
    .tapas h4{ font-family: 'Nubolts Rounded'; font-size: 28px; line-height: 38px; }
    .tapas h3{ font-size: 36px; line-height: 33px; font-weight: 600; text-transform: uppercase; }


    body#page .lescartes .lignebloc1{
        margin-top: 750px;
    }
    .lescartes .lignebloc1{
        column-count: 2;
        column-gap: 0;
    }
    .spannomargin-8.marginl-2.marginr-2.left{
        float: none;
        display: inline-block;
        width: 66.5%;
        margin: 0 16.75%;
    }
    .illusbiere{
        float: none;
        display: inline-block; 
        width: 72.5%;
        margin: 150px 13.75%;
    }
    .lescartes.cocktailsandco  .illusbiere{
        width: 60%;
        margin: 150px 20%;
    }
    .lescartes h2.red{
        font-size: 65px;
        font-weight: 600;
        margin-bottom: 24px;
    }
    .lescartes .txtpages h4{
        font-size: 28px;
        color: white;
        font-family: 'Nubolts Rounded';
    }
    .lescartes .txtpages p{ margin-top: 0; }
    .lescartes .txtpages p em, 
    .lescartes.cocktailsandco .tapas3 p em{
        color:#39656f;
        font-size: 18px;
    }
    .lescartes.cocktailsandco .tapas3 p em{ color:#002129; }
    .titreillusbiere{ 
        right: 100px; 
        top: 180px;
    }
    .titreillusbiere h3{
        font-size: 50px;
        font-weight: 600;
        line-height: 48px;
    }
    .titreillusbiere h4 {
        font-size: 12px;
        width: 40%;
        position: absolute;
        right: 0;
        text-align: left;
    }

    .lescartes.cocktailsandco .tapas1{
        background: transparent url('gfx/encart-cocktail-middle.png') repeat-y center top;
        background-size: contain;
    }
    .lescartes.cocktailsandco .tapas2{
        background: transparent url('gfx/encart-cocktail-top.png') no-repeat center top;
        padding-top: 60px;
        background-size: contain;
    }
    .lescartes.cocktailsandco .tapas3{
        background: transparent url('gfx/encart-cocktail-bottom.png') no-repeat center bottom;
        padding: 0 12.5% 50px 12.5%;
        background-size: contain;
        width: 75%;
        text-align: left;
    }
    .lescartes.cocktailsandco .tapas3 h2{ font-size: 65px; margin-bottom: 24px; }

    body#page .lescartes .bxbastide{
        right: auto;
        left: 17%;
        text-align: left;
    }






/**/
@media (min-width: 2px) and (max-width: 1023px){
    .in-header, 
    #home .in-header, 
    .in-header.fixe{
        position: relative!important;
        top: auto;
        left: auto;
    }
    header{ height: 132px; }
    #site-navigation{ position: relative; }
    .menu-toggle{
        width: 54px;
        padding: 0;
        background: transparent url('gfx/menu.png') no-repeat center;
        color: #fff;
        border:0;
        display: block;
        height: 50px;
        float: right;
        text-align: center;
    }
   .menu-toggle:active, .menu-toggle:focus, .menu-toggle:hover{
        text-decoration: none;
    }
    .nav-menu{ 
        display: none; 
        padding:0; 
        margin:0; 
        z-index: 10001; 
        width: 100%;
        position: absolute;
        top: 50px;
        left: 0;
    }
    div.nav-menu{ display: block; }
    .nav-menu.toggled-on{ display: block; }
    nav{
        float: left;
        margin: 0;
        width: 100%;
    }
    nav ul li{
        list-style-type: none;
        display: block;
        position: relative;
        text-align: center;
        margin: 0;
        padding: 0;
    }
    nav ul li a{
        font-size: 20px;
        display: block;
        color: #fff;
        background: #002129;
        text-decoration: none;
        width: 96%;
        padding: 6px 2%;
        margin: 0;
    }
    nav ul li.current-menu-item > a, nav ul li a:hover, 
    nav ul li:nth-child(6) a:hover, nav ul li:nth-child(6).current-menu-item a{ background:#981702; }
    nav ul li ul{
        margin:0;
        padding:0;
    }
    nav ul li:hover ul{ }
    nav ul li:after{
        display: none;
    }
    nav ul li ul {
        top: auto;
        position: relative;
        left: auto;
        width: 100%;
        padding: 0;
        border: 0px;
    }
    nav ul li ul li{
        display: list-item;
    }
    nav ul li ul li a{
        color: #fff;
    }
    nav ul li ul li a:hover{
        background:#981702;
        text-decoration: none;
    }
    .englishflag, .menumargt{ margin-top: 0px; padding-top: 0px; }
    .englishflag{ position: absolute; top: 0; right: 0; width: 36px; }
    .englishflag img{ float: right; }

    #home main .row{ width: 90%; padding: 0 5%;  }
    #home h1 {
        text-align: right;
        font-size: 54px;
        line-height: 54px;
    }
    .bigtitre {
        width: 80%;
        margin-left: 0;
        margin-top: -3rem;
    }
    #home h3 {
        margin-top: 340px;
    }
    #home .bxrived {
        font-size: 94px;
        line-height: 84px;
        position: absolute;
        left: 32%;
    }
    #home .rectbleu{ width: 70%; height: 360px; }
    #home .presentation {
        font-size: 26px;
        line-height: 36px;
        position: absolute;
        left: 5%;
        top: 40px;
    }
    .reservation-fixe {
        position: fixed;
        top: 75%;
        right: 0;
        z-index: 999999;
        display: block;
        background: transparent url(gfx/reservation-fixe.png) no-repeat right top;
        width: 150px;
        background-size: 100%;
        height: 118px;
        color: #7e1909;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 600;
        text-align: right;
        padding: 18px 50px 0 0;
        transition: ease-in-out all 0.1s;
    }
    .reservation-fixe span {
        font-size: 16px;
        text-transform: none;
        font-weight: 400;
    }
    #home .photomargt{ width: 70%; margin-top: 190px; }
    #home .motcles{
        top: -50px;
        font-size: 84px;
        line-height: 70px;
    }
    #home .btndecouvrir.bieres{ position: relative; margin-top: 40px; top: auto; left: auto; }
    #home .btndecouvrir.cocktails { margin-top: 40px; }
    #home .btndecouvrir.alignleft{ margin: 40px 0 40px 40px; }
    #home .faitmaison{ background-size: contain; }
    
    footer .margint60 { margin-top: 20px; }
    footer .logofoot{ margin: 0 35%; max-width: 30%; }
    .horfoot{ margin-left: 0; text-align: center; margin-bottom: 10px;}
    .btn-reservation {
        width: 75%;
        margin: 0px 0 0px 0px;
        padding: 75px 0 0 25%;
    }
    .colf::before{ display:none }
    
    .sociaux .spannomargin-8{ width: 33.333%; }
    .backd { background-position: right 220px; }
    body#page h1{ font-size: 36px; }
    body#page .bxbastide {
        right: 25%;
        font-size: 90px;
        line-height: 70px;
        top: 20px;
    }
    body#page p.intro {
        margin: 294px 5% 0 5%;
        font-size: 24px;
        width : 90%;
    }
    body#page .lignebloc1, body#page .lignebloc2{ margin-top: 0; }
    .txtpages{ width: 90%; margin: 40px 5% 40px 5%; }
    .txtpages h2 {
        font-size: 60px;
        line-height: 50px;
        }
    .cadrerge{ width: 90%; margin: 0 5%; }
    
    body#page .lescartes .lignebloc1{
        margin-top: 180px;
    }
    .lescartes .lignebloc1{ column-count: 1; }
    .spannomargin-8.marginl-2.marginr-2.left {
        width: 90%;
        margin: 0 5%;
    }
    .lescartes.cocktailsandco .illusbiere {
        width: 80%;
        margin: 40px 10%;
    }
    .titreillusbiere { right: 0; }
    label, input[type="text"], input[type="tel"], input[type="email"], input[type="date"], textarea, select{ padding: 10px 0; }
    .happyhours {
        padding: 160px 10% 50px 10%;
        width: 80%;
    }
    .happyhours p.uppercase {
        font-size: 24px;
        width: 80%;
        margin: 0 10%;
        height: auto; 
    }
    .tapas2{ padding-top: 180px; }
    
}
/**/
@media (min-width: 768px) and (max-width: 1023px){
    .bghome3{ width: 90%; margin-left:5%; }
    .deco .spannomargin-4.outlogo{ width: 50%; }
    .englishflag{ top: 100px; }
    #site-navigation{ margin: 27px 0 0 0 }
    .menu-toggle{ margin-right: 10px; }
    body#page h1 { font-size: 46px; }
    .cadrerge{ width: 50%; margin: 0; }
    .horfoot{ width: 62%; text-align: right; }
    .btn-reservation{ margin-bottom: 10px; }
    body#page .lescartes .lignebloc1 { margin-top: 360px; }
    .lescartes .lignebloc1{ column-count: 2 }
    .lignebloccontactresa .spannomargin-16.marginl-4{ width: 100%; }
    footer{ margin-top: 40px; }
}
/**/
@media (min-width: 1024px) and (max-width: 1279px) {

    nav ul li{
        margin: 0 4px;
        padding: 0 2px 8px 2px;
    }
    nav ul li a{
        font-size: 12px;
        padding: 40px 2px 0 2px;
    }    
    nav ul li ul li a{ font-size: 14px }
    .bigtitre{ margin-left: 0; width: 58%; }
    .backhome{ background-size: 1282px; }
    #home h1 {
        font-size: 44px;
        line-height: 44px;
    }
    #home h2 {
        margin-left: 62%;
        font-size: 11px;
        line-height: 14px;
    }
    #home h3 { margin-top: 226px; }
    #home h4{ margin-bottom: 130px; }
    #home .rectbleu{ top: -142px; height: 305px; }
    #home .presentation {
        font-size: 24px;
        line-height: 32px;
        position: absolute;
        left: 36%;
    }
    #home .photomargt { margin-top: 163px; }
    #home .bxrived{ left: 17%; }
    #home .motcles { font-size: 84px; line-height: 68px; }
    #home .btndecouvrir.bieres { top: 72px; right: 0; }
    #home .faitmaison{ background-size: 70%; }
    #home .btndecouvrir.alignleft { margin: 220px 0 380px 0; }
    #home .btndecouvrir.cocktails { margin-top: 360px; }

    .horfoot {
        font-size: 9px;
        width: 40%;
        /*margin-left: 60%; */
        margin-left: 25%;
    }
    body#page{ background-size: 150%; }
    body#page .bxbastide{ right: 15%; }
    body#page h1{ font-size: 45px; }
    body#page p.intro{ margin-top: 284px; font-size: 20px; }
    body#page .lignebloc1{  margin-top: 150px; }
    .txtpages h2 { font-size: 55px; line-height: 50px; }
    .lignebloc2 { margin-top: 20px; }
    .txtpages p { font-size: 16px; line-height: 22px; }
    .lignebloc2 .cadrerge::after { width: 95%; left: 30px; }
    .lignebloc2 .cadrerge.cadredr::after { left: -15px; }
    .happyhours {
        padding: 150px 5% 20px 5%;
        width: 90%;
        margin-bottom: 50px;
    }
    .happyhours p.uppercase {
        font-size: 18px;
        height: 110px;
    }
    .happyhours p.italique { height: 92px; }
    .tapas2 { padding-top: 160px; }
    .tapas h4 {
        font-size: 24px;
        line-height: 32px;
    }
    .tapas h3 {
        font-size: 30px;
        line-height: 32px;
    }
    body#page .lescartes .lignebloc1{ margin-top: 570px; }
    .lescartes h2.red { font-size: 55px; }
    .lescartes .txtpages h4 { font-size: 24px; }
    .logofoot{ margin-left: 0; }
    .outlogo{ margin-top: 18px; }
    .outlogo img{ max-width: 80%; }
    
}
/**/
@media (min-width: 1280px) and (max-width: 1479px){
    nav ul li{
        margin: 0 4px;
        padding: 0 4px 8px 4px;
    }
    nav ul li a{
        font-size: 14px;
        padding: 40px 2px 0 2px;
    }    
    nav ul li ul li a{ font-size: 18px }
    .bigtitre { 
        width: 50%;
        margin-left: 9%; 
    }   
    #home h2 {
        margin-left: 60%;
        font-size: 13px;
        line-height: 15px;
    }
    #home h1 { font-size: 50px; line-height: 50px; }
    #home h3 { margin-top: 326px; }
    .backhome { background-size: 1440px; }
    #home h4{ margin-bottom: 112px; }
    #home .rectbleu{ top: -130px; height: 314px; }
    #home .presentation {
        font-size: 26px;
        line-height: 30px;
    }
    #home .photomargt { margin-top: 184px; }    
    #home .motcles { font-size: 84px; line-height: 74px; }
    #home .btndecouvrir.alignleft { margin-top: 240px }
    #home .faitmaison{ background-size: 70%; background-position: right center  }
    #home .btndecouvrir.bieres { top: 102px; right: 5%; }
    #home .btndecouvrir.cocktails { margin-top: 400px; }
    
    .horfoot {
        font-size: 9px;
        /*margin-left: 55%; */
        margin-left: 30%;
    }
    body#page{ background-size: 130%; }
    body#page .bxbastide{ right: 18%; }
    body#page p.intro { margin-top: 294px; font-size: 22px; }
    .txtpages h2 {
        font-size: 60px;
        line-height: 55px;
    }
    .lignebloc2 .cadrerge::after { width: 95%; left: 30px; }
    .lignebloc2 .cadrerge.cadredr::after { left: -15px; }
    .lignebloc2 { margin-top: 20px; }
    .happyhours { padding: 170px 10% 30px 10%; }
    .happyhours p.uppercase {
        font-size: 22px;
        height: 140px;
    }
    .happyhours p.italique { height: 82px; }
    .tapas2 { padding-top: 180px; }
    .tapas h3 {
        font-size: 32px;
        line-height: 32px;
    }
    .outlogo{ margin-top: 18px; }
    .outlogo img{ max-width: 80%; }
    
    
}
/**/
@media (min-width: 1480px) and (max-width: 1599px){

}
/**/
@media (min-width: 1600px) and (max-width: 1799px){

}
/**/
@media (min-width: 1800px){
   
}
/**/