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

html,
body {
  height: 100%; }

body {
  align-items: center;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  perspective: 800px; }

.container {
  position: relative; }

.rubiks-cube {
  animation: rubiks-cube 18s linear infinite; }

@keyframes rubiks-cube {
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } }

.reflection {
  left: 0;
  margin-top: 180px;
  opacity: 0.15;
  position: absolute;
  top: 100%;
  transform: scaleY(-1);
  z-index: -1; }
  .reflection::after {
    background: linear-gradient(white 90%, rgba(255, 255, 255, 0));
    bottom: 0;
    content: '';
    height: 200%;
    left: -50%;
    position: absolute;
    width: 200%; }

.rubiks-cube-1 {
  transform-style: preserve-3d;
  transform-origin: 50% 50% -90px;
  width: 270px;
  height: 270px; }
  .rubiks-cube-1 .detail {
    position: relative;
    width: 90px;
    height: 90px;
    transform-style: preserve-3d;
    position: absolute;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear; }
    .rubiks-cube-1 .detail .side {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%; }
      .rubiks-cube-1 .detail .side.front {
        transform: translateZ(45px); }
      .rubiks-cube-1 .detail .side.back {
        transform: translateZ(-45px) rotateY(180deg); }
      .rubiks-cube-1 .detail .side.top {
        transform: translateY(-50%) rotateX(90deg); }
      .rubiks-cube-1 .detail .side.bottom {
        transform: translateY(50%) rotateX(-90deg); }
      .rubiks-cube-1 .detail .side.left {
        transform: translateX(-50%) rotateY(-90deg); }
      .rubiks-cube-1 .detail .side.right {
        transform: translateX(50%) rotateY(90deg); }
    .rubiks-cube-1 .detail:nth-child(1) {
      margin-top: 0px;
      margin-left: 0px;
      transform-origin: 150% 150% -90px;
      transform: translateZ(0px); }
    .rubiks-cube-1 .detail:nth-child(2) {
      margin-top: 0px;
      margin-left: 90px;
      transform-origin: 50% 150% -90px;
      transform: translateZ(0px); }
    .rubiks-cube-1 .detail:nth-child(3) {
      margin-top: 0px;
      margin-left: 180px;
      transform-origin: -50% 150% -90px;
      transform: translateZ(0px); }
    .rubiks-cube-1 .detail:nth-child(4) {
      margin-top: 0px;
      margin-left: 0px;
      transform-origin: 150% 150% 0;
      transform: translateZ(-90px); }
    .rubiks-cube-1 .detail:nth-child(5) {
      margin-top: 0px;
      margin-left: 90px;
      transform-origin: 50% 150% 0;
      transform: translateZ(-90px); }
    .rubiks-cube-1 .detail:nth-child(6) {
      margin-top: 0px;
      margin-left: 180px;
      transform-origin: -50% 150% 0;
      transform: translateZ(-90px); }
    .rubiks-cube-1 .detail:nth-child(7) {
      margin-top: 0px;
      margin-left: 0px;
      transform-origin: 150% 150% 90px;
      transform: translateZ(-180px); }
    .rubiks-cube-1 .detail:nth-child(8) {
      margin-top: 0px;
      margin-left: 90px;
      transform-origin: 50% 150% 90px;
      transform: translateZ(-180px); }
    .rubiks-cube-1 .detail:nth-child(9) {
      margin-top: 0px;
      margin-left: 180px;
      transform-origin: -50% 150% 90px;
      transform: translateZ(-180px); }
    .rubiks-cube-1 .detail:nth-child(10) {
      margin-top: 90px;
      margin-left: 0px;
      transform-origin: 150% 50% -90px;
      transform: translateZ(0px); }
    .rubiks-cube-1 .detail:nth-child(11) {
      margin-top: 90px;
      margin-left: 90px;
      transform-origin: 50% 50% -90px;
      transform: translateZ(0px); }
    .rubiks-cube-1 .detail:nth-child(12) {
      margin-top: 90px;
      margin-left: 180px;
      transform-origin: -50% 50% -90px;
      transform: translateZ(0px); }
    .rubiks-cube-1 .detail:nth-child(13) {
      margin-top: 90px;
      margin-left: 0px;
      transform-origin: 150% 50% 0;
      transform: translateZ(-90px); }
    .rubiks-cube-1 .detail:nth-child(14) {
      margin-top: 90px;
      margin-left: 90px;
      transform-origin: 50% 50% 0;
      transform: translateZ(-90px); }
    .rubiks-cube-1 .detail:nth-child(15) {
      margin-top: 90px;
      margin-left: 180px;
      transform-origin: -50% 50% 0;
      transform: translateZ(-90px); }
    .rubiks-cube-1 .detail:nth-child(16) {
      margin-top: 90px;
      margin-left: 0px;
      transform-origin: 150% 50% 90px;
      transform: translateZ(-180px); }
    .rubiks-cube-1 .detail:nth-child(17) {
      margin-top: 90px;
      margin-left: 90px;
      transform-origin: 50% 50% 90px;
      transform: translateZ(-180px); }
    .rubiks-cube-1 .detail:nth-child(18) {
      margin-top: 90px;
      margin-left: 180px;
      transform-origin: -50% 50% 90px;
      transform: translateZ(-180px); }
    .rubiks-cube-1 .detail:nth-child(19) {
      margin-top: 180px;
      margin-left: 0px;
      transform-origin: 150% -50% -90px;
      transform: translateZ(0px); }
    .rubiks-cube-1 .detail:nth-child(20) {
      margin-top: 180px;
      margin-left: 90px;
      transform-origin: 50% -50% -90px;
      transform: translateZ(0px); }
    .rubiks-cube-1 .detail:nth-child(21) {
      margin-top: 180px;
      margin-left: 180px;
      transform-origin: -50% -50% -90px;
      transform: translateZ(0px); }
    .rubiks-cube-1 .detail:nth-child(22) {
      margin-top: 180px;
      margin-left: 0px;
      transform-origin: 150% -50% 0;
      transform: translateZ(-90px); }
    .rubiks-cube-1 .detail:nth-child(23) {
      margin-top: 180px;
      margin-left: 90px;
      transform-origin: 50% -50% 0;
      transform: translateZ(-90px); }
    .rubiks-cube-1 .detail:nth-child(24) {
      margin-top: 180px;
      margin-left: 180px;
      transform-origin: -50% -50% 0;
      transform: translateZ(-90px); }
    .rubiks-cube-1 .detail:nth-child(25) {
      margin-top: 180px;
      margin-left: 0px;
      transform-origin: 150% -50% 90px;
      transform: translateZ(-180px); }
    .rubiks-cube-1 .detail:nth-child(26) {
      margin-top: 180px;
      margin-left: 90px;
      transform-origin: 50% -50% 90px;
      transform: translateZ(-180px); }
    .rubiks-cube-1 .detail:nth-child(27) {
      margin-top: 180px;
      margin-left: 180px;
      transform-origin: -50% -50% 90px;
      transform: translateZ(-180px); }
    .rubiks-cube-1 .detail .side {
      border: 2px solid #000;
      background: rgba(0,0,0,0.3); }
    .rubiks-cube-1 .detail:nth-child(7) .top {
      background-color: rgba(9,95,173,0.8); }
    .rubiks-cube-1 .detail:nth-child(8) .top {
      background-color: rgba(9,95,173,0.8); }
    .rubiks-cube-1 .detail:nth-child(9) .top {
      background-color: rgba(9,95,173,0.8); }
    .rubiks-cube-1 .detail:nth-child(6) .top {
      background-color: rgba(9,95,173,0.8); }
    .rubiks-cube-1 .detail:nth-child(3) .top {
      background-color: rgba(9,95,173,0.8); }
    .rubiks-cube-1 .detail:nth-child(2) .top {
      background-color: rgba(9,95,173,0.8); }
    .rubiks-cube-1 .detail:nth-child(1) .top {
      background-color: rgba(9,95,173,0.8); }
    .rubiks-cube-1 .detail:nth-child(4) .top {
      background-color: rgba(9,95,173,0.8); }
    .rubiks-cube-1 .detail:nth-child(5) .top {
      background-color: rgba(9,95,173,0.8); }
    .rubiks-cube-1 .detail:nth-child(25) .bottom {
      background-color: rgba(245,130,32,0.8); }
    .rubiks-cube-1 .detail:nth-child(26) .bottom {
      background-color: rgba(245,130,32,0.8); }
    .rubiks-cube-1 .detail:nth-child(27) .bottom {
      background-color: rgba(245,130,32,0.8); }
    .rubiks-cube-1 .detail:nth-child(24) .bottom {
      background-color: rgba(245,130,32,0.8); }
    .rubiks-cube-1 .detail:nth-child(21) .bottom {
      background-color: rgba(245,130,32,0.8); }
    .rubiks-cube-1 .detail:nth-child(20) .bottom {
      background-color: rgba(245,130,32,0.8); }
    .rubiks-cube-1 .detail:nth-child(19) .bottom {
      background-color: rgba(245,130,32,0.8); }
    .rubiks-cube-1 .detail:nth-child(22) .bottom {
      background-color: rgba(245,130,32,0.8); }
    .rubiks-cube-1 .detail:nth-child(23) .bottom {
      background-color: rgba(245,130,32,0.8); }
    .rubiks-cube-1 .detail:nth-child(1) .left {
      background-color: rgba(254,226,8,0.8); }
    .rubiks-cube-1 .detail:nth-child(4) .left {
      background-color: rgba(254,226,8,0.8); }
    .rubiks-cube-1 .detail:nth-child(7) .left {
      background-color: rgba(254,226,8,0.8); }
    .rubiks-cube-1 .detail:nth-child(16) .left {
      background-color: rgba(254,226,8,0.8); }
    .rubiks-cube-1 .detail:nth-child(25) .left {
      background-color: rgba(254,226,8,0.8); }
    .rubiks-cube-1 .detail:nth-child(22) .left {
      background-color: rgba(254,226,8,0.8); }
    .rubiks-cube-1 .detail:nth-child(19) .left {
      background-color: rgba(254,226,8,0.8); }
    .rubiks-cube-1 .detail:nth-child(10) .left {
      background-color: rgba(254,226,8,0.8); }
    .rubiks-cube-1 .detail:nth-child(13) .left {
      background-color: rgba(254,226,8,0.8); }
    .rubiks-cube-1 .detail:nth-child(3) .right {
      background-color: rgba(236,30,53,0.8); }
    .rubiks-cube-1 .detail:nth-child(6) .right {
      background-color: rgba(236,30,53,0.8); }
    .rubiks-cube-1 .detail:nth-child(9) .right {
      background-color: rgba(236,30,53,0.8); }
    .rubiks-cube-1 .detail:nth-child(18) .right {
      background-color: rgba(236,30,53,0.8); }
    .rubiks-cube-1 .detail:nth-child(27) .right {
      background-color: rgba(236,30,53,0.8); }
    .rubiks-cube-1 .detail:nth-child(24) .right {
      background-color: rgba(236,30,53,0.8); }
    .rubiks-cube-1 .detail:nth-child(21) .right {
      background-color: rgba(236,30,53,0.8); }
    .rubiks-cube-1 .detail:nth-child(12) .right {
      background-color: rgba(236,30,53,0.8); }
    .rubiks-cube-1 .detail:nth-child(15) .right {
      background-color: rgba(236,30,53,0.8); }
    .rubiks-cube-1 .detail:nth-child(1) .front {
      background-color: rgba(0,175,77,0.8); }
    .rubiks-cube-1 .detail:nth-child(2) .front {
      background-color: rgba(0,175,77,0.8); }
    .rubiks-cube-1 .detail:nth-child(3) .front {
      background-color: rgba(0,175,77,0.8); }
    .rubiks-cube-1 .detail:nth-child(12) .front {
      background-color: rgba(0,175,77,0.8); }
    .rubiks-cube-1 .detail:nth-child(21) .front {
      background-color: rgba(0,175,77,0.8); }
    .rubiks-cube-1 .detail:nth-child(20) .front {
      background-color: rgba(0,175,77,0.8); }
    .rubiks-cube-1 .detail:nth-child(19) .front {
      background-color: rgba(0,175,77,0.8); }
    .rubiks-cube-1 .detail:nth-child(10) .front {
      background-color: rgba(0,175,77,0.8); }
    .rubiks-cube-1 .detail:nth-child(11) .front {
      background-color: rgba(0,175,77,0.8); }
    .rubiks-cube-1 .detail:nth-child(7) .back {
      background-color: rgba(255,255,255,.8); }
    .rubiks-cube-1 .detail:nth-child(8) .back {
      background-color: rgba(255,255,255,.8); }
    .rubiks-cube-1 .detail:nth-child(9) .back {
      background-color: rgba(255,255,255,.8); }
    .rubiks-cube-1 .detail:nth-child(18) .back {
      background-color: rgba(255,255,255,.8); }
    .rubiks-cube-1 .detail:nth-child(27) .back {
      background-color: rgba(255,255,255,.8); }
    .rubiks-cube-1 .detail:nth-child(26) .back {
      background-color: rgba(255,255,255,.8); }
    .rubiks-cube-1 .detail:nth-child(25) .back {
      background-color: rgba(255,255,255,.8); }
    .rubiks-cube-1 .detail:nth-child(16) .back {
      background-color: rgba(255,255,255,.8); }
    .rubiks-cube-1 .detail:nth-child(17) .back {
      background-color: rgba(255,255,255,.8); }

