@media screen and (min-width: 1400px){
    .wrap {width: 1200px}
    #kolba_container{width: 500px}
    #about .first .left_block{width: 290px}
    #about .first .right_block{width: 290px}
    #about .first .middle_block{width: 500px}
}
@media screen and (max-width: 1450px){
    #left_slide_menu {left: 30px}
    #right_slide_menu {right: 30px}
    #rocket{right: 33px}
}
@media screen and (max-width: 1399px){
    .wrap {width: 1080px}
    #all_project .name{padding: 0 10px}
    #demo > .img{width: 650px}
    #crystal .crystal{width: 800px; margin-left: 280px;}
    #pre_bot .left{width: 660px; margin-right: 20px;}
    #left_slide_menu {left: 20px}
    #right_slide_menu {right: 20px}
    #about .first div{padding-left: 40px}
    #about .first .left_block{width: 255px}
    #about .first .right_block{width: 255px}
    #about .first .middle_block{width: 420px}
    #bottom .contact{width: 300px}
    #bottom .uslugi{width: 460px}
    #bottom .projects{width: 280px}
    #mobile_menu{left: 5px; top: 5px}
    #for-against p{margin-top: 55px}
}
@media screen and (max-width: 1199px) {
    .wrap {width: 880px;}
    #demo > .text{display: none}
    #for-against{width: 85%}
    #pre_bot h1{font-size: 50px}
    #cases{margin: 50px 0}
    #sc_slider{margin: 30px 0}
    #crystal .crystal{width: 800px; margin-left: 80px;}
    #marketing_table tr td{height: 99px}
    #marketing_table span.num{font-size: 14px}
    #marketing_table p.name{font-size: 37px}
    #marketing_table p.desc{font-size: 12px}
    #all_project .project{height: 249px}
    #all_project .project .hover{height: 229px; padding: 10px}
    #all_project .img{height: 155px}
    #all_project .project .hover .desc{height: 145px; font-size: 18px}
    #formula .block{padding: 30px}
    #formula .formula{width: 430px}
    #formula .img img{max-width: 350px}
    #kolba_elements{width: 233px}
    #kolba_container{background-size: contain; width: 347px; height: 460px;}
    #kolba_price{width: 300px}
    #kolba_price .callback input[type=text]{width: 258px}
    #kolba_price .callback input[type=submit]{padding: 22px 9px}
    #kolba_price .callback p:last-of-type{padding-right: 7px; font-size: 12px}

    #about .first .left_block{width: 230px;}
    #about .first .right_block{width: 230px; }
    #about .first .middle_block{width: 320px; }
    #about .first div{padding-left: 23px}
    #about .first p.title{font-size: 48px}
    #about .first p.desc{font-size: 18px; line-height: 35px}

    #review_text{width: 440px}
    #pre_bot .left{width: 500px; margin-right: 50px}
    #pre_bot .right{width: 330px}

    #bottom .contact{width: 280px}
    #bottom .uslugi{width: 330px}
    #bottom .projects{width: 270px}

    #prototype .desing > div { width: calc(50% - 20px) }
}


@media screen and (max-width: 999px) {
    .wrap {width: 780px}
    #demo > .img{width: 100%}
    #for-against{width: 100%}
    #pre_bot h1{font-size: 40px}
    #crystal .crystal{width: 700px; margin-left: 80px;}
    #marketing_table{width: 100%}
    #marketing_table table{left: 0}
    #marketing_table tr td{height: 100px}
    #all_project .project{width: 48%; margin: 20px 1%; float: left}
    #all_project {width: 100%; margin-top: 20px}
    #case_title div.title{width: 100%}
    #cases div.title p.desc{font-size: 18px}
    #site_colors{padding: 30px 5px 60px}

    #sc_slider {height: 375px}
    #sc_slider .slide{width: 270px; margin: 0 20px}
    #sc_slider .slide .img{width: 270px; height: 230px; line-height: 230px}
    #sc_slider .slide .img img{max-width: 270px;}
    #sc_slider .slide .desc{font-size: 18px; line-height: 24px; margin: 10px 0 0 15px}
    #sc_slider .slide .els{margin: 10px 0 0 15px}

    #formula .block{padding: 20px}
    #formula .formula{width: 385px}
    #formula .block{min-height: 455px}
    #formula .img img{max-width: 330px}
    #kolba_elements, #kolba_container{width: 50%}
    #kolba_price{width: 100%; margin-top: 45px; display: block}
    #kolba_price .price_container{padding: 0 20px; float: left}
    #kolba_price .callback{padding: 0 20px; float: left; display: block;}
    #kolba_price .callback input[type=submit]{display: block; padding: 15px 26px; width: 100%}
    #kolba_price .callback form span{font-size: 35px}
    #kolba_price .callback input[type=text]{font-size: 35px; width: 258px}
    #kolba_price .callback p:last-of-type{text-align: center; font-size: 12px; margin: inherit}

    #about .first div{padding-left: 35px}
    #about .first .left_block{width: 185px;}
    #about .first .right_block{width: 185px;}
    #about .first .middle_block{width: 265px;}
    #about .first p.title{font-size: 40px}
    #about .first p.desc{font-size: 16px; line-height: 30px}
    #about .instargam .title{font-size: 100px; margin-top: 70px}

    #bottom .uslugi .half{width: 100%}
    #review_text{width: 340px}
    #bottom .uslugi{width: 230px}
    #pre_bot h1{width: 555px}
    #pre_bot .left{width: 440px; margin-right: 10px}
    #about .frames .head{margin: 20px}
    #main_image .right_img, #main_image .left_img{display: none}
    #mobilephone{display: none}

}

