/* ============================================================
   Адаптивный слой для tuchek.net
   Добавлен 2026-08-22. Подключается из headers.php, то есть
   действует на всех страницах сразу.

   Зачем: 83% кликов из Google приходят с телефонов (данные Search
   Console за 12 месяцев), а вёрстка была рассчитана на ~700px и
   на экране 374px требовала горизонтальной прокрутки. Google
   индексирует сайт мобильной версией, поэтому это напрямую
   влияло на позиции.

   Принцип: ничего не переписывать в HTML. Все правила действуют
   только при ширине экрана до 780px — вид на компьютере не
   меняется вообще.

   Проверено на: главная, /opm.htm, /hft/logoped.htm, /reviews.htm,
   /support.htm (таблица цен), /kontakti/, /tDCS.htm, /kids/intellect.htm.
   На всех: горизонтальной прокрутки нет, scrollWidth равен ширине экрана.

   Если правите файл — поднимите версию в ссылке в headers.php
   (mobile.css?v=1), иначе браузеры отдадут старую копию из кеша.
   ============================================================ */

@media (max-width: 780px) {

  /* 1. Жёсткие минимальные ширины — главная причина прокрутки.
        На части страниц min-width:700px стоял прямо на body. */
  html, body, td, th, table, div, p, span, video, center, section, article {
    min-width: 0 !important;
  }

  /* 2. Таблицы-раскладки: фиксированный алгоритм ширины.
        При table-layout:auto ширина таблицы не может стать меньше
        её min-content, и никакой width:100% её не удержит. */
  table {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
    border-spacing: 2px !important;
  }

  /* 3. Медиа не шире экрана.
        Намеренно без !important: у части картинок задан свой
        max-width (например, логотип 150px), и его надо уважать. */
  img, video, iframe, picture, object, embed, canvas { max-width: 100%; }
  img, video { height: auto; }
  video { max-width: 100% !important; }

  /* 4. Длинные неразрывные куски (декоративные строки из точек
        через  , длинные слова) должны переноситься.
        Именно anywhere, а не break-word: только он уменьшает
        расчётную минимальную ширину блока. */
  td, th, div, p, span, b, font, li, dir {
    overflow-wrap: anywhere !important;
  }
  nobr { white-space: normal !important; }

  /* 5. Раскладочные таблицы (border=0) — колонки в столбик.
        Таблицы с рамкой (цены, сравнения) не трогаем: там колонки
        несут смысл и должны остаться колонками.

        Исключение записано как :not([id="mainTable"]), а не
        :not(#mainTable), намеренно. Второй вариант добавляет
        правилу вес идентификатора, и тогда ни одно исключение
        ниже (пункты 12 и 13) его не перебивает без нагромождения
        селекторов. По совпадению элементов это одно и то же. */
  table[border="0"]:not([id="mainTable"]) > tbody > tr,
  table[border="0"]:not([id="mainTable"]) > tbody > tr > td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
  }
  table[border="0"]:not([id="mainTable"]) > tbody > tr > td > img,
  table[border="0"]:not([id="mainTable"]) > tbody > tr > td > picture > img {
    display: block;
    margin: 0 auto;
  }

  /* 6. Рамки и отступы: на 374px десятипиксельные cellspacing и
        cellpadding съедают заметную долю ширины. */
  .MsoNormalTable, .MsoTableShadowArround {
    border-spacing: 3px !important;
    box-sizing: border-box !important;
  }
  .MsoNormalTable > tbody > tr > td,
  .MsoTableShadowArround > tbody > tr > td { padding: 6px !important; }

  div.MsoTableShadowArround, div.MsoNormalTable, div.ThreeDBoxRound,
  div.dBox, div.ThreeDBox {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  .img-hover-zoom, .img-hover-zoom > * {
    width: auto !important;
    max-width: 100% !important;
  }
  dir, ul, ol, menu, blockquote {
    padding-left: 1em !important;
    margin-left: 0 !important;
  }

  /* 7. Заголовки: на главной они заданы инлайном в 19pt и 38pt,
        то есть до 50px — на телефоне это 5-6 символов в строку. */
  .seo-h font, h1 font, h2 font {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }

  /* 8. Поля форм (отзывы, обратный звонок) не шире экрана. */
  textarea, input, select, button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 9. Лента видеоотзывов прокручивается внутри себя,
        а не растягивает всю страницу. */
  .scrollmenu {
    width: auto !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 10. Блоки не шире экрана. Мобильное меню — исключение:
         оно позиционируется абсолютно и ширину считает само. */
  div { max-width: 100% !important; }
  #mainmenu, .menu_table { max-width: none !important; }
  /* Вертикальное меню стоит в left:10px, поэтому width:100% из
     правила 2 давало вылет на 10px за правый край экрана. Задать
     вместо этого точную ширину нельзя: показывая меню, скрипт
     ставит ему display:inline, таблица перестаёт быть таблицей,
     и заданная ширина растягивает только коричневую подложку —
     плашки пунктов остаются по содержимому, справа получается
     пустая полоса. Поэтому ширина по содержимому, как на
     компьютере, и потолок — экран. */
  #vmainmenu { width: auto !important; max-width: calc(100% - 20px) !important; }

  /* 12. Меню сайта — обратно табличная раскладка.

        Правило 5 раскладывало в столбик ячейки любой table[border=0],
        включая внутренние таблицы пунктов меню. Внутри пункта иконка
        вставала НАД подписью, содержимое вырастало с 51 до 69–79px
        при заданной пункту высоте 68px, вылезало за подложку и
        наезжало на соседний пункт. Подпись оказывалась в зоне
        следующего пункта, и палец попадал не туда.

        Возвращаем меню обычную табличную раскладку: иконка слева,
        подпись справа, всё внутри своей плашки. Ширина ячеек
        (иконка — по содержимому, подпись — остаток) повторяет
        поведение на компьютере, где иконки выстроены в колонку. */
  #vmainmenu, #mainmenu,
  #vmainmenu table[border="0"], #mainmenu table[border="0"] {
    table-layout: auto !important;
  }
  #vmainmenu table[border="0"], #mainmenu table[border="0"] {
    width: 100% !important;
    border-spacing: 0 !important;
  }
  #vmainmenu > tbody > tr,
  #mainmenu > tbody > tr,
  #vmainmenu table[border="0"] > tbody > tr,
  #mainmenu table[border="0"] > tbody > tr {
    display: table-row !important;
  }
  #vmainmenu > tbody > tr > td,
  #mainmenu > tbody > tr > td,
  #vmainmenu table[border="0"] > tbody > tr > td,
  #mainmenu table[border="0"] > tbody > tr > td {
    display: table-cell !important;
    vertical-align: middle !important;
  }
  #vmainmenu table[border="0"] > tbody > tr > td:first-child,
  #mainmenu table[border="0"] > tbody > tr > td:first-child {
    width: 1% !important;
    white-space: nowrap !important;
  }
  #vmainmenu table[border="0"] > tbody > tr > td + td,
  #mainmenu table[border="0"] > tbody > tr > td + td {
    width: 100% !important;
  }
  /* Иконка — рядом с подписью, а не отдельным блоком по центру
     (правило 5 делало её display:block; margin:0 auto). */
  #vmainmenu table[border="0"] > tbody > tr > td > img,
  #mainmenu table[border="0"] > tbody > tr > td > img {
    display: inline !important;
    margin: 0 4px !important;
  }

  /* 13. Подменю — позиционирует их скрипт, здесь только ширина.

        Раньше здесь стояло жёсткое смещение влево. Оно спасало от
        того, что подменю уезжало за правый край экрана, но ценой
        наложения: при 688px подменю 2-го уровня ложилось прямо на
        главное меню, а 3-й уровень — поверх 2-го и под всей его
        колонкой, так что мышью до него было не добраться.

        Теперь координаты считают show_menu2() и show_menu3() в
        left.php: подменю выпадает вправо от своего пункта и вровень
        с ним, а fit_menu_left() поджимает его, если не помещается в
        экран. Задавать смещение отсюда больше нельзя — !important
        перебьёт скрипт и всё вернётся к наложению.

        Ширина остаётся здесь: показывая подменю, скрипт ставит ему
        display:inline, таблица перестаёт быть таблицей, и заданная
        ширина растянула бы только подложку, а кнопки внутри всё
        равно жались бы по содержимому. Поэтому ширина по
        содержимому, потолок — экран. */
  .smenu, .ssmenu {
    width: auto !important;
    max-width: calc(100% - 20px) !important;
  }
  /* Подписи в пунктах подменю — по середине пункта.
     У ячеек задан vertical-align:middle и height:52px, но правило 5
     делает их display:block, а у блока vertical-align не работает —
     подпись прижималась к верхнему краю. Flex возвращает её на
     середину и заодно центрирует по горизонтали. Селектор с html
     нужен, чтобы перебить правило 5 по весу. */
  html table.smenu[border="0"] > tbody > tr > td,
  html table.ssmenu[border="0"] > tbody > tr > td {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 11. Страховка от остаточных нескольких пикселей. */
  html { overflow-x: hidden !important; }
  body { overflow-x: hidden !important; max-width: 100% !important; }
}