.rubiks-cube-1 .detail:nth-child(1) {
  animation-name: rubiks-cube-1-detail-1;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-1 {
  5% {
    transform: translateZ(0px); }
  10% {
    transform: translateZ(0px) rotateY(-90deg); }
  15% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg); }
  20% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg); }
  25% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg); }
  30% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg); }
  35% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg); }
  40% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg); }
  45% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg); }
  50% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  55% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  60% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg); }
  65% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  70% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  75% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  80% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  85% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg); }
  90% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg); }
  95% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg); }
  100% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg); } }

.rubiks-cube-1 .detail:nth-child(2) {
  animation-name: rubiks-cube-1-detail-2;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-2 {
  5% {
    transform: translateZ(0px); }
  10% {
    transform: translateZ(0px) rotateY(-90deg); }
  15% {
    transform: translateZ(0px) rotateY(-90deg); }
  20% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg); }
  25% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  30% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  35% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  40% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  45% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  50% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg); }
  55% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg); }
  60% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg); }
  65% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg); }
  70% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg); }
  75% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(-90deg); }
  80% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(-90deg); }
  85% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(-90deg) rotateY(90deg); }
  90% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(-90deg) rotateY(90deg); }
  95% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(-90deg) rotateY(90deg); }
  100% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(-90deg) rotateY(90deg); } }