@media screen and (max-width: 899px) {
    .wrap { width: 680px }
    #for-against p.for,
    #for-against p.against{width: 300px}
    #for-against p{font-size: 17px}
    #pre_bot h1{text-align: center; margin: 30px 0 0 0}
    #crystal .crystal{width: 600px; margin-left: 80px;}
    #crystal .crystal div.desc{width: 100%;}
    #first_section .title{padding-left: 175px}
    #first_section .title .line{left: 85px}
    #formula .formula{width: 335px}
    #formula .img img{max-width: 300px}
    #formula .block{height: 480px}
    #formula .block p{font-size: 12px; line-height: 25px}
    #formula .block{padding: 15px}
    #formula div.title p.desc{line-height: 32px; width: 500px; font-size: 18px}
    #sc_slider{margin: 35px 0}
    #about .first div{padding-left: 5px}
    #about .light_head .title p{font-size: 50px}
    #review_text{width: 240px}
    #pre_bot .left{width: 100%; margin: 0; padding: 0 15px; box-sizing: border-box}
    #pre_bot .right{width: 100%}
    #pre_bot h1{width: 100%}
    #pre_bot .callback form{width: 360px; margin: 50px auto 0; position: relative;}
    #pre_bot .callback form span{position: absolute; text-align: left; left: 0}
    #pre_bot .callback input[type=text]{display: block; margin: 20px auto}
    #pre_bot .callback input[type=submit]{display: block; margin: 30px auto 0}
    #bottom .contact,#bottom .uslugi{width: 30%; padding: 0 10px; text-align: center; display: block; box-sizing: border-box}
    #bottom .projects{width: 40%; text-align: center}
    #bottom .pr_block div{display: block}
    #bottom .pr_block div div{display: inline-block}
    #bottom p{margin: 15px 0}
    #main_image {overflow: hidden}
    #case_title div.title{width: 100%}
    #case_title .case_task, #case_title .case_els{float: none; width: 100%}
    section .left_offset{padding-left: 50px}
}

