/*.slide-up {
  opacity: 0;
  margin-top: 100px; 
  transition: opacity 1s ease-out, margin-top 1s ease-out;
  min-height: 100px;
}

.slide-up.on {
  opacity: 1;
  margin-top: 0;
}
.slide-up {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  will-change: transform, opacity;
}

.slide-up.on {
  opacity: 1;
  transform: translateY(0);
}*/
.slide-up.on, .opac{
    animation:opac 1s ease forwards;
}
.editMode .slide-up{
    opacity:1;
    transform:none;
}
@keyframes opac{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
.overlay-hero{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:repeat(4,1fr);
    z-index:1;
    pointer-events:none;
}

.overlay-hero div{
    background:rgba(0,0,0,.5);
    animation:hideBlock .8s ease forwards;
}

@keyframes hideBlock{
    from{
        opacity:1;
    }
    to{
        opacity:0;
    }
}