/*------------------------------------*\
    
    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;
}

.full-width-image-text__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    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__description :last-child {
    margin-bottom: 0;
}

/* Full-Width Image + Text - Text Box Overlay */
.full-width-image-text--box-overlay .full-width-image-text__content {
    background-color: rgba(255,255,255,0.8);
    padding: 40px 40px 45px 40px;
}


.full-width-transparent-box {
    position: relative;
    z-index: 2;
    padding: 0;
    overflow: hidden;
    padding: 35px 30px;
    max-width: 802px;
    margin: 0 auto;
}

.full-width-transparent-box::before {
    background-color: #fff;
    width: 110%;
    height: 110%;
    filter: brightness(85%) blur(3px) opacity(95%);
    content: '';
    position: absolute;
    z-index: -1;
    top: -5%;
    left: -5%;
}

.full-width-transparent-box h3,
.full-width-image-text__headline {
    padding-bottom: 20px;
}

@media (min-width: 768px) {
    .full-width-transparent-box {
        padding: 60px 58px;
    }

    .full-width-transparent-box h3 {
        padding-bottom: 30px;
    }
}

@media (min-width: 1200px) {
    .full-width-transparent-box {
        padding: 70px;
    }

}



.full-width-image-text--direct-overlay:before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .80;
    background-color: #fff; 
    display: block;
}

@media (min-width: 768px) {
    .full-width-image-text--direct-overlay:before {
        opacity: 1;
        background: -moz-linear-gradient(left,  rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.8) 60%, rgba(255,255,255,0) 100%); 
        background: -webkit-linear-gradient(left,  rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.8) 60%,rgba(255,255,255,0) 100%);
        background: linear-gradient(to right,  rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.8) 60%,rgba(255,255,255,0) 100%);
       
    }

    .full-width-image-text__content--half {
        width: 405px
    }

    .full-width-image-text--box-overlay .full-width-image-text__content {
        padding: 40px 50px 50px 50px;
    }

    .full-width-image-text__content--half-white-bg {
        width: 375px;
    }

    .full-width-image-text__content--half-white-bg .subheading--left::before {
        width: 92px;
        left: -102px;
    }
    
}

@media (min-width: 1025px) {
    .full-width-image-text__content--half {
        width: 679px
    }

    .full-width-image-text--direct-overlay:before {
        width: 70%;
    }

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

    .full-width-image-text__content--half-white-bg {
        width: 818px;
    }

    .full-width-image-text__content--half-white-bg h3 {
        padding-bottom: 73px;
    }

    .full-width-image-text__content--half-white-bg .subheading--left::before {
        width: 252px;
        left: -272px;
    }

}