.hero {

  &.is-condensed {
    height: 66vw;
    max-height: 40vmax;
  }

  &.is-normal {
    height: 100vw * .829;
    max-height: calc(50vh);
  }

  &.is-expanded {
    height: 100vh*0.829;
    max-height: calc(80vh - #{map-get($nav-main-height, "md")});
  }

  &.is-fullsize {
    height: 100vw * 1.207;
    max-height: calc(100vh - #{map-get($nav-main-height, "md")});
  }

  // according to heights calculated in _navigation.scss

  @include media-breakpoint-up(lg) {

    &.is-condensed {
      max-height: 25vmax;
    }

    &.is-normal {
      max-height: calc(50vh);
    }

    &.is-expanded {
      max-height: calc(80vh - #{map-get($nav-main-height, "lg")});
    }

    &.is-fullsize {
      max-height: calc(100vh - #{map-get($nav-main-height, "lg")});
    }

  }

  @include media-breakpoint-up(xl) {
    //padding: map-get($nav-main-height, "xl") 0;
    &.is-condensed {
      //max-height: calc(25vh);
    }

    &.is-normal {
      max-height: calc(50vh);
    }

    &.is-expanded {
      max-height: calc(80vh - #{map-get($nav-main-height, "xl")});
    }

    &.is-fullsize {
      max-height: calc(100vh - #{map-get($nav-main-height, "xl")});
    }
  }

  @include media-breakpoint-up(xxl) {
    //padding: map-get($nav-main-height, "xxl") 0;
    &.is-condensed {
      //max-height: calc(25vh);
    }

    &.is-normal {
      max-height: calc(50vh);
    }

    &.is-expanded {
      max-height: calc(80vh - #{map-get($nav-main-height, "xxl")});
    }

    &.is-fullsize {
      max-height: calc(100vh - #{map-get($nav-main-height, "xxl")});
    }
  }

}


.hero-text {
  hyphens: auto;
  text-shadow: 0 0 100px rgba(0, 0, 0, .1), 0 0 50px rgba(0, 0, 0, .2), 0 0 10px rgba(0, 0, 0, .1);
  padding-right: 60px;
  //@include media-breakpoint-up(lg) {
  //  padding: inherit;
  //}

}


.is-visible .hero-header {
  animation: .5s ease .5s both slideInBottom;
  @include media-breakpoint-up(md) {
    animation: .5s ease .3s both slideInLeft;
    white-space: nowrap;
  }
}


.is-visible .hero-subheader {
  animation: .6s ease .6s both slideInBottom;
  @include media-breakpoint-up(md) {
    animation: .6s ease .4s both slideInRight;
    white-space: nowrap;
  }
}


.is-visible .hero-lead {
  animation: .7s ease .7s both slideInBottom;
  @include media-breakpoint-up(md) {
    animation: .7s ease .5s both slideInLeft;
    white-space: nowrap;
  }
}


.hero-bg {
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba($primary-dark, .1);
  }
}


.scrolldownindicator {
  top: auto;
  bottom: 2rem;

  a {
    color: rgba($white, .8);

    &:hover, &:focus {
      text-decoration: none;
    }

    &::before {
      content: '╲╱';
      color: $secondary;
      position: absolute;
      display: block;
      width: 6rem;
      font-size: 1.5rem;
      height: 4rem;
      line-height: 4rem;
      text-align: center;
      bottom: 2rem;
      margin-left: -3rem;
      left: 50%;
      animation: slideInTop 3s ease infinite;
    }
  }
}


/* Animation */

@keyframes slideInTop {
  0% {
    opacity: 0;
    transform: translateY(-2rem)
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(0)
  }
}


@keyframes slideInBottom {
  0% {
    opacity: 0;
    transform: translateY(1rem)
  }
  100% {
    opacity: 1;
    transform: translateY(0px)
  }
}


@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-6rem)
  }
  100% {
    opacity: 1;
    transform: translateX(0rem)
  }
}


@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem)
  }
  100% {
    opacity: 1;
    transform: translateX(4rem)
  }
}