/* ============================================================
   Оформление SEO-заголовков.

   Эти правила продублированы здесь из main.css намеренно.
   main.css отдаётся с Cache-Control: max-age=315360000 (10 лет),
   поэтому у вернувшихся посетителей остаётся старая копия и новые
   классы до них не доходят — заголовки показались бы крупными и
   жирными, с чужими отступами. Файл mobile.css новый и
   подключается с версией (?v=1), значит доходит до всех сразу.

   .seo-h       — h1/h2/h3, вставленные внутрь существующей строки:
                  делаем инлайновыми и наследующими все стили.
   .seo-h-block — заголовок, заменивший собой абзац <p class=MsoNormal>:
                  повторяем оформление этого абзаца.
   ============================================================ */

h1.seo-h, h2.seo-h, h3.seo-h {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  font-style: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: inherit;
}

h1.seo-h-block {
  display: block;
  margin: 0cm;
  margin-bottom: .0001pt;
  padding: 0;
  font-size: 13.0pt;
  font-family: "Arial";
  font-weight: normal;
  font-style: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
}

/* ============================================================
   Блок .dx — оформление переписанных страниц по диагнозам.
   Добавлено 2026-08-23.

   Почему здесь, а не в main.css: main.css отдаётся nginx'ом с
   Cache-Control: max-age=315360000, и у вернувшихся посетителей
   остаётся копия десятилетней давности — новые классы до них не
   дойдут. mobile.css подключается с версией (?v=6), значит
   обновится у всех сразу.

   Правила намеренно ограничены селектором .dx: на старых
   страницах с вордовской вёрсткой они не действуют.
   ============================================================ */