.rubiks-cube-1 .detail:nth-child(3) {
  animation-name: rubiks-cube-1-detail-3;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-3 {
  5% {
    transform: translateZ(0px); }
  10% {
    transform: translateZ(0px) rotateY(-90deg); }
  15% {
    transform: translateZ(0px) rotateY(-90deg); }
  20% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg); }
  25% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg); }
  30% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg); }
  35% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg); }
  40% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg); }
  45% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg); }
  50% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg); }
  55% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  60% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg); }
  65% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg); }
  70% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg); }
  75% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg); }
  80% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg); }
  85% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg) rotateY(90deg); }
  90% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); }
  95% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); }
  100% {
    transform: translateZ(0px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); } }

.rubiks-cube-1 .detail:nth-child(4) {
  animation-name: rubiks-cube-1-detail-4;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-4 {
  5% {
    transform: translateZ(-90px); }
  10% {
    transform: translateZ(-90px) rotateY(-90deg); }
  15% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg); }
  20% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg); }
  25% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  30% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  35% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  40% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  45% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  50% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  55% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  60% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  65% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  70% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  75% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  80% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  85% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  90% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  95% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  100% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); } }

.rubiks-cube-1 .detail:nth-child(5) {
  animation-name: rubiks-cube-1-detail-5;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-5 {
  5% {
    transform: translateZ(-90px); }
  10% {
    transform: translateZ(-90px) rotateY(-90deg); }
  15% {
    transform: translateZ(-90px) rotateY(-90deg); }
  20% {
    transform: translateZ(-90px) rotateY(-90deg); }
  25% {
    transform: translateZ(-90px) rotateY(-90deg); }
  30% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg); }
  35% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg); }
  40% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg); }
  45% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg); }
  50% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  55% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  60% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  65% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  70% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg); }
  75% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg); }
  80% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  85% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  90% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  95% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  100% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); } }

