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

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

.fluidbox {
    outline: none;
}

.fluidbox__overlay {
  background-color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* Transition time for overlay is halved to ensure that flickering doesn't happen */
  -webkit-transition: all 0.5s ease-in-out;
  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;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.fluidbox__thumb {
  -webkit-transition: opacity 0s ease-in-out 0s;
  transition: opacity 0s ease-in-out 0s;
  /* To prevent flickering, we delay the showing of the image */
}

.fluidbox--closed .fluidbox__thumb {
  -webkit-transition: opacity 0s ease-in-out 0s;
  transition: opacity 0s ease-in-out 0s;
}

.fluidbox__ghost {
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  transition-duration: 0s, 0.5s;
  transition-delay: 0s;
  transition-property: opacity, transform;
  transition-property: opacity, transform;
  /* autoprefixer: off */
}

.fluidbox--opened .fluidbox__ghost {
  cursor: pointer;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.fluidbox--closed .fluidbox__ghost {
  -webkit-transition-delay: 0.5s, 0s;
          transition-delay: 0.5s, 0s;
}

.fluidbox__loader {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.fluidbox__loader::before {
  position: absolute;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  left: 50%;
  top: 50%;
  content: '';
  background-color: #eee;
  border-radius: 100%;
}

.fluidbox--loading .fluidbox__loader {
  opacity: 1;
  -webkit-transition: opacity 0.5s ease-in-out 0.5s;
  transition: opacity 0.5s ease-in-out 0.5s;
}

.fluidbox--loading .fluidbox__loader::before {
  -webkit-animation: sk-scaleout 1s 0s infinite ease-in-out forwards;
          animation: sk-scaleout 1s 0s infinite ease-in-out forwards;
}

@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}