body {
  background-image: url('../images/augusta-national.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
}


.container {
  position: absolute;
  left: 50%;
  top: 40px;
  transform: translate(-50%, 0);
  perspective: 1000px;
  width: 330px;
  height: 375px;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

  #cube figure {
    backface-visibility: hidden;
    margin: 0;
    width: 330px;
    height: 375px;
    display: block;
    position: absolute;
  }

  #cube .front {
    transform: rotateY(0deg) translateZ(187.5px);
  }

  #cube .left {
    transform: rotateY(-90deg) translateZ(165px) translateX(22.5px);
  }

  #cube .bottom {
    transform: rotateX(-90deg) translateZ(187.5px);
  }

#cube {
  transform: translateZ(-165px);
}

  #cube.show-front {
    transform: translateZ(-165px) rotateY(0deg);
  }

  #cube.show-left {
    transform: translateX(-22.5px) translateZ(-165px) rotateY(90deg);
  }

  #cube.show-bottom {
    transform: translateZ(-165px) rotateX(90deg);
  }

#cube {
  transition: transform .4s;
}


.Xmdl-card {
  width: 330px;
  height: 375px;
}

.mdl-card__title .mdl-button--icon {
  height: 28px;
  width: 28px;
  min-width: 28px;
}

.mdl-textfield__label {
  color: rgba(0, 0, 0, 0.5);
}

a:hover {
  cursor: pointer;
}