html {
  -webkit-text-size-adjust: 100%; }

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

#container {
  position: absolute;
  width: 300px;
  height: 250px;
  left: 0;
  top: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 5;
  background-color: #014536;
  overflow: hidden; }

a {
  text-decoration: none; }

.wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 250px;
  -webkit-perspective: 560px;
  -moz-perspective: 560px;
  perspective: 560px;
  -webkit-perspective-origin: 50% 130px;
  -moz-perspective-origin: 50% 130px;
  perspective-origin: 50% 130px;
  z-index: 5;
  left: 50%;
  margin-left: -150px;
  top: 48%;
  margin-top: -150px; }

#cube {
  position: relative;
  width: 300px;
  height: 300px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 10px, -20px);
  -moz-transform: translate3d(0, 10px, -20px);
  -ms-transform: translate3d(0, 10px, -20px);
  -o-transform: translate3d(0, 10px, -20px);
  transform: translate3d(0, 10px, -20px); }
  #cube div {
    position: absolute;
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    background-position: center center; }

.top {
  -webkit-transform: rotateX(90deg) translateZ(150px);
  -moz-transform: rotateX(90deg) translateZ(150px);
  -ms-transform: rotateX(90deg) translateZ(150px);
  -o-transform: rotateX(90deg) translateZ(150px);
  transform: rotateX(90deg) translateZ(150px); }

.front {
  -webkit-transform: translateZ(150px);
  -moz-transform: translateZ(150px);
  -ms-transform: translateZ(150px);
  -o-transform: translateZ(150px);
  transform: translateZ(150px); }

.right {
  -webkit-transform: rotateY(90deg) translateZ(150px);
  -moz-transform: rotateY(90deg) translateZ(150px);
  -ms-transform: rotateY(90deg) translateZ(150px);
  -o-transform: rotateY(90deg) translateZ(150px);
  transform: rotateY(90deg) translateZ(150px); }

.back {
  -webkit-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px) rotate(180deg);
  -moz-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px) rotate(180deg);
  -ms-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px) rotate(180deg);
  -o-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px) rotate(180deg);
  transform: rotateY(180deg) rotateZ(180deg) translateZ(150px) rotate(180deg); }

.left {
  -webkit-transform: rotateY(-90deg) translateZ(150px);
  -moz-transform: rotateY(-90deg) translateZ(150px);
  -ms-transform: rotateY(-90deg) translateZ(150px);
  -o-transform: rotateY(-90deg) translateZ(150px);
  transform: rotateY(-90deg) translateZ(150px); }

.bottom {
  -webkit-transform: rotateX(-90deg) translateZ(150px) rotateZ(180deg) rotate(180deg);
  -moz-transform: rotateX(-90deg) translateZ(150px) rotateZ(180deg) rotate(180deg);
  -ms-transform: rotateX(-90deg) translateZ(150px) rotateZ(180deg) rotate(180deg);
  -o-transform: rotateX(-90deg) translateZ(150px) rotateZ(180deg) rotate(180deg);
  transform: rotateX(-90deg) translateZ(150px) rotateZ(180deg) rotate(180deg); }

.tile {
  background-color: transparent;
  opacity: 1;
  color: black;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: #000; }

#cube.show-front {
  -webkit-transform: translateZ(-130px);
  -moz-transform: translateZ(-130px);
  -ms-transform: translateZ(-130px);
  -o-transform: translateZ(-130px);
  transform: translateZ(-130px); }
#cube.show-back {
  -webkit-transform: translateZ(-130px) rotateY(-180deg);
  -moz-transform: translateZ(-130px) rotateY(-180deg);
  -ms-transform: translateZ(-130px) rotateY(-180deg);
  -o-transform: translateZ(-130px) rotateY(-180deg);
  transform: translateZ(-130px) rotateY(-180deg); }
#cube.show-right {
  -webkit-transform: translateZ(-130px) rotateY(-90deg);
  -moz-transform: translateZ(-130px) rotateY(-90deg);
  -ms-transform: translateZ(-130px) rotateY(-90deg);
  -o-transform: translateZ(-130px) rotateY(-90deg);
  transform: translateZ(-130px) rotateY(-90deg); }
