/* Timeline Styles
   --------------------------------------------------- */
 
/* Global Styling */
 
.timeline-list { grid-gap:2rem 4rem; position:relative; z-index:2; }
 
.timeline-list:before { border-left:2px solid var(--brand-blue); bottom:0; content:""; display:block; left:0; position:absolute; top:0; transform:translateX(-50%); }
 
.timeline-list:after { background:var(--brand-blue); content:""; display:block; height:2px; left:-.375em; position:absolute; width:.75em; }
 
.timeline-item { margin-left:2em; position:relative; }
 
.timeline-item:before { background:#fff; border:2px solid var(--brand-blue); border-radius:1rem; height:1rem; transform:translateX(-50%) translateY(-50%); width:1rem; }
 
.timeline-item:after,.timeline-item:before { content:""; display:block; left:-2rem; position:absolute; top:2rem; }
 
.timeline-item:after { border-top:2px solid var(--brand-blue-dark); height:1px; right:100%; z-index:-1; }
 
.timeline-item .card-body { padding:2em; }
 
.timeline-date { margin-bottom:.25rem; }
 
.card-wrapper { background:var(--sky-blue-light); }
 
/* Larger Screens and Print */
 
@media print,screen and (min-width:48em) {
  .timeline-list:before { left:50%; }
  .timeline-list:after { left:50%; transform:translateX(-50%); }
  
  .timeline-item { margin-left:0; }
    .timeline-item:nth-of-type(odd):before { left:auto; right:-3rem; }
    .timeline-item:nth-of-type(odd):after { left:100%; right:-2rem; }
    
  .timeline-item:nth-of-type(2n) { margin-top:3rem; }
}
 
/* 1280 */
 
@media screen and (min-width:80em) {
  .timeline-list { grid-gap:2rem 10rem; }
  .timeline-item:after,.timeline-item:before { left:-5rem; }
  .timeline-item:nth-of-type(2n) { margin-top:5rem; }
  .timeline-item:nth-of-type(odd):before { left:auto; right:-6rem; }
  .timeline-item:nth-of-type(odd):after { left:100%; right:-5rem; }
}