@charset "UTF-8";
/**
needs bootstrap function str-replace()
 */
/**
* Метод дополняет svg-sprite.scss.
* Позволяет получить чистый урл элемента спрайта для использования в псевдоэлементах или background-image
* Example: content: url(get-svg-url('checkmark', $user-variables: (fill: 'tomato')));
* Example: background-image: url(get-svg-url('heart', $user-variables: (stroke: 'red', fill: 'pink')));
*/
/**
вертикальные отступы
для каждого цвета указываются в порядке как в $grid-breakpoints
 */
.desktop-timeline {
  display: block;
  position: relative;
}
.desktop-timeline__container {
  display: block;
  position: relative;
  width: 1920px;
  max-width: 100%;
  margin: 0 auto;
}
.desktop-timeline__chart {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
}
.desktop-timeline .history-timeline {
  position: relative;
  z-index: 1;
}
.desktop-timeline .history-timeline__path {
  position: relative;
  z-index: 2;
  transition: color 0.25s ease, stroke-width 0.25s ease;
}
.desktop-timeline .history-timeline__path.is-active, .desktop-timeline .history-timeline__path:hover {
  color: #A9FFC6;
  stroke-width: 6;
}
.desktop-timeline .history-timeline__path.is-active ~ .history-timeline__year .year-dot, .desktop-timeline .history-timeline__path:hover ~ .history-timeline__year .year-dot {
  color: #A9FFC6;
  r: 12.5px;
}
.desktop-timeline .history-timeline__year {
  position: relative;
  z-index: 3;
}
.desktop-timeline .history-timeline__year .year-dot {
  transition: r 0.25s ease, color 0.25s ease;
}
.desktop-timeline .history-timeline__year .year-dot--animation {
  z-index: 4;
}
.desktop-timeline .history-timeline__year:hover {
  color: #A9FFC6;
}
.desktop-timeline .history-timeline__year:hover .year-dot {
  r: 18.5px !important;
}
.desktop-timeline .history-timeline__year:hover .year-dot--hover {
  r: 13.5px;
}
.desktop-timeline .history-timeline .year-name {
  font-size: 20px;
  line-height: 1.6;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.mobile-timeline {
  display: block;
  position: relative;
  margin-bottom: 80px;
}
.mobile-timeline__bg {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 1658px;
  height: 183px;
}
@media (min-width: 576px) {
  .mobile-timeline__bg {
    height: 298px;
  }
}
@media (min-width: 768px) {
  .mobile-timeline__bg {
    height: 433px;
  }
}
@media (min-width: 992px) {
  .mobile-timeline__bg {
    height: 486px;
  }
}
.mobile-timeline__bg svg {
  max-width: unset;
}
.mobile-timeline__bg .svg-timeline-bg {
  width: 2070px;
  height: 183px;
}
@media (min-width: 576px) {
  .mobile-timeline__bg .svg-timeline-bg {
    width: 3379px;
    height: 320px;
  }
}
@media (min-width: 768px) {
  .mobile-timeline__bg .svg-timeline-bg {
    width: 4926px;
    height: 433px;
  }
}
@media (min-width: 992px) {
  .mobile-timeline__bg .svg-timeline-bg {
    width: 5526px;
    height: 455px;
  }
}
.mobile-timeline__bg .svg-timeline-bg .svg-path {
  display: none;
}
@media (max-width: 575.98px) {
  .mobile-timeline__bg .svg-timeline-bg .svg-path--xs {
    display: block;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .mobile-timeline__bg .svg-timeline-bg .svg-path--sm {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .mobile-timeline__bg .svg-timeline-bg .svg-path--md {
    display: block;
  }
}
@media (min-width: 992px) {
  .mobile-timeline__bg .svg-timeline-bg .svg-path--lg {
    display: block;
  }
}
.mobile-timeline__bg .svg-timeline-bg .years {
  display: none;
}
@media (max-width: 575.98px) {
  .mobile-timeline__bg .svg-timeline-bg .years--xs {
    display: block;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .mobile-timeline__bg .svg-timeline-bg .years--sm {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .mobile-timeline__bg .svg-timeline-bg .years--md {
    display: block;
  }
}
@media (min-width: 992px) {
  .mobile-timeline__bg .svg-timeline-bg .years--lg {
    display: block;
  }
}
.mobile-timeline__bg .svg-timeline-bg .mobile-details-year {
  transition: r 312.5ms ease-in;
}
.mobile-timeline__bg .svg-timeline-bg .mobile-details-year.is-active circle {
  r: 14;
  fill: #A9FFC6;
}
@media (min-width: 576px) {
  .mobile-timeline__bg .svg-timeline-bg .mobile-details-year.is-active circle {
    r: 24;
  }
}
@media (min-width: 992px) {
  .mobile-timeline__bg .svg-timeline-bg .mobile-details-year.is-active circle {
    r: 34;
  }
}
.mobile-timeline__details {
  display: block;
  position: relative;
  background-color: #A9FFC6;
  padding: 27px 24px;
  border-radius: 30px;
  color: #000;
  width: 728px;
  max-width: 100%;
  margin: 0 auto;
  transition: height 312.5ms ease-in;
}
@media (min-width: 576px) {
  .mobile-timeline__details {
    padding: 40px;
  }
}
.mobile-timeline__details .detail-text {
  display: block;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  font-size: 14px;
  line-height: 1.29;
}
@media (min-width: 768px) {
  .mobile-timeline__details .detail-text {
    font-size: 18px;
    line-height: 1.5;
  }
}
.mobile-timeline__details .detail-text.is-active {
  pointer-events: auto;
  position: relative;
  opacity: 1;
}
.mobile-timeline__controls {
  width: 160px;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
@media (min-width: 400px) {
  .mobile-timeline__controls {
    margin-bottom: 24px;
  }
}
@media (min-width: 576px) {
  .mobile-timeline__controls {
    margin-bottom: 24px;
  }
}
@media (min-width: 768px) {
  .mobile-timeline__controls {
    margin-bottom: 24px;
  }
}
@media (min-width: 992px) {
  .mobile-timeline__controls {
    margin-bottom: 48px;
  }
}
@media (min-width: 1200px) {
  .mobile-timeline__controls {
    margin-bottom: 48px;
  }
}
@media (min-width: 1600px) {
  .mobile-timeline__controls {
    margin-bottom: 48px;
  }
}
@media (min-width: 1800px) {
  .mobile-timeline__controls {
    margin-bottom: 48px;
  }
}

.mobile-timeline-slider {
  display: block;
  position: relative;
  margin-bottom: 40px;
  overflow: hidden;
}
@media (min-width: 576px) {
  .mobile-timeline-slider {
    margin-bottom: 60px;
  }
}
@media (min-width: 768px) {
  .mobile-timeline-slider {
    margin-bottom: 80px;
  }
}
.mobile-timeline-slider__wrapper {
  position: relative;
}
.mobile-timeline-slider__slide {
  width: 111px;
  height: 182px;
  flex-shrink: 0;
}
@media (min-width: 576px) {
  .mobile-timeline-slider__slide {
    width: 192px;
    height: 298px;
  }
}
@media (min-width: 768px) {
  .mobile-timeline-slider__slide {
    width: 273px;
    height: 433px;
  }
}
@media (min-width: 992px) {
  .mobile-timeline-slider__slide {
    width: 325px;
    height: 486px;
  }
}
