/*------------- #TIME-LINE --------------*/


// --------------------------------

// Horizontal Timeline - by CodyHouse.co

// --------------------------------

.cd-h-timeline {
  opacity: 0;
  transition: opacity 0.2s;
  margin: 2em auto;
}

.cd-h-timeline--loaded { // show the timeline after dates position has been set (using JavaScript)
  opacity: 1;
}

.cd-h-timeline__container {
  position: relative;
  height: 100px;
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

.cd-h-timeline__dates {
  position: relative;
  height: 100%;
  margin: 0 60px;
  overflow: hidden;
}

.cd-h-timeline__line { // grey line
  position: absolute;
  z-index: 1;
  left: 0;
  top: 49px;
  height: 6px;
  background: #fecb16;
  transition: transform 0.4s;
}

.cd-h-timeline__filling-line { // green filling line
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s;
}

.cd-h-timeline__date {
  position: absolute;
  bottom: -60px;
  z-index: 2;
  text-align: center;
  font-size: 1.3rem;
  padding-bottom: 5px;
  color: #acacac;
  transform: translateZ(0);

  &:hover {
    &::after {
      border-color: var(--primary-accent-color);
      background-color: var(--primary-accent-color);
    }
  }

  &::after { // this is used to create the event spot
    content: '';
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: -36px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 2px solid #fecb16;
    background-color: #fff;
    transition: background-color 0.3s,border-color 0.3s;
  }
}

.cd-h-timeline__date--selected {
  pointer-events: none;
  color: var(--primary-accent-color);

  &:after {
    background-color: var(--primary-accent-color);
    border-color: var(--primary-accent-color);
  }
}

.cd-h-timeline__navigation { // arrows to navigate the timeline
  position: absolute;
  z-index: 1;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  overflow: hidden;
  color: transparent;
  white-space: nowrap;
  transition: border-color 0.3s;

  &::after { // arrow icon
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }

  &:hover {
    color: transparent;

    &:before {
      color: var(--primary-accent-color);
    }
  }

  &:before {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    color:

            #d7d7d7;
    font-size: 20px;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;

  }
}

.cd-h-timeline__navigation--prev {
  left: 0;
  transform: translateY(-50%) rotate(180deg);
  z-index: 999;
  box-shadow: -40px 0 15px 0 #fff;
}

.cd-h-timeline__navigation--next {
  right: 0;
  box-shadow: -40px 0 15px 0 #fff;
  z-index: 999;
}

.cd-h-timeline__navigation--inactive {
  cursor: not-allowed;

  &::after {
    background-position: 0 -16px;
  }
}

.cd-h-timeline__events { // container of events info
  position: relative;
  width: 100%;
  overflow: hidden;
  transition: height .4s;
  margin-top: 80px;
}

.cd-h-timeline__event { // single event info
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  padding: 1px 5%;
  opacity: 0;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
}

.cd-h-timeline__event--selected { // selected event info
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0);
}

.cd-h-timeline__event--enter-right,
.cd-h-timeline__event--leave-right { // animate event info
  animation-name: cd-enter-right;
}

.cd-h-timeline__event--enter-left,
.cd-h-timeline__event--leave-left { // animate event info
  animation-name: cd-enter-left;
}

.cd-h-timeline__event--leave-right,
.cd-h-timeline__event--leave-left {
  animation-direction: reverse;
}

.cd-h-timeline__event-title {
  color: red;
  font-weight: 700;
  font-size: 16px;
}

.cd-h-timeline__event-date {
  display: block;
  font-style: italic;
  margin: 10px auto;

  &::before {
    content: '- ';
  }
}

@keyframes cd-enter-right {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes cd-enter-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

.time-line-content {

  .time-line-subtitle {
    color: $font-color;
    margin-bottom: 20px;
  }

  .time-line-title {
    margin-bottom: 20px;
    font-size: 30px;
    line-height: 1.2;
  }

  .time-line-text {
    font-size: 18px;
    color: #acacac;
  }
}

.time-line-thumb {
  @media (max-width: 570px) {
    margin-bottom: 30px;
  }
}

.cd-h-timeline {

  ol, ol li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li:before {
    display: none;
  }
}