#cube.show-left {
  -webkit-transform: translateZ(-130px) rotateY(-270deg);
  -moz-transform: translateZ(-130px) rotateY(-270deg);
  -ms-transform: translateZ(-130px) rotateY(-270deg);
  -o-transform: translateZ(-130px) rotateY(-270deg);
  transform: translateZ(-130px) rotateY(-270deg); }
#cube.show-top {
  -webkit-transform: translateZ(-130px) rotateX(-90deg);
  -moz-transform: translateZ(-130px) rotateX(-90deg);
  -ms-transform: translateZ(-130px) rotateX(-90deg);
  -o-transform: translateZ(-130px) rotateX(-90deg);
  transform: translateZ(-130px) rotateX(-90deg); }
#cube.show-bottom {
  -webkit-transform: translateZ(-130px) rotateX(90deg);
  -moz-transform: translateZ(-130px) rotateX(90deg);
  -ms-transform: translateZ(-130px) rotateX(90deg);
  -o-transform: translateZ(-130px) rotateX(90deg);
  transform: translateZ(-130px) rotateX(90deg); }
#cube.show-front-out {
  -webkit-transform: translateZ(-550px) translateY(25px);
  -moz-transform: translateZ(-550px) translateY(25px);
  -ms-transform: translateZ(-550px) translateY(25px);
  -o-transform: translateZ(-550px) translateY(25px);
  transform: translateZ(-550px) translateY(25px); }
#cube.show-back-out {
  -webkit-transform: translateZ(-550px) translateY(25px) rotateY(-180deg);
  -moz-transform: translateZ(-550px) translateY(25px) rotateY(-180deg);
  -ms-transform: translateZ(-550px) translateY(25px) rotateY(-180deg);
  -o-transform: translateZ(-550px) translateY(25px) rotateY(-180deg);
  transform: translateZ(-550px) translateY(25px) rotateY(-180deg); }
#cube.show-right-out {
  -webkit-transform: translateZ(-550px) translateY(25px) rotateY(-90deg);
  -moz-transform: translateZ(-550px) translateY(25px) rotateY(-90deg);
  -ms-transform: translateZ(-550px) translateY(25px) rotateY(-90deg);
  -o-transform: translateZ(-550px) translateY(25px) rotateY(-90deg);
  transform: translateZ(-550px) translateY(25px) rotateY(-90deg); }
#cube.show-left-out {
  -webkit-transform: translateZ(-550px) translateY(25px) rotateY(-270deg);
  -moz-transform: translateZ(-550px) translateY(25px) rotateY(-270deg);
  -ms-transform: translateZ(-550px) translateY(25px) rotateY(-270deg);
  -o-transform: translateZ(-550px) translateY(25px) rotateY(-270deg);
  transform: translateZ(-550px) translateY(25px) rotateY(-270deg); }
#cube.show-top-out {
  -webkit-transform: translateZ(-550px) translateY(25px) rotateX(-90deg);
  -moz-transform: translateZ(-550px) translateY(25px) rotateX(-90deg);
  -ms-transform: translateZ(-550px) translateY(25px) rotateX(-90deg);
  -o-transform: translateZ(-550px) translateY(25px) rotateX(-90deg);
  transform: translateZ(-550px) translateY(25px) rotateX(-90deg); }
#cube.show-bottom-out {
  -webkit-transform: translateZ(-550px) translateY(25px) rotateX(90deg);
  -moz-transform: translateZ(-550px) translateY(25px) rotateX(90deg);
  -ms-transform: translateZ(-550px) translateY(25px) rotateX(90deg);
  -o-transform: translateZ(-550px) translateY(25px) rotateX(90deg);
  transform: translateZ(-550px) translateY(25px) rotateX(90deg); }

#cube img {
  width: 300px; }

.prev, .next {
  position: absolute;
  top: 50%;
  margin-top: -25px;
  height: 50px;
  width: 50px;
  background-color: #014536;
  z-index: 41; }

.prev {
  left: 0; }

.next {
  right: 0; }

.cta {
  display: block;
  width: 300px;
  height: 250px;
  text-decoration: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40; }