.hero--homepage {
  background-color: #000;
  background-repeat: no-repeat;
}

.homepage-hero-text {
  color: #fff;
  font-family: 'helsinki-black', sans-serif;
  text-transform: uppercase;
  font-size: 58px;
  width: 100%;
  position: absolute;
  box-sizing: border-box;
}

.hero--shadows .homepage-hero-text {
  text-shadow: 0px 0px 28px rgba(0, 0, 0, .45);
}

.hero--shadows .down-arrow {
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, .45))
}

.hero--shadows.hero--black .down-arrow {
  filter: invert(1) drop-shadow(0px 0px 4px rgba(0, 0, 0, .45))
}

.hero--black nav:not(.sticky):not(.active) li,
.hero--black .homepage-hero-text,
.hero--black .homepage-hero-link {
  color: #000;
}

.hero--black.hero--homepage {
  background-color: #fff;
}

.hero--black .logo {
  background-image: url(../images/footer-logo.png);
}

.hero--black .down-arrow {
  filter: invert(1);
}

.homepage-hero-link {
  position: relative;
  font-size: 26px;
  font-family: 'helsinki-bold', sans-serif;
  vertical-align: top;
  padding-top: 12px;
  cursor: pointer;
  transition: all .3s;
  border-left: 1px solid transparent;
  background: transparent;
  text-decoration: none;
  color: #fff;
  display: inline-block;
}

.homepage-hero-link:after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0;
  height: 2px;
  transition: width .3s;
  background: #fff;
}

.homepage-hero-link:hover:after {
  width: 100%;
}

.homepage-center-logo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 180px;
  margin: 0 0 40px 90px;
}

.hero--homepage.desktop-layout--cover {
  background-size: cover;
  background-position: center center;
}

.hero--homepage.desktop-layout--contain {
  background-size: contain;
  background-position: bottom center;
}

.desktop-text--left-center {
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  text-align: left;
}

.desktop-text--center-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.desktop-text--left-top {
  left: 0;
  top: 250px;
  transform: translate(0, 0);
  text-align: left;
}

.desktop-text--center-top {
  left: 50%;
  top: 250px;
  transform: translate(-50%, 0);
  text-align: center;
}

@media(max-width: 768px) {
  .hero--homepage.mobile-layout--cover {
    background-size: cover;
    background-position: center center;
  }

  .hero--homepage.mobile-layout--contain {
    background-size: 130%;
    background-position: bottom center;
  }

  .homepage-hero-text {
    font-size: 42px;
  }

  .mobile-text--left-center {
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    text-align: left;
  }

  .mobile-text--center-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .mobile-text--left-top {
    left: 0;
    top: 220px;
    transform: translate(0, 0);
    text-align: left;
  }

  .mobile-text--center-top {
    left: 50%;
    top: 220px;
    transform: translate(-50%, 0);
    text-align: center;
  }
}

.hero--homepage.hero--shadows:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 230px;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+,
  Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000',
      endColorstr='#00000000', GradientType=0);
}

/* super tall devices... */
@media (min-height: 800px) and (max-width: 760px) {
  .hero--homepage.mobile-layout--contain {
    background-size: 150%;
  }
}