.timeline{
  width: 100%;
}

.timeline-container{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  
}

.bar{
  margin-top: 75px;
  padding:0;
}

.timeline__content{
  list-style-type: none;
  float: left;
  width: 33.33%;
  position: relative;
  text-align: center;
  letter-spacing: 2px;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 2.5rem;
}

.timeline__content:before{
  content: attr(data-date);
  width: 100px;
  height: 100px;
  line-height: 90px;
  border: 3px solid white;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: #1bc205;
  letter-spacing: 0px;
}

.timeline__content:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: white;
  top: 25px;
  left: -50%;
  z-index: -1;
}

.timeline__content:nth-child(3n+1):after{
  content: none;
}

.timeline__content.active{
  color: #333;
}

.timeline__content.active:before{
  border-color: #333;
}

.timeline__content.active + .timeline__content:after{
  background-color: #333;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}