/* Full Width Panel Banner */
/* Requires variables_1.0.css */
/* Reference HTML
<div class="top-banner-wrapper welcome">
<div class="sub-wrapper">
    <div class="copy">
        <h1></h1>
        <p></p>
    </div>
</div>
</div>

*/

.top-banner-wrapper {
    display: flex;
    background: url(/media/wysiwyg/banner.header.jpg);
    background-size: cover;
    background-position: center right;
    justify-content: flex-start;
    align-items: center;
}

.banner-wrapper p {
    font-size: 2rem;
    line-height: 1.5em;
}

.sub-wrapper {
    margin: auto;
    max-width: 100rem;
    width: 100%;
    min-height: 20rem;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
}

.sub-wrapper .copy {
    margin: 0;
    padding: 2rem;
    width: calc(100% - 4rem);
}

.top-banner-wrapper h1 {
    font-size: 3rem;
    line-height: 1.25em;
    margin: 0 0 2rem 0;
}

@media screen and (min-width: 640px) {

    .banner-wrapper .inner-wrapper {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        align-items: center;
    }

    .banner-wrapper .left, .banner-wrapper .right {
        width: 100%;
    }
}

@media screen and (min-width: 768px) {

    .banner-wrapper .inner-wrapper {
        margin: auto;
    }

    .banner-wrapper img {
        height: 30rem;
    }

    .banner-wrapper .right {
        text-align: center;
    }

    .banner-wrapper .inner-wrapper, 
    .cms-page-view .column.main {
        padding: 2rem 0;
        max-width: calc(100% - 6rem);
        margin: 0 auto;
    }

    .sub-wrapper {
        background: unset;
    }

    .header.content {
        padding: 2rem;
    }

}

@media screen and (min-width: 1024px) {


    .sub-wrapper .copy {
        margin: 5rem 0;
        background: rgba(255,255,255, .7);
        color: #000;
        padding: 2rem 3rem;
        width: calc(100% - 6rem);
    }

    .sub-wrapper {
        min-height: 40rem;
    }

}