/* ********** Container Image Text Inline ********** */

.container-image-text-inline,
.container-image-text-overlap
{
    .medium-text{
        @include base-text(3.3rem, 300, 1.2em);
        display:block;
        margin-bottom:3.6rem;
        color:$second-color;
    }
}

.container-image-text-inline{
    padding-top:7rem;
    padding-bottom:7rem;

    .big-title{
        @include base-text(9rem, 500, 0.95em, 2px);
        font-style:italic;
        font-family:$second-font;
        margin-bottom:3.6rem;
        margin-top:2rem;
    }

    .small-title{
        color:$second-color;
        @include base-text(2.2rem, 400, 1.1em, 6px, uppercase);
        margin-bottom:4.4rem;
    }

    p{
        color:$main-color;
        @include base-text(1.9rem, 200, 1.6em);
        margin-left:1.8rem;
        margin-bottom:5.4rem;
    }

    blockquote{
        display:block;
        margin-bottom:4rem;

        p{
            @include base-text(5.1rem, 500, 1.1em, 1px);
            font-style:italic;
            font-family:$second-font;
            margin-left:0;
            margin-bottom:0;
            color:$main-color;
        }
    }

    cite{
        margin-bottom:5rem;
        @include base-text(2.2rem, 200, 1.2em, 0);
        font-family:$main-font;
        font-style:normal;
        display:block;
    }

    .row{
        padding-top:6rem;
        padding-bottom:6rem;

        .col{
            position:relative;
            margin-bottom:3rem;

            &.col-image img{
                padding-right:2rem;
            }

            &.col-text{
                padding-top:1.6rem;
            }

            &:nth-child(odd){

            }

            &:nth-child(event){

            }
        }

        &.row-reverse{
            .col-image img{
                padding-right:0;
                padding-left:2rem;
            }

            .over-pdf{
                padding-left:11rem;

                .icon-pdf{
                    left:0;
                    @include transformTranslateY(-50%);
                }
            }
        }
    }

    figure{
        position:relative;

        .over-image{
            position:relative;
            height:calc(((1300px / 2) * 400) / 560);
            overflow:hidden;
        }

        .image-bg{
            display:block;
            position:absolute;
            left:0;
            top:-45px;
            width:100%;
            height:calc(100% + 60px);
        }

        figcaption{
            font-family:$second-font;
            @include base-text(1.5rem, 700, 1.2em, 5px, uppercase);
            color:$second-color;
            position:absolute;
            bottom:0.5rem;
            left:-7rem;
            -webkit-writing-mode:vertical-rl; writing-mode:vertical-rl;
            @include transformRotate(180deg);
        }
    }

    .over-pdf{
        width:100%;
        position:relative;

        .icon-pdf{
            position:absolute;
            left:-23.5%;
            top:50%;
            display:inline-block;
            background-color:$second-color;
            border:1rem solid $white;
            width:9.4rem;
            height:9.4rem;
            @include transformTranslate(-50%, -50%);
            @include border-radius(50%);

            svg{
                position:absolute;
                left:50%;
                top:50%;
                @include transformTranslate(-50%, -50%);
                fill:$white;
                padding:0;
            }
        }
    }

    .small-border{
        margin:5rem auto;
    }

    .row-reverse figure figcaption{
        left:auto;
        right:-7rem;
    }

    img{
        width:100%;
    }

    .variant-quote-blog{
        padding-top:11rem;

        .col-text{
            text-align:center;
            margin-top:-11rem;

            img{
                max-width:30rem;
                margin-bottom:5rem;
            }
        }

        .bubble-quote{
            margin-left:auto;
            margin-right:auto;
            margin-bottom:3rem;
        }

        cite{
            @include base-text(1.7rem, 300, 1.2em);
            color:$main-color;

            strong{
                margin-bottom:0.25rem;
                display:block;
                @include base-text(2.2rem, 400, 1.2em, 1px);
                color:$second-color;
            }
        }
    }

    &.container-image-text-inline-2{
        figure{
            height:calc((33.333333vw * 630) / 420);
            max-height:70rem;
            margin-top:-10rem;
        }

        p{
            margin-left:0;
            margin-bottom:3rem;
        }
    }

    @media screen and (max-width: 1560px){
        figure figcaption{
            left:-4rem;
        }

        .row-reverse figure figcaption{
            right:-4rem;
        }
    }

    /*@media screen and (max-width: 1480px){
        figure{
            height:calc(((50vw - 40) * 400) / 560);
        }
    }*/

    @media screen and (max-width:1440px){
        .big-title{
            font-size:8rem;
        }
    }

    @media screen and (max-width:1420px){
        figure figcaption{
            display:none;
        }
    }

    @media screen and (max-width: 1300px){
        figure{
            .over-image{
                height:calc(((50vw - 20px) * 400) / 560);
            }
        }
    }

    @media screen and (max-width:1200px){
        .big-title{
            font-size:7.4rem;
        }

        .small-title{
            font-size:2.1rem;
        }

        blockquote p{
            font-size:4.4rem;
        }

        cite{
            font-size:2.1rem;
        }

        .over-pdf .icon-pdf{
            left:-13.25%;
            width:8rem;
            height:8rem;
            border-width:0.8rem;

            svg{
                width:2.8rem;
                height:2.8rem;
            }
        }

        &.container-image-text-inline-2{
            figure{
                margin-top:-6rem;
            }
        }
    }

    @media screen and (max-width:1024px){
        padding-top:4rem;

        .big-title{
            font-size:6.4rem;
        }

        .small-title{
            margin-bottom:3rem;
        }

        p{
            font-size:1.7rem;
            margin-bottom:4.8rem;
        }

        blockquote{
            margin-bottom:3.5rem;
        }

        cite{
            margin-bottom:3rem;
        }

        .variant-quote-blog{
            .bubble-quote{
                margin-bottom:2.4rem;
            }

            .col-text img{
                margin-bottom:4rem;
            }
        }

        .small-border{
            margin-top:4rem;
            margin-bottom:4rem;
        }

        .row{
            padding-top:3rem;
        }

        &.container-image-text-inline-2{
            figure{
                margin-top:-4rem;
            }
        }
    }

    @media screen and (max-width:850px){
        .big-title{
            font-size:5.6rem;
            margin-bottom:3rem;
        }

        .small-title{
            font-size:2rem;
        }

        p{
            font-size:1.6rem;
            margin-bottom:4rem;
        }

        blockquote{
            margin-bottom:3rem;

            p{
                font-size:3.8rem;
            }
        }

        cite{
            margin-bottom:2.6rem;
            font-size:2rem;
        }

        .row .col{
            margin-bottom:4rem;
        }

        .small-border{
            margin-top:3rem;
            margin-bottom:3rem;
    }

        .variant-quote-blog{
            .col-text{
                margin-top:-8rem;

                img{
                    margin-bottom:3rem;
                }
            }
        }
    }

    @media screen and (max-width: 807px){
        &.container-image-text-inline-2{
            padding-left:20px;
            padding-right:20px;
        }
    }

    @media screen and (max-width:767px){
        p{
            margin-bottom:3.2rem;
        }

        figure{
            .over-image{
                height:calc(((100vw - 20px) * 400) / 560);
            }
        }

        .row{
            padding-bottom:3rem;

            .col{
                margin-bottom:1rem;

                &.col-image img{
                    padding-right:0;
                    padding-left:0;
                }
            }
        }

        .variant-quote-blog .col-text{
            margin-top:0;
        }

        .over-pdf{
            padding-left:10rem !important;

            .icon-pdf{
                left:0;
                @include transformTranslateY(-50%);
            }
        }

        &.container-image-text-inline-2{
            figure{
                height:calc(((100vw - 40) * 630) / 420);
            }
        }
    }

    @media screen and (max-width:650px){
        .big-title{
            font-size:4.6rem;
        }

        p{
            font-size:1.5rem;
            margin-bottom:2.6rem;
        }

        .row{
            padding-top:2rem;
            padding-bottom:3rem;
        }

        .over-pdf{
            padding-left:8rem !important;

            .icon-pdf{
                width:7rem;
                height:7rem;

                svg{
                    width:2.4rem;
                    height:2.4rem;
                }
            }
        }
    }

    @media screen and (max-width: 450px){
        .big-title{
            font-size:4rem;
            margin-bottom:2.4rem;
        }

        .small-title{
            font-size:1.9rem;
            letter-spacing:3px;
        }

        blockquote p{
            font-size:3.4rem;
        }

        cite{
            font-size:1.9rem;
        }
    }
}

