/* The actual timeline (the vertical ruler) */

.timeline {position: relative;max-width: 1000px;margin: 0 auto;}
.timeline h2{background:#00AFEF;font-size:24px;padding:13px 30px;color:#fff;text-align:left;margin-bottom:0px;}
.timeline p{padding:20px 30px;text-align:left;}
.timeline h5{text-align:right;background:#fff;margin:0px;}

/* The actual timeline (the vertical ruler) */

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

/* Container around content */

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

/* The circles on the timeline */

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

/* Place the container to the left */

.left {left: 0;}

/* Place the container to the right */

.right {left: 50%;}

/* Add arrows to the left container (pointing right) */

.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 #00AFEF;}

/* Add arrows to the right container (pointing left) */

.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 #00AFEF transparent transparent;}

/* Fix the circle for containers on the right side */

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

/* The actual content */

.content {padding: 0px 0px;background-color: white;position: relative;border-radius: 6px;-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.19);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.19);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.19);}

/* Media queries - Responsive timeline on screens less than 600px wide */

@media screen and (max-width: 600px) {

/* Place the timelime to the left */

  .timeline::after {left: 31px;}

/* Full-width containers */

  .container-1 { width: 100%;padding-left: 70px;padding-right: 25px;}

/* Make sure that all arrows are pointing leftwards */

  .container-1::before {left: 60px;border: medium solid #00afef;border-width: 10px 10px 10px 0;border-color: $font;}

/* Make sure all circles are at the same spot */

  .left::after, .right::after {left: 15px;}

/* Make all right containers behave like the left ones */

  .right {left: 0%;}
  .timeline h2{font-size:20px !Important;}

}

p{font-weight: 100;}

$font{background: rgba(0,0,0,0.6);}