body {
    background: #F4A01D;
    color: #8C2D2D;
    font-family: new-spirit, serif;
    font-style: normal;
    font-weight: 800;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    padding: 0;
}
.container {
    position: relative;
}
.placeholder {
    position: absolute;
    z-index: 2;
    opacity: 0.5;
    max-width: 1280px;
    display: none;
}
.placeholder-2 {
    position: absolute;
    z-index: 2;
    opacity: 0.5;
    max-width: 390px;
    display: none;
}
@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
    .visible-xs {
        display: block !important;
    }
}
@media (min-width: 768px) {
    .hidden-xs {
        display: block !important;
    }
    .visible-xs {
        display: none !important;
    }
}


/* --- header --- */

header {
    margin-bottom: 0;
    padding: 44px 0 78px;
    position: relative;
}
header h1 {
    position: absolute;
    text-indent: -9999px;
}

    /* --- header breakpoints --- */

    @media (max-width: 767px) {
        header {
            padding-top: 35px;
            padding-bottom: 144px;
        }
        header .logo {
            max-width: 245px;
        }
    }

/* --- top nav --- */

header .topnav {
    margin-bottom: 82px;
}
header .topnav a,
header .topnav button {
    background: none;
    border: 0;
    color: #1D1D1B;
    font-family: "alexander-quill", sans-serif;
    font-size: 24px;
    margin: 0px 17px;
    padding: 0;
    position: relative;
    text-decoration: none;
}
header .topnav a::before,
header .topnav button::before {
    background-color: #1D1D1B;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    width: 100%;
}
header .topnav a:hover::before,
header .topnav button:hover::before  {
    transform: scaleX(1);
}

    /* --- intro breaking points --- */

    @media (max-width: 767px) {
        header .topnav {
            margin-bottom: 106px;
        }
        header .topnav a {
            font-size: 20px;
            margin: 0px 8px;
        }
    }


/* --- content --- */


h2 {
    font-size: 72px;
    font-weight: 400;
    margin-bottom: 50px;
    font-family: "alexander-quill", sans-serif;
}

.intro {
    background-color: #8C2D2D;
    background-image: url(img/bg-schnitzel.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    color: #FFEDCD;
    padding: 355px 0 418px; 
    text-align: center;
}
.intro .container {
    padding: 0 53px;
}
.intro p {
    font-family: new-spirit, serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 23px;
    margin-bottom: 23px;
    margin-left: auto;
    margin-right: auto;
    max-width: 450px;
}
.intro h2 {
    font-size: 71px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 72px;
    margin-bottom: 32px;
    margin-left: auto;
    margin-right: auto;
    max-width: 560px;
}
.intro img {
    margin-bottom: 50px;
}
.intro .text-center {
    margin-left: auto;
    margin-right: auto;
}

    /* --- intro breaking points --- */

    @media (max-width: 767px) {
        .intro {
            background-size: 192%;
            padding: 225px 0 225px;
        }
        .intro .container {
            padding: 0 12px;
        }
        .intro h2 {
            font-size: 56px;
            line-height: 56px;
            max-width: 100%;
        }   
    }

    .flexslider {
        border: 0;
        margin-bottom: 0;
    }
    .flex-direction-nav a.flex-next:before {
        background-image: url(img/arrow-right.svg);
        background-position: center center;
        background-repeat: no-repeat;
        content: "";
        display: block;
        height: 50px;
        text-decoration: none;
        text-indent: -9999px;
        width: 50px;
    }
    .flex-direction-nav a:before {
        background-image: url(img/arrow-left.svg);
        background-position: center center;
        background-repeat: no-repeat;
        content: "";
        display: block;
        height: 50px;
        text-decoration: none;
        text-indent: -9999px;
        width: 50px;
    }

    /* --- slides breakpoints --- */


.menus {
    background: #F4A01D;
    padding: 85px 0 89px;
    text-align: center;
}
.menus .container {
    padding: 0 90px;
}
.menus h2 {
    margin-bottom: 56px;
}
.menus .text-center {
    margin-left: auto;
    margin-right: auto;
}
.menus p {
    font-family: new-spirit, serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 23px;
    margin-bottom: 56px;
    margin-left: auto;
    margin-right: auto;
    max-width: 450px;
}
.menus a {
    display: block;
    transition: all 0.3s ease;
    text-decoration: none;
}
.menus a h3 {
    color: #8C2D2D;
    font-family: "alexander-quill", sans-serif;
    font-size: 31px;
    font-weight: 400;
    padding-top: 28px;
}
.menus a:hover {
    transform: translate3d(0, -10px, 0);
}
.menus img {
    max-width: 100%;
}

    /* --- menus breakpoints --- */

    @media (max-width: 767px) {
        .menus {
            padding-top: 101px;
            padding-bottom: 50px;
        }
        .menus .container {
            padding: 0 58px;
        }
        .menus h2 {
            font-size: 48px;
            margin-bottom: 78px;
        }
        .menus a h3 {
            padding-top: 23px;
        }
        .menus a {
            margin-bottom: 55px;
        }
    }

/* --- footer --- */

footer {
    background-color: #8C2D2D;
    color: #FFE5B6;
    font-size: 24px;
    padding: 107px 0;
    position: relative;
}
footer .container {
    padding: 0 26px;
}
footer p {
    margin-bottom: 43px;
    text-align: left;
}
footer p.address {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
}
footer p.opening-hours,
footer p.contact,
footer p.contact a {
    color: #FFE5B6;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
}
footer p.opening-hours {
    margin-bottom: 23px;
}
footer p.contact {
    margin-bottom: 34px;
}
footer .friends {
    margin-top: 125px;
    margin-bottom: 51px;
}
footer .friends a {
    display: inline-block;
    margin: 0 12px 30px;
    transition: all 0.3s ease;
}
footer .friends a img {
    height: 60px;
}
footer .friends a:hover {
    transform: translate3d(0, -5px, 0);
}
footer .friends h3 {
    font-family: "alexander-quill", sans-serif;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 54px;
}
footer .copyright {
    display: block;
    font-family: "alexander-quill", sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}
footer img.footer-logo {
    max-width: 330px;
}
footer img.icon {
    height: 36px;
}

    /* --- footer breakpoints --- */

    @media (max-width: 767px) {
        footer {
            padding-top: 112px;
            padding-bottom: 30px;
        }
        footer .text-end,
        footer .text-start,
        footer p.opening-hours,
        footer p.contact,
        footer p.contact a,
        footer p {
            text-align: center !important;
        }
        footer p.contact {
            margin-bottom: 26px;
        }
        footer .friends {
            margin-top: 60px;
        }
        footer .friends a {
            display: inline-block;
            margin: 0 20 20px;
        }
        footer .friends h3 {
            margin-bottom: 21px;
            font-size: 18px;
        }
        footer .friends img {
            max-width: 90%;
        }
        footer .copyright {
            bottom: auto;
            display: block;
            font-size: 12px;
            left: auto;
            margin-top: 0;
            position: relative;
            text-transform: uppercase;
        }
    }
    @media (max-width: 767px) {
        footer img.footer-logo {
            max-width: 269px;
            margin-bottom: 90px;
        }
    }