/*
 * Каркас: сброс, типографика, шапка, подвал, кнопки, иконки.
 * Общий для всех страниц сайта.
 */

:root {
  /* Единая ширина содержимого. Раньше в одних файлах стояло 75em,
     в других 1200px, и они расходились: базовый кегль 18px, но 16px
     ниже 75em вьюпорта и 16px на всей странице «Электроэрозионные
     станки», поэтому 75em давало то 1350, то 1200, то 1080.
     Значение в пикселях от кегля не зависит. */
  --wrap: 1350px;

  /* Высота шапки. На боевом сайте она разъехалась по страницам:
     70 / 86 / 112 / 119px в покое и 58 / 75 / 85 / 136px в прижатом
     состоянии — местами прижатая была выше обычной. Здесь одна на всех.
     От неё же считается верхний отступ шапки страницы, чтобы крошки
     не уезжали под меню на низком окне. */
  --nav-h: 80px;
  --nav-h-sticked: 66px;

  /* Верхняя строка шапки — телефон и часы работы. От неё считается высота
     ряда с логотипом и меню, поэтому значение вынесено сюда, а не стоит
     числом в двух местах. В прижатом состоянии строка сворачивается в ноль. */
  --nav-top-h: 32px;
}

/* Переход по якорю ставил заголовок ровно под прибитую шапку. Только для
   широкого экрана: ниже 62em шапка не fixed, а absolute — она уезжает
   вместе со страницей и ничего не перекрывает, отступ там был бы пустой
   тратой места на телефоне.

   Считаем от полной высоты, а не от прижатой: у якоря близко к началу
   страницы шапка ещё не успела сжаться, и 66px не хватило бы. Лишние
   14px в прижатом состоянии незаметны, срезанный заголовок — нет. */
@media (min-width: 62em) {
  html {
    scroll-padding-top: calc(var(--nav-h) + 1rem);
  }
}

* {
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
  font-size: 18px;
  line-height: 1.6875;
  color: #333;
}

h1,
h2,
h3 {
  padding: 0;
  text-align: center;
  margin: 3rem .5rem 2rem;
  font-weight: 500;
  line-height: normal;
  color: #145285;
}

h4 {
  color: #145285;
}

h1 {
  font-size: 2.25em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.2em;
}

h4 {
  font-size: 1.1em;
}

@media screen and (max-width: 85em) {
  body {
    font-size: calc(16px + 2 * (100vw - 1200px) / 160);
  }
}

@media screen and (max-width: 75em) {
  body {
    font-size: 16px;
  }
}

@media screen and (max-width: 22.5em) {
  h1 {
    font-size: 2.25em;
  }

  h2 {
    font-size: 1.333em;
  }

  h3 {
    font-size: 1.2em;
  }

  h4 {
    font-size: 1.1em;
  }
}

@media screen and (max-width: 85em) {
  h1 {
    font-size: calc(24px + 16 * (100vw - 360px) / 1170);
  }

  h2 {
    font-size: calc(22px + 16 * (100vw - 360px) / 1170);
  }

  h3 {
    font-size: calc(20px + 16 * (100vw - 360px) / 1170);
  }
}

p {
  hyphens: none;
  padding: .35em 0;
}

