body {
    background-color: #f0f3f5;
    text-align: center;
    margin: 0;
    font-family: "proxima";
    font-size: 12px;
}
@media all and (min-width:1280px) {
    nav {
        margin: 5% auto;
    }

    a {
        color: #f0f3f5;
        text-decoration: none;
    }

    a:hover {
        color: #f0f3f5;
        text-decoration: none;
    }

    h1 {
        font-size: 3.6em;
        width: 100%;
        height: 50px;
    }

    h2 {
        font-size: 3em;
        width: 100%;
    }

    h3 {
        font-size: 2em;
        width: 100%;
    }

    h4 {
        font-size: 1.4em;
        font-weight: normal;
        margin: 10px;
    }

    h5 {
        font-size: 1.25em;
        font-weight: normal;
        margin: 10px;
    }

    h6 {
        font-size: 1em;
        font-weight: normal;
        margin: 10px;
    }

    p {
        font-size: 1.2em;
    }
    li {
    font-size: 1.2em;
    }

    header {
        width: 100%;
        position: relative;
    }

    #header-top, #slider, #produkciya, #about, #work, #header-bg, #header-bg-vtor, #about-bg, #content-vtor, .kategory-content {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        position: relative;
    }

    .slider-name, .slider-description, .border-slider, .kategorybg .prise, .stage, .zvonok, .step1, .step2, .step3 {
        width: 100%;
        box-sizing: border-box;
    }

    .menu, .kategory-line, .list {
        width: 75%;
        box-sizing: border-box;
    }

    .slider-icon {
        width: 85%;
        position: relative;
        flex-flow: row wrap;
        display: flex;
    }

    .kategory-line {
        width: 75%;
        position: relative;
        flex-flow: row wrap;
        display: flex;
    }

    .slider-left, .slider-left-vtor {
        width: 50%;
        display: flex;
        flex-flow: row wrap;
        position: relative;
    }
    .slider-left-vtor {
        min-height: 120px;
    }
    .content {
        width: 90%;
        box-sizing: border-box;
    }
.descript {
    width: 80%;
    box-sizing: border-box;
}
    .slider-right, .slider-vtor, .work-left, .work-right, .kategorybg-big, .kategorybg-text, .about, .about-slider {
        width: 50%;
        box-sizing: border-box;
    }

    .work-left, .work-right {
        width: 49%;
        box-sizing: border-box;
    }

    .header-t-left {
        width: 40%;
        box-sizing: border-box;
    }

    .header-t-center, .header-t-right, .footer-adress {
        width: 30%;
        box-sizing: border-box;
    }

    .logo, .icon, .footer-menu1, .footer-menu2 {
        width: calc(100% / 4);
        box-sizing: border-box;
    }
    .kategorycontent1-3{
        width: calc(100%/3);
        box-sizing: border-box;
        margin: 2% 0;
        text-align: center;
    }

    .footer-logo {
        width: 20%;
        box-sizing: border-box;
    }

    #header-bg {
        background-image: url("/netcat_template/template/geomat/files/img/header/header-bg.jpg");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: right bottom;
    }

    #header-bottom {
        width: 60%;
        margin-right: 40%;
        position: relative;
        display: flex;
        flex-flow: row wrap;
    }

    .kategory1-3 {
        width: calc(100% / 3 - 2%);
        border-radius: 10px;
        box-sizing: border-box;
        min-height: 150px;
    }

    .kategory2-3 {
        width: calc(100% / 3 * 2 - 2%);
        border-radius: 10px;
        min-height: 150px;
        position: relative;
        display: flex;
        flex-flow: row wrap;
    }

    .work-borderl, .work-borderr, .content-left, .content-right {
        width: 1%;
        box-sizing: border-box;
    }
.slider-phone, .logo-ph, .slider-vtor-phone {
    display: none;
}
    #header-top {
        background-color: #211e1f;
        color: #f5f5f5;
        z-index: 9999;
        position: fixed;
        top: 0px;
    }

    #header-bottom {
        margin-top: 2%;
    }

    #header-top img {
        margin-top: -2%;
    }
