/*----------------------
    About
-----------------------*/
.about__img {
    // position: relative;

    img {
        border-radius: 3px;
    }
}

.about-layout1 {
    .heading-layout2 .heading__subtitle:after {
        display: none;
    }

    .btn__icon {
        height: 55px;
        line-height: 55px;
        min-width: 200px;
    }

    .cta__banner {
        position: absolute;
        bottom: 60px;
        left: -55px;
        border-radius: 4px 0 0 4px;
        padding: 30px;
        max-width: 290px;

        .cta__title {
            line-height: 1.4;
            margin-bottom: 22px;
        }

        .btn i {
            width: 32px;
            height: 32px;
            line-height: 32px;
            color: $color-theme;
            background-color: $color-white;
        }
    }
}

.about-layout2 {
    .text-block {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .imgs-block {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 30px;
        position: relative;
    }

    .list-items {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;

        li {
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
        }
    }

    .video__box {
        position: absolute;
        left: 60px;
        bottom: 55px;
        width: 165px;
        height: 165px;
        border-radius: 4px 4px 0 0;
        background-color: $color-theme;

        &:before {
            content: "";
            position: absolute;
            right: 0;
            bottom: -28px;
            width: calc(100% + 60px);
            height: 30px;
            border-radius: 0 0 4px 4px;
            background-color: $color-theme;
        }

        &:after {
            content: '';
            position: absolute;
            left: -60px;
            bottom: 0;
            width: 30px;
            height: 30px;
            border-radius: 4px 0 0 0;
            background-color: $color-theme;
        }

        .video__btn {
            position: absolute;
            top: 50%;
            left: 50%;
            @include prefix(transform, translate(-50%, -50%), webkit moz ms o);
        }
    }


    .btn__icon {
        min-width: 200px;
        height: 55px;
        line-height: 55px;
    }
}

/* Extra Large Size Screens */
@media (min-width:1200px) {
    .about-layout2 {
        .text-block {
            -ms-flex: 0 0 48%;
            flex: 0 0 48%;
            max-width: 48%;
            padding-left: 100px;
        }

        .imgs-block {
            -ms-flex: 0 0 52%;
            flex: 0 0 52%;
            max-width: 52%;
        }
    }
}

@media (min-width:1300px) {
    .about-layout1 {
        .heading-layout2 .heading__title {
            margin-left: -80px;
        }

        .inner-wrapper {
            padding-right: 70px;
        }
    }
}

@media (min-width:1500px) {
    .about-layout2 {
        .text-block {
            -ms-flex: 0 0 53%;
            flex: 0 0 53%;
            max-width: 53%;
            padding-left: 200px;
            padding-right: 50px;
        }

        .imgs-block {
            -ms-flex: 0 0 47%;
            flex: 0 0 47%;
            max-width: 47%;
        }
    }
}

@media (min-width:1700px) {
    .about-layout2 {
        .text-block {
            -ms-flex: 0 0 55%;
            flex: 0 0 55%;
            max-width: 55%;
            padding-left: 300px;
            padding-right: 100px;
        }

        .imgs-block {
            -ms-flex: 0 0 45%;
            flex: 0 0 45%;
            max-width: 45%;
        }
    }
}

@media (max-width:1200px) {
    .about-layout1 .cta__banner {
        bottom: 20px;
        left: 20px;
    }
}

/* Mobile Phones and tablets */
@include xs-screens {
    .about-layout2 {
        .list-items {
            -ms-flex-direction: column;
            flex-direction: column;

            li {
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

        .imgs-block {
            padding-right: 15px;
            padding-left: 15px;
        }

        .video__box {
            position: relative;
            left: 0;
            bottom: 0;
            border-radius: 4px;

            &:before,
            &:after {
                display: none;
            }
        }
    }
}