@media (min-width: 48em) {
  .image {
    float: left;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body {
    background-color: #f4f1ea;
  }

  .top-title {
    margin-right: 10vw;
  }
}

@media print {
  .container {
    width: 100% !important;
  }

  a[href]:after {
    content: none !important;
  }
}

footer ul li,
nav .navigation ul li {
  list-style-type: none;
  padding: .3125em .3125em 0;
}

footer .footer-social li,
nav .navigation > ul > li {
  display: inline-block;
}

@media (min-width: 48em) {
  .container {
    max-width: var(--wrap);
    width: 99%;
    margin: 0 -.9375em;
  }
}

*,
.navigation ul li {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  color: #145285;
  font-weight: 500;
}

:focus {
  outline: 0;
}

fieldset,
hr,
iframe,
img {
  border: 0;
}

img {
  vertical-align: middle;
  width: 100%;
}

*,
:after,
:before {
  box-sizing: border-box;
}

@media (max-width: 61.9375em) {
  .navigation-top {
    display: none;
  }
}

@media (min-width: 62em) {
  .top-title {
    margin-right: 2.5em;
    text-shadow: 0 0 .3125em #000;
  }
}

.navigation ul {
  margin: 0;
  padding: 0;
}

.navigation ul li {
  list-style: none;
  padding: .3125em .3125em 0;
}

.navigation > ul > li {
  display: inline-block;
}

/* Только шапка сайта: она единственный <nav> — прямой потомок body.
   Голый селектор nav цеплял и <nav> вокруг крошек, и <nav> оглавления
   статьи — красил их чёрным, растягивал на 100% и поднимал над всем. */
body > nav {
  background: #000;
  position: absolute;
  z-index: 999;
  transition: all .3s;
}

.container {
  margin: 0 auto;
}

.box-menu-head,
.label {
  color: #fff;
  text-align: center;
}

.label {
  display: inline;
  padding: .3em .6em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

.label-info {
  background: #074;
}

.label-warning {
  background: #d20;
}

.box-3 {
  justify-self: end;
}

.box-3 .image {
  margin-top: auto;
}

@media print {
  nav {
    display: none !important;
  }
}

/* Высота шапки в пикселях, а не в em: базовый кегль на страницах разный
   (18px, 16px ниже 75em и 16px на «Электроэрозионных станках»), и одна
   и та же запись в em давала три разные шапки. Значение вынесено
   в переменную — от неё же считается отступ до хлебных крошек. */
.navbar-fixed {
  background: rgba(0, 0, 0, .4);
  position: fixed;
  color: #fff;
  height: var(--nav-h);
}

.navigation-top > ul {
  height: 26px;
  overflow: hidden;
  transition: all .3s;
}

.navbar-sticked .navigation-top > ul {
  height: 0;
}

.container,
.navigation,
a.animated,
footer {
  position: relative;
}

.navigation > ul {
  border-bottom: .0625em solid rgba(255, 255, 255, .2);
}

.logo {
  display: block;
  padding-top: .375em;
}

.logo img {
  max-width: 23.125em;
}

.navigation-top {
  position: relative;
  z-index: 99999;
}

.navigation-top > ul {
  text-align: left;
}

@media (min-width: 61.9375em) {
  /* 32px, а не 28: на 28 строка с телефоном и часами работы обрезалась
     по нижним выносным элементам. Самой строке нужно 30,4px — она влезает
     в 32 только без верхнего отступа, который приходит от общего правила
     для li в шапке и подвале. Ниже он и снимается. */
  .navigation-top > ul {
    height: var(--nav-top-h);
  }

  /* Селектор длиннее, чем хотелось бы: отступ приходит от
     «nav .navigation ul li», и перебить его можно только не меньшей
     специфичностью. */
  nav .navigation.navigation-top > ul > li {
    padding-top: 0;
  }

  /* Прижатая шапка ниже обычной: верхняя строка с телефоном сворачивается
     в ноль, логотип уменьшается. Раньше здесь стояло 8.5em — прижатая
     шапка была почти вдвое выше обычной. */
  .navbar-sticked {
    background-color: #0d3759;
    box-shadow: 0 0 .0437em rgba(13, 55, 89, .062), 0 0 .1062em rgba(13, 55, 89, .089), 0 0 .2188em rgba(13, 55, 89, .111), 0 0 .4562em rgba(13, 55, 89, .138), 0 0 1.25em rgba(13, 55, 89, .2);
    height: var(--nav-h-sticked);
    overflow: visible;
  }

  .navbar-sticked .logo img {
    width: 14em;
    transition: .3s;
  }
}

.close-menu-wrapper,
.open-menu {
  display: none;
}

.open-dropdown {
  margin-left: .3125em;
}

.floating-menu > ul > li > a {
  position: relative;
  font-weight: 400;
  text-transform: uppercase;
  margin-top: .375em;
  height: 1.6875em;
}

a,
a.animated:hover {
  text-decoration: none;
}

/* ---- ссылки в тексте ---------------------------------------------------- */

/* Своего цвета у контентных ссылок не было ни здесь, ни в старой вёрстке:
   правило выше снимает подчёркивание у всех a, а цвет не задаёт никто —
   браузер красит их в #0000EE. Рядом с фирменным #145285 это выглядит
   чужеродно, и заметно стало, когда появились статьи и карта сайта.

   :not([class]) отделяет текст от вёрстки: у кнопок, миниатюр галереи и
   ссылок меню класс есть всегда, у ссылки внутри абзаца — нет. */
.text-page a:not([class]),
.article a:not([class]),
.blog a:not([class]),
.erosion a:not([class]) {
  color: #1965a3;
}

.text-page a:not([class]):hover,
.article a:not([class]):hover,
.blog a:not([class]):hover,
.erosion a:not([class]):hover {
  color: #0d3759;
}

/* Исключение из двух правил выше — и единственное. Карточка станка обёрнута
   в ссылку целиком, а класс висит на самой карточке, не на ссылке:
   <article class="card"><a href=…>картинка, заголовок, подпись</a></article>.
   Правило её ловило, и подпись под картинкой становилась синей — на красной
   плашке каталога это било в глаза.

   Цвет карточке задаёт она сама (#fff), поэтому inherit, а не значение.
   Вес селекторов равен весу правил выше — и обычного, и с :hover, — так что
   решает порядок, и блок обязан стоять последним. Сначала я поставил его
   выше :hover, и при наведении подпись всё равно синела. */
.card > a:not([class]),
.general-card > a:not([class]),
.card > a:not([class]):hover,
.general-card > a:not([class]):hover {
  color: inherit;
}

/* В сплошном тексте одного цвета мало — подчёркиваем. В перечнях (карта
   сайта, оглавление статьи, разделы на 404) подчёркивание превращает
   страницу в кашу, там остаётся только цвет. */
.text-page p a:not([class]),
.blog p a:not([class]),
.erosion p a:not([class]) {
  text-decoration: underline;
  text-underline-offset: .15em;
}

.navbar-box ul {
  margin-bottom: 1.25em;
}

.navbar-box ul > li {
  list-style: none;
  padding: 0;
  margin-bottom: .3125em;
}

.navbar-box ul > li > a {
  color: #fff;
  display: block;
  padding-bottom: .3125em;
  border-bottom: .0625em solid #1965a3;
}

.navbar-box ul > li > a span.label {
  padding: .125em .25em;
  vertical-align: super;
  font-size: 55%;
  display: inline-block;
}

@media (min-width: 62em) {
  .navbar-box ul > li > a:hover {
    color: #ffc933;
    text-decoration: none;
  }

  .floating-menu > ul > li,
  .floating-menu > ul > li > a {
    display: inline-block;
  }

  .logo {
    position: absolute;
    z-index: 1;
    left: 0;
  }

  .navigation-top {
    display: block;
  }

  .floating-menu > ul {
    position: relative;
    text-align: right;
    border-bottom: 0 solid #ccc;
  }

  .floating-menu > ul > li > a {
    color: #fff;
    padding: 0 .5em 0 0;
    text-decoration: none;
  }

  .floating-menu > ul > li > a:after {
    position: absolute;
    background-color: #ffc933;
    content: "";
    left: 0;
    right: 0;
    bottom: -.25em;
    height: .1875em;
    width: 100%;
    display: block;
    transition: all .3s;
    transform: rotateY(-90deg);
  }

  .floating-menu > ul > li .navbar-dropdown {
    position: absolute;
    overflow: hidden;
    color: #fff;
    width: 100%;
    left: 0;
    right: 0;
    top: 2.625em;
    box-shadow: 0 .3125em .3125em rgba(0, 0, 0, .2);
    text-align: left;
    z-index: 9999;
    transform-origin: 0 0;
    transform: scaleY(0);
    background: #1d3759;
  }

  .floating-menu > ul > li .navbar-box {
    display: flex;
  }

  .floating-menu > ul > li .navbar-box .box-1 {
    display: flex;
    flex-direction: column;
    background-color: #111;
  }

  .floating-menu > ul > li .navbar-box .box-2 {
    width: 100%;
    background-color: #1d3759;
  }

  .drill,
  .dsedm,
  .wedm {
    width: max-content;
  }

  .floating-menu > ul > li .navbar-box ul:last-child {
    margin-bottom: 0;
  }

  .floating-menu > ul > li:hover a:after {
    transform: rotateY(0deg);
  }

  .floating-menu > ul > li:hover .navbar-dropdown {
    transition: all .6s cubic-bezier(0, .95, .8, .99);
    transform: scale(1);
    transition-delay: .2s;
  }

  /* ---- выключка шапки по вертикали ------------------------------------
   *
   * Ряд с логотипом и меню был высотой по содержимому, а не по шапке, и под
   * ним оставалась пустая полоса: 10px в покое и 27px в прижатом состоянии.
   * Логотип с меню висели в верхней части шапки, а на главной, где под
   * полупрозрачной полосой сразу начинается фотография, её нижний край
   * проходил в двенадцати пикселях под логотипом — он и выглядел прижатым.
   *
   * Теперь ряд занимает всё, что осталось от шапки под строкой с телефоном,
   * а содержимое центрируется в нём. Обе высоты берутся из переменных,
   * поэтому в прижатом состоянии всё пересчитывается само.
   */
  /* Колонка вместо арифметики: строка с телефоном занимает своё, ряд
     с логотипом забирает остаток. В прижатом состоянии верхняя строка
     сворачивается, и ряд разрастается сам — вычитать ничего не нужно. */
  .navbar-fixed > .container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .navigation-top {
    flex: none;
  }

  .navigation-main {
    flex: 1;
    min-height: 0;
  }

  /* Картинка строчная, и под ней оставалось место под свисающие буквы —
     полтора пикселя, на которые логотип уезжал вниз от центра. */
  .logo img {
    display: block;
  }

  /* Логотип выведен из потока (лежит слева поверх ряда), поэтому
     центрируется сам, а не выключкой родителя. */
  .logo {
    top: 50%;
    transform: translateY(-50%);
    padding-top: 0;
  }

  /* Обёртка тоже во всю высоту ряда — иначе центрировать список не в чем:
     у блока по содержимому height: 100% у потомка не от чего считать. */
  .floating-menu {
    height: 100%;
  }

  .floating-menu > ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
  }

  /* Отступ подбирался под прежнюю высоту ряда — теперь центрирует флекс. */
  .floating-menu > ul > li > a {
    margin-top: 0;
  }

  /* Пункт центрируется, а ссылка внутри него сидела на 5px ниже: отступ
     сверху приходит от общего правила для li в шапке и подвале. У строки
     с телефоном он снимается тем же способом. Селектор длинный, потому что
     перебить можно только не меньшей специфичностью. */
  nav .navigation-main .floating-menu > ul > li {
    padding-top: 0;
  }

  /* Пункт растянут на всю высоту ряда, а ссылка центрируется уже внутри него.
     Без этого между низом пункта и верхом мега-меню оставалась мёртвая полоса
     в 10px: выпадающий блок отсчитывается от ul — он ближайший
     позиционированный предок, — а коробка пункта была высотой по тексту и
     висела по центру ряда. Курсор шёл к меню, пересекал эту полосу, терял
     наведение, и меню закрывалось, не дав собой воспользоваться. */
  .floating-menu > ul > li {
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  /* Выпадающий блок отсчитывается от низа ряда, а не от фиксированных
     2.625em: ряд стал разной высоты в покое и в прижатом состоянии. */
  .floating-menu > ul > li .navbar-dropdown {
    top: 100%;
  }

  /* В прижатой шапке логотип занимал 22px по высоте против 29 в покое —
     терялся. 260px дают 25px: заметно меньше обычного, но не мелочь. */
  .navbar-sticked .logo img {
    width: 340px;
    padding-bottom: 10px;
  }
}

@media (max-width: 61.9375em) {
  /* На телефоне шапка ниже: строки с телефоном и часами работы в ней нет.
     Высота задаётся переопределением переменной, а не числом у навбара, —
     иначе от неё разъезжается всё остальное. Так и было: здесь стояло 70px,
     а отступ полосы с крошками ниже считался от общих 80px, и над крошками
     повисали лишние десять пикселей пустой синевы. */
  :root {
    --nav-h: 70px;
  }

  /* top обязателен. Без него у absolute остаётся «статическая» позиция —
     та, где элемент оказался бы в потоке. Верхний отступ первого блока
     страницы схлопывается через body наружу и сдвигает эту позицию вместе
     с шапкой: на главной у .home__title margin-top: 40px, и шапка уезжала
     на 40px вниз, наезжая на этот самый заголовок. На внутренних страницах
     первым идёт .main-header с padding вместо margin — там шапка стояла
     на месте, оттого и казалось, что беда только на главной. */
  nav.navbar-fixed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #0d3759;
  }

  nav .container {
    padding: 0;
    margin: 0;
    width: 100%;
  }

  nav .navigation.navigation-top {
    background-color: #0d3759;
    padding-left: 14px;
  }

  nav .navigation .logo {
    overflow: hidden;
    padding-left: 14px;
  }

  nav .navigation .logo img {
    width: 75vw;
    margin: 15px 0;
  }

  nav .navigation-main .close-menu-wrapper,
  nav .navigation-main .open-menu {
    display: block;
  }

  nav .navigation-main .open-menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    color: #fff;
    text-align: center;
    font-size: 15px;
    line-height: 58px;
  }

  nav .navigation-main .floating-menu {
    position: absolute;
    padding: 0 10px 20px;
    z-index: 9999;
    width: 100%;
    top: 0;
    right: 0;
    left: auto;
    background-color: #0d3759;
    transform: translate3d(0, -100%, 0);
    transition: all .3s;
  }

  nav .navigation-main .floating-menu.expanded > ul > li,
  nav nav .navigation-main .floating-menu.expanded .close-menu {
    transform: translateZ(0);
  }

  nav .navigation-main .floating-menu.expanded,
  nav .navigation-main .floating-menu.expanded .close-menu {
    display: block;
    transform: translate3d(0, 0, 0);
  }

  nav .navigation-main .floating-menu.expanded > ul > li {
    transition: all .2s;
  }

  nav .navigation-main .floating-menu .navbar-dropdown {
    background-color: #0d3759;
    padding: 0 10px;
    margin-bottom: 10px;
  }

  nav .navigation-main .floating-menu > ul {
    overflow: hidden;
  }

  nav .navigation-main .floating-menu > ul > li {
    transform: translate3d(100%, 0, 0);
  }

  nav .navigation-main .floating-menu > ul > li:first-child {
    transition-delay: .1s;
  }

  nav .navigation-main .floating-menu > ul > li:nth-child(2) {
    transition-delay: .2s;
  }

  nav .navigation-main .floating-menu > ul > li:nth-child(3) {
    transition-delay: .3s;
  }

  nav .navigation-main .floating-menu > ul > li:nth-child(4) {
    transition-delay: .4s;
  }

  nav .navigation-main .floating-menu > ul > li:nth-child(5) {
    transition-delay: .5s;
  }

  nav .navigation-main .floating-menu > ul > li:nth-child(6) {
    transition-delay: .6s;
  }

  nav .navigation-main .floating-menu > ul > li > a {
    color: #fff;
    display: block;
    border-bottom: 1px solid #1b6eb1;
    margin: 2px 0;
    position: relative;
  }

  nav .navigation-main .floating-menu > ul > li .open-dropdown {
    position: absolute;
    width: 40px;
    height: 100%;
    right: 4px;
    top: 0;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
    transform: rotate(0deg);
    transition: all .3s;
    display: inline-block;
  }

  nav .navigation-main .floating-menu > ul > li.expanded .open-dropdown {
    transform: rotate(-90deg);
    transition: all .3s;
    top: -4px;
    right: 0px;
  }

  nav .navigation-main .close-menu-wrapper {
    height: 50px;
    border-bottom: 1px solid #1b6eb1;
  }

  nav .navigation-main .close-menu {
    cursor: pointer;
    display: block;
    height: 50px;
    width: 50px;
    float: right;
    background-size: auto 50px;
    background-position: 100%;
    background-repeat: no-repeat;
    color: #fff;
    text-align: right;
    transform: translate3d(0, -100%, 0);
    transition: all .3s;
    transition-delay: .2s;
    font-size: 26px;
    line-height: 50px;
    padding-right: 8px;
  }

  .box-3,
  nav .navigation-main .navbar-dropdown .box-1 {
    display: none;
  }

  nav .expanded {
    display: inherit;
  }

  .close {
    max-height: 0;
    transition: max-height 0.25s ease-out;
    overflow: hidden;
  }

  nav .exp {
    max-height: 1500px;
    transition: max-height 0.25s ease-in;
  }

  nav .navigation-main .navbar-dropdown ul {
    margin: 20px 0;
    padding: 0;
  }

  nav .navigation-main .navbar-dropdown .navbar-box ul > li > a {
    border-color: #1b6eb1;
    font-size: 14px;
  }

  .navbar-box ul > li > a {
    padding-bottom: 0;
  }
}

