/* Start:/local/resources/blanks/production_olives/style.css?177015626515401*/
body {
    background-color: #fff;
}
.header-olives {
    background-color: #fff;
}
.olives-title {
    padding: 0;
    .f-h1 {
        font-size: clamp(40px, calc(40px + (112 - 40) * ((100vw - 768px) / (1920 - 768))), 112px);
        text-align: center;
        color: #fff;
    }
    .block--wrapper {
        position: relative;
        padding: var(--g-content-xl) var(--container-padding);
    }
    .olives-title--video {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }
    .olives-title--mask {
        position: absolute;
        width: 0;
        height: 0;
        top: 0;
        left: 0;
    }
    .banner {
        padding: 0;
        aspect-ratio: 1800 / 964;
        width: 100%;
        height: auto;
        display: grid;
        place-items: center;
        justify-content: center;
    }
    @media (min-width: 1024px) {
        .banner {
            padding-right: 0;
    }}
    .olives-title--button {
        position: absolute;
        bottom: 5%;
        left: 70%;
        z-index: 5;
        aspect-ratio: 418 / 410;
        height: 35%;
        width: auto;
        display: grid;
        place-items: center;
        cursor: pointer;
        span {
            position: relative;
            z-index: 2;
            text-transform: uppercase;
            color: #fff;
            font-size: clamp(8px, calc(8px + (24 - 8) * ((100vw - 768px) / (1920 - 768))), 24px);
            font-weight: 500;
            padding-bottom: 2em;
        }
        svg {
            width: 100%;
            height: 100%;
            z-index: 1;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
}



.block_image_text-wide {
    position: relative;
    background-color: #B4A238;
    &.block_image_text-wrapper_bg-dark{
        padding: 0;
    }
    .block--wrapper {
        gap: 0;
        padding: 0;
        @media (min-width: 992px) {
            grid-template-columns: 50% 50%;
        }
    }
    .block--content {
        padding: var(--g-vertical-xl) var(--container-padding) 0 var(--g-vertical-xl)!important;
        backdrop-filter: blur(100px);
        min-height: calc(100vh - var(--headerHeight, 104px));
        background-color: #B4A238;
        @media (min-width: 992px) {
            background-color: #0000004D;
        }
    }
    .block--image {
        position: static;
    }
    .block--image {
        img,
        video {

            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            @media(min-width: 1024px) {
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }

    .is_cascade--cols_item p {
        font-size: clamp(14px, 14px + 4 * (100vw - 1024px) / 896, 18px);
    }
    strong{
        text-transform: uppercase;
        display: block;
        margin-bottom: 24px;
    }
    h4 {
        text-transform: uppercase;
    }
}

.olives-2 {
    position: relative;
    padding: 0;
    .block--wrapper {
        padding: 0;
        @media(max-width: 768px) {
            padding-top: 60vh
        }
    }
    .f-h2 {
        font-size: clamp(24px, calc(24px + (88 - 24) * ((100vw - 768px) / (1920 - 768))), 88px);
        line-height: 1.2;
    }
    .olives-2--tree-bg {
        position: absolute;
        bottom: -32px;
        right: 32px;
        z-index: 1;
        width: 70%;
    }
    .olives-2--tree {
        position: relative;
        z-index: 2;
    }
    .block--head {
        padding: var(--g-vertical-xxl) var(--container-padding);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        height: 100%;
    }
    .block--head_title {
        max-width: 50%;
    }
    .block--head_caption {
        max-width: 540px;
        margin-top: 32px;
        p {
            margin-bottom: 24px;
            font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 768px) / (1920 - 768))), 20px);
        }
    }
    .block--head_image {
        width: 65%;
    }
    .olives-2--textblock {
        position: absolute;
        bottom: 44px;
        left: 52px;
        text-align: center;
        max-width: 200px;
        @media(min-width: 768px) {
            max-width: 400px;
            bottom: 25%;
            left: 70%;
        }
        h3 {
            font-weight: 500;
            text-transform: uppercase;
            font-size: clamp(24px, calc(24px + (64 - 24) * ((100vw - 768px) / (1920 - 768))), 64px);
        }
        p {
            font-size: clamp(14px, calc(14px + (20 - 14) * ((100vw - 768px) / (1920 - 768))), 20px);
        }

    }
}

