body{font:1.8em/1.4 'Open Sans',Arial,sans-serif;color:#000}
a{color:#000}
a:hover{color:#f30;cursor:pointer}
img{max-width:100%}
h1,h2,h3{font-family:Oswald;}
h2{text-align:center;text-transform:uppercase;margin:1em auto 1em;}
h3{text-align:center;text-transform:uppercase;font-weight: bold}

header{margin:0.5em auto;text-align:center}
header .col-sm-7{font-size:0.9em}
header span {display: none}
header img {width:100px}
header a.tel{font-size:1.2em;display:table;margin:0.3em}
header a.tel::before{font-family:'FontAwesome';content:'\f10b';margin-right:0.3em;color:#ccc}
header a.tel:hover::before,
#advantage li:hover i,footer p:hover i{transform:rotate3d(180,270,90,-360deg);transition:0.7s}


section {margin-bottom:2em}

#offer{position:relative;background-image:url(/image/header.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding:1em}
#offer h1{font-size: 3em;font-weight: bold;margin:0.4em 0}
#offer p{font-size:1.4em;}
#offer form{max-width: 500px;margin: 2em 0;}
#offer form input{max-width: 220px;display: inline-block;border:1px solid #ccc;vertical-align:top;margin:0.5em}
#offer div div{color:#fff;text-align:center;margin:1em auto;border: 0.2em solid #fff;display: table;padding: 0.5em 4vw;font-size: 1.5em;background: rgba(255,255,255,0.1);font-weight: bold;}

.owl-carousel img{object-fit:cover;box-shadow:0 0 0.5em #999;margin:1em auto}
.owl-carousel img:hover{transform:scale(1.04);box-shadow:0 0 0.5em #333}

#service{margin-bottom:0}
.srv{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;margin-bottom:2em}
.srv a{display:inline-block;position:relative;width:260px;padding:0.5em;margin:0.5em;box-shadow:0 0 0.5em #999;text-decoration:none;font-size:1.2em}
.srv a:hover{box-shadow:0 0 0.5em #000;transform:scale(1.02);color:#f30}
.srv a img{width:100%;height:120px;margin-bottom:1em;object-fit:cover}
.srv a:hover::before{content:'Заказать звонок';position:absolute;right:0.2em;top:0.2em;background:#f30;color:#fff;display:block;padding:0.3em 1em;font-size:0.8em;
}

#advantage{position:relative;background-image:url(/image/advantage.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding:1em;
color: #fff;
}
#advantage h3{}
#advantage ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}
#advantage li{display: block;width: 220px;margin: 0.5em;background: rgba(0,0,0,0.2);border: 0.1em solid #fff;border-radius: 0.6em;padding: 0.5em;}
#advantage li:hover{background: rgba(0,0,0,0.3);}
#advantage li i{font-size: 2em;display: block;margin: 0.2em auto;}
#advantage li b{text-transform:uppercase;display: block;margin: 0.2em auto;}


#frm{position:relative;background-image:url(/image/bg.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding:1em;
color: #fff;
padding-bottom:0}
#frm h3{}
#frm form{margin:auto;text-align:center}
#frm form input, #frm form textarea{display: inline-block;margin:0.6em auto}
#frm form input{width:240px;vertical-align:top}
#frm form textarea{max-width: 490px}
#frm form input[type=submit]{text-transform:uppercase;}
#frm img{}

form a{display:table;margin:auto;font-size:11px;color:#fff}

#nav1,#nav2{font-size:2.4em;cursor:pointer;position:fixed;top:1vw;right:1vw;color:#f30;}
#nav2{top:calc(1em + 1vw);color:rgba(0,0,0,0.2);display:none}
#nav1:hover,#nav2:hover{color:#f00;transform:scale(1.1)}
#nav, #nav li{display:block;margin:auto;padding:0}
#nav {height:100%;width:0;position:fixed;z-index:1;top:0;right:0;background:rgba(0,0,0,0.9);overflow-x:auto;transition:0.5s;padding-top:2em}
#nav a{padding:8px 1em;text-decoration:none;color:#ddd;display:block;transition:0.3s;border-bottom:1px solid rgba(255,255,255,0.05);text-align:right}
#nav a[href^="#"]{text-align:left}
#nav a[href^="#contact"]{border-bottom:1px solid rgba(255,255,255,0.2)}
#nav li:last-child a{border-bottom:0;}
#nav a:hover {color:#f90;background:rgba(255,255,255,0.2)}
#nav .fa-times {position:absolute;top:0;right:0;font-size:1.2em;border-bottom:none}

.modal-dialog{text-align:center}
.modal-header{color:#fff;background:linear-gradient(#f60,#f30)}
.modal-header .close{font-size:1.4em}
#callme input{margin:0}
#callme .input-group{margin:0 auto 1em}
#callme .input-group {margin:0 auto 1em}
#callme .service2 {color:#f33;margin:0.5em auto}
#callme a {color:#666;margin:0.5em auto}
#callme p {font-size:0.9em;margin:0.5em auto}
#form_remont .modal-dialog label{display:block;margin:1em auto;color:#369;text-align:left;font-weight:normal}
#form_remont .modal-dialog label input, .modal-dialog label textarea{margin:auto}

.social.fa.fa-whatsapp{color:#093}
/*w8*/


#js-cookie-box{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    color: #0c1b26;
    -webkit-transition: all .75s cubic-bezier(.19,1,.22,1);
    transition: all .75s cubic-bezier(.19,1,.22,1);
    z-index: 100;
    border-top: 1px solid rgba(12,27,38,.1);
}
button.close {
    margin: 0 -20px;
    font-size: 20px;
    opacity: 0.8;
}

.win_inner {
    background-color: #fff;
    padding: 10px 30px 10px 10px;
    border: 1px solid #ddd;
    box-shadow: 0 0 30px black;
    font-size: 14px;
}

.telegram-button {
    position: fixed;
    right: 13px;
    bottom: 90px;
    transform: translate(-50%, -50%);
    background: #0088cc; /*цвет кнопки*/
    border-radius: 50%;
    width: 55px; /*ширина кнопки*/
    height: 55px; /*высота кнопки*/
    color: #fff;
    text-align: center;
    line-height: 53px; /*центровка иконки в кнопке*/
    font-size: 35px; /*размер иконки*/
    z-index: 9999;
}
.telegram-button a {
    color: #fff;
}
.telegram-button:before,
.telegram-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #0088cc; /*цвет анимированных волн от кнопки*/
    left: -10px;
    right: -10px;
    top: -10px;
    bottom: -10px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
 
.telegram-button:after{
    animation-delay: .5s;

}
 
@keyframes animate
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}

@media (max-width : 800px) {  
.telegram-button {   
    bottom: 5px;
    right: 5px;
  }
}