/*
  Точка входа главной (stylesheet_link_tag 'landing-main'), без Bootstrap.
  Только импорты: в CSS они должны идти до правил, поэтому собственные стили
  вынесены в landing-main-base.css (до шапки) и landing-main-modal.css (после неё).
*/
/**
 * Subsetting command (https://www.zachleat.com/unicode-range-interchange/):
 * fonttools subset suisse-intl-medium.woff2 --unicodes="U+20-5F,U+61-80,U+A9,U+AB,U+AD,U+B7,U+BB,U+401,U+410-44F,U+451,U+2009,U+2013,U+2014,U+201C-201F,U+20BD,U+2116" --layout-features=ccmp,locl,mark,mkmk,kern
 * fonttools subset suisse-intl-regular.woff2 --unicodes="U+20-5F,U+61-80,U+A9,U+AB,U+AD,U+B7,U+BB,U+401,U+410-44F,U+451,U+2009,U+2013,U+2014,U+201C-201F,U+20BD,U+2116" --layout-features=ccmp,locl,mark,mkmk,kern
 */

@font-face {
  font-family: "SuisseIntl";
  font-display: swap;
  src: url(https://dev1.yasno.dev/assets/suisse-intl/suisse-intl-medium.subset-f752fe1c58bd1d2b9e524056ee389dadb8247bca641e7b089203da79dbeda4c8.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "SuisseIntl";
  font-display: swap;
  src: url(https://dev1.yasno.dev/assets/suisse-intl/suisse-intl-regular.subset-8c6e97899daca91fc1490d483910164e0b175edab7f110d427b99674bba9eeeb.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}
/**
 * Subsetting command (https://www.zachleat.com/unicode-range-interchange/):
 * fonttools subset caveat-regular.woff2 --unicodes="U+A,U+20,U+25,U+2C,U+2F,U+32,U+34,U+37,U+39,U+412,U+413,U+418,U+41A,U+41D,U+422,U+430-448,U+44B,U+44C,U+44E,U+44F" --layout-features=ccmp,locl,mark,mkmk,kern
 */
@font-face {
  font-family: "Caveat";
  font-display: swap;
  src: url(https://dev1.yasno.dev/assets/caveat/caveat-regular.subset-c99a6074cb66af5211209904cf1ea72ca592cadf803383b54bd519e5cadf08bb.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
/* Import icons */
/* TODO: использовать <img> вместо background-image */
.icon-logo {
  background-image: url(https://dev1.yasno.dev/assets/logo-c38b04297d1f116bcd4aba74a4285775f3c7ef78155b4309da2df317147671f2.svg);
  display: inline-block;
  height: 26px;
  width: 106px;
}
/* TODO: использовать <img> вместо background-image */
.icon-logo-small {
  background-image: url(https://dev1.yasno.dev/assets/logo-c38b04297d1f116bcd4aba74a4285775f3c7ef78155b4309da2df317147671f2.svg);
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  height: 18px;
  width: 76px;
}
/* TODO: убрать туда, где действительно используется */
.icon-lock {
  background-image: url(https://dev1.yasno.dev/assets/lock-57f73b3d717baf42e652cce98846602b8d54941b0adc4665edc511653254bd8d.svg);
  display: inline-block;
  height: 22px;
  width: 18px;
}
/* Import GDPR cookie popup styles */
.y-gdpr #y__gdpr__container * {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.y-gdpr #y__gdpr__container div,
  .y-gdpr #y__gdpr__container h1,
  .y-gdpr #y__gdpr__container h2,
  .y-gdpr #y__gdpr__container h3,
  .y-gdpr #y__gdpr__container h4,
  .y-gdpr #y__gdpr__container input,
  .y-gdpr #y__gdpr__container p {
    margin: 0;
    padding: 0;
  }
.y-gdpr #y__gdpr__container button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
.y-gdpr #y__gdpr__container #y__modal {
    font-family: inherit;
    padding: 1.875em 2.5em;
    position: fixed;
    z-index: 1500;
    background: #fff;
    color: #000;
    width: 26.3125em;
    bottom: 1.25em;
    right: 1.25em;
    box-shadow: 0 0.625em 1.875em #c4cbda;
    box-shadow: 0 0.625em 1.875em rgba(57, 62, 72, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    border-radius: 0.25em;
    transition: none;
    line-height: initial;
  }
.y-gdpr #y__gdpr__container #y__modal h3 {
    font-size: 24px;
  }
.y-gdpr #y__gdpr__container #y__modal.y__anim {
    transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.4s ease, visibility 0.4s ease;
  }
.y-gdpr #y__gdpr__container #y__modal.y__anim.y__show {
    opacity: 1;
    visibility: visible !important;
    transform: scale(1);
  }
.y-gdpr #y__gdpr__container #y__gdpr__title {
    color: inherit;
    margin: 0 0 0.6em;
    font-weight: 500;
    font-family: "SuisseIntl", Arial, sans-serif;
  }
.y-gdpr #y__gdpr__container #y__gdpr__text {
    margin-bottom: 1.625em;
    font-family: inherit;
    line-height: 1.45em;
  }
.y-gdpr #y__gdpr__container #y__modal .y__link {
    text-decoration: underline;
    background: 0 0;
    border: none;
    outline: 0;
    padding: 0;
    cursor: pointer;
    font-size: 0.9em;
    color: inherit;
  }
@media screen and (max-width: 1000px) {
    .y-gdpr #y__gdpr__container #y__modal {
      width: 100%;
      margin: 0;
      padding: 1.875em 10%;
      right: 0;
      bottom: 0;
      border-radius: 0;
      display: block;
    }
  }
/* Import main page styles */
/*
  Главная (часть landing-main). Только импорты: в CSS они должны идти до правил,
  поэтому части главной обёрнуты в #main-page у себя, а правила вокруг них
  вынесены в main-page/page-before.css, page-layout.css и page-after.css.
*/
body {
  font-family: "SuisseIntl", sans-serif;
}
/* http://meyerweb.com/eric/tools/css/reset/ 
  v2.0 | 20110126
  License: none (public domain)
  */
.css-reset html,
  .css-reset body,
  .css-reset div,
  .css-reset span,
  .css-reset applet,
  .css-reset object,
  .css-reset iframe,
  .css-reset h1,
  .css-reset h2,
  .css-reset h3,
  .css-reset h4,
  .css-reset h5,
  .css-reset h6,
  .css-reset p,
  .css-reset blockquote,
  .css-reset pre,
  .css-reset a,
  .css-reset abbr,
  .css-reset acronym,
  .css-reset address,
  .css-reset big,
  .css-reset cite,
  .css-reset code,
  .css-reset del,
  .css-reset dfn,
  .css-reset em,
  .css-reset img,
  .css-reset ins,
  .css-reset kbd,
  .css-reset q,
  .css-reset s,
  .css-reset samp,
  .css-reset small,
  .css-reset strike,
  .css-reset strong,
  .css-reset sub,
  .css-reset sup,
  .css-reset tt,
  .css-reset var,
  .css-reset b,
  .css-reset u,
  .css-reset i,
  .css-reset center,
  .css-reset dl,
  .css-reset dt,
  .css-reset dd,
  .css-reset ol,
  .css-reset ul,
  .css-reset li,
  .css-reset fieldset,
  .css-reset form,
  .css-reset label,
  .css-reset legend,
  .css-reset table,
  .css-reset caption,
  .css-reset tbody,
  .css-reset tfoot,
  .css-reset thead,
  .css-reset tr,
  .css-reset th,
  .css-reset td,
  .css-reset article,
  .css-reset aside,
  .css-reset canvas,
  .css-reset details,
  .css-reset embed,
  .css-reset figure,
  .css-reset figcaption,
  .css-reset footer,
  .css-reset header,
  .css-reset hgroup,
  .css-reset menu,
  .css-reset nav,
  .css-reset output,
  .css-reset ruby,
  .css-reset section,
  .css-reset summary,
  .css-reset time,
  .css-reset mark,
  .css-reset audio,
  .css-reset video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
/* HTML5 display-role reset for older browsers */
.css-reset article,
  .css-reset aside,
  .css-reset details,
  .css-reset figcaption,
  .css-reset figure,
  .css-reset footer,
  .css-reset header,
  .css-reset hgroup,
  .css-reset menu,
  .css-reset nav,
  .css-reset section {
    display: block;
  }
.css-reset body {
    line-height: 1;
  }
.css-reset ol,
  .css-reset ul {
    list-style: none;
  }
.css-reset blockquote,
  .css-reset q {
    quotes: none;
  }
.css-reset blockquote:before,
  .css-reset blockquote:after,
  .css-reset q:before,
  .css-reset q:after {
    content: "";
    content: none;
  }
.css-reset table {
    border-collapse: collapse;
    border-spacing: 0;
  }
#main-page {
  overflow-x: hidden;
}
#main-page .container {
    margin: 0 auto;
    max-width: 1150px;
    padding: 0 15px;
  }
/*
    Цены прокручиваются вертикальной каруселью: ещё не показанные ждут снизу, активная
    стоит на месте, уже пройденные ушли вверх. Смещение вынесено в переменную, потому что
    правила :checked не должны перезаписывать transform целиком — на мобильных он занят
    горизонтальным центрированием.
  */
#main-page .price__couple,
  #main-page .price__single,
  #main-page .price__children {
    --price-shift-y: 50%;

    position: absolute;
    white-space: nowrap;
    color: #8497a6;
    font-size: 16px;
    letter-spacing: -0.16px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(var(--price-shift-y));
    transition:
      opacity 0.2s ease-in-out,
      transform 0.2s ease-in-out;
  }
@media (max-width: 767px) {
#main-page .price__couple,
  #main-page .price__single,
  #main-page .price__children {
      /* На мобильных цена только проявляется, без карусели: transform занят центрированием */
      left: 50%;
      transform: translateX(-50%);
      font-size: 14px;
      line-height: 20px;
      letter-spacing: -0.08px
  }
    }
/* Активная цена — на месте */
#main-page .banner__toggle_single:checked ~ .banner__info > .price__single,
  #main-page .banner__toggle_couple:checked ~ .banner__info > .price__couple,
  #main-page .banner__toggle_children:checked ~ .banner__info > .price__children {
    --price-shift-y: 0;

    opacity: 1;
    pointer-events: auto;
  }
/* Цены левее активной уже прокручены вверх */
#main-page .banner__toggle_couple:checked ~ .banner__info > .price__single,
  #main-page .banner__toggle_children:checked ~ .banner__info > .price__single,
  #main-page .banner__toggle_children:checked ~ .banner__info > .price__couple {
    --price-shift-y: -50%;
  }
/* Активный пункт — белый фон + тёмный текст Medium (макет 3851:3027) */
#main-page .banner__toggle_single:checked ~ .banner__container ._single,
  #main-page .banner__toggle_couple:checked ~ .banner__container ._couple,
  #main-page .banner__toggle_children:checked ~ .banner__container ._children {
    background: #fff;
    color: #1a2833;
    font-weight: 500;
    line-height: 22px;
    border-radius: 12px;
  }
@media (max-width: 767px) {
#main-page .banner__toggle_single:checked ~ .banner__container ._single,
  #main-page .banner__toggle_couple:checked ~ .banner__container ._couple,
  #main-page .banner__toggle_children:checked ~ .banner__container ._children {
      line-height: 20px;
      border-radius: 9px
  }
    }
#main-page .banner {
    position: relative;
    background-color: #f0f2f5;
    overflow: hidden;
    font-weight: 500;
  }
#main-page .banner__actions {
      display: inline-flex;
      flex-direction: column;
    }
@media (max-width: 767px) {
#main-page .banner__actions {
        width: 100%
    }
      }
#main-page .banner__mobile-sign {
      display: none;
      justify-content: flex-start;
      position: relative;
      left: 14px;
      top: 21px;
      margin-bottom: 30px;
    }
#main-page .banner__mobile-sign-line {
        position: absolute;
        right: -73px;
        top: -18px;
      }
#main-page .banner__mobile-sign-text {
        position: relative;
        font-family: "Caveat";
        font-weight: 600;
        font-size: 16px;
        line-height: 15px;
        text-align: center;
        color: #45a7f5;
      }
#main-page .banner__mobile-sign-text-wrap {
          transform: rotate(-14.69deg);
          display: inline-block;
        }
@media (max-width: 767px) {
#main-page .banner__mobile-sign {
        display: flex
    }
      }
#main-page .banner__toggle {
      display: none;
    }
#main-page .banner__container {
      /*
        Ширина не задана: в баннере это блочный контейнер и он занимает всю ширину родителя,
        в подвале — флекс-элемент с align-items: center, поэтому там сжимается по контенту
      */
      display: flex;
      align-items: center;
      justify-content: center;
      height: 56px;
      box-sizing: border-box;
      border: 1px solid #dae0e5;
      border-radius: 12px;
      background: #f3f5f6;
    }
@media (max-width: 767px) {
#main-page .banner__container {
        width: 100%;
        height: 48px;
        border-radius: 8px
    }
      }
#main-page .banner__container label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* Базис по контенту → ширины разные, под текст; grow разбирает остаток */
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        padding: 8px 20px;
        border-radius: 10px;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: -0.28px;
        font-weight: 400;
        color: #8497a6;
        white-space: nowrap;
        cursor: pointer;
        box-sizing: border-box;
        transition:
          background-color 0.2s,
          color 0.2s;
      }