@media screen and (max-width: 768px) {
    .wrap { width: 100%; padding: 0 10px; box-sizing: border-box; max-width: 650px}
    .mobile_hide{display: none}
    #whom .not_fit{margin: 30px 0}
    #for-against p.for,#for-against p.against{width: 96%; margin: 10px 2%; float: none; text-align: center}
    #work_steps li span:first-child{margin-left: 10px}
    #work_steps li.active span{font-size: 25px}
    #cases.inner div.title{background-position: 205px 20px}
    #element_description div.white{padding: 30px 20px; font-size: 22px; line-height: 35px}
    #first_section .title{padding-left: 0}
    #first_section .title .line{left: 20px}
    #whom p.title{font-size: 35px}
    #for-against p{margin-top: 0}
    #crystal .crystal{width: 100%; margin-left: 0}

    #text_blocks .left{width: 100%; float: none}
    #text_blocks .right{width: 100%; float: none}
    #text_blocks p.lined{padding-left: 35px;}
    #text_blocks a{color: #1f53fd}
    #text_blocks p.title{margin-top: 45px}

    #marketing_table{display: none}
    #marketing_table_mobile{display: block}

    #cases div.title h1{position: inherit; font-size: 48px}
    #cases div.title p.desc{margin: 20px 0 0 0}
    #cases{margin: 30px 0}
    #cases div.slider_top{height: 400px}
    #cases div.slider_top .els{padding-top: 25px; height: 100px}
    #cases div.slider_top div.name{height: 215px}

    #formula .formula{width: 96%; margin: 0 2% 30px; float: none}
    #formula .block p,
    #formula .name table tr td:last-of-type{font-size: 16px; line-height: 1.5}
    #formula .name table tr td:first-of-type{padding-right: 30px}
    #formula .block{height: inherit}
    #formula .btn{font-size: 25px}
    #formula .img img{max-width: 100%}
    #formula div.title h1{position: inherit}
    #formula div.title p.desc,#kolba div.title p.desc{margin-left: 0; margin-top: 35px; width: inherit; font-size: 18px}
    #kolba .make_formula{margin: 30px 0}

    #crystal .crystal{height: 530px; margin-bottom: 30px}
    #crystal .crystal .btn{font-size: 18px}
    #element_description,#demo,#text_blocks,#whom{margin-top: 30px}
    #sc_slider .slide,#sc_slider{margin: 0}
    #sc_slider .slide .desc{margin: 0; text-align: center}
    #sc_slider .slide .els{margin: 10px 0; text-align: center}
    #sc_slider .slide .img{width: 100%; text-align: center}

    #kolba_price .callback{margin: auto; width: 75%}
    #kolba_price .callback form{text-align: center}
    #kolba_elements div{width: 85px; height: 70px; padding: 5px 0 0 0; margin: 0 10px 10px 0}
    #kolba_price .price_container{padding: 0; margin: 0; width: 100%; text-align: center; float: none}
    #kolba_price .callback{padding: 0; float: none; display: block}

    #about .first .left_block, #about .first .right_block, #about .first .middle_block{width: 100%; text-align: center; margin: 0 0 50px 0; float: none; background-position: top center}
    #about .first p.title{font-size: 46px}
    #about .first p.desc{font-size: 22px; line-height: 35px}

    #about .light_head .title p{font-size: 45px}
    #about .light_head .desing_2{top: 5px}
    #about .light_head .title p img{display: none}
    #about .instargam .wrap{text-align: center}
    #about .instargam .title{font-size: 75px; margin-top: 100px}

    #review_text{width: 100%; margin: 50px 0 0 0; padding: 0 15px; box-sizing: border-box}
    #review .photo{width: 100%; margin: 0; position: relative}
    #review .photo > img{border: 8px solid #1149ff}
    #review .names {position: static}
    #review .names a,#review .names div div{display: none}
    #review .names a.active{display: block; height: auto;}
    #review_slide_left{position: absolute; left: 10px; top: 50px; display: block}
    #review_slide_right{position: absolute; right: 10px; top: 50px; display: block}

    #bottom .contact,#bottom .uslugi,#bottom .projects{width: 100%; padding: 0 10px; text-align: center; display: block; box-sizing: border-box}
    #bottom,#bottom a,#bottom p{line-height: 30px; font-size: 16px}
    p.base-text{font-size: 16px; line-height: 25px}
    #about .frames .head{margin: 30px 10px; width: 165px}
    #about .frames .head.empty{margin: 30px 10px}

    #menu_btn, #menu_btn.open{left: 0; top: 0}
    #menu_btn p{display: none}
    #menu{width: 100%; left: -100%; box-sizing: border-box; padding: 70px 0 50px 25px}
    #menu a:first-of-type{margin-bottom: 25px}
    #menu a{font-size: 18px; margin-bottom: 20px}

    #pre_bot{padding: 20px 0 50px}
    #pre_bot .callback form{margin: 0 auto 30px}
    #pre_bot .left{text-align: center}

    #review .names > div{margin-top: 20px}

    #case_title .wrap{overflow: visible}
    #case_title .date{position: static; transform: none; width: 100%; padding: 0 10px}
    #case_title #close_case{top: -100px; right: 10px}
    #case_title .case_task td{line-height: 30px}
    section .stem_num{font-size: 70px}
    section .step_title{font-size: 22px; margin: -55px 0 60px 0!important}
    #step p{line-height: 30px}
    .quote > div{width: 100%; margin-left: 0; box-sizing: border-box}
    #site_colors div.color{margin: 10px 25px}
    #step{margin: 50px 0}
    #result p{width: 100%; margin-left: 0}
    #ya_direct .result td{display: block; width: 100%; padding: 5px; box-sizing: border-box}
    #ya_direct .result table{width: 100%}
    #ya_direct .result .int{padding: 10px; font-size: 50px}
    #ya_direct .result .char{font-size: 16px}
    #case_title .case_task td{display: block; font-size: 18px}
}


