/* #header is already position:relative with a z-index (own stacking context).
   z-index:-20 puts the slides above #header's background but below
   .header-desc-container (z-index:-10, hero title text) and the menu/search. */
.prg-hero-slider {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -20;
    overflow: hidden;
    pointer-events: none;
}
.prg-hero-slide {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: ease-in-out;
    will-change: opacity, transform;
}
.prg-hero-slide.active {
    opacity: 1;
}
.prg-hero-zoom .prg-hero-slide.zooming {
    animation-name: prgHeroZoom;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes prgHeroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}
.prg-hero-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: #000;
}