.page-header {
    position: relative;
    background: url(../imgs/header.jpg) no-repeat center top fixed;
    background-size: cover;
    height: 450px;

    @include media-breakpoint-down(sm) {
        max-height: 350px;
    }

    &:after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba($white,.2);
    }

    &.page-header-mini {
        height: 250px;
        background: lighten($primary, 8%);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .title {
            color: $gray-800;
            font-size: calc(38px + (50 - 48) * ((100vw - 320px) / (1200 - 320)));
            z-index: 10;
            font-weight: bold;          
        }

        &:after {
            display: none;
        }
    }

}

// header mini
.header-mini {
    min-height: 24rem;
    height: 24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    background: lighten($primary, 5%) !important;

    .header-title {
        font-size: 2.4rem;
        font-weight: bold;
        opacity: .8;
        color: $body-color;
    }
}
