.timeline {
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
}
.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 250px 0;
  transition: all 1s;
}
.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 7.5%;
  height: 3px;
  background: #DD871E;
}
.timeline ol li:last-child {
  width: 280px;
}
.timeline ol li:not(:first-child) {
  margin-left: 14px;
}
.timeline ol li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #F45B69;
}
.timeline ol li div {
  position: absolute;
  left: calc(100% + 7px);
  width: 280px;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: black;
  background: #EBF5FF;
}
.timeline ol li div::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}
.timeline ol li:nth-child(odd) div {
  top: -10px;
  transform: translateY(-100%);
  background: #FFF8EB;
}
.timeline ol li:nth-child(odd) div::before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: #FFF8EB transparent transparent transparent;
}
.timeline ol li:nth-child(even) div {
  top: calc(100% + 10px);
}
.timeline ol li:nth-child(even) div::before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent #1874B2;
}