/* Основное */

body, html {
    
    padding: 0;
    margin: 0;
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    
}

.wrapper {
    
    max-width: 1600px;
    width: calc(100% - 20px);
    padding: 0 10px;
    margin: 0 auto;
    
}

.whatsapp_web {
        
        
        display: inline-block;
        background: url("/images/whatsapp.svg") center center no-repeat;
        width: 30px;
        height: 30px;
        background-size: cover;
    margin-top: -30px;
        z-index: 11
          
        
    }

.slogan {
        
    text-align: justify;
    text-align-last: justify;
    text-transform: uppercase;
    font-weight: 400;
    background: #f0f0f0;
    font-size: calc( (100vw - 1000px)/(1280 - 480) * (24 - 16) + 16px);
    letter-spacing: calc(2.5vw);
    color: #ffa200;
    border-bottom: 1px solid #ffa200;
    padding: 10px 20px 10px 20px;
    margin-bottom: 40px;
        
    }

.normi {
    
    clear: both
    
}

.img-fulltext-left img {
    
    max-width: 100%;
    height: auto
    
}

table {
    
    border-collapse: collapse;
    width: 100%!important;
    overflow: auto;
    
}

.su-spoiler-content {
    
    overflow: scroll;
    
}

table tr:nth-of-type(odd) {
    
    background: #f0f0f0
    
}

table tr td, table tr th {
    
    padding: 10px;
    border:1px solid #000
    
}

table tr td:nth-of-type(4), table tr td:nth-of-type(3) {
    
    text-align: center;
    white-space: nowrap
    
}

.zag_s {
    
    font-size: 32px;
    text-align: center;
    font-weight: 100
    
}

.zag_s .small {
    
    font-size: 20px;
    font-weight: 600;
    
}

.etapi {
    
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
    
}

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

.mobile {
    
    display: none;
    
}

h1, h2 {
    
    font-size: 38px;
    text-transform: uppercase;
    display: inline-block;
    line-height: 48px;
    padding-bottom: 0;
    margin-bottom: 40px;
    
}

dd {
    
    margin: 0;
    padding: 0;
    
}

.line_h1 {
    
    height: 5px;
    background: #ffa200;
    width: 60%;
    
    }

.content {
    
    min-height: 350px;
    margin: 30px 0 90px 0;
    
}

/* Верх */

.top {
    
    margin-top: 5px;
    text-align: right;
    
}

.top .logo {
    
    float: left;
    
}

.top .logo, .top .knopki, .top .contacts, .top .adres {
    
    display: inline-block;
    vertical-align: top;
    
}

.top .knopki {
    
    white-space: nowrap;
    margin-top: 45px;
    
}

.top .knopki .project, .top .knopki .callback {
    
    display: inline-block;
    
}

.top .knopki .project {
    
    margin-right: 20px;
    
}

.top .knopki .callback {
    
    margin-right: 20px;
    
}

.top .knopki .project a, .top .knopki .callback a {
    
    display: block;
    padding: 10px 20px 10px 40px;
    border-radius: 100px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    -webkit-transition: ease-in-out 0.5s; 
    -moz-transition: ease-in-out 0.5s; 
    -o-transition: ease-in-out 0.5s; 
    transition: ease-in-out 0.5s;

    
}

.top .knopki .project a:hover, .top .knopki .callback a:hover {
    
    background-color: #bf7900
    
}

.top .knopki .project a {
    
    background: url("/images/ico_project.png") no-repeat left 10px center #ffa200;
    
}

.top .knopki .callback a {
    
    background: url("/images/ico_callback.png") no-repeat left 10px center #ffa200;
    
}

.top .adres {
    
    font-size: 12px;
    line-height: 14px;
    padding-left: 30px;
    background: url("/images/ico_point.png") no-repeat left center;
    margin-top: 50px;
    margin-right: 40px;
    text-align: left;
    -webkit-transition: ease-in-out 0.5s; 
    -moz-transition: ease-in-out 0.5s; 
    -o-transition: ease-in-out 0.5s; 
    transition: ease-in-out 0.5s;
    
}

.top .adres:hover {
    
    color: #fe0000;
    
}

.top .contacts {
    
    text-align: right;
    text-align-last: right;
    font-size: 12px;
    margin-top: 50px;
    
}

