﻿@media only screen and (max-width: 991px) {

    .carousel-item img {
        height: auto
    }

    .about-inner {
        width: 100% !important;
    }

    .choose-in-out-1 .choose-in-1{
        padding:10px;
    }

    /*#our_studio .row{
        align-items:center !important;
    }

    .studio-pic .owl-carousel .sub-inner img {
        width: 100%;
        margin: auto; 
        height: 476px;
    }

    .owl-nav .owl-next, .owl-prev {
        right: -22px;
    }

    .owl-nav .owl-prev{
        left:-20px;
    }*/
}





    @media (min-width: 1400px) and (max-width: 1699px) {
        .banner-right {
            padding-left: 45px;
        }

            .banner-right .sale {
                transform: translateY(-70px);
                -webkit-transform: translateY(-70px);
            }

        .banner-right-inner {
            padding: 30px 15px 20px;
            margin-top: 35px;
        }

        .family > img,
        .sale > img {
            margin-top: 35px;
        }

        .banner-right-inner img {
            top: 15px;
            right: 15px;
            width: 18px;
        }

        .banner-right-inner h2 {
            margin-bottom: 5px;
        }

        .banner-right-inner span {
            font-size: 16px;
            line-height: 26px;
        }
    }

    @media (min-width: 1200px) and (max-width: 1399px) {

        .banner-right {
            padding-left: 45px;
        }

            .banner-right .sale {
                transform: translateY(-60px);
                -webkit-transform: translateY(-60px);
            }

        .banner-right-inner {
            padding: 25px 12px 15px;
            margin-top: 30px;
        }

        .family > img,
        .sale > img {
            margin-top: 30px;
        }

        .banner-right-inner img {
            top: 15px;
            right: 15px;
            width: 18px;
        }

        .banner-right-inner h2 {
            margin-bottom: 5px;
        }

        .banner-right-inner span {
            font-size: 14px;
            line-height: 24px;
        }
    }

    @media (min-width: 992px) and (max-width: 1199px) {

        .banner-right {
            padding-left: 20px;
        }

            .banner-right .sale {
                transform: translateY(-60px);
                -webkit-transform: translateY(-60px);
            }

        .banner-right-inner {
            padding: 25px 12px 15px;
            margin-top: 30px;
        }

        .family > img,
        .sale > img {
            margin-top: 30px;
        }

        .banner-right-inner img {
            top: 15px;
            right: 15px;
            width: 18px;
        }

        .banner-right-inner h2 {
            margin-bottom: 5px;
        }

        .banner-right-inner span {
            font-size: 14px;
            line-height: 24px;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {

        .banner-right {
            padding-left: 30px;
            width: 40%;
        }

            .banner-right .sale {
                transform: translateY(-60px);
                -webkit-transform: translateY(-60px);
            }

        .banner-right-inner {
            padding: 25px 12px 15px;
            margin-top: 30px;
        }

        .family > img,
        .sale > img {
            margin-top: 30px;
        }

        .banner-right-inner img {
            top: 15px;
            right: 15px;
            width: 18px;
        }

        .banner-right-inner h2 {
            margin-bottom: 5px;
        }

        .banner-right-inner span {
            font-size: 12px;
            line-height: 20px;
        }
    }

    @media (max-width: 767px) {
        .banner-right {
            padding-left: 0px;
            width: 100%;
            flex-direction: column;
            -webkit-flex-direction: column;
            overflow: hidden;
        }

            .banner-right .family {
                display: flex;
                display: -webkit-flex;
                margin-bottom: 20px;
                transform: translateY(0);
                -webkit-transform: translateY(0);
            }

            .banner-right > div {
                width: fit-content;
            }

            .banner-right .sale {
                transform: translateY(0);
                -webkit-transform: translateY(0);
                display: flex;
                display: -webkit-flex;
            }

        .banner-right-inner {
            padding: 20px 12px 10px;
            margin: 0px;
            min-width: 140px;
        }

        .family > img,
        .sale > img {
            margin: 0px 10px;
            min-width: 200px;
            height: 115px;
        }

            .family > img:first-child,
            .sale > img:first-child {
                margin-left: 0px;
            }

            .family > img:last-child,
            .sale > img:last-child {
                margin-right: 0px;
            }

        .banner-right-inner img {
            top: 15px;
            right: 15px;
            width: 18px;
        }

        .banner-right-inner h2 {
            margin-bottom: 5px;
        }

        .banner-right-inner span {
            font-size: 12px;
            line-height: 20px;
        }

        @keyframes myanimation {
            0% {
                transform: translateX(calc(-50% + 50vw));
                -webkit-transform: translateX(calc(-50% + 50vw));
            }

            25% {
                transform: translateX(0%);
                -webkit-transform: translateX(0%);
            }

            75% {
                transform: translateX(calc(-100% + 100vw));
                -webkit-transform: translateX(calc(-100% + 100vw));
            }

            100% {
                transform: translateX(calc(-50% + 50vw));
                -webkit-transform: translateX(calc(-50% + 50vw));
            }
        }

        @keyframes myanimationtwo {
            0% {
                transform: translateX(calc(-45% + 50vw));
                -webkit-transform: translateX(calc(-45% + 50vw));
            }

            25% {
                transform: translateX(calc(-100% + 100vw));
                -webkit-transform: translateX(calc(-100% + 100vw));
            }

            75% {
                transform: translateX(0%);
                -webkit-transform: translateX(0%);
            }

            100% {
                transform: translateX(calc(-45% + 50vw));
                -webkit-transform: translateX(calc(-45% + 50vw));
            }
        }
    }

    @media (min-width: 576px) and (max-width: 767px) {
        .family > img,
        .sale > img {
            min-width: 300px;
        }
    }