/* Ховер цепляет только неактивные: у активного правило выше по специфичности */
@media (hover: hover) {
          #main-page .banner__container label:hover {
            background-color: rgba(255, 255, 255, 0.2);
            color: #1a2833;
          }
        }
/* Резервируем ширину под Medium — чтобы блок не «дышал» при смене типа */
#main-page .banner__container label::after {
          content: attr(data-label);
          height: 0;
          overflow: hidden;
          visibility: hidden;
          font-weight: 500;
        }
@media (max-width: 767px) {
#main-page .banner__container label {
          padding: 8px 16px;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: -0.16px;
          border-radius: 10px
      }
        }
#main-page .banner__bgs {
      position: absolute;
      width: 609px;
      right: 0;
      top: 50px;
      bottom: 100px;
    }
@media screen and (max-width: 1200px) {
#main-page .banner__bgs {
        left: 600px;
        right: auto
    }
      }
@media (max-width: 767px) {
#main-page .banner__bgs {
        width: 100%;
        left: 0;
        bottom: 0;
        top: auto
    }
      }
#main-page .banner__note {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%;
    }
@media (max-width: 767px) {
#main-page .banner__note {
        display: none
    }
      }
#main-page .banner__note img {
        width: 100%;
      }
@media (max-width: 767px) {
#main-page .banner__note img {
          width: auto;
          height: 100%
      }
        }
#main-page .banner__phone {
      position: absolute;
      bottom: 55px;
      width: 246px;
      left: 0;
    }
@media (max-width: 991px) {
#main-page .banner__phone {
        left: 48px
    }
      }
@media (max-width: 767px) {
#main-page .banner__phone {
        display: flex;
        justify-content: flex-end;
        position: relative;
        width: auto;
        inset: auto;
        top: -17px
    }
      }
#main-page .banner__phone img {
        width: 100%;
      }
@media (max-width: 767px) {
#main-page .banner__phone img {
          width: auto
      }
        }
#main-page .banner__content {
      padding: 90px 0 250px;
      padding-top: 85px;
      padding-bottom: 179px;
    }
@media (max-width: 767px) {
#main-page .banner__content {
        padding: 40px 0 285px
    }
      }
#main-page .banner__title {
      max-width: 640px;
      margin-bottom: 35px;
      font-size: 56px;
      line-height: 64px;
      font-weight: 500;
      color: #141414;
    }
#main-page .banner__title-h1 {
        max-width: 640px;
        font-size: 56px;
        line-height: 58px;
        color: #141414;
      }
@media (max-width: 767px) {
#main-page .banner__title-h1 {
          font-size: 24px;
          line-height: 26px
      }
        }
@media (max-width: 767px) {
#main-page .banner__title {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 21px
    }
      }
#main-page .banner__slider {
      max-height: 128px;
      overflow: hidden;
    }
@media (max-width: 767px) {
#main-page .banner__slider {
        max-height: 64px
    }
      }
#main-page .banner__wrapper {
      transition: transform 0.3s;
    }
#main-page .banner__wrapper_couple,
      #main-page .banner__wrapper_children {
        display: none;
      }
/*
      Радиокнопки стоят в разметке ниже фраз, поэтому набор под отмеченный пункт выбирает :has().
      Встроенный скрипт отмечает сохранённый пункт до отрисовки — фразы не переключаются на глазах
    */
#main-page .banner:has(.banner__toggle_couple:checked) .banner__wrapper_single,
    #main-page .banner:has(.banner__toggle_children:checked) .banner__wrapper_single {
      display: none;
    }
#main-page .banner:has(.banner__toggle_couple:checked) .banner__wrapper_couple,
    #main-page .banner:has(.banner__toggle_children:checked) .banner__wrapper_children {
      display: block;
    }
#main-page .banner__slide {
      color: #45a7f5;
      height: 128px;
      line-height: 58px;
    }
@media (max-width: 767px) {
#main-page .banner__slide {
        height: 64px;
        line-height: 26px
    }
      }
#main-page .banner__btn {
      display: inline-block;
      padding: 18px 23px;
      margin-bottom: 10px;
      font-size: 20px;
      background-color: #45a7f5;
      color: #fff;
      border-radius: 8px;
      border: 2px solid #45a7f5;
      text-decoration: none;
      transition:
        color 0.3s,
        background-color 0.3s;
      min-width: 356px;
      text-align: center;
      line-height: 20px;
    }
@media (min-width: 768px) {
#main-page .banner__btn {
        height: 64px;
        display: inline-flex;
        align-items: center;
        justify-content: center
    }
      }
@media (max-width: 767px) {
#main-page .banner__btn {
        min-width: 0;
        width: 100%;
        font-weight: bold;
        font-size: 16px
    }
      }
#main-page .banner__btn:hover {
        color: #45a7f5;
        background-color: #f0f2f5;
      }
@media (max-width: 767px) {
#main-page .banner__btn {
        padding: 10px 18px
    }
      }
#main-page .banner__info {
      font-weight: 400;
      font-size: 16px;
      line-height: 18px;
      margin: 0px 0 47px;
      min-height: 30px;
      color: #687077;
      display: flex;
      justify-content: center;
    }
@media (max-width: 767px) {
#main-page .banner__info {
        font-size: 12px;
        margin-top: -8px;
        margin-bottom: 30px
    }
      }
#main-page .banner__sign {
      position: absolute;
      bottom: 10px;
      left: -272px;
    }
@media (max-width: 767px) {
#main-page .banner__sign {
        bottom: 400px;
        left: auto;
        right: 15px
    }
      }
#main-page .banner__sign-line {
      position: absolute;
      right: -75px;
      bottom: -47px;
      width: 135px;
      height: 36px;
    }
#main-page .banner__sign-line img {
        width: 100%;
      }
@media (max-width: 767px) {
#main-page .banner__sign-line {
        display: none
    }
      }
#main-page .banner__sign-text {
      font-family: "Caveat", sans-serif;
      font-weight: 600;
      font-size: 24px;
      line-height: 24px;
      text-align: center;
      color: #45a7f5;
      transform: rotate(-13.65deg);
    }
@media (max-width: 767px) {
#main-page .banner__sign-text {
        display: none
    }
      }
#main-page .sponsors {
    border-top: 1px solid #e6e8eb;
  }
#main-page .sponsors__list {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
    }
#main-page .sponsors__item {
      font-size: 0;
      width: 14.3%;
      height: 104px;
    }
@media (max-width: 767px) {
#main-page .sponsors__item {
        height: 80px
    }
      }
#main-page .sponsors__link {
      position: relative;
      display: inline-block;
      height: 100%;
      width: 100%;
      transition: opacity 0.3s;
    }
#main-page .sponsors__link:hover {
        opacity: 0.5;
      }
#main-page .sponsors__link img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        height: 20px;
      }
#main-page .helps {
    border-top: 1px solid #e6e8eb;
  }
@media (max-width: 767px) {
#main-page .helps {
      padding-top: 56px
  }
    }
#main-page .helps__content {
      padding: 145px 0 110px;
    }
@media (max-width: 767px) {
#main-page .helps__content {
        padding: 30px 0 53px
    }
      }
#main-page .helps__title {
      margin-bottom: 70px;
      color: #141414;
      font-size: 56px;
      line-height: 64px;
      font-weight: 500;
      text-align: center;
    }
#main-page .helps__title span {
        color: #2f97eb;
      }
@media (min-width: 768px) {
#main-page .helps__title {
        position: relative;
        bottom: 29px
    }
      }
@media (max-width: 767px) {
#main-page .helps__title {
        font-size: 24px;
        line-height: 26px;
        margin-bottom: 83px;
        text-align: left
    }

        #main-page .helps__title br {
          display: none;
        }
      }
#main-page .helps__slider {
      position: relative;
    }
@media (max-width: 767px) {
#main-page .helps__slider {
        padding-bottom: 36px
    }
      }
@media screen and (min-width: 768px) {
#main-page .helps__list {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: flex-start
    }
      }
#main-page .helps__item {
      width: 30%;
      margin-bottom: 75px;
    }
@media (max-width: 767px) {
#main-page .helps__item {
        width: 100%;
        margin-bottom: 0
    }
      }
#main-page .helps__image {
      height: 160px;
      margin-bottom: 25px;
      font-size: 0;
      text-align: center;
    }
#main-page .helps__image img {
        height: 100%;
        max-width: 100%;
      }
@media (max-width: 767px) {
#main-page .helps__image {
        margin-bottom: 20px
    }
      }
#main-page .helps__text {
      font-size: 20px;
      line-height: 32px;
      font-weight: 400;
      color: #141414;
      text-align: center;
    }
@media (max-width: 767px) {
#main-page .helps__text {
        font-size: 16px;
        line-height: 24px
    }
      }
#main-page .helps__actions {
      margin-top: 80px;
      text-align: center;
    }
@media (max-width: 767px) {
#main-page .helps__actions {
        margin-top: 42px
    }
      }
@media (min-width: 768px) {
#main-page .helps__actions {
        margin-top: 10px
    }
      }
#main-page .helps__btn {
      display: inline-block;
      padding: 13px 23px;
      border: 2px solid #45a7f5;
      border-radius: 8px;
      font-size: 20px;
      line-height: 25px;
      background-color: #45a7f5;
      color: #fff;
      text-decoration: none;
      transition: color 0.3s, background-color 0.3s;
      white-space: nowrap;
    }
#main-page .helps__btn:hover {
        background-color: transparent;
        color: #45a7f5;
      }
@media (max-width: 767px) {
#main-page .helps__btn {
        padding: 10px 18px;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px
    }
      }
#main-page .helps .swiper-pagination {
      left: 50%;
      transform: translateX(-50%);
    }
@media (max-width: 767px) {
#main-page .helps .swiper-pagination {
        position: absolute;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center
    }

        #main-page .helps .swiper-pagination .swiper-pagination-bullet {
          margin-right: 10px;
          width: 6px;
          height: 6px;
          background: #E6E8EB;
          border-radius: 100%;
          opacity: 1;
        }

          #main-page .helps .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
            width: 8px;
            height: 8px;
            background: #45A7F5;
          }

          #main-page .helps .swiper-pagination .swiper-pagination-bullet:last-child {
            margin-right: 0;
          }
      }
#main-page .therapist {
    background-color: #f0f2f5;
    overflow: hidden;
  }
#main-page .therapist__about-link {
      font-weight: 400;
      font-size: 16px;
      line-height: 32px;
      text-decoration: none;
      color: #2f97eb;
    }
@media (min-width: 768px) {
#main-page .therapist__about-link {
        position: relative;
        bottom: -17px
    }
      }
@media (max-width: 767px) {
#main-page .therapist__about-link {
        line-height: 24px;
        position: relative;
        bottom: 9px
    }
      }
#main-page .therapist__content {
      padding: 145px 0 110px;
    }
@media (min-width: 768px) {
#main-page .therapist__content {
        padding: 145px 0 150px
    }
      }
@media (max-width: 767px) {
#main-page .therapist__content {
        padding: 30px 0 32px
    }
      }
#main-page .therapist__title {
      position: relative;
      margin-bottom: 95px;
      color: #141414;
      font-size: 56px;
      line-height: 64px;
      font-weight: 500;
      text-align: center;
    }
#main-page .therapist__title span {
        color: #2f97eb;
      }
#main-page .therapist__title svg {
        position: absolute;
      }
@media screen and (max-width: 1200px) {
#main-page .therapist__title svg {
          display: none
      }
        }
@media (max-width: 767px) {
#main-page .therapist__title {
        font-size: 24px;
        line-height: 26px;
        margin-bottom: 34px;
        text-align: left
    }

        #main-page .therapist__title br {
          display: none;
        }
      }
#main-page .therapist__mark {
      position: absolute;
      top: -103px;
      right: -75px;
    }
#main-page .therapist__mark.mobile {
        display: none;
      }
@media (max-width: 767px) {
#main-page .therapist__mark {
        display: none;
        top: 80px;
        left: 50%;
        transform: translateX(-50%)
    }
        #main-page .therapist__mark.mobile {
          top: 89px;
          right: -178px;
          display: inline-block;
        }
          #main-page .therapist__mark.mobile img {
            position: relative;
            left: -18px;
            top: 10px;
          }
      }
#main-page .therapist__images {
      position: relative;
      left: 60px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      padding-bottom: 90px;
    }
@media (min-width: 768px) {
      }
@media (max-width: 767px) {
#main-page .therapist__images {
        padding-bottom: 110px;
        left: 30px
    }
      }
#main-page .therapist__image {
      display: inline-block;
      font-size: 0;
      width: 176px;
      position: relative;
    }
@media (min-width: 576px) {
#main-page .therapist__image {
        width: 176px
    }
      }
@media screen and (max-width: 1090px) {
#main-page .therapist__image {
        width: 150px
    }
      }
@media (max-width: 767px) {
#main-page .therapist__image {
        width: 56px
    }
      }
#main-page .therapist__image:nth-child(2) {
        left: -25px;
      }
@media (max-width: 767px) {
#main-page .therapist__image:nth-child(2) {
          left: -15px
      }
        }
#main-page .therapist__image:nth-child(3) {
        left: -48px;
      }
@media (max-width: 767px) {
#main-page .therapist__image:nth-child(3) {
          left: -30px
      }
        }
#main-page .therapist__image:nth-child(4) {
        left: -71px;
      }
