.gold-outline:focus {
    outline: 2px solid #fbc600!important
}

.hero {
    position: relative;
    overflow-x: hidden;
    padding: 0 0 .5rem
}

.hero::after {
    content: '';
    background-color: #fbc600;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 8px
}

@media screen and (min-width: 0rem) and (max-width:47.9375rem) {
    .hero::after {
        width:50%
    }
}

@media screen and (min-width: 48rem) and (max-width:79.9375rem) {
    .hero::after {
        width:250px
    }
}

@media screen and (min-width: 80rem) {
    .hero::after {
        width:calc(50vw - 410px)
    }
}

.hero__inner {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2.5rem
}

@media screen and (min-width: 0rem) and (max-width:47.9375rem) {
    .hero__inner {
        padding-left:1.25rem;
        padding-right: 1.25rem
    }
}

@media screen and (min-width: 48rem) and (max-width:79.9375rem) {
    .hero__inner {
        padding-left:2.5rem;
        padding-right: 2.5rem
    }
}

@media screen and (min-width: 80rem) {
    .hero__inner {
        padding-left:5rem;
        padding-right: 5rem
    }
}

@media screen and (min-width: 0rem) and (max-width:47.9375rem) {
    .hero__inner {
        width:82.5rem
    }
}

@media screen and (min-width: 48rem) and (max-width:79.9375rem) {
    .hero__inner {
        width:85rem
    }
}

@media screen and (min-width: 80rem) {
    .hero__inner {
        width:90rem
    }
}

@media screen and (min-width: 62rem) {
    .hero__inner {
        flex-direction:row;
        align-items: stretch;
        justify-content: space-between;
        margin-bottom: 3.75rem
    }
}

.hero__copy {
    color: #3b3c43;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    position: relative
}

@media screen and (min-width: 62rem) {
    .hero__copy {
        align-items:flex-start;
        padding: 0 4.5rem 0 0;
        width: 50%
    }
}

@media screen and (min-width: 80rem) {
    .hero__copy {
        width:calc(50% + 40px)
    }
}

.hero__heading {
    font-size: 37px;
    font-size: 2.3125rem;
    font-weight: 700;
    line-height: 40px;
    text-transform: uppercase;
    margin: 1.5rem 0 -1.5rem;
    color: #3b3c43;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    margin-top: 21px;
    top: -20px;
}

@media screen and (min-width: 48rem) {
    .hero__heading {
        margin:2.5rem 0 -1.5rem;
    }
}

@media screen and (min-width: 62rem) {
    .hero__heading {
        font-size:52px;
        font-size: 3.25rem;
        letter-spacing: .0125em;
        line-height: 1;
        margin: 1rem 0 0
    }
}

@media screen and (min-width: 80rem) {
    .hero__heading {
        font-size:65px;
        font-size: 4.0625rem
    }
}

.hero__subheading {
    color: #3b3c43;
    font-size: 16px;
    font-size: 1rem;
    line-height: 21px;
    margin: 3rem 0 0;
    /* max-width:550px; */
    width: 100%;
    box-sizing: border-box;
}

@media screen and (min-width: 30rem) {
    .hero__subheading {
        font-size:18px;
        font-size: 1.125rem
    }
}

@media screen and (min-width: 48rem) {
    .hero__subheading {
        font-size:21px;
        font-size: 1.3125rem;
        line-height: 28px
    }
}

@media screen and (min-width: 62rem) {
    .hero__subheading {
        margin:1.5rem 0
    }
}

@media screen and (min-width: 80rem) {
    .hero__subheading {
        font-size:24px;
        font-size: 1.5rem
    }
}

.hero__logo.-mobile {
    display: block;
    max-width: 5.5625rem;
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%)
}

@media screen and (min-width: 62rem) {
    .hero__logo.-mobile {
        display:none
    }
}

.hero__logo.-desktop {
    display: none;
    max-width: 6.6875rem;
    max-height: 4.375rem;
    margin: 2rem 0 0
}

@media screen and (min-width: 62rem) {
    .hero__logo.-desktop {
        display:block
    }
}

@media screen and (min-width: 80rem) {
    .hero__logo.-desktop {
        display:block;
        margin: 3rem 0 0
    }
}

.hero__image {
    background-size: cover;
    background-repeat: no-repeat;
    position: relative
}

.hero__image--mobile {
    display: block;
    box-sizing: border-box;
    padding-bottom: 66.8%;
    height: 100%;
    width: calc(100% + 2.5rem);
    margin-left: -1.25rem
}

@media screen and (min-width: 62rem) {
    .hero__image--mobile {
        display:none
    }
}

.hero__image--desktop {
    padding-bottom: 72%;
    box-sizing: border-box;
    height: 100%
}

.hero__image--desktop-wrapper {
    display: none;
    position: relative
}

@media screen and (min-width: 62rem) {
    .hero__image--desktop-wrapper {
        display:block;
        width: 50%
    }
}

@media screen and (min-width: 80rem) {
    .hero__image--desktop-wrapper {
        right:-40px;
        margin-left: -40px;
        width: calc(50% + 100px)
    }
}

.hero__button-row {
    display: flex
}

.hero__button {
    display: inline-block;
    border: 0;
    padding: .875rem;
    align-self: center;
    text-align: center;
    box-sizing: border-box;
    line-height: 1;
    background-color: #fbc600;
    color: #3b3c43;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 150ms ease-in-out,color 150ms ease-in-out
}

.hero__button:focus {
    outline: 2px solid #3b3c43!important
}

.hero__button:hover {
    background-color: #3b3c43!important;
    color: #fff!important
}

.hero__button--home {
    background-color: #58a7af;
    color: #fff
}

.hero__button--home:hover {
    background-color: #4e97a3!important
}

@media screen and (min-width: 0rem) and (max-width:29.9375rem) {
    .hero__button {
        width:100%
    }
}

@media screen and (min-width: 30rem) {
    .hero__button {
        width:180px;
        margin-bottom: 1rem
    }
}

.hero__link {
    text-decoration: none;
    color: #3b3c43;
    font-weight: 500
}

.hero__link span {
    font-size: 16px;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 0 #fbc600;
    transition: box-shadow .2s cubic-bezier(.895,.03,.685,.22)
}

.hero__link span:focus,.hero__link span:hover {
    box-shadow: inset 0 -7px 0 0 rgba(251,198,0,.85)
}

.hero__link span.active {
    box-shadow: inset 0 -7px 0 0 rgba(251,198,0,.85)
}