*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background: #ffffff;
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  font-weight: 300;
}

#wrapper {
  padding-top: 0%;
  padding-bottom: 10%;
}

.viewport {
  perspective: 800px;
  perspective-origin: 50% 200px;
  transform: scale(0.8, 0.8);
}

.cube {
  position: relative;
  margin: 0 auto;
  height: 400px;
  width: 400px;
  transform-style: preserve-3d;
  transform: rotateX(330deg) rotateY(40deg);
}

.cube > div {
  overflow: hidden;
  position: absolute;
  opacity: 0.9;
  height: 400px;
  width: 400px;
  background-image: url("400x400 white.jpg");
  touch-callout: none;
  user-select: none;
}

.cube > div > div.cube-image {
  transform: scale(0.7) scaleX(-1); /* Add scaleX(-1) for horizontal flip */
  transform-origin: center center;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 400px;
  font-size: 80px;
  color: #1b9bd8;
  transition: color 600ms;
  user-drag: none;
  user-select: none;
}


.cube > div > div.cube-image.active {
  color: red;
  user-drag: none;
  user-select: none;
}



.cube > div:hover {
  cursor: pointer;
}

.cube > div:active {
  cursor: pointer;
}

.cube > div:first-child {
  transform: rotateX(90deg) translateZ(200px);
  outline: 1px solid transparent;
}

.cube > div:nth-child(2) {
  transform: translateZ(200px);
  outline: 1px solid transparent;
}

.cube > div:nth-child(3) {
  transform: rotateY(90deg) translateZ(200px);
  outline: 1px solid transparent;
}

.cube > div:nth-child(4) {
  transform: rotateY(180deg) translateZ(200px);
  outline: 1px solid transparent;
}

.cube > div:nth-child(5) {
  transform: rotateY(-90deg) translateZ(200px);
  outline: 1px solid transparent;
}

.cube > div:nth-child(6) {
  transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
  outline: 1px solid transparent;
}


object {
  opacity: 0.5;
}

object:hover {
  opacity: 1;
}

@media (max-width: 640px) {
  .viewport {
    transform: scale(0.6, 0.6);
  }
}