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


  .timeline-item {
    padding-left: 40px;
    position: relative;
    &:last-child {
      padding-bottom: 0;
    }
  }


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

    .date {
      color:$color-sub-title;
    }

    .type {
      transition: color 0.3s ease-in-out,
    }
  }

  .timeline-marker {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 15px;
    .dot {
      width: 15px;
      height: 15px;
      border-radius: 100%;
      margin-top: 4px;
    }
    &:after {
      content: "";
      width: 3px;
      background: #CCD5DB;
      display: block;
      position: absolute;
      top: 24px; bottom: 0; left: 6px;
    }
    .timeline-item:last-child &:after {
      content: none;
    }
  }
  .timeline-item:not(.period):hover .timeline-marker:before {
    background: transparent;
  }

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

  .period {
    padding: 0;
    .timeline-info {
      display: none;
    }
    .timeline-marker {
      .dot {
        background: transparent;
        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;
      }
      &:after {
        content: "";
        height: 32px;
        top: auto;
      }
    }
    .timeline-content {
      padding: 40px 0 70px;
    }
    .timeline-title {
      margin: 0;
    }
  }

  ////// Various Modes /////
  &.timeline-split {
    @media (min-width: 768px) {
      .timeline {
        display: table;
      }
      .timeline-item {
        display: table-row;
        padding: 0;
      }
      .timeline-info {
        .date,.type {
          float: right;
        }
      }

      .timeline-info,
      .timeline-marker,
      .timeline-content,
      .period .timeline-info {
        display: table-cell;
        vertical-align: top;
      }
      .timeline-marker {
        position: relative;
      }
      .timeline-content {
        padding-left: 40px;
        width: 100%;
      }
      .timeline-info {
        padding-right: 30px;
      }
      .period .timeline-title {
        position: relative;
        left: -45px;
      }
    }
  }

  &.timeline-centered {
    @extend .timeline-split;
    @media (min-width: 992px) {
      &,
      .timeline-item,
      .timeline-info,
      .timeline-marker,
      .timeline-content {
        display: block;
        margin: 0;
        padding: 0;
      }
      .timeline-item {
        padding-bottom: 40px;
        overflow: hidden;
      }
      .timeline-marker {
        position: absolute;
        left: 50%;
        margin-left: -7.5px;
      }
      .timeline-info,
      .timeline-content {
        width: 50%;
      }
      > .timeline-item:nth-child(odd) .timeline-info {
        float: left;
        text-align: right;
        padding-right: 30px;
      }
      > .timeline-item:nth-child(odd) .timeline-content {
        float: right;
        text-align: left;
        padding-left: 30px;
      }
      > .timeline-item:nth-child(even) .timeline-info {
        float: right;
        text-align: left;
        padding-left: 30px;
      }
      > .timeline-item:nth-child(even) .timeline-content {
        float: left;
        text-align: right;
        padding-right: 30px;
      }
      > .timeline-item.period .timeline-content {
        float: none;
        padding: 0;
        width: 100%;
        text-align: center;
      }
      .timeline-item.period {
        padding: 50px 0 90px;
      }
      .period .timeline-marker:after {
        height: 30px;
        bottom: 0;
        top: auto;
      }
      .period .timeline-title {
        left: auto;
      }
    }
  }

  // Edit / delete actions

  .timeline-item .actions {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out,
  }

  .timeline-item:hover .actions {
    display: block;
    opacity: 1;
  }
}