@media (max-width: 767px) {
#main-page .therapist__image:nth-child(4) {
          left: -45px
      }
        }
#main-page .therapist__image:nth-child(5) {
        left: -94px;
      }
@media (max-width: 991px) {
#main-page .therapist__image:nth-child(5) {
          display: none
      }
        }
@media (max-width: 767px) {
#main-page .therapist__image:nth-child(5) {
          left: -60px
      }
        }
#main-page .therapist__image img {
        width: 100%;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
      }
#main-page .therapist__image-last {
      position: relative;
      left: -116px;
      display: inline-block;
      border: 8px solid #f0f2f5;
      border-radius: 50%;
      background-color: #fff;

      width: 176px;
      height: 176px;
    }
@media screen and (max-width: 1090px) {
#main-page .therapist__image-last {
        width: 150px;
        height: 150px
    }
      }
@media (max-width: 767px) {
#main-page .therapist__image-last {
        width: 56px;
        height: 56px;
        left: -60px;
        border-width: 2px
    }
      }
#main-page .therapist__image-last span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 32px;
        line-height: 1;
        font-weight: 500;
        color: #141414;
      }
@media (max-width: 767px) {
#main-page .therapist__image-last span {
          font-size: 14px
      }
        }
#main-page .therapist__list {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: flex-start;
    }
@media (max-width: 767px) {
#main-page .therapist__list {
        flex-wrap: wrap
    }
      }
#main-page .therapist__item {
      position: relative;
      width: 30%;
      margin-right: 30px;
      padding: 65px 0 0;
      text-align: center;
      color: #141414;
    }
#main-page .therapist__item:last-child {
        margin-right: 0;
      }
#main-page .therapist__item:last-child .therapist__check:after {
          content: none;
        }
@media (max-width: 767px) {
#main-page .therapist__item {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
        padding: 0 0 0 39px;
        text-align: left
    }

        #main-page .therapist__item:last-of-type:after {
          display: none;
        }

        #main-page .therapist__item:after {
          content: "";
          display: block;
          width: 1px;
          height: calc(100% + 10px);
          background: #bcc4cc;
          position: absolute;
          left: 11px;
          top: 23px;
        }

        #main-page .therapist__item:last-child {
          margin-bottom: 0;
        }
      }
#main-page .therapist__check {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      font-size: 0;
    }
#main-page .therapist__check img {
        position: relative;
        z-index: 1;
      }
#main-page .therapist__check:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 365px;
        height: 0;
        border-top: 1px dashed #b4bcc8;
      }
@media (max-width: 991px) {
#main-page .therapist__check:after {
          width: 25vw
      }
        }
@media (max-width: 767px) {
#main-page .therapist__check:after {
          display: none
      }
        }
@media (max-width: 767px) {
#main-page .therapist__check {
        left: 0;
        transform: none;
        width: 24px
    }
      }
#main-page .therapist__caption {
      margin-bottom: 10px;
      font-size: 20px;
      line-height: 32px;
      font-weight: 500;
    }
@media (max-width: 767px) {
#main-page .therapist__caption {
        display: none
    }
      }
#main-page .therapist__text {
      font-size: 16px;
      line-height: 1.2;
    }
@media (min-width: 768px) {
#main-page .therapist__text {
        font-weight: 400;
        line-height: 23px
    }
      }
@media (max-width: 767px) {
#main-page .therapist__text {
        display: none
    }
      }
#main-page .therapist__mobile-text {
      display: none;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
    }
@media (max-width: 767px) {
#main-page .therapist__mobile-text {
        display: block
    }
      }
#main-page .therapist__actions {
      margin-top: 95px;
      text-align: center;
    }
@media (max-width: 767px) {
#main-page .therapist__actions {
        margin-top: 30px
    }
      }
@media (min-width: 768px) {
#main-page .therapist__actions {
        margin-top: 106px
    }
      }
#main-page .therapist__btn {
      display: inline-block;
      padding: 13px 23px;
      border: 2px solid #45a7f5;
      border-radius: 4px;
      font-size: 20px;
      line-height: 25px;
      background-color: #45a7f5;
      color: #fff;
      text-decoration: none;
      transition:
        color 0.3s,
        background-color 0.3s;
    }
#main-page .therapist__btn:hover {
        background-color: transparent;
        color: #45a7f5;
      }
@media (max-width: 767px) {
#main-page .therapist__btn {
        padding: 10px 18px;
        font-size: 18px;
        line-height: 1
    }
      }
#main-page .therapist .card-body-psychotherapists {
      max-width: 600px;
      font-size: 14px;
      line-height: 24px;
      color: #141414;
      padding: 0 20px;
    }
@media (max-width: 767px) {
#main-page .therapist .card-body-psychotherapists {
        font-size: 16px;
        border-left: 1px solid #bcc4cc;
        text-align: left
    }
      }
#main-page .selection {
    background-color: #fff;
    padding: 115px 0 110px;
  }
#main-page .selection .swiper-slide:last-of-type .selection__check:after {
        display: none;
      }
@media (min-width: 768px) {
#main-page .selection {
      padding: 90px 0 110px
  }
    }
@media (max-width: 767px) {
#main-page .selection {
      padding: 0 0 40px
  }
    }
#main-page .selection__content {
      position: relative;
      padding: 50px 0 0;
    }
@media (max-width: 767px) {
#main-page .selection__content {
        padding: 27px 0 0
    }
      }
#main-page .selection__title {
      margin-bottom: 70px;
      color: #141414;
      font-size: 56px;
      line-height: 64px;
      font-weight: 500;
      text-align: center;
    }
#main-page .selection__title span {
        color: #2f97eb;
      }
@media (max-width: 767px) {
#main-page .selection__title {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 30px;
        text-align: left
    }
      }
#main-page .selection__steps,
    #main-page .selection__steps_mobile {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
    }
@media (max-width: 767px) {
#main-page .selection__steps,
    #main-page .selection__steps_mobile {
        position: absolute;
        top: 155px;
        display: none;
        left: 0;
        right: 0;
        justify-content: space-between
    }
      }
#main-page .selection__steps {
      margin-bottom: 50px;
      margin-top: 93px;
    }
#main-page .selection__steps_mobile {
      display: none;
    }
@media (max-width: 767px) {
#main-page .selection__steps_mobile {
        display: block;
        overflow: hidden
    }
      }
#main-page .selection__wrap {
      position: relative;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: flex-start;
      transition: transform 0.3s;
    }
#main-page .selection__img {
      width: 800px;
    }
@media (max-width: 767px) {
#main-page .selection__img {
        width: 100%
    }
      }
#main-page .selection__step {
      position: relative;
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      margin-right: 60px;
      cursor: pointer;
      font-weight: 500;
      font-size: 18px;
      line-height: 22px;
      color: #7c8ea3;
    }
#main-page .selection__step.--mobile {
        display: none;
        width: 100%;
      }
#main-page .selection__step.--mobile .selection__step-text {
          margin-top: 16px;
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          text-align: center;

          /* grey2 */
          color: #bcc4cc;
        }
@media (max-width: 767px) {
#main-page .selection__step.--mobile {
          display: flex
      }
        }
#main-page .selection__step.active {
        color: #141414;
      }
#main-page .selection__step:last-child {
        margin-right: 0;
      }
#main-page .selection__step.active .selection__check {
          background-image: url(https://dev1.yasno.dev/assets/main-page/selection-check-4862f3aa24f34e2d51c3cc8d22d955190766705a244dac37f5ffb00d40b6787c.svg);
        }
@media (max-width: 767px) {
#main-page .selection__step {
        flex-flow: column wrap;
        align-items: center;
        margin-right: 0;
        width: 220px
    }
      }
#main-page .selection__step-text {
      max-width: 220px;
      font-size: 18px;
      line-height: 22px;
    }
@media (max-width: 767px) {
#main-page .selection__step-text {
        font-size: 16px;
        line-height: 24px;
        text-align: center;
        max-width: auto
    }
      }
#main-page .selection__check {
      position: relative;
      flex-shrink: 0;
      height: 40px;
      width: 40px;
      margin-right: 15px;
      background-image: url(https://dev1.yasno.dev/assets/main-page/selection-uncheck-64bf8278a9defd269a5a031017613ee9273def30085edfa86306c885e4259c38.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
@media (max-width: 767px) {
#main-page .selection__check {
        height: 24px;
        width: 24px;
        margin-right: 0
    }

        #main-page .selection__check::after {
          content: "";
          position: absolute;
          top: 12px;
          left: 24px;
          width: 90vw;
          border-top: 1px solid #f0f2f5;
        }
      }
#main-page .selection__actions {
      margin-top: 96px;
      text-align: center;
    }
@media (max-width: 767px) {
#main-page .selection__actions {
        margin-top: 154px
    }
      }
#main-page .selection__btn {
      display: inline-block;
      padding: 13px 23px;
      border: 2px solid #45a7f5;
      border-radius: 4px;
      font-size: 20px;
      line-height: 25px;
      background-color: #45a7f5;
      color: #fff;
      text-decoration: none;
      transition:
        color 0.3s,
        background-color 0.3s;
    }
#main-page .selection__btn:hover {
        background-color: transparent;
        color: #45a7f5;
      }
@media (max-width: 767px) {
#main-page .selection__btn {
        padding: 10px 18px;
        border-radius: 8px;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px
    }
      }
#main-page .selection__sign {
      position: absolute;
      bottom: 10px;
      right: 50px;
      padding-top: 216px;
    }
@media (max-width: 767px) {
#main-page .selection__sign {
        bottom: 70px
    }
      }
#main-page .selection__sign-line {
      position: absolute;
      top: 64px;
      right: 165px;
      height: 216px;
      width: 78px;
      pointer-events: none;
    }
#main-page .selection__sign-line img {
        width: 100;
      }
@media (max-width: 767px) {
#main-page .selection__sign-line {
        top: 51px;
        height: 295px;
        position: absolute;
        right: -69px;
        width: 258px
    }
      }
#main-page .selection__sign-text {
      font-family: "Caveat", sans-serif;
      font-weight: 500;
      font-size: 24px;
      line-height: 24px;
      text-align: center;
      color: #45a7f5;
      transform: rotate(-6deg);
    }
#main-page .selection__slides {
      position: relative;
      padding: 80px 15px;
      box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
      min-height: 490px;
      overflow: hidden;
      border-radius: 16px;
    }
@media (max-width: 767px) {
#main-page .selection__slides {
        padding: 40px 15px 50px;
        margin-top: 24px;
        min-height: 435px;
        border-radius: 4px
    }
      }
#main-page .selection__mark {
      position: absolute;
      bottom: 32px;
      right: 32px;
      width: 48px;
      height: 48px;
      z-index: 1;
    }
#main-page .selection__caption {
      margin-bottom: 50px;
      font-size: 32px;
      line-break: 1;
      color: #141414;
      text-align: center;
    }
@media (max-width: 767px) {
#main-page .selection__caption {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 25px
    }
      }
#main-page .selection__discuss {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
      max-width: 770px;
      margin: 0 auto;
    }
#main-page .selection__discuss-item {
      padding: 11px 21px;
      border-radius: 32px;
      border: 2px solid #f3f7fd;
      font-size: 20px;
      line-height: 36px;
      background-color: #f3f7fd;
      text-align: center;
      margin: 0 7px 15px;
    }
#main-page .selection__discuss-item:last-child {
        margin-right: 0;
      }
#main-page .selection__discuss-item.active {
        border-color: #2f97eb;
        background-color: transparent;
        color: #2f97eb;
      }
@media (max-width: 767px) {
#main-page .selection__discuss-item {
        padding: 7px 5px;
        font-size: 16px;
        line-height: 24px
    }

        #main-page .selection__discuss-item:nth-child(4) {
          display: none;
        }
      }
#main-page .selection__row {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
      margin-top: 15px;
    }
#main-page .selection__row:first-child {
        margin-top: 0;
      }
#main-page .selection__calendar {
      padding: 15px 5px 20px;
      border: 1px solid #e6e8eb;
      border-radius: 4px;
      width: 145px;
      margin: 0 7px 15px;
    }
#main-page .selection__calendar.active {
        border-color: #2f97eb;
        border-width: 2px;
      }
#main-page .selection__calendar:last-child {
        margin-right: 0;
      }
@media (max-width: 767px) {
#main-page .selection__calendar {
        width: 125px
    }

        #main-page .selection__calendar:nth-child(-n + 4) {
          display: none;
        }
      }
#main-page .selection__calendar-date {
      font-size: 16px;
      line-height: 22px;
      text-align: center;
      color: #969696;
      margin-bottom: 5px;
    }
#main-page .selection__calendar-time {
      font-size: 20px;
      line-height: 24px;
      font-weight: 500;
      text-align: center;
    }
#main-page .selection__therapist {
      width: 128px;
      text-align: center;
      margin-right: 50px;
    }
#main-page .selection__therapist:last-child {
        margin-right: 0;
      }
#main-page .selection__therapist.active .selection__therapist-avatar {
          border-radius: 50%;
          border: 5px solid #2f97eb;
        }
@media screen and (max-width: 940px) {
#main-page .selection__therapist {
        margin-right: 15px
    }
      }
@media (max-width: 767px) {
#main-page .selection__therapist {
        margin: 0 10px 10px
    }
      }
#main-page .selection__therapist-avatar {
      width: 128px;
      height: 128px;
      margin: 0 auto 10px;
    }
