@-webkit-keyframes rotate {
    from {
      -webkit-transform: rotateY(-30deg) rotateX(-30deg);
              transform: rotateY(-30deg) rotateX(-30deg);
    }
    to {
      -webkit-transform: rotateY(690deg) rotateX(-30deg);
              transform: rotateY(690deg) rotateX(-30deg);
    }
  }
  @keyframes rotate {
    from {
      -webkit-transform: rotateY(-30deg) rotateX(-30deg);
              transform: rotateY(-30deg) rotateX(-30deg);
    }
    to {
      -webkit-transform: rotateY(690deg) rotateX(-30deg);
              transform: rotateY(690deg) rotateX(-30deg);
    }
  }
  @-webkit-keyframes spinTopRow {
    0% {
      -webkit-transform: rotateY(0deg);
              transform: rotateY(0deg);
    }
    5% {
      -webkit-transform: rotateY(90deg);
              transform: rotateY(90deg);
    }
    45% {
      -webkit-transform: rotateY(90deg);
              transform: rotateY(90deg);
    }
    50% {
      -webkit-transform: rotateY(360deg);
              transform: rotateY(360deg);
    }
    100% {
      -webkit-transform: rotateY(360deg);
              transform: rotateY(360deg);
    }
  }
  @keyframes spinTopRow {
    0% {
      -webkit-transform: rotateY(0deg);
              transform: rotateY(0deg);
    }
    5% {
      -webkit-transform: rotateY(90deg);
              transform: rotateY(90deg);
    }
    45% {
      -webkit-transform: rotateY(90deg);
              transform: rotateY(90deg);
    }
    50% {
      -webkit-transform: rotateY(360deg);
              transform: rotateY(360deg);
    }
    100% {
      -webkit-transform: rotateY(360deg);
              transform: rotateY(360deg);
    }
  }
  @-webkit-keyframes spinMiddleColumn {
    25% {
      -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
    }
    35% {
      -webkit-transform: rotateX(90deg);
              transform: rotateX(90deg);
    }
    75% {
      -webkit-transform: rotateX(90deg);
              transform: rotateX(90deg);
    }
    85% {
      -webkit-transform: rotateX(360deg);
              transform: rotateX(360deg);
    }
    100% {
      -webkit-transform: rotateX(360deg);
              transform: rotateX(360deg);
    }
  }
  @keyframes spinMiddleColumn {
    25% {
      -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
    }
    35% {
      -webkit-transform: rotateX(90deg);
              transform: rotateX(90deg);
    }
    75% {
      -webkit-transform: rotateX(90deg);
              transform: rotateX(90deg);
    }
    85% {
      -webkit-transform: rotateX(360deg);
              transform: rotateX(360deg);
    }
    100% {
      -webkit-transform: rotateX(360deg);
              transform: rotateX(360deg);
    }
  }
  @-webkit-keyframes spinMiddleRow {
    40% {
      -webkit-transform: rotateY(0deg);
              transform: rotateY(0deg);
    }
    45% {
      -webkit-transform: rotateY(90deg);
              transform: rotateY(90deg);
    }
    90% {
      -webkit-transform: rotateY(90deg);
              transform: rotateY(90deg);
    }
    95% {
      -webkit-transform: rotateY(360deg);
              transform: rotateY(360deg);
    }
    100% {
      -webkit-transform: rotateY(360deg);
              transform: rotateY(360deg);
    }
  }
  @keyframes spinMiddleRow {
    40% {
      -webkit-transform: rotateY(0deg);
              transform: rotateY(0deg);
    }
    45% {
      -webkit-transform: rotateY(90deg);
              transform: rotateY(90deg);
    }
    90% {
      -webkit-transform: rotateY(90deg);
              transform: rotateY(90deg);
    }
    95% {
      -webkit-transform: rotateY(360deg);
              transform: rotateY(360deg);
    }
    100% {
      -webkit-transform: rotateY(360deg);
              transform: rotateY(360deg);
    }
  }
  @-webkit-keyframes makeOpaque1 {
    0% {
      opacity: 1;
    }
    0.01% {
      opacity: 0;
    }
    4.99% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
  }
  @keyframes makeOpaque1 {
    0% {
      opacity: 1;
    }
    0.01% {
      opacity: 0;
    }
    4.99% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
  }
  @-webkit-keyframes makeOpaque2 {
    44.99% {
      opacity: 1;
    }
    45% {
      opacity: 0;
    }
    49.99% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }
  @keyframes makeOpaque2 {
    44.99% {
      opacity: 1;
    }
    45% {
      opacity: 0;
    }
    49.99% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }
  @-webkit-keyframes makeOpaque3 {
    24.99% {
      opacity: 1;
    }
    25% {
      opacity: 0;
    }
    34.99% {
      opacity: 0;
    }
    35% {
      opacity: 1;
    }
  }
  @keyframes makeOpaque3 {
    24.99% {
      opacity: 1;
    }
    25% {
      opacity: 0;
    }
    34.99% {
      opacity: 0;
    }
    35% {
      opacity: 1;
    }
  }
  @-webkit-keyframes makeOpaque4 {
    74.99% {
      opacity: 1;
    }
    75% {
      opacity: 0;
    }
    89.99% {
      opacity: 0;
    }
    90% {
      opacity: 1;
    }
  }
  @keyframes makeOpaque4 {
    74.99% {
      opacity: 1;
    }
    75% {
      opacity: 0;
    }
    89.99% {
      opacity: 0;
    }
    90% {
      opacity: 1;
    }
  }
  @-webkit-keyframes makeOpaque5 {
    39.99% {
      opacity: 1;
    }
    40% {
      opacity: 0;
    }
    44.99% {
      opacity: 0;
    }
    45% {
      opacity: 1;
    }
  }
  @keyframes makeOpaque5 {
    39.99% {
      opacity: 1;
    }
    40% {
      opacity: 0;
    }
    44.99% {
      opacity: 0;
    }
    45% {
      opacity: 1;
    }
  }
  @-webkit-keyframes makeOpaque6 {
    89.99% {
      opacity: 1;
    }
    90% {
      opacity: 0;
    }
    94.99% {
      opacity: 0;
    }
    95% {
      opacity: 1;
    }
  }
  @keyframes makeOpaque6 {
    89.99% {
      opacity: 1;
    }
    90% {
      opacity: 0;
    }
    94.99% {
      opacity: 0;
    }
    95% {
      opacity: 1;
    }
  }
  @-webkit-keyframes makeOpaque7 {
    74.99% {
      opacity: 1;
    }
    75% {
      opacity: 0;
    }
    89.99% {
      opacity: 0;
    }
    90% {
      opacity: 1;
    }
  }
  @keyframes makeOpaque7 {
    74.99% {
      opacity: 1;
    }
    75% {
      opacity: 0;
    }
    89.99% {
      opacity: 0;
    }
    90% {
      opacity: 1;
    }
  }
  
  .container {
    -webkit-perspective: 800px;
            perspective: 800px;
    box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.3);
    margin-left:auto; 
    margin-right:0;
    /* margin: 10vh auto; */
    height: 23em;
    width: 23em;
    position: relative;
    border-radius: 100%;
    background: #000000;
  }
  .container .rubiks-cube {
    margin-left:auto; 
    margin-right:0;
    width: 12em;
    height: 12em;
    margin: 5em;
    position: absolute;
    -webkit-animation: rotate 10s infinite linear;
            animation: rotate 10s infinite linear;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transform: rotateY(-30deg) rotateX(-30deg) scale3d(0.7, 0.7, 0.7);
            transform: rotateY(-30deg) rotateX(-30deg) scale3d(0.7, 0.7, 0.7);
  }
  .container .top-clone {
    z-index: 100;
    position: absolute;
    width: 12em;
    height: 12em;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-animation: spinTopRow 20s infinite linear;
            animation: spinTopRow 20s infinite linear;
  }
  .container .top-clone .clone-left {
    left: 0;
  }
  .container .top-clone .clone-left .left-one {
    background: #C41E3A;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-clone .clone-left .left-two {
    -webkit-animation: makeOpaque3 20s infinite linear;
            animation: makeOpaque3 20s infinite linear;
    background: #009E60;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-clone .clone-left .left-three {
    background: #0051BA;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-clone .clone-middle {
    left: 4em;
    -webkit-animation: makeOpaque7 20s infinite linear;
            animation: makeOpaque7 20s infinite linear;
  }
  .container .top-clone .clone-middle .middle-one {
    background: #FFFFFF;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-clone .clone-middle .middle-two {
    -webkit-animation: makeOpaque3 20s infinite linear;
            animation: makeOpaque3 20s infinite linear;
    background: #0051BA;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-clone .clone-middle .middle-three {
    background: #009E60;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-clone .clone-right {
    left: 8em;
  }
  .container .top-clone .clone-right .right-one {
    background: #FF5800;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-clone .clone-right .right-two {
    -webkit-animation: makeOpaque3 20s infinite linear;
            animation: makeOpaque3 20s infinite linear;
    background: #FF5800;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-clone .clone-right .right-three {
    background: #FFFFFF;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-row, .container .middle-row, .container .bottom-row {
    position: absolute;
    top: 0;
    width: 12em;
    height: 4em;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
  }
  .container .top-row {
    top: 0;
    -webkit-animation: spinTopRow 20s infinite linear;
            animation: spinTopRow 20s infinite linear;
  }
  .container .top-row .front .front-one {
    background: #009E60;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-row .front .front-two {
    -webkit-animation: makeOpaque4 20s infinite linear;
            animation: makeOpaque4 20s infinite linear;
    background: #FFFFFF;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-row .front .front-three {
    background: #FF5800;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-row .left .left-one {
    background: #FF5800;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-row .left .left-two {
    -webkit-animation: makeOpaque3 20s infinite linear;
            animation: makeOpaque3 20s infinite linear;
    background: #FFFFFF;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-row .left .left-three {
    background: #C41E3A;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-row .back .back-one {
    background: #C41E3A;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-row .back .back-two {
    -webkit-animation: makeOpaque4 20s infinite linear;
            animation: makeOpaque4 20s infinite linear;
    background: #0051BA;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-row .back .back-three {
    background: #FFD500;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-row .right .right-one {
    background: #FFFFFF;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-row .right .right-two {
    -webkit-animation: makeOpaque3 20s infinite linear;
            animation: makeOpaque3 20s infinite linear;
    background: #0051BA;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .top-row .right .right-three {
    background: #009E60;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-row {
    top: 4em;
    -webkit-animation: spinMiddleRow 20s infinite linear;
            animation: spinMiddleRow 20s infinite linear;
  }
  .container .middle-row .front .front-one {
    background: #FF5800;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-row .front .front-two {
    -webkit-animation: makeOpaque3 20s infinite linear;
            animation: makeOpaque3 20s infinite linear;
    background: #0051BA;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-row .front .front-three {
    background: #C41E3A;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-row .left .left-one {
    background: #FFFFFF;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-row .left .left-two {
    -webkit-animation: makeOpaque4 20s infinite linear;
            animation: makeOpaque4 20s infinite linear;
    background: #0051BA;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-row .left .left-three {
    background: #FFD500;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-row .back .back-one {
    background: #C41E3A;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-row .back .back-two {
    -webkit-animation: makeOpaque3 20s infinite linear;
            animation: makeOpaque3 20s infinite linear;
    background: #FF5800;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-row .back .back-three {
    background: #009E60;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-row .right .right-one {
    background: #FFD500;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-row .right .right-two {
    -webkit-animation: makeOpaque4 20s infinite linear;
            animation: makeOpaque4 20s infinite linear;
    background: #FF5800;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-row .right .right-three {
    background: #009E60;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .bottom-row {
    top: 8em;
  }
  .container .bottom-row .left .left-one {
    background: #FFFFFF;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .bottom-row .left .left-two {
    background: #0051BA;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .bottom-row .left .left-three {
    background: #FFD500;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .bottom-row .right .right-one {
    background: #FFD500;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .bottom-row .right .right-two {
    background: #C41E3A;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .bottom-row .right .right-three {
    background: #009E60;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .row-face {
    position: absolute;
    display: block;
    width: 12em;
    height: 4em;
    top: 0;
  }
  .container .row-face :nth-child(1) {
    left: 0em;
    top: 50%;
    margin-top: -1.75em;
    margin-left: .25em;
  }
  .container .row-face :nth-child(2) {
    left: 4em;
    top: 50%;
    margin-top: -1.75em;
    margin-left: .25em;
  }
  .container .row-face :nth-child(3) {
    left: 8em;
    top: 50%;
    margin-top: -1.75em;
    margin-left: .25em;
  }
  .container .row-face.front {
    -webkit-transform: translateZ(6em);
            transform: translateZ(6em);
  }
  .container .row-face.left {
    -webkit-transform: rotateY(-90deg) translateZ(6em);
            transform: rotateY(-90deg) translateZ(6em);
  }
  .container .row-face.back {
    -webkit-transform: rotateY(-180deg) translateZ(6em);
            transform: rotateY(-180deg) translateZ(6em);
  }
  .container .row-face.right {
    -webkit-transform: rotateY(90deg) translateZ(6em);
            transform: rotateY(90deg) translateZ(6em);
  }
  .container .left-column, .container .middle-column, .container .right-column {
    position: absolute;
    width: 4em;
    height: 12em;
    top: 0;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
  }
  .container .left-column {
    left: 0;
  }
  .container .left-column .front .front-three {
    background: #009E60;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .left-column .back .back-one {
    background: #FFD500;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .left-column .bottom .bottom-one {
    background: #C41E3A;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .left-column .bottom .bottom-two {
    background: #FFD500;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .left-column .bottom .bottom-three {
    background: #009E60;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-column {
    left: 4em;
    -webkit-animation: spinMiddleColumn 20s infinite linear;
            animation: spinMiddleColumn 20s infinite linear;
  }
  .container .middle-column .front {
    -webkit-animation: makeOpaque2 20s infinite linear;
            animation: makeOpaque2 20s infinite linear;
  }
  .container .middle-column .front .front-one {
    -webkit-animation: makeOpaque1 20s infinite linear;
            animation: makeOpaque1 20s infinite linear;
    background: #FFFFFF;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-column .front .front-two {
    -webkit-animation: makeOpaque6 20s infinite linear;
            animation: makeOpaque6 20s infinite linear;
    background: #0051BA;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-column .front .front-three {
    background: #009E60;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-column .top {
    -webkit-animation: makeOpaque1 20s infinite linear;
            animation: makeOpaque1 20s infinite linear;
  }
  .container .middle-column .top .top-one {
    background: #FFFFFF;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-column .top .top-two {
    -webkit-animation: makeOpaque5 20s infinite linear;
            animation: makeOpaque5 20s infinite linear;
    background: #0051BA;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-column .top .top-three {
    -webkit-animation: makeOpaque2 20s infinite linear;
            animation: makeOpaque2 20s infinite linear;
    background: #009E60;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-column .back .back-one {
    background: #FF5800;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-column .back .back-two {
    -webkit-animation: makeOpaque6 20s infinite linear;
            animation: makeOpaque6 20s infinite linear;
    background: #FF5800;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-column .back .back-three {
    -webkit-animation: makeOpaque1 20s infinite linear;
            animation: makeOpaque1 20s infinite linear;
    background: #0051BA;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-column .bottom .bottom-one {
    -webkit-animation: makeOpaque2 20s infinite linear;
            animation: makeOpaque2 20s infinite linear;
    background: #FFFFFF;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-column .bottom .bottom-two {
    -webkit-animation: makeOpaque5 20s infinite linear;
            animation: makeOpaque5 20s infinite linear;
    background: #0051BA;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .middle-column .bottom .bottom-three {
    background: #009E60;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .right-column {
    left: 8em;
  }
  .container .right-column .front .front-three {
    background: #0051BA;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .right-column .back .back-one {
    background: #FFD500;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .right-column .bottom .bottom-one {
    background: #FFFFFF;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .right-column .bottom .bottom-two {
    background: #C41E3A;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .right-column .bottom .bottom-three {
    background: #C41E3A;
    position: absolute;
    display: block;
    width: 3.6em;
    height: 3.6em;
    border-radius: 5%;
  }
  .container .column-face {
    position: absolute;
    display: block;
    width: 4em;
    height: 12em;
    left: 0;
  }
  .container .column-face :nth-child(1) {
    top: 0em;
    left: 50%;
    margin-left: -1.75em;
    margin-top: .25em;
  }
  .container .column-face :nth-child(2) {
    top: 4em;
    left: 50%;
    margin-left: -1.75em;
    margin-top: .25em;
  }
  .container .column-face :nth-child(3) {
    top: 8em;
    left: 50%;
    margin-left: -1.75em;
    margin-top: .25em;
  }
  .container .column-face.front {
    -webkit-transform: translateZ(6em);
            transform: translateZ(6em);
  }
  .container .column-face.top {
    -webkit-transform: rotateX(90deg) translateZ(6em);
            transform: rotateX(90deg) translateZ(6em);
  }
  .container .column-face.back {
    -webkit-transform: rotateX(180deg) translateZ(6em);
            transform: rotateX(180deg) translateZ(6em);
  }
  .container .column-face.bottom {
    -webkit-transform: rotateX(-90deg) translateZ(6em);
            transform: rotateX(-90deg) translateZ(6em);
  }