@media screen and (min-width: 1920px) {
    #main {
        height: 1470px;
    }
    #subscription {
        margin-top: -300px;
    }
    #order-work {
        height: 820px;
    }
    #order-work .order-work-container {
        padding-top: 140px;
    }
    #footer {
        height: 1120px;
    }
    #footer .footer-container {
        padding-top: 420px;
    }
}

@media screen and (max-width: 1440px) {
    #subscription {
        margin-top: -135px;
    }

    #order-work .order-work-container {
        padding-top: 35px;
    }

    #order::before {
        width: 12%;
    }
}
@media screen and (max-width: 1300px) {
    #subscription {
        background-size: 100% 100%;
    }
    #technology {
        background-size: 125%;
    }
}
@media screen and (max-width: 1120px) {
    #order .order-container .order-block .order-block-text:after {
        left: 0;
        right: inherit;
        background-position: top left;
    }
}
@media screen and (max-width: 1059px) {
    #main .container, #estimation .estimation-container,
    #subscription .subscription-container, #technology .technology-container,
    #work-examples .work-examples-container, #order-work .order-work-container,
    #order .order-container, #materials .materials-container, #information .info-container,
    #about .about-container, #reviews .reviews-container, #footer .footer-container,
    #footer .footer-contacts, #promotion .promotion-container {
        width: 95%;
    }

    #main #header {
        width: 105.265%;
        margin-left: -2.5%;
    }

    #main #header .header-container {
        padding-top: 15px;
    }

    /*#main #header .header-container .menu {
        order: 2;
        width: auto;
    }

    #main #header .header-container .menu .menu-check + label {
        position: relative;
        top: 15px;
        right: 30px;
        z-index: 100;
        display: block;
        width: 30px;
        height: 21px;
    }

    #main #header .header-container .menu .menu-check + label span {
        position: relative;
        top: 9px;
        display: block;
        width: 100%;
        height: 3px;
        background-color: #fff;
        -webkit-transition: .3s linear;
        -moz-transition: .3s linear;
        -ms-transition: .3s linear;
        -o-transition: .3s linear;
        transition: .3s linear;
    }

    #main #header .header-container .menu .menu-check + label::before,
    #main #header .header-container .menu .menu-check + label::after {
        content: "";
        position: absolute;
        left: 0;
        display: block;
        width: 100%;
        height: 3px;
        background-color: #fff;
        -webkit-transition: .3s linear;
        -moz-transition: .3s linear;
        -ms-transition: .3s linear;
        -o-transition: .3s linear;
        transition: .3s linear;
    }

    #main #header .header-container .menu .menu-check + label::before {
        top: 0;
    }

    #main #header .header-container .menu .menu-check + label::after {
        bottom: 0;
        }*/

    /*#main #header .header-container .menu nav {
        position: fixed;
        flex-direction: column;
        top: 0;
        bottom: 0;
        right: -300px;
        z-index: 99;
        width: 300px;
        padding: 75px 30px 15px 20px;
        justify-content: flex-start;
        align-self: flex-start;
        background: #fff;
        -webkit-transition: right .3s linear;
        -moz-transition: right .3s linear;
        -ms-transition: right .3s linear;
        -o-transition: right .3s linear;
        transition: right .3s linear;
        }*/

    /*#main #header .header-container .menu .menu-link {
        width: 100%;
        border-top: 1px solid #ff7e00;
        align-self: flex-start;
        }*/

    /*#main #header .header-container .menu .menu-link:first-of-type {
        padding-bottom: 15px;
        border-top: none;
    }

    #main #header .header-container .menu .menu-link a {
        width: 100%;
        padding: 10px 0 10px 10px;
        text-align: left;
        color: #333;
    }

    #main #header .header-container .menu .menu-check:checked ~ nav {
        right: 0;
    }

    #main #header .header-container .menu .menu-check:checked + label span {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
    }

    #main #header .header-container .menu .menu-check:checked + label::before {
        top: 9px;
        background-color: #333;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #main #header .header-container .menu .menu-check:checked + label::after {
        bottom: 9px;
        background-color: #333;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    #main #header .header-container .menu .menu-link.phone-body a {
        position: relative;
        display: block;
    }

    #main #header .header-container .menu .menu-link.phone-body a::before {
        content: "";
        position: relative;
        top: .1em;
        display: inline-block;
        width: .85em;
        height: .85em;
        margin-right: 10px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 384' fill='%23333'%3E%3Cpath d='M353.188,252.052c-23.51,0-46.594-3.677-68.469-10.906c-10.719-3.656-23.896-0.302-30.438,6.417l-43.177,32.594 c-50.073-26.729-80.917-57.563-107.281-107.26l31.635-42.052c8.219-8.208,11.167-20.198,7.635-31.448 c-7.26-21.99-10.948-45.063-10.948-68.583C132.146,13.823,118.323,0,101.333,0H30.813C13.823,0,0,13.823,0,30.813 C0,225.563,158.438,384,353.188,384c16.99,0,30.813-13.823,30.813-30.813v-70.323C384,265.875,370.177,252.052,353.188,252.052z'/%3E%3C/svg%3E") no-repeat;
        background-size: contain;
        }*/

        body {
            position: relative;
        }

        .tel-mob {
          display: block;
          color: #5dbdcb;
          font-size: 16px;
          line-height: 20px;
          font-weight: 500;
          width: max-content;
          height: 30px;
          padding: 0 10px;
          display: flex;
          align-items: center;
          margin-left: 15px;
          margin-top: 3px;
            font-family: "Roboto", "Arial", sans-serif;
            border: 1px solid #5dbdcb;
            -webkit-box-shadow: 0px 0px 16px 2px #fff; 
            box-shadow: 0px 0px 16px 2px #fff;
            border-radius: 20px;
            background: #fff;
      }
      .tel-mob img{
          margin-right: 5px;
      }
      #main #header {
        overflow: hidden;
      }
      #main #header .header-container .menu .menu-link.phone-body a{
          display: flex;
          align-items: center;
      }
      #main #header .header-container .menu .menu-link.phone-body a img{
          width: 14px;
          margin-right: 5px;
      }
      #main #header .header-container .menu nav {
        position: fixed;
        top: 0;
        right: -500px;
        width: 100% !important;
        max-width: 300px !important;
        height: 100vh;
        z-index: 10;
        background: #fff;
        border-radius: 0;
        display: block;
        padding-top: 100px;
        padding-right: 25px;
        transition: right .5s;
    }

    #main #header .header-container .menu.is-active nav {
        right: -25px;
    }

    .burger-block {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: absolute;
        top: 20px;
        right: 10px;
        z-index: 15;
        width: 25px;
        height: 20px;
    }

    .burger-block .block {
        width: 25px;
        height: 3px;
        background: #fff;
        position: absolute;
        transition: transform .3s, top .3s, bottom .3s, opacity .3s, background .3s;
    }

    .burger-block .block1 {
        top: 0;
        left: 0;
    }

    .burger-block .block2 {
        top: 50%;
        left: 0;
        margin-top: -1.5px;
    }

    .burger-block .block3 {
        bottom: 0;
        left: 0;
    }

    .menu.is-active .burger-block .block2 {
        background: #000;
        opacity: 0;
    }

    .menu.is-active .burger-block .block1 {
        background: #000;
        transform: rotate(45deg);
        top: 50%;
    }

    .menu.is-active .burger-block .block3 {
        background: #000;
        transform: rotate(-45deg);
        bottom: 35%;
    }

    #header nav::after {
        display: none;
    }

    #header .nav-cont {
        display: flex;
        position: static;
        flex-direction: column;
        align-items: flex-start;
        background: transparent;
    }

    #main #header .header-container .menu .menu-link {
        height: auto;
        border-top: 1px solid #ff7e00;
        width: 100%;
    }
    #main #header .header-container .menu .menu-link a {
        color: #000;
        height: 100%;
        padding: 15px 5px;
        width: 100%;
        text-align: left;
    }
    #main #header .header-container .menu .block-img,
    .nav-link-tel {
        display: none;  
    }

    #main #header .header-container .logo .phone-body {
        display: none;
    }

    #main #header .header-container .logo .phone-body a {
        display: none;
    }

    #main #header .header-container .logo {
        margin: 0 0 0 20px;
        text-align: center;
    }

    #main #header .header-container .logo img {
        width: 100px;
    }

    #main .container {
        margin: 0;
        left: 2.5%;
    }
    #main #main-container h1.title .str-1 {
        font-size: 120px;
    }
    #main #main-container h1.title .str-2 {
        font-size: 85px;
    }
    #main #main-container h1.title .str-3 {
        font-size: 95px;
    }
    #main #main-container {
        justify-content: space-between;
    }
    #main #main-container .main-container_button {
        margin-left: 0;
    }

    #promotion {
        margin-top: 30px;
    }
    #promotion .promotion-container .discounts {
        width: 590px;
        margin: 0;
    }
    #promotion .promotion-container .discounts .discount_gift {
        padding-right: 190px;
    }
    #estimation .estimation-container .calculator .calculator-container .calc-block {
        width: 745px;
    }
    #subscription {
        margin-top: -150px;
    }
    #subscription .subscription-container .sub-form .sub_input input {
        width: 390px;
    }
    #subscription .subscription-container .sub-form {
        width: 85%;
        margin: 0 auto;
    }
    #work-examples .examples-slider .swiper-slide {
        height: auto;
    }
    #work-examples .work-examples-container {
        justify-content: center;
    }
    #work-examples .work-examples-container .example_button {
        margin-right: 0;
        margin-top: 0;
    }
    #order-work .order-work-container .order_image {
        width: 430px;
    }
    #order-work .order-work-container .order_title {
        font-size: 55px;
    }
    #order-work .order-work-container .order_subtitle {
        font-size: 35px;
    }
    #technology {
        background-size: 145%;
    }
    #order .order-container {
        justify-content: center;
    }
    #order .order-container .order-columns {
        width: 95%;
        justify-content: space-around;
    }
    #order .order-container h2.order_title {
        text-align: center;
    }
    #order .order-container {
        padding-top: 30px;
    }
    #order .order-container .order-block {
        display: flex;
        width: 70%;
    }
    #order .order-container .order-block .order-block-text {
        width: 70%;
        height: 400px;
    }
    #materials::before,
    #materials::after {
        content: none;
    }
    #materials .materials-container .container-fence {
        width: 600px;
    }
    #materials .materials-container .material-description {
        width: 350px;
    }
    #materials .materials-container .material-description .material_text {
        height: 550px;
    }
    #materials .materials-container .material-description h2.material_title {
        width: 95%;
        font-size: 30px;
    }
    #information {
        margin-top: 0;
        padding-top: 50%;
    }
    #footer .footer-container .footer-add-block {
        width: 400px;
    }
    #footer .footer-container .footer-add-block .block-text p {
        width: 300px;
    }
    #footer {
        height: 940px;
    }
    #footer .footer-contacts {
        padding-right: 0;
    }
}
@media screen and (max-width: 1023px) {

    #main #main-container h1.title {
        margin-top: 20px;
    }

    #main #main-container h1.title .str-1 {
        font-size: 80px;
    }

    #main #main-container h1.title .str-2 {
        font-size: 55px;
    }

    #main #main-container h1.title .str-3 {
        font-size: 70px;
    }

    #main #main-container .main-container_button {
        margin-right: 0;
        margin-top: -60px;
    }

    #main #main-container .main-container_timing {
        width: 480px;
    }

    #main {
        height: 100%;
    }

    #promotion {
        margin-top: 0;
        height: 100%;
    }

    #promotion .promotion-container .position .position_image::before {
        content: none;
    }

    #estimation {
        margin-top: 0;
    }

    #promotion .promotion-container {
        justify-content: center;
        height: 100%;
    }

    #promotion .promotion-container .discounts {
        width: 600px;
        height: auto;
        align-items: center;
        justify-content: center;
    }

    #promotion .promotion-container .discounts .discounts-text {
        margin-bottom: 30px;
    }

    #promotion .promotion-container .discounts .discount_gift {
        width: 475px;
        padding-right: 15px;
        text-align: center;
    }

    #promotion .promotion-container .position {
        margin-left: 0;
        margin-top: 100px;
    }

    #estimation .estimation-container .calculator .calculator-container .calc-block .calc-block-line .group .select-wrapper .select,
    #estimation .estimation-container .calculator .calculator-container .calc-block .calc-block-line .group .select-input .select,
    #estimation .estimation-container .calculator .calculator-container .calc-block .calc-block-line .group {
        width: 225px;
    }

    #estimation .estimation-container .calculator .calculator-container {
        justify-content: flex-end;
    }
    #estimation .estimation-container .calculator .calculator_cost {
        margin-top: -210px;
    }
    #estimation .estimation-container .calculator .calculator-container .calc-block {
        width: 100%;
    }
    #subscription .subscription-container .sub-form .sub_input input {
        height: 60px;
    }
    #subscription {
        background-size: 100% 70%;
        margin-top: -100px;
    }
    #subscription .subscription-container p.sub_title {
        margin-top: 0;
        margin-bottom: 5px;
    }
    #subscription .subscription-container .sub-form {
        width: 80%;
    }
    #subscription .subscription-container .sub-form .sub_button {
        margin-top: -135px;
        margin-right: 0;
    }
    #technology .technology-container {
        margin: 45px auto 0;
    }
    #technology {
        margin-top: -360px;
        background-size: 280%;
    }
    #technology .technology-container .technology-blocks {
        justify-content: space-around;
        width: 95%;
    }
    #technology .technology-container .technology-blocks .tech-block {
        margin: 20px 0;
    }
    #order-work .order-work-container .order_image {
        width: 390px;
        height: 265px;
    }
    #order-work .order-work-container .order_title {
        font-size: 40px;
    }
    #order-work .order-work-container .order_subtitle {
        font-size: 25px;
    }
    #order-work .order-work-container .block-items .item {
        margin: 20px;
    }
    #order-work .order-work-container .block-items {
        justify-content: space-around;
        width: 95%;
    }
    #order .order-container .order-block .order-block-text {
        width: 65%;
    }
    #order::before,
    #order::after,
    #order .order-container .order-block::before,
    #materials .big-images::before {
        content: none;
    }
    #materials {
        height: auto;
        margin-top: 0;
    }
    #materials .materials-container .container-fence {
        width: 300px;
        flex-wrap: wrap;
    }
    #order .order-container .order-block .order-block-text {
        height: 350px;
        padding: 30px 20px 30px 25px;
    }
    #order .order-container .order-block .order-block-text p {
        font-size: 18px;
    }
    #materials .materials-container .container-fence .block-fence .add-fence_image {
        width: 265px;
        height: 56px;
    }
    #materials .materials-container .block-fence {
        width: 300px;
        height: 475px;
    }
    #materials .materials-container .block-fence .fence_image {
        width: 100%;
        height: 80%;
    }
    #materials .materials-container .block-fence .add-fence_image img {
        max-width: 100%;
        max-height: 100%;
    }
    #materials .materials-container {
        height: auto;
        align-items: flex-end;
        justify-content: center;
        padding-top: 0;
    }
    #materials .materials-container .material-description .material_text {
        margin-left: 0;
        padding-left: 0;
        height: auto;
    }
    #materials .materials-container .material-description {
        width: 100%;
        margin-bottom: 10px;
    }
    #materials .big-images {
        height: 639px;
    }
    #materials .materials-container .panel-color {
        width: 100%;
        margin-left: 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    #materials .materials-container .panel-color .mini-block {
        margin: 2px;
    }
    #about {
        height: auto;
        margin-bottom: 30px;
    }

    #reviews .slider-body {
        width: 100%;
        padding-top: 56.25%;
    }

    #reviews .reviews-container .reviews-slider {
        position: absolute;
        top: 0;
        left: 20px;
        width: calc(100% - 40px);
        height: 100%;
    }

    #reviews .reviews-slider .swiper-slide,
    #reviews .reviews-slider .swiper-slide iframe {
        width: 100%;
        height: 100%;
    }

    #footer {
        height: auto;
    }
    #footer .footer-container {
        justify-content: center;
        padding-top: 110px;
    }
    #footer .footer-container .footer-add-block {
        width: 100%;
        flex-direction: row;
    }
    #footer .footer-container .footer-add-block .block {
        width: 40%;
    }
    #footer .footer-container .footer-add-block .block-text {
        width: 55%;
        align-content: space-between;
    }
    #footer .footer-contacts {
        justify-content: space-around;
        padding: 15px 0;
    }
    #footer .footer-container .footer-add-block .block-text h3.block_title {
        width: 100%;
    }
}
@media screen and (max-width: 767px) {
    #main {
        min-height: 95vh;
        padding: 0 0 45px;
        background: url('/i/bg/bg-main-mobile.jpg') no-repeat top center;
        background-size: 100% 100%;
    }
    #main .container {
        position: relative;
    }
    #main .bg-gate {
        display: none;
    }

    #main #main-container {
        margin-top: 35%;
    }

    #main #main-container h1.title {
        margin: 0 0 15%;
        text-align: center;
    }

    #main #main-container h1.title .str-1 {
        font-size: 60px;
    }

    #main #main-container h1.title .str-2 {
        font-size: 40px;
    }

    #main #main-container h1.title .str-3 {
        font-size: 40px;
    }

    #main #main-container .main-container_timing {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
        padding: 15px 10px;
        text-align: center;
    }

    #main #main-container .main-container_button {
        margin: 0 auto;
    }

    #main::after {
        width: 100%;
        height: auto;
        padding-top: 33%;
    }

    #promotion {
        margin-bottom: 40px;
    }

    #promotion .promotion-container {
        width: 100%;
        padding: 0;
    }

    #promotion .promotion-container .discounts {
        /* order: 1; */
    }

    #promotion .promotion-container .position .position_image {
        width: 80%;
        height: auto;
    }

    #promotion .promotion-container .position .position_image img {
        width: 100%;
        height: auto;
        margin-top: 0;
        margin-left: -10%;
    }

    #promotion .promotion-container .discounts {
        height: auto;
    }

    #promotion .promotion-container .discounts .discounts-text {
        /* order: 1; */
        margin-bottom: 20px;
    }

    #promotion .promotion-container .discounts .discount_gift {
        position: relative;
        /* top: -2.5em; */
        width: 100%;
        height: auto;
        padding: 15px 1em;
    }

    #promotion .promotion-container .position .categories {
        width: 42.7%;
        margin: 5% 0 0 -15%;
    }

    #promotion .promotion-container .position .position_image p {
        right: auto;
        left: 48%;
        top: 25%;
    }

    #promotion .promotion-container .position {
        width: 100%;
        margin-top: 40px;
    }

    #estimation {
        padding-bottom: 150px;
        background-image: url('/i/bg/bg-calc-mobile.jpg');
        background-position: bottom left;
    }

    #estimation .estimation-container p.estimation-container_text {
        padding: 0 0 40px;
    }

    #estimation .estimation-container .calculator {
        padding-left: 0;
    }

    #estimation .estimation-container .calculator .calculator-container .calc-block .calc-block-line {
        width: 48%;
        flex-direction: column;
    }

    #estimation .estimation-container .calculator .calculator-container .calc-block .calc-block-line .group .select-wrapper .select, #estimation .estimation-container .calculator .calculator-container .calc-block .calc-block-line .group .select-input .select, #estimation .estimation-container .calculator .calculator-container .calc-block .calc-block-line .group {
        width: 200px;
    }

    #estimation .estimation-container .calculator .calculator-container .calc-block {
        justify-content: center;
    }

    #estimation .estimation-container .calculator .calculator_cost .result-block .calc_result {
        font-size: 50px;
    }

    #estimation .estimation-container .calculator .calculator_cost .result-block .calc_prim {
        font-size: 16px;
    }

    #estimation .estimation-container .calculator .calculator_cost .result-block > p {
        font-size: 20px;
    }

    #estimation .estimation-container .calculator .calculator_cost {
        position: relative;
        top: -150px;
        width: 100%;
        margin-top: 0;
    }

    #estimation .estimation-container .calculator .calculator-container .calc-add-block {
        width: 100%;
        height: auto;
    }

    #estimation .estimation-container .calculator .calculator-container .calc-add-block .add-block-btn {
        position: relative;
        top: 180px;
        width: 180px;
        height: 180px;
        margin: 0 auto;
    }

    #estimation .estimation-container .calculator .calculator-container .calc-add-block .add-block-btn .send-btn {
        width: 100%;
        height: 100%;
    }

    #estimation .estimation-container .calculator .calculator-container .calc-add-block  .add-block-text {
        display: none;
    }

    #estimation .estimation-container .calculator .calculator_cost .result-block {
        padding-left: 0;
    }

    #subscription {
        height: auto;
        margin-top: -1px;
        padding: 15px 0;
        background-image: url('/i/bg/bg-sub-mobile.jpg');
        background-size: 100% 100%;
    }

    #subscription .subscription-container {
        height: auto;
    }

    #subscription .subscription-container p.sub_title {
        margin-bottom: 9.6%;
        padding: 0 10%;
        font-size: 34px;
    }

    #subscription .subscription-container .sub-form {
        width: 100%;
    }

    #subscription .subscription-container .sub-form .sub_input {
        width: 100%;
        margin: 0 0 20px;
    }

    #subscription .subscription-container .sub-form .sub_input input {
        width: 100%;
        height: 60px;
        padding: 0 20px;
        font-size: 18px;
    }

    #subscription .subscription-container .sub-form .sub_button {
        width: 180px;
        height: 180px;
        margin: 0 auto;
    }

    #subscription .subscription-container .sub-form .sub_button .subBtn {
        width: 100%;
        height: 100%;
        font-size: 20px;
    }

    #technology {
        margin-top: 0;
        background-size: 100%;
        height: 100%;
    }

    #technology .technology-container .technology-blocks {
        justify-content: center;
        width: 100%;
    }

    #technology .technology-container .technology-blocks .tech-block {
        width: 250px;
    }

    #technology .technology-container .technology-blocks .tech-block .tech-block_image {
        width: 250px;
    }

    #technology .technology-container .technology-blocks .tech-block .tech-block_image img {
        max-width: 100%;
    }

    #technology .technology-container .technology-blocks .tech-block h3.tech-block_title {
        font-size: 23px;
        margin-top: 20px;
    }

    #technology .technology-container .technology-blocks .tech-block p.tech-block_text {
        text-align: center;
    }

    #work-examples {
        height: auto;
        margin-top: 0;
        background-image: none;
    }

    #technology .technology-container .technology_text {
        margin: 0 auto 0;
    }

    #work-examples .work-examples-container {
        padding-top: 40px;
        height: 100%;
    }

    #work-examples .work-examples-container .examples {
        justify-content: space-around;
    }

    #order-work .order-work-container .order_image {
        width: 300px;
        height: 200px;
    }

    #order-work .order-work-container .order_title {
        font-size: 23px;
    }

    #order-work .order-work-container .order_subtitle {
        font-size: 15px;
    }

    #order-work .order-work-container .block-items {
        margin-top: 20px;
    }

    #order-work {
        height: 100%;
    }

    #order .leaves {
        display: none;
    }

    #order .order-container .order-block {
        flex-wrap: wrap;
        width: 85%;
    }

    #order .order-container .order-block .order-block-title {
        width: 100%;
        flex-direction: row;
        margin-bottom: 25px;
    }

    #order .order-container .order-block .order-block-title .order_icons {
        width: 73px;
        height: 73px;
        background-size: 60% 60%;
    }

    #order .order-container .order-block .order-block-text {
        width: 100%;
        height: auto;
        margin-top: 10px;
    }

    #order .order-container .order-block .order-block-title h5.title {
        width: calc(100% - 93px);
        margin-top: 0;
        text-align: left;
    }

    #materials {
        margin-top: 0;
        height: 100%;
    }

    #materials .materials-container {
        height: 100%;
    }

    #materials .materials-container .block-fence {
        height: 350px;
        margin: 10px 0;
    }

    #materials .materials-container .block-fence .fence_image {
        width: 74%;
    }

    #materials .materials-container .block-fence .add-fence_image {
        width: 80%;
        height: 15%;
    }

    #information {
        margin-top: 0;
    }

    #about {
        height: 100%;
    }

    #footer .footer-container .block-form-feedback {
        width: 100%;
    }

    #footer .footer-container .block-form-feedback form .sub_input input#feed-name, #footer .footer-container .block-form-feedback form .sub_input input#feed-phone {
        width: 155px;
        margin: 0 15px;
    }

    #footer .footer-container .block-form-feedback form .sub_input input#feed-mail,
    #footer .footer-container .block-form-feedback form .sub_input textarea#feed-massage {
        width: 340px;
    }

    #footer .footer-container .block-form-feedback form {
        width: 100%;
        justify-content: center;
    }

    #footer .footer-container .block-form-feedback h2.feedback_title {
        text-align: center;
    }

    #footer .footer-container .footer-add-block {
        flex-direction: column;
        align-items: center;
    }

    #footer .footer-container .footer-add-block .block {
        width: 85%;
    }

    #footer .footer-container .footer-add-block .block-text {
        width: 85%;
    }

    #footer .footer-container .footer-add-block .block-text h3.block_title {
        margin-top: 10px;
    }

    #footer .footer-contacts {
        flex-wrap: wrap;
    }

    #footer .footer-contacts > div {
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }

    #footer .footer-contacts .icon {
        text-align: left;
        margin-left: 30%;
    }
}
@media screen and (max-width: 640px) {

    #materials .materials-container {
        justify-content: space-between;
    }

    #materials .big-images {
        width: 73%;
        height: auto;
        padding-top: 100%;
        margin: 0;
        align-self: center;
    }

    #materials .big-images .images-wrapper {
        position: absolute;
        top: 0;
        left: 10px;
        width: calc(100% - 20px);
    }

    #materials .gallery-thumbs {
        width: 23%;
    }

    #materials .gallery-thumbs .thumbs-slide {
        width: 100%;
    }

    #materials .gallery-thumbs .thumbs-slide img {
        width: 70%;
    }

    #materials .gallery-thumbs .thumbs-slide label {
        height: auto;
        padding: 5px 0;
    }

    #footer .footer-container .block-form-feedback form .feedback_button {
        width: 100%;
        margin-top: 30px;
        text-align: center;
    }
    #main #header .header-container .logo img {
        display: none;
    }
    #main #header .header-container .logo p {
        margin-top: 15px;
        line-height: 21px;
    }
}
@media screen and (max-width: 460px) {
    #main::after {
        content: none;
    }
    #materials .gallery-thumbs .thumbs-slide img {
        width: 40%;
    }
    #footer .footer-container .footer-add-block .block-text .live-internet {
        position: static;
        margin: 10px auto 0;
    }
}
@media screen and (max-width: 425px) {
    #estimation .estimation-container .calculator .calculator-container .calc-block .calc-block-line .group .select-wrapper .select, #estimation .estimation-container .calculator .calculator-container .calc-block .calc-block-line .group .select-input .select, #estimation .estimation-container .calculator .calculator-container .calc-block .calc-block-line .group {
        width: 170px;
    }
    #estimation .estimation-container .calculator .calculator-container {
        justify-content: flex-end;
        width: 80%;
    }
    #estimation .estimation-container .calculator .calculator-container .calc-block .calc-block-line {
        width: 100%;
    }
    #estimation .estimation-container .calculator .calculator-container .calc-block .calc-block-line .group .select-wrapper .select, #estimation .estimation-container .calculator .calculator-container .calc-block .calc-block-line .group .select-input .select, #estimation .estimation-container .calculator .calculator-container .calc-block .calc-block-line .group {
        width: 300px;
    }
    #estimation .estimation-container .calculator .calculator-container .calc-block .calc-block-line {
        align-items: center;
    }
    #estimation .estimation-container .calculator .calculator-container .calc-add-block .add-block-btn {
        top: 230px;
    }
    #estimation .estimation-container .calculator {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-left: 0;
    }
    #estimation .estimation-container .calculator {
        justify-content: center;
    }
    #estimation .estimation-container .calculator .calculator_cost {
        width: 72%;
    }
    #subscription {
        height: auto;
        padding-top: 60px;
    }
    #subscription .subscription-container {
        height: auto;
    }
    #subscription .subscription-container .sub-form .sub_input input {
        width: 100%;
    }
    #footer .footer-container .block-form-feedback form .sub_input input,
    #footer .footer-container .block-form-feedback form .sub_input textarea#feed-massage {
        font-size: 13px;
    }
    #main {
        height: 97vh;
        padding: 0 0 20px;
    }

    #main .container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #main #main-container {
        height: auto;
        margin: 0 auto;
    }
   
    #main #main-container h1.title {
        margin-bottom: calc(50vh - 205px);
    }
    #main #main-container h1.title .str-1 {
        font-size: 42px;
    }
    #main #main-container h1.title .str-2 {
        font-size: 30px;
    }
    #main #main-container h1.title .str-3 {
        font-size: 44px;
    }
    #main #main-container .main-container_timing {
        font-size: 20px;
        order: 1;
    }
    #main #main-container .main-container_button,
    #main #main-container .main-container_button .main-btn {
        display: none;
    }
    #promotion .promotion-container .discounts .discount_gift p {
        font-size: 20px;
    }
    #promotion .promotion-container .discounts .discounts-text .discount-price p.price,
    #promotion .promotion-container .position .categories .category p.size,
    #promotion .promotion-container .position .categories .category p {
        font-size: 18px;
    }
    #estimation .estimation-container .calculator .calculator-container {
        width: 90%;
    }
    #estimation .estimation-container .calculator .calculator_cost {
        width: 85%;
        flex-direction: column;
    }
    #subscription .subscription-container .sub-form {
        width: 100%;
    }
    #promotion .promotion-container .position .position_image p {
        left: 42%;
        font-size: 14px;
    }
    #promotion .promotion-container .position .categories .category p.name {
        font-size: 14px;
    }
    #promotion .promotion-container .discounts {
        width: 96%;
        margin: 0 auto;
    }
    #promotion .promotion-container .position .categories {
        height: auto;
        justify-content: flex-start;
    }
    #promotion .promotion-container .position .categories .category {
        margin-bottom: 10px;
        padding: 5px 0;
    }
    #work-examples .work-examples-container .examples {
        flex-direction: column;
        align-items: center;
    }
    #work-examples .work-examples-container .example_button .exampleBtn {
        width: 130px;
        height: 130px;
    }
    #work-examples .work-examples-container .example_button {
        width: 130px;
        height: 130px;
        margin: 10px 0;
    }
    #order {
        padding-bottom: 20px;
    }
    #order-work .order-work-container .order_title {
        font-size: 20px;
    }
    #order-work .order-work-container .order_subtitle {
        font-size: 14px;
    }
    #materials .big-images {
        width: 288px;
        height: 414px;
        padding: 0;
    }
    #materials .big-image img {
        width: 100%;
    }

    #materials .gallery-thumbs {
        width: calc(100% - 300px);
        height: 414px;
    }

    #materials .gallery-thumbs .thumbs-wrapper {
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: space-between;
    }

    #materials .gallery-thumbs .thumbs-slide {
        height: 42px;
        margin-bottom: 0;
    }

    #materials .gallery-thumbs .thumbs-slide label {
        height: 100%;
        padding: 8px 0;
    }

    #materials .gallery-thumbs .thumbs-slide img {
        width: 80%;
        height: 100%;
    }
    #materials .gallery-thumbs .thumbs-slide p {
        display: none;
    }
    #information {
        height: 800px;
    }
    #footer .footer-container .block-form-feedback form .sub_input input#feed-name, #footer .footer-container .block-form-feedback form .sub_input input#feed-phone {
        width: 300px;
    }
    #footer .footer-container .block-form-feedback form .sub_input input#feed-mail, #footer .footer-container .block-form-feedback form .sub_input textarea#feed-massage {
        width: 300px;
    }

    #footer .footer-contacts .icon {
        width: 230px;
        margin-left: calc((100% - 230px) / 3);
    }

}