.fa-clock:before,
.fa-phone:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
}

.fa-phone:before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.5 11.5'%3E%3Cpath d='M2.9 8.5C1 6.6 0 4.6 0 2.9 0 1.9.3 1.2.9.6L1 .5c.5-.3.9-.5 1.2-.5.4 0 .8.2 1.2.8l1.2 1.7c.4.5.4 1.1-.1 1.6l-.4.5c-.2.1-.2.2-.1.3.2.4.7.9 1.1 1.3.4.4 1.1 1 1.4 1.2.1.1.2.1.4-.1l.5-.5c.4-.3 1.1-.3 1.6.1L10.7 8c.5.4.8.8.8 1.2 0 .4-.2.8-.5 1.1l-.1.1c-.6.7-1.3.9-2.3.9-1.8.2-3.8-.9-5.7-2.8zm7.2 1.4l.1-.1c.2-.2.2-.4.2-.5 0-.2-.1-.3-.2-.4L8.5 7.6c-.2-.1-.4-.1-.6.1l-.5.5c-.4.4-.9.4-1.3.1-.4-.3-1.1-1-1.6-1.4-.5-.4-1-1.1-1.4-1.6-.2-.4-.3-.9.1-1.3l.5-.5c.2-.2.2-.4 0-.6l-1-1.7c-.1-.1-.3-.2-.5-.2s-.3.1-.5.2l-.1.1c-.5.4-.7 1-.7 1.6 0 1.5 1.2 3.5 2.7 5 1.5 1.5 3.4 2.7 4.9 2.6.7 0 1.2-.2 1.6-.6z' fill='%23fff'/%3E%3C/svg%3E");
  margin-bottom: -.125em;
}

