/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*------------------------------------*\
    
    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 {
    position: relative;
    display: block;    
}

.flex-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.image-text .flex-row {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center
}

.image-text .flex-row.flex-reverse .image-text__text{
    margin-bottom: 0;
    padding-top: 0;
    margin-top: 30px;
}


.image-text .flex-row .image-text__text{
    margin-bottom: 30px;
    padding-top: 0;
    margin-top: 0;
}

.image-text.bg-light-blue{
    background-color: #E4F4FE;
    padding: 80px 0 80px 0;
    position: relative;    
    margin-top: 0;
}


.image-text.bg-light-blue.image-text--left.apply-both-angle{
    background-color: #E4F4FE;
    padding: 80px 0 100px 0;
    position: relative; 
}


.image-text.bg-light-blue.image-text--right.apply-both-angle{
    background-color: #E4F4FE;
    padding: 60px 0 120px 0;
    position: relative; 
}


.image-text .flex-row.flex-reverse{
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}


.image-text.no-top-angle{
    padding: 80px 0 80px 0;
    margin-top: 0;
}

.image-text.no-top-angle::before,
.image-text.no-top-angle::after{
    content: '';
    width: 0;
    height: 0;
}


.image-text.no-bottom-angle{
    padding-bottom: 80px;
    margin-bottom: 0;
}

.image-text--homepage {
    padding: 70px 0 74px 0;
}

.image-text__img__wrap {
    position: relative;
    margin-top: 0;
    height: 279px;
}

.image-text__img__wrap img {
    border-radius: 10px;
}

.top-image {
    position: absolute;
    width: 91px;
    z-index: 1;
    right: -16px;
    top: -24px;
}
.bottom-image {
    position: absolute;
    width: 53px;
    z-index: 1;
    left: -20px;
    bottom: -24px;
}

.image-text--inner {
    padding-top: 80px;
    padding-bottom: 80px;
}

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

.image-text.bg-light-blue.apply-both-angle::before{
    content: '';
    height: 50px;
    top: -50px;
    -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    background: #E4F4FE;
    position: absolute;
    width: 100%;
    left: 0;
}

.image-text.bg-light-blue.apply-both-angle::after{
    content: '';
    position: absolute;
    background: #ffffff;
    height: 50px;
    bottom: 0;
    width: 100%;
    left: 0;
    -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}



.image-text.bg-patterned.apply-both-angle::before{
    content: '';
    position: absolute;
    background: #ffffff;
    height: 50px;
    top: 0;
    width: 100%;
    left: 0;
    -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    transform: rotate(180deg);
}


.image-text.bg-patterned.apply-both-angle::after{
    content: '';
    position: absolute;
    background: #ffffff;
    height: 50px;
    bottom: -1px;
    width: 100%;
    left: 0;
    -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    transform: rotate(0deg);
}


.image-text.bg-patterned.apply-both-angle{
    padding: 110px 0 130px;
}

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

.image-text--curve__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    -o-object-fit: cover;
       object-fit: cover;
}


.image-text--curve .image-text__text__wrap .btn,
.image-text--inner .image-text__text__wrap .btn {
    margin-top: 20px;
}



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

.image-text__text p:last-child{
    padding-bottom: 0;
}

.image-text__text .js-fade__item p:last-of-type {
    padding-bottom: 25px;
}


.image-text.bg-white + .image-text.bg-light-blue.apply-both-angle{
    margin-top: 50px;
}


.image-text.bg-light-blue.apply-both-angle + .image-text.bg-patterned.apply-both-angle{
    z-index: 2;
    margin-top: -50px;        
}


.image-text.bg-light-blue + .image-text.bg-patterned.apply-both-angle::before{
    background: #E4F4FE;
    content: '';
}

.image-text.bg-light-blue.apply-both-angle + .image-text.bg-patterned.apply-both-angle::before{
    background: #E4F4FE;
    content: '';
}


/* First element  */

.bialty-container > .image-text.apply-both-angle:first-child::before {
    content: none !important;
}


/* Last element  */

.bialty-container > .image-text.apply-both-angle:last-child::after {
    content: none !important;
}

.bialty-container > .image-text.apply-both-angle:last-child{
    padding: 70px 0;
}