@media screen and (max-width: 375px) {
    #promotion .promotion-container .position .position_image p {
        left: 38%;
        top: 20%;
    }
    #subscription .subscription-container p.sub_title {
        padding: 0;
        font-size: 28px;
    }
    #footer .footer-container .footer-add-block .block-text address {
        font-size: 18px;
    }
    #footer .footer-container .footer-add-block .block-text address + p {
        font-size: 14px;
    }
}
@media screen and (max-width: 350px) {
    #main #header .header-container .menu nav {
        width: 270px;
    }
    #main #main-container h1.title .str-1 {
        font-size: 40px;
    }
    #main #main-container h1.title .str-2 {
        font-size: 26px;
    }
    #main #main-container .main-container_button,
    #main #main-container .main-container_button .main-btn {
        width: 120px;
        height: 120px;
        font-size: 15px;
    }
    #promotion .promotion-container .position .position_image {
        width: 70%;
    }
    #promotion .promotion-container .position .position_image p {
        top: 15%;
        left: 30%;
    }
    #promotion .promotion-container .position .categories {
        margin-top: 0;
    }
    #estimation .estimation-container .calculator .calculator-container {
        width: 100%;
    }
    #estimation .estimation-container .calculator .calculator_cost {
        width: 100%;
    }
    #subscription .subscription-container p.sub_title {
        font-size: 24px;
    }
    #order-work .order-work-container .order_title {
        font-size: 16px;
    }
    #order-work .order-work-container .order_subtitle {
        font-size: 11px;
    }
    #order-work .order-work-container .block-items .item .item-title h5.title {
        font-size: 15px;
    }
    #order .order-container .order-block .order-block-text {
        height: 410px;
    }

    #estimation .estimation-container .calculator .calculator-container .calc-add-block .add-block-btn,
    #subscription .subscription-container .sub-form .sub_button {
        width: 150px;
        height: 150px;
    }

    #materials .big-images {
        width: 268px;
        height: 375px;
    }

    #materials .gallery-thumbs {
        width: calc(100% - 278px);
        height: 375px;
    }

    #materials .materials-container .material-description .material_text {
        height: 625px;
    }
    #information {
        height: 955px;
    }
}