.logo {
z-index: 9000;
}
    .logo img {
        width: 100%;
        height: auto;
        max-width: 200px;
    }

    .menu {
        z-index: 5000;
    }

    .slider-left {
        margin-top: 15%;
    }

    .slider-left h2 {
        width: 100%;
        text-align: center;
    }

    .slider-left p {
        width: 80%;
        margin: 10px auto;
        text-align: left;
    }

    .slider-left img {
        max-width: 75px;
        height: auto;
        margin: 10px auto;
    }

    .slider-right {
        position: relative;
    }

    .slider-right img {
        width: 100%;
        height: auto;
    }

    .slider-icon, .kategory-line {
        margin: 0 auto;
    }

    .border-slider {
        min-height: 50px;
        background: linear-gradient(43.43deg, #f0f3f5 60%, #126000 60%);
        margin: -5px 0;
    }

    #produkciya {
        background: linear-gradient(90deg, #f0f3f5 99%, #126000 99%);
    }

    .kategory1-3, .kategory2-3 {
        background-color: white;
        margin: 2% auto;
    }

    .kategorybg {
        margin: auto 0;
        height: 300px;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

    .kategorybg-big {
        min-height: 300px;
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center left;
    }

    .kategorybg-text {
        height: 50%;
        margin: auto;
        text-align: center;
    }

    .button {
        display: inline-block;
        cursor: pointer;
        text-decoration: none;
        border: none;
        outline: none;
        color: #fbfbfd;
        margin: 10px auto;
        width: 35%;
        text-align: center;
        padding: 0 20px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
        font-weight: 800;
        -webkit-box-shadow: 0 3px 16px rgba(0, 0, 0, 0.15);
        box-shadow: 0 3px 16px rgba(0, 0, 0, 0.15);
        background: linear-gradient(135deg, #126000 50%, #082800 100%);
        transition: background 1s linear 0s;
    }

    .button:hover {
        background: linear-gradient(-135deg, #082800 50%, #126000 100%);

    }

    .button h5 {
        margin: 15px 0;
        color: #fff;
    }

    #about-bg {
        height: 1500px;
    }

    #about {
        min-height: 670px;
        color: #211e1f;
        background-image: url("/netcat_template/template/geomat/files/img/about/about-bg.jpg");
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center right;
    }

    .about {
        margin-top: 5%;
    }

    .about h2 {
        width: 90%;
        margin: 5% auto;
    }

    .about p {
        width: 80%;
        margin: 10px auto;
        text-align: justify;
    }

    .about a {
        color: #211e1f;
    }

    .about-slider {
        margin-top: 10%;
    }

    #work {
        background: #f0f3f5;
        border-top: 20px solid #126000;
    }

    .work-borderl, .content-left {
        background-color: #126000;
    }

    .work-borderr, .content-right {
        background: linear-gradient(180deg, #126000 25%, #082800 80%);
    }

    #work a {
        color: #211e1f;
    }

    .work-left {
        background-image: url("/netcat_template/template/geomat/files/img/work/prise-bg.png");
        background-repeat: no-repeat;
        background-size: 20% auto;
        background-position: left top;
    }

    .list {
        margin: 10% auto 0 auto;
        border: solid #e0e0e3;
        border-width: 15px 15px 15px 15px;
    }

    .list img {
        width: 130px;
        height: auto;
        margin: -10% 40% 0% -30%;
    }

    .list p {
        text-align: left;
        padding-left: 6%;
    }

    .list a {
        line-height: 1;
        display: inline-block;
        color: #211e1f;
        text-decoration: none;
        cursor: pointer;
    }

    .list a:after {
        display: block;
        content: "";
        height: 1px;
        width: 0%;
        background-color: #211e1f;
        transition: width .3s ease-in-out;
    }

    .list a:hover:after,
    a:focus:after {
        width: 100%;
    }

    .step1, .step2, .step3 {
        min-height: 150px;
    }

    .step1 {
        background-image: url("/netcat_template/template/geomat/files/img/work/1.jpg");
        background-repeat: no-repeat;
        background-size: 130px;
        background-position: -5% 20%;
    }

    .step2 {
        background-image: url("/netcat_template/template/geomat/files/img/work/2.jpg");
        background-repeat: no-repeat;
        background-size: 130px;
        background-position: 95% 20%;
    }

    .step3 {
        background-image: url("/netcat_template/template/geomat/files/img/work/3.jpg");
        background-repeat: no-repeat;
        background-size: 130px;
        background-position: -5% 20%;
    }

    .zvonok {
        min-height: 300px;
        background-image: url("/netcat_template/template/geomat/files/img/work/zvonok-bg.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: bottom center;
        
    }

    .zvonok h3 {
        margin: 0;
        padding-top: 5%;
    }

    .zvonok a {
        color: #211e1f;
    }

    footer {
        width: 100%;
        min-height: 100px;
        display: flex;
        flex-flow: row wrap;
        background-color: #211e1f;
        color: #f0f3f5;
    }

    footer a {
        line-height: 1;
        display: inline-block;
        color: #f0f3f5;
        text-decoration: none;
        cursor: pointer;
    }

    footer a:after {
        display: block;
        content: "";
        height: 1px;
        width: 0%;
        background-color: #f0f3f5;
        transition: width .3s ease-in-out;
    }

    footer a:hover:after,
    a:focus:after {
        width: 100%;
    }

    #header-bg-vtor {
        background: linear-gradient(32deg, #f0f3f5 60%, #126000 60%);
    }

    #trail {
        width: 100%;
        color: #211e1f;
        margin-top: -15%;
    }

    #trail a {
        color: #211e1f;
    }
.descript {
    margin: -15% auto auto auto;
    text-align: justify;
}
    #content-vtor {
        background-image: url("/netcat_template/template/geomat/files/img/content/content-vtbg.jpg");
        background-repeat: no-repeat;
        background-size: 100% 20px;
        background-position: top center;
        margin-top: -5%;
        z-index: 1000;
    }

    .content {
        margin: 0 4%;
        padding-top: 5%;
    }