#main-page .selection__therapist-avatar img {
        width: 100%;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
      }
@media (max-width: 767px) {
#main-page .selection__therapist-avatar {
        width: 64px;
        height: 64px
    }
      }
#main-page .selection__therapist-name {
      font-weight: 500;
      font-size: 20px;
      line-height: 24px;
    }
#main-page .selection__therapist-exp {
      font-size: 16px;
      line-height: 24px;
      color: #969696;
    }
#main-page .selection__arrows {
      position: absolute;
      top: 35px;
      right: 15px;
      width: 150px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
    }
@media (max-width: 767px) {
#main-page .selection__arrows {
        display: none
    }
      }
#main-page .selection__arrow {
      display: inline-block;
      width: 50px;
      height: 22px;
      font-size: 0;
      background-image: none;
      cursor: pointer;
      transition: opacity 0.3s;
    }
#main-page .selection__arrow:hover {
        opacity: 0.7;
      }
#main-page .selection__arrow--prev {
        transform: rotate(180deg);
      }
#main-page .selection__arrow--next {
        margin-left: 30px;
      }
#main-page .selection__arrow img {
        width: 100%;
      }
#main-page .service {
    background-color: #f0f4f7;
  }
#main-page .service__content {
      padding: 145px 0 110px;
    }
@media (min-width: 768px) {
#main-page .service__content {
        padding: 145px 0 138px
    }
      }
@media (max-width: 767px) {
#main-page .service__content {
        padding: 30px 0 40px
    }
      }
#main-page .service__title {
      margin-bottom: 112px;
      color: #141414;
      font-size: 56px;
      line-height: 64px;
      font-weight: 500;
      text-align: center;
    }
#main-page .service__title span {
        color: #2f97eb;
      }
@media (max-width: 767px) {
#main-page .service__title {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 54px;
        text-align: left
    }

        #main-page .service__title br {
          display: none;
        }
      }
#main-page .service__row {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: stretch;
    }
@media (max-width: 767px) {
#main-page .service__row {
        flex-wrap: wrap
    }
      }
#main-page .service__item {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 100px;
    }
@media (min-width: 768px) {
          #main-page .service__item:nth-of-type(1) .service__info {
            padding-left: 55px;
            position: relative;
            top: 33px;
            left: 15px;
          }
          #main-page .service__item:nth-of-type(2) .service__image {
            position: relative;
            left: 46px;
            bottom: -8px;
          }
          #main-page .service__item:nth-of-type(2) .service__info {
            padding-left: 96px;
            position: relative;
            top: 40px;
            left: 3px;
          }
          #main-page .service__item:nth-of-type(3) .service__image {
            position: relative;
            top: 26px;
            left: 10px;
          }
          #main-page .service__item:nth-of-type(3) .service__info {
            padding-left: 104px;
            padding-top: 98;
          }
          #main-page .service__item:nth-of-type(4) .service__image {
            position: relative;
            top: 33px;
            left: 65px;
          }
          #main-page .service__item:nth-of-type(4) .service__info {
            padding-top: 121px;
            padding-left: 105px;
          }
          #main-page .service__item:nth-of-type(5) .service__image {
            position: relative;
            top: 54px;
            left: 13px;
          }
          #main-page .service__item:nth-of-type(5) .service__info {
            padding-left: 108px;
            padding-top: 166px;
          }
      }
#main-page .service__item:nth-child(2n) {
        flex-direction: row-reverse;
      }
#main-page .service__item:last-child {
        margin-bottom: 0;
      }
@media (max-width: 767px) {
#main-page .service__item {
        flex-wrap: wrap;
        margin-bottom: 50px
    }

        #main-page .service__item:last-child {
          margin-bottom: 50px;
        }
      }
#main-page .service__image {
      position: relative;
      width: 50%;
      font-size: 0;
    }
@media (max-width: 767px) {
#main-page .service__image {
        margin-bottom: 16px;
        width: 100%
    }
        #main-page .service__image img {
          width: 100%;
        }
      }
#main-page .service__image img {
        max-width: 100%;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
      }
@media (max-width: 767px) {
#main-page .service__image img {
          width: auto;
          max-height: 250px;
          max-width: 100%
      }
        }
@media (max-width: 767px) {
#main-page .service__image {
        width: 100%;
        margin-bottom: 20px;
        text-align: center
    }
      }
#main-page .service__image:after {
      content: "";
      position: absolute;
      height: 1px;
      background-color: #bcc4cc;
      left: 0;
      right: 0;
      bottom: 0;
    }
@media (max-width: 767px) {
#main-page .service__image:after {
        display: none
    }
      }
#main-page .service__info {
      width: 50%;
    }
#main-page .service__info-title-for-whom {
        max-width: 270px;
        margin: 0 auto;
      }
@media (min-width: 768px) {
#main-page .service__info-title-for-whom {
          max-width: 100%;
          margin-bottom: 32px !important
      }
        }
@media (max-width: 767px) {
#main-page .service__info {
        width: 100%
    }
      }
#main-page .service__text {
      font-size: 24px;
      line-height: 32px;
      color: #7f868f;
    }
@media (max-width: 767px) {
#main-page .service__text {
        font-size: 16px;
        line-height: 21px
    }
      }
#main-page .service__caption {
      font-size: 32px;
      line-height: 42px;
      font-weight: 500;
      color: #141414;
      margin-bottom: 20px;
    }
@media (max-width: 767px) {
#main-page .service__caption {
        font-weight: 500;
        font-size: 21px;
        line-height: 28px
    }
      }
#main-page .service__actions {
      margin-top: 176px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
#main-page .service__actions .banner__info {
        text-align: center;
        min-width: 170px;
        position: relative;
      }
@media (max-width: 767px) {
#main-page .service__actions {
        margin-top: 10px
    }
      }
#main-page .service__btn {
      display: inline-block;
      padding: 13px 23px;
      border: 2px solid #45a7f5;
      border-radius: 4px;
      font-size: 20px;
      line-height: 25px;
      background-color: #45a7f5;
      color: #fff;
      text-decoration: none;
      transition:
        color 0.3s,
        background-color 0.3s;
    }
@media (min-width: 768px) {
#main-page .service__btn {
        padding: 13px 42px !important
    }
      }
#main-page .service__btn span {
        display: none;
      }
@media (max-width: 767px) {
#main-page .service__btn span {
          display: inline
      }
        }
#main-page .service__btn:hover {
        background-color: transparent;
        color: #45a7f5;
      }
@media (max-width: 767px) {
#main-page .service__btn {
        padding: 10px 18px;
        font-size: 18px;
        line-height: 1
    }
      }
#main-page .review__content {
      padding: 150px 0 105px;
    }
@media (max-width: 767px) {
#main-page .review__content {
        padding: 56px 0 10px
    }
      }
#main-page .review__title {
      margin-bottom: 70px;
      color: #141414;
      font-size: 56px;
      line-height: 64px;
      font-weight: 500;
      text-align: center;
    }
@media (min-width: 768px) {
#main-page .review__title {
        margin-bottom: 147px
    }
      }
#main-page .review__title span {
        color: #2f97eb;
      }
@media (max-width: 767px) {
#main-page .review__title {
        margin-bottom: 30px;
        font-size: 24px;
        line-height: 32px;
        text-align: left
    }

        #main-page .review__title br {
          display: none;
        }
      }
#main-page .review__grid {
      position: relative;
      padding: 0 0 30px;
      max-width: 1024px;
      margin: 0 auto;
      overflow: hidden;
    }
@media (max-width: 767px) {
#main-page .review__grid {
        padding: 0
    }
      }
#main-page .review__arrows {
      position: absolute;
      bottom: 25px;
      right: 0;
      width: 150px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
    }
@media (max-width: 767px) {
#main-page .review__arrows {
        display: none
    }
      }
#main-page .review__arrow {
      display: inline-block;
      width: 50px;
      height: 22px;
      font-size: 0;
      background-image: none;
      cursor: pointer;
      transition: opacity 0.3s;
    }
#main-page .review__arrow:hover {
        opacity: 0.7;
      }
#main-page .review__arrow--prev {
        transform: rotate(180deg);
      }
#main-page .review__arrow--next {
        margin-left: 30px;
      }
#main-page .review__arrow img {
        width: 100%;
      }
#main-page .review__item {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: flex-start;
    }
@media (max-width: 767px) {
#main-page .review__item {
        display: none;
        padding: 15px;
        border: 1px solid #e6e8eb;
        border-radius: 4px
    }

        #main-page .review__item.active {
          display: block;
        }
      }
@media (min-width: 768px) {
#main-page .review__item {
        display: flex
    }
      }
#main-page .review__wrap {
      max-width: 700px;
    }
#main-page .review__text {
      margin-bottom: 25px;
      font-size: 20px;
      line-height: 28px;
      font-weight: 400;
    }
@media (max-width: 767px) {
#main-page .review__text {
        font-size: 16px;
        line-height: 24px
    }
      }
#main-page .review__footer {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
    }
#main-page .review__info {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
    }
#main-page .review__avatar {
      width: 264px;
      height: 264px;
      border: 1px solid #e6e8eb;
      border-radius: 50%;
      margin-right: 15px;
      flex-shrink: 0;
      overflow: hidden;
    }
@media (min-width: 768px) {
#main-page .review__avatar {
        margin-right: 129px
    }
      }
#main-page .review__avatar img {
        width: 100%;
      }
@media (max-width: 767px) {
#main-page .review__avatar {
        display: none
    }
      }
#main-page .review__author-name {
      font-size: 20px;
      line-height: 32px;
      font-weight: 500;
      color: #292929;
    }
@media (max-width: 767px) {
#main-page .review__author-name {
        font-size: 14px;
        line-height: 16px
    }
      }
#main-page .review__author-job {
      font-size: 18px;
      line-height: 31px;
      color: #707070;
    }
@media (max-width: 767px) {
#main-page .review__author-job {
        font-size: 12px;
        line-height: 14px
    }
      }
#main-page .review__more {
      text-align: center;
    }
@media (max-width: 767px) {
#main-page .review__more {
        display: none
    }
      }
#main-page .review__actions {
      display: none;
    }
@media (max-width: 767px) {
#main-page .review__actions {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px
    }
      }
#main-page .review__action {
      display: inline-block;
      padding: 2px;
      border: 2px solid transparent;
      border-radius: 50%;
      font-size: 0;
    }
#main-page .review__action.active {
        border-color: #2f97eb;
      }
#main-page .review__action:nth-child(2) .review__action-ava img {
        top: 95%;
      }
#main-page .review__action:nth-child(3) .review__action-ava img {
        top: 100%;
        left: 70%;
      }
#main-page .review__action-ava {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 40px;
      border: 1px solid #e6e8eb;
      border-radius: 50%;
      overflow: hidden;
    }
#main-page .review__source {
      width: 25px;
      font-size: 0;
      cursor: pointer;
      transition: opacity .3s;
    }
#main-page .review__source:hover {
        opacity: 0.7;
      }
#main-page .review__source a {
        text-decoration: none;
      }
#main-page .review__source img {
        width: 100%;
      }
#main-page .result {
    padding: 110px 0;
    border-top: 1px solid #e6e8eb;
    border-bottom: 1px solid #e6e8eb;
  }
@media (max-width: 767px) {
#main-page .result {
      padding: 15px 0 20px;
      border-bottom: none
  }
    }
#main-page .result__content {
      padding: 80px 15px 95px;
      background-color: #45a7f5;
      border-radius: 8px;
    }
@media (max-width: 767px) {
#main-page .result__content {
        padding: 32px 16px;
        margin-right: -16px;
        margin-left: -16px
    }
      }
#main-page .result__text {
      margin: 0 auto 35px;
      max-width: 940px;
      color: #fff;
      text-align: center;
      font-size: 48px;
      line-height: 64px;
      font-weight: 500;
      text-align: center;
    }
@media (min-width: 768px) {
#main-page .result__text {
        font-weight: 400;
        font-size: 46px;
        line-height: 64px;
        margin: 0 auto 40px
    }
      }
@media (max-width: 767px) {
#main-page .result__text {
        text-align: left;
        margin: 0 0 20px;
        font-weight: 500;
        font-size: 24px;
        line-height: 33px
    }
      }
#main-page .result__actions {
      text-align: center;
    }
@media (max-width: 767px) {
#main-page .result__actions {
        text-align: left
    }
      }
#main-page .result__btn {
      display: inline-block;
      padding: 13px 23px;
      border-radius: 4px;
      font-size: 20px;
      line-height: 25px;
      color: #2f97eb;
      background-color: #fff;
      border: 2px solid #fff;
      text-decoration: none;
      transition: color 0.3s, background-color 0.3s;
      font-weight: 500;
    }
#main-page .result__btn:hover {
        color: #fff;
        background: #45a7f5;
      }
@media (max-width: 767px) {
#main-page .result__btn {
        padding: 10px 18px;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
        border-radius: 8px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px
    }
      }
#main-page .contacts {
    padding: 100px 0;
  }
@media (min-width: 768px) {
#main-page .contacts {
      padding-bottom: 65px
  }
    }
@media (max-width: 767px) {
#main-page .contacts {
      padding: 25px 0
  }
    }
#main-page .contacts__title {
      margin-bottom: 50px;
      text-align: center;
      font-size: 32px;
      line-height: 45px;
      font-weight: 500;
      color: #141414;
    }