.dx {
  font-family: Arial, sans-serif;
  font-size: 13.0pt;
  line-height: 1.55;
  color: #202020;
  text-align: left;
}
.dx p { margin: 0 0 0.9em 0; }
.dx h1 {
  display: block;
  font-size: 22.0pt;
  line-height: 1.2;
  font-weight: bold;
  color: #800000;
  margin: 0.1em 0 0.55em 0;
  padding: 0;
}
.dx h2 {
  display: block;
  font-size: 16.0pt;
  line-height: 1.25;
  font-weight: bold;
  color: #800000;
  margin: 1.5em 0 0.5em 0;
  padding: 0;
}
.dx h3 {
  display: block;
  font-size: 13.5pt;
  line-height: 1.3;
  font-weight: bold;
  color: #43301a;
  margin: 1.2em 0 0.35em 0;
  padding: 0;
}
.dx ul, .dx ol { margin: 0.2em 0 1em 0; padding-left: 1.6em; }
.dx li { margin-bottom: 0.45em; }
.dx a { color: #0033aa; }
.dx a:visited { color: #553388; }

.dx-lead { font-size: 14.5pt; line-height: 1.5; }

/* Врезка: то, что стоит заметить, даже если читают по диагонали. */
.dx-note {
  background: #fffbe8;
  border-left: 4px solid #d4a017;
  border-radius: 6px;
  padding: 0.8em 1em;
  margin: 1.2em 0;
}
.dx-note p:last-child { margin-bottom: 0; }

/* Призыв к действию — единственное место на странице с красной рамкой. */
.dx-cta {
  background: #fff5f5;
  border: 2px solid #cc0000;
  border-radius: 10px;
  padding: 1em 1.2em;
  margin: 1.8em 0 1.2em 0;
}
.dx-cta p { margin: 0 0 0.6em 0; }
.dx-cta p:last-child { margin-bottom: 0; }
.dx-cta-h { font-size: 15.0pt; color: #800000; }
.dx-btn, .dx-btn:link, .dx-btn:visited {
  display: inline-block;
  background: #cc0000;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  padding: 0.55em 1.3em;
  border-radius: 6px;
  margin: 0.2em 0.4em 0.2em 0;
}
.dx-btn:hover, .dx-btn:active { background: #a30000; }
.dx-btn2, .dx-btn2:link, .dx-btn2:visited { background: #6b4a1f; }
.dx-btn2:hover, .dx-btn2:active { background: #4d3415; }

.dx-q { color: #800000; }

.dx-rel { margin: 0.2em 0 1em 0; }

.dx-src {
  font-size: 10.5pt;
  line-height: 1.45;
  color: #555555;
  border-top: 1px solid #c9bda6;
  padding-top: 0.8em;
  margin-top: 1.8em;
}

.dx-tbl { border-collapse: collapse; width: 100%; margin: 1em 0; }
.dx-tbl th, .dx-tbl td {
  border: 1px solid #c9bda6;
  padding: 0.5em 0.6em;
  text-align: left;
  vertical-align: top;
  font-size: 12.0pt;
  line-height: 1.45;
}
.dx-tbl th { background: #f6efe0; font-weight: bold; }

@media (max-width: 780px) {
  .dx { font-size: 11.5pt; }
  .dx h1 { font-size: 17.0pt; }
  .dx h2 { font-size: 13.5pt; }
  .dx h3 { font-size: 12.0pt; }
  .dx-lead { font-size: 12.5pt; }
  .dx-cta-h { font-size: 13.0pt; }
  .dx ul, .dx ol { padding-left: 1.2em; }
  .dx-tbl th, .dx-tbl td { font-size: 10.5pt; padding: 0.4em; }

  /* Длинные слова в узких ячейках: при table-layout:fixed колонка не может
     расшириться под слово, поэтому разрешаем перенос внутри слова. Иначе
     «звуконаслідування» в колонке шириной ~90px вылезает за границу ячейки. */
  .dx, .dx p, .dx li, .dx td, .dx th, .dx h1, .dx h2, .dx h3 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
  .dx-btn, .dx-btn:link, .dx-btn:visited { display: block; text-align: center; margin: 0.35em 0; }
}


/* ============================================================
   ПРАЙС-ТАБЛИЦЫ (support.htm, класс .cost-table)

   Обе таблицы цен свёрстаны атрибутами: у колонок с ценой стоит
   width="150". Правило 2 выше включает table-layout:fixed, и при
   ширине экрана 380px браузер честно отдаёт этим колонкам по 162px —
   на первую колонку во второй таблице (три колонки) не остаётся
   ничего, её расчётная ширина 0px, и текст «Вид услуг» вставал
   по одной букве в строку.

   До 780px: снимаем width с ячеек и задаём доли — первая колонка
   половина, остальные делят остаток поровну (так распределяет
   fixed-раскладка). До 560px этого мало: цены живут в колонках
   по 75px, а шапка ломается посреди слов. Поэтому строки
   раскладываются карточками — описание услуги во всю ширину,
   под ним цены с подписями. Подписи берутся из data-label
   на ячейках; шапка при этом прячется, её текст продублирован
   в data-label — включая звёздочку сноски про курс НБУ.
   ============================================================ */

@media (max-width: 780px) {
  /* width="150" на ячейках — атрибут, любой CSS его перебивает. */
  .cost-table > tbody > tr > td { width: auto !important; padding: 5px !important; }
  .cost-table > tbody > tr > td:first-child { width: 50% !important; }
  /* text-indent:27pt в узкой колонке съедает первую строку. */
  .cost-table p { text-indent: 0 !important; text-align: left !important; }
}

@media (max-width: 560px) {
  .cost-table,
  .cost-table > tbody,
  .cost-table > tbody > tr,
  .cost-table > tbody > tr > td {
    display: block !important;
    width: auto !important;
  }
  /* Ширину первой колонки из блока выше тоже снимаем: при display:block
     она резала описание услуги пополам. */
  .cost-table > tbody > tr > td:first-child { width: auto !important; }

  .cost-table { border: 0 !important; background: none !important; }
  .cost-table > tbody > tr:first-child { display: none !important; }   /* шапка */

  .cost-table > tbody > tr {
    border: 1px solid #d00 !important;
    margin: 0 0 10px 0 !important;
    padding: 7px 9px !important;
  }
  .cost-table > tbody > tr > td {
    border: 0 !important;
    padding: 0 !important;
    text-align: left !important;   /* перебивает align="center" на ячейке */
  }
  .cost-table > tbody > tr > td + td {
    border-top: 1px dotted #c8a06a !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
  }
  .cost-table td[data-label]::before {
    content: attr(data-label) ": ";
    font-family: Arial, sans-serif;
    font-size: 10.5pt;
    color: #5a4632;
  }
  /* <center> внутри ячейки — блок, иначе подпись уезжает на свою строку. */
  .cost-table > tbody > tr > td center { display: inline !important; text-align: left !important; }
  .cost-table p { margin: 0 !important; }
}


/* ============================================================
   СКРОЛЛЕР ОТЗЫВОВ («Отзывы о нас в соцсетях»)

   Блок приходит из инклудов scroll_reviews3.php (главная) и
   {kids,school,intellect}/scroll_reviews_intellect.php — 8 страниц
   в двух языковых версиях. Каркас там один и тот же: таблица из
   трёх ячеек, по краям png-стрелки 30x100 в ячейках width="55px",
   в середине div#responces с лентой скриншотов и видео.

   Что было на узком экране:
   — 110px из ~360px съедали боковые ячейки со стрелками, лента
     оставалась шириной с ладонь;
   — png-стрелки при opacity:0.3 выглядели грязными пятнами и не
     имели курсора-указателя;
   — правило 9 выше включает ленте overflow-x:auto, полоса
     прокрутки появлялась, но пролистать не давала: скрипт в
     инклуде каждые 100 мс возвращал scrollLeft на своё место.
     Это чинится в reviews_scroll.js, здесь только оформление.

   Классы rv-* навешивает reviews_scroll.js: .rv-shell на таблицу,
   .rv-arrow-cell на боковые ячейки, .rv-strip на саму ленту,
   .rv-wrap — обёртка-контейнер под кнопки поверх ленты.
   ============================================================ */

/* Лента листается пальцем и мышью на любой ширине. В инклудах
   стоит overflow-x:hidden — перебиваем, иначе тянуть нечего. */
div.rv-strip {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(90, 70, 50, .45) transparent;
}
div.rv-strip::-webkit-scrollbar { height: 6px; }
div.rv-strip::-webkit-scrollbar-track { background: transparent; }
div.rv-strip::-webkit-scrollbar-thumb {
  background: rgba(90, 70, 50, .35);
  border-radius: 3px;
}
div.rv-strip::-webkit-scrollbar-thumb:hover { background: rgba(90, 70, 50, .6); }

.rv-wrap { position: relative; }

/* Тап/клик по ролику запускает и останавливает его —
   см. tapToggle() в reviews_scroll.js. */
div.rv-strip video { cursor: pointer; }

/* Круглые кнопки поверх ленты — только на узких экранах,
   на десктопе остаются штатные png-стрелки по краям таблицы. */
.rv-nav { display: none; }

/* Штатные стрелки: были без курсора и слишком бледные.
   opacity через !important — в инклудах есть своё
   .scroll_img{opacity:0.3}, и оно идёт по документу ниже. */
.scroll_img { cursor: pointer; opacity: .5 !important; }
.scroll_img:hover { opacity: .85 !important; }

@media (max-width: 780px) {
  /* Боковые ячейки со стрелками убираем — лента забирает ширину.
     Селекторы намеренно длинные: правило про
     table[border="0"] > tbody > tr > td выше раскладывает такие
     таблицы в столбик через display:block !important и по
     специфичности бьёт простое .rv-arrow-cell — из-за него
     png-стрелки вставали блоками над лентой и под ней. */
  table.rv-shell { width: 100% !important; max-width: 100% !important; }
  table.rv-shell > tbody > tr > td.rv-arrow-cell { display: none !important; }
  table.rv-shell > tbody > tr > td { padding: 0 !important; }

  /* Картинки и видео в ленте.
     Правило 3 в начале файла (img, video { height: auto }) снимает
     с них height="100%" — это всего лишь атрибут-подсказка, любой
     CSS его бьёт. Дальше max-width:100% растягивает скриншот на всю
     ширину ленты: 364x788 при высоте контейнера 290px, то есть
     видно только верхушку отзыва, а низ обрезан.

     Возвращаем «по высоте ленты», как на десктопе. Но при высоте
     290px от вертикального скриншота чата (739x1600) остаётся
     полоска шириной 134px, в которой ничего не разобрать, поэтому
     на узком экране лента становится выше: 60vh, но не ниже 300px
     и не выше 500px. На экране 390x844 отзыв выходит 226x490 —
     один целиком и край следующего, как и положено карусели.

     Ограничение идёт по обеим сторонам (height:auto, max-width и
     max-height по 100%), а не только по высоте. Отзывы-скриншоты
     вертикальные, им упирается высота, а вот ролики в ленте
     горизонтальные: при height:100% ролик выходил 871x490 — вдвое
     шире ленты, и штатные кнопки play/pause по краям оказывались
     за экраном. Теперь ролик вписывается: 364x205 на экране 390px.
     vertical-align:middle центрирует его по высоте ленты; высоту
     строки задают скриншоты во всю высоту, поэтому лишнего
     вертикального обреза не появляется. */
  div.rv-strip {
    width: 100% !important;
    max-width: 100% !important;
    height: 60vh !important;
    min-height: 300px;
    max-height: 500px;
    padding-bottom: 6px;
  }
  div.rv-strip img,
  div.rv-strip video,
  div.rv-strip picture > img {
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    vertical-align: middle;
  }

  /* Попап с увеличенным отзывом (главная, #magn). Скрипт инклуда
     ставит ему ширину «вдвое больше показанной» — на телефоне это
     462px при экране 374px, картинка вылезала за края. На узком
     экране вписываем её в экран: так отзыв и читают. */
  #popup_magnified_scroll { max-width: 96vw !important; max-height: 92vh !important; }
  #popup_magnified_scroll img {
    width: auto !important;
    height: auto !important;
    max-width: 96vw !important;
    max-height: 92vh !important;
  }

  .rv-nav {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -21px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    cursor: pointer;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
  }
  .rv-nav:active { background: #fff; }
  .rv-prev { left: 3px; }
  .rv-next { right: 3px; }

  /* Галочка из двух границ — не зависит от шрифта. */
  .rv-nav .rv-chev {
    display: block;
    width: 11px;
    height: 11px;
    border-left: 3px solid #a02020;
    border-bottom: 3px solid #a02020;
  }
  .rv-prev .rv-chev { transform: rotate(45deg);   margin: 0 0 0 17px; }
  .rv-next .rv-chev { transform: rotate(-135deg); margin: 0 0 0 13px; }
}