.top .contacts .phone a {
    
    font-size: 18px;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    -webkit-transition: ease-in-out 0.5s; 
    -moz-transition: ease-in-out 0.5s; 
    -o-transition: ease-in-out 0.5s; 
    transition: ease-in-out 0.5s;
    
    
}

.top .contacts .phone a:hover {
    
    color: #ffa200;
    
}

.top .contacts .mail {
    
    margin-top: 4px;
    
}

.top .contacts .mail a {
    
    color: #616161;
    text-decoration: none;
    -webkit-transition: ease-in-out 0.5s; 
    -moz-transition: ease-in-out 0.5s; 
    -o-transition: ease-in-out 0.5s; 
    transition: ease-in-out 0.5s;
    
}

.top .contacts .mail a:hover {
    
    color: #ffa200
    
}

.top .contacts .link {
    
    margin-top: 10px;
    
}

.top .contacts .link a {
    
    font-size: 14px;
    color: #ffa200;
    text-decoration: none;
    -webkit-transition: ease-in-out 0.5s; 
    -moz-transition: ease-in-out 0.5s; 
    -o-transition: ease-in-out 0.5s; 
    transition: ease-in-out 0.5s;
    
}

.top .contacts .link a:hover {
    
    color: #a06600;
    
}

/* Меню */

.menu {
    
    border-top: 5px #dcdcdc solid;
    margin-top: 40px;
    
}

.menu ul {
    
    list-style: none;
    padding: 0;
    margin: 0;
    
}

.menu ul li {
    
    display: inline-block;
    margin-right: 50px;
    margin-top: -5px;
    
}

.menu ul li a {
    
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    font-weight: bold;
    display: block;
    padding-top: 20px;
    border-top: 5px solid #dcdcdc;
    -webkit-transition: ease-in-out 0.5s; 
    -moz-transition: ease-in-out 0.5s; 
    -o-transition: ease-in-out 0.5s; 
    transition: ease-in-out 0.5s;
    
    
}

.menu ul li:hover a {
    
    border-top: 5px solid #000000;
    padding-top: 20px;
    color: #ffa200
    
}

.menu ul li.active a {
    
    border-top: 5px solid #ffa200;
    padding-top: 20px;
    
}

/* Хлебные крошки */

.bread {
    
    padding: 5px 10px;
    background: #dcdcdc;
    border-radius: 100px;
    display: inline-block;
    font-size: 12px;
    margin-top: 30px;
    margin-bottom: 15px;
    
}

.bread a {
    
    color: #000;
    text-decoration: none;
    
}

/* Доп параметры */

.tsena {
    
    font-size: 22px; 
    font-weight: 600
    
}



/*  Форма внизу*/

.ques {
    
    background: #fdfdfd;
    padding: 40px 0;
    
}

.ques .text {
    
    text-transform: uppercase;
    font-size: 16px;
    
}

.ques .form {
    
    margin-top: 60px;
    
}

.ques .form .qf3txt, .ques .form .qf3btn, .ques .form .txt_seogl   {
    
    display: inline-block;
    width: 33%;
    
}

.ques .form .txt_seogl {
    
    color: #7a7a7a;
    font-size: 12px;
    display: inline-block;
    width: 20%;
    margin-top: 15px;
    
}

.ques .form .qf3label {
    
    display: block;
    margin-bottom: 10px;
    margin-left: 10px;
    
}

.ques .form input {
    
    
    font-family: "Exo 2", sans-serif;
    overflow: visible;
	padding: 8px 11px;
	border: 1px solid #CCC;
	border-bottom-color: #B3B3B3;
	border-radius: 4px;
	outline: none;
	background: linear-gradient(#FFF, #E6E6E6);
	box-shadow: inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,.1);
	color: #333;
	text-shadow: 1px 1px #FFF;
	width:300px;
	text-align:left;
	font-weight:400;
	display:block;
    margin-bottom:16px;
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    transition: all 0.5s;
}

.box_btn-primary {
    
    text-align: center
    
}

.box_btn-primary .qf3label {
    
    width: 0!important;
    
}

