body{font:1.7em/1.4 'Open Sans',Arial,sans-serif;color:#333}
a:hover{cursor:pointer}
img{max-width:100%}
h1, h2, h3{color:#337ab7;font-family:Oswald,sans-serif}
h2{margin:2em auto 0.5em;text-align:center;color:#337ab7;text-transform:uppercase;border-bottom:1px solid #eee;display:table;padding:0 5vw 0.5em}
section:hover h2, article:hover h2{border-bottom:1px solid #fc9}

header a.tel{display:inline-block;margin:0.5em 0 0 1em;font-size:1.2em}
header a.tel::before{display:inline-block;font-family:'FontAwesome';content:'\f10b';margin-right:0.3em;color:#999}
header a.tel:hover::before{transform:rotate3d(180,270,90,-360deg);transition:0.7s}

.offer{
background-image:url('/image/background.jpg');
background-attachment:fixed;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-color:#337ab7;
padding:20vh 0;
text-align:center;
font-family:Oswald,sans-serif;
}
.offer div{display:table;margin:auto;padding:0.5em 1em;font-size:2.4em;font-weight:bold;color:gold;text-shadow:0 0 3px #000;background:rgba(0,0,0,0.7)}
@media (max-width:991px){
.offer{}
.offer div{font-size:2em}
}

article img{float:right;width:160px}
article p.first{font-size:1.2em;color:#337ab7}
#service p, #foto p{text-align:center}
#service > p, #foto > p{color:#666}

#about aside{margin:3em auto 1em;text-align:center;color:#fff;position:sticky;top:1em}
aside>*{margin:1em auto 0}
aside form{background:#369;background:linear-gradient(#39c,#369);padding:1em;box-shadow:0 0 1em #666}
aside form:hover{box-shadow:0 0 1em #333}
aside form input{margin:1em auto}
aside form h4{font-size:1.1em;margin:0.5em;padding:0;color:#fff}
aside form p{font-size:0.9em;margin:0.5em;padding:0}

form a{font-size:11px;color:#bbb;display:inline-block;margin:1em auto}
form a:hover{color:#bbb}
form.article{background:#369;background:linear-gradient(#39c,#369);padding:1em;box-shadow:0 0 1em #666;margin-top:3em;text-align:center}
form.article > div{position:relative}
form.article img{position:absolute;left:2em;top:0;width:200px;height:200px;border-radius:50%;object-fit:cover}
form.article p{color:white;font-size:1em}
input,textarea{margin-top:10px}
input[type=submit]{text-transform:uppercase}
select.form-control{width:auto;max-width:100%}

.modal-dialog{text-align:center}
.modal-header{color:#fff;background:#333;background:linear-gradient(#666,#333)}
.modal-header .close{font-size:1.4em}
#callme input, #addreview input{margin:0}
#addreview textarea{width:99%;margin:0 auto 1em}
#addreview .form-inline{margin-top:1em}
#callme .input-group, #addreview .input-group {margin:0 auto 1em}
#callme .service2 {color:#337ab7;margin:0.5em auto}
#form_remont .modal-dialog label{display:block;margin:0.5em auto;color:#369;text-align:left;font-weight:normal}
#form_remont .modal-dialog label input, .modal-dialog label textarea{margin:auto}

.fotoset{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}
.fotoset a{display:inline-block;position:relative;width:180px;max-width:26%;padding:2px;margin:2px;box-shadow:0 0 0.5em #aaa}
.fotoset a img{width:100%;height:120px;object-fit:cover}
#service .fotoset a{width:260px;max-width:99%;padding:8px;margin:8px;text-transform:uppercase;text-decoration:none;color:#23527c}
#service .fotoset a:hover{color:#f33}
#service .fotoset a img{height:120px;margin-bottom:0.5em}
.fotoset a:hover{box-shadow:0 0 1em #666;transform:scale(1.02)}
#service .fotoset a:hover::before{font-family:'FontAwesome';content:'\f2a0';position:absolute;right:10px;top:10px;font-size:2em;border-radius:50%;background:#f33;color:#fff;display:block;width:1.5em;height:1.5em;transform:scale(-1,1);
}
@media (max-width:700px){
#service .fotoset a{width:100%;max-width:100%}
#service .fotoset a img{height:80px;width:80px;float:left;margin:0 0.5em 0 0}
#service .fotoset p{text-align:left}
#service .fotoset a::before{content:'\00BB';position:absolute;right:5px;bottom:0px;font-size:2em;color:#999}
}
.review{overflow:auto;height:300px}
.review div{position:relative;border-bottom:1px solid #eee}
.review .fa-quote-right{position:absolute;top:0;right:0.1em;color:#eee;z-index:-1}
.review div:hover .fa-quote-right{color:#ddd}
.review b{font-weight:200;color:#337ab7}
.review small{color:#999}
.review p{font-size:0.9em}
#review a{margin:1em auto;display:table}
@media (max-width:991px){
.review{overflow:initial;height:auto}
}

#step{margin:auto}
#step img{float:left}
#step div{margin:0.5em 1em 0.5em 12em;padding:0.7em;box-shadow:inset 0 0 1em #ddd;background:#fff;width:60%;border-bottom:1px solid #999}
#step div .fa{font-size:1.6em;color:#337ab7;margin-right:0.4em}
#step div:hover{border-bottom:1px solid #666;transform:scale(1.02)}
#step div:hover .fa{transform:rotate3d(180,270,90,-360deg);transition:0.7s}
@media (max-width:991px){
#step div{margin:0.5em 1em;width:auto}
}

.advantage{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;margin:-2em auto 0;max-width:1000px}
.advantage div{
margin:0.5em;padding:1em 0.5em;min-width:24%;box-shadow:inset 0 0 1em #ccc;background-color:#fff;
background-image:linear-gradient(45deg, rgba(0,0,0,.0) 30%, rgba(0,0,0,.2), rgba(0,0,0,.0) 70%);
background-repeat:no-repeat;background-size:200% 100%;background-position:200% 0;
border-top:0.3vw solid #337ab7;
}
.advantage div:hover{transition:.5s linear;background-position:-200% 0, 0 0;transform:scale(1.03)}
.advantage .fa{display:block;font-size:1.6em;color:#337ab7;padding:0.2em}
.advantage div:hover .fa{transform:rotate3d(180,270,90,-360deg);transition:0.7s}
@media screen and (max-width:640px){
.advantage{display:block}
.advantage .fa{display:none}
.advantage br{display:none}
}

footer{color:#fff;padding:2em 0 1em;background:#333;}
footer,aside form,form.article{
background-image:linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.7)),url('/image/bg.jpg');background-size:auto,cover;background-repeat:repeat,no-repeat;background-attachment:scroll,fixed}
footer address p:first-child{font-size:1.4em;border-bottom:1px solid #666;padding:5px}
footer a{color:#eee}
footer a:hover{color:#fff}
footer form{background:rgba(0,0,0,0.3);padding:1em 0.5em 0.5em;text-align:center}
iframe{width:100%}

.social.fa{color:#369;font-size:30px}
.social.fa.fa-skype{color:#39f}
.social.fa.fa-instagram{color:#f03}
.social.fa.fa-whatsapp{color:#093}
.social.fa.fa-phone-square{color:#834995;/*transform:rotate(315deg)*/}
.social.fa.fa-vk{color:#369}
.social.fa.fa-facebook-square{color:#336}
.social.fa:hover{transform:scale(1.2)}

.animated, #service .fotoset a:hover::before, form.article:hover img{animation-name:zoomIn;animation-duration:1s;animation-fill-mode:both}
@keyframes zoomIn{from {opacity:0;transform:scale3d(.3,.3,.3)} 50%{opacity:1}}

#navimenu,#nav2{font-size:2em;cursor:pointer;position:fixed;top:1vw;right:1vw;color:#337ab7;}
#nav2{top:calc(1em + 1vw);color:rgba(0,0,0,0.2);display:none}
#navimenu:hover,#nav2:hover{color:#23527c;transform:scale(1.1)}
#navi, #navi li{display:block;margin:auto;padding:0}
#navi {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}
#navi 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}
#navi a[href^="#"]{text-align:left}
#navi a[href^="#contact"]{border-bottom:1px solid rgba(255,255,255,0.2)}
#navi li:last-child a{border-bottom:0;}
#navi a:hover {color:#ff0;background:rgba(255,255,255,0.2)}
#navi .fa-times {position:absolute;top:0;right:0;font-size:1.2em;border-bottom:none}