.content a {
   line-height: 1;
        display: inline-block;
        color: #126000;
        text-decoration: none;
        cursor: pointer;
}
 .content a:after {
        display: block;
        content: "";
        height: 1px;
        width: 0%;
        background-color: #211e1f;
        transition: width .3s ease-in-out;
    }

    .content a:hover:after,
    a:focus:after {
        width: 100%;
    }
    .slider-vtor {
        position: relative;
        margin-top: -10%;
        z-index: 3000;
    }

    .slider-vtor img {
        width: 80%;
        height: auto;
        float: right;
    }
}
@media (min-width: 980px) and (max-width: 1279px){
nav {
        margin: 5% auto;
    }

    a {
        color: #f0f3f5;
        text-decoration: none;
    }

    a:hover {
        color: #f0f3f5;
        text-decoration: none;
    }

    h1 {
        font-size: 3.6em;
        width: 100%;
        height: 50px;
        margin-top: 0;
    }

    h2 {
        font-size: 2.5em;
        width: 100%;
    }

    h3 {
        font-size: 2em;
        width: 100%;
    }

    h4 {
        font-size: 1.4em;
        font-weight: normal;
    }

    h5 {
        font-size: 1.25em;
        font-weight: normal;
        margin: 10px;
    }

    h6 {
        font-size: 1em;
        font-weight: normal;
        margin: 10px;
    }

    p {
        font-size: 1.2em;
    }
li {
    font-size: 1.2em;
    }
    header {
        width: 100%;
        position: relative;
    }

    #header-top, #slider, #produkciya, #about, #work, #header-bg, #header-bg-vtor, #about-bg, #content-vtor, .slider-icon, .kategory-content {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        position: relative;
    }
  .slider-left-vtor h1{
        min-height: 150px;
    }
    .slider-name, .slider-description, .border-slider, .kategorybg .prise, .stage, .zvonok, .step1, .step2, .step3 {
        width: 100%;
        box-sizing: border-box;
    }
.descript {
    width: 80%;
    box-sizing: border-box;
}
    .menu, .kategory-line, .list {
        width: 75%;
        box-sizing: border-box;
    }

    .kategory-line {
        width: 75%;
        position: relative;
        flex-flow: row wrap;
        display: flex;
    }

    .slider-left, .slider-left-vtor {
        width: 50%;
        display: flex;
        flex-flow: row wrap;
        position: relative;
    }

    .content {
        width: 90%;
        box-sizing: border-box;
    }

    .slider-right, .slider-vtor, .work-left, .work-right, .kategorybg-big, .kategorybg-text, .about, .about-slider {
        width: 50%;
        box-sizing: border-box;
    }

    .work-left, .work-right {
        width: 49%;
        box-sizing: border-box;
    }

    .header-t-left {
        width: 40%;
        box-sizing: border-box;
    }

    .header-t-center, .header-t-right, .footer-adress {
        width: 30%;
        box-sizing: border-box;
    }
.kategorycontent1-3 {
    width: calc (100% / 3);
    box-sizing: border-box;
    margin: 2% auto;
    text-align: center;
}
    .logo, .icon, .footer-menu1, .footer-menu2 {
        width: calc(100% / 4);
        box-sizing: border-box;
    }

    .footer-logo {
        width: 20%;
        box-sizing: border-box;
    }
  
    #header-bg {
        background-image: url("/netcat_template/template/geomat/files/img/header/header-bg2.jpg");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: right bottom;
    }

    #header-bottom {
        width: 60%;
        margin-right: 40%;
        position: relative;
        display: flex;
        flex-flow: row wrap;
    }

    .kategory1-3 {
        width: calc(100% / 3 - 2%);
        border-radius: 10px;
        box-sizing: border-box;
        min-height: 150px;
    }

    .kategory2-3 {
        width: calc(100% / 3 * 2 - 2%);
        border-radius: 10px;
        min-height: 150px;
        position: relative;
        display: flex;
        flex-flow: row wrap;
    }

    .work-borderl, .work-borderr, .content-left, .content-right {
        width: 1%;
        box-sizing: border-box;
    }
    .slider-phone, .slider-vtor-phone {
        display: none;
    }

    #header-top {
        background-color: #211e1f;
        color: #f5f5f5;
        z-index: 9999;
        position: fixed;
        top: 0px;
    }

    #header-bottom {
        margin-top: -10%;
    }

    #header-top img {
        margin-top: -2%;
    }