.btn-primary {
    
    
    font-family: "Exo 2", sans-serif;
    overflow: visible;
	padding: 8px 11px;
	border: 1px solid #CCC;
	border-bottom-color: #B3B3B3;
	border-radius: 4px;
	outline: none;
	background: linear-gradient(#FFF, #E6E6E6);
	box-shadow: inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,.1);
	color: #333;
	text-shadow: 1px 1px #FFF;
	width:auto;
	text-align:center;
	font-weight:400;
	display:inline-block;
    margin-bottom:16px;
    cursor: pointer;


}

.ques .form input[name="qfsubmit"] {
    
    background: linear-gradient(#ffa200, #f19900);
	box-shadow: inset 1px -1px #f19900, inset -1px 0 #f19900, 0 1px 2px rgba(0,0,0,.1);
    text-shadow: none;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    transition: all 0.5s;
    
}

.ques .form input[name="qfsubmit"]:hover {
    
    color: #000
    
}

.qfcapt {
    
    display: none
    
}

/* Форма в услугах */

.uslugi .ques {
    
    background: none;
    
}

.uslugi .ques .form {
    
    margin-top: 0;
    
}

/* Раздел услуги */

.uslugi .items-leading {
    
    font-size: 0;
    margin-top: 70px;
    
}

.uslugi .items-leading article {
    
    display: inline-block;
    vertical-align: top;
    width: 30%;
    margin-right: 5%;
    text-align:center;
    margin-bottom: 50px;
        
}

.uslugi .items-leading article:nth-of-type(3n) {
    
    margin-right: 0;
    
}

.uslugi .items-leading article h2 {
    
    margin-bottom: 25px;
    line-height: 18px
}

.uslugi .items-leading article h2 a {
    
    font-size: 16px;
    color: #000;
    text-decoration: none;
    font-weight: 600
    
}

/* Проекты */

.projects {
    
    
    
}

.projects .items-leading article {
    
    border: 1px solid #ccc;
    position: relative;
    padding: 0px;
    -webkit-transition: ease-in-out 0.5s; 
    -moz-transition: ease-in-out 0.5s; 
    -o-transition: ease-in-out 0.5s; 
    transition: ease-in-out 0.5s;
    width: calc(30% - 2px);
    height: 250px;
    overflow: hidden;
    
}

.projects .items-leading article:hover {
    
    border: 1px solid #ffa200;
    
}

.projects .items-leading article h2 {
    
    margin: 0;
    z-index: 10;
    position: absolute;
    text-align:center;
    padding: 10px 10px 20px 10px;
    background: rgba(255,255,255,0.85);
    bottom: 0;
    line-height: 12px;
    
    text-transform: none;
    width: calc(100% - 20px);
    left: 0
    
}

.projects .items-leading article h2 a {
    
    font-weight: 100!important;
    font-size: 14px;
    
}

.projects .items-leading article img {
    
    width: 100%;
    left: 0;
    top: 0;
    height: auto;
    display: block;
    z-index: 1
    
}

/* Иконки */

.icons {
    
    font-size: 0;
    padding: 80px 0;
    
}

.icons .icon {
    
    display: inline-block;
    width: 30%;
    margin-right: 5%;
    font-size: 14px;
    vertical-align: top;
    text-align: center
    
}

.icons .icon .image {
    
    height: 160px;
    position: relative;
    
}

.icons .icon .image img {
    
    display: block;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto
    
}

.icons .icon .zag {
    
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px
    
}

.icons .icon .text {
    
    font-size: 20px;
    color: #585858;
    
}

.icons .icon:nth-of-type(3n) {
    
    margin-right: 0;
    
}

.icons .icon .price {
    
    margin-top: 30px;
    font-size: 26px;
    
}

/* Виды кровли */

.krovlya {
    
    font-size: 0
    
}

.krovlya h3 {
    
    margin: 0;
    padding: 0;
    font-size: 18px;
    
}

.krovlya .krov {
    
    display: inline-block;
    vertical-align: top;
    width: calc(45% - 22px);
    font-size: 12px;
    padding: 10px;
    margin-bottom: 40px;
    margin-right: 10%;
    border: 1px solid #f0f0f0
    
}

.krovlya .krov:nth-of-type(2n) {
    
    margin-right: 0;
    
}

.krovlya .krov .image {
    
    display: inline-block;
    width: calc(40% - 5px);
    vertical-align: top;
    border-left: 5px solid #ffa200;
    font-size: 0;
    margin: -10px 0 -10px -10px
    
}

.krovlya .krov .image img {
    
    width: 100%;
    height: auto
    
}

.krovlya .krov .text {
    
    display: inline-block;
    vertical-align: top;
    width: 50%;
    margin-left: 9%;
    
}


/* Сео на главной */

.seo {
    
    background: #f0f0f0;
    padding: 50px 0;
    
}

.seo .image {
    
    display: inline-block;
    vertical-align: middle;
    margin-right: 10%;
    margin-left: 20%;
    
}

.seo .text {
    
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    width: 40%;
    font-weight: 600
    
}

/* Услуги на главной */

.uslugi_g {
    
    padding: 120px 0;
    font-size: 0;
    
}

.uslugi_g ul {
    
    list-style: none;
    padding: 0;
    margin: 0;
    
}

.uslugi_g ul li {
    
    display: inline-block;
    vertical-align: top;
    width: calc(30% - 2px);
    text-align: center;
    border-right: 1px solid #f2f2f2;
    margin-bottom: 60px;
    margin-right: 5%;
    
}

.uslugi_g ul li:nth-of-type(3n) {
    
    border: none;
    margin-right: 0;
    
}

.uslugi_g ul li h2 {
    
    font-size: 16px;
    font-weight: 600;
    
}

.uslugi_g ul li .newsflash-image {
    
    display: inline-block;
    height: 150px;
    width: 100%;
    position: relative;
    margin: 0;
    
}

.uslugi_g ul li .newsflash-image img {
    
    display: block;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
    
}

.uslugi_g ul li a {
    
    color: #000;
    text-decoration: none;
    
}

/* Видео */

.video {
    
    height: 70vh;
    background: #f9f9f9;
    position: relative
    
}

video {  
  position: absolute;
    top:0;
    left: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto; }
  

 @supports (object-fit: cover) {
     .video > video {
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
     }
 }

/* Какие дома мы строим */

.what {
    
    font-size: 0;
    
}

.what h2 {
    
    margin-bottom: 60px;
    
}

.what ul {
    
    list-style: none;
    margin: 0;
    padding: 0;
    
}

.what ul li {
    
    display: inline-block;
    vertical-align: top;
    width: calc(45% - 55px);
    margin-right: 10%;
    font-size: 14px;
    border-left: 5px solid #ffa200;
    margin-left: 10px;
    padding-left: 40px;
    margin-bottom: 120px;
    
}

.what ul li a {
    
    color: #000;
    text-decoration: none
    
}

.what ul li:nth-of-type(2n) {
    
    margin-right: 0;
    
}

.what ul li a h2 {
    
    font-size: 22px;
    color: #000;
    text-transform: none;
    margin: 0
    
}

.what ul li .desc {
    
    font-weight: 600
    
}

.what ul li .su-photo-gallery-links {
    
    height: 200px;
    
}

.what ul li dl, .what ul li dd {
    
    padding: 0;
    margin: 0;
    
}

.what ul li .field-label {
    
    display: none;
    
}

.what ul li .field-value {
    
    font-size: 26px;
    
}

.what ul li .image {
    
    margin-left: -40px;
    height: 225px;
    overflow: hidden
    
}

.what ul li .image img {
    
    width: 400px;
    height: auto
    
}

/* Рассчитать проект */

.rasch {
    
    background: #f0f0f0;
    padding: 80px 0;
    margin-bottom: 70px;
    position: relative;
    
}

.rasch .ruletka {
    
    background: url("/images/ruletka.png") no-repeat;
    width: 721px;
    height: 57px;
    position: absolute;
    right: 0;
    bottom: -35px;
    
}

.rasch h2 {
    
    font-size: 28px;
    line-height: 24px;
    padding-left: 20px;
    
}

.rasch .text {
    
    font-size: 16px;
    padding-left: 20px;
    margin-bottom: 50px;
    widows: 60%;
    
}

.rasch .send a {
    
    display: inline-block;
    background: url("/images/ico_mail.png") no-repeat left 20px top 15px #ffa200;
    color: #fff;
    padding: 15px 80px 15px 70px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    
}

/* Предложения в строительстве домов */

.predlogeniya {
    
    font-size: 0;
    padding: 60px 0;
    
}

.predlogeniya .predlogenie {
    
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
    width: calc(25% - 50px);
    margin-right: 12.5%;
    padding: 25px;
    background: #f0f0f0;
    line-height: 28px;
    -webkit-transition: ease-in-out 0.5s; 
    -moz-transition: ease-in-out 0.5s; 
    -o-transition: ease-in-out 0.5s; 
    transition: ease-in-out 0.5s;
    
    
}

.predlogeniya .predlogenie a {
    
    background: #ffa200;
    padding: 5px 15px;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    border-radius: 100px;
    -webkit-transition: ease-in-out 0.5s; 
    -moz-transition: ease-in-out 0.5s; 
    -o-transition: ease-in-out 0.5s; 
    transition: ease-in-out 0.5s;
    
}

.predlogeniya .predlogenie a:hover {
    
    background: #c37c00;
    
}

.predlogeniya .predlogenie:last-of-type {  
    
    margin: 0px
    
    
}

.predlogeniya .predlogenie .head {
    
    margin: -25px;
    margin-bottom: 30px;
    padding: 25px
    
}

.predlogeniya .predlogenie:nth-of-type(1) .head {
    
    background: #fed284
    
}

.predlogeniya .predlogenie:nth-of-type(2) .head {
    
    background: #ffbd4a
    
        
}
.predlogeniya .predlogenie:nth-of-type(3) .head {
    
    background: #ffa200
    
}

.predlogeniya .predlogenie .zaholovok {
    
    font-size: 22px;
    font-weight: 600;
    text-align: center
    
}

.predlogeniya .predlogenie .price {
    
    font-size: 16px;
    font-weight: 100;
    text-align: center
    
}

.predlogeniya .predlogenie:hover {
    
    transform: scale(1.1);
    filter: drop-shadow(0px 0px 7px #989898)
    
}

/* Проекты */

.projects {
    
    font-size: 0;
    
}

.projects .left {
    
    display: inline-block;
    vertical-align: top;
    width: 60%;
    font-size: 14px;
    margin-right: 5%;
    
}

.projects .right {
    
    display: inline-block;
    vertical-align: top;
    width: 35%;
    font-size: 14px;
    background: #f0f0f0;
    padding-bottom: 50px;
    border-radius: 10px;
    
}

.projects .su-tg-caption {
    
    display: none!important
    
}

.projects .icons {
    
    margin: 0;
    padding: 0;
    
}

.projects .icons .icon {
    
    width: 45%;
    
}

.projects .icons .icon:nth-of-type(3n) {
    
    margin-right: 5%;
    
}

.projects .icons .icon:nth-of-type(2n) {
    
    margin-right: 0;
    
}

.projects .icons .icon .zag {
    
    text-transform: uppercase;
    color: #333
    
}

.projects .icons .icon .text {
    
    font-size: 36px
    
}

/* Подвал */

.footer {
    
    background: url("/images/footer_back.jpg") no-repeat right bottom;
    font-size: 0;
    
}

.footer .menu {
    
    border-top: 6px solid #ffa200;
    margin-top:0;
    
}

.footer .menu a {
    
    border-top:6px solid #ffa200;
    margin-top:-1px
    
}

.footer .menu a:hover {
    
    border-top:6px solid #FE0000;
    margin-top:-1px;
    
}

.footer .menu li.active a {
    
    border-top:6px solid #d08401;
    
}

.footer .left {
    
    display: inline-block;
    vertical-align: top;
    width: 40%;
    margin-right: 10%;
    
}

.footer .left .zag {
    
    font-size: 32px;
    margin: 90px 0;
    
}

.footer .left .adres {
    
    margin-bottom: 30px;
    
}

.footer .left .adres .zagolovok {
    
    font-size: 18px;
    display: inline-block;
    vertical-align: top
    
}

.footer .left .adres .text {
    
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
    
}

.footer .left .adres .text a {
    
    color: #000;
    text-decoration: none;
    -webkit-transition: ease-in-out 0.5s; 
    -moz-transition: ease-in-out 0.5s; 
    -o-transition: ease-in-out 0.5s; 
    transition: ease-in-out 0.5s;
    
}

.footer .left .adres .text a:hover {
    
    color: #ffa200;
    
}

.footer .left .adres .line {
    
    background: #000;
    height: 1px;
    width: 35px;
    margin: 0 15px;
    display: inline-block;
    vertical-align: top;
    margin-top: 13px
    
}

.footer .left .logo {
    
    margin-top: 80px;
    
}

.footer .right {
    
    display: inline-block;
    width: 50%;
    vertical-align: top;
    
}

.footer .right .phone {
    
    margin-top: 90px;
    
}

.footer .right .phone a {
    
    font-size: 42px;
    color: #000;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    -webkit-transition: ease-in-out 0.5s; 
    -moz-transition: ease-in-out 0.5s; 
    -o-transition: ease-in-out 0.5s; 
    transition: ease-in-out 0.5s;
    
}

.footer .right .phone a:hover {
    
    color: #ffa200;
    
}

.footer .right .phone .callback {
    
    display: inline-block;
    vertical-align: middle;
    margin-left: 30px;
    
}

.footer .right .phone .callback a {
    
    font-size: 14px;
    text-decoration: underline
    
}

.footer .right .politics {
    
    font-size: 12px;
    color: #878787;
    margin-top: 120px;
    
}

.footer .right .politics a {
    
    font-size: 14px;
    color: #000;
    display: inline-block;
    margin-bottom: 20px;
    
}

.footer .right .politics .text {
    
    width: 70%;
    
}

@media screen and (max-width: 950px) {
    
    h1, h2 {
        
        text-align: center;
        font-size: 26px
        
    }
    
    .heading {
        
        text-align: center
        
    }
    
    img {
        
        max-width: 100%;
        
    }
    
    
    table {

        font-size: 12px;
        display: block;

    }
    
    .line_h1 {
        
        display: inline-block;
        width: 80%;
        
    }
    
    .menu_btn {
        
        position: fixed;
        top: 70px;
        right: 10px;
        background: url("/images/mob_b.svg") center center no-repeat;
        width: 30px;
        height: 30px;
        z-index: 11;
        background-size: cover;
        -webkit-transition: ease-in-out 0.5s; 
        -moz-transition: ease-in-out 0.5s; 
        -o-transition: ease-in-out 0.5s; 
        transition: ease-in-out 0.5s;  
        
    }
    
    .menu_btn.active {
        
        background: url("/images/mob_x.svg") center center no-repeat;
        background-size: cover;
        transform: rotate(360deg)
        
    }
    
    .phone_mob {
        
        position: fixed;
        top: 70px;
        right: 50px;
        background: url("/images/phone.svg") center center no-repeat;
        width: 30px;
        height: 30px;
        background-size: cover;
        z-index: 11
        
    }
    
    .whatsapp_mob {
        
        position: fixed;
        top: 70px;
        right: 90px;
        background: url("/images/whatsapp.svg") center center no-repeat;
        width: 30px;
        height: 30px;
        background-size: cover;
        z-index: 11
          
        
    }
    
    .slogan {
        

        
        font-size: calc( (100vw - 500px)/(1280 - 480) * (24 - 16) + 16px);
        letter-spacing: calc(0.6vw);
        font-weight: 600;

        padding: 10px 10px 10px 10px;
        margin-bottom: 20px;
        
    }
    
    .mobile {
        
        display: block
        
    }
    
    .top {
        
        text-align: left
        
    }
    
    .top .logo {

        float: none;

    }
    
    .top .logo img {
        
        width: 180px;
        
    }

    .top .knopki, .top .contacts, .top .adres {

        display: none;

    }
    
    /* Меню */

    .menu {

        display: none;
    }
    
    /*  Форма внизу*/

    .ques .text {

        font-size: 14px;

    }

    .ques .form .qf3txt, .ques .form .qf3btn, .ques .form .txt_seogl   {

        display: inline-block;
        width: 33%;

    }

    .ques .form .txt_seogl {

        color: #7a7a7a;
        font-size: 12px;
        display: inline-block;
        width: 30%;
        margin-top: 15px;

    }
    
     .ques .form .btn-primary {
    
    
    width: 100%;


}

    .ques .form .qf3label {

        display: block;
        margin-bottom: 10px;
        margin-left: 10px;
        font-size: 12px;
        white-space: nowrap

    }

    .ques .form input {

        width:70%;
        font-size: 12px;
        
    }
    
    /* Меню */
    
    .mob_menu {
        
        position: fixed;
        top: 0;
        left: -120%;
        width: calc(100% - 90px);
        padding: 20px;
        height: calc(100% - 40px);
        z-index: 11;
        box-shadow: 0 0 10px 0 rgba(0,0,0,0.7);
        background: rgba(255,255,255,0.9);
        -webkit-transition: ease-in-out 0.5s; 
        -moz-transition: ease-in-out 0.5s; 
        -o-transition: ease-in-out 0.5s; 
        transition: ease-in-out 0.5s;        
        
    }
    
    .mob_menu.show {
        
        left: 0;
        
    }
    
    .mob_menu ul {
        
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 30px;
        
    }
    
    .mob_menu ul li {
        
        margin-bottom: 20px;
        
    }
    
    .mob_menu ul li a {
        
        color: #000;
        font-size: 18px;
        text-decoration: none
        
        
    }
    
    .mob_menu .adres {
        
        font-size: 14px;
        padding: 20px;
        background: #f0f0f0;
        margin: -20px -20px 0 -20px 
        
    }
    
    .mob_menu .phone {
        
        margin: 20px 0 5px 0;
        
    }
    
    .mob_menu .phone a {
        
        font-size: 24px;
        text-decoration: none;
        color: #000;
        
    }
    
    .mob_menu .knopki .project a, .mob_menu .knopki .callback a {
    
        display: block;
        padding: 10px 20px 10px 40px;
        border-radius: 0px;
        text-decoration: none;
        margin: 0 -20px;
        color: #fff;
        font-weight: bold;
        -webkit-transition: ease-in-out 0.5s; 
        -moz-transition: ease-in-out 0.5s; 
        -o-transition: ease-in-out 0.5s; 
        transition: ease-in-out 0.5s;
        margin-bottom: 5px;


    }

    .mob_menu .knopki .project a:hover, .mob_menu .knopki .callback a:hover {

        background-color: #bf7900

    }

    .mob_menu .knopki .project a {

        background: url("/images/ico_project.png") no-repeat left 10px center #707070;

    }

    .mob_menu .knopki .callback a {

        background: url("/images/ico_callback.png") no-repeat left 10px center #707070;

    }
    
    /* Раздел услуги */


    .uslugi .items-leading article {

        display: inline-block;
        vertical-align: top;
        width: 45%;
        margin-right: 10%;
        text-align:center;
        margin-bottom: 50px;

    }

    .uslugi .items-leading article:nth-of-type(3n) {

        margin-right: 10%;

    }
    
    .uslugi .items-leading .img-intro-left {
        
        position: relative;
        text-align: center;


        
    }

    
    .uslugi .items-leading article:nth-of-type(2n) {

        margin-right: 0%;

    }

    .uslugi .items-leading article h2 {

        margin-bottom: 25px;
        line-height: 15px

    }

    .uslugi .items-leading article h2 a {

        font-size: 16px;
        color: #000;
        text-decoration: none;
        font-weight: 600

    }
    
    /* Сео на главной */

    .seo .image {

        display: block;
        margin-right: 0%;
        margin-left: 0%;
        text-align: center

    }

    .seo .text {

        font-size: 14px;
        display: block;
        width: 100%;
        text-align: center

    }

    /* Услуги на главной */

    .uslugi_g {

        padding: 100px 0 30px 0;
        font-size: 0;

    }

    .uslugi_g ul li {

        display: block;
        vertical-align: top;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f2f2f2;
        margin-bottom: 30px;
        padding-bottom: 30px;
        margin-right: 0%;

    }

    .uslugi_g ul li:nth-of-type(3n) {

        border-bottom: 1px solid #f2f2f2;

    }

    .uslugi_g ul li:last-of-type {
        
        border: none
        
    }
    
    /* Какие дома мы строим */

    .what ul li {

        display: block;
        width: calc(100% - 0px);
        margin-right: 0%;
        margin-left: 0px;
        padding-left: 0px;
        margin-bottom: 80px;
        padding-bottom: 50px;
        text-align: center;
        border:none;
        border-bottom: 5px solid #ffa200

    }
    
    .what ul li:last-of-type {
        
        border:none
        
    }
    
    .what ul li .image {
    
    margin-left: 0px;
    
    }


    .what ul li a h2 {

        font-size: 22px;
        color: #000;
        text-transform: none;
        margin: 0

    }

    .what ul li .desc {

        font-weight: 600

    }

    .what ul li dl, .what ul li dd {

        padding: 0;
        margin: 0;

    }

    .what ul li .field-label {

        display: none;

    }

    .what ul li .field-value {

        font-size: 26px;

    }
    
    /* Иконки */

    .icons .icon {

        display: block;
        width: 100%;
        margin-right: 0%;
        margin-bottom: 40px

    }


    /* Виды кровли */

    .krovlya .krov {

        display: block;
        vertical-align: top;
        width: calc(100% - 22px);
        margin-bottom: 40px;
        margin-right: 0;

    }
    
    .krovlya .krov h3 {
        
        margin-top: 20px;
        
    }

    .krovlya .krov:nth-of-type(2n) {

        margin-right: 0;

    }

    .krovlya .krov .image {

        width: calc(100% + 15px);
        margin: -10px

    }

    .krovlya .krov .text {

        display: block;
        width: 100%;
        margin-left: 0;

    }

    /* Предложения в строительстве домов */

    .predlogeniya .predlogenie {

        display: block;
        vertical-align: top;
        width: calc(100% - 50px);
        margin-right: 0;
        line-height: 28px;
        margin-bottom: 30px;


    }


    .predlogeniya .predlogenie:hover {

        transform: none;
        filter: none

    }


    /* Проекты */

    .projects .items-leading article {

        width: 100%;
        display: block


    }

    .projects .items-leading article:hover {

        border: 1px solid #ffa200;

    }

    .projects .items-leading article h2 {

        margin: 0;
        z-index: 10;
        position: absolute;
        text-align:left;
        padding: 10px 10px 20px 10px;
        background: rgba(255,255,255,0.85);
        bottom: 0;
        line-height: 12px;

        text-transform: none;
        left: 0

    }

    .projects .items-leading article h2 a {

        font-weight: 100!important;
        font-size: 14px;

    }

    .projects .items-leading article img {

        width: 100%;
        left: 0;
        top: 0;
        height: auto;
        display: block;
        z-index: 1

    }



    /* Проекты */

    .projects {

        display: flex; 
        flex-direction: column;

    }

    .projects .left {

        display: block;
        width: 100%;
        margin-right: 0;
        order: 2; 

    }

    .projects .right {

        display: block;
        width: 100%;
        font-size: 14px;
        order: 1; 

    }

    .projects .icons .icon {

        width: 50%;
        display: inline-block;
        margin-bottom: 10px

    }
    
    .projects .icons .icon .image {
        
        height: 80px;
        
    }

    .projects .icons .icon:nth-of-type(3n) {

        margin-right: 0;

    }

    .projects .icons .icon:nth-of-type(2n) {

        margin-right: 0;

    }

    .projects .icons .icon .zag {

        font-size: 15px;

    }

    .projects .icons .icon .text {

        font-size: 26px

    }

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* Подвал */
    
    .footer {
        
        background: #f0f0f0;
        
    }


    .footer .left {

        display: block;
        width: 100%;
        margin-right: 00%;

    }

    .footer .left .zag {

        font-size: 28px;
        padding-top: 70px;
        margin: 0 0 70px 0;
        
    }

    .footer .left .logo {

        margin-top: 80px;

    }
    
    .footer .left .logo img {
        
        width: 100%;
        height: auto
        
    }

    .footer .right {

        display: block;
        width: 100%;
        text-align: center

    }

    .footer .right .phone {

        margin-top: 90px;

    }

    .footer .right .phone a {

        font-size: 32px;
        color: #000;
        text-decoration: none;
        display: inline-block;
        vertical-align: middle;
        -webkit-transition: ease-in-out 0.5s; 
        -moz-transition: ease-in-out 0.5s; 
        -o-transition: ease-in-out 0.5s; 
        transition: ease-in-out 0.5s;

    }

    .footer .right .phone a:hover {

        color: #ffa200;

    }

    .footer .right .phone .callback {

        display: inline-block;
        vertical-align: middle;
        margin-left: 30px;

    }

    .footer .right .phone .callback a {

        font-size: 14px;
        text-decoration: underline

    }

    .footer .right .politics {

        font-size: 12px;
        color: #878787;
        margin-top: 120px;

    }

    .footer .right .politics a {

        font-size: 14px;
        color: #000;
        display: inline-block;
        margin-bottom: 20px;

    }

    .footer .right .politics .text {

        width: 100%;
        text-align: center

    }

}


