.hero-area {
    background-position: 0 0;
}

.hero-area {
  z-index: -10;
  position: absolute;
  width: 100%;
  height: 100vh;
  background: url(../img/compressed/STR-122-min.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: 0 0;
  filter: grayscale(1) brightness(1.2);
  opacity: 0;
  transition: opacity 1s ease-out;
  -webkit-transition: opacity 1s ease-out;
}

@media only screen and (max-width: 767px) {
    .hero-area {
        background-size: contain;
    }   
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  .hero-area {
    top: 0;
    background-size: auto 100vh;
  }
}