@-webkit-keyframes fluidboxLoading {
  0% {
    -webkit-transform: translate(-50%, -50%) rotateX(0) rotateY(0); }
  50% {
    -webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0); }
  100% {
    -webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg); } }
@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: -webkit-zoom-out;
  cursor: -moz-zoom-out;
  cursor: zoom-out;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* Transition time for overlay is halved to ensure that flickering doesn't happen */
  transition: all 0.125s ease-in-out 0.125s; }

.fluidbox-wrap {
  background-position: center center;
  background-size: cover;
  margin: 0 auto;
  position: relative;
  transition: all 0.25s ease-in-out;
  /* To prevent flickering, we delay the showing of the image */ }
  .fluidbox-closed .fluidbox-wrap img {
    transition: opacity 0 ease-in-out 0.25s; }

.fluidbox-ghost {
  background-size: 100% 100%;
  background-position: center center;
  perspective: 200px;
  position: absolute;
  -webkit-transition-property: opacity, -webkit-transform;
  -moz-transition-property: opacity, -moz-transform;
  -o-transition-property: opacity, -o-transform;
  transition-property: opacity, transform;
  transition-duration: 0, 0.25s;
  transition-delay: 0.25s, 0; }
  .fluidbox-ghost::before {
    -webkit-animation: fluidboxLoading 1s infinite;
    animation: fluidboxLoading 1s infinite;
    /* 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;
    transition: all 0.25s ease-in-out;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20%;
    padding-bottom: 20%;
    /* Delay disapparing of loader for graceful transition */
    transition-delay: 0.125s; }
  .fluidbox-loading .fluidbox-ghost::before {
    opacity: 1;
    transition-delay: 0; }
  .fluidbox-opened .fluidbox-ghost {
    transition-delay: 0, 0; }

/*# sourceMappingURL=fluidbox.css.map */