* {box-sizing:border-box;}

.main-content {background-color:#474e5d; width: 100%; max-width: 1200px; margin: 20px auto 0; padding: 0px;  align-items: center; text-align: center; }

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

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

.history{ color: #ffffff; font-size: 25px;}

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

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

.left {left:0;}

.right {left:50%;}

.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 white;}

.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 white transparent transparent;}

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

.content {padding:20px 10px; background-color:white; position:relative; border-radius:6px;}
.content p {font-size: 18px; text-align: left;}

@media screen and (max-width:600px) {
  .timeline::after {left:31px;}
  
  .timeline-container {width:100%; padding-left:63px; padding-right:25px;}
  
  .timeline-container::before {left:53px; border:medium solid white; border-width:10px 10px 10px 0; border-color:transparent white transparent transparent;}
  
  .left::after, .right::after {left:15px;}
  
  .right {left:0%;}
}