/*!
Theme Name: Restaurant Metro
Author: Restaurant Metro
*/
    * {
        outline: none;
        border: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    *,
    *::before,
    *::after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }


/*  =================================================================
    1.0 Fonts
================================================================== */
/*  1.1 Font Name google font
    -------------------------------------------------------------- */
    @font-face {
        font-family: 'genevaregular';
        src: url('../fonts/geneva_regular-webfont.eot');
        src: url('../fonts/geneva_regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('../fonts/geneva_regular-webfont.woff2') format('woff2'),
             url('../fonts/geneva_regular-webfont.woff') format('woff'),
             url('../fonts/geneva_regular-webfont.ttf') format('truetype'),
             url('../fonts/geneva_regular-webfont.svg#genevaregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

/*  1.2 Fontello
    -------------------------------------------------------------- */
/*  1.3 Fontello fix
    -------------------------------------------------------------- */
    [class^="icon-"]::before,
    [class*=" icon-"]::before {
        margin-right: 0;
        margin-left: 0;
        width: auto;
        display: block;
        line-height: inherit;
        text-shadow: none;
    }

/*  1.4 Font base
    -------------------------------------------------------------- */
    body {}
    body, h1, h2, h3, h4, h5, h6, p, ul, ol, label, .button, button, input, textarea, address {
        font-family: 'genevaregular';
        font-style: normal;
        font-weight: normal;
    }

/*  =================================================================
    2.0 Colors
================================================================== */
/*  2.1 Background Colors
    -------------------------------------------------------------- */
    .bgBlack {
        background-color: #000;
    }
    .bgDarkGrey {
        background-color: #4a4a49;
    }
    .bgGrey {
        background-color: #efefef;
    }
    .bgYellow {
        background-color: #f9cc00;
    }

/*  2.2 Text Colors
    -------------------------------------------------------------- */
    .txtBlack {
        color: #4a4a49;
    }
    .txtYellow {
        color: #f9cc00;
    }


/*  =================================================================
    3.0 Standards
================================================================== */
    html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    body {
        color: #4a4a49;
    }

    .hide-for-xsmall,
    .hide-for-small,
    .show-for-medium,
    .show-for-large,
    .show-for-xlarge,
    .always-hidden {
        display: none !important;
    }

    p,
    ul,
    ol,
    ul li,
    ol li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    figure {
        margin: 0;
        padding: 0;
    }

    h1,
    h1 span,
    h1 small,
    h2,
    h2 span,
    h2 small,
    h3,
    h3 span,
    h3 small,
    h4,
    h4 span,
    h4 small,
    h5,
    h5 span,
    h5 small,
    h6,
    h6 span,
    h6 small {
        display: block;
    }

    .text-left {
        text-align: left;
    }
    .text-xsmall-center,
    .text-small-center,
    .text-center,
    .text-large-left,
    .text-large-right {
        text-align: center;
    }
    .text-right {
        text-align: right;
    }
    .text-justify {
        text-align: justify;
    }

    ul,
    ol {
        list-style: none;
    }

    button,
    select,
    select:focus,
    a,
    a:active,
    a:visited,
    a:focus {
        outline: none !important;
        outline: 0 !important;
        text-decoration: none;
        color: #4a4a49;
    }

    .panel {
        position: relative;
        width: 100%;
        float: left;
    }

/*  3.1 Rows
    -------------------------------------------------------------- */
    .row {
        position: relative;
        max-width: 1280px;
        margin-right: auto;
        margin-left: auto;
    }
    .row.xl {
        max-width: none;
    }
    .row::before, .floated::before,
    .row::after, .floated::after {
        display: table;
        content: '';
    }
    .row::after, .floated::after {
        clear: both;
    }

    .row .row {
        margin-bottom: 0;
    }
    .row .row .padded {
        padding: 0;
    }
    .row.collapsed .row {
        margin-left: 0;
        margin-right: 0;
    }

/*  3.2 Column setup
    -------------------------------------------------------------- */
    .col {
        position: relative;
        display: block;
        float: left;
        margin: 0;
        width: 100%;
        padding: 0 20px;
    }
    .row.collapsed .col {
        padding: 0;
    }
    .col.centered {
        float: none;
        margin: 0 auto;
    }
    .col.xtraPad {
        padding: 50px 15px;
    }

/*  3.3 Column max width (mobile devices)
    -------------------------------------------------------------- */
    .xs50 {
        max-width: 50%;
    }

/*  3.4 Blocks
    -------------------------------------------------------------- */
    #siteContainer,
    nav,
    header,
    section,
    footer,
    .block {
        position: relative;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
    }

/*  3.5 Figure Tags
    -------------------------------------------------------------- */
    figure {
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    figure a {
        display: block;
    }
    img {
		width:100%;
    }
    figure img {
        float: left;
    }

/*  3.6 Box
    -------------------------------------------------------------- */
    .small-box {
        position: absolute;
        top: 30%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

/*  3.7 Responsive Video Embed
    -------------------------------------------------------------- */
    .flex-video {
        position: relative;
        height: 0;
        margin: 0;
        padding-bottom: 75%;
        overflow: hidden;
    }
    .flex-video iframe,
    .flex-video object,
    .flex-video embed,
    .flex-video video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .flex-video.widescreen {
        padding-bottom: 56.25%;
    }
    .flex-video.panorama {
        padding-bottom: 31.64062%;
    }

/*  3.8 Responsive Image Embed
    -------------------------------------------------------------- */
    .ARC {
        position: relative;
        overflow: hidden;
    }
    .ARC:before {
        display: block;
        content: '';
        width: 100%;
        padding-bottom: 100%;
    }
    .ARC.widescreen:before {
        padding-bottom: 66.5625%;
    }
    .ARC.standing:before {
        padding-bottom: 133.125%;
    }
    .ARC.panorama:before {
        padding-bottom: 31.64062%;
    }
    .ARC > .ARC-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .ARC img:not(.slideImg) {
        width: 100%;
        left: 50%;
        position: absolute;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

/*  3.9 flex container
    -------------------------------------------------------------- */
    .flex-container {
        padding: 0;
        margin: 0;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;

        -ms-flex-direction: row;
        -ms-flex-wrap: wrap;

        justify-content: flex-start;
    }
    .flex-item {
        position: relative;
        width: 100%;
    }

/*  3.10 Apple form fix
    -------------------------------------------------------------- */
    input,
    textarea,
    select,
    button {
        outline: none !important;
        resize: none;
        border-radius: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        box-shadow: none;
    }


/*  3.11 Page Fader
    -------------------------------------------------------------- */
    .fade-in {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 99999;
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
        -webkit-animation-duration: 0.7s;
        animation-duration: 0.7s;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
        animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
        pointer-events: none;
    }
    @-webkit-keyframes fadeIn {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }
    @keyframes fadeIn {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }


/*  =================================================================
    4.0 Containers
================================================================== */
/*  4.1 siteContainer
    -------------------------------------------------------------- */
    #siteContainer {
        min-height: 100%;
        overflow: hidden;
        padding-top: 140px;
    }


/*  =================================================================
    5.0 Header
================================================================== */
    header {
        height: 750px;
        overflow: hidden;
        margin-bottom: 30px;
    }
    header:before,
    header:after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 30px;
        z-index: 1;
    }
    header:before {
        top: 0;
        background-color: rgba(255,255,255, 0.75);
    }
    header:after {
        bottom: 0;
        background-color: #f9cc00;
    }
    header img:not(.small_logo) {
        position: absolute;
        min-width: 100%;
        min-height: 750px;
        height: auto;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    header label {
        position: absolute;
        left: 0;
        bottom: 150px;
        width: 100%;
        max-width: 900px;
        z-index: 2;
        font-size: 40px;
        line-height: 50px;
        padding: 15px 15px 15px 150px;
        color: #fff;
        text-transform: uppercase;
    }
    header label img {
        position: absolute;
        top: 50%;
        right: -160px;
        width: 190px;
        margin-top: -95px;
    }


/*  =================================================================
    6.0 Nav
================================================================== */
/*  6.1 standard nav rulings
    -------------------------------------------------------------- */
    nav {
        position: fixed;
        z-index: 999;
        height: 140px;
        background-color: #fff;
        left: 0;
        top: 0;
    }
    nav .row {
        padding: 0;
        margin-bottom: 0;
    }
    nav .logo-container,
    nav .phone-container {
        position: relative;
        float: left;
        width: 235px;
        height: 140px;
    }
    nav .logo-container img {
        position: absolute;
        width: auto;
        height: 235px;
        margin: 0;
        left: 0;
        top: 0;
        -webkit-transition: height 200ms ease-in;
        -ms-transition: height 200ms ease-in;
        transition: height 200ms ease-in;
    }

    .scrolled nav .logo-container img {
        height: 140px;
    }

    nav .phone-container {
        float: right;
        width: 190px;
        padding-top: 25px;
    }
    nav .phone-container a {
        display: block;
        padding: 5px 10px;
        margin-bottom: 10px;
        line-height: 30px;
        font-size: 18px;
    }
    nav .phone-container img {
        float: left;
        width: 25px;
        margin-right: 5px;
    }
    nav .phone-container .logos img {        
        width: auto;
        height: 33px;
    }
    nav .nav-container {
        float: left;
        width: 100%;
        max-width: calc(100% - 235px);
    }
    nav ul {
        width: 100%;
        max-width: calc(100% - 190px);
        float: left;
        text-align: center;
        font-size: 0;
        line-height: 0;
        margin-top: 77px;
    }
    nav ul li {
        display: inline-block;
        padding: 0 20px;
    }
    nav ul li a {
        display: block;
        font-size: 20px;
        line-height: 31px;
        color: #4a4a49;        
        border-bottom: 2px solid transparent;
        -webkit-transition: border 300ms ease-in;
        -ms-transition: border 300ms ease-in;
        transition: border 300ms ease-in;
    }
    nav ul li a:active, nav ul li a:visited {
        color: #4a4a49;
    }
    nav ul li a:hover,
    nav ul li.current a {
        color: #4a4a49;
        border-bottom-color: #f9cc00;
    }


/*  =================================================================
    7.0 General
================================================================== */
/*  7.1 Buttons
    -------------------------------------------------------------- */
    .button, button {
        display: inline-block;
        margin: 0;
        font-size: 17px;
        line-height: 21px;
        padding: 12px 20px;
        width: auto;
        -webkit-transition: all 300ms ease-in;
        -ms-transition: all 300ms ease-in;
        transition: all 300ms ease-in;
    }
    .button.wired, button.wired {
        border: 1px solid #fff;
        font-size: 30px;
        line-height: 36px;
        padding: 12px 50px;
    }

/*  7.2 Images
    -------------------------------------------------------------- */
    .logo {
        max-width: 450px;
    }

/*  7.3 Headings + text
    -------------------------------------------------------------- */
    h2, h3 {
        text-transform: uppercase;
        font-size: 30px;
        color: #f9cc00;
        line-height: 40px;
        letter-spacing: 1px;
        margin-bottom: 20px;
    }
    h2 img {
        max-width: 70px;
        float: left;
    }
    h2.largeTxt {
        display: block;
        margin: 0 auto;
        margin-bottom: 50px;
        max-width: 600px;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
    }

    p, li {
        font-size: 18px;
        line-height: 28px;
        text-align: justify;
    }
    .row, p:not(:last-of-type), ul:not(:last-of-type) {
        margin-bottom: 32px;
    }
    .row.noMargin {
        margin-bottom: 0;
    }

    .cta {
        margin: 36px auto;
        position: relative;
        width: 100%;
        max-width: 600px;
        border: 1px solid #ec6b18;
        padding: 20px 35px;
        padding-bottom: 75px;
        color: #ec6b18;
    }
    .cta p {
        text-align: left;
        font-size: 30px;
        line-height: 40px;
    }
    .cta img {
        max-width: 36px;
        float: left;
    }
    .cta span {
        position: absolute;
        right: 35px;
        bottom: 20px;
        font-size: 24px;
        line-height: 36px;
    }
    .highlight {
        padding: 25px 40px 35px;
        margin-bottom: 50px;
    }
    .highlight p,
    .highlight a {
        font-weight: bold;
        color: #fff;
    }
    .highlight p {
        font-size: 32px;
        line-height: 44px;
        margin-bottom: 35px;
    }
    .highlight a:hover {
        color: #164997;
        border-color: #164997;
    }
    .highlight img {
        position: absolute;
        right: 20px;
        bottom: 20px;
        max-width: 170px;
    }
    
    .address img {
        max-width: 70%;
        display: block;
        margin: 50px 0 10px;
    }
    .address p {
        text-align: left;
        padding: 0 15px;
    }
    .address .logos img {
        width: auto;
        max-width: none;
        height: 55px;
        display: block;
        margin: 0;
        float: left;
    }
    .address .logos img:first-of-type {
        margin-left: -12px;
    }

    .padBtm {
        padding-bottom: 20px;
    }

/*  7.4 Forms
    -------------------------------------------------------------- */
    .cForm input, .cForm textarea, .cForm button {
        width: 100%;
        height: 50px;
        margin-bottom: 30px;
        line-height: 30px;
        padding: 10px 20px;
        background-color: #ececec;
        font-size: 24px;
        color: #4a4a49;
        border: 2px solid transparent
    }
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        opacity: 1;
    }
    ::-moz-placeholder { /* Firefox 19+ */
        opacity: 1;
    }
    :-ms-input-placeholder { /* IE 10+ */
        opacity: 1;
    }
    :-moz-placeholder { /* Firefox 18- */
        opacity: 1;
    }
    .cForm textarea {
        height: 200px;
        resize: none;
    }
    .cForm button {
        display: inline-block;
        color: #fff;
        font-weight: bold;
        width: auto;
        background-color: #000;
    }
    .parsley-errors-list {
        position: absolute;
        z-index: 2;
        right: 0;
        top: 0;
        width: auto;
        margin: 0;
        padding: 0 10px 0 10px;
        list-style-type: none;
        opacity: 0;
        color: #fff;
        -webkit-transition: all .3s ease-in;
        transition: all .3s ease-in;
        background-color: #c72929;
        height: 50px;
    }
    .parsley-errors-list.filled {
        opacity: 1;
    }
    .parsley-errors-list li {
        font-size: 12px;
        font-weight: 600;
        text-align: right;
        line-height: 50px;
    }
    input.parsley-error, textarea.parsley-error {
        border-color: #c72929;
    }

/*  7.5 Footer
    -------------------------------------------------------------- */
    footer {
        border-top: 1px solid #efefef;
        padding: 10px 0;
    }
    footer .row {
        margin-bottom: 0;
    }
    footer p {
        font-size: 16px;
    }

/*  Start of xlarge screens
    -------------------------------------------------------------- */
@media only screen and (max-width: 1440px) {

/*  =================================================================
    5.0 Header
================================================================== */
    header {
        height: 750px;
        margin-bottom: 30px;
    }
    header label {
        bottom: 100px;
        max-width: 720px;
        font-size: 30px;
        line-height: 40px;
        padding: 10px 15px 10px 150px;
    }
    header label img {
        right: -135px;
        width: 160px;
        margin-top: -80px;
    }
}


/*  Start of xlarge screens
    -------------------------------------------------------------- */
@media only screen and (max-width: 1280px) {
/*  =================================================================
    6.0 Nav
================================================================== */
/*  6.1 standard nav rulings
    -------------------------------------------------------------- */
    nav .row {
        padding-left: 20px;
        padding-right: 20px;
    }
} 


/*  Start of xlarge screens
    -------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
    
    .row {
        max-width: 1024px;
    }
    
/*  =================================================================
    6.0 Nav
================================================================== */
/*  6.1 standard nav rulings
    -------------------------------------------------------------- */
    nav ul li a {
        font-size: 15px;
    }

/*  =================================================================
    5.0 Header
================================================================== */
    header {
        height: 550px;
        margin-bottom: 20px;
    }
    header img:not(.small_logo) {
        min-height: 550px;
    }
    header label {
        max-width: 630px;
        padding-left: 75px;
    }
    
    
/*  =================================================================
    7.0 General
================================================================== */
/*  7.3 Headings + text
    -------------------------------------------------------------- */
    h2, h3 {
        font-size: 26px;
        margin-bottom: 10px;
    }
    h2.largeTxt {
        font-size: 30px;
    }
    
    p, li {
        font-size: 18px;
        line-height: 26px;
    }
    .highlight p {
        font-size: 24px;
        line-height: 44px;
        margin-bottom: 44px;
    }
}

/*  Start of xlarge screens
    -------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    
    .row {
        max-width: 768px;
    }
    

/*  =================================================================
    5.0 Header
================================================================== */
    header {
        height: 350px;
    }
    header img:not(.small_logo) {
        min-height: 350px;
    }
    header label {
        max-width: 450px;
        font-size: 20px;
        line-height: 35px;
        padding-left: 55px;
    }
    header label img {
        right: -120px;
        width: 140px;
        margin-top: -70px;
    }

/*  =================================================================
    6.0 Nav
================================================================== */
/*  6.1 standard nav rulings
    -------------------------------------------------------------- */
    nav .logo-container {
        width: 150px;
    }
    nav .logo-container img {
        height: 145px;
    }
    nav .nav-container {
        max-width: calc(100% - 150px);
    }
    nav ul {
        max-width: calc(100% - 175px);
    }
    nav ul li {
        padding: 0 10px;
    }
    nav .phone-container {
        width: 175px;
    }
    nav .phone-container a {
        line-height: 24px;
        font-size: 16px;
    }
    nav .phone-container img {
        width: auto;
        height: 24px;
    }
    nav .phone-container .logos img {
        height: 30px;
    }
    
/*  =================================================================
    7.0 General
================================================================== */
/*  7.1 Buttons
    -------------------------------------------------------------- */
    .button.wired, button.wired {
        font-size: 18px;
        line-height: 22px;
        padding: 8px 30px;
    }
    
/*  7.3 Headings + text
    -------------------------------------------------------------- */
    h2, h3 {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 5px;
    }
    h2 img {
        max-width: 60px;
    }
    h2.largeTxt {
        font-size: 26px;
        line-height: 35px;
        max-width: 450px;
    }
    
    p, li {
        font-size: 16px;
        line-height: 24px;
    }
    .cta p {
        font-size: 20px;
    } 
    
    .highlight p {
        font-size: 20px;
    } 
    .highlight img {
        right: 10px;
        bottom: 10px;
        max-width: 100px;
    }
    
    footer p {
        font-size: 14px;
    }

/*  7.4 Forms
    -------------------------------------------------------------- */
    .cForm input, .cForm textarea, .cForm button {
        height: 40px;
        margin-bottom: 20px;
        line-height: 20px;
        font-size: 16px;
        border-width: 1px;
    }
    .cForm textarea {
        height: 160px;
    }
    .parsley-errors-list {
        height: 40px;
    }
    .parsley-errors-list li {
        line-height: 40px;
    }  
}

/*  Start of xsmall screens
    -------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
/*  =================================================================
    5.0 Header
================================================================== */
    header {
        height: 175px;
    }
    header:before,
    header:after {
        height: 20px;
    }
    header img:not(.small_logo) {
        min-height: 175px;
    }
    header label {
        max-width: calc(100% - 75px);
        font-size: 12px;
        line-height: 20px;
        padding: 5px 5px 5px 20px;
        bottom: 45px;
    }
    header label img {
        right: -50px;
        width: 60px;
        margin-top: -30px;
    }

/*  =================================================================
    6.0 Nav
================================================================== */
/*  6.1 standard nav rulings
    -------------------------------------------------------------- */
    nav .row {
        margin: 0;
        height: 140px;
        padding: 0 10px;
    }
    nav .logo-container {
        width: 125px;
        height: 105px;
    }
    nav .logo-container img,
    .scrolled nav .logo-container img {
        height: 125px;
    }
    nav .phone-container {
        position: absolute;
        right: 10px;
        bottom: 10px;
        height: 42px;
        line-height: 32px;
        font-size: 18px;
        width: 167px;
        padding: 0;
        margin: 0;
    }
    nav .phone-container img {
        max-width: 24px;
    }
    nav .nav-container {
        max-width: calc(100% - 135px);
        margin-left: 10px;
    }
    nav ul {
        margin-top: 12px;
        text-align: left;
        max-width: 100%;
    }
    nav ul li {
        padding: 0;
        width: 100%;
        float: left;
        display: block;
    }
    nav ul li a {
        font-size: 13px;
        line-height: 20px;
    }
    
/*  =================================================================
    7.0 General
================================================================== */
/*  7.1 Buttons
    -------------------------------------------------------------- */
    .button.wired, button.wired {
        position: relative;
        z-index: 1;
    }
    
/*  7.3 Headings + text
    -------------------------------------------------------------- */
    h2, h3 {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 5px;
    }
    h2 img {
        max-width: 40px;
        float: none;
        display: block;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    h2.largeTxt {
        font-size: 20px;
        line-height: 30px;
        max-width: 300px;
    }
    
    p, li {
        font-size: 14px;
        line-height: 20px;
    }
    #dakrenovatie p:first-of-type {
        margin-bottom: 24px;
    }
    
    .cta {
        margin-bottom: 0;
    }
    .cta p {
        line-height: 24px;
    } 
    
    .highlight{
        padding-bottom: 75px;
    }
    .highlight .col {
        padding: 0;
    }
    .highlight p {
        line-height: 30px;
        margin-bottom: 24px;
    } 
    .highlight img {
        right: 10px;
        bottom: 10px;
        max-width: 100px;
    }
    
    .address img {
        margin-top: 0;
    }
    
    footer .col {
        padding: 0 10px;
    }
    footer p {
        text-align: left;
    }

/*  7.4 Forms
    -------------------------------------------------------------- */
    .cForm input, .cForm textarea, .cForm button {
        height: 40px;
        margin-bottom: 20px;
        line-height: 20px;
        font-size: 16px;
        border-width: 1px;
    }
    .cForm textarea {
        height: 160px;
    }
    .parsley-errors-list {
        height: 40px;
    }
    .parsley-errors-list li {
        line-height: 40px;
    }  
}