/* ПЕРЕДЕЛКА FIXED-HEADER-TOP-MAIN */
/* После перевода всех шапок на новые стили старый top-main можно будет удалить */
/* Задаёт стандартный фон на всю ширину шапки, а также высоту */
.fh2-top-content {
  position: relative;
  /* Для fh-bb */
  background-color: white;
  height: 61px;
  line-height: 61px;
}
@media (max-width: 567px) {
  .fh2-top-content {
    background-color: #e5e5e5;
    height: calc(100vw / 320.0 * 460.0 / 8.0);
    line-height: calc(100vw / 320.0 * 460.0 / 8.0);
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-top-content {
    background-color: #e5e5e5;
    height: calc(100vw / 568.0 * 320.0 / 8.0);
    line-height: calc(100vw / 568.0 * 320.0 / 8.0);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fh2-top-content {
    height: calc(100vw / 768.0 * 924.0 / 16.0);
    line-height: calc(100vw / 768.0 * 924.0 / 16.0);
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fh2-top-content {
    height: calc(100vw / 1024.0 * 668.0 / 12.0);
    line-height: calc(100vw / 1024.0 * 668.0 / 12.0);
  }
}
/* Добавляет серую полоску внизу для десктопа */
.fh2-top-content.fh2-bb:before {
  content: '';
  display: block;
  background-color: #a3a3a3;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
}
@media (max-width: 567px) {
  .fh2-top-content.fh2-bb:before {
    display: none;
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-top-content.fh2-bb:before {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fh2-top-content.fh2-bb:before {
    display: none;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fh2-top-content.fh2-bb:before {
    display: none;
  }
}
/* Основной контейнер для большинства шапок, настраивает ширину и выравнивание по центру десктопа */
.fh2-top-main {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  /* Для позиционирования вложенных элементов */
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-left: 300px;
  height: inherit;
  line-height: inherit;
  /* Модификатор для десктопа, занимающий всю ширину начиная от правого края логотипа */
}
@media (max-width: 567px) {
  .fh2-top-main {
    padding-left: 0;
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-top-main {
    padding-left: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fh2-top-main {
    padding-left: 0;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fh2-top-main {
    padding-left: 0;
  }
}
.fh2-top-main.full-width {
  padding-left: 200px;
}
@media (max-width: 567px) {
  .fh2-top-main.full-width {
    padding-left: 0;
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-top-main.full-width {
    padding-left: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fh2-top-main.full-width {
    padding-left: 0;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fh2-top-main.full-width {
    padding-left: 0;
  }
}
.fh2-top-content.fh2-bb > .fh2-top-main {
  /* Уменьшаем высоту контента, оставляя отступ под серую полоску снизу */
  height: 55px;
  line-height: 55px;
}
@media (max-width: 567px) {
  .fh2-top-content.fh2-bb > .fh2-top-main {
    height: inherit;
    line-height: inherit;
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-top-content.fh2-bb > .fh2-top-main {
    height: inherit;
    line-height: inherit;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fh2-top-content.fh2-bb > .fh2-top-main {
    height: inherit;
    line-height: inherit;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fh2-top-content.fh2-bb > .fh2-top-main {
    height: inherit;
    line-height: inherit;
  }
}
/* fh2-cont — просто пустой контейнер без стилей для более тонкого позиционирования кнопок */
.fh2-cont,
.fh2-item {
  box-sizing: border-box;
  /* При active под элементом торчит оранжевая полоска */
  overflow: visible;
  position: relative;
  /* fallback для доисторических браузеров */
  white-space: nowrap;
  vertical-align: top;
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  /* У нас дизайн строго по сеточке, так что запрещаем самодеятельность флексов */
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
/* Основная кнопка в шапке, имеет разделительные линии */
/* (fh2-item тоже могут быть вложены друг в друга, это используется в шапках машинной вышивки) */
.fh2-item {
  white-space: normal;
  /* Для позиционирования внутренних элементов по ширине */
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: center;
  justify-content: center;
  /* reset <a>, <li>, <input> and <button> styles */
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  text-decoration: none;
  color: inherit;
  background-color: transparent;
  font-size: 16px;
  text-align: center;
  /* Разделительные полоски по бокам */
  border-right: 1px solid #b3b3b3;
  /* Ниже перечисляются опциональные модификаторы */
  /* Отключение стандартной полоски справа */
  /* Добавление полоски слева (полезно если слева угнетающая пустота) */
  /* Подсветка активного элемента полоской внизу (на десктопах) */
  /* Подсветка активного элемента фоном (на мобильниках) */
  /* Отсутствие контента (элемент просто занимает место в шапке) */
}
@media (max-width: 567px) {
  .fh2-item {
    border-right: 0;
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-item {
    border-right: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fh2-item {
    border-right: 0;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fh2-item {
    border-right: 0;
  }
}
.fh2-item.no-hr-right {
  border-right: 0;
}
.fh2-item.hr-left {
  border-left: 1px solid #b3b3b3;
}
@media (max-width: 567px) {
  .fh2-item.hr-left {
    border-left: 0;
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-item.hr-left {
    border-left: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fh2-item.hr-left {
    border-left: 0;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fh2-item.hr-left {
    border-left: 0;
  }
}
.fh2-item.active:after {
  content: '';
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 6px;
  background-color: #f4b542;
}
@media (max-width: 567px) {
  .fh2-item.active:after {
    display: none;
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-item.active:after {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fh2-item.active:after {
    display: none;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fh2-item.active:after {
    display: none;
  }
}
@media (max-width: 567px) {
  .fh2-item.active {
    background-color: #e1e1e1;
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-item.active {
    background-color: #e1e1e1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fh2-item.active {
    background-color: #e1e1e1;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fh2-item.active {
    background-color: #e1e1e1;
  }
}
.fh2-item.hidden {
  visibility: hidden;
  pointer-events: none;
}
/* Ещё всякие специфичные стили */
@media (max-width: 567px) {
  .fh2-item.mp-whitebg {
    background-color: white;
  }
  .fh2-item.mp-darkbg {
    background-color: #c7c7c7;
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-item.ml-whitebg {
    background-color: white;
  }
  .fh2-item.ml-darkbg {
    background-color: #c7c7c7;
  }
}
/* Подсветка элемента, на который наведён курсор мыши */
a.fh2-item,
button.fh2-item,
.fh2-hoverable {
  cursor: pointer;
}
a.fh2-item:hover,
button.fh2-item:hover,
.fh2-hoverable:hover {
  background-color: #f1f1f1;
}
/* Для корректного выравнивания текста внутри кнопки */
.fh2-item-text {
  line-height: 1.25;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-align-self: center;
  align-self: center;
}
/* Выравнивание по правому краю */
.fh2-spacer {
  margin-left: auto;
}
/* Ширина элементов */
/* Полностью скрытый элемент */
.fh2-col-none {
  display: none;
}
/* Заполняет всю доступную ширину */
.fh2-col-grow {
  width: 0;
  flex-grow: 1;
  flex-shrink: 1;
}
.fh2-col2 {
  width: 50%;
}
.fh2-col3 {
  width: 33.33%;
  width: calc(100% / 3);
}
.fh2-col300px {
  width: 300px;
}
.fh2-col5 {
  width: 20%;
}
.fh2-col6 {
  width: 16.66%;
  width: calc(100% / 6);
}
.fh2-col10 {
  width: 10%;
}
.fh2-col3-span2 {
  /* Частый частный случай */
  width: 66.66%;
  width: calc(100% * 2 / 3);
}
.fh2-col8 {
  width: 100px;
  /* Так надо для дизайна десктопа */
}
@media (max-width: 567px) {
  .fh2-col8 {
    width: 12.5%;
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-col8 {
    width: 12.5%;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fh2-col8 {
    width: 12.5%;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fh2-col8 {
    width: 12.5%;
  }
}
/* То же самое, но с возможностью выбрать отдельные размеры для отдельных версий */
@media (max-width: 567px) {
  .fh2-mp-col-none {
    display: none;
  }
  .fh2-mp-col-grow {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
  }
  .fh2-mp-col2 {
    width: 50%;
  }
  .fh2-mp-col3 {
    width: 33.33%;
    width: calc(100% / 3);
  }
  .fh2-mp-col5 {
    width: 20%;
  }
  .fh2-mp-col6 {
    width: 16.66%;
    width: calc(100% / 6);
  }
  .fh2-mp-col8 {
    width: 12.5%;
  }
  .fh2-mp-col10 {
    width: 10%;
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-ml-col-none {
    display: none;
  }
  .fh2-ml-col-grow {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
  }
  .fh2-ml-col2 {
    width: 50%;
  }
  .fh2-ml-col3 {
    width: 33.33%;
    width: calc(100% / 3);
  }
  .fh2-ml-col5 {
    width: 20%;
  }
  .fh2-ml-col6 {
    width: 16.66%;
    width: calc(100% / 6);
  }
  .fh2-ml-col8 {
    width: 12.5%;
  }
  .fh2-ml-col10 {
    width: 10%;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fh2-tp-col-none {
    display: none;
  }
  .fh2-tp-col-grow {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
  }
  .fh2-tp-col2 {
    width: 50%;
  }
  .fh2-tp-col3 {
    width: 33.33%;
    width: calc(100% / 3);
  }
  .fh2-tp-col5 {
    width: 20%;
  }
  .fh2-tp-col6 {
    width: 16.66%;
    width: calc(100% / 6);
  }
  .fh2-tp-col8 {
    width: 12.5%;
  }
  .fh2-tp-col10 {
    width: 10%;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fh2-tl-col-none {
    display: none;
  }
  .fh2-tl-col-grow {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
  }
  .fh2-tl-col2 {
    width: 50%;
  }
  .fh2-tl-col3 {
    width: 33.33%;
    width: calc(100% / 3);
  }
  .fh2-tl-col5 {
    width: 20%;
  }
  .fh2-tl-col6 {
    width: 16.66%;
    width: calc(100% / 6);
  }
  .fh2-tl-col8 {
    width: 12.5%;
  }
  .fh2-tl-col10 {
    width: 10%;
  }
}
/* И ещё размеры под сеточки мобильных версий */
@media (max-width: 567px) {
  .fh2-col-mp1 {
    width: calc(100vw / 6.0 * 1);
  }
  .fh2-col-mp2 {
    width: calc(100vw / 6.0 * 2);
  }
  .fh2-col-mp3 {
    width: calc(100vw / 6.0 * 3);
  }
  .fh2-col-mp4 {
    width: calc(100vw / 6.0 * 4);
  }
  .fh2-col-mp5 {
    width: calc(100vw / 6.0 * 5);
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-col-ml1 {
    width: calc(100vw / 12.0 * 1);
  }
  .fh2-col-ml2 {
    width: calc(100vw / 12.0 * 2);
  }
  .fh2-col-ml3 {
    width: calc(100vw / 12.0 * 3);
  }
  .fh2-col-ml4 {
    width: calc(100vw / 12.0 * 4);
  }
  .fh2-col-ml5 {
    width: calc(100vw / 12.0 * 5);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fh2-col-tp1 {
    width: calc(100vw / 12.0 * 1);
  }
  .fh2-col-tp2 {
    width: calc(100vw / 12.0 * 2);
  }
  .fh2-col-tp3 {
    width: calc(100vw / 12.0 * 3);
  }
  .fh2-col-tp4 {
    width: calc(100vw / 12.0 * 4);
  }
  .fh2-col-tp5 {
    width: calc(100vw / 12.0 * 5);
  }
  .fh2-col-tp6 {
    width: calc(100vw / 12.0 * 6);
  }
  .fh2-col-tp7 {
    width: calc(100vw / 12.0 * 7);
  }
  .fh2-col-tp8 {
    width: calc(100vw / 12.0 * 8);
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fh2-col-tl1 {
    width: calc(100vw / 16.0 * 1);
  }
  .fh2-col-tl2 {
    width: calc(100vw / 16.0 * 2);
  }
  .fh2-col-tl3 {
    width: calc(100vw / 16.0 * 3);
  }
  .fh2-col-tl4 {
    width: calc(100vw / 16.0 * 4);
  }
  .fh2-col-tl5 {
    width: calc(100vw / 16.0 * 5);
  }
  .fh2-col-tl6 {
    width: calc(100vw / 16.0 * 6);
  }
  .fh2-col-tl7 {
    width: calc(100vw / 16.0 * 7);
  }
  .fh2-col-tl8 {
    width: calc(100vw / 16.0 * 8);
  }
}
/* Стрелки «Назад» и «Вперёд» с автозаменой на иконку */
.fh2-item.fh2-link-back,
.fh2-item.fh2-link-back-double,
.fh2-item.fh2-link-next,
.fh2-item.fh2-link-next-double {
  width: 100px;
}
@media (max-width: 567px) {
  .fh2-item.fh2-link-back,
  .fh2-item.fh2-link-back-double,
  .fh2-item.fh2-link-next,
  .fh2-item.fh2-link-next-double {
    width: calc(100vw / 6.0);
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-item.fh2-link-back,
  .fh2-item.fh2-link-back-double,
  .fh2-item.fh2-link-next,
  .fh2-item.fh2-link-next-double {
    width: calc(100vw / 12.0);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fh2-item.fh2-link-back,
  .fh2-item.fh2-link-back-double,
  .fh2-item.fh2-link-next,
  .fh2-item.fh2-link-next-double {
    width: calc(100vw / 12.0 * 2);
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fh2-item.fh2-link-back,
  .fh2-item.fh2-link-back-double,
  .fh2-item.fh2-link-next,
  .fh2-item.fh2-link-next-double {
    width: calc(100vw / 16.0 * 2);
  }
}
@media (max-width: 567px) {
  .fh2-item.fh2-link-back .fh2-item-text,
  .fh2-item.fh2-link-back-double .fh2-item-text,
  .fh2-item.fh2-link-next .fh2-item-text,
  .fh2-item.fh2-link-next-double .fh2-item-text {
    display: none;
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-item.fh2-link-back .fh2-item-text,
  .fh2-item.fh2-link-back-double .fh2-item-text,
  .fh2-item.fh2-link-next .fh2-item-text,
  .fh2-item.fh2-link-next-double .fh2-item-text {
    display: none;
  }
}
.fh2-item.fh2-link-back:before,
.fh2-item.fh2-link-back-double:before,
.fh2-item.fh2-link-next:before,
.fh2-item.fh2-link-next-double:before {
  font-family: FontAwesome;
  font-size: 1.5em;
}
.fh2-item.fh2-link-back:before {
  /* fa-angle-left */
}
@media (max-width: 567px) {
  .fh2-item.fh2-link-back:before {
    content: '\f104';
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-item.fh2-link-back:before {
    content: '\f104';
  }
}
.fh2-item.fh2-link-back-double:before {
  /* fa-angle-double-left */
}
@media (max-width: 567px) {
  .fh2-item.fh2-link-back-double:before {
    content: '\f100';
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-item.fh2-link-back-double:before {
    content: '\f100';
  }
}
.fh2-item.fh2-link-next:before {
  /* fa-angle-right */
}
@media (max-width: 567px) {
  .fh2-item.fh2-link-next:before {
    content: '\f105';
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-item.fh2-link-next:before {
    content: '\f105';
  }
}
.fh2-item.fh2-link-next-double:before {
  /* fa-angle-double-right */
}
@media (max-width: 567px) {
  .fh2-item.fh2-link-next-double:before {
    content: '\f101';
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-item.fh2-link-next-double:before {
    content: '\f101';
  }
}
/* Кнопка «Меню», просто заранее заданная ширина */
.fh2-item.fh2-link-menu {
  width: 100px;
}
@media (max-width: 567px) {
  .fh2-item.fh2-link-menu {
    width: calc(100vw / 6.0 * 2);
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-item.fh2-link-menu {
    width: calc(100vw / 12.0 * 3);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fh2-item.fh2-link-menu {
    width: calc(100vw / 12.0 * 2);
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fh2-item.fh2-link-menu {
    width: calc(100vw / 16.0 * 2);
  }
}
/* Управление скрытием элементов на отделньных версиях сайта */
@media (min-width: 1200px) {
  .fh2-no-desktop {
    display: none !important;
  }
}
@media (max-width: 567px) {
  .fh2-no-mp {
    display: none !important;
  }
}
@media (min-width: 568px) and (max-width: 767px) {
  .fh2-no-ml {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fh2-no-tp {
    display: none !important;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fh2-no-tl {
    display: none !important;
  }
}