html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body,html,#phone{font:normal 1.8rem/1.4 'Fira Sans Extra Condensed',Arial Narrow,Arial,Helvetica,sans-serif;color:#526d90;text-align:center;}
html{font-size:62.5%;background-color:#f3f3f3;scroll-behavior:smooth;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
textarea{overflow:auto;}
a{color:#526d90;text-decoration:none;}

.clearfix:after{display:table;content:"";clear:both;}
.clearfix{*zoom:1;}
.bold{font-weight:bold;}
.no-wr{white-space:nowrap;}
.link{position:absolute;top:-3rem;}
#viber,#telegram,.services li:before{font:bold 2.1rem/2 'M PLUS Rounded 1c';}
h1{font-size:3.4rem;line-height:1;}
#bg-main,#bg-main:before,#nav{position:absolute;top:0;left:0;margin:0;padding:0;width:100%;height:100%;}
#main,#main .container,.services,.services a:before,.prices,.prices.title,.prices .position,.prices .price,.advantages,.advantages li,#footer{display:flex;flex-direction:column;justify-content:center;}
#main,.services li,.services a,.prices-table,.prices,.more li{position:relative;}
#main,#viber,#telegram,.services a:before,.services a:after,.prices,.prices .position{box-sizing:border-box;}
input{display:none;}
.prices.title + .prices:before,.prices.title .more{display:none;}

.titles,#adress{font-size:2.4rem;}
.titles{padding:6% 3% 3%;}
#main{padding:3rem 0 3%;height:100vh;min-height:64rem;max-height:70rem;}
#bg-main{background:transparent url(../img/bg-main.jpg) center no-repeat;background-size:cover;z-index:-1;}
#bg-main:before{background-color:rgba(0,0,0,.5);content:'';}
#main .container{flex-grow:1;justify-content:space-between;justify-content:space-evenly;color:white;}
.container div{padding:0% 3%;}
#logo{margin:0 3%;padding:0;width:auto;height:100px;background:transparent url(../icons/logo.png) center no-repeat;background-size:contain;}
.contacts{line-height:1;}
.contacts span{font-size:2.8rem;}
.contacts a{padding:.0rem .5rem .3rem 2.5rem;color:white;text-decoration:none;}
#viber{background:#794e99 url(../icons/viber.png) .5rem center no-repeat;background-size:auto 50%;border:2px solid #cccccc;border-radius:5px;}
#telegram{margin-left:4%;padding-left:3rem;background:#0090d0 url(../icons/telegram.png) .5rem center no-repeat;background-size:auto 50%;border:2px solid #cccccc;border-radius:5px;}
#phone{padding-left:0;font-size:3.4rem;color:white;}
.services{margin:0 3%;padding:0 3%;height:51%;background-color:rgba(255,255,255,.95);text-align:left;line-height:1;counter-reset:li;}
.services li{flex-grow:1;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid #5b6c74;}
.services li:last-of-type{border:none;}
.services a{display:block;padding:.6rem 3% .7rem 4.4rem;text-decoration:none;}
.services a:before,.services a:after{position:absolute;top:50%;width:3.5rem;height:3.5rem;text-align:center;font-size:1.9rem;}
.services a:before{left:.8rem;margin:-1.7rem 0 0 -.8rem;padding-top:.1rem;background-color:#526d90;color:white;font-weight:bold;content:counter(li);counter-increment:li;}
.services a:after{right:-.8rem;margin:-1.5rem 0 0;color:#5b6c74;font-size:2.8rem;content:'›';}
.prices,.prices.title{flex-direction:row;align-items:center;}

.prices .more{/*flex-grow:1;*/}
.more.contain:before,.more.depend:before{line-height:1.4;content:'Что включает в себя услуга:';}
.more.depend:before{content:'От чего зависит стоимость услуги:';}
.price.from:before{content:'от\A0';}
.advantages li{align-items:center;margin:3% 0;padding:0 3%;}
.advantages img{margin-bottom:2%;}
.prices-table{margin:3%;border:1px solid Gainsboro;background-color:white;}
.prices{flex-wrap:wrap;padding:3%;}
.prices:before{position:absolute;top:0;left:0;margin:0 2.7%;width:94.6%;height:1px;background-color:Gainsboro;content:'';}
.prices.title{background-color:Gainsboro;font-size:2.2rem}
.prices .position{width:78%;padding:0 0 .3rem;font-size:2rem;line-height:1.1;border:1px solid Gainsboro;}
.prices:not(.title) .position{background-color:#f3f3f3;min-height:6.2rem;}
.prices .more{padding-top:.6rem;width:100%;text-align:left;line-height:1.2;}
.more li{padding:.3rem 0 .1rem 2.2rem;}
.more li:before{position:absolute;top:.4rem;left:.2rem;color:Green;content:'\2611';}
.prices .price{flex-direction:row;align-items:center;align-self:stretch;width:22%;}
.prices:not(.title) .price{font-size:2.4rem;background-color:#526d90;color:white;}
.prices.title .price{background-color:Gainsboro;color:#526d90;}
#footer{padding:3% 3% 0;background-color:#526d90;text-align:left;}
#footer,#footer a{color:white;}
#footer li{margin:0 0 3%;padding:4% 3% 4% 6rem;}
#footer #adr{background:rgba(0,0,0,.5) url(../icons/address-icon.png) 1.5rem center no-repeat;}
#footer #tel{background:rgba(0,0,0,.5) url(../icons/tel-icon.png) 1.5rem center no-repeat;}

#nav{display:flex;align-items:center;position:fixed;height:3rem;font-size:1.8rem;background-color:#f3f3f3;box-shadow:0 0 1rem .5rem rgba(0,0,0,.15);z-index:2;}
#nav li{flex-grow:0;}
#nav li:last-of-type{flex-grow:1;display:flex;justify-content:space-between;justify-content:space-evenly;}
#nav span,#nav a{display:block;}
#nav span{padding:.3rem 1rem .2rem;}
#nav a{padding:.2rem 0 .3rem;}


@media only screen and (max-width:32.99rem){
.container p,h1 span{display:none;}
#nav span{background-color:#526d90/*476c9d*/;color:white;}
}

@media only screen and (min-width:21rem){
body{font-size:2rem;}
h1{font-size:3.8rem;}
#adress{font-size:2.6rem;}
.contacts span{font-size:3.0rem;}
#phone{font-size:3.6rem;}
#main{min-height:68rem;max-height:100rem;}
.titles{font-size:2.8rem;}
.prices:not(.title) .position{padding:0 3% .3rem;font-size:2.2rem;}
}
@media only screen and (min-width:23rem){
h1{font-size:4rem;}
#adress{font-size:2.8rem;}
.contacts span{font-size:3.2rem;}
#phone{font-size:3.8rem;}
}
@media only screen and (min-width:21rem) and (min-height:47rem){
.services li{line-height:1.1;}
}
@media only screen and (min-width:21rem) and (min-height:48rem){
#main{padding-bottom:4%;}
.services{margin:0 4%;padding:0 3.8%;}
.services a{padding-left:4.8rem;}
}
@media only screen and (min-width:21rem) and (min-height:51rem){
#main{padding-bottom:4.5%;}
.services{margin:0 4.5%;padding:0 4.3%;}
}
@media only screen and (min-width:21rem) and (min-height:53rem){
#main{padding-bottom:5%;}
.services{margin:0 5%;padding:0 4.8%;}
}
@media only screen and (min-width:23rem) and (max-width:32.99rem) and (min-height:47rem){
.services{font-size:2.1rem;}
}
@media only screen and (min-width:23rem) and (max-width:32.99rem) and (min-height:51rem){
.services{font-size:2.2rem;}
}
@media only screen and (min-width:29rem){
.services{margin:1rem 12% 4%;}
.advantages li{margin:3% 0;padding:0 10%;}
.prices .more{padding-left:1.0rem;}
.more.contain:before,.more.depend:before{line-height:1.8;}
.more li{padding:.5rem 0 .3rem 3.2rem;}
.more li:before{top:.6rem;}
}
@media only screen and (min-width:33rem)/*540*/{
#main{margin-top:5rem;padding-top:1px;height:auto;min-height:0;max-height:none;}
#main{height:auto;min-height:none;max-height:none;}
#main,#main .container{display:block;}
#main .container{padding-top:3rem;}
.link{top:-5rem;}
h1{font-size:4.4rem;}
.titles{margin:6% 0 4%;padding:0 3%;}
#telegram{margin-left:3%;}
.container p{padding:1% 3% 1.5%;}
.services,.advantages,#footer{flex-direction:row;flex-wrap:wrap;}
.services{margin:0 1.5%;padding:0;width:97%;background-color:transparent;}
.services li{width:47%;height:auto;margin:3% 1.5% 0;background-color:white;line-height:1;border-bottom:none;box-shadow:0 0 1rem .5rem rgba(0,0,0,.15);}
.services a{padding:56% 6% 1rem;box-sizing:border-box;}
.services a:before{top:0;left:2%;margin:2% 0 0 0;padding:0;width:96%;height:calc(100% - 6.1rem);background:transparent center no-repeat;background-size:cover;content:'';overflow:hidden;}
.advantages{padding:0 1.5%;width:100%;box-sizing:border-box;}
.advantages li{justify-content:flex-start;margin:4% 0 1.5%;padding:0 1.5%;width:47%;}
#footer{margin:0;padding:3%;line-height:1.6;}
#footer li{flex-grow:1;margin:0;padding:1.6rem 1.6rem 1.6rem 6rem;}
#nav{height:5rem;font-size:2.0rem;}
#nav span{padding-left:3.2rem;color:#526d90;font-size:2.4rem;font-weight:bold;}
#logo{position:fixed;top:.7rem;left:1rem;margin:0;padding:0;width:10rem;height:3.7rem;background:transparent url(../icons/logo-sm.png) left no-repeat;background-size:auto 100%;z-index:3;}

.services a#diag:before{background-image:url(../img/kompyuternaya-diagnostika-avto.jpg);}
.services a#cond:before{background-image:url(../img/zapravka-avtokonditsionera.jpg);}
.services a#cool:before{background-image:url(../img/promyvka-sistemy-okhlazhdeniya.jpg);}
.services a#cata:before{background-image:url(../img/udaleniye-sazhevogo-filtra.jpg);}
.services a#remont-kpp:before{background-image:url(../img/remont-kpp.jpg);}
.services a#reyka:before{background-image:url(../img/remont-rulevoy-reyki.jpg);}
.services a#tormoz:before{background-image:url(../img/remont-tormoznoy-sistemy.jpg);}
}
@media only screen and (min-width:36rem)/*600*/{
#footer{margin:0;padding:3% 3% 3% 0;}
#footer li{margin-left:3%;}
}
@media only screen and (min-width:41rem)/*684*/{
#footer li{padding-left:8rem;}
#footer #adr,#footer #tel{background-position:2.5rem;}
}
@media only screen and (min-width:44rem)/*720*/{
body{font:normal 2rem 'Play',Arial,Helvetica,sans-serif;}
.contacts,.advantages,.services a:after{font-family:'Fira Sans Extra Condensed';}
h1,#adress{font-weight:bold;}
h1{font-size:4.8rem;}
#adress{font-size:2.8rem;}
.container div{padding:2rem 3% 0;}
.comp{display:none;}
.contacts span{font-size:2.4rem;}
#phone{font-size:2.8rem;}
#viber,#telegram,#phone{margin-left:1rem;}
.container p{padding:2rem 3% 1rem;}
.services a{padding:56% 1.8rem 1.5rem;}
.services a:after{display:block;top:100%;right:1.7rem;margin:-4.9rem 0 0;background-color:#526d90;color:white;font-size:2.6rem;line-height:1.2;}
.services a:before{height:calc(100% - 7.1rem);}
.titles{font-size:3.2rem;}

}
@media only screen and (min-width:49rem)/*800*/{
#main .container{margin:3% 3% 0;}
#bg-main:before{display:none;}
#main .container{padding-top:3rem;background-color:rgba(0,0,0,.5);}
.contacts,#viber,#telegram{display:flex;justify-content:center;align-items:center;}
#viber,#telegram{flex-direction:column;height:3.8rem;}
.container p{font-size:2.2rem;padding:2rem 3% 3rem;}
.advantages{font-size:2.2rem;}
#footer li{flex-grow:0;width:47%;box-sizing:border-box;}
}
@media only screen and (min-width:53rem)/*864*/{
#footer li{width:35rem;}
}
@media only screen and (min-width:55rem)/*900*/{

}
@media only screen and (min-width:58rem)/*960*/{
.prices{flex-wrap:nowrap;align-items:flex-start;padding:2% 2% 2.6%;}
.prices .position{width:32rem;min-width:32rem;border:none;}
.prices:not(.title) .position{background-color:transparent;}
.prices:not(.title) .price{align-self:flex-start;margin-top:.3rem;width:10rem;min-width:10rem;min-height:6.2rem;}
.prices .more{flex-grow:1;padding-top:0;padding-left:3%;width:auto;}
.prices.title{padding:0 2%;height:8rem;}
.prices.title .position{padding:0;}
.prices .price{width:10rem;}
.prices.title .more{display:block;padding:0;text-align:center;}
.more li{padding-left:4rem;}
.more li:before{top:.7rem;left:1rem;}
}
@media only screen and (min-width:33rem) and (max-width:43.99rem){
.services{font-family:'Fira Sans Extra Condensed';text-align:center;}
.services a{padding:56% 2% 1rem;}
.services a:after{display:none;}
}
@media only screen and (min-width:41rem) and (max-width:48.99rem),
       only screen and (min-width:62rem) and (max-width:69rem){
.services{font-family:'Fira Sans Extra Condensed';}
}
@media only screen and (min-width:33rem) and (max-width:61.99rem){
#bg-main{height:58%;height:calc(100% - 74.8vw - 14rem);}
}
@media only screen and (min-width:62rem)/*1024*/{
#bg-main{height:calc(100% - 30vw - 12.4rem);}
#main{padding-top:2%;}
#main .container{margin:0 2%;}
h1{font-size:6.4rem;}
.titles{margin:4% 0;padding:0 3%;font-size:4.4rem;}
#main + .titles{margin:1% 0 4%;}
#adress,#phone{font-size:3.4rem;}
.contacts span{font-size:2.8rem;}
.container p{font-size:2.4rem;}
.services{margin:0 1%;width:98%;}
.services li{width:31.33%;height:auto;margin:2% 1% 0;}
.advantages{padding:0 1%;}
.advantages li{margin:0;padding:0 1%;width:24.5%;}
#footer{margin:0;padding:1.8% 1.8% 1.8% 0;}
#footer li{margin-left:1.8%;}
}
@media only screen and (min-width:78rem)/*1280*/{
.prices .position{width:35rem;min-width:35rem;}
.prices:not(.title) .position{font-size:2.4rem;}
.prices .more{padding-left:4rem;}
}
@media only screen and (min-width:86rem)/*1366*/{
#bg-main{height:calc(100% - 26vw - 12.4rem);}
#main .container{margin:0 8%;}
.services{margin:0 7.3%;width:85.4%;}
}
@media only screen and (min-width:103rem)/*1650*/{
#bg-main{height:calc(100% - 24vw - 12.4rem);}
#main .container{margin:0 13.5%;}
.services{margin:0 12.8%;width:74.4%;}
.prices-table{margin:0 13.5% 1.8%;}
.prices .position{width:37rem;min-width:37rem;}
}