@charset "utf-8";
/* CSS Document */
.flip-boxX, .flip-boxY, .flip-boxZ {
  background-color: transparent;
  width: min(30vw, 500px);
  height: min(30vw, 500px);
  perspective: 2000px;
}
.flip-boxZ {
 clip-path: inset(0px 0px 0px 0px);	
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-boxX:hover .flip-box-inner {
  transform: rotateX(180deg);
}
.flip-boxY:hover .flip-box-inner {
  transform: rotateY(180deg);
}
.flip-boxZ:hover .flip-box-inner {
  transform: rotateZ(180deg);
}

.flip-box-front {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
.flip-boxX, .flip-boxY, .flip-boxZ {
  width: 417px;
  height: 417px;
}
}