.l-container {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 50%;
}

.l-container--sparta {
  left: auto;
  right: 0;
}

.c-cube {
  animation: spin-cube-left 1s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  font-size: 60px;/*96px;*/
  left: 50%;
  margin-left: -0.5em;
  margin-top: -0.5em;
  position: absolute;
  top: 2px;/*50%;*/
  transform: rotateX(-33.5deg) rotateY(45deg);
  transform-origin: 0.5em 0.5em;
  transform-style: preserve-3d;
}

.c-cube--spin-right {
  animation-name: spin-cube-right;
}

.c-cube__side {
  height: 1em;
  position: absolute;
  width: 1em;
}

.c-cube__side--front,
.c-cube__side--back {
  background: #31CC89;
}

.c-cube__side--right,
.c-cube__side--left {
  background: #228F60;
}

.c-cube__side--top,
.c-cube__side--bottom {
  background: #1B724C;
}

.c-cube__side--front {
  transform: translateZ(0.5em);
}

.c-cube__side--back {
  transform: rotateX(-180deg) translateZ(0.5em);
}

.c-cube__side--right {
  transform: rotateY(90deg) translateZ(0.5em);
}

.c-cube__side--left {
  transform: rotateY(-90deg) translateZ(0.5em);
}

.c-cube__side--top {
  transform: rotateX(90deg) translateZ(0.5em);
}

.c-cube__side--bottom {
  transform: rotateX(-90deg) translateZ(0.5em);
}

@keyframes spin-cube-left {
  0% {
    transform: rotateX(-33.5deg) rotateY(45deg);
  }
  100% {
    transform: rotateX(-33.5deg) rotateY(-135deg);
  }
}
@keyframes spin-cube-right {
  0% {
    transform: rotateX(-33.5deg) rotateY(45deg);
  }
  100% {
    transform: rotateX(-33.5deg) rotateY(225deg);
  }
}