*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  
  body {
    background: #382d2d;
    font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
    font-weight: 100; }
  
  #wrapper {
    padding-top: 10%; }
  
  .viewport {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    -webkit-perspective-origin: 50% 500px;
    -moz-perspective-origin: 50% 500px;
    -ms-perspective-origin: 50% 500px;
    -o-perspective-origin: 50% 500px;
    perspective-origin: 50% 500px;
    -webkit-transform: scale(0.8, 0.8);
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -o-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    -webkit-box-reflect: below 170px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, 0.1))); }
  
  .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(1122deg);
    -moz-transform: rotateX(136deg) rotateY(1122deg);
    -ms-transform: rotateX(136deg) rotateY(1122deg);
    -o-transform: rotateX(136deg) rotateY(1122deg);
    transform: rotateX(136deg) rotateY(1122deg); }
  
  .cube > div {
    overflow: hidden;
    position: absolute;
    opacity: 0.9;
    height: 500px;
    width: 500px;
    background-image: url("data:image/jpeg;base64,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");
    background-size: cover;
    /* background: linear-gradient(rgba(242, 235, 235, 0.104), rgba(237, 231, 231, 0.139)); */
    -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 > div.cube-image {
    width: 500px;
    height: 500px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    line-height: 500px;
    font-size: 50px;
    text-align: center;
    
    -webkit-transition: color 600ms;
    -moz-transition: color 600ms;
    -ms-transition: color 600ms;
    -o-transition: color 600ms;
    transition: color 600ms; }

    .cube > div > div.cube-image a {
      color: #808080;
      text-decoration: none;
    }

    .cube > div > div.cube-image.active a {
      color: #cacaca; }
  
  .cube > div:hover {
    cursor: pointer; }
  
  .cube > div:active {
    cursor: pointer; }
  
  .cube > div:first-child {
    -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);
    outline: 1px solid transparent; }
  
  .cube > div:nth-child(2) {
    -webkit-transform: translateZ(250px);
    -moz-transform: translateZ(250px);
    -ms-transform: translateZ(250px);
    -o-transform: translateZ(250px);
    transform: translateZ(250px);
    outline: 1px solid transparent; }
  
  .cube > div:nth-child(3) {
    -webkit-transform: rotateY(90deg) translateZ(250px);
    -moz-transform: rotateY(90deg) translateZ(250px);
    -ms-transform: rotateY(90deg) translateZ(250px);
    -o-transform: rotateY(90deg) translateZ(250px);
    transform: rotateY(90deg) translateZ(250px);
    outline: 1px solid transparent; }
  
  .cube > div:nth-child(4) {
    -webkit-transform: rotateY(180deg) translateZ(250px);
    -moz-transform: rotateY(180deg) translateZ(250px);
    -ms-transform: rotateY(180deg) translateZ(250px);
    -o-transform: rotateY(180deg) translateZ(250px);
    transform: rotateY(180deg) translateZ(250px);
    outline: 1px solid transparent; }
  
  .cube > div:nth-child(5) {
    -webkit-transform: rotateY(-90deg) translateZ(250px);
    -moz-transform: rotateY(-90deg) translateZ(250px);
    -ms-transform: rotateY(-90deg) translateZ(250px);
    -o-transform: rotateY(-90deg) translateZ(250px);
    transform: rotateY(-90deg) translateZ(250px);
    outline: 1px solid transparent; }
  
  .cube > div:nth-child(6) {
    -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
    -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
    -ms-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
    -o-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
    transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
    outline: 1px solid transparent; }
  
  object {
    opacity: 0.5; }
  
  object:hover {
    opacity: 1; }
  
  @media (max-width: 640px) {
    .viewport {
      -webkit-transform: scale(0.6, 0.6);
      -moz-transform: scale(0.6, 0.6);
      -ms-transform: scale(0.6, 0.6);
      -o-transform: scale(0.6, 0.6);
      transform: scale(0.6, 0.6); } }