.rubiks-cube-1 .detail:nth-child(6) {
  animation-name: rubiks-cube-1-detail-6;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-6 {
  5% {
    transform: translateZ(-90px); }
  10% {
    transform: translateZ(-90px) rotateY(-90deg); }
  15% {
    transform: translateZ(-90px) rotateY(-90deg); }
  20% {
    transform: translateZ(-90px) rotateY(-90deg); }
  25% {
    transform: translateZ(-90px) rotateY(-90deg); }
  30% {
    transform: translateZ(-90px) rotateY(-90deg); }
  35% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg); }
  40% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg); }
  45% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg); }
  50% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg); }
  55% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  60% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  65% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  70% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  75% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg); }
  80% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg); }
  85% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg) rotateY(90deg); }
  90% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); }
  95% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); }
  100% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); } }

.rubiks-cube-1 .detail:nth-child(7) {
  animation-name: rubiks-cube-1-detail-7;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-7 {
  5% {
    transform: translateZ(-180px); }
  10% {
    transform: translateZ(-180px) rotateY(-90deg); }
  15% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg); }
  20% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg); }
  25% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg); }
  30% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg); }
  35% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg); }
  40% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  45% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  50% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  55% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  60% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  65% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  70% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  75% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  80% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  85% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  90% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  95% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  100% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); } }