.logo {
z-index: 9000;
}
    .logo img {
        width: 100%;
        height: auto;
        max-width: 200px;
    }

    .menu {
        z-index: 5000;
    }

    .slider-left {
        margin-top: 10%;
    }

    .slider-left h2 {
        width: 100%;
        text-align: center;
    }

    .slider-left p {
        width: 80%;
        margin: 10px auto;
        text-align: left;
    }

    .slider-left img {
        max-width: 75px;
        height: auto;
        margin: 10px auto;
    }

    .slider-right {
        position: relative;
    }

    .slider-right img {
        width: 100%;
        height: auto;
    }

    .slider-icon, .kategory-line {
        margin: 0 auto;
    }

    .border-slider {
        min-height: 50px;
        background: linear-gradient(43.43deg, #f0f3f5 60%, #126000 60%);
        margin: -5px 0;
    }

    #produkciya {
        background: linear-gradient(90deg, #f0f3f5 99%, #126000 99%);
    }

    .kategory1-3, .kategory2-3 {
        background-color: white;
        margin: 2% auto;
    }

    .kategorybg {
        margin: auto 0;
        height: 200px;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

    .kategorybg-big {
        min-height: 200px;
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center left;
    }

    .kategorybg-text {
        height: 50%;
        margin: auto;
        text-align: center;
    }

    .button {
        display: inline-block;
        cursor: pointer;
        text-decoration: none;
        border: none;
        outline: none;
        color: #fbfbfd;
        margin: 10px auto;
        width: 35%;
        text-align: center;
        padding: 0 20px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
        font-weight: 800;
        -webkit-box-shadow: 0 3px 16px rgba(0, 0, 0, 0.15);
        box-shadow: 0 3px 16px rgba(0, 0, 0, 0.15);
        background: linear-gradient(135deg, #126000 50%, #082800 100%);
        transition: background 1s linear 0s;
    }

    .button:hover {
        background: linear-gradient(-135deg, #082800 50%, #126000 100%);

    }

    .button h5 {
        margin: 15px 0;
        color: #fff;
    }

    #about {
        min-height: 550px;
        color: #211e1f;
        background-image: url("/netcat_template/template/geomat/files/img/about/about-bg.jpg");
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center right;
    }

    .about {
        margin-top: 5%;
    }

    .about h2 {
        width: 90%;
        margin: 5% auto;
    }

    .about p {
        width: 80%;
        margin: 10px auto;
        text-align: justify;
    }

    .about a {
        color: #211e1f;
    }

    .about-slider {
        margin-top: 10%;
    }

    #work {
        background: #f0f3f5;
        border-top: 20px solid #126000;
    }

    .work-borderl, .content-left {
        background-color: #126000;
    }

    .work-borderr, .content-right {
        background: linear-gradient(180deg, #126000 25%, #082800 80%);
    }

    #work a {
        color: #211e1f;
    }

    .work-left {
        background-image: url("/netcat_template/template/geomat/files/img/work/prise-bg.png");
        background-repeat: no-repeat;
        background-size: 20% auto;
        background-position: left top;
    }

    .list {
        margin: 10% auto 0 auto;
        border: solid #e0e0e3;
        border-width: 15px 15px 15px 15px;
    }

    .list img {
        width: 80px;
        height: auto;
        margin: -10% 40% 0% -30%;
    }

    .list p {
        text-align: left;
        padding-left: 6%;
    }

    .list a {
        line-height: 1;
        display: inline-block;
        color: #211e1f;
        text-decoration: none;
        cursor: pointer;
    }

    .list a:after {
        display: block;
        content: "";
        height: 1px;
        width: 0%;
        background-color: #211e1f;
        transition: width .3s ease-in-out;
    }

    .list a:hover:after,
    a:focus:after {
        width: 100%;
    }

    .step1, .step2, .step3 {
        min-height: 150px;
    }

    .step1 {
        background-image: url("/netcat_template/template/geomat/files/img/work/1.jpg");
        background-repeat: no-repeat;
        background-size: 100px;
        background-position: -5% 20%;
    }

    .step2 {
        background-image: url("/netcat_template/template/geomat/files/img/work/2.jpg");
        background-repeat: no-repeat;
        background-size: 100px;
        background-position: 95% 20%;
    }

    .step3 {
        background-image: url("/netcat_template/template/geomat/files/img/work/3.jpg");
        background-repeat: no-repeat;
        background-size: 100px;
        background-position: -5% 20%;
    }

    .zvonok {
        min-height: 250px;
        background-image: url("/netcat_template/template/geomat/files/img/work/zvonok-bg.jpg");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: bottom center;
    }

    .zvonok h3 {
        margin: 0 auto 5% auto;
        padding-top: 5%;
    }

    .zvonok a {
        color: #211e1f;
    }

    footer {
        width: 100%;
        min-height: 100px;
        display: flex;
        flex-flow: row wrap;
        background-color: #211e1f;
        color: #f0f3f5;
    }

    footer a {
        line-height: 1;
        display: inline-block;
        color: #f0f3f5;
        text-decoration: none;
        cursor: pointer;
    }

    footer a:after {
        display: block;
        content: "";
        height: 1px;
        width: 0%;
        background-color: #f0f3f5;
        transition: width .3s ease-in-out;
    }

    footer a:hover:after,
    a:focus:after {
        width: 100%;
    }
.footer-logo img {
    width: 100%;
    height: auto;
}
    #header-bg-vtor {
        background: linear-gradient(30deg, #f0f3f5 58%, #126000 58%);
        margin-top: -2%;
    }

    #trail {
        width: 100%;
        color: #211e1f;
        margin-top: -15%;
    }
.descript {
    margin: -20% auto auto auto;
    text-align: justify;
}
    #trail a {
        color: #211e1f;
    }

    #content-vtor {
        background-image: url("/netcat_template/template/geomat/files/img/content/content-vtbg.jpg");
        background-repeat: no-repeat;
        background-size: 100% 20px;
        background-position: top center;
        margin-top: -5%;
        z-index: 1000;
    }

    .content {
        margin: 0 4%;
        padding-top: 5%;
    }
