﻿.banner
{
    display: flex;
    position: relative;
    flex-wrap: wrap;
}
.banner.banner-small:not(.banner-mobile-bottom)
{
    min-height: calc(35vh - 109px);
}
.banner.banner-medium:not(.banner-mobile-bottom)
{
    min-height: calc(50vh - 109px);
}
.banner.banner-large:not(.banner-mobile-bottom)
{
    min-height: calc(80vh - 109px);
}
@media(min-width: 820px)
{
    .banner.banner-small.banner-mobile-bottom
    {
        min-height: calc(50vh - 109px);
    }
    .banner.banner-medium.banner-mobile-bottom
    {
        min-height: calc(70vh - 109px);
    }
    .banner.banner-large.banner-mobile-bottom
    {
        height: calc(100vh - 109px);
    }
}
@media(min-width: 1140px)
{
    .banner.banner-small
    {
        min-height: 50vh;
    }
    .banner.banner-medium
    {
        min-height: 70vh;
    }
    .banner.banner-large
    {
        height: calc(100vh - 149px);
    }
    .banner.banner-small:not(.banner-mobile-bottom)
    {
        min-height: calc(35vh - 149px);
    }
    .banner.banner-medium:not(.banner-mobile-bottom)
    {
        min-height: calc(70vh - 149px);
    }
    .banner.banner-large:not(.banner-mobile-bottom)
    {
        min-height: calc(100vh - 149px);
    }
}
.banner-media
{
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.banner::after, .banner-media::after
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-black);
    opacity: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}