.rubiks-cube-1 .detail:nth-child(8) {
  animation-name: rubiks-cube-1-detail-8;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-8 {
  5% {
    transform: translateZ(-180px); }
  10% {
    transform: translateZ(-180px) rotateY(-90deg); }
  15% {
    transform: translateZ(-180px) rotateY(-90deg); }
  20% {
    transform: translateZ(-180px) rotateY(-90deg); }
  25% {
    transform: translateZ(-180px) rotateY(-90deg); }
  30% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg); }
  35% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg); }
  40% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  45% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  50% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  55% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  60% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  65% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  70% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  75% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  80% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  85% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  90% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  95% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  100% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); } }

.rubiks-cube-1 .detail:nth-child(9) {
  animation-name: rubiks-cube-1-detail-9;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-9 {
  5% {
    transform: translateZ(-180px); }
  10% {
    transform: translateZ(-180px) rotateY(-90deg); }
  15% {
    transform: translateZ(-180px) rotateY(-90deg); }
  20% {
    transform: translateZ(-180px) rotateY(-90deg); }
  25% {
    transform: translateZ(-180px) rotateY(-90deg); }
  30% {
    transform: translateZ(-180px) rotateY(-90deg); }
  35% {
    transform: translateZ(-180px) rotateY(-90deg); }
  40% {
    transform: translateZ(-180px) rotateY(-90deg); }
  45% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg); }
  50% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  55% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg); }
  60% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg); }
  65% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  70% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  75% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  80% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  85% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  90% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  95% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  100% {
    transform: translateZ(-180px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); } }

.rubiks-cube-1 .detail:nth-child(10) {
  animation-name: rubiks-cube-1-detail-10;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-10 {
  5% {
    transform: translateZ(0px); }
  10% {
    transform: translateZ(0px); }
  15% {
    transform: translateZ(0px); }
  20% {
    transform: translateZ(0px) rotateX(90deg); }
  25% {
    transform: translateZ(0px) rotateX(90deg); }
  30% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg); }
  35% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg); }
  40% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg); }
  45% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg); }
  50% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg); }
  55% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg); }
  60% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg); }
  65% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg); }
  70% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg); }
  75% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg); }
  80% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg) rotateY(90deg); }
  85% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg) rotateY(90deg) rotateX(90deg); }
  90% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg) rotateY(90deg) rotateX(90deg); }
  95% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg) rotateY(90deg) rotateX(90deg); }
  100% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg) rotateY(90deg) rotateX(90deg); } }

.rubiks-cube-1 .detail:nth-child(11) {
  animation-name: rubiks-cube-1-detail-11;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-11 {
  5% {
    transform: translateZ(0px); }
  10% {
    transform: translateZ(0px); }
  15% {
    transform: translateZ(0px); }
  20% {
    transform: translateZ(0px); }
  25% {
    transform: translateZ(0px) rotateY(-90deg); }
  30% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg); }
  35% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  40% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  45% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  50% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  55% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  60% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg); }
  65% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg); }
  70% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg) rotateY(90deg); }
  75% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg); }
  80% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg) rotateY(90deg); }
  85% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg) rotateY(90deg); }
  90% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg) rotateY(90deg) rotateZ(90deg); }
  95% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg) rotateY(90deg) rotateZ(90deg); }
  100% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateZ(-90deg) rotateY(90deg) rotateX(90deg) rotateY(90deg) rotateZ(90deg); } }

.rubiks-cube-1 .detail:nth-child(12) {
  animation-name: rubiks-cube-1-detail-12;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-12 {
  5% {
    transform: translateZ(0px); }
  10% {
    transform: translateZ(0px); }
  15% {
    transform: translateZ(0px); }
  20% {
    transform: translateZ(0px); }
  25% {
    transform: translateZ(0px) rotateY(-90deg); }
  30% {
    transform: translateZ(0px) rotateY(-90deg); }
  35% {
    transform: translateZ(0px) rotateY(-90deg); }
  40% {
    transform: translateZ(0px) rotateY(-90deg); }
  45% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg); }
  50% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg); }
  55% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  60% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  65% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateX(-90deg); }
  70% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  75% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  80% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  85% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  90% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  95% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateZ(90deg); }
  100% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateZ(90deg); } }

