/* ============================================================
   Карточки материалов для ЗОК — kompens
   Куда: /custom/custom19_06_2016_09_46/css/antidron.css — в конец файла

   Все селекторы вложены в .kc-wrap: блок не задевает стили сайта
   и стили сайта не задевают блок.
   Откат задачи: удалить этот блок и убрать секцию из контента страницы.
   ============================================================ */

.kc-wrap{
  background:#fff;
  color:#3A3A3A;
  font-family:inherit;
  -webkit-font-smoothing:antialiased;
}
.kc-wrap *,
.kc-wrap *::before,
.kc-wrap *::after{ box-sizing:border-box; }
.kc-wrap img{ max-width:100%; }

.kc-wrap { max-width:1240px; margin:0 auto; padding:48px 20px 64px; }
.kc-wrap .kc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
.kc-wrap .kc-media { position:relative; aspect-ratio:16/10; background:#F2F8FD; overflow:hidden; }
.kc-wrap .kc-media img { width:100%; height:100%; object-fit:cover; display:block; }
.kc-wrap .kc-thumbs { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; padding:6px 6px 0; }
.kc-wrap .kc-th { padding:0; border:1px solid #E2E2E2; background:none; cursor:pointer; overflow:hidden; aspect-ratio:3/2; transition:border-color .15s ease; border-radius:4px; }
.kc-wrap .kc-th img { width:100%; height:100%; object-fit:cover; display:block; }
.kc-wrap .kc-th:hover, .kc-wrap .kc-th.is-on { border-color:var(--a); }
.kc-wrap .kc-th.is-on { box-shadow:0 0 0 1px var(--a); }
.kc-wrap .kc-note { margin-top:26px; font-size:12px; color:#9A9A9A; line-height:1.6; }
@media (max-width:640px) {
  .kc-wrap { padding:32px 14px 44px; }
  .kc-wrap .kc-grid { grid-template-columns:1fr; gap:16px; }
}
.kc-wrap .kc-head { margin-bottom:28px; }
.kc-wrap .kc-head h2 { font-size:30px; line-height:1.2; margin:0 0 8px; color:#1C1C1C; letter-spacing:-0.5px; }
.kc-wrap .kc-head p { margin:0; font-size:15px; color:#6E6E6E; max-width:840px; line-height:1.55; }
.kc-wrap .kc-head .kc-rule { width:56px; height:4px; background:#F07E1B; border-radius:2px; margin-bottom:18px; }
.kc-wrap .kc-card { --a:#2E93D9; --a-dark:#15628F; background:#fff; border:1px solid #E2E2E2; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.kc-wrap .kc-card:hover { box-shadow:0 10px 28px rgba(21,98,143,.14); transform:translateY(-3px); border-color:var(--a); }
.kc-wrap .kc-media::after { content:""; position:absolute; inset:auto 0 0 0; height:4px; background:var(--a); }
.kc-wrap .kc-badge { position:absolute; top:12px; left:12px; background:var(--a); color:#fff; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:5px 10px; border-radius:5px; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.kc-wrap .kc-body { padding:16px 16px 0; flex:1; }
.kc-wrap .kc-title { font-size:17px; font-weight:700; line-height:1.3; margin:0 0 3px; color:#1C1C1C; }
.kc-wrap .kc-std { font-size:12.5px; color:var(--a-dark); font-weight:600; margin-bottom:12px; }
.kc-wrap .kc-specs { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:12px; }
.kc-wrap .kc-specs td { padding:5px 0; border-bottom:1px solid #EFEFEF; }
.kc-wrap .kc-specs td:first-child { color:#8C8C8C; padding-right:10px; }
.kc-wrap .kc-specs td:last-child { text-align:right; font-weight:600; color:#3A3A3A; }
.kc-wrap .kc-specs tr:last-child td { border-bottom:0; }
.kc-wrap .kc-use { font-size:12.5px; line-height:1.45; color:#4A4A4A; background:#F2F8FD; border-left:3px solid var(--a); padding:8px 10px; border-radius:0 6px 6px 0; margin-bottom:14px; }
.kc-wrap .kc-use b { color:var(--a-dark); }
.kc-wrap .kc-foot { padding:0 16px 16px; }
.kc-wrap .kc-btn { display:block; width:100%; text-align:center; background:var(--a); color:#fff; text-decoration:none; font-size:14px; font-weight:600; padding:12px 16px; border-radius:7px; transition:background .15s ease; }
.kc-wrap .kc-btn:hover { background:var(--a-dark); }