@media (max-width: 767px) {
#main-page .contacts__title {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 46px
    }
        #main-page .contacts__title span {
          display: block;
        }
      }
#main-page .contacts__list {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: flex-start;
    }
#main-page .contacts__item {
      margin-right: 40px;
      text-align: center;
    }
@media (max-width: 767px) {
#main-page .contacts__item {
        margin-right: 31px
    }
      }
#main-page .contacts__item:last-child {
        margin-right: 0;
      }
#main-page .contacts__item img {
        width: 55px;
        transition: filter 0.3s;
      }
#main-page .contacts__item:hover img {
          filter: grayscale(1);
        }
#main-page .contacts__link {
      display: inline-block;
      text-decoration: none;
    }
@media (max-width: 767px) {
#main-page .contacts__link-show {
        font-weight: 500;
        font-size: 16px;
        line-height: 140%;
        text-align: center;
        color: #45a7f5
    }
      }
#main-page .contacts__name {
      display: block;
      font-size: 14px;
      line-height: 32px;
      color: #707070;
    }
#main-page .contacts .schedule-desk-text {
      position: absolute;
      right: -139px;
      top: 40px;
    }
@media (max-width: 767px) {
#main-page .contacts .schedule-desk-text {
        display: none
    }
      }
#main-page .main-gifts {
    margin-bottom: 112px;
  }
@media (max-width: 767px) {
#main-page .main-gifts {
      padding: 20px 0 48px;
      margin-bottom: 0
  }
    }
#main-page .main-gifts__content {
      padding: 80px 15px 95px;
      background-color: #f0f4f7;
    }
@media (max-width: 767px) {
#main-page .main-gifts__content {
        padding: 0
    }
      }
@media (min-width: 768px) {
#main-page .main-gifts__content {
        padding: 58px 15px 47px;
        border-radius: 8px
    }
      }
#main-page .main-gifts__bg {
      position: absolute;
      width: 32vw;
      max-width: 340px;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
@media (max-width: 767px) {
#main-page .main-gifts__bg {
        width: 140px;
        top: 30px;
        right: auto;
        left: 50%;
        transform: translateX(-50%)
    }
      }
#main-page .main-gifts__info {
      position: relative;
      max-width: 940px;
      margin: 0 auto;
    }
@media (max-width: 767px) {
#main-page .main-gifts__info {
        text-align: center;
        padding: 150px 15px 40px
    }
      }
#main-page .main-gifts__title {
      margin-bottom: 35px;
      color: #141414;
      font-size: 48px;
      line-height: 64px;
      font-weight: 500;
      text-align: left;
    }
@media (max-width: 767px) {
#main-page .main-gifts__title {
        text-align: center;
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 30px
    }
        #main-page .main-gifts__title br {
          display: none;
        }
      }
#main-page .main-gifts__btn {
      display: inline-block;
      padding: 13px 23px;
      border: 2px solid #45a7f5;
      border-radius: 4px;
      font-size: 20px;
      line-height: 25px;
      color: #fff;
      background-color: #45a7f5;
      text-decoration: none;
      transition: color 0.3s, background-color 0.3s;
    }
#main-page .main-gifts__btn:hover {
        color: #45a7f5;
        background-color: transparent;
      }
@media (max-width: 767px) {
#main-page .main-gifts__btn {
        font-size: 18px;
        line-height: 1;
        padding: 10px 18px
    }
      }
#main-page .statistics {
    position: relative;
  }
#main-page .statistics__list {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: flex-start;
    }
@media (max-width: 767px) {
#main-page .statistics__list {
        flex-flow: wrap
    }
      }
#main-page .statistics__item {
      text-align: center;
      width: 25%;
      padding: 24px 5px 20px;
    }
#main-page .statistics__item img {
        display: none;
      }
@media (max-width: 767px) {
#main-page .statistics__item {
        width: 50%
    }
      }
#main-page .statistics__wrap {
      margin: 0 auto;
      max-width: 315px;
    }
@media (max-width: 767px) {
#main-page .statistics__wrap {
        text-align: left
    }
      }
#main-page .statistics__value {
      font-size: 32px;
      line-height: 40px;
      font-weight: 500;
    }
@media (max-width: 767px) {
#main-page .statistics__value {
        font-size: 21px
    }
      }
#main-page .statistics__text {
      font-size: 20px;
      line-height: 1.2;
      color: #a2adb8;
    }
#main-page .statistics__text span {
        display: none;
      }
@media (max-width: 767px) {
#main-page .statistics__text {
        font-size: 14px
    }

        #main-page .statistics__text span {
          display: block;
        }
      }
#main-page .ysn-main-page-button {
    background: #45a7f5;
    font-weight: 500;
    border-radius: 12px;
  }
@media (min-width: 768px) {
#main-page .ysn-main-page-button {
      padding: 13px 30px
  }
    }
@media (max-width: 767px) {
#main-page .ysn-main-page-button {
      border-radius: 8px;
      height: 48px;
      font-size: 16px;
      line-height: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%
  }
    }
@media (max-width: 767px) {
#main-page .ysn-h2-title {
      font-weight: 500;
      font-size: 24px;
      line-height: 26px
  }
    }
#main-page .header {
    position: relative;
    background-color: #fff;
    font-size: 16px;
    min-height: 80px;
    display: flex;
    align-items: center;
  }
@media (max-width: 1199px) {
#main-page .header {
      max-height: 50px;
      min-height: 50px;
      font-size: 14px
  }
      #main-page .header .header__logo {
        width: 76px;
        height: 18px;
      }
    }
#main-page .header__row {
      align-items: center;
    }
#main-page .header__logo {
      width: 62px;
    }
@media (min-width: 768px) {
#main-page .header__logo {
        width: auto
    }
      }
#main-page .header__link {
      white-space: nowrap;
      color: #1f1f1f;
      transition: color 0.2s;
      padding-right: 0;
      padding-left: 0;
    }
#main-page .header__link:hover {
        color: rgba(31, 31, 31, 0.7);
      }
#main-page .header__link-icon {
        color: #c0c9d2;
        font-size: 16px;
        margin-right: 5px;
        top: -2px;
      }
@media (min-width: 768px) {
#main-page .header__link-icon {
          font-size: 20px;
          margin-right: 10px
      }
        }
@media (max-width: 767px) {
#main-page .header__link {
        display: none
    }
      }
#main-page .header__actions {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
      align-items: center;
    }
#main-page .header__btn {
      display: inline-block;
      margin-left: 30px;
      padding: 6px 15px;
      border: 1px solid #42b2fc;
      border-radius: 4px;
      background-color: #42b2fc;
      font-size: 16px;
      line-height: 20px;
      color: #fff;
      text-decoration: none;
      transition:
        color 0.3s,
        background-color 0.3s;
    }
#main-page .header__btn:hover {
        color: #42b2fc;
        background-color: transparent;
      }
@media (max-width: 1199px) {
#main-page .header__btn {
        font-size: 14px;
        padding: 6px 10px
    }
      }
@media (max-width: 991px) {
#main-page .header__btn {
        padding: 6px 5px
    }
      }
@media (max-width: 767px) {
#main-page .header__btn {
        margin-left: 0;
        margin-right: 30px
    }
      }
#main-page .header__menu-btn {
      display: none;
      position: relative;
      background: none;
      border: none;
      outline: none;
      width: 24px;
      height: 16px;
      cursor: pointer;
      z-index: 5;
    }
#main-page .header__menu-btn span {
        position: absolute;
        display: inline-block;
        height: 2px;
        background-color: #141414;
        left: 0;
        right: 0;
        transition:
          opacity 0.3s,
          transform 0.3s;
      }
#main-page .header__menu-btn span:nth-child(1) {
          top: 0;
        }
#main-page .header__menu-btn span:nth-child(2) {
          top: 50%;
          transform: translateY(-50%);
        }
#main-page .header__menu-btn span:nth-child(3) {
          bottom: 0;
        }
#main-page .header__menu-btn.active span:nth-child(1) {
          top: 7px;
          transform: rotate(45deg);
        }
#main-page .header__menu-btn.active span:nth-child(2) {
          opacity: 0;
        }
#main-page .header__menu-btn.active span:nth-child(3) {
          bottom: 7px;
          transform: rotate(-45deg);
        }
#main-page .header__menu-btn + .dropdown-menu {
        top: 15px !important;
      }
@media (max-width: 767px) {
#main-page .header__menu-btn {
        display: inline-block
    }
      }
#main-page .header__overlay {
      display: none;
    }
@media (max-width: 767px) {
#main-page .header__overlay {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.16);
        opacity: 0;
        z-index: -1;
        visibility: hidden;
        transition: opacity 0.3s
    }
      }
@media (max-width: 767px) {
#main-page .header .col.px-0,
    #main-page .header .col-auto.col-lg-3 {
        position: static
    }
      }
@media (max-width: 767px) {
#main-page .header .col-auto.col-lg-3 .nav-item {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        align-items: center
    }
      }
@media (max-width: 767px) {
#main-page .header .navbar {
        position: absolute;
        top: 0;
        right: 0;
        width: 330px;
        background-color: #fff;
        height: 100vh;
        transform: translateX(-500%);
        opacity: 0;
        z-index: -1;
        visibility: hidden;
        transition:
          opacity 0.3s,
          transform 0.3s
    }
      }
@media (max-width: 767px) {
#main-page .header .navbar-nav {
        flex-flow: column wrap;
        justify-content: flex-start !important;
        font-size: 16px
    }
      }
#main-page .header .dropdown-item {
      color: #212529;
    }
#main-page .header {
    position: relative;
    background-color: #fff;
    font-size: 16px;
    min-height: 80px;
    display: flex;
    align-items: center;
  }
@media (max-width: 1199px) {
#main-page .header {
      max-height: 50px;
      min-height: 50px;
      font-size: 14px
  }
      #main-page .header .header__logo {
        width: 76px;
        height: 18px;
      }
    }
#main-page .header__row {
      align-items: center;
    }
#main-page .header__logo {
      width: 62px;
    }
@media (min-width: 768px) {
#main-page .header__logo {
        width: auto
    }
      }
#main-page .header__link {
      white-space: nowrap;
      color: #1f1f1f;
      transition: color 0.2s;
      padding-right: 0;
      padding-left: 0;
    }
#main-page .header__link:hover {
        color: rgba(31, 31, 31, 0.7);
      }
#main-page .header__link-icon {
        color: #c0c9d2;
        font-size: 16px;
        margin-right: 5px;
        top: -2px;
      }
@media (min-width: 768px) {
#main-page .header__link-icon {
          font-size: 20px;
          margin-right: 10px
      }
        }
@media (max-width: 767px) {
#main-page .header__link {
        display: none
    }
      }
#main-page .header__actions {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
      align-items: center;
    }
#main-page .header__btn {
      display: inline-block;
      margin-left: 30px;
      padding: 6px 15px;
      border: 1px solid #42b2fc;
      border-radius: 4px;
      background-color: #42b2fc;
      font-size: 16px;
      line-height: 20px;
      color: #fff;
      text-decoration: none;
      transition:
        color 0.3s,
        background-color 0.3s;
    }
#main-page .header__btn:hover {
        color: #42b2fc;
        background-color: transparent;
      }
@media (max-width: 1199px) {
#main-page .header__btn {
        font-size: 14px;
        padding: 6px 10px
    }
      }
@media (max-width: 991px) {
#main-page .header__btn {
        padding: 6px 5px
    }
      }
@media (max-width: 767px) {
#main-page .header__btn {
        margin-left: 0;
        margin-right: 30px
    }
      }
#main-page .header__menu-btn {
      display: none;
      position: relative;
      background: none;
      border: none;
      outline: none;
      width: 24px;
      height: 16px;
      cursor: pointer;
      z-index: 5;
    }
#main-page .header__menu-btn span {
        position: absolute;
        display: inline-block;
        height: 2px;
        background-color: #141414;
        left: 0;
        right: 0;
        transition:
          opacity 0.3s,
          transform 0.3s;
      }
#main-page .header__menu-btn span:nth-child(1) {
          top: 0;
        }
#main-page .header__menu-btn span:nth-child(2) {
          top: 50%;
          transform: translateY(-50%);
        }
#main-page .header__menu-btn span:nth-child(3) {
          bottom: 0;
        }
#main-page .header__menu-btn.active span:nth-child(1) {
          top: 7px;
          transform: rotate(45deg);
        }
#main-page .header__menu-btn.active span:nth-child(2) {
          opacity: 0;
        }
#main-page .header__menu-btn.active span:nth-child(3) {
          bottom: 7px;
          transform: rotate(-45deg);
        }
#main-page .header__menu-btn + .dropdown-menu {
        top: 15px !important;
      }
@media (max-width: 767px) {
#main-page .header__menu-btn {
        display: inline-block
    }
      }
#main-page .header__overlay {
      display: none;
    }
@media (max-width: 767px) {
#main-page .header__overlay {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.16);
        opacity: 0;
        z-index: -1;
        visibility: hidden;
        transition: opacity 0.3s
    }
      }
@media (max-width: 767px) {
#main-page .header .col.px-0,
    #main-page .header .col-auto.col-lg-3 {
        position: static
    }
      }
@media (max-width: 767px) {
#main-page .header .col-auto.col-lg-3 .nav-item {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        align-items: center
    }
      }