.rubiks-cube-1 .detail:nth-child(13) {
  animation-name: rubiks-cube-1-detail-13;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-13 {
  5% {
    transform: translateZ(-90px); }
  10% {
    transform: translateZ(-90px); }
  15% {
    transform: translateZ(-90px); }
  20% {
    transform: translateZ(-90px) rotateX(90deg); }
  25% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg); }
  30% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg); }
  35% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  40% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  45% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  50% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  55% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  60% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  65% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  70% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  75% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  80% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  85% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  90% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  95% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  100% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); } }

.rubiks-cube-1 .detail:nth-child(14) {
  animation-name: rubiks-cube-1-detail-14;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-14 {
  5% {
    transform: translateZ(-90px); }
  10% {
    transform: translateZ(-90px); }
  15% {
    transform: translateZ(-90px); }
  20% {
    transform: translateZ(-90px); }
  25% {
    transform: translateZ(-90px) rotateY(-90deg); }
  30% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg); }
  35% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  40% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  45% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  50% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  55% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  60% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  65% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  70% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg); }
  75% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateY(-90deg); }
  80% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg); }
  85% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg); }
  90% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg); }
  95% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg); }
  100% {
    transform: translateZ(-90px) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg); } }

.rubiks-cube-1 .detail:nth-child(15) {
  animation-name: rubiks-cube-1-detail-15;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-15 {
  5% {
    transform: translateZ(-90px); }
  10% {
    transform: translateZ(-90px); }
  15% {
    transform: translateZ(-90px); }
  20% {
    transform: translateZ(-90px); }
  25% {
    transform: translateZ(-90px) rotateY(-90deg); }
  30% {
    transform: translateZ(-90px) rotateY(-90deg); }
  35% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg); }
  40% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg); }
  45% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg); }
  50% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg); }
  55% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  60% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  65% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  70% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg); }
  75% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg); }
  80% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg); }
  85% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg); }
  90% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg); }
  95% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg) rotateX(90deg); }
  100% {
    transform: translateZ(-90px) rotateY(-90deg) rotateZ(-90deg) rotateX(90deg) rotateZ(-90deg) rotateX(90deg); } }

.rubiks-cube-1 .detail:nth-child(16) {
  animation-name: rubiks-cube-1-detail-16;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-16 {
  5% {
    transform: translateZ(-180px); }
  10% {
    transform: translateZ(-180px); }
  15% {
    transform: translateZ(-180px) rotateZ(90deg); }
  20% {
    transform: translateZ(-180px) rotateZ(90deg); }
  25% {
    transform: translateZ(-180px) rotateZ(90deg); }
  30% {
    transform: translateZ(-180px) rotateZ(90deg); }
  35% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg); }
  40% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  45% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  50% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  55% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  60% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  65% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  70% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  75% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  80% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  85% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  90% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg); }
  95% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg); }
  100% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg); } }

.rubiks-cube-1 .detail:nth-child(17) {
  animation-name: rubiks-cube-1-detail-17;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-17 {
  5% {
    transform: translateZ(-180px); }
  10% {
    transform: translateZ(-180px); }
  15% {
    transform: translateZ(-180px) rotateZ(90deg); }
  20% {
    transform: translateZ(-180px) rotateZ(90deg); }
  25% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg); }
  30% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  35% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg); }
  40% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg); }
  45% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg); }
  50% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg); }
  55% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg); }
  60% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg); }
  65% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg); }
  70% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg) rotateX(90deg); }
  75% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg); }
  80% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg); }
  85% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg); }
  90% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg); }
  95% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg); }
  100% {
    transform: translateZ(-180px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg) rotateX(90deg) rotateY(-90deg) rotateX(90deg); } }

.rubiks-cube-1 .detail:nth-child(18) {
  animation-name: rubiks-cube-1-detail-18;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-18 {
  5% {
    transform: translateZ(-180px); }
  10% {
    transform: translateZ(-180px); }
  15% {
    transform: translateZ(-180px) rotateZ(90deg); }
  20% {
    transform: translateZ(-180px) rotateZ(90deg); }
  25% {
    transform: translateZ(-180px) rotateZ(90deg); }
  30% {
    transform: translateZ(-180px) rotateZ(90deg); }
  35% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg); }
  40% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  45% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  50% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  55% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  60% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  65% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  70% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  75% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  80% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  85% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  90% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  95% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  100% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); } }