@media(max-width: 819px)
{
    .banner-mobile-bottom .banner-media
    {
        position: relative;
        height: auto;
        padding-top: 66.66%;
    }
    .banner-mobile-bottom .banner-content
    {
        order: 2;
        padding: 0;
    }
    .banner-mobile-bottom::after, .banner-mobile-bottom .banner-media::after
    {
        display: none;
    }
}
.banner-content
{
    display: flex;
    position: relative;
    width: 100%;
    align-items: center;
    justify-content: center;
    z-index: 300;
    padding-top: var(--stacked-component-lg);
    padding-bottom: var(--stacked-component-lg);
}
.banner-content.spacing-md
{
    padding-top: var(--stacked-component-md);
    padding-bottom: var(--stacked-component-md);
}
.banner-content.spacing-sm
{
    padding-top: var(--stacked-component-sm);
    padding-bottom: var(--stacked-component-sm);
}
.banner-content.banner-content-top-left
{
    align-items: flex-start;
    justify-content: flex-start;
}
.banner-content.banner-content-top-center
{
    align-items: flex-start;
    justify-content: center;
}
.banner-content.banner-content-top-right
{
    align-items: flex-start;
    justify-content: flex-end;
}
.banner-content.banner-content-middle-left
{
    align-items: center;
    justify-content: flex-start;
}
.banner-content.banner-content-middle-center
{
    align-items: center;
    justify-content: center;
}
.banner-content.banner-content-middle-right
{
    align-items: center;
    justify-content: flex-end;
}
.banner-content.banner-content-bottom-left
{
    align-items: flex-end;
    justify-content: flex-start;
}
.banner-content.banner-content-bottom-center
{
    align-items: flex-end;
    justify-content: center;
}
.banner-content.banner-content-bottom-right
{
    align-items: flex-end;
    justify-content: flex-end;
}
@media(max-width: 819px)
{
    .banner-content.banner-content-mobile-top
    {
        align-items: flex-start;
        justify-content: center;
    }
    .banner-content.banner-content-mobile-middle
    {
        align-items: center;
        justify-content: center;
    }
    .banner-content.banner-content-mobile-bottom
    {
        align-items: flex-end;
        justify-content: center;
    }
}
.banner-box
{
    padding: 2rem 1.5rem;
    position: relative;
    height: fit-content;
    align-items: center;
    text-align: center;
    width: 100%;
    z-index: 1;
}
@media(max-width: 819px)
{
    .banner:not(.banner-mobile-bottom) .banner-box.banner-mobile-transparent
    {
        background: rgba(0,0,0,0);
        padding: 0;
    }
    .banner-box.banner-content-align-mobile-right
    {
        text-align: right;
    }
    .banner-box.banner-content-align-mobile-right .blurb
    {
        align-items: flex-end;
    }
    .banner-box.banner-content-align-mobile-left
    {
        text-align: left;
    }
    .banner-box.banner-content-align-mobile-left .blurb
    {
        align-items: flex-start;
    }
    .banner-box.banner-content-align-mobile-center .blurb
    {
        align-items: center;
    }
}
@media(min-width: 820px)
{
    .banner-box
    {
        width: auto;
        max-width: 70rem;
        min-width: 45rem;
        padding: 2rem;
    }
    .banner-box.banner-desktop-transparent
    {
        background: rgba(0,0,0,0);
        padding: 0;
    }
    .banner-box.banner-content-align-right
    {
        text-align: right;
    }
    .banner-box.banner-content-align-right .blurb
    {
        align-items: flex-end;
    }
    .banner-box.banner-content-align-left
    {
        text-align: left;
    }
    .banner-box.banner-content-align-left .blurb
    {
        align-items: flex-start;
    }
    .banner-box.banner-content-align-center
    {
        text-align: center;
    }
    .banner-box.banner-content-align-center .banner-text
    {
        margin-left: auto;
        margin-right: auto;
    }
    .banner-box.banner-content-align-center .blurb
    {
        align-items: center;
    }
}
@media(min-width: 820px)
{
    .banner-box .btn-primary, .banner-box .btn-secondary
    {
        font-weight: var(--font-weight-extra-bold);
        font-family: var(--font-family-base);
        text-transform: uppercase;
        letter-spacing: 0;
        font-size: 1.375rem;
        line-height: 1em;
        padding: var(--button-padding-vertical-lg) var(--button-padding-horizontal-lg);
        gap: var(--button-gap-lg);
    }
    .banner-box .btn-primary .icon, .banner-box .btn-secondary .icon
    {
        width: 1.25rem;
        height: 1.25rem;
    }
    .banner-box .btn-primary:before, .banner-box .btn-secondary:before
    {
        width: calc(100% + .75rem);
        height: calc(100% + .875rem);
        top: -.25rem;
        left: -.25rem;
    }
    .banner-box .btn-primary:after, .banner-box .btn-secondary:after
    {
        top: .625rem;
        left: .5rem;
        border-right: .25rem solid var(--button-border-primary);
        border-bottom: .375rem solid var(--button-border-primary);
    }
    .banner-box .btn-primary.btn-primary:not(.disabled):hover, .banner-box .btn-primary.btn-primary:not(.disabled).active, .banner-box .btn-primary.btn-primary:not(.disabled).hovered, .banner-box .btn-primary.btn-primary:not(.disabled):focus, .banner-box .btn-primary.btn-primary:not(:disabled):hover, .banner-box .btn-primary.btn-primary:not(:disabled).active, .banner-box .btn-primary.btn-primary:not(:disabled).hovered, .banner-box .btn-primary.btn-primary:not(:disabled):focus, .banner-box .btn-primary.btn-primary:not([disabled]):hover, .banner-box .btn-primary.btn-primary:not([disabled]).active, .banner-box .btn-primary.btn-primary:not([disabled]).hovered, .banner-box .btn-primary.btn-primary:not([disabled]):focus, .banner-box .btn-primary.btn-secondary:not(.disabled):hover, .banner-box .btn-primary.btn-secondary:not(.disabled).active, .banner-box .btn-primary.btn-secondary:not(.disabled).hovered, .banner-box .btn-primary.btn-secondary:not(.disabled):focus, .banner-box .btn-primary.btn-secondary:not(:disabled):hover, .banner-box .btn-primary.btn-secondary:not(:disabled).active, .banner-box .btn-primary.btn-secondary:not(:disabled).hovered, .banner-box .btn-primary.btn-secondary:not(:disabled):focus, .banner-box .btn-primary.btn-secondary:not([disabled]):hover, .banner-box .btn-primary.btn-secondary:not([disabled]).active, .banner-box .btn-primary.btn-secondary:not([disabled]).hovered, .banner-box .btn-primary.btn-secondary:not([disabled]):focus, .banner-box .btn-secondary.btn-primary:not(.disabled):hover, .banner-box .btn-secondary.btn-primary:not(.disabled).active, .banner-box .btn-secondary.btn-primary:not(.disabled).hovered, .banner-box .btn-secondary.btn-primary:not(.disabled):focus, .banner-box .btn-secondary.btn-primary:not(:disabled):hover, .banner-box .btn-secondary.btn-primary:not(:disabled).active, .banner-box .btn-secondary.btn-primary:not(:disabled).hovered, .banner-box .btn-secondary.btn-primary:not(:disabled):focus, .banner-box .btn-secondary.btn-primary:not([disabled]):hover, .banner-box .btn-secondary.btn-primary:not([disabled]).active, .banner-box .btn-secondary.btn-primary:not([disabled]).hovered, .banner-box .btn-secondary.btn-primary:not([disabled]):focus, .banner-box .btn-secondary.btn-secondary:not(.disabled):hover, .banner-box .btn-secondary.btn-secondary:not(.disabled).active, .banner-box .btn-secondary.btn-secondary:not(.disabled).hovered, .banner-box .btn-secondary.btn-secondary:not(.disabled):focus, .banner-box .btn-secondary.btn-secondary:not(:disabled):hover, .banner-box .btn-secondary.btn-secondary:not(:disabled).active, .banner-box .btn-secondary.btn-secondary:not(:disabled).hovered, .banner-box .btn-secondary.btn-secondary:not(:disabled):focus, .banner-box .btn-secondary.btn-secondary:not([disabled]):hover, .banner-box .btn-secondary.btn-secondary:not([disabled]).active, .banner-box .btn-secondary.btn-secondary:not([disabled]).hovered, .banner-box .btn-secondary.btn-secondary:not([disabled]):focus
    {
        transform: translate(.25rem,.25rem);
    }
    .banner-box .btn-primary.btn-primary:not(.disabled):hover:after, .banner-box .btn-primary.btn-primary:not(.disabled).active:after, .banner-box .btn-primary.btn-primary:not(.disabled).hovered:after, .banner-box .btn-primary.btn-primary:not(.disabled):focus:after, .banner-box .btn-primary.btn-primary:not(:disabled):hover:after, .banner-box .btn-primary.btn-primary:not(:disabled).active:after, .banner-box .btn-primary.btn-primary:not(:disabled).hovered:after, .banner-box .btn-primary.btn-primary:not(:disabled):focus:after, .banner-box .btn-primary.btn-primary:not([disabled]):hover:after, .banner-box .btn-primary.btn-primary:not([disabled]).active:after, .banner-box .btn-primary.btn-primary:not([disabled]).hovered:after, .banner-box .btn-primary.btn-primary:not([disabled]):focus:after, .banner-box .btn-primary.btn-secondary:not(.disabled):hover:after, .banner-box .btn-primary.btn-secondary:not(.disabled).active:after, .banner-box .btn-primary.btn-secondary:not(.disabled).hovered:after, .banner-box .btn-primary.btn-secondary:not(.disabled):focus:after, .banner-box .btn-primary.btn-secondary:not(:disabled):hover:after, .banner-box .btn-primary.btn-secondary:not(:disabled).active:after, .banner-box .btn-primary.btn-secondary:not(:disabled).hovered:after, .banner-box .btn-primary.btn-secondary:not(:disabled):focus:after, .banner-box .btn-primary.btn-secondary:not([disabled]):hover:after, .banner-box .btn-primary.btn-secondary:not([disabled]).active:after, .banner-box .btn-primary.btn-secondary:not([disabled]).hovered:after, .banner-box .btn-primary.btn-secondary:not([disabled]):focus:after, .banner-box .btn-secondary.btn-primary:not(.disabled):hover:after, .banner-box .btn-secondary.btn-primary:not(.disabled).active:after, .banner-box .btn-secondary.btn-primary:not(.disabled).hovered:after, .banner-box .btn-secondary.btn-primary:not(.disabled):focus:after, .banner-box .btn-secondary.btn-primary:not(:disabled):hover:after, .banner-box .btn-secondary.btn-primary:not(:disabled).active:after, .banner-box .btn-secondary.btn-primary:not(:disabled).hovered:after, .banner-box .btn-secondary.btn-primary:not(:disabled):focus:after, .banner-box .btn-secondary.btn-primary:not([disabled]):hover:after, .banner-box .btn-secondary.btn-primary:not([disabled]).active:after, .banner-box .btn-secondary.btn-primary:not([disabled]).hovered:after, .banner-box .btn-secondary.btn-primary:not([disabled]):focus:after, .banner-box .btn-secondary.btn-secondary:not(.disabled):hover:after, .banner-box .btn-secondary.btn-secondary:not(.disabled).active:after, .banner-box .btn-secondary.btn-secondary:not(.disabled).hovered:after, .banner-box .btn-secondary.btn-secondary:not(.disabled):focus:after, .banner-box .btn-secondary.btn-secondary:not(:disabled):hover:after, .banner-box .btn-secondary.btn-secondary:not(:disabled).active:after, .banner-box .btn-secondary.btn-secondary:not(:disabled).hovered:after, .banner-box .btn-secondary.btn-secondary:not(:disabled):focus:after, .banner-box .btn-secondary.btn-secondary:not([disabled]):hover:after, .banner-box .btn-secondary.btn-secondary:not([disabled]).active:after, .banner-box .btn-secondary.btn-secondary:not([disabled]).hovered:after, .banner-box .btn-secondary.btn-secondary:not([disabled]):focus:after
    {
        top: .375rem;
        left: .25rem;
    }
    .banner-box .btn-primary.disabled.btn-primary:after, .banner-box .btn-primary.disabled.btn-secondary:after, .banner-box .btn-primary:disabled.btn-primary:after, .banner-box .btn-primary:disabled.btn-secondary:after, .banner-box .btn-primary[disabled].btn-primary:after, .banner-box .btn-primary[disabled].btn-secondary:after, .banner-box .btn-secondary.disabled.btn-primary:after, .banner-box .btn-secondary.disabled.btn-secondary:after, .banner-box .btn-secondary:disabled.btn-primary:after, .banner-box .btn-secondary:disabled.btn-secondary:after, .banner-box .btn-secondary[disabled].btn-primary:after, .banner-box .btn-secondary[disabled].btn-secondary:after
    {
        top: .625rem;
        left: .5rem;
    }
}
.banner-link-wrapper
{
    color: inherit;
}
.banner-link-wrapper:hover
{
    color: initial;
}
.banner-heading
{
    margin: 0;
}
.banner-heading+.banner-text, .banner-heading+.banner-buttons
{
    margin-top: 1rem;
}
.banner-text
{
    margin-bottom: 0;
}
.banner-text+.banner-buttons
{
    margin-top: 1.75rem;
}
@media(min-width: 820px)
{
    .banner-text
    {
        max-width: 50ch;
    }
}
.banner-buttons
{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 100%;
}
.banner-adapt, .banner-adapt_image.banner-mobile-bottom .banner-media:not(.placeholder)
{
    height: auto;
}
.no-image-banner
{
    border-bottom: 1px solid var(--color-border);
}
.banner-newsletter-form .newsletter-form-field-wrapper
{
    margin: 1.5rem auto 0 auto;
}
.banner-newsletter-form .newsletter-form
{
    margin: 0 auto;
}
.image-banner-container
{
    padding-right: var(--container-padding-sm);
    padding-left: var(--container-padding-sm);
}
@media screen and (min-width: 820px)
{
    .image-banner-container.extended-height
    {
        padding-bottom: calc(var(--stacked-component-sm) + 12.375rem);
    }
}