/* - img-smooth-loader.css - */
/* --- Website Nina Hitz --- */


/* -- Image Smooth Loader Settings -- */
.img-smooth-loader {
  position: relative;

  background: none;
  background-color: none;
  background-size: cover;
  background-position: center;

  width: 100%;
  min-height: 100%;
}

.img-smooth-loader.not-loaded {
  background-color: rgba(200,200,200,0.2);
  overflow: hidden;
}

/* initial settings for images inside an img-smooth-loader */
.img-smooth-loader > img {
  object-fit: fit;
  padding: none;
  margin: none;
  opacity: 1;
}

.img-smooth-loader.not-loaded > img {
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}

/* pulsing color until img is loaded */
.img-smooth-loader.not-loaded::before {
  content: "";
  position: absolute;
  inset: 0;
  animation: pulse 1.5s infinite;
}

/* when loaded, remove animation */
.img-smooth-loader::before {
  content: none;
  animation: none;
}

/* pulsating white overlay keyframes */
@keyframes pulse {
  0%   { background-color: rgba(255,255,255,0);   }
  50%  { background-color: rgba(255,255,255,0.4); }
  100% { background-color: rgba(255,255,255,0);   }
}