.timeline-wrapper{padding:48px 0;position:relative;box-sizing:border-box}
.timeline-wrapper .timeline{position:relative;margin:0;padding:0;list-style:none;box-sizing:border-box}
.timeline-wrapper::before{content:"";position:absolute;top:32px;bottom:32px;left:50%;width:6px;transform:translateX(-50%);background:currentColor;opacity:0.12;border-radius:4px}
.timeline-item{position:relative;margin:28px 0;clear:both}
.timeline-item .timeline-content{position:relative;width:46%;padding:12px 16px;border-radius:6px;background:transparent;color:inherit;box-shadow:none;box-sizing:border-box}
.timeline-item .timeline-content h2{font-size:1.05rem;margin:0 0 6px 0;font-weight:600}
.timeline-item .timeline-content p{margin:0;font-size:0.95rem}
.timeline-item:nth-child(odd) .timeline-content{float:left;margin-right:4%}
.timeline-item:nth-child(even) .timeline-content{float:right;margin-left:4%}
.timeline-item .timeline-img{position:absolute;left:50%;top:18px;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:currentColor;opacity:0.9}
.timeline-item .timeline-content::after{content:"";position:absolute;top:26px;width:18px;height:2px;background:currentColor;opacity:0.12}
.timeline-item:nth-child(odd) .timeline-content::after{right:-18px}
.timeline-item:nth-child(even) .timeline-content::after{left:-18px}
.timeline-item .date{position:absolute;top:6px;right:0;font-size:0.85rem;opacity:0.85}

/* mobile */
@media (max-width: 900px){
  /* switch to single-column with main line on left */
  .timeline-wrapper::before{left:36px;transform:none}
  .timeline-item .timeline-img{left:36px;transform:none}
  .timeline-item .timeline-content{width:calc(100% - 84px);float:none;margin:0 0 0 84px;padding:12px}
  .timeline-item .timeline-content::after{display:none}
  .timeline-item .date{position:relative;top:auto;right:auto;margin-top:8px}
  .timeline-item .timeline-content h2{font-size:1rem;font-weight:600;margin-bottom:6px}
}

@media (max-width: 480px){
  /* tighter layout for very small screens */
  .timeline-wrapper{padding:20px 0}
  .timeline-wrapper::before{left:28px}
  .timeline-item .timeline-img{left:28px}
  .timeline-item .timeline-content{width:calc(100% - 64px);margin:0 0 0 64px;padding:10px}
  /* use normal text size for title on very small screens */
  .timeline-item .timeline-content h2{font-size:1rem;font-weight:500}
  .timeline-item .timeline-content p{font-size:0.95rem}
}

/* spacing so footer isn't overlapped */
main .timeline-wrapper{margin-bottom:160px}

/* clearfix to avoid footer overlap and float leaks */
.timeline::after{content:"";display:table;clear:both}

.timeline { position: relative; padding: 60px 0; }

/* remove theme's center line and colored markers */
.timeline::before { display: none !important; }
.timeline .timeline-img { display: none !important; }

.timeline-item { width:100%; margin-bottom: 56px; clear: both; }

.timeline-content {
  position: relative;
  width: 45%;
  padding: 20px 24px;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  color: inherit;
}

.timeline-item:nth-child(odd) .timeline-content {
  float: left;
  margin-left: 0;
  text-align: left;
}

.timeline-item:nth-child(even) .timeline-content {
  float: right;
  margin-right: 0;
  text-align: left;
}

.timeline-content .date { position: absolute; top: 8px; right: 12px; font-size: 0.9rem; opacity: 0.9; }

@media screen and (max-width: 768px) {
  .timeline::before { display:none; }
  .timeline-content { width: calc(100% - 70px); float: none; margin-left: 70px; }
  .timeline-content .date { right: 12px; }
}