@media (max-width: 767px) {
#main-page .header .navbar {
        position: absolute;
        top: 0;
        right: 0;
        width: 330px;
        background-color: #fff;
        height: 100vh;
        transform: translateX(-500%);
        opacity: 0;
        z-index: -1;
        visibility: hidden;
        transition:
          opacity 0.3s,
          transform 0.3s
    }
      }
@media (max-width: 767px) {
#main-page .header .navbar-nav {
        flex-flow: column wrap;
        justify-content: flex-start !important;
        font-size: 16px
    }
      }
#main-page .header .dropdown-item {
      color: #212529;
    }
/* Import landing carousel styles (for curators section) */
#main-page .main-page-curators-wrapper .main-page-curators {
      max-width: 1200px;
      margin: 0 auto;
      padding-top: 164px;
      padding-bottom: 145px;
    }
@media (max-width: 1080px) {
#main-page .main-page-curators-wrapper .main-page-curators {
        max-width: 640px
    }
      }
@media (max-width: 767px) {
#main-page .main-page-curators-wrapper .main-page-curators {
        padding-bottom: 37px
    }
      }
@media (max-width: 575px) {
#main-page .main-page-curators-wrapper .main-page-curators {
        padding-top: 35px;
        padding-bottom: 37px;
        padding-left: 15px;
        padding-right: 15px
    }
      }
#main-page .main-page-curators-wrapper .main-page-curators__carousel {
        max-width: 736px;
        margin: 0 auto;
        padding-bottom: 4px;
        margin-top: 64px;
      }
#main-page .main-page-curators-wrapper .main-page-curators__text {
        font-size: 28px;
        line-height: 39px;
        color: #2f97eb;
        margin-top: 0px;
      }
@media (max-width: 575px) {
#main-page .main-page-curators-wrapper .main-page-curators__text {
          font-size: 18px;
          line-height: 25px;
          margin-top: 0
      }
        }
#main-page .main-page-curators-wrapper .main-page-curators__author {
        font-weight: 500;
        font-size: 18px;
        line-height: 140%;
        color: #141414;
        margin-top: 24px;
        margin-bottom: 4px;
      }
@media (max-width: 575px) {
#main-page .main-page-curators-wrapper .main-page-curators__author {
          font-size: 14px;
          line-height: 20px;
          margin-top: 26px;
          margin-bottom: 4px
      }
        }
#main-page .main-page-curators-wrapper .main-page-curators__author-info {
        line-height: 20px;
        margin-top: 1px;
      }
@media (max-width: 575px) {
#main-page .main-page-curators-wrapper .main-page-curators__author-info {
          font-size: 14px;
          line-height: 20px
      }
        }
#main-page .main-page-curators-wrapper .main-page-curators__h1 {
        font-size: 56px;
        line-height: 64px;
        text-align: center;
        color: #141414;
        font-weight: 500;
        margin: 0 auto;
      }
@media (max-width: 575px) {
#main-page .main-page-curators-wrapper .main-page-curators__h1 {
          margin: 0 auto;
          font-weight: 500;
          font-size: 24px;
          line-height: 26px;
          text-align: left;
          max-width: 100%
      }
        }
#main-page .main-page-curators-wrapper .main-page-curators__h1-underline {
          position: relative;
        }
@media (max-width: 575px) {
#main-page .main-page-curators-wrapper .main-page-curators__h1-underline .dash-lg {
              display: none
          }
            }
#main-page .main-page-curators-wrapper .main-page-curators__h1-underline .dash-xs {
            display: none;
            left: -16px;
          }
@media (max-width: 575px) {
#main-page .main-page-curators-wrapper .main-page-curators__h1-underline .dash-xs {
              display: initial;
              left: 0px;
              width: 160px;
              bottom: -14px
          }
            }
#main-page .main-page-curators-wrapper .main-page-curators__h1-underline img {
            position: absolute;
            left: -11px;
            bottom: -19px;
          }
.s-caro-circle,
#main-page .s-caro-circle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 386px;
}
@media (min-width: 576px) {
.s-caro-circle,
#main-page .s-caro-circle {
    min-height: 386px
}
  }
@media (max-width: 575px) {
.s-caro-circle,
#main-page .s-caro-circle {
    min-height: 354px
}
  }
.s-caro-circle__text, #main-page .s-caro-circle__text {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
  }
.s-caro-circle__text.current, #main-page .s-caro-circle__text.current {
      opacity: 1;
      visibility: visible;
      transition: all 0.4s ease;
    }
.s-caro-circle__text-container, #main-page .s-caro-circle__text-container {
    z-index: 1;
    position: relative;
  }
@media (min-width: 576px) {
      .s-caro-circle__text-container .dot-navigation__item, #main-page .s-caro-circle__text-container .dot-navigation__item {
        padding: 0;
      }
    }
@media (min-width: 768px) {
      .s-caro-circle__text-container .dot-navigation__item, #main-page .s-caro-circle__text-container .dot-navigation__item {
        padding: 0;
        margin-top: 55px;
      }
    }
@media (max-width: 575px) {
      .s-caro-circle__text-container .dot-navigation__item, #main-page .s-caro-circle__text-container .dot-navigation__item {
        margin-top: 45px;
        padding-left: 0;
        padding-right: 0;
      }
    }
.progress-bar {
  stroke-dashoffset: 356px;
  stroke-dasharray: 356px, 366px;
  stroke: #45a7f5;
  transition: none;
}
.circle {
  stroke: #e6e8eb;
  transition: all 0.4s;
}
.dot-navigation,
#main-page .dot-navigation {
  display: flex;
}
@media (min-width: 576px) {
.dot-navigation,
#main-page .dot-navigation {
    padding-left: 6px
}
  }
@media (min-width: 768px) {
.dot-navigation,
#main-page .dot-navigation {
    padding-left: 6px
}
  }
.dot-navigation__item, #main-page .dot-navigation__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 60px;
    cursor: pointer;
  }
.dot-navigation__item:last-of-type, #main-page .dot-navigation__item:last-of-type {
      margin-right: 0;
    }
/* code below doesn't work, need to fix */
@media (min-width: 768px) {
.dot-navigation__item, #main-page .dot-navigation__item {
      margin-right: 43px
  }
    }
@media (max-width: 576px) {
.dot-navigation__item, #main-page .dot-navigation__item {
      margin-right: 23px
  }
    }
.dot-navigation__item img, #main-page .dot-navigation__item img {
      opacity: 0.6;
      max-width: 115px;
      width: 100%;
    }
.dot-navigation__item--current img, #main-page .dot-navigation__item--current img {
        opacity: 1;
      }
.dot-navigation__item--current .progress-bar, #main-page .dot-navigation__item--current .progress-bar {
        stroke-dashoffset: 0px !important;
        transition: all linear 11s;
      }
.dot-navigation__item--current .circle, #main-page .dot-navigation__item--current .circle {
        stroke-dashoffset: 0px !important;
        transition: all linear 0.3s;
      }
.dot-navigation__svg, #main-page .dot-navigation__svg {
    position: absolute;
    z-index: 9;
    max-width: 100%;
    transform: scale(1.1) rotate(-90deg);
  }
@media (max-width: 570px) {
.dot-navigation__svg, #main-page .dot-navigation__svg {
      transform: scale(1.1) rotate(-90deg)
  }
    }
.dot-navigation__image, #main-page .dot-navigation__image {
    border-radius: 100%;
  }
.slide-enter-active {
  position: absolute;
}
/* moving */
.company-move {
  transition: all 600ms ease-in-out 50ms;
}
/* appearing */
.company-enter-active {
  transform: translateY(-10px);
  opacity: 0;
  transition: all 50ms ease-out;
}
/* disappearing */
.company-leave-active {
  transition: all 200ms ease-in;
  position: absolute;
  z-index: 0;
}
/* appear at / disappear to */
.company-enter,
.company-leave-to {
  opacity: 0;
}
/* Base styles: fonts, Bootstrap 4 grid replica, typography, header */
/* Base styles for fonts and typography */
html,
body {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: "SuisseIntl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
@media (max-width: 767px) {
html,
body {
    letter-spacing: 0
}
  }
/* Container and grid styles (exact Bootstrap 4 replica) */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
.container {
    max-width: 540px
}
  }
@media (min-width: 768px) {
.container {
    max-width: 720px
}
  }
@media (min-width: 992px) {
.container {
    max-width: 960px
}
  }
@media (min-width: 1200px) {
.container {
    max-width: 1140px
}
  }
/* Grid system (Bootstrap 4 replica) */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.col,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}
.col-1 {
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
.col-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.col-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.col-5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.col-7 {
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
.col-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.col-10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}
.col-11 {
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}
.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}
/* Flexbox utilities */
.d-flex {
  display: flex !important;
}
.flex-column {
  flex-direction: column !important;
}
.align-items-center {
  align-items: center !important;
}
.justify-content-center {
  justify-content: center !important;
}
.justify-content-between {
  justify-content: space-between !important;
}
/* Spacing utilities */
.mt-5 {
  margin-top: 3rem !important;
}
.pt-3 {
  padding-top: 1rem !important;
}
.text-center {
  text-align: center !important;
}
body {
  display: flex;
  flex-direction: column;
  font-family: "SuisseIntl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
}
/* Typography styles */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "SuisseIntl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 500;
  color: #1a2833;
  line-height: 1.2;
}
h1 {
  font-size: 2.5rem;
  font-weight: 500;
}
h2 {
  font-size: 1.8125rem;
  font-weight: 500;
}
h3 {
  font-size: 1.5rem;
  font-weight: 400;
}
h4 {
  font-size: 1.125rem;
  font-weight: 400;
}
h5 {
  font-size: 0.875rem;
  font-weight: 400;
}
/* Links */
a {
  color: #0496f6;
  text-decoration: none;
}
a:hover {
    text-decoration: underline;
  }
/* Header styles */
.header-container {
  width: 100%;
}
.header {
  position: relative;
  z-index: 100;
  background-color: #fff;
  border-bottom: 1px solid #e9ecef;
}
.header__logo {
  width: auto;
}
@media (max-width: 767px) {
.header__logo {
    height: 28px
}
  }
/* Navigation styles */
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
nav li {
    display: inline-block;
  }
nav a {
    color: #333;
    text-decoration: none;
    padding: 0.5rem 1rem;
    display: block;
  }
nav a:hover {
      color: #0496f6;
    }
/*
  Шапка липкая (обёртка в лейауте), из потока не выпадает.
  Класс sticky-header вешает скрипт header.js — от него осталась только тень.
*/
body.sticky-header .header {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/*
  Navigation is now properly controlled via JavaScript
  No need for CSS overrides
*/
/* Import base styles for header buttons */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  /* line 20, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_grid.scss */
  .container-sm,
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  /* line 20, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_grid.scss */
  .container-md,
  .container-sm,
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  /* line 20, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_grid.scss */
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  /* line 20, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_grid.scss */
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1140px;
  }
}
.nav-link {
  color: #1f1f1f;
  display: block;
  text-decoration: none;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.nav-link.active {
    color: #1f1f1f;
    font-weight: 500;
  }
.nav-item a {
  padding: 8px;
}
.header .header__btn {
  padding: 6px 15px;
  border: 1px solid #42b2fc;
  border-radius: 4px;
  background-color: #42b2fc;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s, background-color 0.3s;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.header .header__btn:hover {
    /*
      !important перебивает Tailwind-класс !_text-white-100 на кнопке, иначе текст остаётся
      белым на прозрачном (белом) фоне и не виден. base-styles грузится только на лендинге.
    */
    color: #42b2fc !important;
    background-color: transparent;
  }
@media (max-width: 992px) {
.header .header__btn {
    font-size: 14px;
    padding: 6px 10px
}
  }
@media (max-width: 768px) {
.header .header__btn {
    padding: 6px 5px;
    margin-right: 30px
}
  }
@media (max-width: 576px) {
.header .header__btn {
    margin-left: 0
}
  }
.header {
  position: relative;
  background-color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
}
@media (max-width: 992px) {
.header {
    max-height: 50px;
    min-height: 50px;
    font-size: 14px
}
    .header .header__logo {
      width: 76px;
      height: 18px;
    }
  }
.header__row {
    align-items: center;
  }
.header__logo {
    width: 62px;
  }
@media (min-width: 768px) {
.header__logo {
      width: auto
  }
    }
.header__link {
    white-space: nowrap;
    color: #1f1f1f;
    transition: color 0.2s;
    padding-right: 0;
    padding-left: 0;
  }
.header__link:hover {
      color: rgba(31, 31, 31, 0.7);
    }
.header__link-icon {
      color: c0c9d2;
      font-size: 16px;
      margin-right: 5px;
      top: -2px;
    }
@media (min-width: 768px) {
.header__link-icon {
        font-size: 20px;
        margin-right: 10px
    }
      }
@media (max-width: 576px) {
.header__link {
      display: none
  }
    }
.header__actions {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
  }
.header__btn {
    display: inline-block;
    margin-left: 30px;
    padding: 6px 15px;
    border: 1px solid #42b2fc;
    border-radius: 4px;
    background-color: #42b2fc;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s, background-color 0.3s;
  }
.header__btn:hover {
      color: #42b2fc;
      background-color: transparent;
    }
@media (max-width: 992px) {
.header__btn {
      font-size: 14px;
      padding: 6px 10px
  }
    }
@media (max-width: 768px) {
.header__btn {
      padding: 6px 5px
  }
    }
@media (max-width: 576px) {
.header__btn {
      margin-left: 0;
      margin-right: 30px
  }
    }
.header__menu-btn {
    display: none;
    position: relative;
    background: none;
    border: none;
    outline: none;
    width: 24px;
    height: 16px;
    cursor: pointer;
    z-index: 5;
  }
.header__menu-btn span {
      position: absolute;
      display: inline-block;
      height: 2px;
      background-color: #141414;
      left: 0;
      right: 0;
      transition: opacity 0.3s, transform 0.3s;
    }
.header__menu-btn span:nth-child(1) {
        top: 0;
      }
.header__menu-btn span:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
      }
