/* --------------------------------
Primary style
-------------------------------- */
html {
}
main {
    font-family: 'PT Sans', sans-serif;
    margin-left: 5%;
    margin-right: 5%;
}
/* --------------------------------
Main Components
-------------------------------- */
header {
    position: relative;
    z-index: 12;
}
/* --------------------------
навигационное меню
-----------------------------*/
*, *:before, *:after {-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;z-index: 1}
#header{background:#000;line-height:1.5;font-family:sans-serif;text-transform:uppercase;font-size:16px;color:#fff}
a{text-decoration:none;color: #a1faf8;}
#header{background:#000;width:100%;position:relative; height: 50px;z-index: 2;}
#header:after{content:"";clear:both;display:block}
.logo{float:left;padding:8px 0 26px 20px;position: relative;z-index: 3;}
.logo a{font-size:28px;display:block}
nav{float:right;}
nav>ul{float:left;position:relative}
nav li{list-style:none;float:left}
nav .dropdown_nav{position:relative}
nav li a{float:left;padding:14px 35px 12px 35px}
nav li a:hover{background:#00403f}
nav li ul{display:none}
nav li:hover ul{display:inline}
nav li li{float:none}
nav .dropdown_nav ul{position:absolute;left:0;top:100%;background:#000;padding:20px 0;border-bottom:3px solid #34495e}
nav .dropdown_nav li{white-space:nowrap}
nav .dropdown_nav li a{padding:10px 35px;font-size:13px;min-width:200px}
nav .mega-dropdown{width:100%;position:absolute;top:100%;left:0;background:#fff;overflow:hidden;padding:20px 35px;border-bottom:3px solid #34495e}
nav li li a{float:none;color: #a1faf8;;display:block;padding:8px 10px;border-radius:3px;font-size:13px}
nav li li a:hover{background:#00403f}
#menu-icon{position:absolute;right:0;top:50%;margin-top:-26px;margin-right:30px;display:none}
#menu-icon span{border:2px solid #fff;width:30px;margin-bottom:5px;display:block;-webkit-transition:all .2s;-webkit-transition:all .1s;transition:all .1s}
@media only screen and (min-width: 960px) {
  nav{display:block!important}
}
@media only screen and (max-width: 959px) {
  nav{display:none;width:100%;clear:both;float:none;max-height:400px;z-index: 999;}
  #menu-icon{display:inline;top:50px;cursor:pointer}
  #menu-icon.active .first{transform:rotate(45deg);-webkit-transform:rotate(45deg);margin-top:10px}
  #menu-icon.active .second{transform:rotate(135deg);-webkit-transform:rotate(135deg);position:relative;top:-9px;}
  #menu-icon.active .third{display:none}
  nav{padding:10px; text-align: center; padding-top: 96px; background: black}
  nav ul{float:none}
  nav li{float:none}
  nav ul li a{float:none;padding:8px;display:block}
  #header nav ul ul{display:block;position:static;background:none;border:none;padding:0}
  #header nav a{color:#a1faf8;padding:8px}
  #header nav a:hover{background:#00403f;color:#fff;border-radius:3px}
  #header nav ul li li a:before{content:"- "}
}

/*------------------------------------------------
 ХЛЕБНЫЕ КРОШКИ
-------------------------------------------------*/
ol.breadcrumb{
	list-style: none;
	font-size: 15px;
	padding: 15px 0;
}
ol.breadcrumb li{
	display: inline-block;
}
ol.breadcrumb li a{
	color: #30706f;
}
ol.breadcrumb li a:hover{
	text-decoration: underline;
}
.bread{
    width: 100%;
            flex: 1 1 100%;
            align-items: flex-start;

}
/*------------------------------------------------
 header
-------------------------------------------------*/
.template_main {
   /* width: 100%; */
    background-color: #013f3e;
    background-image:linear-gradient(120deg,#1b8684,#1b8684 55%,transparent 55.1%,transparent),url("../img/fon.jpg");
    background-position:0 0, right top;
    background-size:700px 500px, auto 340px;
    background-repeat: no-repeat;
    height: 340px;
    /* border: 1px solid red; */
}

.template{
    background-color: #013f3e;
    background-image:linear-gradient(120deg,#1b8684,#1b8684 55%,transparent 55.1%,transparent),url("../img/fon.jpg");
    background-position:0 0, right top;
    background-size:700px 700px, auto 340px;
    background-repeat: no-repeat;
    height: 150px;
   /* border: 1px solid red;   */
}
.logo{
    position: absolute;
    top: 0;
    left: 15px;
}
.logo2{
    display: none;
}
/*------------------------------------------------
text in header
-------------------------------------------------*/
.name_company_high{
    position: absolute;
    top: 60px;
    left: 185px;
}
.name_company_high .company_text {
    font-size: 40px;
    line-height: 40px;
    color: #a1fafa;
    display: block;
}
.name_company_high .slogan {
    font-size: 30px;
    line-height: 30px;
    display: block;
    /* color: #a1fafa;*/
}
.div_rem_mob_teh{
    position: absolute;
    top: 200px;
    left: 4%;
}
.div_rem_mob_teh .text_rem_mob_teh{
    color: white;
    font-size: 25px;
}
.div_vremya_raboti{
    position: absolute;
    top: 245px;
    left: 105px;
}
.div_vremya_raboti span{
    font-size: 20px;
}
.div_vremya_raboti img, .div_number_telephone img{
    display: block;
    position: absolute;
    top: 5px;
    left: -45px;
}
.div_number_telephone{
    position: absolute;
    top: 295px;
    left: 105px;
}
.div_number_telephone span {
    font-size: 20px;
}
.div_telephone{
    position: absolute;
    top: 64px;
    right: 45px;
}
#under-head{
    width: 100%;
    height: 100px;
}

.black_link{
    color: #000;
    text-decoration: underline;
}
/************************************************************************************
smaller than 1920
*************************************************************************************/
@media screen and (max-width: 1920px) {
    body{
        margin-right: 0%;
        margin-left: 0%;
    }
	.right-column{
        width: 29%;
	}
	.left-column{
        width: 65%;
    }
}

/************************************************************************************
more than 1700
*************************************************************************************/
@media only screen and (min-width: 1700px) {
 .template_main {
  background-size:1000px 500px, auto 340px;
 }
}

/************************************************************************************
smaller than 1600
*************************************************************************************/
@media screen and (max-width: 1600px) {
    body{
        margin-right: 5%;
        margin-left: 5%;
    }
    .left-column{
        width: 65%;
    }
    .block_news{
        width: 31%;
    }
    .right-column{
        width: 29%;
    }
    aside{
        width: 29%;
    }
    .mobile_box{
        width: 31%;
    }
	.seo_mobile_box{
		width: 23%;
	}
}

/************************************************************************************
smaller than 1440
*************************************************************************************/
@media screen and (max-width: 1440px) {
    body{
        margin-right: 0%;
        margin-left: 0%;
    }
}
/************************************************************************************
smaller than 1320
*************************************************************************************/
@media screen and (max-width: 1320px) {
    .status_zakaza_remonti{
        display: none;
    }
    .status_zakaza{
        display: none;
    }
	aside {
      display: none;
    }
     .aside_index{
        display: block; 
        margin: 2% 2.9% 1% 1%;
    }
   .article_index{
        width: 63%;
       display: ;
    }
    .right-column{
        display: none;
    }
    .left-column{
        width: 92%;
        margin: 0 4% 4% 4%;
    }
    .mobile_firms_main_block{
        min-height: 0;
    }
    article{
        width: 96%;
    }

/*
    .text_after_model_firms{
        width: 100%;
    }
*/
}

/************************************************************************************
smaller than 1280
*************************************************************************************/
@media screen and (max-width: 1280px) {
    
	.figure_index{
    text-align: center;
	margin: 20px 3%;
}
}


/************************************************************************************
smaller than 1249
*************************************************************************************/
@media screen and (max-width: 1249px) {
    .block1{
        width: 31%;
        display: block;
    }
}
/************************************************************************************
smaller than 959
*************************************************************************************/
@media only screen and (max-width: 959px) {
    .div_rem_mob_teh,.div_vremya_raboti,
    .div_number_telephone,.div_telephone,#under-head{display: none;}
    #header{
        height: 66px;
    }
    .name_company_high{
    position: absolute;
    top: 10px;
    left: 65px;
    z-index: 3;
    }
    .name_company_high .slogan {
    color: #a1fafa;
    font-size: 17px;
    line-height: 17px;
    }
    .name_company_high .company_text {
    font-size: 24px;
    line-height: 24px;
    color: #a1fafa;
    }
    .template_main {
    background-image:url("../img/fon.jpg");
    background-position: center center;
        background-size: cover;
    height: 115px;
    }
    .logo{
    display: none;
    }
    .logo2{
    position: absolute;
    padding-top: 0px;
    top: 0px;
    display: block;
    z-index: 3;
    }
    .heit_img_logo{
        height: 66px;
    }
    .accordion {
    margin: 85px 2% 0 2%;
    z-index: 2;
    }
    .template{
    background-color: #013f3e;
    background-image:url("../img/fon.jpg");
    background-position: center top;
    background-size: auto 340px;
    background-repeat: no-repeat;
    height: 120px;
   /* border: 1px solid red;   */
}
.block_menu{
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.block1{
    width: 350px;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}
    .aside_index{
        display: inline-block;
        margin: 2% 2.9% 4% 1%;
        width: 45%;
    }
    .article_index{
        width: 100%;
        margin: 2% 0 4% 0;
        padding: 0 3% 0 1%;
    }
}
/************************************************************************************
smaller than 880
*************************************************************************************/
@media screen and (max-width: 880px) {
    .mobile_box span {
        font-size: 95%;
    }
    .cd-main-content-nov{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
-ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
}
/************************************************************************************
smaller than 800
*************************************************************************************/
@media screen and (max-width: 800px) {
    .status_zakaza_remonti{
        display: none;
    }
    .status_zakaza{
        display: none;
    }
    .right-column{
        display: none;
    }

    aside {
        display: none;
    }
    .left-column{
        width: 96%;
        margin: 0 1% 4% 1%;
    }
    .mobile_brend{
        width: 100%
    }
    .mobile_box{
        width: 48%;
    }
  .block1{
      width: 48%;
      display: block;
  }
    .mobile_box img{
        display: block;
        margin: 0 auto;
        float: none;
    }
    .mobile_box span {
        width: 100%;
        font-size: 100%;
        float: left;
        position: static;
        text-align: center;
        margin-left: 0;
    }
    .mobile_box span:first-of-type{
        margin-top: 8px;
    }
    .block_news{
        width: 48%;
    }

.block_kontakty{
    flex-wrap: wrap;
}
.kartinka_vhoda {
    flex: 1 1 auto;
    width: 100%;
}
.article_remonti p,.article_remonti h2{
    padding-left: 20px;
}
.article_remonti ol,.article_remonti ul{
    padding-left: 20px;
}
}
/************************************************************************************
smaller than 640
*************************************************************************************/
@media screen and (max-width: 640px) {
    .mobile_box span{
        font-size: 110%;
    }
}
/************************************************************************************
smaller than 480
*************************************************************************************/
@media screen and (max-width: 480px) {
	#header{
		position: fixed;
		top:0;
	}
	.logo2{
		position: fixed;
	}
	.name_company_high{
		position: fixed;
	}
    .mobile_box span {
        width: 100%;
        font-size: 100%;
        float: left;
        position: static;
        text-align: center;
        margin-left: 0;
    }
    .mobile_box span:first-of-type{
        margin-top: 8px;
    }
  .block1{
      width: 100%;
      display: block;
  }
article{
  width: 96%;
}
    .aside_index{
        display: block;
        margin: 2% 2.9% 4% 1%;
        width: 95%;
    }
    .mobile_image{
        float: none;
        margin: 0 auto;
    }
    .about_repair_device .call_button{
        display: block;
        margin: 0 auto;
    }
    .about_repair_device .call_button a{
        color: #000;
    }
    .about_repair_device .number_phones{
        text-align: center;
    }
    .about_repair_device{
        margin-left: 4%;
    }
    .left-column h1{
        font-size: 16pt;
    }
    .zui-table{
        width: 92%;
        margin-left: 4%;
        margin-right: 4%;
    }
    .chast-remonti{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.chast-remonti .block_news{
    width: 100%;
}
    .second_line{
        display: block;
        width: 100%;
        text-align: center;
    }
}
/************************************************************************************
smaller than 320
*************************************************************************************/
@media screen and (max-width: 320px) {
    .block_news{
        width: 100%;
        font-size: 100%;
    }

}
/************************************************************************************
smaller than 290
*************************************************************************************/
@media screen and (max-width: 290px) {
    .mobile_box{
        width: 100%;
    }
    .mobile_box span{
        display: initial;
    }

}