/* А вы знали — основной стиль */
:root{
  --red:#e04b3e; --red-d:#c73c30; --black:#0e0e0e; --ink:#1b1b1b; --text:#3a3a3a; --muted:#8a8a8a;
  --bg:#ebebeb; --line:#e3e3e3; --white:#fff; --top:#e6e6e6;
  --slab:'Roboto Slab',Georgia,serif; --sans:'Open Sans',Arial,sans-serif;
  --w:1300px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.75 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color .2s}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--slab);color:var(--ink);font-weight:400;margin:0}
.wrap{width:var(--w);max-width:calc(100% - 32px);margin:0 auto}
button{font:inherit;cursor:pointer}

/* ---------- top bar ---------- */
.topbar{background:var(--top);font-size:11px;color:#6d6d6d;height:33px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:33px}
.topbar .tb-left{display:flex;align-items:center;gap:32px}
.topbar .tb-links a{color:#6d6d6d}
.topbar .tb-links a:hover{color:var(--red)}
.topbar .tb-links span{margin:0 8px;color:#a9a9a9}
.topbar .tb-right{display:flex;align-items:center;height:100%}
.topbar .tb-date{margin-right:16px;color:#444;font-weight:600}
.sq{display:inline-flex;width:43px;height:33px;align-items:center;justify-content:center;background:var(--red);color:#fff;border-left:1px solid rgba(255,255,255,.18)}
.sq:hover{background:var(--red-d)}
.sq svg{width:14px;height:14px;fill:#fff}

/* ---------- logo header ---------- */
.header{background:#fff}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:117px}
.logo{display:inline-flex;align-items:center;gap:10px;line-height:1}
.logo-word{font:900 47px/1 'Montserrat',Arial,sans-serif;letter-spacing:-1.5px;color:var(--black);text-transform:uppercase;white-space:nowrap}
.logo-mark{position:relative;width:46px;height:46px;background:var(--red);border-radius:12px 12px 12px 2px;display:inline-flex;align-items:center;justify-content:center;transform:translateY(-1px)}
.logo-mark::after{content:"";position:absolute;left:0;bottom:-9px;border-left:12px solid var(--red);border-bottom:9px solid transparent}
.logo-mark b{font:900 33px/1 'Montserrat',Arial,sans-serif;color:#fff}
.logo-sub{display:block;font:600 10px/1 var(--sans);letter-spacing:3.2px;text-transform:uppercase;color:#7b7b7b;margin-top:9px}
.logo-box{display:flex;flex-direction:column}
.hbanner{position:relative;width:540px;height:86px;background:#202022;display:flex;overflow:hidden;color:#fff}
.hbanner .hb-img{width:205px;background:url(/assets/img/banner.jpg) center/cover}
.hbanner .hb-cut{position:absolute;left:180px;top:0;width:52px;height:100%;background:var(--red);transform:skewX(-20deg)}
.hbanner .hb-cut2{position:absolute;left:196px;top:0;width:44px;height:100%;background:#202022;transform:skewX(-20deg)}
.hbanner .hb-txt{flex:1;padding:14px 26px 0 52px;position:relative}
.hbanner .hb-txt b{display:block;font:700 19px/1.15 var(--slab)}
.hbanner .hb-txt span{font-size:12px;color:#c9c9c9}
.hbanner .hb-side{width:16px;background:#e9e9e9;color:#777;font-size:8px;writing-mode:vertical-rl;text-align:center;letter-spacing:.5px}
.hbanner:hover b{color:#ffb4ac}

/* ---------- nav ---------- */
.nav{background:var(--black);position:relative;z-index:50}
.nav .wrap{display:flex;align-items:stretch;height:50px}
.nav ul{list-style:none;margin:0;padding:0;display:flex}
.nav .menu>li{position:relative;border-right:1px solid #2a2a2a}
.nav .menu>li>a{display:flex;align-items:center;height:50px;padding:0 21px;color:#fff;font:400 15px var(--slab);gap:9px;white-space:nowrap}
.nav .menu>li>a .chev{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);opacity:.85}
.nav .menu>li.active>a,.nav .menu>li:hover>a{background:var(--red)}
.nav .burger{width:54px;display:flex;align-items:center;justify-content:center;border-left:1px solid #2a2a2a;border-right:1px solid #2a2a2a;background:none;border-top:0;border-bottom:0;padding:0}
.nav .burger i,.nav .burger i::before,.nav .burger i::after{display:block;width:18px;height:2px;background:#fff;position:relative}
.nav .burger i::before,.nav .burger i::after{content:"";position:absolute;left:0}
.nav .burger i::before{top:-6px}.nav .burger i::after{top:6px}
.nav .sub{position:absolute;top:50px;left:0;min-width:230px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.14);display:none;padding:8px 0;border-top:3px solid var(--red)}
.nav .menu>li:hover .sub{display:block}
.nav .sub a{display:block;padding:8px 22px;color:var(--ink);font:400 14px var(--slab)}
.nav .sub a:hover{color:var(--red);padding-left:26px}
.nav .nav-right{margin-left:auto;display:flex}
.nav .nav-right a{width:52px;display:flex;align-items:center;justify-content:center;border-left:1px solid #2a2a2a;color:#fff}
.nav .nav-right a:last-child{border-right:1px solid #2a2a2a}
.nav .nav-right a:hover{background:var(--red)}
.nav .nav-right svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8}
.nav .mini-logo{display:none;align-items:center;padding-right:22px}
.nav .mini-logo .logo-word{font-size:25px;color:#fff;letter-spacing:-.6px}
.nav .mini-logo .logo-mark{width:25px;height:25px;border-radius:7px 7px 7px 1px}
.nav .mini-logo .logo-mark b{font-size:18px}
.nav .mini-logo .logo-mark::after{border-left-width:7px;border-bottom-width:5px;bottom:-5px}
.nav.fixed{position:fixed;top:0;left:0;right:0;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.nav.fixed .mini-logo{display:flex}
.nav.fixed .burger{display:none}
.nav-ph{height:0}
.nav-ph.on{height:50px}

/* trending */
.trending{background:#fff;border-bottom:1px solid #e1e1e1}
.trending .wrap{height:36px;display:flex;align-items:center;gap:16px;overflow:hidden}
.trending b{font:700 13px var(--slab);color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:8px}
.trending b::after{content:"";width:6px;height:6px;border-right:1.5px solid #111;border-bottom:1.5px solid #111;transform:rotate(-45deg)}
.tick{position:relative;flex:1;height:36px}
.tick a{position:absolute;left:0;top:0;line-height:36px;font-size:12px;color:#8a8a8a;opacity:0;transform:translateY(8px);transition:.45s;white-space:nowrap}
.tick a.on{opacity:1;transform:none}
.tick a:hover{color:var(--red)}

/* ---------- common blocks ---------- */
main{padding:17px 0 60px}
.tag{position:absolute;left:0;top:0;z-index:3;background:#111;color:#fff;font:400 11px/25px var(--slab);padding:0 12px 0 15px;border-left:5px solid var(--red)}
.tag:hover{background:var(--red)}
.inline-tag{display:inline-block;position:static;margin-bottom:14px}
.date{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#8b8b8b;font-family:var(--slab)}
.date::before{content:"";width:11px;height:10px;border:1.5px solid var(--red);border-top-width:3px;border-radius:1px;box-sizing:border-box}
.meta{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.meta .rt{font-size:12px;color:#8b8b8b;font-family:var(--slab)}
.ph{position:relative;overflow:hidden;display:block;background:#333}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
a.ph:hover img,.card:hover .ph img{transform:scale(1.04)}

/* section titles with hatch */
.st{display:flex;align-items:center;height:35px;margin:0 0 18px;background:repeating-linear-gradient(-45deg,#c8c8c8 0 1px,transparent 1px 5px)}
.st h2,.st .h{background:var(--red);color:#fff;font:400 15px/35px var(--slab);padding:0 19px;white-space:nowrap;margin:0}
.st.dark h2,.st.dark .h{background:#111}
.st .st-fill{flex:1}
.st .arrows{display:flex;background:#fff}
.st .arrows button{width:36px;height:35px;border:0;border-left:1px solid #e6e6e6;background:#fff;display:flex;align-items:center;justify-content:center}
.st .arrows button::after{content:"";width:7px;height:7px;border-left:1.5px solid #222;border-bottom:1.5px solid #222}
.st .arrows .prev::after{transform:rotate(45deg) translate(2px,-1px)}
.st .arrows .next::after{transform:rotate(-135deg) translate(2px,-1px)}
.st .arrows button:hover{background:var(--red)}
.st .arrows button:hover::after{border-color:#fff}
.st .tabs{display:flex;background:#fff;height:35px}
.st .tabs button{border:0;border-left:1px solid #ececec;background:#fff;padding:0 22px;font:400 13px var(--slab);color:#777;height:35px}
.st .tabs button.on,.st .tabs button:hover{color:var(--red)}
.st .more{background:#fff;padding:0 16px;font:400 12px/35px var(--slab);color:#666}
.st .more:hover{color:var(--red)}
.sec{margin-top:40px}

/* hero grid */
.hero{display:grid;grid-template-columns:856px 1fr;grid-template-rows:247px 247px;gap:4px}
.hero .big{grid-row:1/3}
.hero .cell{position:relative;overflow:hidden;display:block;color:#fff}
.hero .cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.hero .cell:hover img{transform:scale(1.04)}
.hero .cell::after{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 35%,rgba(0,0,0,.68))}
.hero .cap{position:absolute;left:24px;right:24px;bottom:22px;z-index:2}
.hero .cap h3{color:#fff;font-size:21px;line-height:1.3;margin-bottom:12px}
.hero .big .cap h3{font-size:34px;line-height:1.2}
.hero .cap .date{color:#fff}

/* cards */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{background:#fff;position:relative;display:flex;flex-direction:column}
.card .ph{height:163px}
.card .body{padding:22px 26px 24px}
.card h3{font-size:19px;line-height:1.36;margin-bottom:14px}
.card h3 a:hover{color:var(--red)}
.card p{margin:0 0 14px;font-size:13px;color:#6a6a6a}
.grid3 .card .ph{height:210px}
.grid2 .card .ph{height:260px}
.slider{overflow:hidden}
.slider .track{display:flex;gap:20px;transition:transform .5s}
.slider .card{flex:0 0 calc((100% - 60px)/4)}

/* layout with sidebar */
.cols{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:start}
.cols-main{min-width:0}

/* popular: big + list */
.pop{display:grid;grid-template-columns:643px 1fr;background:#fff}
.pop .lead .ph{height:283px}
.pop .lead .body{padding:28px 26px}
.pop .lead h3{font-size:27px;line-height:1.3;margin-bottom:12px}
.pop .lead p{margin:16px 0 0;color:#666}
.pop .lst{border-left:1px solid #eee}
.mini{display:flex;gap:18px;padding:7px;border-bottom:1px solid #eee}
.mini .ph{flex:0 0 117px;height:84px}
.mini h4{font-size:14px;line-height:1.43;margin:5px 0 9px}
.mini h4 a:hover{color:var(--red)}
.tabpane{display:none}.tabpane.on{display:grid}

/* sidebar widgets */
.side .widget{margin-bottom:40px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr)}
.tiles a{height:101px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font:400 11px var(--slab);gap:8px;text-align:center}
.tiles a svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.7}
.tiles a:hover{filter:brightness(1.12)}
.t1{background:#3b5998}.t2{background:#5bb4f0}.t3{background:#4e6d95}.t4{background:#cd3333}.t5{background:#8a8a8a}.t6{background:#454545}
.mv{position:relative;background:#fff}
.mv .ph{height:190px}
.mv .body{padding:18px 20px 20px}
.mv h3{font-size:17px;line-height:1.4;margin-bottom:10px}
.numlist{background:#fff;counter-reset:n;list-style:none;margin:0;padding:6px 0}
.numlist li{counter-increment:n;display:flex;gap:14px;padding:12px 18px;border-bottom:1px solid #f0f0f0}
.numlist li:last-child{border:0}
.numlist li::before{content:counter(n,decimal-leading-zero);font:700 22px/1 var(--slab);color:var(--red);min-width:30px}
.numlist a{font:400 14px/1.45 var(--slab);color:var(--ink)}
.numlist a:hover{color:var(--red)}
.cats{background:#fff;list-style:none;margin:0;padding:6px 20px}
.cats li{border-bottom:1px solid #f0f0f0}
.cats li:last-child{border:0}
.cats a{display:flex;justify-content:space-between;padding:10px 0;font:400 14px var(--slab);color:var(--ink)}
.cats a span{background:#f1f1f1;font:600 11px/22px var(--sans);padding:0 8px;color:#777}
.cats a:hover{color:var(--red)}
.cats a:hover span{background:var(--red);color:#fff}
.wbox{background:#fff;padding:24px 22px}
.wbox h4{font-size:18px;margin-bottom:10px}
.wbox p{margin:0 0 14px;font-size:13px}
.tagcloud{display:flex;flex-wrap:wrap;gap:6px}
.tagcloud a{background:#fff;border:1px solid #e1e1e1;font:400 12px/1 var(--slab);padding:9px 12px;color:#555}
.tagcloud a:hover{background:var(--red);border-color:var(--red);color:#fff}

/* partners */
.partners-intro{background:#fff;padding:24px 28px;margin-bottom:20px;font-size:14px;color:#555;border-left:5px solid var(--red)}
.partners-intro p{margin:0}
.partners{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.partner{background:#fff;display:flex;flex-direction:column}
.partner .plogo{height:150px;display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:1px solid #eee;padding:18px 30px;position:relative}
.partner .plogo img{max-height:110px;max-width:100%;object-fit:contain;transition:transform .4s}
.partner .plogo:hover img{transform:scale(1.05)}
.partner .pbody{padding:20px 26px 26px}
.partner h3{font-size:19px;margin-bottom:10px}
.partner p{margin:0;font-size:13.5px;color:#5a5a5a;line-height:1.75}
.partner p a{color:var(--red);border-bottom:1px solid rgba(224,75,62,.35)}
.partner p a:hover{border-color:var(--red)}

/* list layout */
.lrow{display:grid;grid-template-columns:330px 1fr;background:#fff;margin-bottom:20px}
.lrow .ph{height:100%;min-height:220px}
.lrow .body{padding:26px 30px}
.lrow h3{font-size:22px;line-height:1.35;margin-bottom:12px}
.lrow h3 a:hover{color:var(--red)}
.lrow p{margin:12px 0 16px;color:#666}
.rm{display:inline-block;font:400 12px var(--slab);color:#fff;background:#111;padding:8px 16px}
.rm:hover{background:var(--red)}

/* dark band */
.dark-band{background:#151515;padding:44px 0 50px;margin-top:44px}
.dark-band .st{background:repeating-linear-gradient(-45deg,#3a3a3a 0 1px,transparent 1px 5px)}
.dark-band .dcard{position:relative;display:block;color:#fff}
.dark-band .dcard .ph{height:230px}
.dark-band .dcard h3{color:#fff;font-size:17px;line-height:1.4;margin:16px 0 8px}
.dark-band .dcard:hover h3{color:#ff8b80}
.dark-band .feat{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.dark-band .feat .main .ph{height:420px}
.dark-band .feat .main h3{font-size:26px}
.dark-band .feat .stack{display:grid;gap:20px}
.dark-band .feat .stack .ph{height:150px}

/* facts */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fact{background:#fff;padding:28px 26px;position:relative}
.fact .num{font:700 44px/1 var(--slab);color:var(--red);opacity:.9}
.fact h4{font-size:17px;margin:14px 0 10px;line-height:1.4}
.fact p{margin:0;font-size:13px;color:#666}

/* quote band */
.qband{background:var(--red);color:#fff;padding:46px 60px;margin-top:40px;position:relative}
.qband blockquote{margin:0;font:300 26px/1.5 var(--slab)}
.qband span{display:block;margin-top:16px;font-size:13px;opacity:.85}
.qband::before{content:"“";position:absolute;right:40px;top:-10px;font:700 180px/1 var(--slab);opacity:.18}

/* subscribe */
.subscribe{background:#111;color:#ddd;display:grid;grid-template-columns:1fr 1.2fr;gap:40px;padding:42px 46px;margin-top:40px}
.subscribe h3{color:#fff;font-size:28px;margin-bottom:10px}
.subscribe p{margin:0;color:#aaa}

/* forms */
.form{display:grid;gap:12px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea,.form select{width:100%;border:1px solid #dcdcdc;background:#fff;padding:12px 14px;font:14px var(--sans);color:#222;outline:none;border-radius:0}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--red)}
.form .agree{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.55;color:#777}
.form .agree input{margin:2px 0 0;width:15px;height:15px;flex:0 0 15px;accent-color:var(--red)}
.form .agree a{color:var(--red);text-decoration:underline}
.form .btn{justify-self:start}
.btn{display:inline-block;background:var(--red);color:#fff;border:0;padding:12px 28px;font:400 14px var(--slab)}
.btn:hover{background:var(--red-d)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.form .ok{display:none;background:#eef7ee;border-left:4px solid #3a9a4a;padding:12px 16px;color:#2c6b35;font-size:13px}
.form.sent .ok{display:block}
.subscribe .form input{background:#1f1f1f;border-color:#333;color:#eee}
.subscribe .form .agree{color:#999}

/* rubric tiles */
.rtiles{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.rtile{position:relative;height:150px;display:block;overflow:hidden;color:#fff}
.rtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.rtile::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);transition:.3s}
.rtile:hover::after{background:rgba(224,75,62,.75)}
.rtile:hover img{transform:scale(1.06)}
.rtile span{position:absolute;z-index:2;left:18px;bottom:16px;font:400 18px var(--slab)}
.rtile small{display:block;font:400 11px var(--sans);opacity:.85}

/* page header (inner) */
.ptitle{background:#fff;padding:30px 34px;margin-bottom:24px}
.ptitle h1{font-size:34px;line-height:1.25}
.ptitle p{margin:10px 0 0;color:#777;max-width:820px}
.crumbs{font-size:12px;color:#999;margin-bottom:12px;font-family:var(--slab)}
.crumbs a{color:#777}
.crumbs a:hover{color:var(--red)}
.crumbs span{margin:0 7px}

/* article */
.article{background:#fff}
.article .a-head{padding:34px 44px 26px}
.article h1{font-size:36px;line-height:1.28;margin:4px 0 18px}
.article .lead{font:300 18px/1.65 var(--slab);color:#444;margin:18px 0 0}
.article .a-img{height:470px}
.content{padding:36px 44px 30px;font-size:15.5px;line-height:1.85;color:#333}
.content p{margin:0 0 20px}
.content h2{font-size:25px;line-height:1.35;margin:38px 0 16px;padding-left:16px;border-left:5px solid var(--red)}
.content h3{font-size:19px;margin:28px 0 12px}
.content ul,.content ol{margin:0 0 22px;padding-left:22px}
.content li{margin-bottom:8px}
.content ul li::marker{color:var(--red)}
.content blockquote{margin:30px 0;background:#f4f4f4;border-left:5px solid #111;padding:22px 28px;font:300 19px/1.6 var(--slab);color:#222}
.content blockquote p{margin:0}
.content a{color:var(--red);text-decoration:underline}
.content strong{color:#111}
.a-foot{padding:0 44px 34px}
.a-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-top:1px solid #eee;padding-top:22px;font:400 13px var(--slab)}
.a-tags a{background:#f1f1f1;padding:6px 12px;font-size:12px;color:#555}
.a-tags a:hover{background:var(--red);color:#fff}
.toc{background:#f6f6f6;padding:20px 26px;margin:0 0 28px;border-top:3px solid var(--red)}
.toc b{font:700 15px var(--slab);color:#111;display:block;margin-bottom:8px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:4px 0;font-size:14px}
.toc a{color:#444;text-decoration:none}
.toc a:hover{color:var(--red)}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.prevnext a{background:#fff;padding:22px 26px;display:block}
.prevnext small{display:block;font:400 11px var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.prevnext span{font:400 16px/1.4 var(--slab);color:var(--ink)}
.prevnext a:hover span{color:var(--red)}
.prevnext .nx{text-align:right}
.author-box{display:flex;gap:20px;background:#fff;padding:24px 28px;margin-top:20px;align-items:center}
.author-box .av{flex:0 0 70px;height:70px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font:700 22px var(--slab);border:3px solid var(--red)}
.author-box b{font:400 17px var(--slab);color:#111}
.author-box p{margin:4px 0 0;font-size:13px;color:#777}

/* pagination */
.pager{display:flex;gap:4px;margin-top:26px;flex-wrap:wrap}
.pager a,.pager span{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#fff;font:400 14px var(--slab);color:#333;padding:0 12px}
.pager a:hover,.pager .cur{background:var(--red);color:#fff}

/* text pages */
.page-body{background:#fff;padding:38px 44px 40px}
.page-body .content{padding:0}
.faq h3{cursor:pointer;position:relative;padding:16px 40px 16px 0;margin:0;border-bottom:1px solid #eee;font-size:18px}
.faq h3::after{content:"+";position:absolute;right:6px;top:12px;font:300 26px var(--slab);color:var(--red)}
.faq h3.open::after{content:"−"}
.faq h3+p{display:none;padding:14px 0 6px}
.faq h3.open+p{display:block}
.contacts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
.cbox{background:#fff;padding:28px}
.cbox h3{font-size:20px;margin-bottom:10px}
.cbox a{color:var(--red)}
.sitemap-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sitemap-cols h3{font-size:18px;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--red)}
.sitemap-cols ul{list-style:none;padding:0;margin:0 0 26px}
.sitemap-cols li{padding:5px 0;border-bottom:1px dashed #e6e6e6;font-size:13px}
.sitemap-cols a:hover{color:var(--red)}
.search-box{display:flex;margin-bottom:24px}
.search-box input{flex:1;border:1px solid #ddd;border-right:0;padding:14px 16px;font:15px var(--sans);outline:none}
.search-box button{border:0;background:var(--red);color:#fff;padding:0 26px;font:400 15px var(--slab)}
.err{background:#fff;text-align:center;padding:70px 30px 80px}
.err .code{font:700 170px/1 var(--slab);color:var(--red);letter-spacing:-6px}
.err h1{font-size:30px;margin:12px 0}
.err p{color:#777;max-width:540px;margin:0 auto 24px}

/* footer */
.footer{background:#111;color:#9a9a9a;padding:60px 0 0;font-size:13px}
.footer .fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:46px}
.footer h4{color:#fff;font-size:16px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid #2b2b2b;position:relative}
.footer h4::after{content:"";position:absolute;left:0;bottom:-1px;width:40px;height:2px;background:var(--red)}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{padding:5px 0}
.footer a:hover{color:#fff}
.footer .logo-word{color:#fff;font-size:30px}
.footer .logo-mark{width:30px;height:30px;border-radius:8px 8px 8px 1px}
.footer .logo-mark b{font-size:21px}
.footer .logo-mark::after{border-left-width:8px;border-bottom-width:6px;bottom:-6px}
.footer .fpost{display:flex;gap:12px;margin-bottom:14px}
.footer .fpost .ph{flex:0 0 70px;height:54px}
.footer .fpost a{color:#ccc;font:400 13px/1.45 var(--slab)}
.footer .fpost a:hover{color:var(--red)}
.fbottom{background:#0a0a0a;padding:18px 0;font-size:12px}
.fbottom .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fbottom a{margin-left:18px}
.fbottom a:hover{color:#fff}
.totop{position:fixed;right:24px;bottom:24px;width:44px;height:44px;background:var(--red);display:none;align-items:center;justify-content:center;z-index:60;border:0}
.totop.on{display:flex}
.totop::after{content:"";width:9px;height:9px;border-left:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg) translate(2px,2px)}

/* cookie */
.cookie{position:fixed;left:24px;bottom:24px;max-width:470px;background:#111;color:#ccc;padding:20px 22px;z-index:90;font-size:13px;border-left:5px solid var(--red);box-shadow:0 10px 30px rgba(0,0,0,.35);display:none}
.cookie.on{display:block}
.cookie b{color:#fff;font:400 16px var(--slab);display:block;margin-bottom:6px}
.cookie a{color:#ff8b80;text-decoration:underline}
.cookie .btns{display:flex;gap:10px;margin-top:14px}
.cookie .btn{padding:9px 20px;font-size:13px}
.cookie .btn.ghost{background:transparent;border:1px solid #444}

/* off-canvas */
.oc{position:fixed;top:0;left:0;bottom:0;width:330px;background:#111;color:#ccc;z-index:100;transform:translateX(-100%);transition:.35s;overflow:auto;padding:30px}
.oc.on{transform:none}
.oc-shade{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;display:none}
.oc-shade.on{display:block}
.oc h4{color:#fff;font-size:15px;margin:26px 0 12px;border-bottom:1px solid #2a2a2a;padding-bottom:10px}
.oc a{display:block;padding:6px 0;font:400 14px var(--slab)}
.oc a:hover{color:var(--red)}
.oc .close{position:absolute;right:16px;top:14px;background:none;border:0;color:#fff;font-size:28px}

/* responsive */
@media(max-width:1340px){:root{--w:1180px}.hero{grid-template-columns:2fr 1fr}.pop{grid-template-columns:1.3fr 1fr}}
@media(max-width:1100px){
  .hbanner{display:none}.nav .menu>li>a{padding:0 13px;font-size:14px}
  .grid4{grid-template-columns:repeat(2,1fr)}.slider .card{flex-basis:calc((100% - 20px)/2)}
  .cols{grid-template-columns:1fr}.partners{grid-template-columns:repeat(2,1fr)}
  .rtiles{grid-template-columns:repeat(3,1fr)}.footer .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .topbar .tb-links,.topbar .tb-date{display:none}
  .header .wrap{height:90px}.logo-word{font-size:30px}.logo-mark{width:32px;height:32px}.logo-mark b{font-size:23px}
  .nav .menu{display:none}.nav .burger{display:flex!important}
  .hero{grid-template-columns:1fr;grid-template-rows:340px 220px 220px}.hero .big{grid-row:auto}
  .hero .big .cap h3{font-size:24px}
  .grid3,.grid2,.facts,.partners,.pop,.lrow,.subscribe,.dark-band .feat,.contacts-grid,.sitemap-cols{grid-template-columns:1fr}
  .slider .card{flex-basis:100%}.rtiles{grid-template-columns:repeat(2,1fr)}
  .article .a-head,.content,.a-foot,.page-body{padding-left:20px;padding-right:20px}
  .article h1{font-size:27px}.article .a-img{height:260px}
  .st .tabs button{padding:0 10px}.footer .fgrid{grid-template-columns:1fr}.form .row2{grid-template-columns:1fr}
  .qband{padding:30px 26px}.qband blockquote{font-size:20px}
}
