@font-face {
    font-family: 'Changa';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/ChangaSemiBold600.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Changa';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/ChangaRegular400.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.categories {
    background-color: var(--black);
    background-image: url(/images/f.svg);
    background-size: auto 110%;
    background-position: 110% 50%;
    background-repeat: no-repeat;
    color: #fff;
    padding: 9rem 0;
    max-width: 100vw;
    overflow: hidden;
    position: relative;
}

    .categories p.subtitle {
        font-size: 4rem;
        line-height: 4rem;
        margin-bottom: 1rem;
    }

    .categories .categories__button {
        font-family: 'Changa';
        font-weight: 800;
        font-size: 6rem;
        line-height: 6rem;
        color: var(--red);
        position: relative;
        margin: 0 0 5rem;
        padding: 0;
        box-shadow: none;
        outline: none;
        background-color: transparent;
        border: none;
        transition: var(--transition-default);
    }

        .categories .categories__button:hover {
            color: var(--red-hover);
        }

        .categories .categories__button:after {
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 9'%3E%3Cpolyline points='1 1 7 7 13 1' fill='none' stroke='%23fe2a39'  stroke-width='3'/%3E%3C/svg%3E");
            background-position: 50% 50%;
            background-size: 3.5rem auto;
            background-repeat: no-repeat;
            width: 3.5rem;
            height: 3.5rem;
            position: absolute;
            top: 1.5rem;
            right: -4.5rem;
            transition: var(--transition-default);
        }

        .categories .categories__button:hover:after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 9'%3E%3Cpolyline points='1 1 7 7 13 1' fill='none' stroke='%23de1e2c'  stroke-width='3'/%3E%3C/svg%3E");
            top: 1.8rem;
        }

    .categories .dropdown-menu {
        background-color: #fff;
        border: none;
        border-radius: 0;
        margin-top: 1rem
    }

    .categories .dropdown-item {
        font-size: 1.6rem;
        color: var(--black);
        padding: 1rem 2rem;
        min-width: 20rem;
    }

        .categories .dropdown-item:hover {
            color: var(--red);
        }

        .categories .dropdown-item.active,
        .categories .dropdown-item.active:hover {
            background-color: var(--blue-light);
            color: #000;
        }

    .categories .categories__carousel:not(:first-of-type) {
        display: none;
    }

    .categories .categories__item {
        width: 36rem !important;
        height: 36rem;
        position: relative;
        overflow: hidden;
    }

        .categories .categories__item img {
            transition: var(--transition-default);
            width: 100%;
            height: auto;
        }

        .categories .categories__item:hover img {
            transform: scale(1.02);
        }

        .categories .categories__item .categories__text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column;
            justify-content: flex-end;
            padding: 0 3rem 5rem;
            background-color: rgba(0,0,0,.4);
            transition: var(--transition-default);
        }

        .categories .categories__item:hover .categories__text {
            background-color: rgba(0,0,0,.2);
        }

        .categories .categories__item .categories__text h3 {
            font-family: Changa;
            font-weight: 600;
            font-size: 4rem;
            line-height: 4rem;
            margin-bottom: 1.5rem;
        }

            .categories .categories__item .categories__text h3 span {
                font-weight: 400;
                font-size: 3.6rem;
            }

        .categories .categories__item .categories__text .cta {
            color: #fff;
            align-self: flex-start;
        }

            .categories .categories__item .categories__text .cta:after {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M11,15l4-4L11,7M7,11h8' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
                top: .4rem;
            }

        .categories .categories__item:hover .categories__text .cta:after {
            right: -3.3rem;
        }

        .categories .categories__item > a {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    .categories .slick-list {
        overflow: visible;
    }

    .categories .slick-track {
        margin-left: 0;
    }

    .categories > .container {
        position: relative;
    }

        .categories > .container:before {
            content: "";
            width: 50vw;
            height: 100%;
            position: absolute;
            top: 0;
            left: calc(-50vw + 1.5rem);
            background-color: var(--black);
            z-index: 10;
        }

        .categories > .container > .row:last-of-type {
            position: relative;
        }

            .categories > .container > .row:last-of-type:after {
                content: "";
                width: calc((100vw - 100% + 3rem) / 2);
                height: 100%;
                position: absolute;
                top: 0;
                right: calc((100vw - 100%) / -2);
                background-image: linear-gradient(to right, rgba(18, 18, 18, .3) 0%, rgba(18, 18, 18, 1) 90%);
                z-index: 10;
            }

    .categories .slick-arrow {
        height: 15rem;
        width: 15rem;
        background-color: var(--black);
        border-radius: 7.5rem;
        border: none;
        text-indent: -9000px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'%3E%3Cpath d='M8,1l7,7L8,15M1,8H15' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/svg%3E");
        background-size: 2.8rem auto;
        background-position: 3rem 50%;
        background-repeat: no-repeat;
        position: absolute;
        bottom: calc(50% - 7.5rem - 9rem);
        z-index: 20;
        outline: none;
        transition: var(--transition-default);
    }

        .categories .slick-arrow:hover {
            background-color: var(--black-hover);
            background-position-x: 3.3rem;
        }

        .categories .slick-arrow.slick-prev {
            left: -7.5rem;
            transform: rotate(180deg);
        }

        .categories .slick-arrow.slick-next {
            right: -7.5rem;
        }

        .categories .slick-arrow.slick-disabled,
        .categories .slick-arrow.slick-disabled:hover {
            opacity: .5;
            background-position-x: 3rem;
            background-color: var(--black);
        }

@media(max-width: 767px) {
    .categories > .container:before {
        content: none;
    }

    .categories .row:last-of-type > div {
        padding: 0;
    }

    .categories .categories__item {
        width: 100vw !important;
        height: 100vw !important;
    }

        .categories .categories__item img {
            object-fit: cover;
            object-position: 50% 50%;
        }

        .categories .slick-arrow {
            height: 10rem;
            width: 10rem;
            border-radius: 5rem;
            background-size: 1.6rem auto;
            background-position: 1.4rem 50%;
            bottom: calc(50% - 5rem - 9rem);
        }

            .categories .slick-arrow:hover {
                opacity: 1 !important;
                background-color: var(--black) !important;
                background-position: 1.4rem 50% !important;
            }

            .categories .slick-arrow.slick-prev {
                left: -6.5rem;
            }

        .categories .slick-arrow.slick-next {
            right: -6.5rem;
        }
}