.fa-clock:before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.2 12.3'%3E%3Cpath d='M0 6.1C0 2.8 2.8 0 6.1 0c3.4 0 6.1 2.8 6.1 6.1s-2.8 6.1-6.1 6.1C2.8 12.3 0 9.5 0 6.1zm10.9 0c0-2.6-2.1-4.8-4.8-4.8-2.6 0-4.7 2.1-4.7 4.8s2.1 4.7 4.7 4.7c2.7.1 4.8-2 4.8-4.7zm-8.2.3c0-.3.2-.5.5-.5h2.3V2.7c0-.3.2-.5.5-.5s.5.2.5.5v3.7c0 .3-.2.5-.5.5H3.3c-.3 0-.6-.2-.6-.5z' fill='%23fff'/%3E%3C/svg%3E");
  margin: 0 .1875em -.125em;
}

.fa-angle-down:before {
  background: url("data:image/svg+xml,%3Csvg version='1.1' id='Слой_1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 24 16' xml:space='preserve'%3E%3Cstyle%3E.st0%7Bfill:%23fff%7D%3C/style%3E%3Cpath class='st0' d='M0 1.3C0 .6.5 0 1.2 0h21.6c.7 0 1.2.6 1.2 1.3 0 .7-.5 1.3-1.2 1.3H1.2C.5 2.7 0 2 0 1.3zM0 8c0-.7.5-1.3 1.2-1.3h21.6c.7 0 1.2.6 1.2 1.3 0 .7-.5 1.3-1.2 1.3H1.2C.5 9.3 0 8.7 0 8zM0 14.7c0-.7.5-1.3 1.2-1.3h21.6c.7 0 1.2.6 1.2 1.3 0 .7-.5 1.3-1.2 1.3H1.2C.5 16 0 15.4 0 14.7z'/%3E%3C/svg%3E%0A");
  content: "";
  position: absolute;
}

.fa-bars:before {
  top: 1em;
  right: 1em;
  width: 1.5em;
}

.fa-bars:before,
.fa-times:before {
  background: url("data:image/svg+xml,%3Csvg version='1.1' id='Слой_1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 24 16' xml:space='preserve'%3E%3Cstyle%3E.st0%7Bfill:%23fff%7D%3C/style%3E%3Cpath class='st0' d='M0 1.3C0 .6.5 0 1.2 0h21.6c.7 0 1.2.6 1.2 1.3 0 .7-.5 1.3-1.2 1.3H1.2C.5 2.7 0 2 0 1.3zM0 8c0-.7.5-1.3 1.2-1.3h21.6c.7 0 1.2.6 1.2 1.3 0 .7-.5 1.3-1.2 1.3H1.2C.5 9.3 0 8.7 0 8zM0 14.7c0-.7.5-1.3 1.2-1.3h21.6c.7 0 1.2.6 1.2 1.3 0 .7-.5 1.3-1.2 1.3H1.2C.5 16 0 15.4 0 14.7z'/%3E%3C/svg%3E%0A");
  content: "";
  position: absolute;
  height: 1em;
  font-size: 24px;
}

.fa-angle-down:before,
.fa-times:before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.7 12L.5 2.8C-.1 2.2-.1 1.1.5.5c.6-.6 1.7-.6 2.3 0L12 9.7 21.3.4c.6-.6 1.7-.6 2.3 0 .6.6.6 1.7 0 2.3L14.3 12l9.2 9.3c.6.6.6 1.7 0 2.3-.6.6-1.7.6-2.3 0L12 14.3l-9.2 9.3c-.6.6-1.7.6-2.3 0-.6-.6-.6-1.7 0-2.3L9.7 12z' fill='%23fff'/%3E%3C/svg%3E%0A");
}

