/* Адаптивный слой BMC — добавляется поверх оригинального дизайна, десктоп не меняет */
/* 1. Фон страницы — белый (просьба заказчика) */
body { background: #ffffff !important; background-image: none !important; }

/* 2. Слайдер на карусели (Owl) */
.main-slider, #collaj .right_img { max-width: 100%; overflow: hidden; }
/* в шаблонном css было #collaj{height:260px; overflow-x:hidden} — из-за этого по оси Y получался auto
   и в слайд-шоу появлялась полоса прокрутки. Снимаем фиксированную высоту и глушим overflow. */
#collaj { height: auto !important; min-height: 0 !important; overflow: hidden !important; }
/* старая CSS anythingslider ставила списку слайдов overflow-y:auto — из-за неё оставалась полоса прокрутки */
#main-slider__list, .main-slider__list, .owl-carousel, .owl-carousel .owl-wrapper-outer { overflow: hidden !important; }
.owl-carousel .owl-wrapper-outer, .owl-carousel .owl-wrapper, .owl-carousel .owl-item { overflow: hidden !important; }
#collaj, #collaj .right_img, .main-slider, .main-slider__list, .main-slider__item,
.owl-carousel, .owl-stage-outer, .owl-stage, .owl-item { background: #ffffff !important; background-image: none !important; }
.main-slider__list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: block !important;
                     width: 100% !important; height: auto !important; }
.main-slider__list > li { display: block !important; width: 100% !important; float: none !important; margin: 0 !important; }
.main-slider__list > li img { display: block; width: 100%; height: auto; }
.owl-carousel .owl-wrapper-outer { max-width: 100%; }
.owl-theme .owl-controls .owl-buttons div { background: #2c5f7c; opacity: .85; }
.owl-theme .owl-controls .owl-page span { background: #2c5f7c; }

/* 3. Кнопка «заказать онл@йн» в шапке: надпись нарисована в самой картинке button_zakaz.png (138×24).
   Свой текст ссылки прячем (иначе он накладывается на надпись в картинке и «двоится»),
   фон не повторяем и растягиваем ровно по кнопке — без этого справа был виден шов. */
.zakazat_head_top a {
  font-size: 0 !important; color: transparent !important; text-decoration: none !important;
  padding: 0 !important; width: 138px !important; height: 24px !important;
  background: url(/images/button_zakaz.png) no-repeat center center !important;
  background-size: 100% 100% !important;
}

/* 4. Раздел «О компании»: блок .afterMiddleMenu в левой колонке (ссылки раздела) — в оригинале
   остался без оформления, ссылки выглядели «голыми» синими. Оформляем как строки левого меню
   на остальных страницах (см. ul#vertical-multilevel-menu): отступы, разделители, цвет #0a447c. */
#content .left_menu_block .afterMiddleMenu { padding: 5px 15px; }
#content .left_menu_block .afterMiddleMenu p { margin: 0; padding: 5px 0; border-bottom: 1px solid #dddddd; }
#content .left_menu_block .afterMiddleMenu p:last-child { border-bottom: 0 none; }
#content .left_menu_block .afterMiddleMenu p a { display: block; color: #0a447c; font-size: 13px; text-decoration: none; }
#content .left_menu_block .afterMiddleMenu p a:hover { color: #2e5565; }

/* 5. Раздел «Наши клиенты»: блок #clients-list в оригинале был вообще без стилей
   (правил для .clients-list-* нет ни в одном css сайта), поэтому логотипы шли в столбик.
   Делаем аккуратную сетку: 3 в ряд на десктопе, 2 на планшете, 1 на телефоне. */
#clients-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; margin: 14px 0 22px; }
#clients-list .clients-list-line { display: none !important; }
#clients-list .clients-list-item { text-align: center; }
#clients-list .clients-list-logo { margin: 0; }
#clients-list .clients-list-logo a { display: block; }
#clients-list .clients-list-logo img { display: block; margin: 0 auto; width: 100%; max-width: 261px; height: auto; }
@media (max-width: 960px) { #clients-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #clients-list { grid-template-columns: 1fr; } }

/* 6. Верхнее меню «Услуги»: панель подменю раскрывалась сама — в шаблоне есть правило
   `#horizontal-multilevel-menu2 li:hover ul { display:block !important }`, которое перебивает
   инлайновый display:none, поэтому после клика по ссылке (курсор остаётся над меню) панель
   открывалась сразу при загрузке. Открываем только по осознанному наведению (класс ставит скрипт). */
body #middel_menu2 li ul.list-par { display: none !important; }
body #middel_menu2 li.bmc-open > ul.list-par { display: block !important; opacity: 1 !important; }

/* 7. Левое меню раздела: на части страниц (около 17: контакты, онлайн-заявка, юруслуги и др.)
   в собранном css шаблона НЕ оказалось стилей компонента uslugi_multilevel1 — из-за этого
   левое меню разворачивалось целиком (60+ пунктов) и без оформления. Дублируем правила,
   чтобы вид был одинаковым на всём сайте. */
ul#vertical-multilevel-menu { background: none; margin: 0; padding: 0; list-style: none; }
ul#vertical-multilevel-menu li { padding: 5px 0; display: none; }
ul#vertical-multilevel-menu li ul { margin: 0; padding: 0; list-style: none; }
ul#vertical-multilevel-menu li ul li { border-bottom: 1px solid #dddddd; }
ul#vertical-multilevel-menu li ul li ul { margin: 0 0 0 10px; padding: 0; list-style: none; }
ul#vertical-multilevel-menu li ul li ul li { border-bottom: 0 none; }
ul#vertical-multilevel-menu li.root-item-selected-li { display: block; }
ul#vertical-multilevel-menu li.root-item-selected-li > a { display: none; }
ul#vertical-multilevel-menu li.root-item-selected-li ul li { display: block; }
ul#vertical-multilevel-menu li.root-item-selected-li ul li a { display: block; }
ul#vertical-multilevel-menu li a { color: #0a447c; font-size: 13px; }
.selected_top { color: #a5a5a5 !important; text-decoration: none; }
.direct_selection { display: block; }
.direct_selection.selected_top { font-size: 13px; }

/* 8. Левая колонка и контент. На страницах с левым баннером (например /sertifikacija_iso/)
   колонка из-за него раздувалась до 278px, и сумма «колонка + контент» (278 + 692 = 970)
   переставала влезать в контейнер (967) — из-за этого .main_content падал вниз под колонку,
   и контент «уезжал» на полторы тысячи пикселей. Держим ширину колонки как на остальных
   страницах (262px), а баннер вписываем в неё. */
@media (min-width: 961px) {
  #content .aside, #second_block .aside { width: 262px !important; }
  #content .aside .left_banner { width: auto !important; max-width: 100% !important; }
  #content .aside .left_banner img { max-width: 100% !important; height: auto !important; }
}

/* 9. Баннеры в левой колонке — по центру колонки.
   Картинка-баннер в разметке вписана со сдвигом `margin-left:-15px` (наследие Flash-вставки) —
   убираем сдвиг и центрируем. Сам блок `.left_banner a` в инлайновом style задан шириной 278px
   (шире колонки 262px) — вписываем его в колонку, сохраняя пропорции картинки 278×367. */
#content .left_menu_block > div[style*="margin-left"] { margin-left: 0 !important; text-align: center; }
#content .left_menu_block > div[style*="margin-left"] img { display: block; margin: 0 auto !important; }
@media (min-width: 961px) {
  #content .aside .left_banner a {
    width: 262px !important; height: 346px !important;
    background-size: 100% 100% !important;
  }
}

/* 10. Страницы «в стадии разработки (наполнения)» (создаются скриптом bmc_заглушки.py) */
.bmc-wip { border: 1px solid #dfe5ea; border-left: 4px solid #8aa823; background: #f7f9f4;
           border-radius: 4px; padding: 18px 22px; margin: 6px 0 18px; }
.bmc-wip-badge { display: inline-block; background: #8aa823; color: #fff; font-size: 13px; font-weight: bold;
                 text-transform: uppercase; letter-spacing: .4px; padding: 5px 12px; border-radius: 3px;
                 margin-bottom: 12px; }
.bmc-wip p { font-size: 14px; color: #33414a; margin: 0 0 8px; }
.bmc-wip p:last-child { margin-bottom: 0; }

/* 11. Стрелки ‹ › у слайд-шоу (owl-buttons) — по просьбе заказчика не нужны.
   Гасим и стилями (на случай, если карусель успела их нарисовать), и в самом скрипте
   (navigation:false — см. bmc_слайдер_без_стрелок.py). Точки-пагинация остаются. */
.owl-buttons, .owl-prev, .owl-next { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/* ВАЖНО: раньше эти правила стояли ГЛОБАЛЬНО (вне медиа-запроса) и ломали десктоп:
   `img[width]{width:auto!important;height:auto!important}` сжимало картинку в её
   натуральный размер — на /kontakti/ картинка 431×301 (битый файл 1×1) превращалась
   в точку, и вся страница «проваливалась». Держим их только для узких экранов. */
@media (max-width: 1200px) {
  img, video { max-width: 100%; height: auto; }
  img[width], img[height] { width: auto !important; height: auto !important; max-width: 100%; }
  iframe, object, embed { max-width: 100%; }
}

@media (max-width: 1200px) {
  .uk-container, .wrapper, #wrapper, .b-wrapper { width: auto !important; max-width: 100% !important; padding-left: 14px; padding-right: 14px; }
  img, table, iframe, object, embed { max-width: 100%; }
  table { height: auto !important; }
  table:not(.uk-table) { width: 100% !important; }
}
@media (max-width: 960px) {
  .uk-navbar-container, .uk-navbar, #mainmenu, .top-menu, .b-topmenu { white-space: normal !important; }
  .uk-navbar-nav > li { float: none !important; display: block !important; }
  .uk-slider, .uk-slider-container, .uk-slideshow { max-width: 100% !important; }
  .uk-width-1-2\@l, .uk-width-1-3\@m, .uk-width-1-4\@l { width: 100% !important; }
}
@media (max-width: 640px) {
  td, th { display: block !important; width: auto !important; }
  td img, th img { display: block; margin: 0 auto; }
  h1 { font-size: 24px !important; } h2 { font-size: 20px !important; } h3 { font-size: 18px !important; }
  ins, iframe[width], object[width], embed[width] { width: 100% !important; height: auto !important; }
  img[width="500"], img[width="600"], img[width="614"], img[width="431"] { width: 100% !important; }
  table:not(.uk-table) { display: block; overflow-x: auto; }
}