/* Old Hero Image Styles */
.hero-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10rem 3rem;
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
}

.hero-image.overlay {
    padding: 10rem 3rem;
}

.hero-image.overlay,
.hero.overlay {
    position: relative;
    max-width: unset;
}

.hero-image.overlay:before,
.hero.overlay:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-background-color);
    opacity: var(--overlay-opacity);
}

.hero-image h1 {
    font-size: 3.75rem;
    font-weight: 800;
}

.hero-image p {
    font-size: 1.25rem;
    font-weight: 500;
}

@media (max-width: 768px){
    .hero-image h1 {
        font-size: 2.5rem;
    }
}

.hero .hero-content {
    margin-top: auto;
    margin-bottom: auto;
}

/* New Hero Styles */
.hero {
    --hero-spacing-y: 3.0rem;
    --hero-spacing-y-sm: 1.5rem;
    --hero-spacing-y-md: 4.5rem;
    --hero-spacing-y-lg: 9.0rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
}

.hero video {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.hero { --hero-margin: var(--hero-spacing-y); }
.hero.is-small { --hero-margin: var(--hero-spacing-y-sm); }
.hero.is-medium { --hero-margin: var(--hero-spacing-y-md); }
.hero.is-large { --hero-margin: var(--hero-spacing-y-lg); }
.hero.is-halfheight { min-height: 50vh; }
.hero.is-fullheight { min-height: 100vh; }

.hero .overlay { margin: var(--hero-margin) auto; position: relative; }

.hero h1 { font-size: 3.75rem; font-weight: 800; }
.hero p { font-size: 1.25rem; font-weight: 500; }

.hero.is-small .overlay { padding: 0.25rem 1rem; }
.hero.is-small h1 { font-size: 1.75rem; }
.hero.is-small p { font-size: 1rem; }

.hero .overlay.overlay-top-left { margin-top: 1rem; margin-bottom: calc(2 * var(--hero-margin) - 1rem); margin-left: 1rem; }
.hero .overlay.overlay-top-center { margin-top: 1rem; margin-bottom: calc(2 * var(--hero-margin) - 1rem); }
.hero .overlay.overlay-top-right { margin-top: 1rem; margin-right: 1rem; margin-bottom: calc(2 * var(--hero-margin) - 1rem); }
.hero .overlay.overlay-middle-left { margin-left: 1rem;  }
.hero .overlay.overlay-middle-center { }
.hero .overlay.overlay-middle-right { margin-right: 1rem; }
.hero .overlay.overlay-bottom-left { margin-top: calc(2 * var(--hero-margin) - 1rem); margin-bottom: 1rem; margin-left: 1rem; }
.hero .overlay.overlay-bottom-center { margin-top: calc(2 * var(--hero-margin) - 1rem); margin-bottom: 1rem;}
.hero .overlay.overlay-bottom-right { margin-top: calc(2 * var(--hero-margin) - 1rem); margin-right: 1rem; margin-bottom: 1rem; }

.hero.is-halfheight .overlay { margin: auto; }
.hero.is-fullheight .overlay { margin: auto; }

.hero.is-halfheight .overlay.overlay-top-left,
.hero.is-halfheight .overlay.overlay-top-center,
.hero.is-halfheight .overlay.overlay-top-right,
.hero.is-fullheight .overlay.overlay-top-left,
.hero.is-fullheight .overlay.overlay-top-center, 
.hero.is-fullheight .overlay.overlay-top-right {
    margin-top: 1rem;
}

.hero.is-halfheight .overlay.overlay-top-right,
.hero.is-halfheight .overlay.overlay-middle-right,
.hero.is-halfheight .overlay.overlay-bottom-right,
.hero.is-fullheight .overlay.overlay-top-right
.hero.is-fullheight .overlay.overlay-middle-right,
.hero.is-fullheight .overlay.overlay-bottom-right{
    margin-right: 1rem;
}

.hero.is-halfheight .overlay.overlay-bottom-left,
.hero.is-halfheight .overlay.overlay-bottom-center,
.hero.is-halfheight .overlay.overlay-bottom-right,
.hero.is-fullheight .overlay.overlay-bottom-left,
.hero.is-fullheight .overlay.overlay-bottom-center,
.hero.is-fullheight .overlay.overlay-bottom-right {
    margin-bottom: 1rem;
}

.hero.is-halfheight .overlay.overlay-top-left,
.hero.is-halfheight .overlay.overlay-middle-left,
.hero.is-halfheight .overlay.overlay-bottom-left,
.hero.is-fullheight .overlay.overlay-top-left,
.hero.is-fullheight .overlay.overlay-middle-left,
.hero.is-fullheight .overlay.overlay-bottom-left {
    margin-left: 1rem;
}

@media (max-width: 768px) {
    .hero h1 { font-size: 2.5rem; }
}

@media screen and (min-width: 769px) {
    .hero .overlay { padding: 3rem 3rem; }
}

/* For Banner */
.hero.hero-video .hero-text-wrapper {
    margin: 10rem 5rem;
    position: relative;
}