.timeline {
  list-style:none;
  padding:20px 0 20px;
  position:relative;
}
.timeline:before {
  top:0;bottom:0;position:absolute;content:" ";width:10px;background-color:#eaeaea;left:50%;margin-left:-5px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
}
.timeline > li {
  margin-bottom:20px;
  position:relative;
}
.timeline > li:before, .timeline > li:after {
  content:" ";display:table;
}
.timeline > li:after {
  clear:both;
}
.timeline > li:before, .timeline > li:after {
  content:" ";display:table;
}
.timeline > li:after {
  clear:both;
}
.timeline > li > .timeline-panel {
  width:44%;float:left;margin-left:0px!important;border:1px solid #eaeaea;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;padding:20px;position:relative;-webkit-box-shadow:0 1px 6px rgba(150, 150, 150, 0.175);-moz-box-shadow:0 1px 6px rgba(150, 150, 150, 0.175);box-shadow:0 1px 6px rgba(150, 150, 150, 0.175);margin-left:-15px;z-index:11;
}
.timeline > li > .timeline-panel:before {
  position:absolute;top:36px;right:-15px;display:inline-block;border-top:15px solid transparent;border-left:15px solid #eaeaea;border-right:0 solid #eaeaea;border-bottom:15px solid transparent;content:" ";
}
.timeline > li > .timeline-panel:after {
  position:absolute;top:37px;right:-14px;display:inline-block;border-top:14px solid transparent;border-left:14px solid #fff;border-right:0 solid #fff;border-bottom:14px solid transparent;content:" ";
}
.timeline > li > .timeline-badge {
  color:#fff;width:80px;height:80px;line-height:75px;font-size:26px;text-align:center;position:absolute;top:20px;left:50%;margin-left:-35px;background-color:#673AB7;
  z-index:10;
  -webkit-border-top-right-radius:50%;
  -moz-border-radius-topright:50%;
  border-top-right-radius:50%;
  -webkit-border-top-left-radius:50%;
  -moz-border-radius-topleft:50%;
  border-top-left-radius:50%;
  -webkit-border-bottom-right-radius:50%;
  -moz-border-radius-bottomright:50%;
  border-bottom-right-radius:50%;
  -webkit-border-bottom-left-radius:50%;
  -moz-border-radius-bottomleft:50%;
  border-bottom-left-radius:50%;
  border:5px solid # eaeaea;
}
.timeline > li > .timeline-badge i {
  font-size:28px;
}
.timeline > li.timeline-inverted > .timeline-panel {
  float:right;width:44%;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
  border-left-width:0;
  border-right-width:15px;
  left:-15px;
  right:auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
  border-left-width:0;
  border-right-width:14px;
  left:-14px;
  right:auto;
}
.timeline-badge.primary {background-color:#4d9cf8 !important;}
.timeline-badge.success {background-color:#4CAF50!important;}
.timeline-badge.warning {background-color:#FFC107!important;}
.timeline-badge.danger {background-color:#f44336!important;}
.timeline-badge.info {background-color:#03A9F4 !important;}
.timeline-title {margin-top:0;color:inherit;}
.timeline-body >p, .timeline-body >ul {margin-bottom:0;}
  .timeline-body >p + p {margin-top:5px;}
@media (max-width:992px) {
  ul.timeline:before {left:40px;}
  ul.timeline >li >.timeline-panel {
    width:calc(100%-100px) !important;
    width:-moz-calc(100%-100px) !important;
    width:-webkit-calc(100%-100px) !important;
  }
  ul.timeline >li >.timeline-badge {
    left:15px;
    margin-left:0;
    top:16px;}
    ul.timeline >li >.timeline-panel {
    float:right;
  }
  ul.timeline >li >.timeline-panel:before {
    border-left-width:0;
    border-right-width:15px;
    left:-15px;
    right:auto;
  }
  ul.timeline >li >.timeline-panel:after {
    border-left-width:0;
    border-right-width:14px;
    left:-14px;
    right:auto;
  }
}