/* -----------------------------

MEDIA QUERY

----------------------------- */
@media only screen 
and (min-width: 1024px) 
and (max-width: 1366px){
    .process-block{
        padding-top: 240px;
    }

    .process-block-set:nth-child(1) .process-info{
        padding-left: 40px;
    }

    .process-block .row:nth-child(2){
        margin-top: 120px;
    }
}

/* Landscape iPad Pro */
@media only screen 
    and (min-device-width: 1024px) 
    and (max-device-width: 1366px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 2) {
        .nav-item{
            padding-left: 30px;
            padding-right: 30px;
            position: relative;
        }

        .nav-item::after{
            content: "";
            border-right: #FFF 1px solid;
            position: absolute;
            right: 0;
            top: 12px;
            height: 40px;
            transform: skewX(-20deg);
        }

        .nav-item{
            padding-left: 6px;
            padding-right: 6px;
        }

        .carousel-item img{
            width: auto;
            height: 100vh;
        }

        .carousel-inner .carousel-item:nth-child(1) img{
            /* top: 0;
            right: -50%; */
        }

        .carousel-inner .carousel-item:nth-child(2) img{
            top: 0%;
            right: 0%;
        }

        .carousel-inner .carousel-item:nth-child(3) img{
            top: 0;
            right: 0;
            width: 100%;
            height: auto;
        }

        .process-block .row:nth-child(2){
            margin-bottom: 100px;
        }
    }

/* Portrait iPad Pro */
@media only screen 
and (min-device-width: 1024px) 
and (max-device-width: 1366px) 
and (orientation: portrait) 
and (-webkit-min-device-pixel-ratio: 1) {
    .nav-item{
        padding-left: 6px;
        padding-right: 6px;
    }

    .carousel-item img{
        width: auto;
        height: 100%;
    }

    .about-img-block{
        transform: none;
        margin-top: 60px;
        height: 600px;
    }

    .about-img{
        height: inherit;
        transform: none;
    }

    .products-block{
        background-color: none;
        background: none;
    }

    .process-block{
        padding-top: 240px;
    }

    .process-block-set:nth-child(1) .process-info{
        padding-left: 40px;
    }

    .process-block .row:nth-child(2){
        margin-top: 120px;
        margin-bottom: 220px;
    }

    footer .phone span{
        display: block;
        margin-bottom: 20px;
    }

    footer span:last-child{
        margin-left: 40px;
    }
}

@media only screen 
and (min-width: 960px) 
and (max-width: 1200px){
    .process-block .row:nth-child(1) .info-block p{
        width: 100%;
    }

    .process-block .row:nth-child(1) .info-block h3::after,
    .process-block .row:nth-child(2) .info-block h3::after{
        width: 500px;
    }
}


@media only screen and (max-width: 960px){
    /* ----------------------- */
    /*          mainmenu       */
    /* ----------------------- */
    .mainmenu{
        display: none;
    }

    /* ----------------------- */
    /*          carousel       */
    /* ----------------------- */

    .carousel-item{
        width: 100%;
        height: 100vh;
    }

    .carousel-item img{
        width: auto;
        height: auto;
        position: absolute;
        top: 0;
        left: inherit;
    }

    .carousel-inner .carousel-item:nth-child(1) img{
        /* top: -10%;
        right: -130%; */
        /* right: 100%; */
        /* margin-right: 50%; */
    }

    .carousel-inner .carousel-item:nth-child(2) img{
        /* top: -20%;
        right: -80%; */
    }

    .carousel-inner .carousel-item:nth-child(3) img{
        /* top: -20%;
        right: -80%; */
    }

    .carousel-caption{
        top: 20%;
    }

    .carousel-caption h3{
        font-size: 1.5em;
        margin-bottom: 1.25em;
        font-weight: 400;
    }

    .carousel-caption h1{
        font-size: 3em;
    }

    .carousel-caption h1 span,
    .carousel-caption p span{
        display: block;
    }

    .carousel-caption p{
        margin-top: 2em;
        font-size: 1.25em;
    }

    /* ----------------------- */
    /*          process        */
    /* ----------------------- */

    .process-block-set:nth-child(2) .process-info{
        padding-left: 13%;
    }

    .process-block .row:nth-child(2) .info-block{
        width: 100%;
    }

    .process-block .row:nth-child(2) .info-block p{
        width: 90%;
    }
}

@media only screen and (max-width: 760px){
    .carousel-inner .carousel-item:nth-child(1) img{
        /* right: -130%; */
        margin-left: -100%;
    }

    /* .carousel-inner .carousel-item:nth-child(2) img{
        right: 0;
    } */

    .carousel-inner .carousel-item:nth-child(3) img{
        width: auto;
        height: 150%;
        left: -50%;
    }
}