/* ********** Container Image Text Overlap ********** */
.container-image-text-overlap{
    background-color:#f0f5fa;
    padding-top:7rem;
    padding-bottom:11rem;

    .row{
        margin-left:-2rem;
        margin-right:-2rem;

        .col{
            padding-left:2rem;
            padding-right:2rem;
            margin-bottom:4rem;

            &:before{
                left:auto;
                right:0;
            }

            &:nth-child(2n):before{
                left:0;
            }
        }
    }

    figure{
        position:relative;
        line-height:0;

        .over-image{
            position:relative;
            height:calc(((1300px / 2) * 400) / 560);
            overflow:hidden;
        }

        .image-bg{
            display:block;
            position:absolute;
            left:0;
            top:-45px;
            width:100%;
            height:calc(100% + 60px);
        }

        &:before{
            content:" ";
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
            background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.65) 100%);
            background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 75%,rgba(255,255,255,0.65) 100%);
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 75%,rgba(255,255,255,0.65) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#a6ffffff',GradientType=0 );
            z-index: 9;
        }

        figcaption{
            font-family:$second-font;
            @include base-text(1.5rem, 700, 1.2em, 5px, uppercase);
            color:$second-color;
            position:absolute;
            bottom:0.5rem;
            left:-7rem;
            -webkit-writing-mode:vertical-rl; writing-mode:vertical-rl;
            @include transformRotate(180deg);
        }

        img{
            width:100%;
        }
    }

    .col-right figure figcaption{
        left:auto;
        right:-7rem;
    }

    .big-title{
        @include base-text(7.7rem, 500, 1.1em, 2px);
        font-style:italic;
        font-family:$second-font;
        margin-left:4.4rem;
        margin-bottom:3.2rem;
    }

    p{
        @include base-text(1.8rem, 200, 1.6em);
        margin-bottom:3.8rem;
    }

    .content-text{
        margin-top:-4.8rem;
        position:relative;
        z-index:9;
    }

    &.alternate-vertical {
        background:none;
        .content-text{
            margin-top:2rem;
        }

        figure{
            margin-bottom : 4.4rem;
            &:before{
                position: initial;
                width:0;
                height:0;
                background:none;
            }
            img {
                -webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.1), 0 15px 12px rgba(0,0,0,0.06);
                box-shadow: 0 19px 38px rgba(0,0,0,0.1), 0 15px 12px rgba(0,0,0,0.06);
            }
        }
        .medium-text {
            @include base-text(3.4rem, 400, 1.1em, 1px);
            margin-bottom:3.2rem;
        }
    }

    @media screen and (max-width:1440px){
        .big-title{
            font-size:7rem;
            margin-left:4%;
        }

        .content-text{
            margin-top:-4.4rem;
        }
    }

    @media screen and (max-width:1300px){
        figure{
            .over-image{
                height:calc(((50vw - 20px) * 400) / 560);
            }
        }
    }

    @media screen and (max-width:1200px){
        padding-bottom:10rem;

        .big-title{
            font-size:6.4rem;
        }

        .content-text{
            margin-top:-4.1rem;
        }
    }

    @media screen and (max-width:1024px){
        padding-bottom:9rem;

        .big-title{
            font-size:5.8rem;
            letter-spacing:1px;
            margin-bottom:2.8rem;
        }

        .content-text{
            margin-top:-3.6rem;
        }

        p{
            font-size:1.7rem;
            margin-bottom:3.2rem;
        }
    }

    @media screen and (max-width:850px){
        padding-bottom:8rem;

        .big-title{
            font-size:5rem;
            margin-bottom:2.4rem;
        }

        .content-text{
            margin-top:-3.1rem;
        }

        p{
            font-size:1.6rem;
            margin-bottom:2.8rem;
        }
    }

    @media screen and (max-width:767px){
        .big-title{
            font-size:5.8rem;
        }

        figure{
            .over-image{
                height:calc(((100vw - 20px) * 400) / 560);
            }
        }

        .content-text{
            margin-top:-3.6rem;
        }

        .row .col{
            margin-bottom:6rem;
        }
    }

    @media screen and (max-width:650px){
        padding-top:5rem;

        p{
            font-size:1.5rem;
            margin-bottom:2.2rem;
        }
    }

    @media screen and (max-width: 450px){
        .big-title{
            font-size:4.4rem;
        }

        .content-text{
            margin-top:-2.9rem;
        }
    }
}