@media (min-width: 768px) {
    .image-text--homepage {
        padding: 50px 0 84px 0;
    }

    
    
    .image-text__img__wrap {
        margin-top: 0;
        height: 360px;
    }
    
    .top-image {
        width: 91px;
        right: -16px;
        top: -20px;
    }
    .bottom-image {
        width: 53px;
        left: -20px;
        bottom: -22px;
    }

    .image-text--inner {
        padding-bottom: 80px;
        padding-top: 80px;
    }
    
    .image-text--curve {
        padding: 80px 0 80px 0;
    }


    .image-text.bg-light-blue.apply-both-angle{
        background-color: #E4F4FE;
        padding: 60px 0 140px 0;
        position: relative;        
    } 


   
    .image-text .flex-row.flex-reverse .image-text__text{
        margin-bottom: 0;
        padding-top: 0;
        margin-top: 40px;
    }


    .image-text .flex-row .image-text__text{
        margin-bottom: 40px;
        padding-top: 0;
        margin-top: 0;
    }


    .image-text.bg-light-blue.apply-both-angle::before{        
        height: 60px;
        top: -60px;        
    }

    .image-text.bg-light-blue.apply-both-angle::after{        
        height: 60px;
        bottom: 0;        
    } 


    .image-text.bg-patterned.apply-both-angle{
        padding: 130px 0 110px;
    }


    .image-text.bg-white + .image-text.bg-light-blue.apply-both-angle{
        margin-top: 60px;
    }


    .image-text.bg-light-blue.apply-both-angle + .image-text.bg-patterned.apply-both-angle{
        z-index: 2;
        margin-top: -60px;        
    }



}

@media (min-width: 1200px) {
    .image-text--homepage {
        padding: 100px 0 100px 0;
    }

    
    .image-text .flex-row.flex-reverse{
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
    }

    .image-text .flex-row.flex-reverse .image-text__text{
        padding-left: 108px;
    }

    
    .image-text.image-text--right.bg-light-blue.apply-both-angle{
        background-color: #E4F4FE;
        padding: 60px 0 180px 0;
        position: relative;        
    }  

    


    .image-text.image-text--left.bg-light-blue.apply-both-angle{
        background-color: #E4F4FE;
        padding: 100px 0 160px 0;
        position: relative;        
    }  

    .image-text.bg-light-blue.apply-both-angle::before{     
        content: '';   
        height: 86px;
        top: -85px;        
    }

    .image-text.bg-light-blue.apply-both-angle::after{    
        content: '';     
        height: 86px;
        bottom: 0;        
    }  


    .image-text.bg-light-blue{
        background-color: #E4F4FE;
        padding: 100px 0;
        position: relative;    
    }

    .image-text__text{
        padding-top: 0;
    }
    
    .image-text__img__wrap {
        margin-top: 43px;
        margin-bottom: 31px;
        height: 571px;
    }
    
    .top-image {
        width: 190px;
        right: -55px;
        top: -43px;
    }
    .bottom-image {
        width: 102px;
        left: -54px;
        bottom: -36px;
    }

    .image-text__text__wrap {
        max-width: 510px;
    }

    .image-text.image-text--right.bg-patterned.apply-both-angle{
        padding: 140px 0 170px;
    }

    .image-text.image-text--left.bg-patterned.apply-both-angle{
        padding: 170px 0 140px;
    }

    .image-text.bg-patterned.apply-both-angle::before{        
        height: 86px;
        top: 0;        
    }


    .image-text.bg-patterned.apply-both-angle::after{        
        height: 86px;
        bottom: 0;        
    }



    .image-text.image-text--curve.bg-patterned{
        padding: 100px 0;
    }


    .image-text.no-both-angle{
        padding-top: 100px;
        padding-bottom: 100px;
        margin-top: 0;
        margin-bottom: 0;
    }  


    .image-text .flex-row.flex-reverse .image-text__text{
        margin-bottom: 0;
        padding-top: 0;
        margin-top: 0;
    }


    .image-text .flex-row .image-text__text{
        margin-bottom: 0;
        padding-top: 0;
        margin-top: 0;
    }

    .image-text.bg-white + .image-text.bg-light-blue.apply-both-angle{
        margin-top: 86px;
    }


    .image-text.bg-light-blue.apply-both-angle + .image-text.bg-patterned.apply-both-angle{
        z-index: 2;
        margin-top: -86px;        
    }


    .bialty-container > .image-text.apply-both-angle:first-child{
        padding-top: 100px;
    }

    .bialty-container > .image-text.apply-both-angle:last-child{
        padding-bottom: 100px;
    }

    

    
}