.olives-3 {
    transform: translateY(-6.2vw);
    position: relative;
    z-index: 5;
    overflow: visible;
    clip-path: url(#ellipseClip3);

    &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30%;
        display: block;
        background: linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0.991353) 6.67%, rgba(255, 255, 255, 0.96449) 13.33%, rgba(255, 255, 255, 0.91834) 20%, rgba(255, 255, 255, 0.852589) 26.67%, rgba(255, 255, 255, 0.768225) 33.33%, rgba(255, 255, 255, 0.668116) 40%, rgba(255, 255, 255, 0.557309) 46.67%, rgba(255, 255, 255, 0.442691) 53.33%, rgba(255, 255, 255, 0.331884) 60%, rgba(255, 255, 255, 0.231775) 66.67%, rgba(255, 255, 255, 0.147411) 73.33%, rgba(255, 255, 255, 0.0816599) 80%, rgba(255, 255, 255, 0.03551) 86.67%, rgba(255, 255, 255, 0.0086472) 93.33%, rgba(255, 255, 255, 0) 100%);
        z-index: 5;
    }
    @media(max-width: 1024px) {
    &.block_banner.block_banner-hero .banner {
            height: auto !important;
            min-height: auto !important;
     }
    }
}

.olives-4{
    position: relative;
    overflow: visible;
    z-index: 6;
    padding: 0;

    .olives-4--screen {
        height: 40vw;
        z-index: 8;
        @media(max-width: 768px) {
            height: 52vw;
        }
    }
    .olives-4--bottle {
        position: absolute;
        width: 58vw;
        top: 0;
        left: 14.3%;
        transform: translateY(-50%);
        @media(max-width: 768px) {
            width: 77vw;
            left: 10px;
        }
    }
    .olives-4--bottle--bg {
        object-fit: contain;
        object-position: center;
    }
    .olives-4--bottle--front {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-55%, 38%);
        width: 80%;
        object-fit: contain;
        object-position: center;
    }
    .olives-4--bottle--text_decor {
        position: absolute;
        width: 41%;
        top: 35%;
        left: 50%;
        transform: translate(-80%, 0)
    }
    .olives-4--bottle--text {
        position: absolute;
        left: 45%;
        top: 12%;
        max-width: 29vw;
        z-index: 7;
        color: #fff;
        font-weight: 500;
        font-size: clamp(16px, calc(24px + (20 - 16) * ((100vw - 768px) / (1920 - 768))), 20px);
        line-height: 1.5;
        @media(max-width: 768px) {
            font-size: 9px;
            max-width: 40vw;
            left: 50%;
            top: 8%
        }
    }
    .olives-4--screen_text {
        position: absolute;
        left: 60%;
        bottom: 0;
        max-width: 460px;
        z-index: 8;
        color: #121212;
        font-size: clamp(8px, calc(20px + (20 - 8) * ((100vw - 768px) / (1920 - 768))), 20px);
        font-weight: 500;
        @media(max-width: 768px) {
            display: none;
        }
    }
}