.content a {
   line-height: 1;
        display: inline-block;
        color: #126000;
        text-decoration: none;
        cursor: pointer;
}
 .content a:after {
        display: block;
        content: "";
        height: 1px;
        width: 0%;
        background-color: #211e1f;
        transition: width .3s ease-in-out;
    }

    .content a:hover:after,
    a:focus:after {
        width: 100%;
    }
    .slider-vtor {
        position: relative;
        margin-top: -10%;
        z-index: 3000;
    }

    .slider-vtor img {
        width: 80%;
        height: auto;
        float: right;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    nav {
        margin: 5% auto;
    }

    a {
        color: #f0f3f5;
        text-decoration: none;
    }

    a:hover {
        color: #f0f3f5;
        text-decoration: none;
    }

    h1 {
        font-size: 2.5em;
        width: 100%;
        height: 50px;
        margin-top: 5%;
    }

    h2 {
        font-size: 2em;
        width: 100%;
    }

    h3 {
        font-size: 1.6em;
        width: 100%;
    }

    h4 {
        font-size: 1.4em;
        font-weight: normal;
    }

    h5 {
        font-size: 1.25em;
        font-weight: normal;
        margin: 10px;
    }

    h6 {
        font-size: 1em;
        font-weight: normal;
        margin: 10px;
    }

    p {
        font-size: 1.2em;
    }
li {
    font-size: 1.2em;
    }
    header {
        width: 100%;
        position: relative;
    }

    #header-top, #slider, #produkciya, #about, #work, #header-bg, #header-bg-vtor, #about-bg, #content-vtor, .slider-icon, .kategory-content {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        position: relative;
    }
    .slider-name, .slider-description, .border-slider, .kategorybg .prise, .stage, .zvonok, .step1, .step2, .step3 {
        width: 100%;
        box-sizing: border-box;
    }

    .list {
        width: 75%;
        box-sizing: border-box;
    }

    .kategory-line {
        width: 95%;
        position: relative;
        flex-flow: row wrap;
        display: flex;
    }

    .slider-left, .slider-left-vtor {
        width: 50%;
        display: flex;
        flex-flow: row wrap;
        position: relative;
    }

    .content {
        width: 90%;
        box-sizing: border-box;
    }

    .menu, .icon, .slider-vtor, .slider-right, .work-left, .work-right, .kategorybg-big, .kategorybg-text, .about, .about-slider {
        width: 50%;
        box-sizing: border-box;
    }

    .work-left, .work-right {
        width: 49%;
        box-sizing: border-box;
    }

    .header-t-left {
        width: 40%;
        box-sizing: border-box;
    }

    .header-t-center, .header-t-right, .footer-adress {
        width: 30%;
        box-sizing: border-box;
    }
    .kategorycontent1-3 {
        width: calc(100% / 3);
        box-sizing: border-box;
        margin: 2% auto;
        text-align: center;
    }
    .logo, .footer-menu1, .footer-menu2 {
        width: calc(100% / 4);
        box-sizing: border-box;
    }

    .footer-logo {
        width: 20%;
        box-sizing: border-box;
    }

    #header-bg {
        background-image: url("/netcat_template/template/geomat/files/img/header/header-bg2.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: right bottom;
    }

    #header-bottom {
        width: 60%;
        margin-right: 40%;
        position: relative;
        display: flex;
        flex-flow: row wrap;
    }
    .menu {
        margin: 0 auto;
    }

    .kategory1-3 {
        width: calc(100% / 3 - 2%);
        border-radius: 10px;
        box-sizing: border-box;
        min-height: 150px;
    }

    .kategory2-3 {
        width: calc(100% / 3 * 2 - 2%);
        border-radius: 10px;
        min-height: 150px;
        position: relative;
        display: flex;
        flex-flow: row wrap;
    }

    .work-borderl, .work-borderr, .content-left, .content-right {
        width: 1%;
        box-sizing: border-box;
    }
    .slider-phone, .logo-ph, .descript, .slider-vtor-phone {
        display: none;
    }

    #header-top {
        background-color: #211e1f;
        color: #f5f5f5;
        z-index: 9999;
        position: fixed;
        top: 0px;
    }

    #header-bottom {
        margin-top: 7%;
    }

    #header-top img {
        margin-top: -2%;
    }
