/*
 * kkbc-hero-focus-1.css - home hero video: which part of the picture stays in view when the box is narrower than the video.
 *
 * css/kkbc-layout-1.css gives the video object-fit:cover. On a phone (390 px) the box is about 650 px high, so only the middle
 * third of a 16:9 video shows. The middle of the three videos is haze (morning: fog and sky; evening: bright sky). The subject
 * sits at a different place in each video (frames checked at second 8: morning, the pyramid tower and the rising sun at 38 % of
 * the width; afternoon, the surfer at 59 %; evening, the dancer at 66 %). template/Home.php prints data-kkbc-hero-focus with the
 * name of the time slot, taken from the video file name. A video with another name keeps the centre.
 * Same specificity as the rule in kkbc-layout-1.css; this file loads after it.
 * A later change of this file gets a new file name (kkbc-hero-focus-2.css), because the CDN keeps a file under its old name.
 */
.VideoArea .VideoBox video[data-kkbc-hero-focus="morning"] {
  object-position: 40% 50%;
}
.VideoArea .VideoBox video[data-kkbc-hero-focus="afternoon"] {
  object-position: 59% 50%;
}
.VideoArea .VideoBox video[data-kkbc-hero-focus="evening"] {
  object-position: 66% 50%;
}
/* Wide screens: the box is as wide as the video, so the position changes nothing there; keep the centre for any size above a tablet. */
@media (min-width: 1025px) {
  .VideoArea .VideoBox video[data-kkbc-hero-focus] {
    object-position: center center;
  }
}