.header__menu-btn span:nth-child(3) {
        bottom: 0;
      }
.header__menu-btn.active span:nth-child(1) {
        top: 7px;
        transform: rotate(45deg);
      }
.header__menu-btn.active span:nth-child(2) {
        opacity: 0;
      }
.header__menu-btn.active span:nth-child(3) {
        bottom: 7px;
        transform: rotate(-45deg);
      }
@media (max-width: 767.98px) {
.header__menu-btn {
      display: inline-block
  }
    }
.header__overlay {
    display: none;
  }
@media (max-width: 576px) {
.header__overlay {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.16);
      opacity: 0;
      z-index: -1;
      visibility: hidden;
      transition: opacity 0.3s
  }
    }
@media (max-width: 576px) {
.header .col.px-0,
  .header .col-auto.col-lg-3 {
      position: static
  }
    }
@media (max-width: 576px) {
.header .col-auto.col-lg-3 .nav-item {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
      align-items: center
  }
    }
@media (max-width: 576px) {
.header .navbar {
      position: absolute;
      top: 0;
      right: 0;
      width: 330px;
      background-color: #fff;
      height: 100vh;
      transform: translateX(-500%);
      opacity: 0;
      z-index: -1;
      visibility: hidden;
      transition: opacity 0.3s, transform 0.3s
  }
    }
@media (max-width: 576px) {
.header .navbar-nav {
      flex-flow: column wrap;
      justify-content: flex-start !important;
      font-size: 16px
  }
    }
.header .dropdown-item {
    color: #212529;
  }
body {
  font-family: "SuisseIntl", sans-serif;
}
/* /////////////////// */
.dropdown-menu {
  position: absolute;
  top: 8px;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  font-weight: 300;
  position: absolute;
  will-change: transform;
}
/* line 42, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
.dropdown-menu-left {
  right: auto;
  left: 0;
}
/* line 47, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
.dropdown-menu-right {
  right: 0.5rem;
  left: auto;
}
@media (min-width: 576px) {
  /* line 42, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
  .dropdown-menu-sm-left {
    right: auto;
    left: 0;
  }
  /* line 47, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
  .dropdown-menu-sm-right {
    right: 0;
    left: auto;
  }
}
@media (min-width: 768px) {
  /* line 42, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
  .dropdown-menu-md-left {
    right: auto;
    left: 0;
  }
  /* line 47, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
  .dropdown-menu-md-right {
    right: 0;
    left: auto;
  }
}
@media (min-width: 992px) {
  /* line 42, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
  .dropdown-menu-lg-left {
    right: auto;
    left: 0;
  }
  /* line 47, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
  .dropdown-menu-lg-right {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1200px) {
  /* line 42, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
  .dropdown-menu-xl-left {
    right: auto;
    left: 0;
  }
  /* line 47, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
  .dropdown-menu-xl-right {
    right: 0;
    left: auto;
  }
}
/* line 57, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}
/* line 30, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/mixins/_caret.scss */
.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}
/* line 58, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/mixins/_caret.scss */
.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}
/* line 70, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
.dropright .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
}
/* line 30, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/mixins/_caret.scss */
.dropright .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}
/* line 58, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/mixins/_caret.scss */
.dropright .dropdown-toggle:empty::after {
  margin-left: 0;
}
/* line 80, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
.dropright .dropdown-toggle::after {
  vertical-align: 0;
}
/* line 87, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
.dropleft .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.125rem;
}
/* line 30, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/mixins/_caret.scss */
.dropleft .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}
/* line 45, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/mixins/_caret.scss */
.dropleft .dropdown-toggle::after {
  display: none;
}
/* line 49, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/mixins/_caret.scss */
.dropleft .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}
/* line 58, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/mixins/_caret.scss */
.dropleft .dropdown-toggle:empty::after {
  margin-left: 0;
}
/* line 97, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
.dropleft .dropdown-toggle::before {
  vertical-align: 0;
}
/* line 106, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
.dropdown-menu[x-placement^="top"],
.dropdown-menu[x-placement^="right"],
.dropdown-menu[x-placement^="bottom"],
.dropdown-menu[x-placement^="left"] {
  right: auto;
  bottom: auto;
}
/* line 116, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}
/* line 123, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem !important;
  clear: both;
  font-weight: 300;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  text-decoration: none;
}
/* line 17, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/mixins/_hover.scss */
.dropdown-item:hover,
.dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa;
}
/* line 154, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #42b2fc;
}
/* line 161, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
.dropdown-item.disabled,
.dropdown-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}
/* line 173, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
.dropdown-menu.show {
  display: block;
}
/* line 178, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
.dropdown-header {
  display: block;
  padding: 0.5rem 1.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap;
}
/* line 188, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_dropdown.scss */
.dropdown-item-text {
  display: block;
  padding: 0.25rem 1.5rem;
  color: #212529;
}
/* line 4, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_button-group.scss */
.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
/* line 10, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/_button-group.scss */
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  flex: 1 1 auto;
}
/* line 13, ../../../../usr/local/bundle/ruby/3.3.0/gems/bootstrap-4.5.3/assets/stylesheets/bootstrap/mixins/_hover.scss */
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover {
  z-index: 1;
}
.dropdown-toggle::after {
  color: black;
  content: url(https://dev1.yasno.dev/assets/icons/angle-down-148decf8565c5c4e69e64a3252acdd24c5916d3a88e93197d4a58b87491152ee.svg);
  border: none;
  height: 24px;
  width: 24px;
  vertical-align: 0.255em;
}
.dropdown-toggle.active::after {
  transform: rotate(180deg);
}
/*
  Мегаменю шапки — перенос меню нового лендинга (yasno-live/landing).
  Разметка серверная (application/_mega_menu*.html.erb), поэтому стили тут
  глобальные и все классы с префиксом mega-.
  
  Правила вложены в корни .mega-menu и .mega-mobile не для красоты: шапка
  живёт внутри .b__s, а туда целиком импортирован бутстрап (new/new.scss),
  и его `.b__s a`, `.b__s h3` перебивали бы одиночные классы по
  специфичности — ссылки меню, например, красились в синий.
  
  Цвета меню — классами дизайн-системы прямо в разметке (см. партиалы
  application/_mega_menu*): все они есть в токенах Tailwind, второй набор
  имён тут не нужен. Здесь остаются только кривые — их в проекте нет,
  приехали с лендинга. Выбор между ними не вкусовой: --mega-ease (резкий
  старт, долгий выход) — отклик на действие, --mega-ease-soft — появление
  содержимого.
*/
.mega-menu,
.mega-mobile {
  --mega-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mega-ease-soft: cubic-bezier(0.45, 0, 0.25, 1);
}
/* Общий чип-бейдж («За 3 шага», «Новый»): лаймовая подложка, зелёный текст. */
/* --- Десктоп: строка пунктов и панель --- */
.mega-menu {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  justify-content: center;
  flex: 1;
}
/* Ниже 1024 навигация уходит в бургер (.mega-mobile). */
@media (max-width: 1023px) {
.mega-menu {
    display: none
}
  }
.mega-menu .mega-menu__list {
    display: flex;
    /*
      Пункт занимает всю высоту шапки: курсор доходит от текста до панели,
      не покидая пункт, — без этого меню без JS закрывалось бы по дороге.
    */
    align-items: stretch;
    /*
      Шаг между пунктами — как у прежней навигации шапки, где ссылки шли
      без внутренних полей.
    */
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
.mega-menu .mega-menu__item {
    position: relative;
    display: flex;
    align-items: center;
  }
/*
    Пункт и карточка разведены на 8px, и этот зазор перекрыт невидимым
    мостом: иначе курсор по дороге вниз покидал бы пункт и панель
    закрывалась. Задержка намерения (180мс) не даёт панели раскрыться,
    когда курсор просто проезжает полоску под шапкой.
  */
.mega-menu .mega-menu__item::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 8px;
  }
/*
    Триггер-кнопка и обычная ссылка выглядят одинаково: уровень навигации
    один, раскрывается ли за пунктом панель — детали механики. Кегль, цвет
    и ховер приходят классами дизайн-системы из разметки — теми же, что
    были у прежней навигации шапки.
  */
.mega-menu .mega-menu__trigger {
    display: block;
    border: none;
    background: none;
    padding: 0;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
  }
.mega-menu .mega-menu__trigger:hover,
    .mega-menu .mega-menu__trigger:focus {
      text-decoration: none;
    }
/*
    Карточка одна на всю шапку: оверлей под ней, разметку страницы не
    сдвигает — позиционируется от .container шапки и совпадает с ней по
    ширине. Высота задаётся явно (скрипт ставит её по активному телу),
    поэтому переключение разделов плавно меняет высоту, а не переоткрывает
    карточку.
  */
.mega-menu .mega-panel {
    position: absolute;
    /*
      Карточка не приклеена к шапке: 8px воздуха отделяют её от строки
      пунктов, зазор перекрывает мост пункта.
    */
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 100;
    height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    border-radius: 20px;
    box-shadow: 0 24px 56px rgba(26, 40, 51, 0.16);
    text-align: left;
    transition:
      opacity 0.18s var(--mega-ease),
      transform 0.18s var(--mega-ease),
      visibility 0.18s,
      height 0.2s var(--mega-ease);
  }
/*
    На первое открытие высота ставится мгновенно (скрипт снимает класс сразу
    после подстановки) — иначе карточка разворачивалась бы шторкой от нуля.
  */
.mega-menu .mega-panel--no-height-anim {
    transition:
      opacity 0.18s var(--mega-ease),
      transform 0.18s var(--mega-ease),
      visibility 0.18s;
  }
/*
    Тела разделов лежат друг под другом в одной точке: активное видно,
    остальные скрыты, но остаются в разметке — ссылки должен видеть краулер.
    Смена — кроссфейд, карточка при этом не гаснет.
  */
.mega-menu .mega-panel__body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 28px 32px;
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr)) 268px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s linear, visibility 0.15s;
  }
.mega-menu .mega-panel__body.is-active {
    opacity: 1;
    visibility: visible;
  }
.mega-menu .mega-panel__body--no-promo {
    grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr));
  }
/*
    «Для психологов»: одна колонка обычной ширины, остальное — воздух,
    ссылки не растягиваются на всю панель.
  */
.mega-menu .mega-panel__body--no-promo.mega-panel__body--single {
    grid-template-columns: minmax(0, 340px);
  }
/* Колонка — flex, чтобы хвостовая секция могла прижаться к низу. */
.mega-menu .mega-panel__col {
    display: flex;
    flex-direction: column;
  }
/*
    Никаких линий-разделителей: секции внутри колонки отделяются воздухом.
    Две ступени ритма с учётом паддингов пунктов 6+6: 12px внутри группы,
    32px между смысловыми блоками.
  */
.mega-menu .mega-group + .mega-group {
    margin-top: 20px;
  }
/*
    Хвост без заголовка — продолжение своей группы, без секционной дырки:
    «Ведущие психологи» не отрываются от «Запросов». Селектор со смежным
    `+`, иначе правило проигрывает по специфичности соседскому отступу выше.
  */
.mega-menu .mega-group + .mega-group--tail {
    margin-top: 0;
  }
/* Отбивка «на строчку» — зазор в одну строку пункта (сертификаты, отзывы). */
.mega-menu .mega-group + .mega-group--spaced {
    margin-top: 33px;
  }
.mega-menu .mega-group__title {
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: -0.05px;
    margin: 0 0 8px;
  }
.mega-menu .mega-group__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }
.mega-menu .mega-group__list li {
      /*
        display вписан явно: на старом лендинге глобальное правило
        `nav li { display: inline-block }` выстроило бы колонку в строку.
      */
      display: block;
      list-style: none;
    }
.mega-menu .mega-menu__link {
    display: block;
    padding: 6px 0;
    font-size: 15px;
    line-height: 21px;
    letter-spacing: -0.08px;
    /*
      Ховер — цветовой переход в фирменный голубой: без плашек
      и подчёркиваний.
    */
    text-decoration: none;
    transition: color 0.2s ease;
  }
.mega-menu .mega-menu__link:hover,
    .mega-menu .mega-menu__link:focus {
      text-decoration: none;
    }
/*
    Служебные хвосты («Все методы», «Все статьи»…) — мельче и приглушённее,
    чтобы не спорить с содержательными пунктами группы. 14px, а не 13:
    на кегле заголовка группы служебная ссылка читалась заголовком.
  */
.mega-menu .mega-menu__link--secondary {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.05px;
  }
.mega-menu .mega-menu__link--icon {
    display: flex;
    align-items: center;
    gap: 6px;
  }
.mega-menu .mega-menu__link-icon {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    /*
      Иконка вывешена в левое поле (13px + gap 6px): текст пункта
      возвращается на общую левую кромку колонки, межколоночный зазор
      вынос вмещает.
    */
    margin-left: -19px;
  }
