/* bodytop.jpg is 8px tall: a 4px navy stripe, then white.
   It repeats across the top of #top and shows in the side gutters, so it looks like a line behind the video. */
#top {
  background-image: none;
  background-color: #ffffff;
}

/* First-view video. 1400px wide, 16:9, centered. 1400 * 9/16 = 787.5. */
#aaaa {
  z-index: 0;
  width: 1400px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  height: auto;
  position: relative;
  overflow: hidden;
  background-image: none;
}

#aaaa video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

#next_btn,
#prev_btn {
  display: none;
}

/* Original button sat at 360/444 of the hero. Keep that ratio on the taller frame. */
#header_btn {
  z-index: 6;
  top: calc(min(1400px, 100vw) * 9 / 16 * 360 / 444);
}

/* Hero grew from 444px to 787.5px. Keep the old 56px gap above the lower page. */
#top #top_bmcontents {
  top: calc(min(1400px, 100vw) * 9 / 16 + 56px);
}

#aaaa [id="1003topmov_sound"] {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  margin: 0;
  padding: 8px 14px;
  border: 2px solid #ffffff;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}

#aaaa [id="1003topmov_sound"]:hover {
  background: rgba(0, 0, 0, 0.75);
}

#aaaa [id="1003topmov_sound"]:focus {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #00135d;
}