/* Five local photographs, six seconds each; no JavaScript dependency. */
.hero{overflow:hidden}
.hero img.hero-slide{inset:0;opacity:0;animation-duration:30s;animation-timing-function:linear;animation-iteration-count:infinite}
.hero img.hero-slide-0{opacity:1}
.hero-pause{position:absolute;left:6%;bottom:20px;width:18px;height:18px;z-index:3;accent-color:#385c53}
.hero-pause-label{position:absolute;left:calc(6% + 26px);bottom:17px;z-index:3;color:#fff;font-size:13px;cursor:pointer;text-shadow:0 1px 3px #000}
.play-text{display:none}
.hero-pause:checked~.hero-slide{animation-play-state:paused}
.hero-pause:checked~.hero-pause-label .pause-text{display:none}
.hero-pause:checked~.hero-pause-label .play-text{display:inline}
.hero-pause:focus-visible{outline:3px solid #e8cf9e;outline-offset:3px}
.hero-slide-0{animation-name:hero-photo-0}
@keyframes hero-photo-0{0%,16%{opacity:1}20%,96%{opacity:0}100%{opacity:1}}
.hero-slide-1{animation-name:hero-photo-1}
@keyframes hero-photo-1{0%,16%{opacity:0}20%,36%{opacity:1}40%,100%{opacity:0}}
.hero-slide-2{animation-name:hero-photo-2}
@keyframes hero-photo-2{0%,36%{opacity:0}40%,56%{opacity:1}60%,100%{opacity:0}}
.hero-slide-3{animation-name:hero-photo-3}
@keyframes hero-photo-3{0%,56%{opacity:0}60%,76%{opacity:1}80%,100%{opacity:0}}
.hero-slide-4{animation-name:hero-photo-4}
@keyframes hero-photo-4{0%,76%{opacity:0}80%,96%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hero img.hero-slide{animation:none}.hero-pause,.hero-pause-label{display:none}}
@media(max-width:750px){.hero-content{padding-top:155px;padding-bottom:75px}}