.pxsnap_mainslider {
  width: 100%;
  float: left;
  height: 100vh;
  clear: both;
}
.pxsnap_mainslider ul.slides > li {
  margin: 0px;
  overflow: hidden;
  position: relative;
  background: #000;
}
/* The slideshow photos are no longer listed here. Each slide gets its own
   background-image straight from the admin page (Admin → Home Slides), so
   photos can be added, removed, and reordered without touching this file.
   See Views/Home/Index.cshtml and Models/HomeSlider.cs. */

.pxsnap_mainslider .flexslider ul li .overlay {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 5;
}
.pxsnap_mainslider .flexslider ul li .overlay_img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: absolute;
  inset: 0px;
  z-index: 10;
}
.pxsnap_mainslider .flexslider ul li .overlay_color {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 15;
}
.flex-direction-nav li {
  margin: 0px;
}
.flex-direction-nav a.flex-prev {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.flex-direction-nav a:before,
.flex-direction-nav .myflex-text {
  display: none;
}
.flex-direction-nav a {
  background-color: rgba(0, 0, 0, 0.2);
}
.flex-direction-nav .myflex-nav {
  display: block;
  width: 25px;
  height: 2px;
  background-color: #fff;
  margin-top: 29px;
  margin-left: 19px;
  position: relative;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.flex-direction-nav .myflex-nav.next {
  margin-left: auto;
  margin-right: 19px;
}
.flex-direction-nav .myflex-nav:after {
  content: "";
  position: absolute;
  display: block;
  left: 0px;
  top: -4px;
  width: 10px;
  height: 2px;
  background-color: #fff;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}
.flex-direction-nav .myflex-nav:before {
  content: "";
  position: absolute;
  display: block;
  left: 0px;
  top: 4px;
  width: 10px;
  height: 2px;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.flex-direction-nav .myflex-nav.next:after {
  left: auto;
  right: 0px;
  top: 4px;
}
.flex-direction-nav .myflex-nav.next:before {
  left: auto;
  right: 0px;
  top: -4px;
}
.flexslider:hover .flex-direction-nav a:hover .myflex-nav.prev {
  margin-left: 9px;
}
.flexslider:hover .flex-direction-nav a:hover .myflex-nav.next {
  margin-right: 9px;
}
.pxsnap_mainslider .flexslider ul.slides > li {
  height: 100vh;
}

/* ── The slideshow arrows on a phone ───────────────────────────────────────
   On a computer the home-page slideshow keeps its wide, quiet corner blocks
   with the sliding line arrow. On a phone those blocks read as big dark
   squares, so below 860px wide they become the same soft frosted circle
   with a thin chevron that the photo viewer uses — one look for every
   next-photo button on the site. The line arrow's two little wing strokes
   are switched off and the line itself is redrawn as the chevron. */
@media screen and (max-width: 860px) {
  .pxsnap_mainslider .flex-direction-nav a {
    width: 44px; height: 44px; margin-top: -22px;
    border-radius: 50%;
    background: rgba(10, 13, 18, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .pxsnap_mainslider .flex-direction-nav a:active {
    background: rgba(10, 13, 18, 0.55);
    border-color: rgba(255, 255, 255, 0.5);
  }
  .pxsnap_mainslider .flex-direction-nav .myflex-nav {
    width: 11px; height: 11px; background: none;
    margin: 0; position: absolute; top: 50%; left: 50%;
    border-top: 2px solid #fff; border-right: 2px solid #fff;
  }
  .pxsnap_mainslider .flex-direction-nav .myflex-nav:before,
  .pxsnap_mainslider .flex-direction-nav .myflex-nav:after { display: none; }
  .pxsnap_mainslider .flex-direction-nav .myflex-nav.prev {
    transform: translate(calc(-50% + 3px), -50%) rotate(-135deg);
  }
  .pxsnap_mainslider .flex-direction-nav .myflex-nav.next {
    transform: translate(calc(-50% - 3px), -50%) rotate(45deg);
  }
  /* A phone tap can leave the button in its "mouse over" state, which used
     to slide the line arrow sideways — held still here so the chevron stays
     centred in its circle. */
  .pxsnap_mainslider .flexslider:hover .flex-direction-nav a:hover .myflex-nav { margin: 0; }
}

/* ── The home page stays put on a phone ────────────────────────────
   The home page is one full screen of slideshow and nothing else, so there
   should be nothing to scroll to — and on a computer there never was. On a
   phone there was, because of a quirk every phone browser shares: "one full
   screen" in a stylesheet means the screen WITHOUT the address bar, while
   what you can actually see is the screen WITH it. The page came out about
   an address bar taller than the window, so a swipe dragged the slideshow
   up and showed a band of empty black underneath it.

   The rules below apply to phones and tablets only — a computer is left
   exactly as it was. "dvh" is the newer measure that means the screen you
   can really see at this moment, so the page is never taller than the
   window; the page is then held still outright as well, so even an older
   phone that has never heard of "dvh" has nothing left to drag. The menu,
   the search box and the slideshow arrows all float above the page rather
   than sitting inside it, so none of them are affected.

   The mark that says "this is the home page" is put on the page by
   Views/Shared/_Layout.cshtml. */
@media screen and (max-width: 1040px),
       screen and (hover: none) and (pointer: coarse) {
  html.is_home,
  html.is_home body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  /* This one was the actual cause: the box the slideshow sits in was told to
     be at least one full screen tall, and stayed that way even though a
     script had already sized the slideshow itself to the visible window. */
  html.is_home .pxsnap_content {
    min-height: 100dvh;
  }
  html.is_home .pxsnap_mainslider,
  html.is_home .pxsnap_mainslider .flexslider ul.slides > li {
    height: 100dvh;
  }
}