.logo {
z-index: 9000;
}
    .logo img {
        width: 100%;
        height: auto;
        max-width: 200px;
    }

    .menu {
        z-index: 5000;
    }
    .slider-left {
        margin-top: 10%;
    }

    .slider-left h2 {
        width: 100%;
        text-align: center;
    }

    .slider-left p {
        width: 80%;
        margin: 10px auto;
        text-align: left;
    }

    .slider-left img {
        max-width: 75px;
        height: auto;
        margin: 10px auto;
    }

    .slider-right {
        position: relative;
    }

    .slider-right img {
        width: 100%;
        height: auto;
    }

    .slider-icon, .kategory-line {
        margin: 0 auto;
    }

    .border-slider {
        min-height: 50px;
        background: linear-gradient(43.43deg, #f0f3f5 60%, #126000 60%);
        margin: -5px 0;
    }

    #produkciya {
        background: linear-gradient(90deg, #f0f3f5 99%, #126000 99%);
    }

    .kategory1-3, .kategory2-3 {
        background-color: white;
        margin: 2% auto;
    }

    .kategorybg {
        margin: auto 0;
        height: 200px;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

    .kategorybg-big {
        min-height: 200px;
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center left;
    }

    .kategorybg-text {
        height: 50%;
        margin: auto;
        text-align: center;
    }

    .button {
        display: inline-block;
        cursor: pointer;
        text-decoration: none;
        border: none;
        outline: none;
        color: #fbfbfd;
        margin: 10px auto;
        width: 50%;
        text-align: center;
        padding: 0 20px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
        font-weight: 800;
        -webkit-box-shadow: 0 3px 16px rgba(0, 0, 0, 0.15);
        box-shadow: 0 3px 16px rgba(0, 0, 0, 0.15);
        background: linear-gradient(135deg, #126000 50%, #082800 100%);
        transition: background 1s linear 0s;
    }

    .button:hover {
        background: linear-gradient(-135deg, #082800 50%, #126000 100%);

    }

    .button h5 {
        margin: 15px 0;
        color: #fff;
    }

    #about {
        min-height: 550px;
        color: #211e1f;
        background-image: url("/netcat_template/template/geomat/files/img/about/about-bg.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center right;
    }

    .about {
        margin-top: 5%;
    }

    .about h2 {
        width: 90%;
        margin: 5% auto;
    }

    .about p {
        width: 80%;
        margin: 10px auto;
        text-align: justify;
    }

    .about a {
        color: #211e1f;
    }

    .about-slider {
        margin-top: 10%;
    }

    #work {
        background: #f0f3f5;
        border-top: 20px solid #126000;
    }

    .work-borderl, .content-left {
        background-color: #126000;
    }

    .work-borderr, .content-right {
        background: linear-gradient(180deg, #126000 25%, #082800 80%);
    }

    #work a {
        color: #211e1f;
    }

    .work-left {
        background-image: url("/netcat_template/template/geomat/files/img/work/prise-bg.png");
        background-repeat: no-repeat;
        background-size: 20% auto;
        background-position: left top;
    }

    .list {
        margin: 10% auto 0 auto;
        border: solid #e0e0e3;
        border-width: 15px 15px 15px 15px;
    }

    .list img {
        width: 80px;
        height: auto;
        margin: -10% 40% 0% -30%;
    }

    .list p {
        text-align: left;
        padding-left: 6%;
    }

    .list a {
        line-height: 1;
        display: inline-block;
        color: #211e1f;
        text-decoration: none;
        cursor: pointer;
    }

    .list a:after {
        display: block;
        content: "";
        height: 1px;
        width: 0%;
        background-color: #211e1f;
        transition: width .3s ease-in-out;
    }

    .list a:hover:after,
    a:focus:after {
        width: 100%;
    }

    .step1, .step2, .step3 {
        min-height: 150px;
    }

    .step1 {
        background-image: url("/netcat_template/template/geomat/files/img/work/1.jpg");
        background-repeat: no-repeat;
        background-size: 100px;
        background-position: -5% 20%;
    }

    .step2 {
        background-image: url("/netcat_template/template/geomat/files/img/work/2.jpg");
        background-repeat: no-repeat;
        background-size: 100px;
        background-position: 95% 20%;
    }

    .step3 {
        background-image: url("/netcat_template/template/geomat/files/img/work/3.jpg");
        background-repeat: no-repeat;
        background-size: 100px;
        background-position: -5% 20%;
    }

    .zvonok {
        min-height: 250px;
        background-image: url("/netcat_template/template/geomat/files/img/work/zvonok-bg.jpg");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: bottom center;
    }

    .zvonok h3 {
        margin: -10% auto 5% auto;
        padding-top: 12%;
    }

    .zvonok a {
        color: #211e1f;
    }

    footer {
        width: 100%;
        min-height: 100px;
        display: flex;
        flex-flow: row wrap;
        background-color: #211e1f;
        color: #f0f3f5;
    }

    footer a {
        line-height: 1;
        display: inline-block;
        color: #f0f3f5;
        text-decoration: none;
        cursor: pointer;
    }

    footer a:after {
        display: block;
        content: "";
        height: 1px;
        width: 0%;
        background-color: #f0f3f5;
        transition: width .3s ease-in-out;
    }

    footer a:hover:after,
    a:focus:after {
        width: 100%;
    }
.footer-logo img {
    width: 100%;
    height: auto;
}
    #header-bg-vtor {
        background: linear-gradient(30deg, #f0f3f5 58%, #126000 58%);
    }

    #trail {
        width: 100%;
        color: #211e1f;
        margin-top: -20%;
    }

    #trail a {
        color: #211e1f;
    }

    #content-vtor {
        background-image: url("/netcat_template/template/geomat/files/img/content/content-vtbg.jpg");
        background-repeat: no-repeat;
        background-size: 100% 20px;
        background-position: top center;
        margin-top: -5%;
        z-index: 1000;
    }

    .content {
        margin: 0 4%;
        padding-top: 5%;
    }
