:root {
    --hero: unset;
	--hero-mobile: unset;
}

#hero {
    aspect-ratio: 1512 / 724;
    background-image: var(--hero)!important;
    background-position: 100% clamp(-45px, calc(-4.79233vw + 47.01278px), 0px);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    overflow: hidden;
}

#hero-ctas-container, #hero-h1 {
    display: block;
}

#hero-h1-sub, #hero-h1-sub-mobile {
    color: var(--brand-secondary)!important;
    font-style: normal!important;
}

#hero-inner-container {
    width: 37%!important;
    margin-left: 5%;
    margin-top: 11.55%;
}

#hero-ctas-mobile-container {
    margin-top: 3%;
}

#hero-h1-mobile-container, #hero-ctas-mobile-container {
    display: none;
}

#hero-h1 {
    font-size: clamp(2rem, calc(0.04113rem + 3.19489vw), 3.875rem)!important;
    color: var(--brand-primary)!important;
}

#hero-h1, #hero-h1-mobile, #hero-h1-sub, #hero-h1-sub-mobile {
    margin: 0;
    padding: 0;
    line-height: 1!important;
    font-weight: 700!important;
    text-transform: uppercase;
    font-style: normal!important;
}

#hero-h1, #hero-h1-mobile {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6), 0px 0px 8px rgba(0, 0, 0, 0.3);
}

#hero-h1-sub, #hero-h1-sub-mobile {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3), 0px 0px 3px rgba(255, 255, 255, 0.4);
}

#hero-h1, #hero-h1-mobile-container {
    padding-bottom: 0!important;
    text-transform: uppercase;
    font-weight: 700!important;
}

#hero-h1, #hero-h1-sub, #hero-h1-sub-mobile, #hero-h1-mobile-container, .hero-cta-h4, .hero-cta-description {
    font-family: 'Breakers'!important;
    font-style: normal!important;
}

#hero-h1-sub, .hero-cta-h4 {
    font-size: clamp(1.4rem, calc(0.02879rem + 2.23642vw), 2.7125rem)!important;
}

#hero-h1-mobile-container {
    margin-top: 3%;
    max-width: 100%;
}

#hero-h1-mobile {
    font-size: clamp(1.75rem, calc(0.7197rem + 5.15152vw), 3.875rem)!important;
    color: var(--brand-primary)!important;
}

#hero-h1-sub-mobile {
    font-size: clamp(1.225rem, calc(0.50379rem + 3.60606vw), 2.7125rem)!important;
}

#hero-ctas-mobile-container .hero-cta {
    max-width: 100%;
    padding-top: 0.4% !important;
    padding-bottom: 0.4% !important;
}

#hero-ctas-mobile-container .hero-cta .hero-cta-h4-container {
    padding-left: 5%;
}

#hero-ctas-mobile-container, #hero-h1-mobile-container {
    margin-left: 5%;
    margin-right: 5%;
    width: 90%!important;
}

.hero-cta {
    font-size: 20px;
    color: #FFFFFF !important;
    position: relative;
    background-size: clamp(32px, calc(21.55272px + 1.064962726vw), 42px) auto;
    background-position: right 2% center;
    background-image: url("/cdn-cloudbucket/local-brands/img/arrow.png");
    background-repeat: no-repeat;
    border-radius: 6px 6px 6px 6px;
    display: table;
    overflow: hidden;
    text-align: left;
    padding-left: 2% !important;
    position: relative;
    margin-top: 3%;
    transition: background-color 300ms ease 0ms, background-image 300ms ease 0ms;
    cursor: pointer;
    animation-timing-function: linear;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    width: 100%;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6), 0px 0px 8px rgba(0, 0, 0, 0.3);
}

#hero-ctas-container .hero-cta {
    padding-top: 0.3% !important;
    padding-bottom: 0.3% !important;
}

.hero-cta-primary {
    background-color: var(--brand-primary);
}
.hero-cta-secondary {
    background-color: var(--brand-secondary);
}

.hero-cta-primary:hover, .hero-cta-secondary:hover {
    background-color: #333333!important;
}

.hero-cta-icon-container {
    width: 32px;
    display: table-cell;
    padding: 2% 1%;
}

.hero-cta-icon-container-inner {
    width: clamp(50px, calc(29.10543px + 2.12993vw), 70px);
    display: block;
    line-height: 1;
}

.hero-cta-icon {
    opacity: 1;
}
.hero-cta-h4-container {
    display: table-cell;
    vertical-align: middle;
}
#hero-ctas-container .hero-cta .hero-cta-h4-container {
    padding-left: 5%;
}
.hero-cta-h4 {
    font-weight: 700!important;
    font-style: normal!important;
    text-transform: uppercase;
    color: #FFFFFF !important;
    padding-bottom: 0;
    line-height: 1;
}

.hero-cta-h4 a {
    color: white!important;
}

.hero-cta-description {
    font-size: clamp(0.875rem, calc(0.61382rem + 0.42599vw), 1.125rem)!important;
    font-weight: 600!important;
    line-height: 1!important;
}

.book-btn {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6), 0px 0px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 980px) {
    .hero-cta {
        margin-top: 2%;
        background-size: clamp(31px, calc(24.21212px + 2.12121vw), 45px) auto;
    }

    .hero-cta-icon-container-inner {
        width: clamp(50px, calc(40.30303px + 3.03030vw), 70px);
    }

    .hero-cta-h4 {
        font-size: clamp(1.225rem, calc(0.56754rem + 3.28729vw), 2.7125rem);
    }

    .hero-cta-description {
        font-size: clamp(0.75rem, calc(0.56818rem + 0.90909vw), 1.125rem);
    }

    #hero-h1, #hero-h1-sub, #hero-ctas-container {
        display: none;
    }

    #hero-h1-mobile-container, #hero-ctas-mobile-container {
        display: block;
    }

    #hero-h1-mobile-container, #hero-ctas-mobile-container {
        display: block!important;
    }
    #hero {
        background-image: var(--hero-mobile)!important;
      /*aspect-ratio: 1910 / 920;*/
        background-position: center;
    }
}