/* Additions that are not part of the Webflow export. */

/* Hero: the photo and the rotating brick ball travel together.
   The wrapper takes over the positioning rules that used to sit on the <img>. */
/* Same sizing the bare <img> had: natural width, capped by its container
   (Webflow's global img rule), or by 400px on phones (the .image-hero mobile rule). */
div.image-hero {
  width: max-content;
  max-width: 100%;
}

@media screen and (max-width: 479px) {
  div.image-hero {
    max-width: 400px;
  }
}

.hero-photo {
  display: block;
  width: 100%;
  height: auto;
}

.ball-spin {
  position: absolute;
  /* box of the ball inside the 1149 x 1097 hero image */
  left: 79.1123%;
  top: 51.8687%;
  width: 13.4900%;
  height: auto;
  max-width: none;
  pointer-events: none;
}