/* ВМС — металлообработка. Основная таблица стилей */
html{background:#d3d3d3}
body{margin:0;font:12px/1.55 Tahoma,Verdana,"Segoe UI",Arial,sans-serif;color:#f4f4f4;background:#d3d3d3 url(/img/bg.png)}
a{color:#bcd6f7}
a:hover{color:#fff}
img{border:0;max-width:100%}

/* ---------- шапка ---------- */
#top{background:#1d2532 url(/img/header-bg.svg) center top no-repeat;height:76px;border-bottom:1px solid #0d1118;box-shadow:0 2px 4px rgba(0,0,0,.35)}
#top .in{width:760px;margin:0 auto;position:relative;height:76px}
#logo{position:absolute;left:2px;top:3px;width:70px;height:70px;display:block}
#logo img{width:70px;height:70px}
#brand{position:absolute;left:84px;top:14px;color:#dfe7f2;text-decoration:none;font:bold 13px/1.25 Verdana,Arial,sans-serif;text-shadow:0 1px 2px #000}
#brand span{display:block;font-weight:normal;font-size:10px;color:#9fb1c8;letter-spacing:.4px}
#made{position:absolute;left:250px;top:0;width:250px;height:76px}
#contacts{position:absolute;right:0;top:6px;text-align:right;color:#fff;font:bold 16px/1.15 "Trebuchet MS",Verdana,sans-serif;letter-spacing:.5px;text-shadow:0 1px 2px #000}
#contacts a{color:#fff;text-decoration:none}
#contacts small{display:block;font:10px/1.3 Tahoma,Arial,sans-serif;color:#9eabbd;letter-spacing:0;margin-bottom:4px}
#contacts .adr{font-size:12px;font-weight:normal;color:#dfe6f0}
#help{position:fixed;left:8px;top:18px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7da2e6,#2f4f9e);border:2px solid #e6ecf8;color:#fff;font:bold 15px/24px Arial,sans-serif;text-align:center;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.5);z-index:50}
#help:hover{background:radial-gradient(circle at 35% 30%,#9bbcf3,#3c62b8);color:#fff}

/* ---------- меню ---------- */
#nav{width:760px;margin:0 auto;background:linear-gradient(#dcdcdc,#a9a9a9);border:1px solid #8a8a8a;border-top:0;display:flex;box-shadow:0 1px 2px rgba(0,0,0,.25)}
#nav a{flex:1 1 auto;text-align:center;padding:4px 6px;font:11px/16px Tahoma,Arial,sans-serif;color:#1d2433;text-decoration:none;border-left:1px solid #f2f2f2;border-right:1px solid #8f8f8f;white-space:nowrap}
#nav a:first-child{border-left:0}
#nav a:last-child{border-right:0}
#nav a:hover{background:linear-gradient(#efefef,#c4c4c4)}
#nav a.on{background:linear-gradient(#3b4a66,#1e2a40);color:#fff;border-color:#162034}

/* ---------- контент ---------- */
#page{width:760px;margin:12px auto 0;background:#858585;box-shadow:0 0 0 1px #9a9a9a,0 2px 6px rgba(0,0,0,.25);padding:10px 14px 20px;box-sizing:border-box;text-shadow:0 1px 1px rgba(0,0,0,.45)}
#page h1,#page h2{font:bold 20px/1.25 Verdana,Tahoma,Arial,sans-serif;color:#1d356b;text-shadow:0 1px 0 rgba(255,255,255,.25);margin:10px 0 10px;padding:0 0 6px;border-bottom:2px solid #a9a9a9;box-shadow:0 1px 0 #6f6f6f}
#page h1{font-size:21px}
#page h3{font:bold 14px/1.3 Verdana,Tahoma,sans-serif;color:#e8eef8;margin:14px 0 6px}
#page p{margin:0 0 9px}
#page ul,#page ol{margin:0 0 10px;padding-left:22px}
#page li{margin-bottom:3px}
#page strong{color:#fff}
.lead{font-size:13px;color:#fff}
.kinds{color:#a9c9f2}
.center{text-align:center}
.pic{margin:4px 0 10px;border:1px solid #6b6b6b;background:#5a5a5a;line-height:0;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.pic img{width:100%;height:auto;display:block}
.crumbs{font-size:11px;color:#d7d7d7;margin:2px 0 4px}
.crumbs a{color:#bcd6f7}
.crumbs span{color:#efefef}

table.tbl{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:11.5px;text-shadow:none}
table.tbl th{background:linear-gradient(#3b4a66,#24314b);color:#fff;font-weight:bold;padding:5px 7px;border:1px solid #5f6b80;text-align:left}
table.tbl td{background:#9a9a9a;padding:4px 7px;border:1px solid #777;color:#141414}
table.tbl tr:nth-child(odd) td{background:#a6a6a6}

.note{background:#6f7480;border-left:4px solid #1d356b;padding:8px 11px;margin:8px 0 12px;color:#fff}
.btn{display:inline-block;background:linear-gradient(#45597d,#1e2a40);color:#fff!important;text-decoration:none;font:bold 12px/1 Tahoma,Arial,sans-serif;padding:8px 18px;border:1px solid #121a29;border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.4);text-shadow:0 -1px 0 #000;cursor:pointer}
.btn:hover{background:linear-gradient(#566c94,#26365a)}

.cards{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 12px}
.card{flex:1 1 220px;max-width:calc(33.333% - 7px);box-sizing:border-box;background:#797979;border:1px solid #666;padding:8px;box-shadow:inset 0 1px 0 #959595}
.card img{width:100%;height:100px;object-fit:cover;display:block;margin-bottom:6px;border:1px solid #5d5d5d}
#page .card h3{margin:2px 0 5px;font-size:13px}
.card p{font-size:11.5px}

.steps{counter-reset:s;margin:6px 0 12px}
.step{position:relative;padding:6px 8px 4px 46px;border-bottom:1px dotted #a5a5a5;min-height:34px}
.step b{position:absolute;left:4px;top:7px;width:30px;height:30px;border-radius:50%;background:linear-gradient(#3b4a66,#1e2a40);color:#fff;font:bold 14px/30px Verdana,sans-serif;text-align:center;border:1px solid #c2c9d6}
#page .step h3{margin:2px 0 3px;font-size:13px}

.figures{display:flex;gap:8px;margin:6px 0 12px;flex-wrap:wrap}
.fig{flex:1 1 150px;background:#6f7480;border:1px solid #5b5f69;padding:9px 8px;text-align:center}
.fig b{display:block;font:bold 22px/1.1 Verdana,sans-serif;color:#cfe0f8}
.fig span{font-size:11px;color:#eee}

.faq details{background:#7a7a7a;border:1px solid #666;margin-bottom:4px}
.faq summary{cursor:pointer;padding:6px 9px;font-weight:bold;color:#fff;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";display:inline-block;width:14px;color:#bcd6f7}
.faq details[open] summary:before{content:"\2013"}
.faq details p{padding:0 10px 4px 23px}

/* ---------- партнёры ---------- */
.partners{background:#6d717a;border:1px solid #585c64;padding:4px 12px 8px;margin:14px 0 16px}
#page .partners h2{border-bottom-color:#8e939c}
.partner{display:flex;gap:14px;align-items:center;padding:10px 0;border-bottom:1px dotted #9aa0aa}
.partner:last-child{border-bottom:0}
.partner .plogo{flex:0 0 170px;height:84px;background:#fff;border:1px solid #4f535a;display:flex;align-items:center;justify-content:center;padding:6px;box-sizing:border-box}
.partner .plogo img{max-height:70px;max-width:156px}
.partner p{margin:0!important}
.partner h3{margin:0 0 4px!important}

/* ---------- блог ---------- */
.rubrics{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 12px}
.rubrics a{background:linear-gradient(#dcdcdc,#a9a9a9);color:#1d2433;text-decoration:none;padding:3px 9px;border:1px solid #777;font-size:11px;text-shadow:none}
.rubrics a.on,.rubrics a:hover{background:linear-gradient(#3b4a66,#1e2a40);color:#fff}
.post{display:flex;gap:12px;padding:10px 0;border-bottom:1px dotted #a8a8a8}
.post .th{flex:0 0 150px;line-height:0}
.post .th img{width:150px;height:84px;object-fit:cover;border:1px solid #5d5d5d}
.post h3{margin:0 0 4px!important;font-size:14px!important}
.post h3 a{color:#e9f1fd;text-decoration:none}
.post h3 a:hover{text-decoration:underline}
.post .rb{font-size:10.5px;color:#d0d0d0;margin-bottom:3px}
.pager{margin:14px 0 4px;text-align:center}
.pager a,.pager span{display:inline-block;min-width:22px;padding:3px 6px;margin:0 1px;background:#a9a9a9;color:#1d2433;text-decoration:none;border:1px solid #777;text-shadow:none}
.pager span{background:#1e2a40;color:#fff}
.related{margin-top:16px;background:#7a7a7a;border:1px solid #666;padding:4px 12px 8px}
.related ul{margin:0}

/* ---------- формы ---------- */
.form{background:#6f7480;border:1px solid #5b5f69;padding:12px 14px;margin:8px 0 14px}
.form .row{display:flex;gap:10px}
.form .row>label{flex:1}
.form label{display:block;font-size:11px;color:#eef;margin-bottom:8px}
.form input[type=text],.form input[type=email],.form textarea,.form select{width:100%;box-sizing:border-box;margin-top:3px;padding:5px 6px;border:1px solid #3f4450;background:#f2f2f2;font:12px Tahoma,Arial,sans-serif;color:#111;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.form textarea{height:100px;resize:vertical}
.form .agree{display:flex;gap:7px;align-items:flex-start;font-size:11px;margin:4px 0 10px;color:#eee}
.form .agree input{margin:2px 0 0;flex:0 0 auto;width:14px;height:14px}
.form .send{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.form .hint{font-size:10.5px;color:#dcdcdc;flex:1}
.form .ok{display:none;background:#3f6a46;border:1px solid #2c4f32;padding:8px;margin-top:8px}

/* ---------- футер ---------- */
#foot{width:760px;margin:12px auto 20px;background:#1d2532;color:#aab6c6;font-size:11px;border-top:3px solid #3b4a66;box-shadow:0 2px 6px rgba(0,0,0,.3)}
#foot .cols{display:flex;gap:16px;padding:14px 16px 8px}
#foot .col{flex:1}
#foot h4{margin:0 0 6px;color:#fff;font:bold 12px Verdana,sans-serif}
#foot ul{list-style:none;margin:0;padding:0}
#foot li{margin-bottom:3px}
#foot a{color:#bcd0ea;text-decoration:none}
#foot a:hover{color:#fff;text-decoration:underline}
#foot .soc{display:flex;gap:6px;margin-top:8px}
#foot .soc span{width:24px;height:24px;border-radius:3px;background:#334058;display:flex;align-items:center;justify-content:center;color:#c9d6ea;font:bold 10px Arial}
#foot .bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #2f3a4e;padding:8px 16px}
#foot .dc{display:flex;align-items:center;gap:8px}
#foot .dc img{width:28px;height:28px;background:#fff;border-radius:3px;padding:1px}

/* ---------- cookies ---------- */
#cookie{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:720px;max-width:calc(100% - 24px);background:#1d2532;border:1px solid #4a5874;color:#dfe6f0;padding:10px 14px;font-size:11.5px;display:none;gap:12px;align-items:center;z-index:60;box-shadow:0 2px 10px rgba(0,0,0,.5);box-sizing:border-box}
#cookie p{margin:0;flex:1}
#cookie a{color:#bcd6f7}

/* ---------- 404 ---------- */
.e404{text-align:center;padding:20px 0 10px}
.e404 b{display:block;font:bold 96px/1 Verdana,sans-serif;color:#1d356b;text-shadow:0 2px 0 #a9a9a9}

@media (max-width:780px){
 #top .in,#nav,#page,#foot{width:auto;margin-left:6px;margin-right:6px}
 #made,#brand{display:none}
 #nav{flex-wrap:wrap}
 #nav a{flex:1 1 30%;border:1px solid #9a9a9a}
 #contacts{font-size:13px}
 .card{max-width:100%}
 .partner,.post{flex-direction:column;align-items:flex-start}
 #foot .cols{flex-direction:column}
 .form .row{flex-direction:column;gap:0}
}