/* overlay + fade + zoom */
.overlay{
    background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
}

.fade-slide{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    opacity:0;
    transition: opacity 1s ease-in-out;
}
.fade-slide.active{ opacity:1; }

.zoom-effect{ animation: zoom 20s linear infinite; }
@keyframes zoom{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.1); }
    100%{ transform:scale(1); }
}

/* stage height via CSS variables */
.green-hero-stage{
    height: var(--green-hero-hm, 500px);
}
@media (min-width: 768px){
    .green-hero-stage{ height: var(--green-hero-hd, 600px); }
}

/* progress bar smooth feel */
.green-hero-progress{
    transition: width 600ms ease;
}