:root {
    --color_taupe: #90655B;
    --color_black: #1D1D18;
}

.main_title {
    font-family: caslonian-std-l, serif;
    font-size: 2.5em; /*70/16*/
    font-weight: 700;
    line-height: 1.1em;
}

@media( max-width: 800px ) {
    .main_title {
        font-size: 1.875em;
    }
}

.pf_btn {
    a {
        background-color: var(--color_taupe);
        border-radius: 6px;
        color: #fff;
        display: inline-block;
        font-weight: 700;
        padding: .9em 1.4em;
        text-decoration: none;
        transition: .3s;
        &:hover {
            color: #fff;
            transform: translateY(-.5em);
        }
    }
}


html {
    background: var(--color_black);
	box-sizing: border-box;
    color: var(--color_black);
    font-family: 'gotham', sans-serif;
	font-size: 1em;
	line-height: 1.37em;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
*, *:before, *:after {
	box-sizing: inherit;
}

.accent_font {
    font-family: caslonian-std-l, serif;
}

@media( max-width: 800px ) {
    p {
        font-size: 0.875em;
    }
}

a {
	color: var(--color_taupe);
	transition: .3s;
	&:hover {
		color: var(--color_taupe);
	}
}

.inner {
	margin: 0 auto;
	max-width: 1525px;
	padding: 0 90px;
}

@media( max-width: 980px ) {
    .inner {
        padding: 0 25px;
    }
}

.toggle {
    display: none;
}

.mobile_menu {
    display: none;
}

.logo_header {
    background: #fff;
    height: 100px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    .inner {
        align-items: center;
        display: flex;
        justify-content: space-between;
    }
}

.logo {
    max-width: 200px;
    width: 100%;
    img {
        display: block;
        height: auto;
        width: 100%;
    }
}

.main_menu {
    flex: 1 1 100%;
    ul {
    align-items: center;
        display: flex;
        justify-content: flex-end;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    li {
        padding: 0 1.1em;
        &:last-child {
            padding-right: 0;
        }
        &.pf_btn {
            padding-left: 5em;
            a {
                color: #fff;
            }
        }
    }
    a {
        color: var(--color_black);
        display: inline-block;
        text-decoration: none;
        transition: .3s;
        &:hover {
            transform: translateY(-3px);
        }
    }
}

@media( max-width: 980px ) {
    .main_menu {
        & li {
            &.pf_btn {
                padding-left: 1.1em;
            }
        }
    }
}

@media( max-width: 800px ) {
    .main_menu {
        & li {
            display: none;
            &.pf_btn {
                display: flex;
                font-size: .875em;
                padding-left: 1.1em;
            }
        }
    }
}

.pf_intro_header {
    background-color: #5a5a5a;
    background-image: url(img/gastro_header.jpg);
    background-position: center;
    background-size: cover;
    display: flex;
    font-family: caslonian-std-l, serif;
    font-weight: 700;
    min-height: 890px;
    padding-bottom: 170px;
    padding-top: 100px;
    position: relative;
    text-align: center;
    z-index: 1;
    &:before {
        background-image: url(img/next_icon.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        bottom: 45px;
        content: ' ';
        height: 85px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 8px;
    }
    .inner {
        align-content: center;
        align-items: center;
        color: #fff;
        display: flex;
    }
    h2 {
        font-size: 5.9em; /* 95/16 */
        line-height: 1em;
    }
}

@media( max-width: 800px ) {
        .pf_intro_header {
            h2 {
                font-size: 2.5em;
            }
        }
}


.pf_product_overview {
    background-color: var(--color_black);
    color: #fff;
    padding-bottom: 4.5em;
    padding-top: 5.5em;
    .intro_text {
        margin: 0 auto 2.75em;
        max-width: 800px;
        text-align: center;
    }
    h2 {
        margin-top: .4em;
    }
}

.product_filters {
    margin-bottom: 4em;
    ul {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        list-style-type: none;
        justify-content: center;
        margin: 0;
        padding: 0;
    }
    a {
        background-color: #fff;
        color: var(--color_taupe);
        white-space: nowrap;
        &:hover {
            color: var(--color_taupe);
        }
    }
}

@media( max-width: 570px ) {
    .product_filters {
        a {
            font-size: 0.875em;
        }
    }
}

.product_overview {
    padding-bottom: 2.8em;
    h3 {
        font-size: 1.37em;
        margin-bottom: 1.4em;
    }
    ul {

        display: grid;
        gap: 50px 20px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        list-style-type: none;
        margin: 0;
        padding: 0;
        li {
            overflow: hidden;
            padding-bottom: 2em;
            position: relative;
            .pf_product_img {
                align-items: center;
                background-image: url(img/gastrobar_background.jpg);
                background-position: center;
                background-size: cover;
                border-radius: 5px;
                display: flex;
                justify-content: center;
                overflow: hidden;
                padding-top: 94%;
                position: relative;
                width: 100%;
                &.has_packshot {
                    cursor: pointer;
                    &:hover {
                        .pf_product_packshot {
                            top: 0;
                        }
                        > img {
                            opacity: 0;
                        }
                    }
                }
                .vega {
                    background-image: url(img/vega.svg);
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;
                    height: 62px;
                    position: absolute;
                    text-indent: -9999px;
                    top: 15px;
                    right: 15px;
                    width: 62px;
                    z-index: 2;
                }
                img {
                    display: block;
                    height: auto;
                    left: 0;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    transition: .3s;
                    width: 100%;
                }
                .pf_product_packshot {
                    height: 100%;
                    left: 0;
                    position: absolute;
                    top: 100%;
                    transition: .3s;
                    width: 100%;
                    z-index: 3;
                }
            }
            h3 {
                font-size: 1em;
                margin-bottom: 0;
            }
            p {
                margin: .5em 0;
                &.content {
                    padding-left: 30px;
                    &:before {
                        background: url(img/package.svg);
                        background-size: contain;
                        background-position: center;
                        background-repeat: no-repeat;
                        content: ' ';   
                        height: 18px;   
                        left: 0;
                        position: absolute;
                        top: 0;
                        width: 18px;
                    }
                    bottom: 0;
                    left: 0;
                    position: absolute;
                    width: 100%;
                }
            }
        }
    }
}

@media( max-width: 980px ) {
    .product_overview {
        ul {
            grid-template-columns: 1fr 1fr;
        }
    }
}

@media( max-width: 450px ) {
    .product_overview {
        ul {
            grid-template-columns: 1fr;
        }
    }
}

.pf_intro_text {
    background-color: var(--color_black);
    color: #fff;
    text-align: center;
    padding-bottom: 5.6em;
    padding-top: 6.3em;
    .inner {
        padding: 0 15px;
        max-width: 850px;
    }
    h2 {
        margin: 0;
    }
    .pf_btn {
        margin-top: 2em;
    }
}

@media( max-width: 800px ) {
    .pf_intro_text {
        padding: 2.5em;
        padding-top: 3.2em;
    }
}

.brand_features {
    background-color: var(--color_taupe);
    color: #fff;
    position: relative;
    &:before {
        background-color: var(--color_black);
        background-image: url(img/brand_features_illustration_web.jpg);
        background-position: center;
        background-size: cover;
        content: ' ';
        height: 100%;
        left: 0;
        position: absolute;
        width: 50%;
        z-index: 1;
    }
    .quality_cuisine {
        background-image: url(img/quality_quisine.svg);
        background-position: center;
        background-repeat: no-repeat;
        height: 200px;
        left: 50px;
        position: absolute;
        text-indent: -9999px;
        top: -80px;
        width: 200px;
        z-index: 2;
    }
    .inner {
        display: flex;
        justify-content: flex-end;
        position: relative;
        z-index: 3;
    }
    .text {
        flex: 0 0 49%;
        padding: 4em 0 6em 90px;
        .features {
            display: grid;
            gap: 75px 30px;
            grid-template-columns: 1fr 1fr;
            list-style-type: none;
            margin: 95px 0 0 0;
            padding: 0;
            li {
                position: relative;
                &:before {
                    background-image: url(img/chef_hat.svg);
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: contain;
                    content: ' ';
                    height: 30px;
                    left: 0;
                    position: absolute;
                    top: -44px;
                    width: 30px;
                }
            }
            h3 {
                font-size: 1em;
                line-height: 1em;
                margin: 0 0 .5em;
            }
            p {
                margin: 0 0 .5em;
            }
        }
    }
}

@media( max-width: 980px ) {
    .brand_features {
        .text {
            .features {
                grid-template-columns: 1fr;
            }
        }
    }
}

@media( max-width: 800px ) {
    .brand_features {
        &:before {
            height: 345px;
            width: 100%;
        }
        .text{
            flex: 0 0 100%;
            padding: 362px 0 35px 0;
            .features {
                gap: 0 20px;
                margin-top: 48px;
                li {
                    margin-bottom: 5px;
                    padding-left: 46px;
                    &:before {
                        left: 0;
                        top: 0;
                    }
                }
            }
        }
        .quality_cuisine {
            display: none;
        }
    }
}

.product_categories_banner {
    background-color: var(--color_black);
    color: #fff;
    padding-bottom: 6em;
    padding-top: 6em;
    text-align: center;
    .inner {
        max-width: 1660px;
        overflow: hidden;
        padding: 0;
        width: 100%;
    }
    .product_cats {
        display: flex;
        justify-content: space-between;
        list-style-type: none;
        margin: 0 -10px 1.4em;
        padding: 0;
        h2 {
            margin-bottom: 1em;
        }
        li {
            flex: 0 0 32.7%;
            h3 {
                font-size: 1.37em;
                margin-bottom: .18em;
            }
        }
        .img {
            align-items: center;
            background-color: var(--color_taupe);
            background-image: url(img/gastrobar_background.jpg);
            background-position: center;
            background-size: cover;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            padding-top: 100%;
            position: relative;
            width: 100%;
            img {
                display: block;
                height: auto;
                left: 0;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 100%;
            }
        }
        .text {
            margin: 0 40px;
        }
    }
}

@media( max-width: 1070px ) {
    .product_categories_banner {
        padding-bottom: 1.3em;
    }
}

@media( max-width: 650px ) {
    .product_categories_banner {
        .inner {
            max-width: 510px;
        }
        .product_cats {
            flex-wrap: wrap;
            li {
                flex: 0 0 100%;
                margin: 0 0 20px 0;
                h3 {
                    font-size: 1.225em;
                }
            }
        }
    }
}

.pf_customer_references {
    background: var(--color_black);
    color: #fff;
    overflow: hidden;
    padding-bottom: 10.5em;
    padding-top: 2em;
    position: relative;
    .inner {
        position: relative;
    }
    h2 {
        font-size: 1.375em;
        font-weight: 400;
        margin: 0;
    }
    .slider_container {
        margin: 0 auto;
        margin-left: 240px;
        max-width: 1900px;
        top: -59px;
        position: absolute;
        z-index: 1;
    }
    .carousel {
        list-style-type: none;
        margin: 0 0 112px 0;
        padding: 0;
        li {
            display: inline-block;
            margin: 0 10px;
        }
        img {
            height: 150px;
            /*filter: brightness(0) invert(1);*/
            width: auto;
        }
    }
}

@media( max-width: 1070px ) {
    .pf_customer_references {
        padding-bottom: 0;
        h2 {
            font-size: 1.125em;
            margin: 0 0 1.3em;
            text-align: center;
        }
        .slider_container {
            left: auto;
            margin: 0 0 0 -23px;
            position: static;
            top: auto;
        }
    }
}


.pf_contact {
    background: var(--color_black);
    color: var(--color_black);
    padding-bottom: 7.8em;
    padding-top: 6em;
    h2 {
        margin: 0 0 .3em;
        text-align: center;
    }
    .contact_form {
        background-image: url(img/gastrobar_background.jpg);
        background-position: center;
        background-size: cover;
        border-radius: 5px;
        margin: 0 auto;
        max-width: 980px;
        padding: 3em 3em .2em;
        
    }
}

@media( max-width: 1070px ) {
    .pf_contact {
        margin-top: -44px;
        padding-bottom: 3em;
        padding-top: 0;
        position: relative;
        z-index: 2;
        .contact_form {
            padding: 3em 1.5em .2em;
        }
    }
}

.pf_form {
    label {
        font-family: 'gotham', sans-serif;
        font-size: 1em;    
        font-weight: 700;
    }
    .frm_required {
        display: none;
    }
    .half {
        grid-column: span 6;
    }
    .pct25 {
        grid-column: span 3;
    }
    label {
        color: var(--color_black) !important;
        font-family: 'gotham', sans-serif !important;
        font-weight: 700 !important;
    }
    input[type=text], input[type=email], input[type=password], textarea {
        background: transparent;
        border: 1px solid var(--color_taupe);
        border-radius: 5px;
        font-family: 'gotham', sans-serif;
        font-size: 1em;
        padding: 1em 1.3em;
        &::placeholder {
            color: var(--color_taupe);
        }
    }
    .vertical_radio {
        margin-bottom: 0 !important;
        label {
            font-weight: 400;
        }
    }
    .frm_submit {
        justify-content: center;
        button {
            background-color: var(--color_taupe) !important;
            border-radius: 6px !important;
            border: none  !important;
            box-shadow: none !important;
            color: #fff !important;
            display: inline-block !important;
            font-family: 'gotham', sans-serif !important;
            font-size: 1em !important;
            font-weight: 700 !important;
            padding: .9em 1.4em !important;
            text-decoration: none !important;
            transition: .3s !important;
            &:hover {
                color: #fff !important;
                transform: translateY(-.5em) !important;
            }
        }
    }
}

.main_footer {
    background-image: url(img/gastrobar_background.jpg);
    background-position: center;
    background-size: cover;
    padding-bottom: 2.3em;
    padding-top: 4em;
    .inner {
        align-items: center;
        display: flex;
        justify-content: space-between;
    }
    h2 {
        margin: 0;
    }
    p {
        margin: 1.7em 0 0;
    }
    strong {
        color: var(--color_taupe);
        font-weight: 700;
    }
}

@media( max-width: 1200px ) {
    .main_footer {
        padding-top: 2.8em;
        .inner {
            flex-wrap: wrap;
        }
        .main_menu {
            ul {
                flex-wrap: wrap;
                justify-content: center;
                li {
                    flex: 0 0 100%;
                    font-size: 0.875em;
                    text-align: center;
                    padding: 0;
                    &:last-child {
                        margin-top: 2em;
                    }
                }
            }
        }
        .footer_meta_menu {
            margin-top: 2.2em;
            padding-top: 0;
            ul {
                justify-content: center;
            }
        }
        .logo_address {
            display: flex;
            flex: 0 0 100%;
            flex-wrap: wrap;
            justify-content: center;
            .logo {
                flex: 0 0 100%;
                margin: 0 0 .5em;
                max-width: 350px;
            }
            p {
                flex: 0 0 100%;
                text-align: center;
            }
        }
        .menu_conditions {
            flex: 0 0 100%;
            margin-top: 1.8em;
        }
    }
}

@media( max-width: 800px ) {
    .main_footer {
        .main_menu {
            li {
                display: inline-block;
            }
        }
    }
}

@media( max-width: 1070px ) {
    .pf_form {
        label {
            font-size: 0.875em !important;
        }
        input {
            font-size: 0.875em !important;
        }
        textarea {
            font-size: 0.875em !important;
        }
        .half {
            grid-column: span 12;
        }
        .zip {
            grid-column: span 6;
        }
        .city {
            grid-column: span 6;
        }
        .frm_submit {
            button {
                font-size: 14px !important;
            }
        }
    }
}

.footer_meta_menu {
    margin: 2.8em 0 0 0;
    ul {
        align-items: center;
        display: flex;
        justify-content: flex-end;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    li {
        padding: 0 15px;
        &:last-child {
            padding-right: 0;
        }
    }
    a {
        color: var(--color_black);
        font-size: 0.8em;
        opacity: .7;
        text-decoration: none;
    }
}