@keyframes fluidboxLoading {
  0% {
    transform: translate(-50%, -50%) rotateX(0) rotateY(0);
  }
  50% {
    transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg);
  }
}
.fluidbox {
  outline: none;
}

.fluidbox__overlay {
  background-color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  cursor: zoom-out;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: -100%;
  /* Negative top and bottom is to fix some Safari cases where image got blurry */
  left: 0;
  bottom: -100%;
  /* Negative top and bottom is to fix some Safari cases where image got blurry */
  right: 0;
  /* Transition time for overlay is halved to ensure that flickering doesn't happen */
  transition: all 0.5s ease-in-out;
}
.fluidbox--opened .fluidbox__overlay {
  pointer-events: auto;
}

.fluidbox__wrap {
  background-position: center center;
  background-size: cover;
  margin: 0 auto;
  position: relative;
  transition: all 0.5s ease-in-out;
}

.fluidbox__thumb {
  transition: opacity 0s ease-in-out 0s;
  /* To prevent flickering, we delay the showing of the image */
}
.fluidbox--closed .fluidbox__thumb {
  transition: opacity 0s ease-in-out 0s;
  position: relative;
  z-index: 1;
}

.fluidbox__ghost {
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  transition: opacity 0s 0s, transform 0.5s 0s;
  z-index: 0;
}
.fluidbox--opened .fluidbox__ghost {
  cursor: pointer;
  cursor: -webkit-zoom-out;
  cursor: -moz-zoom-out;
  cursor: zoom-out;
}
.fluidbox--closed .fluidbox__ghost {
  transition: opacity 0s 0.5s, transform 0.5s 0s;
}

.fluidbox__loader {
  opacity: 0;
  perspective: 200px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.fluidbox__loader::before {
  /* You can replace this with any color you want, or even a loading gif if desired */
  background-color: rgba(255, 255, 255, 0.85);
  content: '';
  transform-style: preserve-3d;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20%;
  padding-bottom: 20%;
  transform: translate(-50%, -50%);
  transition-property: transform;
  transition-duration: 0.5s;
  transition-delay: 0s;
}

.fluidbox--loading .fluidbox__loader {
  opacity: 1;
  transition: opacity 0.5s ease-in-out 0.5s;
}
.fluidbox--loading .fluidbox__loader::before {
  animation: fluidboxLoading 1s 0s infinite ease-in-out forwards;
}