/*------------------------------------*\
    
    Contained Image + Text Block Customizations - Global Styling

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

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

.image-text--gray + .image-text--gray,
.image-text--gray-blueprint-overlay + .image-text--gray,
.image-text--gray + .image-text--gray-blueprint-overlay,
.image-text--gray-blueprint-overlay + .image-text--gray-blueprint-overlay {
    padding-top: 0;
}

.flex-row {
    display: flex;
    flex-wrap: wrap;
}

.image-text .flex-row {
    align-items: center
}

.image-text--white {
    background-color: #fff;
}

.image-text--gray,
.image-text--gray-blueprint-overlay {
    background: #E9E9E9;
}

.image-text--blue {
    background-color: #051632;
    color: #fff;
}

.image-text--blue ul li::before {
    background-color: #108DA0;
}

.image-text--blue .btn-primary {
    background: #F3F7FE;
    color: #020711;
}

.image-text--blue .btn-primary:hover {
    color: #F8F8F8;
    background: #000102;
}

.image-text__img {
    margin-bottom: 29px;
}

.image-text__img-right {
    height: 189px;
    position: relative;
}

.has-corner-image .image-text__img-right {
    margin-top: 45px;
}

.has-corner-image .image-text__img-right,
.has-corner-image  .image-video-text__flex--left .image-text__img-right {
    padding-left: 53px;
}

.image-text__img img {
    box-shadow: 0 10px 40px rgba(98,98,98,0.11);
}

.image-text__img img.image-text__img-right__float {
    position: absolute;
    top: -45px;
    left: 0;
    width: 184px;
    height: auto;
    box-shadow: 0 10px 40px rgba(98,98,98,0.18);
}

@media (min-width: 768px) {

    .image-text__img-right {
        height: 379px;
        margin-bottom: 12px;
    } 

    .has-corner-image .image-text__img-right {
        margin-top: 91px;
    }

    .has-corner-image .image-text__img-right,
    .has-corner-image .image-video-text__flex--left .image-text__img-right {
        padding-left: 106px;
    }

    .image-text__img img.image-text__img-right__float {
        top: -91px;
        width: 370px;
        height: auto;
    }

    .image-text__img {
        margin-bottom: 58px;
    }

    .image-text__text h2 {
        padding-right: 30px;
    }

    .image-text__text p:not(:last-child) {
        padding-bottom: 30px;
    }
    
    
}


@media (min-width: 1200px) {
    .flex-opposite {
        flex-direction: row-reverse;
    }

    .image-text__img-right {
        height: 435px;
        margin-bottom: 0;
    }

    .has-corner-image .image-text__img-right {
        padding-left: 79px;
        margin-top: 105px;

    }

    .image-text--left .image-text__img,
    .image-video-text__flex--left .image-text__img-right {
        padding-right: 60px;
    }
    
    .image-text--right .image-text__img {
        padding-left: 60px;
    }

    .image-text__img img.image-text__img-right__float {
        top: -105px;
        width: 343px;
    }

    .image-text__img {
        margin-bottom: 0;
    }

    .image-text__text p:not(:last-child) {
        padding-bottom: 40px;
    }

}


/* One image only */
.has-corner-image.one-image-only .image-text__img-right,
.has-corner-image.one-image-only .image-video-text__flex--left .image-text__img-right,
.one-image-only .image-text__img-right {
    padding-left: 0;
    margin-top: 0;
}

.one-image-only .image-video-text__flex--left .image-text__img-right {
    padding-right: 0;
}


/* Gray Blueprint overlay */
.image-text--gray-blueprint-overlay {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.gray-blueprint-overlay__img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

@media (min-width: 1200px) {

    .one-image-only .image-video-text__flex--left .image-text__half {
        padding-right: 60px;
    }

    .one-image-only .image-video-text__flex--left .image-text__img-right {
        padding-right: 0;
    }
    
    .gray-blueprint-overlay__img {
        width: auto !important;
        left: -175px;
    }    
}