.content a {
   line-height: 1;
        display: inline-block;
        color: #126000;
        text-decoration: none;
        cursor: pointer;
}
 .content a:after {
        display: block;
        content: "";
        height: 1px;
        width: 0%;
        background-color: #211e1f;
        transition: width .3s ease-in-out;
    }

    .content a:hover:after,
    a:focus:after {
        width: 100%;
    }
    .slider-vtor {
        position: relative;
        margin-top: -10%;
        z-index: 3000;
    }

    .slider-vtor img {
        width: 80%;
        height: auto;
        float: right;
    }
}


@media (max-width: 767px) {
    nav {
        margin: 5% auto;
    }

    a {
        color: #f0f3f5;
        text-decoration: none;
    }

    a:hover {
        color: #f0f3f5;
        text-decoration: none;
    }

    h1 {
        font-size: 2.8em;
        width: 100%;
        height: 120px;
    }

    h2 {
        font-size: 2.5em;
        width: 100%;
    }

    h3 {
        font-size: 1.8em;
        width: 100%;
    }

    h4 {
        font-size: 1.5em;
        font-weight: normal;
        margin: 10px;
    }

    h5 {
        font-size: 1.25em;
        font-weight: normal;
        margin: 10px;
    }

    h6 {
        font-size: 1em;
        font-weight: normal;
        margin: 10px;
    }

    p {
        font-size: 1.2em;
    }
li {
    font-size: 1.2em;
    }
    header {
        width: 100%;
        position: relative;
    }

    #header-top, #header-bottom, #slider, .slider-left, #produkciya, #about, #work, #header-bg, #header-bg-vtor, #about-bg, #content-vtor, .kategory-content, #links {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        position: relative;
    }
    .kategory-line {
        width: 90%;
        position: relative;
        flex-flow: row wrap;
        display: flex;
    }
    .logo-ph, .slider-name, .slider-description, .slider-vtor-phone, .border-slider, .kategorybg, .about, .work-left, .work-right, .list, .stage, .footer-adress, .slider-left-vtor {
        width: 100%;
        box-sizing: border-box;
    }
    .prise, .step1, .step2, .step3 {
        width: 90%;
        box-sizing: border-box;
    }


    .slider-icon {
        width: 85%;
        position: relative;
        flex-flow: row wrap;
        display: flex;
    }
.kategorycontent1-3 {
    width: 50%;
    box-sizing: border-box;

}



    .content, .about-slider {
        width: 90%;
        box-sizing: border-box;
    }

    .header-t-center, .header-t-right, .menu, .icon, .slider-right, .kategorybg-big, .kategorybg-text, .footer-menu1, .footer-menu2 {
        width: 50%;
        box-sizing: border-box;
    }

    .header-t-left, .logo, .slider-right, .work-borderl, .work-borderr, .footer-logo, .slider-vtor, .content-left, .content-right, .zvonok, .descript {
        display: none;
    }

    #header-bg {
        background: linear-gradient(38.7deg, #f0f3f5 61%, #126000 61%);
    }

    .kategory1-3 {
        width: 100%;
        border-radius: 10px;
        box-sizing: border-box;
        min-height: 150px;
    }

    .kategory2-3 {
        width: 100%;
        border-radius: 10px;
        min-height: 150px;
        position: relative;
        display: flex;
        flex-flow: row wrap;
    }

    #header-top {
        background-color: #211e1f;
        color: #f5f5f5;
        z-index: 9999;
        position: fixed;
        top: 0px;
    }

    #header-bottom {
        margin-top: 7%;
    }

    #header-top img {
        margin-top: -2%;
    }
.logo-ph {
    margin: 5% auto 0 auto;
}
    .logo-ph img {
        width: 100%;
        height: auto;
        max-width: 200px;
    }

    .menu {
        margin: 0 auto;
        z-index: 5000;
    }
