$max-width: 100%;

.content__frame {
  width: 100%;
  overflow: hidden;
  margin-top: em(-50px);
  padding-top: em(50px);
}

.content__frame--dialog {
  display: table;
  width: 100%;
  height: 100%;
  .content__container {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
  }
}

.content__dialog {
  display: inline-block;
  width: 100%;
  max-width: em(600px);
  padding: em(100px) em(30px);
  text-align: left;
}

.content__intro {
  width: 100%;
  height: 70vh;
  min-height: em(400px);
  overflow: hidden;
  position: relative;
  margin-top: em(-50px);
  padding: em(50px) 10% 0;
  background: $light_gray;
  transition: background 0.5s $easeOutQuart;
  &.reveal {
    transform: none;
  }
  &.image {
    h1 {
      color: $white;
      text-shadow: 0 0 em(50px) rgba($black, 0.3);
    }
    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: $black;
      opacity: 0.2;
      z-index: 2;
    }
  }
  @media screen and (max-width: $medium_breakpoint) {
    height: 50vh;
  }
}

.content__intro__content {
  width: 100%;
  z-index: 3;
  position: absolute;
  left: 0;
  top: 50%;
  text-align: center;
  color: $white;
  padding: 0 em(30px);
  p {
    line-height: 1.3;
    font-size: em(18px);
    margin: em(20px) 0 0;
  }
  a {
    margin: em(40px) em(10px) 0;
  }
  transform: translateY(-50%) translateY(em(40px));
  &.reveal {
    transform: translateX(100px) translateY(-50%) translateY(em(40px));
  }
  @media screen and (max-width: $medium_breakpoint) {
    transform: translateY(-50%) translateY(em(25px));
    &.reveal {
      transform: translateX(100px) translateY(-50%) translateY(em(25px));
    }
  }
}

.content__intro__image {
  background-position: center;
  background-size: cover;
  position: absolute;
  will-change: transform;
  top: -5%;
  left: 0;
  width: 100%;
  height: 110%;
  z-index: 1;
  &.reveal {
    transform: none;
  }
}

.content__container {
  width: 100%;
  position: relative;
}

.content__main {
  width: 100%;
  padding: 0 15%;
  max-width: $max-width;
  margin: 0 auto;
  @media screen and (max-width: $huge_breakpoint) {
    padding: 0 em(70px);
  }
  @media screen and (max-width: $large_breakpoint) {
    padding: 0 10%;
  }
  @media screen and (max-width: $medium_breakpoint) {
    padding: 0 em(30px);
  }
}

.content__navigation {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: em(100px);
  margin-top: em(-100px);
  &.fixed {
    margin-top: 0;
    position: fixed;
  }
  @media screen and (max-width: $large_breakpoint) {
    display: none;
  }
}

.content__navigation__frame {
  width: 100%;
  max-width: $max-width;
  padding: em(100px) 15%;
  margin: 0 auto;
  @media screen and (max-width: $huge_breakpoint) {
    padding: em(100px) em(70px);
  }
}

.content__navigation__main {
  width: 20%;
  height: auto;
  position: relative;
}

.content__navigation__title {
  padding-top: em(10px);
  font-size: em(18px);
  color: $gray;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.35;
  display: block;
  width: 100%;
  font-weight: 700;
  margin-bottom: em(20px);
}

.content__navigation__content {
  position: relative;
}

.content__navigation__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: em(3px);
  height: 100%;
  background: $light_gray;
  display: block;
  overflow: hidden;
}

.content__navigation__progress__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: $green;
  display: block;
  transition: height 0.1s $easeOutQuart;
  will-change: height;
}

.content__navigation__anchor {
  font-size: em(14px);
  color: $gray;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.35;
  padding: em(8px) 0 em(8px) em(30px);
  text-decoration: none;
  display: inline-block;
  position: relative;
  transform: none;
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
  word-break: break-word;
  hyphens: auto;
  &:hover {
    transform: translateX(em(10px));
  }
  &.active {
    color: $green;
  }
}

.content__wrap {
  width: 100%;
  padding-left: 25%;
  @media screen and (max-width: $large_breakpoint) {
    padding-left: 0;
  }
}

.content {
  width: 100%;
  max-width: em(800px);
  margin: 0 auto;
  position: relative;
  z-index: 10;
  padding-bottom: em(200px);
}