.hero-carousel {
    position: relative;
    box-sizing: initial;
    display: block;
    overflow: hidden
}

.hero-carousel .text p {
    color: inherit;
    margin-bottom: 2em
}

.hero-carousel .btn {
    margin-top: 0
}

.hero-carousel .container {
    height: 100%
}

.hero-carousel .bg-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--slide-border-radius)
}

.hero-carousel .video-wrap {
    overflow: hidden;
    border-radius: var(--slide-border-radius)
}

.hero-carousel .video {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
    clip-path: inset(1px 1px);
    border-radius: var(--slide-border-radius)
}

.hero-carousel .img-video-overlay {
    border-radius: var(--slide-border-radius)
}

.hero-carousel .controls {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1
}

.hero-carousel .controls button {
    padding: 1em;
    font-size: 1.5em;
    opacity: .3;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    -ms-transition: all .2s linear;
    transition: all .2s linear
}

.hero-carousel .controls button:hover {
    opacity: 1
}

.hero-carousel .controls svg {
    display: block
}

.hero-carousel .keen-arrow {
    opacity: .4
}

.hero-carousel .keen-arrow.prev {
    right: auto;
    left: 0
}

.hero-carousel .keen-arrow.next {
    left: auto;
    right: 0
}

.hero-carousel .keen-arrow:hover {
    opacity: 1
}

.hero-carousel .slide {
    background-color: var(--bg-color)
}

.hero-carousel .captions {
    padding: var(--text-padding);
    min-height: 100%
}

.hero-carousel .title {
    color: var(--title-color);
    letter-spacing: -.03em !important;
    font-weight: 400;
    margin-bottom: .25em
}

.hero-carousel .subtitle {
    color: var(--subtitle-color);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .75em;
    text-transform: none;
    letter-spacing: -.03em !important
}

.hero-carousel .text {
    color: var(--text-color)
}

.hero-carousel .text p {
    margin-bottom: 0
}

.hero-carousel .controls svg path {
    fill: var(--text-color)
}

.hero-carousel .overlay {
    background-color: var(--overlay-background-color)
}

.hero-carousel h2 {
    font-weight: 900;
    line-height: .96em;
    margin: var(--title-margin)
}

.hero-carousel .img-video-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s
}

.hero-carousel .img-video-overlay.active {
    opacity: 1
}

.hero-carousel .captions a {
    width: var(--button-width)
}

@media all and (min-width:1051px) {
    .hero-carousel {
        padding-top: var(--height)
    }
    .hero-carousel .keen {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }
    .hero-carousel .keen-slider,
    .hero-carousel .keen-slider-slide,
    .hero-carousel .slide {
        height: 100% !important
    }
    .hero-carousel.dots-below-desktop {
        margin-bottom: 4em
    }
    .hero-carousel.dots-inside-desktop .keen-dots {
        position: absolute;
        bottom: 0;
        left: 15%;
        width: 70%
    }
    .hero-carousel .overlay,
    .hero-carousel .bg-img,
    .hero-carousel .video-wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0
    }
    .hero-carousel .overlay {
        border-radius: var(--slide-border-radius)
    }
    .hero-carousel .captions {
        max-width: var(--text-width)
    }
}

@media all and (min-width:1051px) {
    .hero-carousel h1.title,
    .hero-carousel h2.title {
        font-size: 3.625em;
        line-height: 1.125em
    }
    .hero-carousel .subtitle {
        font-size: 2em;
        margin-bottom: .25em
    }
}

@media all and (min-width:601px)and (max-width:1050px) {
    .hero-carousel h1.title,
    .hero-carousel h2.title {
        font-size: 3em;
        line-height: 1.125em
    }
    .hero-carousel .subtitle {
        font-size: 1.75em;
        margin-bottom: .25em
    }
    .hero-carousel .text {
        font-size: 1.75em;
        line-height: 1.4
    }
}

@media all and (max-width:1050px) {
    .hero-carousel.mobile-text-inside {
        padding-top: var(--height)
    }
    .hero-carousel.mobile-text-inside .keen {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0
    }
    .hero-carousel.mobile-text-inside .keen-slider,
    .hero-carousel.mobile-text-inside .keen-slider-slide,
    .hero-carousel.mobile-text-inside .slide {
        height: 100% !important
    }
    .hero-carousel.mobile-text-inside .overlay,
    .hero-carousel.mobile-text-inside .bg-img,
    .hero-carousel.mobile-text-inside .video-wrap {
        position: absolute;
        width: 100%;
        height: 99%;
        top: 0;
        left: 0
    }
    .hero-carousel.mobile-text-inside .overlay {
        border-radius: var(--slide-border-radius)
    }
    .hero-carousel.mobile-text-below .overlay,
    .hero-carousel.mobile-text-below .bg-img,
    .hero-carousel.mobile-text-below .video-wrap {
        position: relative;
        height: auto;
        top: 0;
        left: 0
    }
    .hero-carousel.mobile-text-below .bg-img,
    .hero-carousel.mobile-text-below .video-wrap {
        padding-top: var(--height)
    }
    .hero-carousel.mobile-text-below .video {
        position: absolute;
        top: 0;
        left: 0
    }
    .hero-carousel.dots-inside-mobile .keen-dots {
        position: absolute;
        bottom: 0;
        left: 15%;
        width: 70%
    }
}

@media all and (max-width:600px) {
    .hero-carousel h1.title,
    .hero-carousel h2.title {
        font-size: 2em;
        line-height: 1.2
    }
    .hero-carousel .subtitle {
        font-size: 1em;
        margin-bottom: .5em
    }
    .hero-carousel .text {
        font-size: .75em;
        line-height: 1.4
    }
}

/*# sourceMappingURL=/cdn/shop/t/138/assets/hero_carousel.css.map?v=152307343960626267421781710846 */