.timeline {
   line-height: 1.4em;
   list-style: none;
   margin: 0;
   padding: 0;
   width: 100%;
 }

.timeline h1,
.timeline h2,
.timeline h3,
.timeline h4,
.timeline h5,
.timeline h6 {
   line-height: inherit;
 }

.timeline-item {
   position: relative;
   height: 8em;
 }

.timeline-info {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 3px;
   margin: 0 0 0.5em 0;
   text-transform: uppercase;
   white-space: nowrap;
 }

.timeline-marker {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   width: 15px;
 }

.timeline-marker:before {
   background: #0066cc;
   border: 3px solid transparent;
   border-radius: 100%;
   content: "";
   display: block;
   height: 15px;
   position: absolute;
   top: 4px;
   left: 0;
   width: 15px;
   transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
 }

.timeline-marker:after {
   content: "";
   width: 3px;
   background: #ccd5db;
   display: block;
   position: absolute;
   top: 24px;
   bottom: 0;
   left: 6px;
 }

.timeline-item:last-child .timeline-marker:after {
   content: none;
 }

.timeline-item:not(.period):hover .timeline-marker:before {
   background: transparent;
   border: 3px solid #0066cc;
 }

 .timeline-content {
   padding-bottom: 40px;
 }

.timeline-content p:last-child {
   margin-bottom: 0;
 }

.period {
   padding: 0;
 }

.period .timeline-info {
   display: none;
 }

.period .timeline-marker:before {
   background: transparent;
   content: "";
   width: 15px;
   height: auto;
   border: none;
   border-radius: 0;
   top: 0;
   bottom: 30px;
   position: absolute;
   border-top: 3px solid #ccd5db;
   border-bottom: 3px solid #ccd5db;
 }

.period .timeline-marker:after {
   content: "";
   height: 32px;
   top: auto;
 }

.period .timeline-content {
   padding: 40px 0 70px;
 }

.period .timeline-title {
   margin: 0;
 }

.timeline-item:not(.period) .timeline-title {
  font-size: 1em;
}

 @media (min-width: 768px) {

   .timeline-centered .timeline-item {
     display: table-row;
     padding: 0;
   }

   .timeline-centered .timeline-info,
   .timeline-centered .timeline-marker,
   .timeline-centered .timeline-content,
   .timeline-centered .period .timeline-info {
     display: table-cell;
     vertical-align: top;
   }

   .timeline-centered .timeline-marker {
     position: relative;
   }

   .timeline-centered .timeline-content {
     padding-left: 30px;
   }

   .timeline-centered .timeline-info {
     padding-right: 30px;
   }

   .timeline-centered .period .timeline-title {
     position: relative;
     left: -45px;
   }
 }

 @media (min-width: 992px) {

   .timeline-centered,
   .timeline-centered .timeline-item,
   .timeline-centered .timeline-info,
   .timeline-centered .timeline-marker,
   .timeline-centered .timeline-content {
     display: block;
     margin: 0;
     padding: 0;
   }

   .timeline-centered .timeline-item {
     padding-bottom: 40px;
     overflow: hidden;
   }

   .timeline-centered .timeline-marker {
     position: absolute;
     left: 50%;
     margin-left: -7.5px;
   }

   .timeline-centered .timeline-info,
   .timeline-centered .timeline-content {
     width: 50%;
   }

   .timeline-centered>.timeline-item:nth-child(odd) .timeline-info {
     float: left;
     text-align: right;
     padding-right: 30px;
   }

   .timeline-centered>.timeline-item:nth-child(odd) .timeline-content {
     float: right;
     text-align: left;
     padding-left: 30px;
   }

   .timeline-centered>.timeline-item:nth-child(even) .timeline-info {
     float: right;
     text-align: left;
     padding-left: 30px;
   }

   .timeline-centered>.timeline-item:nth-child(even) .timeline-content {
     float: left;
     text-align: right;
     padding-right: 30px;
   }

   .timeline-centered>.timeline-item.period .timeline-content {
     float: none;
     padding: 0;
     width: 100%;
     text-align: center;
   }

   .timeline-centered .timeline-item.period {
     padding: 50px 0 90px;
   }

   .timeline-centered .period .timeline-marker:after {
     height: 30px;
     bottom: 0;
     top: auto;
   }

   .timeline-centered .period .timeline-title {
     left: auto;
   }
}

 /* Tablet */
 @media screen and (max-width: 1050px) {

  .timeline-item {
    font-size: 12px;
  }

  .timeline-info {
    padding-left: 25px;
  }

  .timeline-content {
    padding-bottom: 20px;
    padding-left: 25px;
  }

  .timeline-marker:before {
    height: 10px;
    width: 10px;
  }

  .timeline-item:not(.period):hover .timeline-marker:before {
    border: 2px solid #0066cc;
  }

  .timeline-marker:after {
    width: 2px;
    left: 4px;
  }

  .period .timeline-content {
    padding: 20px 0 50px;
  }
  
  .period .timeline-marker:before {
    width: 11px;
    border-top: 2px solid #ccd5db;
    border-bottom: 2px solid #ccd5db;
  }
}

  /* Phone */

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

  .timeline-item {
    font-size: 8px;
  }

  .period .timeline-marker:before {
    height: 54px;
  }

  .period .timeline-marker:after {
    height: 10px;
  }

}