.rubiks-cube-1 .detail:nth-child(19) {
  animation-name: rubiks-cube-1-detail-19;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-19 {
  5% {
    transform: translateZ(0px); }
  10% {
    transform: translateZ(0px); }
  15% {
    transform: translateZ(0px); }
  20% {
    transform: translateZ(0px) rotateX(90deg); }
  25% {
    transform: translateZ(0px) rotateX(90deg); }
  30% {
    transform: translateZ(0px) rotateX(90deg); }
  35% {
    transform: translateZ(0px) rotateX(90deg); }
  40% {
    transform: translateZ(0px) rotateX(90deg); }
  45% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg); }
  50% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg); }
  55% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg); }
  60% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg); }
  65% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg); }
  70% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg); }
  75% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg); }
  80% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg); }
  85% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg); }
  90% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg) rotateZ(90deg); }
  95% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg); }
  100% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg); } }

.rubiks-cube-1 .detail:nth-child(20) {
  animation-name: rubiks-cube-1-detail-20;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-20 {
  5% {
    transform: translateZ(0px); }
  10% {
    transform: translateZ(0px); }
  15% {
    transform: translateZ(0px); }
  20% {
    transform: translateZ(0px); }
  25% {
    transform: translateZ(0px); }
  30% {
    transform: translateZ(0px); }
  35% {
    transform: translateZ(0px) rotateX(90deg); }
  40% {
    transform: translateZ(0px) rotateX(90deg); }
  45% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg); }
  50% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg); }
  55% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg); }
  60% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg); }
  65% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg); }
  70% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg); }
  75% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg); }
  80% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg) rotateX(-90deg); }
  85% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg) rotateX(-90deg); }
  90% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg) rotateX(-90deg); }
  95% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg) rotateX(-90deg); }
  100% {
    transform: translateZ(0px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(90deg) rotateX(-90deg); } }

.rubiks-cube-1 .detail:nth-child(21) {
  animation-name: rubiks-cube-1-detail-21;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-21 {
  5% {
    transform: translateZ(0px); }
  10% {
    transform: translateZ(0px); }
  15% {
    transform: translateZ(0px); }
  20% {
    transform: translateZ(0px); }
  25% {
    transform: translateZ(0px); }
  30% {
    transform: translateZ(0px); }
  35% {
    transform: translateZ(0px); }
  40% {
    transform: translateZ(0px) rotateY(-90deg); }
  45% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg); }
  50% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg); }
  55% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  60% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  65% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  70% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  75% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  80% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  85% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  90% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  95% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  100% {
    transform: translateZ(0px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); } }

.rubiks-cube-1 .detail:nth-child(22) {
  animation-name: rubiks-cube-1-detail-22;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-22 {
  5% {
    transform: translateZ(-90px); }
  10% {
    transform: translateZ(-90px); }
  15% {
    transform: translateZ(-90px); }
  20% {
    transform: translateZ(-90px) rotateX(90deg); }
  25% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg); }
  30% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg); }
  35% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg); }
  40% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg); }
  45% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg); }
  50% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg); }
  55% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg); }
  60% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateX(90deg); }
  65% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateX(90deg); }
  70% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateX(90deg); }
  75% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateX(90deg); }
  80% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateX(90deg) rotateZ(90deg); }
  85% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateX(90deg) rotateZ(90deg) rotateX(90deg); }
  90% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateX(90deg) rotateZ(90deg) rotateX(90deg); }
  95% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateX(90deg) rotateZ(90deg) rotateX(90deg) rotateY(90deg); }
  100% {
    transform: translateZ(-90px) rotateX(90deg) rotateZ(90deg) rotateX(90deg) rotateZ(90deg) rotateX(90deg) rotateY(90deg); } }

