/* typography */


/* get your beautiful color names from: http://www.colors.commutercreative.com/grid/ */
$headline: dimgrey;
$primary-color: cadetblue;
// $secondary-color: bisque;
// $tertiary-color: burlywood;
// $background-color: oldlace;
$matching-palette: honeydew;

/* media queries */

$tablet-width: 768px;
$desktop-width: 1024px;
@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}

/* timeline layout */
html {
  background-color: $matching-palette;
  font-family: Arial, san-serif;
}

h1 {
  text-align: center;
  color: $headline;
  
}






.timeline__midpoint--highlight > .timeline__year {
  display: none;
}


/* timeline typography */

.timeline__content .timeline__year {
  padding-top: 6px;
  color: $primary-color;
  text-align: left;
}

.timeline__midpoint--highlight .timeline__year {
  color: #fff;
  line-height: 4;
}

.timeline__year,
.timeline__midpoint--highlight + .timeline__content {
  font-weight: 600;
}

.timeline__content > p {
  font-size: 0.88em;
}


/* timeline layout for desktop */

@include desktop {
  section {
    padding: 0 250px;
  }
  .timeline {
    margin-left: 0;
    &:before {
      /* vertical line */
      left: 50%;
      margin-left: -1px;
    }
  }
  .timeline__midpoint {
    left: 50%;
    margin-left: -8px;
    &:before {
      width: 40px;
    }
    &:after {
      content: "";
      position: absolute;
      top: 50%;
      right: 16px;
      width: 40px;
      border-top: 1px solid #c5e1ec;
    }
  }
  .timeline__midpoint--highlight {
    top: 0;
    width: 76px;
    height: 76px;
    margin-left: -29px;
    margin-left: -38px;
    text-align: center;
    &.no-top-margin {
      margin-top: 0;
    }
    .timeline__year {
      display: block;
    }
  }
  .timeline__midpoint--highlight:before,
  .timeline__midpoint.timeline__midpoint--highlight:after {
    content: none;
  }
  .timeline__midpoint--highlight,
  .timeline__midpoint--highlight + .timeline__content {
    margin-top: 2em;
    margin-bottom: 2em;
  }
  .timeline__content {
    width: 50%;
    .timeline__year--mobile {
      display: none;
    }
  }
  .timeline__content--left {
    margin-left: -6%;
    .timeline__year {
      left: 128%;
    }
  }
  .timeline__year {
    position: absolute;
    width: 100%;
    margin-top: 0;
  }
  .timeline__text--left {
    padding-right: 25px;
    text-align: right;
  }
  .timeline__content--right {
    float: right;
    width: 53%;
    left: 11%;
    .timeline__year {
      right: 134%;
      text-align: right;
    }
    .timeline__text--right {
      margin-top: 0;
    }
  }
  .timeline__img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .timeline__content--left .timeline__img {
    left: 127%;
  }
  .timeline__content--right .timeline__img {
    right: 133.5%;
  }
}