.main-timeline-section{
  position: relative;
  width: 100%;
  margin:auto;
  height:400px;
}
.main-timeline-section .timeline-start,
.main-timeline-section .timeline-end{
  position: absolute;
  background:#F2635F;
  border-radius:100px;
  top:50%;
  transform: translateY(-50%);
  width:30px;
  height:30px;
}
.main-timeline-section .timeline-end{
  right:0px;
}
.main-timeline-section .conference-center-line{
  position: absolute;
  width:100%;
  height:2px;
  top:50%;
  transform: translateY(-50%);
  background:#D6D6D6;
}
.timeline-article{
  width: 30%;
  position: relative;
  min-height: 300px;
  float:right;
}
.timeline-article .content-date{
  position: absolute;
  top: 35%;
  left: -30px;
  font-size:18px;
}
.timeline-article .meta-date{
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background: #949494;
  border: 5px solid #3B1610;
}
.timeline-article .content-box{
  border: 1px solid #3B1610;
  background-color: #3B1610;
  width: 300px;
  position: absolute;
  top: 60%;
  left: -138px;
  padding: 10px;
  color: white;
}
.timeline-article-top .content-box:before{
  content: " ";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top:-20px;
  border:10px solid transparent;
  border-bottom-color: #3A150F;
}
.timeline-article-bottom .content-date{
  top: 59%;
}
.timeline-article-bottom .content-box{
  top: 0%;
}
.timeline-article-bottom .content-box:before{
  content: " ";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:-20px;
  border:10px solid transparent;
  border-top-color:#3A150F;
}
.timeline-article-bottom .meta-date{
      bottom: -3%;
    top: auto;
}
.timeline-article-bottom .content-date{
    top: 100%;  
}