#timeline {
  width: 100%;
}

/* #timeline div {
  height: 231px;
} */

#timeline div .date {
  border-right: 1px rgba(179, 175, 175, 0.4) solid;
  text-align: right;
}

#timeline div .date:before {
  content: "";
  width: 12px;
  height: 12px;
  background: #e5e5d1;
  position: absolute;
  left: 100%;
  top: 95px;
  border-radius: 100%;
  cursor: pointer;
  margin-left: -6px;
}
#timeline div .text p:last-of-type {
  margin-bottom: 0;
}
#timeline div .date::before {
  content: "";
  width: 20px;
  height: 20px;
  background: #253278;
  position: absolute;
  left: 100%;
  top: 100px;
  border-radius: 100%;
  margin-left: -10px;
}

#timeline div .date h2 {
  margin: 72px 28px 0;
  /* font-size: 55px; */
  font-size: clamp(
    25px,
    25px + (55 - 25) * ((100vw - 600px) / (1920 - 600)),
    55px
  );
  font-weight: bold;

  color: #f4f5f8;
}

#timeline div .date h2 {
  font-size: clamp(
    30px,
    30px + (65 - 30) * ((100vw - 600px) / (1920 - 600)),
    65px
  );
  color: #30a8c1;
}

#timeline div .text {
  margin: 65px 50px;
  width: 50%;
}

#timeline div.active .text {
  display: inherit;
}
#timeline .col-5 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 41.6666666667%;
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}
#timeline .col-7 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 58.3333333333%;
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}
#timeline [class*="col-"] {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
#timeline .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.timeline-title {
  color: #253278;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  margin-bottom: 15px;
}
.timeline-title span {
  color: #30a8c1;
  padding-right: 10px;
}
.timeline-wrapper {
  padding-top: 50px;
}
@media (max-width: 1449px) {
  #timeline div .text {
    width: 70%;
  }
}
@media (max-width: 1199px) {
  #timeline div .text {
    width: 90%;
  }
}
@media (max-width: 991px) {
  #timeline div .text {
    margin: 30px 0 0px 30px;
    width: 80%;
  }
  #timeline div .date::before {
    top: 80px;
  }
  .timeline-wrapper {
    padding-top: 30px;
  }
}

@media (max-width: 576px) {
  .timeline-wrapper {
    padding-top: 20px;
  }
  #timeline div .date h2 {
    margin: 70px 10px 0;
  }
  #timeline .col-7 {
    -ms-flex: 0 0 68.3333333333%;
    flex: 0 0 68.3333333333%;
    max-width: 68.3333333333%;
  }
  #timeline .col-5 {
    -ms-flex: 0 0 31.6666666667%;
    flex: 0 0 31.6666666667%;
    max-width: 31.6666666667%;
  }
  #timeline div .text {
    margin: 30px 0 0px 20px;
  }
}