section:not(#hero).background.separator h2.h1,
#hero h1, #hero .h1 { line-height: .625; letter-spacing: -.375px; }

#hero .col-12 > p:first-child { font-size: calc(45px * .725) !important; }

section:not(#hero).background.separator h2.h1 > span,
#hero h1 > span, #hero .h1 > span { font-size: calc(45px * .725) !important; font-weight: 400; }

section:not(#hero).background.separator h2.h1 > span > span,
#hero h1 > span > span, #hero .h1 > span > span { color: var(--first) !important; }

#hero { width: 100%; height: 561px; }

#hero > .container > .row { height: calc(561px - 139px); }

.background.hero { background-position: center bottom, right 3.5vw bottom 22vw, center bottom; background-repeat: repeat-x, no-repeat, repeat-x; background-size: auto, 93%, auto; background-blend-mode: normal, normal, multiply; }

@media (min-width: 413px) {
    .background.hero { background-position: center bottom, right 3.5vw bottom 5vw, center bottom; background-repeat: repeat-x, no-repeat, repeat-x; background-size: auto, 93%, auto; }
}

@media (min-width: 576px) {
    #hero { width: 100%; height: 736px; }
    #hero > .container > .row { height: calc(736px - 139px); }
    section:not(#hero).background.separator h2.h1,
    #hero h1, #hero .h1 { line-height: .625; }
    section:not(#hero).background.separator h2.h1 > span,
    #hero .col-12 > p:first-child { font-size: 45px !important; }
    #hero h1 > span, #hero .h1 > span { font-size: 45px !important; font-weight: 400; }
    .background.hero { background-position: center bottom, right 3.5vw bottom 4vw, center bottom; background-repeat: repeat-x, no-repeat, repeat-x; background-size: auto, 93%, auto; }
}

@media (min-width: 768px) {
    .background.hero { background-position: center bottom, right 3.5vw bottom, center bottom; background-repeat: repeat-x, no-repeat, repeat-x; background-size: auto, 82%, auto; }
}

@media (min-width: 992px) {
    .background.hero { background-position: center bottom, right 3.5vw bottom, center bottom; background-repeat: repeat-x, no-repeat, repeat-x; background-size: auto, 73%, auto; }
}

@media (min-width: 1200px) {
    .background.hero { background-position: center bottom, right 3.5vw bottom, center bottom; background-repeat: repeat-x, no-repeat, repeat-x; background-size: auto, 70%, auto; }
}

@media (min-width: 1400px) {
    .background.hero { background-position: center bottom, right 3.5vw bottom, center bottom; background-repeat: repeat-x, no-repeat, repeat-x; background-size: auto; }
}

@media (min-width: 1920px) {
    .background.hero { background-position: center bottom, right 10vw bottom, center bottom; background-repeat: repeat-x, no-repeat, repeat-x; background-size: auto; }
}