/* Мобильная версия eurofootball (решение заказчика 25.09): вёрстка 2016 года на 1000 px, колонки float.
   До 820 px: колонки друг под другом, меню и полоса клубов прокручиваются пальцем вбок внутри себя,
   картинки и таблицы по ширине экрана, широкие таблицы статистики — с прокруткой внутри блока. */
@media (max-width: 820px) {
  body { overflow-x: hidden; -webkit-text-size-adjust: 100%; background-size: auto; }
  #page { width: auto !important; top: 0 !important; margin: 0 !important; }
  #page div, #page ul, #page dl, #page form, #page table, #page iframe, #page img { max-width: 100%; box-sizing: border-box; }
  /* верхнее меню, основное меню, полоса клубов — одной строкой с прокруткой */
  #topmenu { overflow-x: auto; white-space: nowrap; height: auto !important; -webkit-overflow-scrolling: touch; }
  #topmenu .social { display: none; }
  /* основное меню: пункты в строку с переносом, выпадающие списки — по нажатию, под пунктом */
  #main-menu { height: auto !important; padding: 4px 4px 6px; text-align: center; }
  #main-menu .menu > li { float: none !important; display: inline-block !important; padding: 4px 8px !important; }
  #main-menu .menu > li:hover { display: block !important; }
  #main-menu [class*="dropdown"] { position: static !important; width: auto !important; left: auto !important; right: auto !important;
                                   margin-top: 6px; text-align: left; }
  #main-menu .triangle { display: none !important; }
  #main-menu .menu > li > [class*="dropdown"] { display: none !important; }
  #main-menu .menu > li:hover > [class*="dropdown"], #main-menu .menu > li:focus-within > [class*="dropdown"] { display: block !important; }
  #header { height: auto !important; min-height: 60px; }
  #header .logotype { position: relative !important; left: auto !important; top: auto !important; margin: 8px 12px;
                      width: 260px !important; max-width: 85%; height: 62px !important; background-size: contain !important; }
  #header .logotype a, #header .logotype-link { position: relative !important; background-size: contain; background-repeat: no-repeat; max-width: 100%; }
  #clubs { height: auto !important; overflow-x: auto; white-space: nowrap; padding-bottom: 4px; }
  #clubs > a { float: none !important; display: inline-block; }
  #clubs form.search { position: static !important; display: block; width: auto !important; padding: 6px 8px; white-space: normal; }
  #clubs form.search span { display: none; }
  #clubs form.search input[type=text] { width: 80% !important; }
  /* колонки */
  #container, #content, #rightside-1, #rightside-2, #article, #match-container, #match-page, #match, #match-content,
  #foot1, #foot2, #foot3, #foot4, .years-tournament-area, #menu-sub, .article-main, .double-article, .article-list,
  .block-area, #article .data, #article .tags, #article .social, #article .back {
    float: none !important; width: auto !important; left: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
  #content, #rightside-1, #article, #match-container { padding: 0 8px !important; }
  #rightside-1 { margin-top: 16px !important; }
  /* карточки анонсов: по две в ряд */
  .double-article { overflow: hidden; }
  .double-article > a { width: 48% !important; margin: 0 1% !important; }
  .double-article > a img, .article-main img, #video .data img { width: 100% !important; height: auto !important; }
  #video .data > a, #video .data > a.main { width: 48% !important; margin: 0 1% 8px !important; }
  #video .data > a.main { width: 98% !important; }
  /* материал */
  #article h1 { font-size: 22px; line-height: 1.25; }
  #article .html img, #article img { height: auto !important; }
  #article .html table, #page .data table { width: 100% !important; }
  /* широкие таблицы (турниры, составы, статистика) — прокрутка внутри блока */
  #match-page, .years-tournament-area, #menu-sub, .data, .block-area { overflow-x: auto; }
  .years-tournament-area > div { width: auto !important; }
  #menu-sub { white-space: nowrap; }
  #menu-sub li { float: none !important; display: inline-block; }
  /* страницы клуба/игрока/матча: вкладки в строку с переносом, шапка сущности в колонку */
  #club, .club_tabs { width: auto !important; float: none !important; }
  .club_tabs > ul > li { float: none !important; display: inline-block !important; padding: 4px 8px !important; margin: 0 2px 4px 0; }
  table.info-general, table.info-general > tbody, table.info-general tr, table.info-general td { display: block; width: auto !important; text-align: left !important; }
  table.info-general p { width: auto !important; }
  table.info-general h1 { font-size: 20px; }
  #footer { height: auto !important; padding: 12px 8px !important; }
  #footer p, #footer dl, #footer dd, #footer dt { width: auto !important; }
  #footer:after { content: ""; display: block; clear: both; }
}

/* 01.10: проверка «каждой страницы» на телефоне */
@media (max-width: 820px) {
  /* страница клуба/турнира: карточка клуба сверху, вкладки кнопками, под ними — содержимое открытой вкладки
     (на десктопе содержимое вкладок абсолютно позиционировано — на телефоне блоки налезали друг на друга) */
  .club_tabs { display: flex !important; flex-direction: column; }
  .club_tabs > table.info-general { order: -1; margin-bottom: 10px; }
  .club_tabs > ul { display: flex !important; flex-wrap: wrap; height: auto !important; padding: 0 !important; margin: 0 0 8px !important; }
  .club_tabs > ul > li { display: contents !important; }
  .club_tabs > ul > li > span { order: 0; display: inline-block; padding: 6px 10px; margin: 0 4px 4px 0; background: #eee; border-radius: 3px;
    font-size: 12px; cursor: pointer; }
  .club_tabs > ul > li.curr-tab > span { background: #c8102e; color: #fff; }
  .club_tabs > ul > li > div { display: none !important; }
  .club_tabs > ul > li.curr-tab > div { display: block !important; order: 1; flex: 0 0 100%; position: static !important;
    width: auto !important; height: auto !important; left: auto !important; top: auto !important; overflow-x: auto !important; }
  table.info-general td.coach p { width: auto !important; }
  /* меню в бургер-панели */
  .m-navpanel #topmenu { white-space: normal !important; overflow: visible !important; padding: 4px 10px !important; }
  .m-navpanel #topmenu a { display: inline-block; padding: 5px 6px; }
  .m-navpanel #main-menu { padding: 4px 6px 8px !important; }
}
@media (max-width: 820px) {
  /* список статей: у карточек без ссылки (материал не сохранился) img и div идут отдельно — ровняем как у остальных */
  .article-list > img { float: left !important; clear: left; width: 120px !important; height: auto !important; margin: 0 10px 10px 0 !important; }
  .article-list > div { overflow: hidden; margin-bottom: 10px; }
  .article-list > a { display: block; overflow: hidden; clear: both; margin-bottom: 10px; }
  .article-list > a > img { float: left !important; width: 120px !important; height: auto !important; margin: 0 10px 0 0 !important; }
}