.hero-wrapper {
    position: relative;
    margin-bottom: 32px
}

@media screen and (min-width: 750px) {
    .hero-wrapper {
        margin-bottom: 24px
    }
}

.hero-wrapper.banner {
    margin-bottom: 0
}

@media screen and (min-width: 750px) {
    .hero-wrapper.banner {
        margin-bottom: 42px
    }
}

.hero {
    visibility: visible;
    width: 100%
}

.hero.slick-initialized {
    visibility: visible
}

.hero .hero__slide {
    position: relative;
    width: 100%;
    height: 300px;
    background-position: center;
    background-size: cover;
    
}

@media screen and (min-width: 750px) {
    .hero .hero__slide {
        height: 500px;
        background-position: center
    }
}

@media screen and (min-width: 1025px) {
    .hero .hero__slide {
        height: 600px
    }
}

@media screen and (min-width: 2100px) {
    .hero .hero__slide {
        height: 800px
    }
}

.hero .hero__slide.hero__slide--small-fonts .hero__headline {
    font-size: 25px;
    line-height: 25px
}

@media screen and (min-width: 750px) {
    .hero .hero__slide.hero__slide--small-fonts .hero__headline {
        font-size: 40px;
        letter-spacing: -1.99px;
        line-height: 40px
    }
}

@media screen and (min-width: 1025px) {
    .hero .hero__slide.hero__slide--small-fonts .hero__headline {
        font-size: 80px;
        letter-spacing: -3.99px;
        line-height: 80px
    }
}

.hero .wrapper {
    height: 100%
}

.hero .hero__content {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 32px auto
}

.hero .hero__content .display-table-cell {
    display: flex;
    flex-direction: column
}

.hero .hero__content.hero__content--center {
    text-align: center
}

.hero .hero__content.hero__content--center .display-table-cell {
    align-items: center
}

.hero .hero__content.hero__content--center .hero__copy {
    max-width: 700px;
    margin: 0 auto
}

.hero .hero__content.hero__content--left {
    float: left;
    text-align: left
}

.hero .hero__content.hero__content--left .display-table-cell {
    align-items: flex-start
}

.hero .hero__content.hero__content--left .hero__copy {
    max-width: 700px;
    float: left
}

.hero .hero__content.hero__content--right {
    float: right;
    text-align: right
}

.hero .hero__content.hero__content--right .display-table-cell {
    align-items: flex-end
}

.hero .hero__content.hero__content--right .hero__copy {
    max-width: 700px;
    float: right
}

.hero .hero__content.dark .hero__intro,
.hero .hero__content.dark .hero__headline {
    color: #000
}

.hero .hero__intro {
    margin: 10px 0 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase
}

.hero .hero__headline {
    margin-bottom: 15px;
    color: #fff;
    font-size: 36px;
    font-weight: 900;
    line-height: 40px;
    text-transform: uppercase
}

.hero .hero__headline span {
    display: block;
    clear: both
}

.hero .hero__button {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 30px;
    background-color: var(--color-links);
    color: #fff;
    font-family: aktiv-grotesk-extended, helvetica, arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1
}

@media screen and (min-width: 750px) {
    .hero .hero__button {
        margin-top: 20px;
        padding: 16px 45px;
        font-size: 15px
    }
}

@media screen and (min-width: 1025px) {
    .hero .hero__button {
        margin-top: 20px;
        padding: 16px 58px;
        font-size: 15px
    }
}

.hero .hero__button:active,
.hero .hero__button:focus {
    color: #fff
}

.hero .hero__button:hover {
    background-color: var(--color-primary);
    color: #fff
}

.hero .hero__button--full-width {
    width: 100%;
    text-align: center
}

.hero-progress {
    display: block;
    position: absolute;
    z-index: 3;
    bottom: 30px;
    left: 50%;
    width: auto;
    transform: translate(-50%)
}

@media screen and (min-width: 750px) {
    .hero-progress {
        bottom: 49px
    }
}

.hero-progress div {
    display: block;
    width: 50px;
    margin-right: 7px;
    padding: 0;
    float: left;
    cursor: pointer
}

.hero-progress div:last-child {
    margin-right: 0
}

.hero-progress .hero-progress__bar {
    display: block;
    width: 100%;
    height: 4px;
    overflow: hidden;
    background-color: #fff
}

.hero-progress .hero-progress__bar .in-progress {
    width: 0%;
    height: 50px;
    margin-top: -30px;
    background-color: var(--color-primary)
}