/* Студия «Абрис» — основная таблица стилей */
html,body,div,span,h1,h2,h3,h4,p,a,ul,ol,li,form,label,table,tr,th,td,img,blockquote{margin:0;padding:0;border:0}
html{-webkit-text-size-adjust:100%}
body{background:#fff;color:#333;font:13px/1.55 Arial,"Helvetica Neue",Helvetica,sans-serif}
a{color:#b5121b}
a:hover{color:#e01a25}
img{max-width:100%;height:auto;vertical-align:middle}
ul,ol{list-style:none}
.wrap{width:980px;margin:0 auto;position:relative}
.clear:after,.wrap:after,.row:after{content:"";display:table;clear:both}

/* ===== Верхняя панель ===== */
#top{background:#1b1b1b;background:linear-gradient(#333 0,#1c1c1c 55%,#0d0d0d 100%);border-bottom:1px solid #000;box-shadow:0 1px 0 #555 inset;height:46px;position:relative;z-index:50}
#top .wrap{height:46px}
.logo{float:left;display:block;height:46px;padding-right:6px;text-decoration:none}
.logo svg{display:block;margin-top:9px}
#nav{float:left;margin-left:6px}
#nav>li{float:left;position:relative}
#nav>li>a{display:block;color:#fff;font-size:12px;line-height:46px;padding:0 13px;text-decoration:underline}
#nav>li>a:hover{color:#ff4e57}
#nav>li.active>a{color:#9a9a9a;text-decoration:none}
#nav li ul{display:none;position:absolute;left:0;top:46px;background:#222;border:1px solid #000;border-top:2px solid #b5121b;width:210px;padding:6px 0;box-shadow:0 4px 10px rgba(0,0,0,.35)}
#nav li:hover ul{display:block}
#nav li ul a{display:block;color:#ddd;font-size:12px;padding:6px 14px;text-decoration:none}
#nav li ul a:hover{background:#b5121b;color:#fff}
.top-mid{position:absolute;left:600px;top:8px;color:#fff;font-size:11px;line-height:15px;text-align:center}
.top-mid a{color:#fff;text-decoration:none}
.top-right{float:right;color:#fff;font-size:11px;line-height:15px;text-align:right;padding-top:8px}
.top-right span{color:#9a9a9a}
.burger{display:none}

/* ===== Общие элементы страницы ===== */
#page{padding:0 0 40px}
.crumbs{font-size:11px;color:#999;padding:14px 0 0}
.crumbs a{color:#777}
h1.title{font:normal 22px/1.3 Arial,sans-serif;color:#222;padding:16px 0 18px;border-bottom:1px solid #e3e3e3}
.lead{font-size:14px;color:#555;padding:16px 0 4px}
.sec-title{font:normal 22px/1.3 Arial,sans-serif;color:#222;margin:0 0 6px}
.sec-sub{color:#777;margin-bottom:22px}
.btn{display:inline-block;background:#2b2b2b;background:linear-gradient(#444,#1d1d1d);border:1px solid #111;border-radius:2px;color:#fff;font-size:11px;line-height:22px;padding:0 14px;min-width:150px;text-decoration:none;box-shadow:0 1px 0 rgba(255,255,255,.15) inset;cursor:pointer;text-align:left}
.btn:hover{background:linear-gradient(#b5121b,#8c0d14);border-color:#6a0910;color:#fff}
.btn-red{background:linear-gradient(#d21b25,#9b0e16);border-color:#760a10}
.btn-red:hover{background:linear-gradient(#e8262f,#b5121b)}
.btn-big{font-size:13px;line-height:32px;padding:0 24px;min-width:0}
.arrows li,.text ul li{position:relative;padding-left:14px;margin:2px 0;font-size:12px}
.arrows li:before,.text ul li:before{content:"";position:absolute;left:1px;top:6px;border-left:6px solid #c0141d;border-top:4px solid transparent;border-bottom:4px solid transparent}
.label{font-weight:bold;font-size:12px;margin:8px 0 4px}

/* ===== Список «как в портфолио» ===== */
.items .item{border-bottom:1px solid #e3e3e3;padding:26px 0 22px 0;overflow:hidden}
.items .item:last-child{border-bottom:0}
.item .desc{float:left;width:470px;padding-left:20px}
.item .desc h2{font:normal 15px/1.3 Arial,sans-serif;color:#222;margin:4px 0 18px}
.item .desc h2 a{color:#222;text-decoration:none}
.item .desc h2 a:hover{color:#b5121b}
.item .desc p{font-size:12px;margin-bottom:6px}
.item .desc .btn{margin-top:20px}
.item .meta{font-size:11px;color:#999;margin:-12px 0 10px}
.item .meta a{color:#999}
.item .pic{float:right;width:460px;height:204px;position:relative;overflow:hidden;background:#ddd}
.item .pic img{width:460px;height:204px;object-fit:cover;display:block}
.item .pic span{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 8px;color:#fff;font-size:12px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6))}
.item .pic a{display:block}
.item .pic a:hover img{opacity:.9}

.pager{padding:22px 0 0;font-size:11px}
.pager a,.pager span{display:inline-block;min-width:16px;height:18px;line-height:18px;border:1px solid #ccc;background:#f3f3f3;color:#333;text-align:center;margin-right:3px;text-decoration:none;padding:0 2px;box-shadow:0 1px 0 #fff inset}
.pager span.cur{background:#fff;border-color:#999;font-weight:bold}
.pager span.dis{color:#bbb;border-color:#ddd}
.pager a:hover{background:#b5121b;border-color:#8c0d14;color:#fff}

/* ===== Контент с сайдбаром ===== */
.cols{overflow:hidden;padding-top:22px}
.main{float:left;width:680px}
.side{float:right;width:260px}
.text{font-size:13px;line-height:1.65}
.text p{margin:0 0 12px}
.text h2{font:normal 19px/1.3 Arial,sans-serif;color:#222;margin:26px 0 10px;padding-top:14px;border-top:1px solid #eee}
.text h2:first-child{margin-top:0;border-top:0;padding-top:0}
.text h3{font:bold 14px/1.35 Arial,sans-serif;color:#222;margin:18px 0 6px}
.text ul{margin:0 0 14px}
.text ul li{font-size:13px;margin:4px 0}
.text ul li:before{top:7px}
.text ol{margin:0 0 14px 0;counter-reset:n}
.text ol li{position:relative;padding-left:30px;margin:6px 0;counter-increment:n}
.text ol li:before{content:counter(n);position:absolute;left:0;top:1px;width:20px;height:20px;line-height:20px;text-align:center;background:#2b2b2b;color:#fff;font-size:11px;border-radius:2px}
.text blockquote{border-left:3px solid #b5121b;background:#f6f6f6;padding:12px 16px;margin:0 0 14px;color:#444;font-style:italic}
.text .note{background:#f6f6f6;border:1px solid #e3e3e3;border-left:3px solid #b5121b;padding:12px 16px;margin:0 0 16px}
.text .note p:last-child{margin:0}
.tbl,.text table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:12px}
.tbl th,.text table th{background:#2b2b2b;color:#fff;font-weight:normal;text-align:left;padding:7px 10px;border:1px solid #1a1a1a}
.tbl td,.text table td{padding:7px 10px;border:1px solid #e0e0e0;vertical-align:top}
.tbl tr:nth-child(even) td,.text table tr:nth-child(even) td{background:#f7f7f7}

.box{border:1px solid #e3e3e3;background:#fafafa;padding:16px 18px;margin-bottom:20px}
.box h3{font:normal 15px/1.3 Arial,sans-serif;color:#222;border-bottom:1px solid #e3e3e3;padding-bottom:8px;margin-bottom:10px}
.box ul li{padding:4px 0 4px 14px;border-bottom:1px dotted #ddd;position:relative;font-size:12px}
.box ul li:last-child{border:0}
.box ul li:before{content:"";position:absolute;left:1px;top:9px;border-left:6px solid #c0141d;border-top:4px solid transparent;border-bottom:4px solid transparent}
.box ul li a{color:#333;text-decoration:none}
.box ul li a:hover,.box ul li.cur a{color:#b5121b}
.box ul li small{color:#999;display:block;font-size:11px}
.box-dark{background:#2e2e2e;border-color:#1a1a1a;color:#ccc}
.box-dark h3{color:#fff;border-color:#444}
.price-big{font-size:22px;color:#b5121b;margin:4px 0}
.box .btn{margin-top:10px}

/* ===== Статья ===== */
.post-head{padding:16px 0 0;font-size:11px;color:#999}
.post-head a{color:#999}
.post-cover{margin:16px 0 20px;position:relative}
.post-cover img{width:100%;display:block}
.share{border-top:1px solid #e3e3e3;margin-top:24px;padding-top:14px;font-size:11px;color:#999}
.soc{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;background:#3a3a3a;color:#fff;font-size:10px;font-weight:bold;border-radius:2px;margin-left:4px;cursor:default}
.related{margin-top:26px}
.related h3{font:normal 17px Arial,sans-serif;color:#222;margin-bottom:12px}
.rel-list{overflow:hidden}
.rel-list a{float:left;width:212px;margin-right:22px;color:#333;text-decoration:none;font-size:12px}
.rel-list a:last-child{margin-right:0}
.rel-list img{display:block;margin-bottom:6px}
.rel-list a:hover{color:#b5121b}

/* ===== Главная ===== */
.slider{background:#111;height:350px;position:relative;overflow:hidden}
.slide{position:absolute;left:0;top:0;width:100%;height:350px;background-size:cover;background-position:center;opacity:0;transition:opacity .9s}
.slide.on{opacity:1;z-index:2}
.slide .wrap{height:350px}
.slide .cap{position:absolute;left:0;top:70px;width:440px;color:#fff}
.slide .cap h2{font:normal 30px/1.2 Arial,sans-serif;margin-bottom:14px;text-shadow:0 1px 2px #000}
.slide .cap p{font-size:13px;color:#ddd;margin-bottom:20px}
.dots{position:absolute;z-index:5;left:50%;margin-left:-490px;bottom:20px}
.dots i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#666;margin-right:6px;cursor:pointer}
.dots i.on{background:#d21b25}
.strip{background:#f2f2f2;border-bottom:1px solid #e0e0e0;padding:16px 0;font-size:12px;color:#555}
.strip b{color:#222}
.strip .wrap>div{float:left;width:245px}
.hsec{padding:70px 0 68px;border-bottom:1px solid #e3e3e3}
.hsec.gray{background:#f5f5f5}
.hsec.dark{background:#2e2e2e;color:#ccc;border-color:#1a1a1a}
.hsec.dark .sec-title{color:#fff}
.hsec.dark .sec-sub{color:#999}

.partners{overflow:hidden;margin:6px 0 22px;border-top:1px solid #e3e3e3;border-left:1px solid #e3e3e3}
.partners div{float:left;box-sizing:border-box;width:244px;height:96px;border-right:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;background:#fff;text-align:center}
.partners img{width:220px;margin-top:4px;opacity:.75;filter:grayscale(1)}
.partners div:hover img{opacity:1}
.two{overflow:hidden}
.two>div{float:left;width:470px;font-size:13px;line-height:1.65}
.two>div+div{float:right}
.two p{margin-bottom:12px}

.svc{overflow:hidden;margin-right:-20px}
.svc a{float:left;width:225px;height:210px;margin:0 20px 20px 0;border:1px solid #e3e3e3;background:#fff;padding:22px 18px 0;box-sizing:border-box;color:#333;text-decoration:none;position:relative}
.svc a:hover{border-color:#b5121b;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.svc a b{display:block;font:normal 15px Arial,sans-serif;color:#222;margin:12px 0 8px}
.svc a:hover b{color:#b5121b}
.svc a small{display:block;font-size:12px;color:#666;line-height:1.5}
.svc a.all{background:#2e2e2e;border-color:#1a1a1a}
.svc a.all b{color:#fff}
.svc a.all small{color:#aaa}
.ico{width:44px;height:44px;background:#2b2b2b;border-radius:2px;display:flex;align-items:center;justify-content:center}
.svc a:hover .ico{background:#b5121b}

.stats{overflow:hidden}
.stats div{float:left;width:245px;text-align:center}
.stats b{display:block;font:normal 44px/1 Arial,sans-serif;color:#fff;margin-bottom:8px}
.stats b em{font-style:normal;color:#e0313a}
.stats span{font-size:12px;color:#aaa}

.steps{overflow:hidden;counter-reset:s;margin-right:-20px}
.steps div{float:left;width:225px;margin:0 20px 26px 0;position:relative;padding-top:46px;font-size:12px}
.steps div:before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;font:normal 32px/1 Arial,sans-serif;color:#c0141d}
.steps div b{display:block;font-size:14px;font-weight:normal;color:#222;margin-bottom:6px}

.adv{overflow:hidden;margin-right:-30px}
.adv div{float:left;width:296px;margin:0 30px 26px 0;padding-left:54px;box-sizing:border-box;position:relative;font-size:12px}
.adv div .ico{position:absolute;left:0;top:0;width:40px;height:40px}
.adv b{display:block;font-size:14px;font-weight:normal;color:#222;margin-bottom:5px}

.pack{overflow:hidden;margin-right:-20px}
.pack>div{float:left;width:306px;margin-right:20px;border:1px solid #e3e3e3;background:#fff;box-sizing:border-box}
.pack h3{background:#2b2b2b;background:linear-gradient(#444,#1d1d1d);color:#fff;font:normal 15px Arial,sans-serif;padding:12px 18px}
.pack .hot h3{background:linear-gradient(#d21b25,#9b0e16)}
.pack .pr{font-size:24px;color:#222;padding:14px 18px 4px}
.pack .pr small{font-size:12px;color:#888}
.pack ul{padding:6px 18px 4px}
.pack ul li{border-bottom:1px dotted #ddd;padding:5px 0 5px 14px}
.pack ul li:before{top:11px}
.pack .btn{margin:12px 18px 18px}

.inds{overflow:hidden;border-top:1px solid #e3e3e3;border-left:1px solid #e3e3e3}
.inds div{float:left;width:244px;padding:16px 18px;box-sizing:border-box;border-right:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;font-size:12px;color:#666;height:96px;background:#fff}
.inds b{display:block;font-weight:normal;font-size:14px;color:#222;margin-bottom:4px}

.revs{overflow:hidden;margin-right:-20px}
.revs div{float:left;width:306px;margin:0 20px 20px 0;background:#fff;border:1px solid #e3e3e3;padding:18px;box-sizing:border-box;font-size:12px;position:relative;min-height:220px}
.revs div:before{content:"\201C";position:absolute;right:14px;top:4px;font:60px/1 Georgia,serif;color:#e8e8e8}
.revs p{margin-bottom:10px;font-style:italic;color:#444}
.revs b{display:block;font-weight:normal;color:#222}
.revs small{color:#999}

.team{overflow:hidden;margin-right:-20px}
.team div{float:left;width:225px;margin:0 20px 20px 0;font-size:12px}
.team .ph{height:150px;background:#3a3a3a;margin-bottom:10px;display:flex;align-items:center;justify-content:center;color:#fff;font:normal 40px Arial,sans-serif;background:linear-gradient(135deg,#444,#222)}
.team div:nth-child(2) .ph{background:linear-gradient(135deg,#9b0e16,#3a0a0d)}
.team div:nth-child(3) .ph{background:linear-gradient(135deg,#345c8c,#152438)}
.team div:nth-child(4) .ph{background:linear-gradient(135deg,#287868,#0e2d27)}
.team b{display:block;font-weight:normal;font-size:14px;color:#222}

.tools{overflow:hidden}
.tools span{float:left;border:1px solid #ddd;background:#fff;padding:6px 12px;margin:0 8px 8px 0;font-size:12px;color:#555;border-radius:2px}

.bl{overflow:hidden;margin-right:-20px}
.bl a{float:left;width:306px;margin:0 20px 24px 0;color:#333;text-decoration:none}
.bl a img{display:block;margin-bottom:10px;width:306px;height:163px;object-fit:cover}
.bl a b{display:block;font-weight:normal;font-size:14px;color:#222;margin-bottom:4px}
.bl a:hover b{color:#b5121b}
.bl a small{color:#999;font-size:11px}
.bl a p{font-size:12px;color:#666;margin-top:4px}

.faq dt{font-size:14px;color:#222;padding:12px 0 12px 22px;border-top:1px solid #e3e3e3;cursor:pointer;position:relative}
.faq dt:before{content:"+";position:absolute;left:0;top:10px;width:14px;height:14px;line-height:14px;text-align:center;background:#2b2b2b;color:#fff;font-size:13px}
.faq dt.open:before{content:"\2212";background:#b5121b}
.faq dd{margin:0;padding:0 0 14px 22px;font-size:12px;color:#555;display:none}
.faq dt.open+dd{display:block}

.seo-text{columns:2;column-gap:40px;font-size:12px;color:#555;line-height:1.7}
.seo-text p{margin-bottom:10px;break-inside:avoid}
.seo-text h3{font:normal 15px Arial,sans-serif;color:#222;margin:0 0 8px}

/* ===== Формы ===== */
.form-big{background:#f5f5f5;border:1px solid #e3e3e3;padding:24px 26px;overflow:hidden}
.form-big .f-row{overflow:hidden;margin-bottom:12px}
.form-big .f-row>div{float:left;width:48.5%}
.form-big .f-row>div+div{float:right}
.form-big label.t{display:block;font-size:12px;color:#555;margin-bottom:4px}
input[type=text],input[type=email],textarea,select{width:100%;box-sizing:border-box;border:1px solid #c8c8c8;background:#fff;padding:6px 8px;font:13px Arial,sans-serif;color:#333;box-shadow:0 1px 2px rgba(0,0,0,.06) inset;border-radius:0}
input:focus,textarea:focus{border-color:#888;outline:0}
textarea{height:110px;resize:vertical}
.agree{display:flex;align-items:flex-start;gap:7px;font-size:11px;color:#666;margin:10px 0 12px;line-height:1.45}
.agree input{margin:2px 0 0;flex:0 0 auto;width:13px;height:13px}
.agree a{color:#b5121b}
.agree.err{color:#c0141d}
.form-ok{display:none;background:#eaf5e6;border:1px solid #b9d9ad;color:#335a26;padding:12px 14px;font-size:12px;margin-top:10px}

/* ===== Подвал ===== */
#foot{background:#333;color:#ccc;padding:30px 0 22px;border-top:1px solid #222;font-size:12px}
#foot a{color:#ddd}
#foot .c1{float:left;width:300px}
#foot .c2{float:left;width:300px;padding-top:28px}
#foot .c3{float:right;width:250px;position:relative}
#foot .idx{font-size:10px;color:#999}
#foot .city{font-size:20px;color:#fff;margin:2px 0 12px}
#foot .big{font-size:14px;color:#fff;line-height:1.4;margin-bottom:14px}
#foot .small{font-size:11px;color:#aaa;line-height:1.5}
#foot ul.fl{margin-top:22px}
#foot ul.fl li{margin:7px 0;padding-left:16px;position:relative;font-size:11px}
#foot ul.fl li:before{content:"";position:absolute;left:0;top:4px;width:8px;height:8px;background:#999;border-radius:1px}
#foot ul.fl li.k:before{border-radius:50%}
#foot ul.fl a{text-decoration:none;color:#ddd}
#foot ul.fl a:hover{color:#fff;text-decoration:underline}
.fbox{background:#fff;padding:18px 16px 14px;position:relative;overflow:hidden;color:#333;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.fbox .ribbon{position:absolute;right:-34px;top:20px;transform:rotate(45deg);background:#c0141d;color:#fff;font-size:10px;width:130px;text-align:center;line-height:20px;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.fbox input[type=text],.fbox input[type=email],.fbox textarea{margin-bottom:7px;font-size:12px;padding:4px 6px;width:86%}
.fbox textarea{height:56px}
.fbox .agree{margin:4px 0 8px;font-size:10px}
.fbox .agree a{color:#b5121b}
.fbox .btn{width:100%;text-align:center}
.soc-row{margin-top:16px}
.soc-row .soc{margin:0 4px 0 0;background:#4a4a4a}
.copy{border-top:1px solid #444;margin-top:24px;padding-top:14px;font-size:11px;color:#999;overflow:hidden}
.copy a{color:#bbb;margin-left:14px}
.copy .r{float:right}

/* ===== Cookie ===== */
#cookie{position:fixed;left:0;right:0;bottom:0;z-index:100;background:rgba(20,20,20,.96);border-top:2px solid #b5121b;color:#ddd;font-size:12px;display:none}
#cookie .wrap{padding:12px 0;display:flex;align-items:center;gap:20px}
#cookie p{flex:1}
#cookie a{color:#fff}

/* ===== 404 ===== */
.e404{text-align:center;padding:60px 0 70px}
.e404 b{display:block;font:normal 120px/1 Arial,sans-serif;color:#c0141d;margin-bottom:10px}
.e404 h1{font:normal 24px Arial,sans-serif;color:#222;margin-bottom:12px}
.e404 p{color:#666;margin-bottom:20px}

.map{border:1px solid #e3e3e3;margin:0 0 22px}
.map img{display:block;width:100%}
.contacts-grid{overflow:hidden;margin:22px 0}
.contacts-grid div{float:left;width:310px;margin-right:25px;font-size:13px}
.contacts-grid div:last-child{margin-right:0}
.contacts-grid b{display:block;font-weight:normal;color:#999;font-size:11px;text-transform:uppercase;margin-bottom:4px}
.sitemap ul{margin-left:0}
.sitemap ul ul{margin:4px 0 8px 20px}

/* ===== Адаптив ===== */
@media (max-width:1000px){
 .wrap{width:auto;margin:0 16px}
 .top-mid{display:none}
 .main,.side{float:none;width:auto}
 .item .desc,.item .pic{float:none;width:auto;padding-left:0}
 .item .pic{height:auto;margin-top:16px}
 .item .pic img{width:100%;height:auto}
 .svc a,.steps div,.team div{width:calc(50% - 20px)}
 .adv div,.pack>div,.revs div,.bl a{width:calc(50% - 30px)}
 .bl a img{width:100%;height:auto}
 .stats div,.strip .wrap>div,.partners div,.inds div{width:50%}
 .two>div{float:none!important;width:auto}
 .slide .cap{width:auto;right:0}
 .dots{left:16px;margin:0}
 #foot .c1,#foot .c2,#foot .c3{float:none;width:auto;padding-top:0;margin-bottom:20px}
 .contacts-grid div{width:auto;float:none;margin:0 0 14px}
 .rel-list a{width:31%;margin-right:3%}
}
@media (max-width:700px){
 .burger{display:block;float:right;width:40px;height:46px;background:none;border:0;cursor:pointer;padding:0}
 .burger i{display:block;width:22px;height:2px;background:#fff;margin:5px auto}
 .top-right{display:none}
 #nav{display:none;position:absolute;left:-16px;right:-16px;top:46px;background:#1b1b1b;margin:0;float:none}
 #nav.open{display:block}
 #nav>li{float:none;border-top:1px solid #333}
 #nav>li>a{line-height:40px}
 #nav li ul{position:static;display:block;width:auto;border:0;box-shadow:none;background:#151515}
 .svc a,.steps div,.team div,.adv div,.pack>div,.revs div,.bl a{width:auto;float:none;margin-right:20px}
 .seo-text{columns:1}
 .form-big .f-row>div{float:none!important;width:auto;margin-bottom:10px}
 .slide .cap h2{font-size:22px}
 .slide .cap{top:40px}
 #cookie .wrap{flex-direction:column;align-items:flex-start;gap:8px}
 .rel-list a{width:auto;float:none;display:block;margin:0 0 14px}
 .text table{display:block;overflow-x:auto}
}