@media screen and ( max-width: 540px ){

    h1, .h1 {font-size: 220%; line-height: 1.2}
    p{font-size: 120%; line-height: 1.2}

    #first_section .title{padding-left: 0}
    #first_section .title .line{left: 15px; width: 45px; top: 18px}
    #first_section .title p{line-height: 1.4}

    #all_project .project .hover .desc{height: 145px; font-size: 16px}
    #all_project .project .hover .url,
    #all_project .project .hover .url a {font-size: 12px}

    #marketing_table_mobile div{height: 70px; width: 28%; margin: 1%; padding: 10px 0}
    #marketing_table_mobile p.desc{font-size: 11px}

    #first_section .callback input[type=text]{font-size: 35px; width: 200px}
    #first_section .callback input[type=submit]{margin: 30px 0 0 5px; cursor: pointer}
    #first_section .callback form span{font-size: 35px;}

    .wrap {width: 100%;}

    #about .frames .head{margin: 30px 0}
    #kolba{display: none}
    #kolba_price .callback{width: 90%}
    #kolba_price .callback input[type=text]{width: 230px}
    #cases div.title p.desc{width: 100%}
    #pre_bot .callback form{width: 300px}
    #pre_bot .callback input[type=text]{width: 245px}
    #kolba{padding: 40px 0 25px}
    #bottom .inline{display: block!important;}

    #main_slider{display: none}
}

@media screen and (max-width: 480px) {
    #all_project .name{padding: 0 5px}
    #all_project .name a{font-size: 14px}

    #cases div.slider_top{height: 280px}
    #cases div.slider_top .els{padding-top: 15px; height: 75px}
    #cases div.slider_top div.name{height: 145px}
    #cases div.slider_top div.name .title{font-size: 30px}
    #cases div.slider_top div.name .desc{font-size: 18px}
    #cases div.slider_top a{font-size: 16px}

    #kolba_elements, #kolba_container{width: 100%}
    #about .instargam .title{font-size: 50px; margin-top: 100px}


}

@media screen and (max-height: 675px){
    #left_slide_menu a,#left_slide_menu span{margin: 0!important;}
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    #formula div.title{background-image: url("../img/formula_title@2x.png"); padding: 60px 0}
    #for-against{background-image: url("../img/for-against@2x.png")}
}




/* New Design */
@media(max-width: 1200px) {
    .vk-post {
        display: none !important;
    }

    #table_section div.title p.desc,
    #success_formula div.title p.desc,
    #kolba div.title p.desc {
        width: auto;
        margin: 0;
        float: none;
    }

    @media(max-width: 992px) {
        .instargam .title {
            font-size: 90px;
        }
    }

    @media(max-width: 768px) {
        #first_section .title h1 {
            font-size: 22px;
        }

        #cases .case {
            width: 50%;
        }

        #cases .case.ikona {
            width: 100%;
        }

        #review h1 {
            width: 100%;
        }

        .new-reviews .review {
            width: 100%;
        }

        .new-reviews .review:nth-child(2n+1){
            margin-right: 0;
        }

        #pre_bot .callback {
            margin-bottom: 50px;
        }

        #pre_bot .right-info {
            margin-left: auto;
            margin-right: auto;
        }

        #pre_bot .right-info.instruments,
        #pre_bot .right-info.staff {
            margin-bottom: 20px;
        }

        #pre_bot .formula {
            margin-left: auto;
            margin-right: auto;
            height: 250px;
        }

        #pre_bot .formula .text-1 {
            right: 0;
        }

        #pre_bot .formula .text-3 {
            left: 50px;
        }

        #pre_bot .formula .icon-1 {
            left: 140px;
        }

        .instargam .title {
            font-size: 60px;
        }

        #table_section div.title,
        #success_formula div.title {
            background: none; 
        }

        #success_formula .success_formula_top {
            padding: 25px 15px;
        }

        #success_formula .success_formula_left {
            width: 100%;
            margin-right: 0;
            margin-bottom: 30px;
        }

        #success_formula .success_formula_right {
            width: 100%;
        }


        #whom p.desc {
            width: auto;
        }

        .ttitle {
            font-size: 35px;
        }
    }

    @media(max-width: 450px) {
        #cases .case {
            width: 100%;
        }

        .new-reviews .review-head .review-photo {
            width: 80px;
        }

        .new-reviews .review-head .review-photo img {
            width: 80px;
            height: 80px;
        }

        .new-reviews .review-head .review-title {
            font-size: 20px;
        }

        #about .frames .empty .frame {
            height: 50px;
        }

        .instargam .title {
            font-size: 40px;
        }

        .howtodo p.stage {
            font-size: 28px;
        }
    }
}