/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {    color: #222;    font-size: 16px;    line-height: 1.4; width:100; height:100%;}
body { font-size: 66%; font-family: "eurof", sans-serif; background:url(../img/photos-restaurant/caveau-restaurant-beaune.JPG) no-repeat top center fixed; background-size: cover}
::-moz-selection {    background: #b3d4fc;    text-shadow: none;}
::selection {    background: #b3d4fc;    text-shadow: none;}

hr {    display: block;    height: 1px;    border: 0;    border-top: 1px solid #ccc;    margin: 1em 0;    padding: 0;}
audio,canvas,iframe,img,svg,video {    vertical-align: middle;}
fieldset {    border: 0;    margin: 0;    padding: 0;}
textarea {    resize: vertical;}
a { text-decoration: none; color: #fff }
* { box-sizing:border-box;}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.content { width:93%; max-width: 1200px ;margin: auto}

header { color: #fff; }
.home header { height: 100%; width:340px; background: rgba(24,56,14,.7); margin-left: 48px; padding: 20px 0 0 20px; position:relative;
}
.not-home header { line-height: 101px; text-align: right; margin: 0 50px 0 67px }

.home header h1, .not-home header h4 { font-family:'BickleyScriptLET', sans-serif; font-weight: normal; font-size:9.5em; float: left; margin: 0 }
.home article { clear: both; font-size:1.8em; padding:40px 20px; background-color: rgba(8,23,3,.7); margin-left:-20px; }
.home article a { text-decoration: underline; font-weight: bold;}
.not-home h1 { font-size:2.3em; } .not-home header h4 { margin-top: 40px }
header h2 { font-family: "DejaVu Serif", Gerogia, Norasi, serif; font-size:5.41em; font-weight:normal; }
header h3 { bottom:150px; font-size:2.5em; font-weight:normal; }
.home header h2, .home header h3 { position: absolute; bottom:350px; } .home header h3 { bottom: 330px }
.not-home header h1, .not-home header h2, .not-home header h3 { display: inline-block; vertical-align: sub; margin: 40px 0 0 10px }

header div { position: absolute; bottom:20px; font-size:1.2em; text-transform: uppercase}
header div.horaire { position: absolute; bottom:70px; font-size:1.7em; text-transform: none}
nav { height: 100%; position:absolute; top:0; right:55px; display: table; font-size:2.5em; font-weight:bold;}
nav ul { text-align:center; vertical-align: middle; display: table-cell; width: 250px; overflow: hidden}

nav ul li { 
    display:inline-block;
    float: right;
    background:rgba(255,255,255,0.7);
    position: relative;
    webkit-transition:all .3s;
    transition:all .3s; 
    right:0px;
}
nav ul li.cache { right:-250px; }

nav ul li a { padding: 20px 30px;color: #18380e; display: inline-block; transition: all .3s; }
nav ul li a:hover, nav ul li a.current { background-color: #18380e; color: #fff;}

.menu-button { position: absolute; top:48%; right:10px; display: inline-block; padding: .5em; }
.burger-icon { position: relative; margin:8px 0;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 
}
    .burger-icon, .burger-icon::before, .burger-icon::after {
        display: block;        width: 25px;        height: 2px;        background-color: rgba(255,255,255,.7);
        -webkit-transition-property: background-color, -webkit-transform;
        -moz-transition-property: background-color, -moz-transform;
        -o-transition-property: background-color, -o-transform;
        transition-property: background-color, transform;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s; 
    }
    .burger-icon::before, .burger-icon::after { position: absolute; content: ""; }
    .burger-icon::before { top: -8px; } .burger-icon::after { top: 8px; }

    .menu-button.is-active .burger-icon { background-color: transparent; }
    .menu-button.is-active .burger-icon::before {
        -webkit-transform: translateY(8px) rotate(45deg);
        -moz-transform: translateY(8px) rotate(45deg);
        -ms-transform: translateY(8px) rotate(45deg);
        -o-transform: translateY(8px) rotate(45deg);
        transform: translateY(8px) rotate(45deg); 
    }
    .menu-button.is-active .burger-icon::after {
        -webkit-transform: translateY(-8px) rotate(-45deg);
        -moz-transform: translateY(-8px) rotate(-45deg);
        -ms-transform: translateY(-8px) rotate(-45deg);
        -o-transform: translateY(-8px) rotate(-45deg);
        transform: translateY(-8px) rotate(-45deg); 
    }

main.content { padding-right: 275px; font-size:1.8em; }
main.content>div { display: inline-block; margin: 5px; width: 263px; height:263px; position: relative; max-width:263px;}
main.content div.categorie a { width: 100%; height: 100.5%; background: rgba(24,56,14,.75); position: absolute; text-align: center; font-size: 1.5em; text-transform: uppercase; padding-top: 45%; transition: all .3s ease-in-out; }
main.content div.categorie a:hover {background: rgba(24,56,14,.9);}
main.content div img { max-width:100%; }
main.content .contenu { float: right; background-color: rgba(255,255,255,.7); width: 66%; height: auto; max-width: 600px; font-size: 1.1em; font-weight: bold; padding: 20px; min-height: 534px }
main.content .contenu h2 { color:rgb(24,56,14); border-bottom: 1px solid rgb(24,56,14); margin-bottom: 15px; margin-top: 0; text-transform: uppercase }
main.content .contenu h3 { color:rgb(24,56,14); border-bottom: 1px solid rgb(24,56,14); margin-top: 15px; text-align: center; }
main.content .contenu p { margin: 5px 0; padding-bottom: 5px; border-bottom:1px solid rgba(0,0,0,.3); clear:right; }
main.content .contenu.menus p { text-align: center; }
main.content .contenu p span { float: right;}
main.content .retour { background: rgb(24,56,14); padding: 20px; font-weight: bold; color: #fff }
.contact main.content .retour { font-size:1.1em; }
main.content .retour a { color: #fff }
main.content .retour h3 { margin: 0;}

label { width: 150px; display: inline-block; }
input[type=text], input[type=email], input[type=tel], textarea { width: 100%; outline:none; padding: 2px 5px }
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, textarea:focus { color:rgb(24,56,14); border:1px solid rgb(24,56,14); border-right:5px solid rgb(24,56,14)}
form p { font-size:.9em;}
textarea { height:183px;}
input[type=submit], input[type=button] {
    background: rgb(24,56,14); color: #fff; border:none; text-align:center; display: block; margin: auto; padding: 10px 20px; transition:all .5s; margin-bottom: 20px;
}
input[type=submit]:hover, input[type=button]:hover { background-color: rgb(8,23,3) }
#map { width:100%; height: 406px}

.tel { display: none }

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 1100px) {
    nav ul { width: 170px }
    nav ul li a { padding: 7px 10px; font-size: .9em }
    header { font-size:.8em }
    .not-home header { margin-left: 3%}
    main.content { padding-right: 200px}
}

@media only screen and (max-width: 768px) {
    nav {position: absolute; width: 100%; top:55px; left:0; display: none}
    nav ul, nav ul li, nav ul li a { width: 100%; display: block; margin: 0; padding: 0;}
    nav ul li a { padding: 15px 0}
    nav ul li { border-bottom: 1px solid rgb(24,56,14); left:0%; background: rgba(255,255,255,.9);}
    nav ul li.cache { left: -100%; right:auto; }

    .menu-button { position: absolute; top:15px; left:50%; margin-left: -20px;}
    .burger-icon, .burger-icon::before, .burger-icon::after { width: 40px; height:3px;}
    .burger-icon::before { top: -10px; } .burger-icon::after { top: 10px; }
    .menu-button.is-active .burger-icon::before {
        -webkit-transform: translateY(10px) rotate(45deg);
        -moz-transform: translateY(10px) rotate(45deg);
        -ms-transform: translateY(10px) rotate(45deg);
        -o-transform: translateY(10px) rotate(45deg);
        transform: translateY(10px) rotate(45deg); 
    }
    .menu-button.is-active .burger-icon::after {
        -webkit-transform: translateY(-10px) rotate(-45deg);
        -moz-transform: translateY(-10px) rotate(-45deg);
        -ms-transform: translateY(-10px) rotate(-45deg);
        -o-transform: translateY(-10px) rotate(-45deg);
        transform: translateY(-10px) rotate(-45deg); 
    }

    .home>.tel, .not-home header h2, .not-home header h3, #controls-wrapper { display: none !important}

    .not-home header { margin: 20px 0 0 0; text-align: center; line-height: normal;}
    .not-home header h4 { display: block; margin: 15px 0; float: none;}

    .home header { width:90%; margin: auto; padding: 20px 0; height: auto }
    .home header h1, .home header h2, .home header h3, header div.horaire, .home .mentions { text-align: center; float: none; margin-top:30px; position: static}
    .home article, header div.horaire {margin: 0; font-size:2.3em;}
    .home .tel { font-size: 1.2em; margin: 0 }

    main.content { padding: 3%}
    main.content .contenu { width: 100%; float: none; margin: auto;}
    main.content>div { display: block; margin: 1% 0 1%; width: 100%; min-width: 100%;text-align: center;}

    main.content>div.categorie { width: 50%; float: left; min-width: 50%}
    main.content div.categorie a { display: block; padding: 0; font-size:1.2em; padding-top: 40%; background:rgba(24,56,14,.5);}

    .tel { clear:both; display: block; font-size:2.3em; text-align:center; background: rgba(255,255,255,.5); color: rgb(24,56,14); font-weight: bold;}
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,.clearfix:after {    content: " ";    display: table;}
.clearfix:after {    clear: both;}
.clearfix {    *zoom: 1;}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

@font-face {
    font-family: 'BickleyScriptLET';
    src: url('fonts/BickleyScriptLET.eot');
    src: url('fonts/BickleyScriptLET.eot') format('embedded-opentype'),
         url('fonts/BickleyScriptLET.woff2') format('woff2'),
         url('fonts/BickleyScriptLET.woff') format('woff'),
         url('fonts/BickleyScriptLET.ttf') format('truetype'),
         url('fonts/BickleyScriptLET.svg#BickleyScriptLET') format('svg');
}

@font-face {
    font-family: 'eurof';
    src: url('fonts/eurof35_0.eot');
    src: url('fonts/eurof35_0.eot') format('embedded-opentype'),
         url('fonts/eurof35_0.woff2') format('woff2'),
         url('fonts/eurof35_0.woff') format('woff'),
         url('fonts/eurof35_0.ttf') format('truetype'),
         url('fonts/eurof35_0.svg#eurof35_0') format('svg');
}