/*-------------------------------------------
  -- Time Line
-------------------------------------------*/
.ts-time-line__horizontal {
  padding-bottom: 10px;
  padding-top: 10px;
  position: relative;

  ul {
    padding-left: 30px;
    list-style: none;
    position: relative;
  }
  /* timeline line */
  &:after {
    background-color: #474747;
    content: "";
    bottom: 110px;
    height: 3px;
    left: 0;
    position: absolute;
    width: 100%;
  }

  .ts-time-line__item {
    flex: 0 0 auto;
    margin-right: 30px;
    position: relative;
    width: 300px;

    .ts-box {
      position: relative;
      /* dot */
      &:before {
        background-color: #474747;
        bottom: -70px;
        border-radius: 100%;
        content: "";
        left: 27px;
        height: 12px;
        position: absolute;
        width: 12px;
      }
      /* triangle */
      &:after {
        border-color: var(--color-white) transparent transparent transparent;
        border-style: solid;
        border-width: 8px 8px 0 8px;
        bottom: -7px;
        content: "";
        left: 25px;
        height: 0;
        position: absolute;
        width: 0;
      }
    }

    &.ts-time-line__milestone {
      width: 70px;
      .ts-box {
        background-color: var(--color-primary);
        color: var(--color-white);
        &:after {
          border-color: var(--color-primary) transparent transparent transparent;
        }
      }
      h5 {
        writing-mode: vertical-lr;
        margin: 0;
      }
    }


    figure {
      margin-left: 30px;
      margin-top: 75px;
      small {
        text-transform: uppercase;
        opacity: .4;
      }
      small, h6 {
        font-weight: 600;
      }
    }
  }

  .owl-stage-outer {
    padding: 16px 16px 0 16px;
  }
  .owl-stage {
    align-items: flex-end;
    display: flex;
  }

  .ts-sly-frame {
    &.ts-loaded {
      > ul {
        align-items: flex-end;
        display: flex;
      }
    }
  }

}