@media only screen 
and (max-width: 800px){
    .process-block .row:nth-child(1) .info-block h3::after,
    .process-block .row:nth-child(2) .info-block h3::after{
        width: 100%;
    }
}

@media only screen 
and (max-width: 768px){
    .process-block .row:nth-child(2) .info-block img{
        left: -20%;
    }
}

@media only screen 
and (min-width: 768px) 
and (max-width: 1024px) {
    .process-block .row:nth-child(2){
        margin-bottom: 240px;
    }

    .process-block-set:nth-child(2) .process-info{
        padding-left: 13%;
    }

    .process-block-set:nth-child(2) .process-info h3{
        width: 150%;
    }

    .process-block .row:nth-child(1) .info-block p,
    .process-block .row:nth-child(2) .info-block p{
        position: absolute;
        width: 100%;
        font-size: 1em;
    }

    .process-block .row:nth-child(2) .info-block p{
        width: 120%;
    }

    .process-block .row:nth-child(1) .info-block h3::after,
    .process-block .row:nth-child(2) .info-block h3::after{
        width: 400px;
    }

    .process-block .row:nth-child(3) .process-info{
        display: flex;
        justify-content: center;
        margin-top: 60px;
    }

    .process-block .row:nth-child(3) .info-block h3{
        width: auto;
        text-align: left;
    }

    .process-block .row:nth-child(3) .info-block p{
        width: 100%;
        position: inherit;
    }

    .process-block .row:nth-child(3) .info-block h3{
        font-size: 3em;
        margin-bottom: 0;
    }

    .process-block .row:nth-child(3) .info-block img{
        position: absolute;
        left: -110px;
        top: -20px;
    }

    .process-block .row:nth-child(3) .info-block h3::after{
        left: 50%;
        top: -200px;
        width: 1px;
        height: 200px;
    }
}

/* -----------------------------

MEDIA QUERY TABLE RWD

----------------------------- */
/* Portrait */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) 
and (-webkit-min-device-pixel-ratio: 1) {
    .carousel-caption{
        top: 26.5%;
    }

    .carousel-inner .carousel-item:nth-child(1) img{
        /* top: 0;
        right: -50%; */
    }

    .carousel-inner .carousel-item:nth-child(2) img{
        top: 0%;
        right: 0%;
    }

    .carousel-inner .carousel-item:nth-child(3) img{
        top: 0;
        right: -30%;
    }

    .about-info,
    .about-img-col{
        width: 100%;
    }

    .about-img-block{
        width: 200%;
    }

    .about-img{
        top: 0;
        left: 0;
        width: 100%;
        height: 450px;
    }

    .products-btn{
        margin-top: 0;
    }

    .products-block{
        padding: 0;
        background-color: #FFFe;
        margin-top: 0;
        padding-top: 2px;
    }

    .products-btn img{
        height: 100%;
    }

    #second-block {
        background: url(../images/index-process-bg.png)center -260px no-repeat;
        overflow: hidden;
    }

    .process-block .row:nth-child(2){
        /* margin-bottom: 160px; */
    }

    .process-block-set:nth-child(2) .process-info{
        padding-left: 13%;
    }

    .process-block-set:nth-child(2) .process-info h3{
        width: 150%;
    }

    .process-block .row:nth-child(2) .info-block img{
        left: -100px;
    }

    .process-block .row:nth-child(1) .info-block p,
    .process-block .row:nth-child(2) .info-block p{
        position: absolute;
        width: 100%;
        font-size: 1em;
    }

    .process-block .row:nth-child(2) .info-block p{
        /* width: 120%; */
    }

    .process-block .row:nth-child(1) .info-block h3::after,
    .process-block .row:nth-child(2) .info-block h3::after{
        width: 400px;
    }

    .process-block .row:nth-child(3) .process-info{
        display: flex;
        justify-content: center;
        margin-top: 60px;
    }

    .process-block .row:nth-child(3) .info-block h3{
        width: auto;
        text-align: left;
    }

    .process-block .row:nth-child(3) .info-block p{
        width: 100%;
        position: inherit;
    }

    .process-block .row:nth-child(3) .info-block h3{
        font-size: 3em;
        margin-bottom: 0;
    }

    .process-block .row:nth-child(3) .info-block img{
        position: absolute;
        left: -110px;
        top: -20px;
    }

    .process-block .row:nth-child(3) .info-block h3::after{
        left: 50%;
        top: -200px;
        width: 1px;
        height: 200px;
    }

    footer .footer-menu{
        margin-top: 2.5%;
        margin-bottom: 7.5%;
    }

    footer .company-mane {
        margin-bottom: 10%;
        font-size: .8em;
    }

    footer .footer-right-box{
        margin-top: 0;
    }

    footer .phone span{
        display: block;
        margin-bottom: 1rem;
    }

    footer span:last-child{
        margin-left: 0;
    }
}

