.timeline {
    position: relative;
    padding: 20px 0 20px;
    list-style: none;

  &:before {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    background-color: $gray-lighter;
  }

  > li {
    position: relative;
    margin-bottom: 20px;
  
    &:before, &:after {
      content: " ";
      display: table;
    }

    &:after {
      clear: both;
    }

    > .timeline-panel {
      float: left;
      position: relative;
      width: 45%;
      padding: 15px;
      background: #fbfbfb;
      border: 1px solid #e7e7e7;

      @media (min-width: 435px) {
        width: 40%;
      }

      @media (min-width: $screen-sm-min) {
        width: 41%;
      }

      @media (min-width: $screen-md-min) {
        width: 43%;
      }

      @media (min-width: $screen-lg-min) {
        width: 45%;
      }

      &:before {
        content: " ";
        display: inline-block;
        position: absolute;
        top: 23px;
        right: -15px;
        border-top: 15px solid transparent;
        border-right: 0 solid #ccc;
        border-bottom: 15px solid transparent;
        border-left: 15px solid #ccc;
      }

      &:after {
        content: " ";
        display: inline-block;
        position: absolute;
        top: 24px;
        right: -14px;
        border-top: 14px solid transparent;
        border-right: 0 solid #fbfbfb;
        border-bottom: 14px solid transparent;
        border-left: 14px solid #fbfbfb;
      }
    }

    &:nth-child(even) {
      > .timeline-panel {
        float: right;

        &:before {
          right: auto;
          left: -15px;
          border-right-width: 15px;
          border-left-width: 0;
        }

        &:after {
          right: auto;
          left: -14px;
          border-right-width: 14px;
          border-left-width: 0;
        }
      }
    }

    > .timeline-badge {
      z-index: 100;
      position: absolute;
      top: 14px;
      left: 50%;
      width: 50px;
      height: 50px;
      margin-left: -25px;
      border-radius: 50% 50% 50% 50%;
      text-align: center;
      font-size: 1.4em;
      line-height: 50px;
      color: #fff;
      background-color: $gray-light;
      fill: #fff;
      padding: 5px 0;

      &.primary {
        background-color: $brand-primary !important;
      }

      &.success {
        background-color: $brand-success !important;
      }

      &.warning {
        background-color: $brand-warning !important;
      }

      &.danger {
        background-color: $brand-danger !important;
      }

      &.info {
        background-color: $brand-info !important;
      }

      &.default {
        background-color: $cr-orange !important;
      }
    }

    .timeline-title {
      margin: 0 0 5px;
      color: inherit;
    }

    .timeline-body {
      > p,
      > ul {
        margin-bottom: 2px;
      }

      > p + p {
        margin-top: 5px;
      }
    }
  }
}