.fa-times:before {
  top: .625em;
  right: .625em;
  width: 1em;
}

.fa-angle-down:before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13.5'%3E%3Cpath d='M11.1 13.1L.4 2.2c-.3-.3-.4-.6-.4-.9C0 .6.5 0 1.3 0c.4 0 .7.1.9.4l9.8 10L21.8.3c.3-.2.6-.3.9-.3.8 0 1.3.6 1.3 1.3 0 .3-.1.6-.4.9l-10.7 11c-.2.3-.6.4-.9.4-.4-.1-.7-.2-.9-.5z' fill='%23fff'/%3E%3C/svg%3E%0A");
  top: .325em;
  right: .5em;
  width: 1.125em;
  height: .625em;
}

@media (min-width: 62em) {
  .fa-angle-down:before {
    display: none;
  }

  .megamenu,
  .megamenu2 {
    display: flex;
    width: 100%;
    padding: .75em;
    column-gap: .75em;
  }

  .megamenu-col {
    display: flex;
    flex-direction: column;
    width: inherit;
    justify-content: space-between;
  }
}

a.animated {
  color: #fff;
  display: inline-block;
}

a.heading {
  font-weight: 500;
}

a.animated:after {
  width: 0;
  height: .125em;
  background: #ffc933;
  content: "";
  position: absolute;
  left: 0;
  bottom: -.1em;
  transition: all .25s ease-in-out;
}

a.animated:hover {
  color: #ffc933;
}

a.animated:hover:after,
body > nav {
  width: 100%;
}

.box-menu,
.box-menu-head {
  padding: 1.25em;
}

.box-menu-head {
  font-size: 1.25em;
  font-weight: 500;
}

.box-menu-paragraph {
  font-weight: 400;
}

a:active,
a:hover {
  outline: 0;
}

.top-title {
  margin-right: 2vw;
}

.container {
  height: 2.5em;
  margin-right: auto;
  margin-left: auto;
}

.container:after {
  clear: both;
}

article,
aside,
details,
figcaption,
figure,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

body .wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

figure {
  margin: 0;
}

.fa-download:before {
  content: "";
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.8 13'%3E%3Cpath d='M0 11.1V7.7c0-.5.1-.8.3-1.1l2-2.5c.7-.9 1.2-1.4 2.2-1.4h.9v.8h-1c-.4 0-.8.4-1.1.8L1.2 6.9c-.2.3-.2.4.2.4h3.7c.3 0 .5.2.5.5 0 .7.5 1.4 1.4 1.4.8 0 1.4-.7 1.4-1.4 0-.2.1-.5.4-.5h3.7c.3 0 .4-.1.2-.4l-2.1-2.6c-.3-.4-.7-.7-1.2-.7h-.9v-.9h.9c1 0 1.5.5 2.1 1.3l2 2.5c.3.3.3.6.3 1.1v3.5c0 1.2-.6 1.8-1.8 1.8H1.8C.6 13 0 12.4 0 11.1zm12 .9c.6 0 .9-.3.9-.9V8.2H9.2c-.2 1.1-1.1 1.9-2.3 1.9-1.2 0-2.1-.8-2.3-1.9H.9v2.9c0 .6.3.9.9.9H12zM6.6 7.1l-2-1.9c-.1-.1-.1-.2-.1-.3 0-.2.2-.4.4-.4.1 0 .2 0 .3.1l.9.9.4.5V.5c-.1-.3.2-.5.4-.5s.5.2.5.5V6l.4-.4.9-.9c.1-.1.2-.1.3-.1.2 0 .4.2.4.4 0 .1-.1.2-.1.3l-2 1.9h-.4c-.1 0-.2 0-.3-.1z' fill='%23fff'/%3E%3C/svg%3E");
  height: 1.875em;
  width: 2em;
  margin-bottom: -.1875em;
}

.fa-file-pdf:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg id='svg249' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 17.51 17.73'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23505050;%7D.cls-1,.cls-6%7Bstroke:%23505050;stroke-linecap:round;stroke-linejoin:round;%7D.cls-2%7Bfill:url(%23linear-gradient);%7D.cls-3%7Bfill:%23e21e00;%7D.cls-4%7Bisolation:isolate;font-size:3.5px;font-family:ArialMT, Arial;%7D.cls-4,.cls-6%7Bfill:%23fff;%7D.cls-5%7Bfill:%23f91d0a;%7D.cls-7%7Bfill:%23f3f3f3;%7D%3C/style%3E%3ClinearGradient id='linear-gradient' x1='-1487.71' y1='-512.08' x2='-1484.86' y2='-508.66' gradientTransform='matrix(4.17, 0, 0, -4.17, 6208.36, -2119.26)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fefefe'/%3E%3Cstop offset='1' stop-color='%23f2f2f2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctitle%3EArtboard 1%3C/title%3E%3Cg id='layer6'%3E%3Cg id='g4299'%3E%3Cpath id='path4273' class='cls-1' d='M4.31.5V17.23H17V3.56L14,.5Z'/%3E%3Cpath id='rect4268' class='cls-2' d='M4.3.51V17.24H17V3.57L14,.51Z'/%3E%3Cpath id='rect4275' class='cls-3' d='M0,1.66H12.53V6.9H0Z'/%3E%3Ctext id='text4277' class='cls-4' transform='translate(3.1 5.49)'%3EPDF%3C/text%3E%3Cpath id='path4463' class='cls-5' d='M9.11,12.32c.24-.48.52-1,.74-1.56l.09-.21A4.84,4.84,0,0,1,9.63,8a.4.4,0,0,1,.4-.24h.13c.26,0,.37.31.39.44a2.1,2.1,0,0,1-.08.56,1.39,1.39,0,0,0-.08-.57c-.1-.23-.2-.37-.29-.39A.26.26,0,0,0,10,8a4,4,0,0,0,0,.49,5.34,5.34,0,0,0,.23,1.43,2,2,0,0,0,.07-.23l.23-.89a6.39,6.39,0,0,1-.12,1.33v.2a4.69,4.69,0,0,0,1.12,1.75,3.54,3.54,0,0,0,.65.44c.43-.06.88-.07,1.31-.1a1.54,1.54,0,0,1,1,.23.47.47,0,0,1,.11.25.38.38,0,0,1,0,.15s0-.16-.39-.29a4.83,4.83,0,0,0-1.61,0,3.3,3.3,0,0,0,1.86.48.44.44,0,0,0,.14-.13,1,1,0,0,1-.08.25.36.36,0,0,1-.19.13A4,4,0,0,1,12,12.84a19.24,19.24,0,0,0-3,.71c-.88,1.54-1.54,2.24-2.07,2l-.2-.1c-.08,0-.09-.15-.07-.24.06-.31.44-.77,1.21-1.23l.45-.24L7.86,14A2.87,2.87,0,0,0,6.8,15.39c.53-.07,1.31-1.11,2.31-3.07m.37.16L9,13.36a12.18,12.18,0,0,1,2.59-.74l-.33-.25a4.36,4.36,0,0,1-1.09-1.43,14.18,14.18,0,0,1-.69,1.54'/%3E%3Cpath id='rect4283' class='cls-6' d='M14,.52v3h3Z'/%3E%3Cpath id='path4289' class='cls-7' d='M14,.52v3h3Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  display: inline-block;
  height: 2.25em;
  padding: .5em 1.125em;
  margin: 0 0 -.5em 1.25em;
}