.rubiks-cube-1 .detail:nth-child(23) {
  animation-name: rubiks-cube-1-detail-23;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-23 {
  5% {
    transform: translateZ(-90px); }
  10% {
    transform: translateZ(-90px); }
  15% {
    transform: translateZ(-90px); }
  20% {
    transform: translateZ(-90px); }
  25% {
    transform: translateZ(-90px); }
  30% {
    transform: translateZ(-90px) rotateZ(90deg); }
  35% {
    transform: translateZ(-90px) rotateZ(90deg); }
  40% {
    transform: translateZ(-90px) rotateZ(90deg); }
  45% {
    transform: translateZ(-90px) rotateZ(90deg); }
  50% {
    transform: translateZ(-90px) rotateZ(90deg); }
  55% {
    transform: translateZ(-90px) rotateZ(90deg); }
  60% {
    transform: translateZ(-90px) rotateZ(90deg); }
  65% {
    transform: translateZ(-90px) rotateZ(90deg) rotateY(-90deg); }
  70% {
    transform: translateZ(-90px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  75% {
    transform: translateZ(-90px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  80% {
    transform: translateZ(-90px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  85% {
    transform: translateZ(-90px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  90% {
    transform: translateZ(-90px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  95% {
    transform: translateZ(-90px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  100% {
    transform: translateZ(-90px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); } }

.rubiks-cube-1 .detail:nth-child(24) {
  animation-name: rubiks-cube-1-detail-24;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-24 {
  5% {
    transform: translateZ(-90px); }
  10% {
    transform: translateZ(-90px); }
  15% {
    transform: translateZ(-90px); }
  20% {
    transform: translateZ(-90px); }
  25% {
    transform: translateZ(-90px); }
  30% {
    transform: translateZ(-90px) rotateZ(90deg); }
  35% {
    transform: translateZ(-90px) rotateZ(90deg); }
  40% {
    transform: translateZ(-90px) rotateZ(90deg) rotateX(-90deg); }
  45% {
    transform: translateZ(-90px) rotateZ(90deg) rotateX(-90deg); }
  50% {
    transform: translateZ(-90px) rotateZ(90deg) rotateX(-90deg); }
  55% {
    transform: translateZ(-90px) rotateZ(90deg) rotateX(-90deg); }
  60% {
    transform: translateZ(-90px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  65% {
    transform: translateZ(-90px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg); }
  70% {
    transform: translateZ(-90px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg); }
  75% {
    transform: translateZ(-90px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg); }
  80% {
    transform: translateZ(-90px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg); }
  85% {
    transform: translateZ(-90px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg); }
  90% {
    transform: translateZ(-90px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg); }
  95% {
    transform: translateZ(-90px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg); }
  100% {
    transform: translateZ(-90px) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg) rotateZ(-90deg); } }

.rubiks-cube-1 .detail:nth-child(25) {
  animation-name: rubiks-cube-1-detail-25;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-25 {
  5% {
    transform: translateZ(-180px); }
  10% {
    transform: translateZ(-180px); }
  15% {
    transform: translateZ(-180px) rotateZ(90deg); }
  20% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg); }
  25% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg); }
  30% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg); }
  35% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg); }
  40% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  45% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  50% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  55% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  60% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  65% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  70% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  75% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  80% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg); }
  85% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg); }
  90% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg); }
  95% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg); }
  100% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg); } }

.rubiks-cube-1 .detail:nth-child(26) {
  animation-name: rubiks-cube-1-detail-26;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-26 {
  5% {
    transform: translateZ(-180px); }
  10% {
    transform: translateZ(-180px); }
  15% {
    transform: translateZ(-180px) rotateZ(90deg); }
  20% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg); }
  25% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg); }
  30% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  35% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  40% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  45% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  50% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  55% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(90deg); }
  60% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(90deg) rotateZ(90deg); }
  65% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(90deg) rotateZ(90deg); }
  70% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg); }
  75% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg); }
  80% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg); }
  85% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg); }
  90% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg) rotateY(90deg); }
  95% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg) rotateY(90deg); }
  100% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateX(90deg) rotateY(90deg); } }

.rubiks-cube-1 .detail:nth-child(27) {
  animation-name: rubiks-cube-1-detail-27;
  animation-duration: 16s; }

@keyframes rubiks-cube-1-detail-27 {
  5% {
    transform: translateZ(-180px); }
  10% {
    transform: translateZ(-180px); }
  15% {
    transform: translateZ(-180px) rotateZ(90deg); }
  20% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg); }
  25% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg); }
  30% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg); }
  35% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg); }
  40% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  45% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  50% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  55% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  60% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateY(-90deg); }
  65% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  70% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  75% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  80% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg); }
  85% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateY(-90deg); }
  90% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateY(-90deg); }
  95% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  100% {
    transform: translateZ(-180px) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); } }