/* Landscape */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 1) {
    .mainmenu{
        display: none;
    }

    .nav-item{
        padding-left: 6px;
        padding-right: 6px;
    }

    .nav-item::after{
        content: "";
        border-right: #FFF 1px solid;
        position: absolute;
        right: 0;
        top: 12px;
        height: 40px;
        transform: skewX(-20deg);
    }

    .carousel-inner .carousel-item:nth-child(1) img{
        /* top: 0;
        right: -50%; */
    }

    .carousel-inner .carousel-item:nth-child(2) img{
        top: 0%;
        right: 0%;
    }

    .carousel-inner .carousel-item:nth-child(3) img{
        top: 0;
        right: -30%;
    }

    .about .about-info p{
        width: 100%;
    }

    .about .about-info p:nth-last-child(3){
        width: 90%;
    }

    .about .about-info p:nth-last-child(2){
        width: 80%;
    }

    .about .about-info p:nth-last-child(1){
        width: 70%;
    }

    /* .process-block .row:nth-child(1) .info-block h3::after,
    .process-block .row:nth-child(2) .info-block h3::after{
        width: 400px;
    } */
}

@media only screen 
and (min-width: 320px) 
and (max-width: 480px){
    .process-block .row:nth-child(1) .info-block p{
        width: 100%;
    }

    .process-block-set:nth-child(2) .process-info{
        padding-left: 13%;
    }

    .process-block .row:nth-child(2) .info-block{
        width: 80%;
        left: 15%;
    }

    .process-block .row:nth-child(2) .info-block p{
        width: 90%;
    }

    .process-block .row:nth-child(2) .info-block img{
        left: -37%;
    }

    .process-block .info-block h3::after{
        width: 400px;
    }

    .process-block .row:nth-child(3) .process-info{
        display: flex;
        justify-content: center;
        margin-top: 60px;
    }

    .process-block .row:nth-child(3) .info-block h3{
        width: auto;
        text-align: left;
    }

    .process-block .row:nth-child(3) .info-block p{
        width: 100%;
        position: inherit;
    }

    .process-block .row:nth-child(3) .info-block h3{
        font-size: 3em;
        margin-bottom: 0;
    }

    .process-block .row:nth-child(3) .info-block img{
        left: -110px;
        top: -20px;
    }

    .process-block .row:nth-child(3) .info-block h3::after{
        left: 50%;
        right: inherit;
        top: -200px;
        width: 1px;
        height: 200px;
    }
}

/* -----------------------------

MEDIA QUERY Landscap

----------------------------- */

/* Landscape */


@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
    .navbar{
        min-height: 80px;
    }

    .carousel-item{
        width: 100%;
        height: 600px;
    }

    .carousel-item img{
        width: 120%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }

    .about-info{
        width: 100%;
    }

    .about-img-col{
        width: 100%;
    }

    .about-img{
        background-size: auto 200%;
    }

    .products-block{
        padding-top: 0;
        padding-left: 0;
        padding-bottom: 0;
        padding-right: 0;
    }

    .products-btn{
        margin-top: 2px;
    }

    #second-block{
        background-position: center top;
    }

    .process-block .row:nth-child(1) .info-block p{
        width: 100%;
    }

    .process-block-set:nth-child(2) .process-info{
        padding-left: 13%;
    }

    .process-block .row:nth-child(2) .info-block{
        width: 100%;
    }

    .process-block .row:nth-child(2) .info-block p{
        width: 90%;
    }

    .process-block .info-block h3::after{
        width: 400px;
    }

    .process-block .row:nth-child(3) .process-info{
        display: flex;
        justify-content: center;
        margin-top: 60px;
    }

    .process-block .row:nth-child(3) .info-block h3{
        width: auto;
        text-align: left;
    }

    .process-block .row:nth-child(3) .info-block p{
        width: 100%;
        position: inherit;
    }

    .process-block .row:nth-child(3) .info-block h3{
        font-size: 3em;
        margin-bottom: 0;
    }

    .process-block .row:nth-child(3) .info-block img{
        left: -110px;
        top: -20px;
    }

    .process-block .row:nth-child(3) .info-block h3::after{
        left: 50%;
        right: inherit;
        top: -200px;
        width: 1px;
        height: 200px;
    }

    footer .footer-right-box{
        margin-top: 3%;
    }

    footer .company-slogen{
        padding-top: 14%;
    }
}