.fa-envelope:before,
.fa-lager:before {
  content: "";
  display: inline-block;
  height: 1.125em;
  width: 1.4375em;
  margin-right: .3125em;
}

.fa-envelope:before {
  background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 23 18' viewBox='0 0 23 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 14.8v-11.6c0-2.1 1.1-3.2 3-3.2h16.8c2.1 0 3.2 1.1 3.2 3.2v11.5c0 2.2-1.1 3.2-3 3.2h-16.7c-2.2.1-3.3-1-3.3-3.1zm1.6.1 6-5.9-6-5.9v.1 11.5zm9.9-4.7c.4 0 .8-.2 1.3-.6l7.8-7.8c-.2-.1-.5-.2-.8-.2h-16.6c-.3 0-.6.1-.8.1l7.9 7.8c.4.5.8.7 1.2.7zm8.3 6.2c.3 0 .6 0 .8-.1l-6.2-6.2-.7.7c-.7.7-1.4 1-2.2 1-.7 0-1.4-.3-2.2-1l-.7-.7-6.2 6.2c.2.1.5.1.8.1zm1.6-13.2-5.9 5.8 5.9 5.9v-.1z' fill='%23fff'/%3E%3C/svg%3E");
  margin-bottom: -.125em;
}

.fa-lager:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M527.5 353.3h-176v-112c0-8.8-7.2-16-16-16h-224c-8.8 0-16 7.2-16 16v256c0 8.8 7.2 16 16 16h416c8.8 0 16-7.2 16-16v-128c0-8.8-7.2-16-16-16zm-224 112h-160v-64h160v64zm0-128h-160v-64h160v64zm192 128h-144v-64h144v64zm101.9-353.9L345.8 6.6c-17-7-35.7-7.1-52.6 0L41.6 111.4C16 122-.5 146.8-.5 174.5v322.8c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16V174.5c0-8.3 4.9-15.7 12.5-18.8L311.7 50.9c5.1-2.1 10.6-2.1 15.7 0L579 155.7c7.6 3.2 12.5 10.6 12.5 18.8v322.8c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16V174.5c0-27.7-16.5-52.5-42.1-63.1z' fill='%23fff'/%3E%3C/svg%3E");
}

.btn-gf {
  padding: .5em 1em;
  font-size: 1.25em;
  border-radius: .3em;
  background-color: #1965a3;
  border-color: transparent;
  color: #fff;
  width: 13.25em;
}

/* Центрируется автоотступами, а не сдвигом. Раньше стояло
   left: 50% + translate(-50%): приём отсчитывает половину от контейнера,
   а возвращает половину от кнопки, поэтому работал он только там, где
   кнопка и так прижата влево. На «Контактах» обёртка уже центрирует
   содержимое, и кнопку уносило вправо до самого края. */
.btn {
  display: block;
  margin: 1em auto 0;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 .125em .625em .3125em rgba(0, 0, 0, .12);
}

.btn-gf_full {
  width: 70%;
  padding: .75em 1.5em;
  font-size: 1.25em;
  border-radius: .3em;
  background-color: #567;
  border-color: transparent;
  color: #fff;
  margin-top: 1em;
}

.btn:hover {
  background-color: #145285;
}

.btn:active {
  background-color: #145285;
  box-shadow: 0 .125em .1875em .0625em rgba(0, 0, 0, .12);
}

.btn-gf_pros {
  width: 70%;
}

.sitemap a {
  color: #fff;
}

footer ul {
  margin: 0;
  padding: 0;
}

footer {
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: -1.25em;
  background-color: #0d3759;
}

@media (max-width: 47.9375em) {
  footer {
    text-align: center;
  }
}

footer,
footer a {
  color: #eee;
}

.footer-container {
  max-width: var(--wrap);
  margin: 0 auto;
}

footer .footer-showroom {
  padding-top: 1.875em;
  padding-bottom: 1.875em;
  border-bottom: .0625em solid #1965a3;
}

.footer-row {
  display: flex;
  flex-direction: column;
}

.about-head,
.address-head {
  font-size: 1.4em;
  font-weight: 500;
  padding: 0 0 .625em;
}

.about,
.address,
.address-phone {
  font-weight: 400;
}

@media (min-width: 48em) {
  footer .footer-showroom {
    padding-top: 2.5em;
    padding-bottom: 2.5em;
  }

  .footer-row {
    display: flex;
    flex-direction: row;
  }
}

@media (min-width: 62em) {
  footer .footer-showroom {
    padding-top: 3.75em;
    padding-bottom: 3.75em;
  }
}

@media (min-width: 75em) {
  footer .footer-showroom {
    padding-top: 1.25em;
    padding-bottom: 1.25em;
    margin-top: auto;
  }
}

.footer-social {
  padding: .625em 0;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}

.col33 img,
.copyright {
  text-align: center;
}

.sitemap {
  flex-grow: .5;
  margin-left: auto;
  font-size: 1.125em;
  padding: .1875em;
}

.footer-social ul {
  flex-grow: .5;
  text-align: right;
  padding-right: .3125em;
}

.footer-logo {
  padding: 1.25em 0;
  width: 30%;
}

@media (min-width: 48em) {
  .footer-logo {
    width: 50%;
    margin: auto;
  }
}

@media (min-width: 62em) {
  footer .footer-social {
    padding: .625em 0;
  }
}

footer {
  display: block;
}

.col33 {
  position: relative;
  padding: 0 .625em;
}

@media (min-width: 48em) {
  .col33 {
    display: flex;
    flex-direction: column;
    width: 33.33333%;
    margin-left: .625em;
  }
}

.fa-facebook:before {
  content: "";
  position: absolute;
  top: 1.25em;
  width: 1.25em;
  height: 1.25em;
}

