ul.timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
ul.timeline-list:after {
  content: '';
  width: 4px;
  height: 100%;
  position: absolute;
  z-index: 1;
  background-color: #333333;
  top: 0;
}
ul.timeline-list li.timeline-item {
  margin: 0;
  padding: 0;
}
ul.timeline-list li.timeline-item:after {
  content: "";
  display: table;
  clear: both;
}
ul.timeline-list li.timeline-item .timeline-item-wrapper {
  box-sizing: border-box;
  position: relative;
}
ul.timeline-list li.timeline-item .timeline-item-wrapper:after {
  content: "";
  display: table;
  clear: both;
}
ul.timeline-list li.timeline-item .timeline-item-wrapper span.timeline-marker {
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 3px solid #333;
  border-radius: 50%;
}
ul.timeline-list.alternate:after {
  left: 50%;
  transform: translateX(-50%);
}
ul.timeline-list.alternate li.timeline-item .timeline-item-wrapper {
  width: 50%;
}
ul.timeline-list.alternate li.timeline-item.odd .timeline-item-wrapper {
  float: left;
  padding-right: 1rem;
  text-align: right;
}
ul.timeline-list.alternate li.timeline-item.odd .timeline-item-wrapper .timeline-marker {
  right: -8px;
}
ul.timeline-list.alternate li.timeline-item.even .timeline-item-wrapper {
  float: right;
  padding-left: 1rem;
  text-align: left;
}
ul.timeline-list.alternate li.timeline-item.even .timeline-item-wrapper .timeline-marker {
  left: -8px;
}
ul.timeline-list.left:after {
  left: 0;
}
ul.timeline-list.left li.timeline-item .timeline-item-wrapper {
  width: 100%;
  padding-left: 1rem;
  text-align: left;
}
ul.timeline-list.left li.timeline-item .timeline-item-wrapper .timeline-marker {
  left: -6px;
}
ul.timeline-list.right:after {
  right: 0;
}
ul.timeline-list.right li.timeline-item .timeline-item-wrapper {
  width: 100%;
  padding-right: 1rem;
  text-align: right;
}
ul.timeline-list.right li.timeline-item .timeline-item-wrapper .timeline-marker {
  right: -6px;
}
ul.timeline-list.marker-top .timeline-marker {
  top: 0;
}
ul.timeline-list.marker-center .timeline-marker {
  top: 50%;
  transform: translateY(-50%);
}
ul.timeline-list.marker-bottom .timeline-marker {
  bottom: 0;
}