:root{
    --pseudo-step-sec-element-top:0;
}
.timeline {
    position: relative;
    margin-top: 55px;
    margin-left: 15px;
  }
  .timeline:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 7px;
    width: 8px;
    height: 100%;
    background-color: #E6E5FF;
    border-radius: 5px;
}
.timeline:after {
    content: "";
    position: absolute;
    top: var(--pseudo-step-sec-element-top);
    left: 7px;
    width: 8px;
    height: 15%;
    background: rgb(99,91,255);
    background: linear-gradient(0deg, rgba(99,91,255,1) 0%, rgba(230,229,255,1) 100%);
    border-radius: 5px;
}  
  .timeline__block {
    position: relative;
    margin-top: 42px;
    margin-bottom: 42px;
    padding-left: 15px;
  }
  .timeline__block:last-child {
    margin-bottom: 3em;
  }
  .timeline__block:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .timeline__midpoint {
    position: absolute;
    top: 6px;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: transparent;
}
  .timeline__midpoint:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 16px;
    width: 15px;
    border-top: 1px solid #c5e1ec;
    display: none;
  }
  
  .timeline__content {
    position: relative;
    margin-left: 20px;
  }
  .timeline__content p + p {
    padding-top: 0;
  }
  .timeline__content:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .timeline__midpoint--highlight > .timeline__year {
    display: none;
  }
  
  /* timeline typography */
  .timeline__content .timeline__year {
    padding-top: 6px;
    color: cadetblue;
    text-align: left;
  }
  
  .timeline__midpoint--highlight .timeline__year {
    color: #fff;
    line-height: 4;
  }
  
  .timeline__year,
  .timeline__midpoint--highlight + .timeline__content {
    font-weight: 600;
  }
  
  .timeline__content > p {
    font-size: 0.88em;
  }
  
  /* timeline layout for desktop */
  @media (min-width: 1024px) {
    section.timeline {
      padding: 0 150px;
    }
  
    .timeline {
      margin-left: 0;
    }
    .timeline:before {
      /* vertical line */
      left: 50%;
      margin-left: -1px;
    }
    .timeline:after {
        left: 50%;
        margin-left: -1px;
    }
    .timeline__midpoint {
      left: 50%;
      margin-left: -8px;
    }
    .timeline__midpoint:before {
      width: 40px;
    }
    .timeline__midpoint:after {
      content: "";
      position: absolute;
      top: 50%;
      right: 16px;
      width: 40px;
      border-top: 1px solid #c5e1ec;
      display: none;
    }
  
    .timeline__midpoint--highlight {
      top: 0;
      width: 76px;
      height: 76px;
      margin-left: -29px;
      margin-left: -38px;
      text-align: center;
    }
    .timeline__midpoint--highlight.no-top-margin {
      margin-top: 0;
    }
    .timeline__midpoint--highlight .timeline__year {
      display: block; display: none;
    }
  
    .timeline__midpoint--highlight:before,
  .timeline__midpoint.timeline__midpoint--highlight:after {
      content: none;
    }
  
    .timeline__midpoint--highlight,
  .timeline__midpoint--highlight + .timeline__content {
      margin-top: 2em;
      margin-bottom: 2em;
    }
  
    .timeline__content {
      width: 50%;
    }
    .timeline__content .timeline__year--mobile {
      display: none;
    }
  
    .timeline__content--left {
      margin-left: -6%;
    }
    .timeline__content--left .timeline__year {
      left: 124%;
    }
  
    .timeline__year {
      position: absolute;
      width: 100%;
      margin-top: 0;
    }
  
    .timeline__text--left {
      padding-right: 25px;
      text-align: right;
    }
  
    .timeline__content--right {
      float: right;
      width: 53%;
      left: 11%;
    }
    .timeline__content--right .timeline__year {
      right: 130%;
      text-align: right;
    }
    .timeline__content--right .timeline__text--right {
      margin-top: 0;
    }
  
    h4.timeline__text--left {
        color: #635BFF;
        font-size: 20px;
    }
    h4.timeline__text--right {
        color: #635BFF;
        font-size: 20px;
    }

    .timeline__img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  
    .timeline__content--left .timeline__img {
      left: 127%;
    }
  
    .timeline__content--right .timeline__img {
      right: 133.5%;
    }
  }