.fa-twitter:before {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Слой_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 448 448' style='enable-background:new 0 0 448 448;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D .st1%7Bfill:%231DA1F2;%7D%0A%3C/style%3E%3Cpath class='st0' d='M400,0H48C21.5,0,0,21.5,0,48v352c0,26.5,21.5,48,48,48h352c26.5,0,48-21.5,48-48V48C448,21.5,426.5,0,400,0z' /%3E%3Cpath class='st1' d='M351.1,158.8c0.2,2.8,0.2,5.7,0.2,8.5c0,86.7-66,186.6-186.6,186.6c-37.2,0-71.7-10.8-100.7-29.4 c5.3,0.6,10.4,0.8,15.8,0.8c30.7,0,58.9-10.4,81.4-28c-28.8-0.6-53-19.5-61.3-45.5c10.1,1.5,19.2,1.5,29.6-1.2 c-30-6.1-52.5-32.5-52.5-64.4v-0.8c8.7,4.9,18.9,7.9,29.6,8.3c-18.3-12.2-29.2-32.7-29.2-54.6c0-12.2,3.2-23.4,8.9-33.1 c32.3,39.8,80.8,65.8,135.2,68.6c-9.3-44.5,24-80.6,64-80.6c18.9,0,35.9,7.9,47.9,20.7c14.8-2.8,29-8.3,41.6-15.8 c-4.9,15.2-15.2,28-28.8,36.1c13.2-1.4,26-5.1,37.8-10.2C375.1,137.9,363.9,149.5,351.1,158.8z'/%3E%3C/svg%3E%0A");
  right: 2.5em;
}

.fa-twitter:before,
.fa-youtube:before {
  content: "";
  position: absolute;
  top: 1.25em;
  width: 1.25em;
  height: 1.25em;
}

.fa-facebook:before {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Слой_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 448.5 448.4' style='enable-background:new 0 0 448.5 448.4;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D .st1%7Bfill:%234267B2;%7D%0A%3C/style%3E%3Cpath class='st0' d='M448.5,48.4v352c0,26.5-21.5,48-48,48h-352c-26.5,0-48-21.5-48-48v-352c0-26.5,21.5-48,48-48h352 C427,0.4,448.5,21.9,448.5,48.4z'/%3E%3Cpath class='st1' d='M400,0H48C21.5,0,0,21.5,0,48v352c0,26.5,21.5,48,48,48h137.2V295.7h-63V224h63v-54.6c0-62.2,37-96.5,93.7-96.5 c27.1,0,55.5,4.8,55.5,4.8v61h-31.3c-30.8,0-40.4,19.1-40.4,38.7V224h68.8l-11,71.7h-57.8V448H400c26.5,0,48-21.5,48-48V48 C448,21.5,426.5,0,400,0z'/%3E%3C/svg%3E");
  right: 4.375em;
}

.fa-youtube:before {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Слой_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 448 448' style='enable-background:new 0 0 448 448;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D .st1%7Bfill:%23FF0000;%7D%0A%3C/style%3E%3Cpath class='st0' d='M448,48v352c0,26.5-21.5,48-48,48H48c-26.5,0-48-21.5-48-48V48C0,21.5,21.5,0,48,0h352C426.5,0,448,21.5,448,48 z'/%3E%3Cpath class='st1' d='M406,224.3c0,0,0-59.6-7.6-88.2c-4.2-15.8-16.5-28.2-32.2-32.4C337.9,96,224,96,224,96s-113.9,0-142.2,7.7 c-15.7,4.2-28,16.6-32.2,32.4C42,164.6,42,224.3,42,224.3s0,59.6,7.6,88.2c4.2,15.8,16.5,27.7,32.2,31.9C110.1,352,224,352,224,352 s113.9,0,142.2-7.7c15.7-4.2,28-16.1,32.2-31.9C406,283.9,406,224.3,406,224.3L406,224.3z'/%3E%3Cpolygon class='st0' points='186.8,170.1 282,224.2 186.8,278.3 '/%3E%3C/svg%3E");
  right: .625em;
}

.copyright {
  font-weight: 400;
  font-size: 1.125em;
  padding: .1875em;
  margin-right: 1.25em;
  justify-self: auto;
}


/* Шапка раздела и хлебные крошки — общие для страниц станков,
   разделов, рубрик и текстовых страниц. */

/* Обёртка крошек. В разных шаблонах это <header class="container">
   или <nav class="container">, поэтому цепляемся за .container.
   Фон и position обязательны: голый селектор nav ниже красит любой
   <nav> чёрным и поднимает его на z-index 999 — иначе крошки
   всплывают чёрной полосой поверх выпадающего меню. */
.main-header .container {
  color: #fff;
  margin-bottom: .3125em;
  position: relative;
  background: transparent;
  z-index: 1;
}

@media (min-width: 62em) {
  /* Фотополоса раздела. Отступ сверху был 20vh — на низком окне крошки
     заезжали под меню (при высоте окна около 410px они с ним смыкались).
     Теперь 20vh работает как «просторно», но не ниже, чем высота шапки
     плюс воздух. */
  .main-header {
    padding-top: max(20vh, calc(var(--nav-h) + 1.75em));
    padding-bottom: 7em;
    background-color: #272a27;
    /* Затемнение сверху: белые крошки и меню лежат поверх фотографии,
       и на светлом кадре (дуб на «Истории AgieCharmilles») их почти
       не видно. Тени у текста для этого мало. Внизу сходит на нет,
       чтобы не портить сам снимок. */
    background-image:
      linear-gradient(to bottom, rgba(0, 0, 0, .45) 0, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, 0) 70%),
      var(--header-image, url(/images/wedm-head.jpg));
    background-size: cover;
    background-position: 50%;
  }
}

@media (max-width: 61.9375em) {
  /* Отступ от высоты шапки, как и на широком экране. Раньше здесь стояло
     2.5em (40px) при шапке 80px — крошки прятались, и наезд был не виден.
     Как только их показали, он вылез.

     Цвет фона тоже нужен: фотография подставляется только от 62em, и на
     телефоне полоса оставалась белой. Крошки на ней белые — то есть были бы
     не видны. У вариантов --article и --plain этот цвет уже свой. */
  .main-header {
    padding-top: calc(var(--nav-h) + .5em);
    padding-bottom: .5em;
    background-color: #0d3759;
  }
}

