/* Use less specific selectors to avoid overriding Bulma's sizing classes */
.hero.section-1.off-white-background {
  background-image: url(../images/hands_rings_1920_1080.png);
  background-position-x: center;
  background-size: 100%;
  background-position-y: -150px;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (max-width: 1700px) {
  .hero.section-1.off-white-background {
    background-size: 100%;
    background-position-y: -85px;
  }
}

@media (max-width: 1400px) {
  .hero.section-1.off-white-background {
    background-size: 125%;
    background-position-y: 5px;
  }
}

@media (max-width: 768px) {
  .hero.section-1.off-white-background {
    background-size: 105%;
    background-position-y: -5px;
  }
}

@media (max-width: 480px) {
  .hero.section-1.off-white-background {
    background-size: 185%;
    background-position-y: 30px;
  }
}


.hero.section-1 {
  padding-top: 50px;
}

.hero.section-1 .title {
  text-shadow: -3px 4px 0px #000000, -3px 4px 3px #000000;
}