/* Fullscreen overlay */
#hpl5s-preloader{
  position: fixed;
  inset: 0;
  background: #ffffff; /* change if your site background differs */
  display: grid;
  place-items: center;
  z-index: 999999;
  transition: opacity .4s ease, visibility .4s ease;
}

/* Images */
#hpl5s-preloader img{
  max-width: 220px;
  width: min(40vw, 220px);
  height: auto;
  display: block;
}

/* Start with GIF visible, logo hidden */
#hpl5s-preloader .hpl5s-gif{ opacity: 1; transition: opacity .4s ease; }
#hpl5s-preloader .hpl5s-logo{ opacity: 0; position: absolute; transition: opacity .4s ease; }

/* When we switch, crossfade: */
#hpl5s-preloader.show-logo .hpl5s-gif{ opacity: 0; }
#hpl5s-preloader.show-logo .hpl5s-logo{ opacity: 1; }

/* When done, hide overlay */
#hpl5s-preloader.hpl5s-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}