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

body {
  background: #1b1b1b;
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  font-weight: 300;
  margin: 0;
  overflow: hidden;
}

#settings {
  z-index: 50;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0.2;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  }

#settings:hover {
  opacity: 1;
  -webkit-transition: opacity 0.1s ease-in-out;
  -moz-transition: opacity 0.1s ease-in-out;
  -ms-transition: opacity 0.1s ease-in-out;
  -o-transition: opacity 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out;
  }

#wrapper {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
  }

.viewport {
  display: table-cell;
  vertical-align: middle;
  -webkit-perspective: 1700px;
  -moz-perspective: 1700px;
  -ms-perspective: 1700px;
  -o-perspective: 1700px;
  perspective: 1700px;
  }

.cube {
  position: relative;
  margin: 0 auto;
  height: 500px;
  width: 500px;
  -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: rotateX(136deg) rotateY(136deg);
  -moz-transform: rotateX(136deg) rotateY(136deg);
  -ms-transform: rotateX(136deg) rotateY(136deg);
  -o-transform: rotateX(136deg) rotateY(136deg);
  transform: rotateX(136deg) rotateY(136deg); }

.cube > div {
  position: absolute;
  opacity: 1;
  height: 100%;
  width: 100%;

  -webkit-touch-callout: none;
  -moz-touch-callout: none;
  -ms-touch-callout: none;
  -o-touch-callout: none;
  touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  }


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

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

#side0 {
  background-image: url("markers/A_0.svg");
  background-size: contain;
  -webkit-transform: rotate(180deg) rotateX(-90deg) translateZ(250px);
  -moz-transform: rotate(180deg) rotateX(-90deg) translateZ(250px);
  -ms-transform: rotate(180deg) rotateX(-90deg) translateZ(250px);
  -o-transform: rotate(180deg) rotateX(-90deg) translateZ(250px);
  transform: rotate(180deg) rotateX(-90deg) translateZ(250px);
}

#side1 {
  background-image: url("markers/A_1.svg");
  background-size: contain;
  -webkit-transform: rotate(180deg) translateZ(250px);
  -moz-transform: rotate(180deg) translateZ(250px);
  -ms-transform: rotate(180deg) translateZ(250px);
  -o-transform: rotate(180deg) translateZ(250px);
  transform: rotate(180deg) translateZ(250px);
}

#side2 {
  background-image: url("markers/A_2.svg");
  background-size: contain;
  -webkit-transform: rotate(180deg) rotateY(90deg) translateZ(250px);
  -moz-transform: rotate(180deg) rotateY(90deg) translateZ(250px);
  -ms-transform: rotate(180deg) rotateY(90deg) translateZ(250px);
  -o-transform: rotate(180deg) rotateY(90deg) translateZ(250px);
  transform: rotate(180deg) rotateY(90deg) translateZ(250px);
}

#side3 {
  background-image: url("markers/A_3.svg");
  background-size: contain;
  -webkit-transform: rotate(180deg) rotateY(180deg) translateZ(250px);
  -moz-transform: rotate(180deg) rotateY(180deg) translateZ(250px);
  -ms-transform: rotate(180deg) rotateY(180deg) translateZ(250px);
  -o-transform: rotate(180deg) rotateY(180deg) translateZ(250px);
  transform: rotate(180deg) rotateY(180deg) translateZ(250px);
}

#side4 {
  background-image: url("markers/A_4.svg");
  background-size: contain;
  -webkit-transform: rotate(180deg) rotateY(-90deg) translateZ(250px);
  -moz-transform: rotate(180deg) rotateY(-90deg) translateZ(250px);
  -ms-transform: rotate(180deg) rotateY(-90deg) translateZ(250px);
  -o-transform: rotate(180deg) rotateY(-90deg) translateZ(250px);
  transform: rotate(180deg) rotateY(-90deg) translateZ(250px);
}

#side5 {
  background-image: url("markers/A_5.svg");
  background-size: contain;
  -webkit-transform: rotateX(-90deg) translateZ(250px);
  -moz-transform: rotateX(-90deg) translateZ(250px);
  -ms-transform: rotateX(-90deg) translateZ(250px);
  -o-transform: rotateX(-90deg) translateZ(250px);
  transform: rotateX(-90deg) translateZ(250px);
}