@media print {
  .main-header {
    padding: 2.5em 0 !important;
  }
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.breadcrumb.breadcrumb-inverted {
  background: 0 0;
  margin-top: 1em;
  padding: 0;
}

.breadcrumb.breadcrumb-inverted > li {
  margin: .0625em;
  list-style-type: none;
}

.breadcrumb.breadcrumb-inverted > li,
.breadcrumb.breadcrumb-inverted > li > a,
.breadcrumb > li.active {
  color: #fff;
  text-shadow: 0 0 .3125em #000;
}

.breadcrumb > li.active {
  color: #bcdcf5;
}

/* На узком экране крошки показываем. Раньше они прятались приёмом
   «только для скринридеров» — из тех времён, когда телефоны были узкие
   и строка не помещалась. Обрезать её и правда не стоит, но и прятать
   незачем: на телефоне меню спрятано за гамбургером, и крошки остаются
   единственной подсказкой, где читатель находится.

   Вместо обрезки — перенос: список и так flex-wrap, надо лишь снять
   nowrap и overflow: hidden, которые ему мешали. Длинная цепочка
   занимает две строки вместо одной и ничего не теряет. */
@media (max-width: 61.9375em) {
  .breadcrumb {
    white-space: normal;
    overflow: visible;
    font-size: .85em;
    line-height: 1.4;
  }

  .breadcrumb.breadcrumb-inverted {
    margin-top: .5em;
  }
}

.i-right:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13.5'%3E%3Cpath d='M11.1 13.1L.4 2.2c-.3-.3-.4-.6-.4-.9C0 .6.5 0 1.3 0c.4 0 .7.1.9.4l9.8 10L21.8.3c.3-.2.6-.3.9-.3.8 0 1.3.6 1.3 1.3 0 .3-.1.6-.4.9l-10.7 11c-.2.3-.6.4-.9.4-.4-.1-.7-.2-.9-.5z' fill='%23fff'/%3E%3C/svg%3E%0A");
  width: .75em;
  height: .4375em;
  transform: rotate(-90deg);
  display: inline-block;
  margin: .0625em;
}

/* ---- разделитель под заголовком --------------------------------------- */

/* Тонкая линия с растушёвкой к краям. Стоит под h1 на «О компании»,
   «Сервисных центрах» и «Контактах». */
/* ---- блок текста с подзаголовками -------------------------------------- */

/* Жил в machine.css, но нужен и страницам «О компании» и «Сервисные
   центры». Держим в общем файле, чтобы не разошёлся: ровно этим кончились
   .card-text и .btn, когда одни и те же имена лежали в разных файлах. */
.peculiarity {
  max-width: var(--wrap);
  width: 100%;
  padding: 2em;
}

.peculiarity h2 {
  text-align: center;
}

.peculiarity h3 {
  margin: 2em 0 1em;
}

.peculiarity a:link {
  color: #0e4c81;
}

.peculiarity a:visited {
  color: #6e0093;
}

.peculiarity a:hover {
  background: #d1e7fa;
}

.peculiarity a:active {
  background: #0e4c81;
  color: #fff;
}

/* Картинка с обтеканием внутри текста. На узком экране обтекание
   снимается — иначе колонка текста рядом с ней становится нечитаемой. */
.peculiarity-image {
  float: left;
  width: 25em;
  max-width: 100%;
  margin: 0 1.7em .6em 0;
}

.peculiarity-description {
  padding: 0 .625em 1.25em;
  margin: 0 auto 1.25em;
}

.peculiarity-description p {
  padding: 0 2.5em;
}

@media (max-width: 48em) {
  .peculiarity {
    padding: .625em;
  }

  .peculiarity h3 {
    text-align: center;
  }

  .peculiarity-image {
    float: none;
    width: 100%;
    margin: 0 0 1em;
  }

  .peculiarity-description {
    padding: .625em 1.25em;
    margin: 0 auto;
  }

  .peculiarity-description p {
    padding: 0;
  }
}

/* ---- широкие таблицы --------------------------------------------------- */

/* Обёртка для прокрутки. Нужна везде, где таблица шире колонки: .wrapper
   стоит overflow:hidden, и без обёртки лишние столбцы просто обрезаются
   без всякой возможности до них добраться. */
.table-scroll {
  overflow-x: auto;
  margin: 1.5em 0;
}

/* ---- таблица характеристик -------------------------------------------- */

/*
 * Один вид на весь сайт. Раньше их было три: .tech-table, #tech-table
 * и голые table/td, объявленные по два раза в machine.css и в edm.css —
 * с разным кеглем, высотой и полями. Одна и та же таблица выглядела
 * по-разному в зависимости от того, какой файл подключён к странице,
 * поэтому правила живут здесь, а из тех файлов убраны.
 *
 * Разделы — отдельный <tbody> с шапкой <th colspan="2">. Раньше на их
 * месте стоял <h4> внутри ячейки: таблицу вводит <h2>, уровень h3
 * пропускался, и читалка получала до одиннадцати ложных заголовков
 * документа на страницу станка.
 */
.spec {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.spec th,
.spec td {
  padding: .45em .8em;
  text-align: left;
  vertical-align: top;
  line-height: 1.4;
}

/* Название параметра — заголовок строки, а не обычная ячейка. Вес обычный:
   выделены значения, и делать полужирными обе колонки означало бы
   не выделить ничего. */
.spec th[scope="row"] {
  font-weight: 400;
  color: #333;
}

/* Значения отделены весом, а не выравниванием. По центру их ставить нельзя:
   из 694 значений на страницах станков чистых чисел одиннадцать, остальное —
   «400 кг», «820×680×250 мм», диапазоны. Левый край прыгал бы на каждой
   строке, а колонку читают сверху вниз, сравнивая станки.

   Селектор через соседство с подписью: вес нужен только в паре
   «параметр — значение». В таблицах на несколько колонок (сервисные центры)
   все ячейки равноправны, и там полужирным вышел бы весь текст. */
.spec td {
  color: #220;
}

.spec th[scope="row"] + td {
  font-weight: 500;
}

/* Полосы считаются внутри <tbody>, то есть заново в каждом разделе:
   иначе после строки-раздела чередование сбивается на противоположное. */
.spec tbody tr:nth-child(even) {
  background-color: #f7f9fb;
}

.spec tbody tr:hover {
  background-color: #eef2f6;
}

/* Шапка столбцов — там, где таблица не «параметр/значение», а перечень
   в несколько колонок: сервисные центры. Цвет тот же, что у таблиц
   в статьях, чтобы вид на сайте был один. */
.spec thead th {
  background-color: #145285;
  color: #fff;
  font-weight: 500;
}

/* Серый, а не голубой: синего на странице станка и так вдоволь — шапка,
   заголовки, кнопка. Нейтральная полоса делит таблицу, не притягивая
   к себе взгляд. */
.spec__section th {
  background-color: #e9e9e9;
  color: #145285;
  font-weight: 500;
  padding-top: .7em;
  padding-bottom: .5em;
}

.spec__section:hover {
  background-color: #e9e9e9;
}

/* Первый раздел не отбивается: он и так идёт сразу после заголовка. */
.spec tbody + tbody .spec__section th {
  border-top: 1px solid #d5d5d5;
}

@media (max-width: 48em) {
  .spec th,
  .spec td {
    padding: .4em .5em;
  }
}