/*------------------------------------*\
    
    Full-Width Image + Text Block Customizations - Global Styling

    The styles you add to this file will be applied to the 'Full-Width Image + Text' block. 
    If there is any reasons why you would need to style this separately,
    please create a block-specific stylesheet for it (don't forget to register that block-specific stylesheet in acf-starter-blocks.php)

\*------------------------------------*/

.full-width-image-text {
    position: relative;
    background-color: var(--blue); 
}

.full-width-image-text__img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.full-width-image-text__content {
    padding: 0;
    position: relative;
    z-index: 2;
}

.full-width-image-text__headline {
    margin-top: 0;
}

.full-width-image-text--direct-overlay .full-width-image-text__content {
    padding: 0 20px;
}

.full-width-image-text--box-overlay .full-width-image-text__content {
    padding: 46px 19px;
}

.full-width-image-text--direct-overlay .full-width-image-text__headline,
.full-width-image-text--direct-overlay .full-width-image-text__description p,
.full-width-image-text--direct-overlay .full-width-image-text__description ul li,
.full-width-image-text--direct-overlay .full-width-image-text__description ol li {
    color: var(--color-white);
}

.full-width-image-text--direct-overlay .full-width-image-text__description ul li:before {
    background-color: var(--color-white);
}

.full-width-image-text--box-overlay .full-width-image-text__headline {
    color: #161E43;
    padding-bottom: 16px;
}

.full-width-image-text--direct-overlay h5 {
    color: #fff
}

.full-width-image-text--direct-overlay h5 span::before {
    background: var(--color-white);
}

.full-width-image-text--box-overlay h5 span::before {
    background: var(--color-blue);
}

.full-width-image-text--box-overlay h5 {
    color: #1D428A
}

.full-width-image-text--box-overlay .full-width-image-text__description p,
.full-width-image-text--box-overlay .full-width-image-text__description ul li,
.full-width-image-text--box-overlay .full-width-image-text__description ol li {
    color: var(--color-charcoal);
}

.full-width-image-text--box-overlay .full-width-image-text__description ul li:before {
    background-color: var(--color-charcoal);
}

.full-width-image-text--direct-overlay:before {
    background: linear-gradient(to right,  rgba(29,66,138,1) 0%,rgba(0,118,128,0.75) 41%,rgba(0,118,128,0.15) 100%); 
    opacity: 1;
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.full-width-image-text--box-overlay:before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .50;
    background: var(--color-teal); 
    display: block;
}

.full-width-image-blue-overlay:before {
    opacity: .50;
    background: var(--color-blue); 
}

.full-width-image-white-overlay:before {
    opacity: .30;
    background: var(--color-white); 
}

.full-width-image-black-overlay:before {
    opacity: .75;
    background: var(--color-black); 
}


/* Full-Width Image + Text - Text Box Overlay */
.full-width-image-text--box-overlay .full-width-image-text__content {
    background-color: rgba(248, 248, 248, 0.95);
    border-radius: 4px; 
    color: var(--color-charcoal);
}

.full-width-image-text__description .btn {
    margin-top: 15px;
}

.full-width-image-gradient-overlay::before {
    opacity: 1;
    background: linear-gradient(135deg,  rgba(29,66,138,0.75) 0%,rgba(0,118,128,0.75) 80%,rgba(5,150,162,0.75) 100%); 
}

.full-width-image-gradient-overlay2::before {
    opacity: 1;
    background: linear-gradient(to right,  rgba(29,66,138,0.9) 0%,rgba(9,102,131,0.9) 60%,rgba(0,118,128,0.9) 76%,rgba(0,118,128,0.9) 100%);
}

@media (min-width: 768px) {

    .full-width-image-text--box-overlay .full-width-image-text__content {
        padding: 83px 97px;
    }

}

@media (min-width: 768px) {
    .full-width-image-text--box-overlay .full-width-image-text__content {
        padding: 92px 97px;
    }
}


.full-width-image-text--box-overlay .full-width-image-text__form {
    background-color: var(--color-white);
    padding: 39px 34px 48px 34px;
}

@media (min-width: 768px) {
    .full-width-image-text--box-overlay .full-width-image-text__form {
        padding: 62px 48px;
    }
}

@media (min-width: 1200px) {
    .full-width-image-text--box-overlay .full-width-image-text__form {
        padding: 62px 75px;
    }

    .full-width-image-gradient-overlay2::before {
        background: linear-gradient(to right,  rgba(29,66,138,1) 0%,rgba(0,118,128,0.75) 41%,rgba(0,118,128,0.15) 100%);
    }
}

.full-width-image-text--homepage .full-width-image-text__content > * {
    position: relative;
    transform: translate(0, -50px);
    opacity: 0;
}

.full-width-image-text--homepage .container {
    position: relative;
    z-index: 9;
}

.full-width-image-text__wrapper {
    position: relative;
    transform-origin: top;
    transform: scaleY(0);
}

.full-width-image-text__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-teal);
    z-index: 3;
    transform-origin: bottom;
    transform: scaleY(1);
}