.slider-left{
    background: linear-gradient(90deg, #f0f3f5 99%, #126000 99%);
}
    .slider-left h2 {
        width: 100%;
        text-align: center;
    }

    .slider-left p {
        width: 80%;
        margin: 10px auto;
        text-align: left;
    }

    .slider-left img {
        max-width: 75px;
        height: auto;
        margin: 10px auto;
    }

    .slider-phone {
        position: relative;
        margin-top: 15%;
    }

    .slider-phone img {
        width: 100%;
        height: auto;
    }

    .slider-icon, .kategory-line {
        margin: 0 auto;
    }

    .border-slider {
        min-height: 50px;
        background: linear-gradient(43.43deg, #f0f3f5 60%, #126000 60%);
        margin: -5px 0;
    }

    #produkciya {
        background: linear-gradient(90deg, #f0f3f5 99%, #126000 99%);
    }

    .kategory1-3, .kategory2-3 {
        background-color: white;
        margin: 2% auto;
    }

    .kategorybg {
        margin: auto 0;
        height: 300px;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

    .kategorybg-big {
        min-height: 300px;
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center right;
    }

    .kategorybg-text {
        height: 50%;
        margin: auto;
        text-align: center;
    }

    .button {
        display: inline-block;
        cursor: pointer;
        text-decoration: none;
        border: none;
        outline: none;
        color: #fbfbfd;
        margin: 10px auto;
        width: 50%;
        text-align: center;
        padding: 0 20px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
        font-weight: 800;
        -webkit-box-shadow: 0 3px 16px rgba(0, 0, 0, 0.15);
        box-shadow: 0 3px 16px rgba(0, 0, 0, 0.15);
        background: linear-gradient(135deg, #126000 50%, #082800 100%);
        transition: background 1s linear 0s;
    }

    .button:hover {
        background: linear-gradient(-135deg, #082800 50%, #126000 100%);

    }

    .button h5 {
        margin: 15px 0;
        color: #fff;
    }

    #about {
        min-height: 670px;
        color: #211e1f;
        background: linear-gradient(90deg, #f0f3f5 99%, #126000 99%);
    }

    .about {
        background: linear-gradient(90deg, #f0f3f5 99%, #126000 99%);
    }

    .about h2 {
        width: 100%;
        text-align: center;
    }

    .about p {
        width: 90%;
        margin: 10px auto;
        text-align: justify;
    }

    .about a {
        color: #211e1f;
    }

    .about-slider {
        margin: 20% auto 0 auto;
    }

    #work {
        background: #f0f3f5;
        border-top: 20px solid #126000;
        background: linear-gradient(90deg, #126000 1%, #f0f3f5 1%, #f0f3f5 99%, #126000 99%);
    }

    .work-borderl, .content-left {
        background-color: #126000;
    }

    .work-borderr, .content-right {
        background: linear-gradient(180deg, #126000 25%, #082800 80%);
    }

    #work a {
        color: #211e1f;
    }

    .work-left {
        background-image: url("/netcat_template/template/geomat/files/img/work/prise-bg.png");
        background-repeat: no-repeat;
        background-size: 20% auto;
        background-position: left top;
    }
.prise {
    margin: 15% auto 0 auto;
}
    .list {
        margin: 10% auto 0 auto;
        border: solid #e0e0e3;
        border-width: 15px 15px 15px 15px;
    }

    .list img {
        width: 130px;
        height: auto;
        margin: -10% 40% 0% -30%;
    }

    .list p {
        text-align: left;
        padding-left: 6%;
    }

    .list a {
        line-height: 1;
        display: inline-block;
        color: #211e1f;
        text-decoration: none;
        cursor: pointer;
    }

    .list a:after {
        display: block;
        content: "";
        height: 1px;
        width: 0%;
        background-color: #211e1f;
        transition: width .3s ease-in-out;
    }

    .list a:hover:after,
    a:focus:after {
        width: 100%;
    }

    .step1, .step2, .step3 {
        min-height: 150px;
    }

    .step1 {
        margin: 5% auto;
        background-image: url("/netcat_template/template/geomat/files/img/work/1.jpg");
        background-repeat: no-repeat;
        background-size: 130px;
        background-position: -5% 20%;
    }

    .step2 {
        margin: 5% auto;
        background-image: url("/netcat_template/template/geomat/files/img/work/2.jpg");
        background-repeat: no-repeat;
        background-size: 130px;
        background-position: 95% 20%;
    }

    .step3 {
        margin: 5% auto;
        background-image: url("/netcat_template/template/geomat/files/img/work/3.jpg");
        background-repeat: no-repeat;
        background-size: 130px;
        background-position: -5% 20%;
    }

    footer {
        width: 100%;
        min-height: 100px;
        display: flex;
        flex-flow: row wrap;
        background-color: #211e1f;
        color: #f0f3f5;
    }

    footer a {
        line-height: 1;
        display: inline-block;
        color: #f0f3f5;
        text-decoration: none;
        cursor: pointer;
    }

    footer a:after {
        display: block;
        content: "";
        height: 1px;
        width: 0%;
        background-color: #f0f3f5;
        transition: width .3s ease-in-out;
    }

    footer a:hover:after,
    a:focus:after {
        width: 100%;
    }

    #header-bg-vtor {
        background: linear-gradient(9deg, #f0f3f5 50%, #126000 50%);
    }

    #trail {
        width: 100%;
        color: #211e1f;
        margin-top: -5%;
    }

    #trail a {
        color: #211e1f;
    }

    #content-vtor {
        z-index: 1000;
    }
    .slider-vtor-phone {
      margin: 5% auto;
    }
    .slider-vtor-phone img {
        width: 90%;
        margin-left: 10%;
    }
    .content {
        margin: 0 auto;
        padding-top: 5%;
    }
    .content h3 {
        font-size: 1.6em;
    }
.content a {
   line-height: 1;
        display: inline-block;
        color: #126000;
        text-decoration: none;
        cursor: pointer;
}
 .content a:after {
        display: block;
        content: "";
        height: 1px;
        width: 0%;
        background-color: #211e1f;
        transition: width .3s ease-in-out;
    }

    .content a:hover:after,
    a:focus:after {
        width: 100%;
    }
    .slider-vtor {
        position: relative;
        margin-top: -10%;
        z-index: 3000;
    }

    .slider-vtor img {
        width: 80%;
        height: auto;
        float: right;
    }
    .kategorycontent1-3 {
        margin: 2% auto;
        text-align: center;
    }
    #links a {
        width: 40%;
        max-width: 250px;
        height: auto;
        margin: 2% auto;
    }
    #links a img {
        width: 100%;
        max-width: 250px;
        height: auto;
    }
}