@font-face { /** */
    font-family: "HelveticaLigh";
    src: url("../fonts/5b85c7cc-6ad4-4226-83f5-9d19e2974123.eot?#iefix");
    src: url("../fonts/5b85c7cc-6ad4-4226-83f5-9d19e2974123.eot?#iefix") format("eot"),
    url("../fonts/bb85cc70-1239-4a3c-b9c7-4da74afaf032.woff2") format("woff2"),
    url("../fonts/835e7b4f-b524-4374-b57b-9a8fc555fd4e.woff") format("woff"),
    url("../fonts/2c694ef6-9615-473e-8cf4-d8d00c6bd973.ttf") format("truetype"),
    url("../fonts/3fc84193-a13f-4fe8-87f7-238748a4ac54.svg#3fc84193-a13f-4fe8-87f7-238748a4ac54") format("svg");
}


@font-face {
	font-family: "Material Design Icons";
	src: url("../fonts/materialdesignicons-webfont.woff2?v=1.4.57") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "lato";
	src: url("../fonts/lato_normal.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}


@font-face{
            font-family:linearicons;
            src:url(../fonts/Linearicons.ttf) format("truetype");font-weight:400;font-style:normal}


body{
    margin: 0;    
    padding: 0;
    /*font-family: lato,Helvetica,Arial,sans-serif;*/
    font-family:HelveticaLigh; 
}


/* tipycal */
h1 {
    font-size: 35px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #002b96;
}
.content{max-width:1200px;margin: auto;text-align: center;    padding: 0 20px;}
.row{}
.left_block {float: left;width:50%;}
.right_block{float: right;width:50%;}

.clear {clear: both;}



ul{}
.aboutlawn li {    
    border: none;
    position: relative;
    padding: 0;
    padding-left: 50px;
    list-style: none;
    margin: 15px 0px;
}
.aboutlawn li::before {
    font: normal normal normal 24px/1 "Material Design Icons";
    position: absolute;
    left: -2px;
    top: 50%;
    margin-top: 2px;
    -moz-transform: translate(0px,-50%);
    -webkit-transform: translate(0px,-50%);
    -ms-transform: translate(0px,-50%);
    -o-transform: translate(0px,-50%);
    transform: translate(0px,-50%);
    content: '\f22a';
    font-size: 30px;
    color: #ff8100;
}
/*  END tipycal */

/*  header  */

.header {
    background: url(../images/slider/header_bg_1.jpg) center 100%;
    background-size: cover;
}
.header_cont {margin-top: 20px;}
.header_logo_slogan {font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-left: 7px;
    margin-top: -5px;
    color: #00748f;}


.header_dark{    background-color: rgb(0 0 0 / 60%);height: 500px;}

.header_logo {float: left;}
.header_logo img {width: 300px;}

.header_right {float:right;width: 65%;text-align: right;}

.header_phone {display: inline-block;vertical-align: middle;margin: 20px 0 0 0;}
.header_phone a {text-decoration: none;
    color: #002b96;
    font-size: 25px;
    font-weight: bold;letter-spacing: 1px;
    }
.header_region {display: inline-block;vertical-align: middle;font-size: 17px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 20px 50px 0 0;}

.header_phone:before {
    font: normal normal normal 24px/1 "Material Design Icons";
    content: "\f4e1";
    color: #00748f;
    font-size: 35px;
    vertical-align: middle;
}
.header_region:before {
    font: normal normal normal 24px/1 "Material Design Icons";
    content: "\f444";
    color: #00748f;
    font-size: 35px;
    vertical-align: middle;
}



.slider_info {float: left;width: 65%;    text-align: left;margin-top: 70px;}
.slider_info_h1 {color:#fff;font-size: 50px;font-weight: bold;}
.slider_info_h2 {color:#fff;font-size: 25px;}
.slider_info_price {color:#00fff8;font-size: 50px;font-weight: bold;margin-top: 40px;}
.slider_info_promo {color: #daff00;font-size: 30px;margin-top: 40px;letter-spacing: 1px;}
.slider_info_promo b {color: #02ff00;font-size: 33px;    text-decoration: underline;}


.header_fos {float: right;width: 300px;}

#callback_fos {background: #fff;border-radius: 10px;padding: 20px;margin-top: 30px;}

.name2 {display: none;}

#callback_fos input{

    width: calc(100% - 60px);
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 400;
    line-height: 23px;
    color: #939292;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 3px;
    -webkit-appearance: none;
    margin: 5px;
}


#callback_fos .send {
    transition: 0.3s;
    background-color: #00b900;
    padding: 10px 30px;
    font-size: 25px;
    border-radius: 7px;
    color: #fff;
    border: 0;
    margin-top: 15px;
}
.fos .send:hover {background-color: #ff6464;color:#fff;}

.fos .callback_fos_header {    color: #333;font-size: 24px;font-weight: bold;margin: 2px 0 20px;letter-spacing: 1px;}
.callback_fos_info {text-align: left;margin: 0 0 15px 8px;}
.fos .callback_message { font-size: 25px;margin: 20px 0 50px;display: block;}
.fos .callback_message_success{color: #50a702;}


.header_menu {    background: rgb(0 0 0 / 40%);}

.menu {}
.menu ul{padding: 0;list-style: none;}
.menu ul li{display: inline-block;color: #fff;    padding: 15px 20px;text-transform: uppercase;letter-spacing: 1.5px;}

/*  END header  */

/*  mob menu    */

#mob_menu, #mob_menu_icon {display:none;}

#show_left_side_menu{ display: inline-block;width: 100%;  cursor: pointer;}
#hide_left_side_menu, #mob_menu{ display:none;}
#show_left_side_menu.hidden{ display:none;}
#hide_left_side_menu.visible, #mob_menu.visible{display: inline-block;    width: 96%;    cursor: pointer;}

#mob_menu .menu{box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.4);}

/*  END mob menu    */

/*  services    */

.services {    background: url(../images/services_bg.jpg) no-repeat top left;background-size: contain;padding: 50px 0;}

.services h1{}

.service_item {    display: inline-block;    width: 23%;margin: 0.5% 0.5% 3% 0.5%;border: 1px solid #ccc;vertical-align: top;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;}
.service_image {height: 250px;overflow: hidden; background: url(../images/services_bur.jpg) center bottom;background-size: cover;}
.serv_img_1 {background: url(../images/services_key.jpg) center bottom;background-size: cover;}
.serv_img_2 {background: url(../images/services_bur.jpg) center bottom;background-size: cover;}
.serv_img_3 {background: url(../images/services_oborud.jpg) center bottom;background-size: cover;}
.serv_img_4 {background: url(../images/services_priyamok.jpg) center bottom;background-size: cover;}
.serv_img_5 {background: url(../images/services_podvod.jpg) center bottom;background-size: cover;}
.serv_img_6 {background: url(../images/services_remont.jpg) center bottom;background-size: cover;}
.serv_img_7 {background: url(../images/services_filters.jpg) center bottom;background-size: cover;}
.serv_img_8 {background: url(../images/services_tn.jpg) center bottom;background-size: cover;}

.service_info {background: rgb(0 0 0 / 83%);color: #fff;}
.service_info .title{font-weight: bold;padding: 20px 5px;letter-spacing: 1px;min-height: 50px;font-size: 20px;    color: #00fff8;}
.service_info .descr{height: 150px;padding: 0 10px;}
.service_info .descr ul{text-align: left;}


/*  END service_item    */

/*    gallery    */
.gallery {margin: 50px 0;}

.galleryList {font-size: 0;}
.galleryImage {
    display: inline-block;
    width: 24%;
    overflow: hidden;
    height: 300px;
}

.galleryImage img{
    min-height: 100%;
    min-width: 100%;
}

.galleryImage * {}


/*  line1  about */

.line1 {background: url(../images/line1.png) center 60%;

    background-size: cover;
    box-shadow: 0 0px 15px #ccc;}
.line1 .dark{    background-color: rgb(0 0 0 / 60%);}

.line1 .content{}

.about_item {    display: inline-block;vertical-align: top;padding: 80px;}
.about_item .t1{color: #fff;font-size: 20px;font-weight: bold;letter-spacing: 2px;padding: 10px;text-transform: uppercase;}
.about_item .t2{    color: #00fff8;font-size: 30px;font-weight: bold;letter-spacing: 2px;}

.icon1:before {
    font: normal normal normal 24px/1 "Material Design Icons";
    content: "\f6a2";
    color: #00b900;
    font-size: 60px;
    vertical-align: middle;
}

.icon2:before {
    font: normal normal normal 24px/1 "Material Design Icons";
    content: "\f444";
    color: #00b900;
    font-size: 60px;
    vertical-align: middle;
}

.icon3:before {
    font: normal normal normal 24px/1 "Material Design Icons";
    content: "\f572";
    color: #00b900;
    font-size: 60px;
    vertical-align: middle;
}

.icon4:before {
    font: normal normal normal 24px/1 "Material Design Icons";
    content: "\f4e1";
    color: #00b900;
    font-size: 60px;
    vertical-align: middle;
}

.line1 a{    text-decoration: none;color: inherit;}
.line1 .call_line {padding: 20px 0 30px;}

/*  END line1  about */

/*  benefits    */

/* benefits  */
.benefits {text-align: center;background-color: #f3f3f3;padding-top: 1px;    padding-bottom: 50px;}
.benefits h1 {margin-bottom: 60px;}
.benefits .right_block {padding-right: 2%;    width: 48%;}
.benefits .right_block img{margin-top: 30px;max-width:100%;box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;}
.benefits .left_block {text-align:left;    padding-left: 2%;    width: 45%;}
.benefits li {
    border: none;
    position: relative;
    padding: 0;
    padding-left: 50px;
    list-style: none;
    margin: 15px 0px;
}
.benefits li::before {
    font: normal normal normal 24px/1 "Material Design Icons";
    position: absolute;
    left: -2px;
    top: 50%;
    margin-top: 2px;
    -moz-transform: translate(0px,-50%);
    -webkit-transform: translate(0px,-50%);
    -ms-transform: translate(0px,-50%);
    -o-transform: translate(0px,-50%);
    transform: translate(0px,-50%);
    content: '\f22a';

    color: #5bed00;
}


.benefits h2 {font-size: 30px;}

.benefits .title {    font-size: 20px;
    font-weight: bold;}
.benefits .title:before {
    content: '\f222';
    font: normal normal normal 24px/1 "Material Design Icons";
    color: #f00;
    margin-top: 20px;
    vertical-align: middle;
    font-size: 50px;
}

.benefits p{margin: 0 0 20px;}

/*  END benefits    */

/** how  **/

.how .content {
    background: url(../images/benefits_bg.png) no-repeat bottom left;
    background-size: 400px;
    padding-bottom: 110px;
}

.how h1 {}
.how{margin: 50px 0;}

.how_item {width: 29%;display: inline-block;vertical-align: top;    margin: 20px 20px 30px 20px;}
.how_item .title{text-align: left;font-size: 25px;margin-bottom: 10px;}
.how_item .descr{}

.how_item .name{display: inline-block;width: 70%;vertical-align: middle;}
.how_item .icon {    display: inline-block;}

.how_item .icon1:before {
    content: '\f4ea';
    font: normal normal normal 24px/1 "Material Design Icons";
    color: #f00;
    font-size: 50px;vertical-align: middle;}

.how_item .icon2:before {
    content: '\f30b';
    font: normal normal normal 24px/1 "Material Design Icons";
    color: #f00;
    font-size: 50px;vertical-align: middle;}

.how_item .icon3:before {
    content: '\f6a4';
    font: normal normal normal 24px/1 "Material Design Icons";
    color: #f00;
    font-size: 50px;vertical-align: middle;}

.how_item .icon4:before {
    content: '\f294';
    font: normal normal normal 24px/1 "Material Design Icons";
    color: #f00;
    font-size: 50px;vertical-align: middle;}

.how_item .icon5:before {
    content: '\f62b';
    font: normal normal normal 24px/1 "Material Design Icons";
    color: #f00;
    font-size: 50px;vertical-align: middle;}

.how_item .icon6:before {
    content: '\f602';
    font: normal normal normal 24px/1 "Material Design Icons";
    color: #f00;
    font-size: 50px;vertical-align: middle;}




/****/


/** contacts **/
.contacts {background: url(../images/footer_bg.jpg) center center;background-size: cover;}

.contacts .dark{    background-color: rgb(0 0 0 / 60%);}
.contacts .content {padding: 50px 0;}

.footer_logo {margin-top: 60px;}
.footer_logo img{width: 300px;}
.footer_logo_slogan {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-left: 7px;
    margin-top: -5px;
    color: #ffffff;
}
.footer_region {
    display: inline-block;
    vertical-align: middle;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 50px 0px 20px;
    color: #e1e1e1;
}
.footer_phone a{
    text-decoration: none;
    color: #002b96;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #e1e1e1;
}

.footer_phone:before {
    font: normal normal normal 24px/1 "Material Design Icons";
    content: "\f4e1";
    color: #00b900;
    font-size: 35px;
    vertical-align: middle;
}
.footer_region:before {
    font: normal normal normal 24px/1 "Material Design Icons";
    content: "\f444";
    color: #00b900;
    font-size: 35px;
    vertical-align: middle;
}



.contacts .left_block {text-align:left;    width: 48%;    margin-left: 2%;}
.contacts .label{color: #333;font-size: 24px;}
.contacts .val{color: #ff8100;margin: 5px 0 30px 0px;font-size: 18px;    font-weight: bold;}
.contacts .val a{color: #ff8100;text-decoration: none;} 
.contacts .phone{display: inline-block;vertical-align: top;}
.contacts .grafic{display: inline-block;vertical-align: top;margin-left: 50px;}
.contacts .region{vertical-align: top;}

.contacts .right_block {padding: 0 2%;width: 46%;}
/** END contacts **/

/*  baseline    */
.baseline {background-color: #333;color: #fff;}
.baseline .content{text-align: left;padding: 20px;font-size: 17px;}

/*  END baseline    */





#upbutton {
    background: url("../images/totop.png") no-repeat top left;
    height: 60px;
    width: 60px;
    bottom: 30px;
    right: 30px;
    cursor: pointer;
    display: none;
    position: fixed;
    z-index: 999;
  }

/*  footer  */



/*  END  footer  */

@media screen and (max-width: 1100px) {
    .slider_info {margin-top: 20px;}
}
@media screen and (max-width: 1000px) {

    .header_right {width: initial;}
    .header_region {margin: 0 20px 0 0;display: block;}
    .header_phone {margin: 0;display: block;}

    .slider_info_price {font-size: 40px;}

    .service_info .title {min-height: 70px;}

    .how_item {width: 27%;}

    .about_item {padding: 6vw;}

    .galleryImage {width: 33%;}

}

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

    .slider_info {margin-top: 0px;width: calc(100% - 320px);}
    .slider_info_price {margin-top: 20px;font-size: 30px;}

}

/*====  MOBILE  =====*/
@media screen and (max-width: 800px){
    body {min-width:300px;}
    
    /*  Убираем синий цвет телефонов на айфонах    */
    a[href^=tel]{color: #002b96; text-decoration: none;}


  /*  .header_fos {display: none;}*/
 .header_fos {
    width: 100%;
    padding-bottom: 20px;
} 
  
  #callback_fos {
    max-width: 300px;
    margin: 30px auto 30px;
}
  
  
    .slider_info {width: 100%;}

    .service_item {    width: 31%;}

    .line1 a {color: #00fff8;}
    .how_item {width: 40%;}

    .about_item {padding: 3vw;}

    .benefits .left_block {float: none;width: 96%;}
    .benefits .right_block {display: none;}

    .footer_phone a {color: #e1e1e1;}

    .contacts .left_block {float: none;width: 96%;text-align: center;}
    .contacts .right_block {float: none;width: 96%;}

    .footer_logo {margin-top: 0px;}
}

@media screen and (max-width: 700px){
    .header_logo {float: none;width: initial;}
    .header_right {float: none;width: initial;text-align: center;margin: 20px 0 25px;}
    .menu ul li {padding: 15px 15px;}
}

@media screen and (max-width: 600px){
    .menu_icon {font-weight: bold;letter-spacing: 2px;}
    .header_menu {display: none;}
    .header_cont {margin-top: 60px;}
    #mob_menu .navbar-nav {font-size:20px;margin: 0;}
    #mob_menu .navbar-nav li {line-height:initial;}
    .header_logo_menu {height: 60px;}
    .header_logo_menu .content {display: none;}

    #mob_menu { width: 100%;position: absolute;z-index: 9999;top: 53px;left: 0;margin-left: 10px;}
    #mob_menu .menu {background-color: #333;}
    #mob_menu_icon {
        display: block;
        padding: 2px 20px;
        color: #fff;
        background: #333;
        font-size: 40px;

        position: absolute;
        top: 0;
        z-index: 20;
        width: calc(100% - 40px);
    }
    .menu_icon_title {font-size: 20px; display: inline-block; vertical-align: 30%;}

    #mob_menu a {text-decoration: none;     color: #000;}
    #mob_menu a:hover {color: #1d89ff;border-bottom: 1px solid #ccc;}
    #mob_menu .inactive, #mob_menu .active{font-size: 20px;  padding: 10px; color:#1d89ff;border-bottom: 1px solid #ccc;}

    #mob_menu .menu ul li{display: block;border-bottom: 1px solid #fff;}

    .header_dark {height: 93vw;}

    .slider_info {margin-top: 10vw;}
    .slider_info_h1 {font-size: 8vw;}
    .slider_info_h2 {font-size: 5vw;}
    .slider_info_price {font-size: 7vw;}
    .slider_info_promo {font-size: 7vw;}
    .slider_info_promo b {font-size: 7.5vw;}


    .service_item {width: 48%;}
    .how_item {width: 36%;}
    .how .content {padding: 0;}

    .galleryImage {width: 50%;}
}


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

    .service_item {width: 99%;}
        
}