/*
This stylesheet is for use with the "Masthead" partial view file an describes the styling
which applies to the Masthead module, these styles should NOT affect other areas of the
site
*/
#masthead .background:before {
    width: 100%;
    height: 100%;
    content: '';
    background-color: #000;
    opacity: 0.5;
    position: absolute;
    z-index: 0;
    left: 0;
}

#masthead .background.curve:after {
    content: '';
    display: block;
    position: absolute;
    background-color: #FFF;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    bottom: -1px;
    height: 5rem;
    /*width: 100%;*/
    width: 110%;
    left: -63px;
}

@media(max-width: 320px) {
    #masthead .col-8 {
        flex: 0 0 68%;
        max-width: 68%;
    }
}

@media(max-width: 425px) {
    #masthead .background:after {
        left: -30px;
    }
}

.mastheadContent h1, .mastheadContent p {
    text-align: center;
    font-size: 2rem;
}

.mastheadText.RTE h1 {
    font-size: 3rem;
}

@media(min-width:48rem) {
    .mastheadText {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        justify-content: center;
        max-width: 70.75%;
    }
}

.btn-tall {
    line-height: calc(100% + 3px);
    padding: 1rem 2rem 1rem;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.5rem;
}

#masthead .background {
    /*min-height: 90vh;*/
    background-position: center;
    background-size: cover;
    position: relative;
    text-align: center;
    height: 43.75rem;
}

    #masthead .background .overlay {
        height: 100%;
        flex-direction: column;
        justify-content: center;
    }

    #masthead .background .overlay .mastheadContent {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

#masthead .mastheadLink {
    margin-bottom: 5rem;
    margin-top: -5rem;
}

#masthead .masthead-logo {
    max-height: 5rem;
}


#masthead .background h1,
#masthead .background h2,
#masthead .background h3,
#masthead .background h4,
#masthead .background h5,
#masthead .background h6,
#masthead .background p,
#masthead .background a,
#masthead .background .masthead-text {
    color: #FFF;
    margin: 0;
}

#masthead .background a:hover {
    color: #FFF;
}

#masthead .masthead-subtext {
    color: #FFF;
    /*font-size: 20px;*/
    font-size: 1.75em;
    margin-top: 0;
}

#masthead .buttonRow {
    margin-top: 2em;
}

#masthead .buttonRow .btn {
    border-width: 3px;
}

#masthead .btn-single {
    margin: 0 auto;
}

@media(min-width: 90.0625em) {
    #masthead .col-xxl-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    #masthead .col-xxl-3 {
        flex: 0 0 15%;
        width: 25%;
    }

    #masthead .offset-xxl-3 {
        margin-left: 35%;
    }
}

@media(min-width: 26.625em) {
    .background .overlay {
        width: 100%;
    }
}

@media(max-width: 26.5625em) {
    .buttonRow .module {
        margin-bottom: 25px;
    }
}

@media (max-width: 575px) {
    #masthead .buttonRow {
        margin: 2em auto;
    }
}