* {
  box-sizing:border-box;
}

body {
  background-color:#474e5d;
  font-family:Helvetica, sans-serif;
}

.timeline {
  position:relative;
  max-width:1200px;
  margin:0 auto;
}

.timeline::after {
  content:'';
  position:absolute;
  width:6px;
  background-color:#2fb7d1;
  top:0;
  bottom:0;
  left:50%;
  /*margin-left:-3px;*/
}

.TimelineContainer {
  padding:10px 40px;
  position:relative;
  background-color:inherit;
  width:50%;
}

.TimelineContainer::after {
  content:'';
  position:absolute;
  width:25px;
  height:25px;
  right:-17px;
  background-color:white;
  border:4px solid #2fb7d1;
  top:15px;
  border-radius:50%;
  z-index:1;
}

.left {
  left:0px;
}

.right {
  left:50.5%;
}

.left::before {
  content:" ";
  height:0;
  position:absolute;
  top:22px;
  width:0;
  z-index:1;
  right:30px;
  border:medium solid white;
  border-width:10px 0 10px 10px;
  border-color:transparent transparent transparent #2fb7d1;
}

.right::before {
  content:" ";
  height:0;
  position:absolute;
  top:22px;
  width:0;
  z-index:1;
  left:30px;
  border:medium solid white;
  border-width:10px 10px 10px 0;
  border-color:transparent #2fb7d1 transparent transparent;
}

.right::after {
  left:-16px;
}

.content {
  padding:20px 30px;
  background-color:#2fb7d1;
  position:relative;
  border-radius:6px;
}

@media all and (max-width: 600px) {
  .timeline::after {
    left:31px;
  }
}

@media all and (max-width: 600px) {
  .TimelineContainer {
    width:100%;
    padding-left:70px;
    padding-right:25px;
  }
}

@media all and (max-width: 600px) {
  .TimelineContainer::before {
    left:60px;
    border:medium solid white;
    border-width:10px 10px 10px 0;
    border-color:transparent white transparent transparent;
  }
}

@media all and (max-width: 600px) {
  .left::after, .right::after {
    left:15px;
  }
}

@media all and (max-width: 600px) {
  .right {
    left:0%;
  }
}