.olives_products {
    position: relative;
    padding: 0;
    z-index: 5;
    background: linear-gradient(to bottom, transparent 59vw, #B4A238 59vw 100%);
    .olives_products--video {
        position: relative;
        height: 30vw;
        video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
            aspect-ratio: 1920 / 1142;
            object-fit: cover;
            object-position: center;
            z-index: 1;
        }
        &:before {
            content: "";
            z-index: 2;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background: linear-gradient(to bottom, rgba(167,150,50, 1) 20%, rgba(180,162,56,0.8) 50%, rgba(180,162,56,0) 100%) ;
        }
    }
    .block--wrapper {
        position: relative;
        z-index: 3;
        display: grid;
        grid-template-rows: 1.2fr 1fr 1fr 1fr;
        @media(min-width: 768px) {

            grid-template-rows: 0.7fr 1fr 1fr 1fr;
        }
        &:after {
            z-index: 1;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 30vw;
            background: linear-gradient(180deg, rgba(180,162,56,0) 0%, #B4A238 100%);
        }
    }

    .olives_products--item {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 40px;
        place-content: center;
        place-items: center;
        position: relative;
        z-index: 3;
        &:not(:last-child) {
            border-bottom: 1px solid #fff;
        }
        img {
            aspect-ratio: 1 / 1;
            height: 80%;
            object-fit: contain;
            object-position: center;
            @media(min-width: 768px) {
                height: 35%;
            }
        }
        h3 {
            color: #fff;
            font-weight: 500;
            text-transform: uppercase;
            font-size: clamp(14px, calc(14px + (48 - 14) * ((100vw - 768px) / (1920 - 768))), 48px);
        }
    }
    .olives_products--button {
        background-image: url("data:image/svg+xml,%3Csvg width='257' height='253' viewBox='0 0 257 253' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M59.5537 53.7803C119.413 -3.25696 198.78 -17.127 236.826 22.8008C274.872 62.7287 257.189 141.335 197.33 198.372C137.471 255.41 58.1037 269.28 20.0576 229.353C-17.9883 189.425 -0.305233 110.818 59.5537 53.7803ZM69.0762 146.557C45.8065 146.557 26.9424 165.421 26.9424 188.69C26.9424 211.96 45.8065 230.824 69.0762 230.824C92.3459 230.824 111.21 211.96 111.21 188.69C111.21 165.421 92.3459 146.557 69.0762 146.557Z' fill='white'/%3E%3Cpath d='M70.4248 187.575H83.25V190.425H70.4248V203.25H67.5752V190.425H54.75V187.575H67.5752V174.75H70.4248V187.575Z' fill='white'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        aspect-ratio: 257 / 253;
        grid-column: 3;
        height: 80%;
        position: relative;
        @media(min-width: 768px) {
            height: 35%;
        }
        span {
            text-transform: uppercase;
            font-size: clamp(8px, calc(8px + (24 - 8) * ((100vw - 768px) / (1920 - 768))), 24px);
            color: #B2A136;
            font-weight: 500;
            position: absolute;
            left: 50%;
            top: 40%;
            transform: translate(-50%, -50%);
        }
    }
    .olives_products--bottles {
        left: 50%;
        transform: translateX(-50%);
        top: -10vh;
        position: absolute;
        z-index: 4;
        height: 140%;
        @media(min-width: 768px) {
            height: calc(100% + 20vh);
        }
        img {
            object-fit: contain;
            object-position: center;
        }
    }
}


.content_olives {
    @media(max-width: 768px) {
        --col: 1;
        padding-top: 48px;
    }
    .block--link {
        margin-top: 32px;
    }
    @media (min-width: 1024px) {
        .tabs {
            flex-direction: row;
        }
        .tabs--item {
            width: fit-content;
        }
    }
    .block--elements {
        &[data-tab-content]:not(.is_active) {
            display: none !important;
        }
    }
    .card {
        --title-size: clamp(18px, calc(18px + (20 - 18) * ((100vw - 768px) / (1920 - 768))), 20px);
        padding-bottom: calc(var(--title-size) * 1.2 + 16px);
        @media (min-width: 1024px) {
            &:hover {
                .card--content {
                    opacity: 1;
                    transform: translateY(0);
                }
                .card--image .card--title {
                    opacity: 0
                }
                .card--image .card--button {
                    opacity: 1;
                }
            }
        }
        &.is_active {
            .card--content {
                opacity: 1;
                transform: translateY(0);
            }
            .card--image .card--title {
                opacity: 0
            }
            .card--image .card--button {
                opacity: 1;
            }
        }
        .card--button {
            position: absolute;
            top: calc(100% + 16px);
            left: 0;
            -webkit-line-clamp: 1;
            transition: opacity 0.16s linear;
            opacity: 0;
            color: #FFA540;
            text-transform: uppercase;
            display: flex;
            width: 100%;
            justify-content: space-between;
            gap: 8px;
            align-items: center;
            font-weight: 500;
        }
        .card--image {
            aspect-ratio: 590 / 770;
            height: auto;
            background-color: #F2F2F2;
            .card--title {
                position: absolute;
                top: calc(100% + 16px);
                left: 0;
                -webkit-line-clamp: 1;
                transition: opacity 0.16s linear;
            }
        }
        .card--text {
            font-size: 14px;
            line-height: 1.5;
            flex-grow: 1;
        }
        .card--content {
            background-color: #0000004D;
            backdrop-filter: blur(16px);
            padding: 12px;
            gap: 10px;
            position: absolute;
            transform: translateY(30%);
            bottom: calc(var(--title-size) * 1.2 + 16px);
            left: 0;
            transition: transform 0.2s linear;
            height: 78%;
            overflow-y: auto;
            flex-shrink: 0;
            flex-grow: 1;
            opacity: 0;
            color: #fff;
            @media(min-width: 1024px) {
                padding: 24px;
            }
        }
        .card--description {
            padding-left: 18px;
            font-size: 14px;
            line-height: 1.5;
            font-weight: 400;
        }
    }
    .block--link .button-filled-secondary{
        --button-bg-color: #B4A238
    }
}


/* End */
/* /local/resources/blanks/production_olives/style.css?177015626515401 */