* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

fieldset, img {
  border: 0; }

ol, ul {
  list-style: none; }

a:active, a:focus {
  outline: 0; }

h1, h2, h3, h4, h5, h6, span {
  font-size: 100%;
  font-weight: normal; }

html, body {
  height: 100%; }

body {
  font-family: sans-serif;
  background: #666; }

.container {
  width: 404px;
  height: 530px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-perspective: 1200px;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%; }

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s; }
  .box figure {
    position: absolute; }

.box .front,
.box .back {
  width: 404px;
  height: 530px; }

.box .right,
.box .left {
  width: 134px;
  height: 530px; }

.box .top,
.box .bottom {
  width: 404px;
  height: 134px; }

.box .left {
  left: 0; }

.box .right {
  right: 0; }

.box .top {
  top: 0; }

.box .bottom {
  bottom: 0; }

.box .front,
.box .back,
.box .right,
.box .left,
.box .top,
.box .bottom {
  display: block;
  background-size: 100% 100%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: left -0px; }

.box .front {
  background-image: url(/img/front.jpg); }

.box .back {
  background-image: url(/img/back.jpg); }

.box .right {
  background-image: url(/img/right.jpg); }

.box .left {
  background-image: url(/img/left.jpg); }

.box .top {
  background-image: url(/img/top.jpg); }

.box .bottom {
  background-image: url(/img/bottom.jpg); }

.box .front {
  transform: translateZ(67px); }

.box .back {
  transform: rotateY(-180deg) translateZ(67px); }

.box .right {
  transform: rotateY(90deg) translateZ(67px); }

.box .left {
  transform: rotateY(-90deg) translateZ(67px); }

.box .top {
  transform: rotateX(90deg) translateZ(67px); }

.box .bottom {
  transform: rotateX(-90deg) translateZ(67px); }

.box.show-front {
  box-shadow: 0px 0px 50px 20px rgba(0, 0, 0, 0.7); }

.box.show-back {
  box-shadow: 0px 0px 50px 20px rgba(0, 0, 0, 0.7);
  transform: rotateY(-180deg); }
  .box.show-back.zoom {
    transform: translateZ(300px) rotateY(-180deg); }

.box.show-right {
  transform: translateZ(-67px) rotateY(-90deg) rotateX(90deg); }
  .box.show-right .right {
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.7); }

.box.show-left {
  transform: translateZ(-67px) rotateY(-270deg) rotateX(90deg); }
  .box.show-left .left {
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.7); }

.box.show-top {
  transform: translateZ(-67px) rotateX(-90deg); }
  .box.show-top .top {
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.7); }

.box.show-bottom {
  transform: translateZ(-67px) rotateX(90deg); }
  .box.show-bottom .bottom {
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.7); }

ul#options {
  list-style: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  width: 80px; }
  ul#options li {
    display: block;
    width: 100%;
    margin-bottom: 1px; }
    ul#options li button {
      outline: none;
      display: block;
      width: 100%;
      cursor: pointer;
      border: none;
      padding: 10px 12px;
      color: #fff;
      text-transform: uppercase;
      font-size: 11px;
      background: #999;
      border-radius: 3px;
      border-bottom-left-radius: 0px;
      border-top-left-radius: 0px;
      transition: all 0.2s ease-in; }
      ul#options li button:hover {
        background: #737373; }
      ul#options li button.current {
        background: #FED330; }

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