/*------------------------------------*\
    
    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__flex {
    display: flex;
    flex-wrap: wrap;
}

.image-text {
    margin: 40px 0;
}

.masthead--innerpage + .image-text {
    margin-top: 0;
}

.image-text .image-text__flex {
    align-items: center
}

.image-text__wrap {
    padding: 42px 22px 52px 22px;
    margin: 0 -22px;
}

.image-text__text {
    padding-bottom: 30px;
}

.image-text__img {
    height: 257px;
    position: relative;
    border-bottom: 0;
} 

.image-text__img--video {
    height: 211px;
}

.image-text__img img {
    border-radius: 5px;
}

.image-text__video {
    display: block;
    height: 100%;
    border: none;
    position: relative;
}

.play-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-btn__button {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    position: relative;
    z-index: 1;
    background: url(/wp-content/themes/fx/assets/img/play-bttn.png) 0 0 no-repeat;
    background-size: cover;
}

.play-btn__button i {
    position: relative;
    z-index: 3;
}
   

@media (min-width: 768px) {
    .image-text {
        margin: 60px 0;
    }

    .image-text__wrap {
        padding: 52px 58px 62px 58px;
        margin: 0 0 0 0;
        border-radius: 5px;
    }

    .image-text__text {
        padding-bottom: 42px;
    }

    
    .image-text__img {
        height: 427px;
    } 

    .image-text__img--video {
        height: 353px;
    }

    .play-btn__button {
        width: 102px;
        height: 102px;
        font-size: 38px;
    }
    
}

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

    .image-text {
        margin: 80px 0;
    }

    .image-text__wrap {
        padding: 18px 20px;
        margin: 0 0 0 0;
    }

    .image-text__text {
        padding-bottom: 0;
        padding-left: 46px;
        padding-right: 30px;
    }

    
    .image-text__img,
    .image-text__img--video {
        height: auto;
    }

    .image-text--right .image-text__text {
        padding-left: 58px;
        padding-right: 20px;
    }

    .play-btn__button {
        width: 110px;
        height: 110px;
        font-size: 41px;
    }

    .half-media-main-image--video:hover .play-btn__button:before,
    .image-text__img--video:hover .play-btn__button:before {
        transform: scale(1);
        opacity: 1;
    }

    .half-media-main-image--video:hover .play-btn__button:after,
    .image-text__img--video:hover .play-btn__button:after {
        opacity: 0.4;
        transform: scale(1.25);
        transition-delay: 0.1s;
    }

    .play-btn__button:before,
    .play-btn__button:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #1296C3;
        opacity: 1;
        opacity: 0;
        transform: scale(0);
        transition: transform 0.3s ease-in-out,
                    opacity 0.3s ease-in-out;
    }

    .play-btn__button:before {
        z-index: 1;
    }

    .play-btn__button:after {
        opacity: 0.4;
        z-index: 2;
    }
}