.mega-menu .mega-menu__link-text {
    display: block;
  }
.mega-menu .mega-menu__chip {
  display: inline-block;
  vertical-align: 1px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
  background: rgba(55, 254, 20, 0.12);
  color: #499e1f;
  }
/* Подпись — самый фоновый текст пункта, второй строкой. */
.mega-menu .mega-menu__desc {
    display: block;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: -0.05px;
    margin-top: 2px;
  }
/* --- Промокарточка панели --- */
/*
    Голубая подложка, вложенная картинка на радиус меньше — по системной
    сетке радиусов 16/12. Тизер одной высоты с колонками, поэтому при
    переключении панелей его нижняя кромка не прыгает.
  */
.mega-menu .mega-promo {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    border-radius: 16px;
    padding: 8px;
    text-decoration: none;
    transition: scale 0.45s var(--mega-ease), box-shadow 0.45s var(--mega-ease);
  }
.mega-menu .mega-promo:hover,
    .mega-menu .mega-promo:focus {
      text-decoration: none;
    }
.mega-menu .mega-promo:active {
      scale: 0.985;
      transition-duration: 0.09s;
    }
@media (hover: hover) {
      .mega-menu .mega-promo:hover {
        scale: 1.022;
        box-shadow: 0 12px 26px -10px rgba(66, 178, 252, 0.4);
      }
    }
/*
    Обложка забирает всё пространство карточки сверх текста: лишняя высота
    уходит в кроп картинки, а не в дыру под текстом. aspect-ratio — нижняя
    граница, чтобы обложка не схлопывалась при коротких колонках.
  */
.mega-menu .mega-promo__media {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
  }
.mega-menu .mega-promo__media img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }
.mega-menu .mega-promo__body {
    display: block;
    flex: 0 0 auto;
    padding: 12px 8px 8px;
  }
/* Цитатная карточка: тело занимает всю высоту, автор прижат к низу. */
.mega-menu .mega-promo__body--quote {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
.mega-menu .mega-promo__author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
  }
.mega-menu .mega-promo__author img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      -o-object-fit: cover;
         object-fit: cover;
      flex: 0 0 auto;
    }
.mega-menu .mega-promo__tag {
    display: block;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: -0.05px;
    margin-bottom: 4px;
  }
.mega-menu .mega-promo__title {
    display: block;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: -0.2px;
  }
.mega-menu .mega-promo__desc {
    display: block;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: -0.05px;
    margin-top: 4px;
  }
.mega-menu.is-open .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/*
  Пока скрипт не поднялся, высоту карточки никто не считает: она
  раскрывается по содержимому, а нужное тело показывает :has() — по
  наведению (или фокусу) на пункт либо на саму карточку, чтобы курсор мог
  дойти до ссылок. Идентификаторы разделов приходится перечислять руками:
  на JS-пути список не нужен, но новый раздел в хелпере стоит добавить
  и сюда.
*/
.mega-menu:not([data-mega-menu-js]):has(
    [data-mega-item='therapy']:hover,
    [data-mega-item='therapy']:focus-within,
    [data-mega-panel='therapy']:hover,
    [data-mega-panel='therapy']:focus-within
  ) .mega-panel {
      height: auto;
      opacity: 1;
      visibility: visible;
      transform: none;
    }
.mega-menu:not([data-mega-menu-js]):has(
    [data-mega-item='therapy']:hover,
    [data-mega-item='therapy']:focus-within,
    [data-mega-panel='therapy']:hover,
    [data-mega-panel='therapy']:focus-within
  ) .mega-panel__body[data-mega-panel='therapy'] {
      position: relative;
      opacity: 1;
      visibility: visible;
    }
.mega-menu:not([data-mega-menu-js]):has(
    [data-mega-item='journal']:hover,
    [data-mega-item='journal']:focus-within,
    [data-mega-panel='journal']:hover,
    [data-mega-panel='journal']:focus-within
  ) .mega-panel {
      height: auto;
      opacity: 1;
      visibility: visible;
      transform: none;
    }
.mega-menu:not([data-mega-menu-js]):has(
    [data-mega-item='journal']:hover,
    [data-mega-item='journal']:focus-within,
    [data-mega-panel='journal']:hover,
    [data-mega-panel='journal']:focus-within
  ) .mega-panel__body[data-mega-panel='journal'] {
      position: relative;
      opacity: 1;
      visibility: visible;
    }
.mega-menu:not([data-mega-menu-js]):has(
    [data-mega-item='therapists-pro']:hover,
    [data-mega-item='therapists-pro']:focus-within,
    [data-mega-panel='therapists-pro']:hover,
    [data-mega-panel='therapists-pro']:focus-within
  ) .mega-panel {
      height: auto;
      opacity: 1;
      visibility: visible;
      transform: none;
    }
.mega-menu:not([data-mega-menu-js]):has(
    [data-mega-item='therapists-pro']:hover,
    [data-mega-item='therapists-pro']:focus-within,
    [data-mega-panel='therapists-pro']:hover,
    [data-mega-panel='therapists-pro']:focus-within
  ) .mega-panel__body[data-mega-panel='therapists-pro'] {
      position: relative;
      opacity: 1;
      visibility: visible;
    }
/* --- Мобильное меню: бургер и полотно под шапкой --- */
.mega-mobile {
  display: flex;
  align-items: center;

}
/* От 1024 работает десктопная панель — бургер не нужен. */
@media (min-width: 1024px) {
.mega-mobile {
    display: none

}
  }
/*
    Геометрия и цвет — прежней кнопки шапки (.header__menu-btn
    в base-styles): иконка и её место в ряду кнопок не меняются от
    переезда на мегаменю.
  */
.mega-mobile .mega-mobile__burger {
    position: relative;
    display: block;
    width: 24px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    /* У <summary> по умолчанию треугольник-маркер. */
    list-style: none;
  }
.mega-mobile .mega-mobile__burger::-webkit-details-marker {
      display: none;
    }
.mega-mobile .mega-mobile__burger span {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: #141414;
      transition: opacity 0.3s, transform 0.3s;
    }
.mega-mobile .mega-mobile__burger span:nth-child(1) {
        top: 0;
      }
.mega-mobile .mega-mobile__burger span:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
      }
.mega-mobile .mega-mobile__burger span:nth-child(3) {
        bottom: 0;
      }
.mega-mobile[open] .mega-mobile__burger span:nth-child(1) {
      top: 7px;
      transform: rotate(45deg);
    }
.mega-mobile[open] .mega-mobile__burger span:nth-child(2) {
      opacity: 0;
    }
.mega-mobile[open] .mega-mobile__burger span:nth-child(3) {
      bottom: 7px;
      transform: rotate(-45deg);
    }
/*
    Меню открывается под шапкой на весь оставшийся экран: логотип и бургер
    остаются на месте, список скроллится внутри. Тени нет — она ложилась бы
    вверх, на шапку. Боковые поля 15px, как у контейнера остального сайта.
  */
.mega-mobile .mega-mobile__drawer {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    padding: 8px 15px 24px;
    text-align: left;
    animation: mega-mobile-in 0.25s var(--mega-ease-soft) both;
  }
/*
      Ниже 992 шапка ужимается до 50px (header.scss) — меню поднимается
      следом.
    */
@media (max-width: 992px) {
.mega-mobile .mega-mobile__drawer {
      top: 50px
  }
    }
@media (prefers-reduced-motion: reduce) {
.mega-mobile .mega-mobile__drawer {
      animation: none
  }
    }
.mega-mobile .mega-mobile__acc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
    letter-spacing: -0.3px;
    padding: 13px 0;
    cursor: pointer;
    list-style: none;
  }
.mega-mobile .mega-mobile__acc-btn::-webkit-details-marker {
      display: none;
    }
.mega-mobile .mega-mobile__chev {
    width: 11px;
    height: 7px;
    flex: 0 0 auto;
    transition: transform 0.25s var(--mega-ease);
  }
.mega-mobile .mega-mobile__acc[open] .mega-mobile__chev {
    transform: rotate(180deg);
  }
.mega-mobile .mega-mobile__acc-body {
    padding: 2px 0 14px;
  }
/* Группы разделяются воздухом — как секции в десктопной панели, без линий. */
.mega-mobile .mega-mobile__group + .mega-mobile__group {
    margin-top: 20px;
  }
.mega-mobile .mega-mobile__group-title {
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: -0.05px;
    margin: 0 0 2px;
  }
.mega-mobile .mega-mobile__link {
    display: block;
    /* 11px сверху и снизу: 22px строки + 22px паддингов = тач-цель 44px. */
    padding: 11px 0;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.16px;
    text-decoration: none;
  }
.mega-mobile .mega-mobile__link:hover,
    .mega-mobile .mega-mobile__link:focus {
      text-decoration: none;
    }
/*
    Служебные хвосты — тот же принцип, что на десктопе: мельче
    и приглушённее. Тач-цель остаётся 44px.
  */
.mega-mobile .mega-mobile__link--secondary {
    padding: 12px 0;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.05px;
    margin-top: 4px;
  }
.mega-mobile .mega-mobile__link--icon {
    display: flex;
    align-items: center;
    gap: 6px;
  }
/*
      В отличие от десктопной панели иконка не вывешивается в поле: узкий
      экран клипует по горизонтали, и глиф резался бы.
    */
.mega-mobile .mega-mobile__link--icon .mega-menu__link-icon {
      width: 13px;
      height: 13px;
      flex: 0 0 auto;
    }
.mega-mobile .mega-menu__link-text {
    display: block;
  }
.mega-mobile .mega-menu__chip {
  display: inline-block;
  vertical-align: 1px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
  background: rgba(55, 254, 20, 0.12);
  color: #499e1f;
  }
.mega-mobile .mega-menu__desc {
    display: block;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: -0.05px;
    margin-top: 2px;
  }
.mega-mobile .mega-mobile__flat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
    letter-spacing: -0.3px;
    padding: 13px 0;
    text-decoration: none;
  }
.mega-mobile .mega-mobile__flat:hover,
    .mega-mobile .mega-mobile__flat:focus {
      text-decoration: none;
    }
/*
  Над шапкой стоит плашка приложения (66px), меню открывается ниже неё.
  Выше 1024 обнулять не нужно: там скрыт весь .mega-mobile.
*/
body:has(.app-banner) .mega-mobile__drawer {
  top: calc(66px + 50px);
}
@keyframes mega-mobile-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* Bootstrap base modal styles and pre-swiper slider fallbacks */
/* Bootstrap base modal styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
  }
.modal.show .modal-dialog {
    transform: none;
  }
.modal.show {
    display: block;
  }
.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}
@media (min-width: 576px) {
.modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto
}
  }
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}
@media (min-width: 576px) {
.modal-dialog-centered {
    min-height: calc(100% - 3.5rem)
}
  }
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
.modal-backdrop.fade {
    opacity: 0;
  }
.modal-backdrop.show {
    opacity: 0.5;
  }
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}
.modal-header .close {
    padding: 1rem 1rem;
    margin: -1rem -1rem -1rem auto;
    opacity: 0.5;
  }
.modal-header .close:hover {
      opacity: 0.75;
    }
.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: calc(0.3rem - 1px);
  border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer > * {
    margin: 0.25rem;
  }
@media (min-width: 992px) {
.modal-lg {
    max-width: 800px
}
  }
/* Modal styles (copied from modal.scss.erb) */
.modal-content {
  border: 0;
}
.modal-dialog {
  position: relative;
  z-index: 3;
}
.modal-header {
  border-bottom: 0;
  padding: 16px;
}
.modal-header .modal-title {
    font-family: "SuisseIntl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 500;
    color: #1a2833;
    font-size: 18px;
    text-align: center;
    letter-spacing: 0px;
    flex-grow: 2;
    margin-left: 38px;
  }
.modal-header .close {
    display: inline-block;
    cursor: pointer;
    background-image: url(https://dev1.yasno.dev/assets/x.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    width: 38px;
    height: 38px;
    background-color: #f3f6f9;
    border-radius: 19px;
    margin-top: -5px;
    margin-right: -5px;
    border: none;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
  }
.modal-body {
  padding: 16px;
  font-size: 16px;
  line-height: 1.5;
}
.modal-footer {
  border-top: 0;
  padding: 16px;
  text-align: center;
}
.modal-footer .btn {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #42b2fc;
    background-color: #42b2fc;
    color: #fff;
    transition: all 0.3s;
  }
.modal-footer .btn:hover {
      background-color: transparent;
      color: #42b2fc;
    }
/**
 * Скрываем элементы, которые не являются первыми в слайдере,
 * чтобы слайдер корректно отображался до загрузки swiper'а
 */
.selection__slides:not(.swiper-initialized) .selection__slide-wrap > div:not(:first-child), .js-selection-bread-crumbs:not(.swiper-initialized) > .swiper-wrapper > div:not(:first-child) {
    display: none !important;
  }
@media (min-width: 768px) {
  .review__grid:not(.swiper-initialized) .review__item:not(:first-child) {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .helps__slider:not(.swiper-initialized) .helps__list > .helps__item:not(:first-child) {
    display: none !important;
  }

  .sponsors__slider:not(.swiper-initialized) .sponsors__list .sponsors__item:not(:nth-child(-n + 3)) {
    display: none !important;
  }
}