/* Medium Layout: 1367px. */

@media only screen and (min-width: 1200px) and (max-width: 1367px) {
    .slider-area{
        padding-top:160px;
    }
    .slider-inner a{
        margin-top:0%;
    }
    .price-header{
        width:12%; 
        min-width: 230px;
        position: absolute; 
        margin-top: -60vh; 
        left:3%; 
        background: #fed835; 
        border-radius: 4px; 
        overflow:hidden; 
        box-shadow: 10px 10px 2px rgba(0,0,0,0.3);
    }
}


/* Medium Layout: 1280px. */

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    /*-----------------------
    Home One
    -----------------------*/
    .main-menu nav ul li a {
        padding: 29px 13px;
    }
    .screen-area img.screen-img {
        bottom: 171px;
        width: 434px;
        height: 453px;
    }
    .slider-area{
        padding-top:160px;
    }

    /*-----------------------
        Blog Page
        -----------------------*/
        .blog-post-area {
            padding-top: 90px;
        }
        .bp-with-sidebar {
            padding-bottom: 80px;
        }
        .pagination-area {
            padding-bottom: 70px;
        }

    /*-----------------------
        Blog Details
        -----------------------*/
        .blog-details{
            padding: 100px 0px;
        }
        .slider-inner h1{
            margin-left: 20%;
            margin-top: -12%;
        }
        .slider-inner h5{
            margin-top: 15%;
        }
        .price-header {
            left: 2%;
        }

    }


    /* Tablet Layout: 768px. */

    @media only screen and (min-width: 768px) and (max-width: 991px) {
    /*-----------------------
    Home One
    -----------------------*/
    .menu-area{
        display: block;
        width:100%;
    }
    .slicknav_nav{
        width:50%;
        float:right;
    }
    .logo {
        padding: 21px 0px 17px;
    }
    .slider-area{
        height: 600px;
        padding-top: 120px;
    }
    .slider-inner h5 {
        margin-top: 15%;
        margin-left: 5%;
        width:50%;
        margin-bottom: 20px;
    }
    .price-header {
        margin-top: -6vh;
        left: 65%;
        background: #333; 
    }
 .price-header-top {
        color:#fed835; 
 }
 .price-header-mid {
        color:#fed835; 
 }
 .service-single .zag-h2 {
     font-size: 22px;
 }
 .service-single .tex{
     font-size: 14px;
 }
 .about-area {
     padding: 90px 0px 130px;
 }
 .feature-area {
    
 }
 .ft-content{
     margin-top: 0;
 }
 .ft-single h2 {
     font-size: 22px;
 }
 .screen-area,
 .testimonial-area,
 .pricing-area,
 .clinet-area,
 .contact-area {
     padding: 90px 0px;
 }
 .screen-area img.screen-img {
     bottom: 137px;
     width: 529px;
     height: 584px;
 }
 .prc-head span {
     font-size: 35px;
 }
 .prc-head h3 {
     font-size: 21px;
     margin-bottom: 7px;
 }
 .team-area {
     padding: 90px 0px 70px;
 }
 .single-team{
     margin-bottom: 20px;
 }
 .download-btns a{
     margin-bottom: 20px;
 }
 .blog-post{
     padding: 90px 0px 20px;
 }
 .single-post{
     margin-bottom: 50px;
     border-bottom: 1px solid #efebeb;
     padding-bottom: 30px;
 }
 .service-area{
    margin-top: -4vh;
}
    /*-----------------------
        Blog Page
        -----------------------*/
        .blog-post-area {
            padding-top: 80px;
        }
        .bp-with-sidebar {
            padding-bottom: 70px;
        }
        .pagination-area {
            padding-bottom: 70px;
        }

    /*-----------------------
        Blog Details
        -----------------------*/
        .blog-details{
            padding: 90px 0px;
        }
        .sidebar--area {
            padding-left: 0;
        }
        .crumbs-inner h2 {
            font-size: 31px;
        }


    }



    /* Mobile Layout: 320px. */

    @media only screen and (max-width: 767px) {
        .screen-area img.screen-img{
            display: none;
        }
    }



    /* Wide Mobile Layout: 480px. */

    @media only screen and (min-width: 481px) and (max-width: 767px) {
    /*-----------------------
    Home One
    -----------------------*/
    /*preloader hide*/
    #preloader {
        display: none!important;
    }
    .menu-area{
        display: block;
        width:100%;
    }
    .logo {
        padding: 21px 0px 17px;
    }
    .slider-area {
        height: auto;
        padding: 114px 0px 149px;
    }
    .slider-inner{
        text-align: left;
    }
    .slider-inner h2 {
        font-size: 33px;
    }
    .slider-inner .slider-h5 {
        font-size: 23px;
        line-height: 27px;
        margin-bottom: 42px;
        margin-top: 5px;
    }
    .service-single{
        margin-bottom: 30px;
    }
    .service-single .zag-h2{
        font-size: 25px;
    }
    .obr-zv-mb{
        position: fixed;
        display: block;
        width: 0px;
        height: 60px;
        left: 0px;
        bottom:0px;
        background: #fff;
        transition: width 1s;
        overflow:hidden;
        border-radius: 3px 28px 28px 3px;
    }

     .obr-zv-mb.active {
        left: 0;
        transition: width 1s;
        width: 270px;   
    }

    .about-area {
        padding: 60px 0px 60px;
    }
    .section-title p {
        font-size: 16px;
    }
    .feature-area {
        padding: 80px 0px 40px;
    }
    .ft-content{
        margin-top: 0;
    }
    .ft-screen-img{
        margin-bottom: 40px;
    }
    .ach-single{
        margin-bottom: 70px;
    }
    .achivement-area{
        padding: 80px 0px 10px;
    }
    .screen-area,
    .testimonial-area,
    .video-area,
    .call-to-action,
    .clinet-area,
    .contact-area {
        padding: 80px 0px;
    }
    .screen-slider{
        margin-top: 0;
    }
    .screen-slider .owl-dots{
        margin-top: 40px;
    }
    .video-area h2 {
        font-size: 25px;
    }
    .pricing-area,
    .team-area{
        padding: 80px 0px 60px;
    }
    .single-price,
    .single-team{
        margin-bottom: 30px;
    }
    .download-btns a{
        margin: 5px 0px;
    }
    .blog-post{
        padding: 80px 0px 40px;
    }
    .single-post{
        margin-bottom: 50px;
        border-bottom: 1px solid #efebeb;
        padding-bottom: 30px;
    }
    .contact_info{
        padding-left: 0;
        margin-top: 40px;
    }

    /*-----------------------
        Blog Page
        -----------------------*/
        .crumbs-area {
            display: block;
            height: 354px;
        }
        .crumbs-inner {
            width: 80%;
            margin-top: 148px;
            padding: 40px 0px;
        }
        .blog-post-area {
            padding-top: 70px;
        }
        .bp-with-sidebar {
            padding-bottom: 60px;
        }
        .pagination-area {
            padding-bottom: 80px;
            padding-top: 20px;
        }

    /*-----------------------
        Blog Details
        -----------------------*/
        .blog-details {
            padding: 70px 0px;
        }
        .children {
            padding-left: 12px;
        }
        .sidebar--area {
            padding-left: 0;
            max-width: 420px;
            margin: auto;
            margin-top: 55px;
        }
        .crumbs-inner h2 {
            font-size: 26px;
        }
        a.phone-but {
            display: block;
            bottom: 15px;
            right: 15px;
            width: 20vw;
            height: 20vw;
            position: fixed;
            padding: 10px;
            background: #5a10fb;
            background-size: 70%;
            border-radius: 50%;
            z-index: 1000;
            box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
            border: 3px solid #ffe000;
        }
    }


    /* Wide Mobile Layout: 600px - 767px. */

    @media only screen and (min-width: 600px) and (max-width: 767px) {
        .col-6 {
            float: left;
            width: 50%;
        }
        a.phone-but {
            display: block;
            bottom: 15px;
            right: 15px;
            width: 20vw;
            height: 20vw;
            position: fixed;
            padding: 10px;
            background: #5a10fb;
            background-size: 70%;
            border-radius: 50%;
            z-index: 1000;
            box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
            border: 3px solid #ffe000;
        }
        .service-single{
            border-radius:20px;
        }
    }


    /* Wide Mobile Layout: 480px. */

    @media only screen and (min-width: 240px) and (max-width: 480px) {

    /*-----------------------
    Home One
    -----------------------*/
    /*preloader hide*/
    #preloader {
        display: none!important;
    }
    .header-area{
        border-radius: 0vh 0vh 0vh 0vh;
         background: url(../img/fon-fiol.svg) no-repeat bottom center transparent;
         background-size: cover;
    }
    .menu-out{
        background:transparent;
        border-radius: 3vh 3vh 0vh 0vh;
        padding: 7px;
    }

    .menu-area{
        display: block;
        width:100%;
    }
    .logo {
        padding: 0px 50px 2px 0px;
    }
    .logo a {
        text-align: center;
    }
    .logo img{max-width: 100%;padding-bottom: 5px;}
    .slider-area {
        height: auto;
        padding: 114px 0px 149px;
    }
    .slider-inner{
        text-align: left;
    }
    .slider-inner .slider-h1 {
        font-size: 38px;
    }
    .slider-inner .slider-h5 {
        font-size: 20px;
        line-height: 27px;
        margin-bottom: 42px;
        margin-top: 0;
        color: #feca12;
        text-shadow:none;
    }
    .slider-inner a {
        margin-top:0px;
    }
    .slider-inner button {
        display: inline-block;
        position: relative;
        height: 60px;
        width: 270px;
        background: #5c1ef9;
        border-radius: 5px;
        text-align: center;
        line-height: 56px;
        color:#5c1ef9; 
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 0;
        padding-top: 0px;
        border:solid 1px #004F72; 
         -webkit-border-radius:4px;
         -moz-border-radius:4px; 
         border-radius: 4px; 
         font-weight:bold; 
        background-color:#ffe678; 
        background-image: -moz-linear-gradient(top, #ffe678 0%, #ffd000 100%); 
        background-image: -webkit-linear-gradient(top, #ffe678 0%, #ffd000 100%); 
        background-image: -o-linear-gradient(top, #ffe678 0%, #ffd000 100%); 
        background-image: -ms-linear-gradient(top, #ffe678 0% ,#ffd000 100%); 
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd000', endColorstr='#ffd000',GradientType=0 ); 
        background-image: linear-gradient(top, #ffe678 0% ,#ffd000 100%);   
         -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
         -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
         box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
    }
    .obr-zv-mb{
        position: fixed;
        display: block;
        width: 0px;
        height: 60px;
        right: calc(20vw + 15px);
        bottom: 8px;
        background: #fed835;
        transition: width 1s;
        overflow:hidden;
        border-radius: 3px 28px 28px 3px;
        z-index: 10000;
    }

     .obr-zv-mb.active {
        right: 20vw;
        transition: width 1s;
        width: calc(100% - 15vw - 25px);   
    }
    .obr-zv-mb #submit{
        border:none;
        padding:5px;
        height: 45px;
        width: 45px;
        background:#fff;
        color:#333;
        text-align: center;
        line-height: 45px;
        -webkit-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        border-radius: 50%;
    }
    .obr-zv-mb .fa{font-size: 30px;}
    .contact-form.contact-3 input{
    width: calc(95% - 110px);
    }
    .vikiduha{background: #fed835;}
    .zvonit{
        height: 45px;
        width: 45px;
        background:#fff;
        color:#333;
        text-align: center;
        line-height: 45px;
        -webkit-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        border-radius: 50%;
        display: inline-block;
        padding:7px;
    }
    .service-area{
        margin-top: 4vh;
    }
    .service-area:before {
        content:"";
        width:100%;
        display:block;
        height:4vh; 
        background: #fff;  
        border-top-left-radius: 2vh;
        border-top-right-radius: 2vh;
        margin-top: -7vh;
    }
    .service-single{
            border-radius:20px;
        }
    .price-header{
        display:none;
    }
    .servis{
        margin-bottom: 30px;
    }
    .service-single{
        margin-bottom: 30px;
    }
    .service-single .zag-h2 {
        font-size: 25px;
    }
    .about-area {
        padding: 50px 0px 50px;
    }
    .section-title p {
        font-size: 16px;
    }
    .feature-area {
        padding: 70px 0px 30px;
    }
    .animashka-out{
        margin-top:40px;
    }
    .ft-content{
        margin-top: 0;
    }
    .ft-screen-img{
        margin-bottom: 40px;
    }
    .kote:before{
        width: 50vw;
        height: 34vw;
        margin-top: -30vw;
    }
    /* Анимашка целовашка*/
    @keyframes move {
      0% {
        left: 0%;
        bottom: -20em;
        animation-timing-function: ease-in;
    }
    10% {
        left: 0%;
        bottom: 28%;
        animation-timing-function: ease-in;
    }
    30% {
        left: 0%;
        bottom: -20em;

    }
    40% {
        left: 16%;
        bottom: 28%;
        animation-timing-function: ease-in;
    }
    60% {
        left: 16%;
        bottom: -20em;
        animation-timing-function: ease-in;
    }
    70% {
        left: -16%;
        bottom: 28%;
        animation-timing-function: ease-in;

    }
    100% {
        left: 0%;
        bottom: -20em;

    }
    }
 .ft-screen-img .cleaner {
    position: absolute; 
    animation: move 20s forwards linear;
    background:url(../img/anim/cleaner.svg) no-repeat center; 
    background-size:contain; 
    width:100%; 
    height:550px;
}


@keyframes chisto {
    0% {
        height: 0px;
        animation-timing-function: ease-in;
    }
    10% {
        height: 0px;
        animation-timing-function: ease-in;
    }
    30% {
        height: 510px;
        animation-timing-function: ease-in;
    }
    100% {
        height: 510px;
        animation-timing-function: ease-in;
    }
}
.ft-screen-img .chisto {
   position: absolute; 
   animation: chisto 20s forwards linear;
   background:#fafafa;
   position: absolute; 
   top:-15px; 
   left:20%;
}

@keyframes chisto2 {
    0% {
        height: 0px;
        animation-timing-function: ease-in;
    }
    40% {
        height: 0px;
        animation-timing-function: ease-in;
    }
    60% {
        height: 510px;
        animation-timing-function: ease-in;
    }
    100% {
        height: 510px;
        animation-timing-function: ease-in;
    }
}
.ft-screen-img .chisto-2 {
    position: absolute; 
    animation: chisto2 20s forwards linear;
    background:#fafafa; 
    width:245px; 
    position: absolute; 
    top:-15px; 
    left:34%;
}

@keyframes chisto3 {
    0% {
        height: 0px;
        animation-timing-function: ease-in;
    }
    70% {
        height: 0px;
        animation-timing-function: ease-in;
    }
    100% {
        height: 510px;
        animation-timing-function: ease-in;
    }
}
.ft-screen-img .chisto-3 {
    position: absolute; 
    animation: chisto3 20s forwards linear;
    background:#fafafa; 
    width:245px; 
    position: absolute; 
    top:-15px; 
    left:2%;
}

@keyframes slogan {
    0% {
        margin: -350px;
        color:transparent;
        animation-timing-function: ease-in;
    }
    90% {
        margin: -350px;
        color:transparent;
        animation-timing-function: ease-in;
    }
    98% {
        margin: 0px;
        color:#5c1ef9;
        animation-timing-function: ease-in;
    }
    99% {
        margin: -15px;
        color:#5c1ef9;
        animation-timing-function: ease-in;
    }
    100% {
        margin: 0px;
        color:#5c1ef9;
        animation-timing-function: ease-in;
    }
}
.ft-screen-img .slogan {
    position: relative; 
    margin:0 auto;
    animation: slogan 20s forwards linear;
}
/* Анимашка целовашка энд*/



.ach-single{
    margin-bottom: 70px;
}
.achivement-area{
    padding: 70px 0px 0px;
}
.screen-area,
.testimonial-area,
.video-area,
.call-to-action,
.clinet-area,
.contact-area {
    padding: 70px 0px;
}
.screen-slider{
    margin-top: 0;
}
.screen-slider .owl-dots{
    margin-top: 40px;
}
.video-area h2 {
    font-size: 25px;
}
.pricing-area,
.team-area{
    padding: 70px 0px 40px;
}
.single-price,
.single-team{
    margin-bottom: 30px;
}
.download-btns a{
    margin: 5px 0px;
}
.blog-post{
    padding: 70px 0px 20px;
}
.single-post{
    margin-bottom: 50px;
    border-bottom: 1px solid #efebeb;
    padding-bottom: 30px;
}
.contact_info{
    padding-left: 0;
    margin-top: 40px;
}
.meta-content.meil span{
    font-size:18px;
}
    /*-----------------------
        Blog Page
        -----------------------*/
        .crumbs-area {
            display: block;
            height: 354px;
        }
        .crumbs-inner h2 {
            font-size: 22px;
        }
        .crumbs-inner {
            width: 100%;
            margin-top: 148px;
            padding: 40px 0px;
        }
        .blog-post-area {
            padding-top: 60px;
        }
        .bp-with-sidebar {
            padding-bottom: 60px;
        }
        .pagination-area {
            padding-bottom: 70px;
            padding-top: 20px;
        }
        .pagination ul {
            padding: 4px 0px;
        }
        .pagination ul li a,
        .pagination ul li span {
            padding: 10px 5px;
            font-size: 11px;
        }

    /*-----------------------
        Blog Details
        -----------------------*/
        .blog-details {
            padding: 60px 0px;
        }
        .children {
            padding-left: 12px;
        }
        .sidebar--area {
            padding-left: 0;
            margin-top: 60px;
        }
        /*preloader hide*/
        #preloader{
            display: none!important;
        }
        button.phone-but {
            display: block;
            bottom: 8px;
            right: 8px;
            width: 15vw;
            height: 15vw;
            position: fixed;
            padding: 10px;
            background: #5a10fb;
            background-size: 70%;
            border-radius: 50%;
            z-index: 1000;
            border: 3px solid #ffe000;
        }
        .footer-area{
            display: block;
        }
        .footer-area:before{
            content:"";
            display: block;
            width:100%;
            height: 5vh;
            background: #333333; 
            border-bottom-left-radius: 2vh;
            border-bottom-right-radius: 2vh;   
        }    

    }

    @media screen and (orientation:portrait) {

     .slider-area {
        display: none;
    }
    .slider-area-mobile {
        display: flex;
        align-items: center;
        height: 100vh;
        background: #fff;
        padding-top: 80px;
    }
}