.timeline {
  position: relative; }
  .timeline .year {
    position: relative;
    font-family: "urban", serif;
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: .46875rem;
    line-height: 1;
    font-size: 3.75rem;
    color: var(--green);
    text-align: center;
    padding-bottom: 60px;
    border-bottom: 2px solid var(--green);
    width: 75%;
    margin: auto; }
    @media all and (min-width: 768px) {
      .timeline .year {
        font-size: 6.25rem; } }
    @media all and (min-width: 1266px) {
      .timeline .year {
        font-size: clamp(6.25rem, calc(1.33rem + 6.22vw), 9.375rem); } }
    @media all and (min-width: 1266px) {
      .timeline .year {
        padding-bottom: clamp(3.75rem, calc(1.78rem + 2.49vw), 5rem); } }
    @media all and (min-width: 500px) {
      .timeline .year {
        width: 80%; } }
    @media all and (min-width: 768px) {
      .timeline .year {
        width: 100%; } }
    .timeline .year .dot {
      display: inline-block;
      width: 15px;
      background-color: var(--green);
      height: 15px;
      position: absolute;
      bottom: -7.5px;
      z-index: 1;
      transform: translateX(-50%);
      left: 51%;
      border-radius: 50%; }
      @media all and (min-width: 1266px) {
        .timeline .year .dot {
          bottom: -8.5px; } }
  .timeline .swiper-outer-wrap {
    display: flex;
    justify-content: space-between;
    position: relative; }
  .timeline .swiper {
    margin: auto; }
    @media all and (min-width: 768px) {
      .timeline .swiper {
        width: 83.33333333%; } }
    @media all and (min-width: 1024px) {
      .timeline .swiper {
        width: 66.6666666667%; } }
    @media all and (min-width: 1266px) {
      .timeline .swiper {
        width: 50%; } }
  .timeline .swiper-slide {
    width: 100%;
    height: auto; }
    .timeline .swiper-slide .content {
      width: 97%;
      margin: auto;
      text-align: center;
      padding-top: 48px; }
      @media all and (min-width: 1266px) {
        .timeline .swiper-slide .content {
          padding-top: clamp(3rem, calc(-0.15rem + 3.98vw), 5rem); } }
  .timeline .swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none; }
  .timeline .swiper-button-prev-icon,
  .timeline .swiper-button-next-icon {
    position: absolute; }
    .timeline .swiper-button-prev-icon svg,
    .timeline .swiper-button-next-icon svg {
      width: 17px;
      height: auto;
      position: relative;
      top: -9px; }
      @media all and (min-width: 768px) {
        .timeline .swiper-button-prev-icon svg,
        .timeline .swiper-button-next-icon svg {
          width: 22px; } }
      @media all and (min-width: 1266px) {
        .timeline .swiper-button-prev-icon svg,
        .timeline .swiper-button-next-icon svg {
          width: 30px; } }
      .timeline .swiper-button-prev-icon svg .st0,
      .timeline .swiper-button-next-icon svg .st0 {
        fill: var(--light_blue); }
      @media all and (min-width: 1266px) {
        .timeline .swiper-button-prev-icon svg,
        .timeline .swiper-button-next-icon svg {
          top: -13px; } }
    .timeline .swiper-button-prev-icon .year,
    .timeline .swiper-button-next-icon .year {
      border-bottom: 0; }
    .timeline .swiper-button-prev-icon:hover .st0,
    .timeline .swiper-button-next-icon:hover .st0 {
      fill: var(--green); }
  .timeline .swiper-button-prev-icon {
    z-index: 22;
    cursor: pointer;
    text-align: left;
    left: 0; }
    @media all and (min-width: 768px) {
      .timeline .swiper-button-prev-icon {
        left: 0%; } }
    @media all and (min-width: 1024px) {
      .timeline .swiper-button-prev-icon {
        left: 8.3333333%; } }
    @media all and (min-width: 1266px) {
      .timeline .swiper-button-prev-icon {
        left: 16%; } }
    .timeline .swiper-button-prev-icon svg {
      rotate: -180deg; }
  .timeline .swiper-button-next-icon {
    z-index: 22;
    cursor: pointer;
    right: 0;
    text-align: right; }
    @media all and (min-width: 768px) {
      .timeline .swiper-button-next-icon {
        right: 0%; } }
    @media all and (min-width: 1024px) {
      .timeline .swiper-button-next-icon {
        right: 8.3333333%; } }
    @media all and (min-width: 1266px) {
      .timeline .swiper-button-next-icon {
        right: 16%; } }

/*# sourceMappingURL=timeline.css.map */