/* Cube Animation: */

#fallScreen {
    left: 50%;
    top: 100px;
    margin-left: -200px;
    width: 400px;
    height: 250px;
    overflow: hidden;
	transform-origin: top left;
	transform-style: preserve-3d;
    border: 2px solid #333333;
	perspective: 5000px;
	perspective-origin: 50% 0%;
    
    background-color: rgba(0, 0, 0, 0.1);        
}

.fallScreenBG {
    width: 100%;
    height: 150px;
    left: 0px;
    z-index: 2000;
}

#fallScreenBG01 {
    top: 0px;    
    background-image: linear-gradient(#ffffff, #d0d0d0 );    
}

#fallScreenBG02 {
    top: 150px;
    background-image: linear-gradient(#b7b7b7, #ffffff);  
}

#cubeCont {
    z-index: 5000;
    width: 180px;
    height: 180px;
    top: 35px;
    left: 50%;
    margin-left: -90px;
	transform-style: preserve-3d;
    transform-origin: 50% 50%;
    transform: rotateX(-15deg) rotateY(45deg) rotateZ(0deg) scale(1); 
    
    -webkit-animation-duration: 50s;
       -moz-animation-duration: 50s;
        -ms-animation-duration: 50s;
         -o-animation-duration: 50s;
            animation-duration: 50s;
        
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;
       -moz-animation-timing-function: linear;
            animation-timing-function: linear;

    -webkit-animation-name: cubeCont;
       -moz-animation-name: cubeCont;
        -ms-animation-name: cubeCont;
         -o-animation-name: cubeCont;
            animation-name: cubeCont;
            
}

@keyframes cubeCont {
    0% {
        transform: rotateX(-0deg) rotateY(0deg) rotateZ(0deg) scale(1); 
    }
    
    10% {
        transform: rotateX(-15deg) rotateY(100deg) rotateZ(0deg) scale(1); 
    }
    
    45% {
    }
    
    50% {
        transform: rotateX(-15deg) rotateY(800deg) rotateZ(0deg) scale(0.35); 
    }
    
    55% {
    }
    
    90% {
        transform: rotateX(-15deg) rotateY(100deg) rotateZ(0deg) scale(1); 
    }
    
    100% {
        transform: rotateX(-0deg) rotateY(0deg) rotateZ(0deg) scale(1);
    }
}

.cubeSize {
    width: 60px;
    height: 60px;
	transform-origin: top left;
    font-size: 30px;
    font-weight: bold;
    color: black;
	transform-style: preserve-3d;
    border: 1px solid rgba(0, 0, 0, 0.1);
    
    -webkit-animation-duration: 30s;
       -moz-animation-duration: 30s;
        -ms-animation-duration: 30s;
         -o-animation-duration: 30s;
            animation-duration: 30s;
        
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;
       -moz-animation-timing-function: linear;
            animation-timing-function: linear;

    -webkit-animation-name: cubeSize;
       -moz-animation-name: cubeSize;
        -ms-animation-name: cubeSize;
         -o-animation-name: cubeSize;
            animation-name: cubeSize;         
}

.cubeSize img {
    width: 100%;
    height: 100%;
}

/* Cube 01: */

.cc01 {
    background-color: rgba(50, 255, 50, 0.4);
}

#cube01side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube01side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube01side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube01side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube01side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube01side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 02: */

.cc02 {
    background-color: rgba(50, 255, 50, 0.4);
}

#cube02side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube02side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube02side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube02side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube02side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube02side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 03: */

.cc03 {
    background-color: rgba(50, 255, 50, 0.4);
}

#cube03side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube03side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube03side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube03side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube03side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube03side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 04: */

.cc04 {
    background-color: rgba(50, 255, 50, 0.4);
}

#cube04side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube04side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube04side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube04side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube04side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube04side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 05: */

.cc05 {
    background-color: rgba(50, 255, 50, 0.4);
}

#cube05side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube05side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube05side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube05side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube05side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube05side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 06: */

.cc06 {
    background-color: rgba(50, 255, 50, 0.4);
}

#cube06side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube06side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube06side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube06side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube06side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube06side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 07: */

.cc07 {
    background-color: rgba(50, 255, 50, 0.4);
}

#cube07side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube07side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube07side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube07side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube07side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube07side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 08: */

.cc08 {
    background-color: rgba(50, 255, 50, 0.4);
}

#cube08side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube08side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube08side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube08side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube08side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube08side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 09: */

.cc09 {
    background-color: rgba(50, 255, 50, 0.4);
}

#cube09side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube09side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube09side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube09side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube09side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube09side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 10: */

.cc10 {
    background-color: rgba(20, 20, 200, 0.4);
}

#cube10side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube10side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube10side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube10side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube10side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube10side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 11: */

.cc11 {
    background-color: rgba(20, 20, 200, 0.4);
}

#cube11side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube11side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube11side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube11side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube11side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube11side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 12: */

.cc12 {
    background-color: rgba(20, 20, 200, 0.4);
}

#cube12side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube12side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube12side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube12side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube12side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube12side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 13: */

.cc13 {
    background-color: rgba(20, 20, 200, 0.4);
}

#cube13side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube13side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube13side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube13side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube13side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube13side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 14: */

.cc14 {
    background-color: rgba(20, 20, 200, 0.4);
}

#cube14side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube14side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube14side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube14side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube14side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube14side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 15: */

.cc15 {
    background-color: rgba(20, 20, 200, 0.4);
}

#cube15side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube15side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube15side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube15side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube15side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube15side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 16: */

.cc16 {
    background-color: rgba(20, 20, 200, 0.4);
}

#cube16side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube16side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube16side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube16side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube16side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube16side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 17: */

.cc17 {
    background-color: rgba(20, 20, 200, 0.4);
}

#cube17side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube17side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube17side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube17side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube17side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube17side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 18: */

.cc18 {
    background-color: rgba(20, 20, 200, 0.4);
}

#cube18side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube18side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube18side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube18side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube18side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube18side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 19: */

.cc19 {
    background-color: rgba(170, 40, 40, 0.4);
}

#cube19side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube19side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube19side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube19side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube19side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube19side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 20: */

.cc20 {
    background-color: rgba(170, 40, 40, 0.4);
}

#cube20side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube20side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube20side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube20side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube20side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube20side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 21: */

.cc21 {
    background-color: rgba(170, 40, 40, 0.4);
}

#cube21side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube21side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube21side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube21side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube21side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube21side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 22: */

.cc22 {
    background-color: rgba(170, 40, 40, 0.4);
}

#cube22side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube22side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube22side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube22side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube22side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube22side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 23: */

.cc23 {
    background-color: rgba(170, 40, 40, 0.4);
}

#cube23side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube23side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube23side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube23side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube23side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube23side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 24: */

.cc24 {
    background-color: rgba(170, 40, 40, 0.4);
}

#cube24side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube24side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube24side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube24side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube24side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube24side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 25: */
.cc25 {
    background-color: rgba(170, 40, 40, 0.4);
}

#cube25side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube25side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube25side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube25side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube25side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube25side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 26: */

.cc26 {
    background-color: rgba(170, 40, 40, 0.4);
}

#cube26side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube26side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube26side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube26side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube26side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube26side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube 27: */

.cc27 {
    background-color: rgba(170, 40, 40, 0.4);
}

#cube27side01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#cube27side02 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

#cube27side03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-60px);
}

#cube27side04 {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(60px);
}

#cube27side05 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

#cube27side06 {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(60px);
}

/* Cube Animations: */

.cubeSize {
    -webkit-animation-duration: 30s;
       -moz-animation-duration: 30s;
        -ms-animation-duration: 30s;
         -o-animation-duration: 30s;
            animation-duration: 30s;
        
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;
       -moz-animation-timing-function: linear;
            animation-timing-function: linear;
}


#cube01 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);

    -webkit-animation-name: cube01;
       -moz-animation-name: cube01;
        -ms-animation-name: cube01;
         -o-animation-name: cube01;
            animation-name: cube01;
}

@keyframes cube01 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-60px) translateY(-60px) translateZ(0px);
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-60px) translateY(-60px) translateZ(0px);
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
}

#cube02 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(0px) translateZ(0px);

    -webkit-animation-name: cube02;
       -moz-animation-name: cube02;
        -ms-animation-name: cube02;
         -o-animation-name: cube02;
            animation-name: cube02;
}

@keyframes cube02 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(0px) translateZ(0px);
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(0px) translateZ(0px);
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(-60px) translateZ(0px);
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(-60px) translateZ(0px);
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(0px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(0px) translateZ(0px);
    }
}

#cube03 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(0px) translateZ(0px);

    -webkit-animation-name: cube03;
       -moz-animation-name: cube03;
        -ms-animation-name: cube03;
         -o-animation-name: cube03;
            animation-name: cube03;
}

@keyframes cube03 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(0px) translateZ(0px);
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(0px) translateZ(0px);
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(-60px) translateZ(0px);
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(-60px) translateZ(0px);
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(0px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(0px) translateZ(0px);
    }
}

#cube04 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(60px) translateZ(0px);

    -webkit-animation-name: cube04;
       -moz-animation-name: cube04;
        -ms-animation-name: cube04;
         -o-animation-name: cube04;
            animation-name: cube04;
}

@keyframes cube04 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(60px) translateZ(0px);
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(60px) translateZ(0px);
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-60px) translateY(60px) translateZ(0px);
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-60px) translateY(60px) translateZ(0px);
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(60px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(60px) translateZ(0px);
    }
}

#cube05 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(60px) translateZ(0px);

    -webkit-animation-name: cube05;
       -moz-animation-name: cube05;
        -ms-animation-name: cube05;
         -o-animation-name: cube05;
            animation-name: cube05;
}

#cube06 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(60px) translateZ(0px);

    -webkit-animation-name: cube06;
       -moz-animation-name: cube06;
        -ms-animation-name: cube06;
         -o-animation-name: cube06;
            animation-name: cube06;
}

@keyframes cube06 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(60px) translateZ(0px);
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(60px) translateZ(0px);
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(60px) translateZ(0px);
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(60px) translateZ(0px);
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(60px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(60px) translateZ(0px);
    }
}

#cube07 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(120px) translateZ(0px);

    -webkit-animation-name: cube07;
       -moz-animation-name: cube07;
        -ms-animation-name: cube07;
         -o-animation-name: cube07;
            animation-name: cube07;
}

@keyframes cube07 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(120px) translateZ(0px);
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(120px) translateZ(0px);
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-60px) translateY(180px) translateZ(0px);
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-60px) translateY(180px) translateZ(0px);
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(120px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(120px) translateZ(0px);
    }
}

#cube08 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(120px) translateZ(0px);

    -webkit-animation-name: cube08;
       -moz-animation-name: cube08;
        -ms-animation-name: cube08;
         -o-animation-name: cube08;
            animation-name: cube08;
}

@keyframes cube08 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(120px) translateZ(0px);
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(120px) translateZ(0px);
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(180px) translateZ(0px);
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(180px) translateZ(0px);
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(120px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(120px) translateZ(0px);
    }
}

#cube09 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(120px) translateZ(0px);

    -webkit-animation-name: cube09;
       -moz-animation-name: cube09;
        -ms-animation-name: cube09;
         -o-animation-name: cube09;
            animation-name: cube09;
}

@keyframes cube09 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(120px) translateZ(0px);
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(120px) translateZ(0px);
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(180px) translateZ(0px);
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(180px) translateZ(0px);
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(120px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(120px) translateZ(0px);
    }
}

/* * * * * * GROUP 2: */

#cube10 {    
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(-60px);

    -webkit-animation-name: cube10;
       -moz-animation-name: cube10;
        -ms-animation-name: cube10;
         -o-animation-name: cube10;
            animation-name: cube10;
}

@keyframes cube10 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(-60px);        
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(-60px);        
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-60px) translateY(-60px) translateZ(-120px);        
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-60px) translateY(-60px) translateZ(-120px);        
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(-60px);        
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(-60px);        
    }
}

#cube11 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(0px) translateZ(-60px);
    
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(-60px) translateZ(-120px);

    -webkit-animation-name: cube11;
       -moz-animation-name: cube11;
        -ms-animation-name: cube11;
         -o-animation-name: cube11;
            animation-name: cube11;
}

@keyframes cube11 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(0px) translateZ(-60px);      
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(0px) translateZ(-60px);       
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(-60px) translateZ(-120px);  
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(-60px) translateZ(-120px);    
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(0px) translateZ(-60px);      
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(0px) translateZ(-60px);       
    }
}

#cube12 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(0px) translateZ(-60px);

    -webkit-animation-name: cube12;
       -moz-animation-name: cube12;
        -ms-animation-name: cube12;
         -o-animation-name: cube12;
            animation-name: cube12;
}

@keyframes cube12 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(0px) translateZ(-60px);     
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(0px) translateZ(-60px);      
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(-60px) translateZ(-120px);
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(-60px) translateZ(-120px);   
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(0px) translateZ(-60px);      
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(0px) translateZ(-60px);       
    }
}

#cube13 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(60px) translateZ(-60px);

    -webkit-animation-name: cube13;
       -moz-animation-name: cube13;
        -ms-animation-name: cube13;
         -o-animation-name: cube13;
            animation-name: cube13;
}

@keyframes cube13 {    
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(60px) translateZ(-60px);
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(60px) translateZ(-60px);
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-60px) translateY(60px) translateZ(-120px);
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-60px) translateY(60px) translateZ(-120px);
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(60px) translateZ(-60px);    
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(60px) translateZ(-60px);    
    }
}

#cube14 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(60px) translateZ(-60px);

    -webkit-animation-name: cube14;
       -moz-animation-name: cube14;
        -ms-animation-name: cube14;
         -o-animation-name: cube14;
            animation-name: cube14;
}

@keyframes cube14 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(60px) translateZ(-60px);
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(60px) translateZ(-60px);    
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(60px) translateZ(-120px);
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(60px) translateZ(-120px); 
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(60px) translateZ(-60px);     
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(60px) translateZ(-60px);     
    }
}

#cube15 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(60px) translateZ(-60px);

    -webkit-animation-name: cube15;
       -moz-animation-name: cube15;
        -ms-animation-name: cube15;
         -o-animation-name: cube15;
            animation-name: cube15;
}

@keyframes cube15 {
    0% {     
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(60px) translateZ(-60px);   
    }
    
    30% {  
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(60px) translateZ(-60px);     
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(60px) translateZ(-120px); 
    }
    
    55% {        
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(60px) translateZ(-120px); 
    }
    
    70% { 
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(60px) translateZ(-60px);       
    }
    
    100% { 
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(60px) translateZ(-60px);       
    }
}

#cube16 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(120px) translateZ(-60px);

    -webkit-animation-name: cube16;
       -moz-animation-name: cube16;
        -ms-animation-name: cube16;
         -o-animation-name: cube16;
            animation-name: cube16;
}

@keyframes cube16 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(120px) translateZ(-60px);    
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(120px) translateZ(-60px);
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-60px) translateY(180px) translateZ(-120px);
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-60px) translateY(180px) translateZ(-120px);
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(120px) translateZ(-60px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(120px) translateZ(-60px);
    }
}

#cube17 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(120px) translateZ(-60px);

    -webkit-animation-name: cube17;
       -moz-animation-name: cube17;
        -ms-animation-name: cube17;
         -o-animation-name: cube17;
            animation-name: cube17;
}

@keyframes cube17 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(120px) translateZ(-60px);
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(120px) translateZ(-60px);
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(180px) translateZ(-120px);
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(180px) translateZ(-120px);
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(120px) translateZ(-60px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(60px) translateY(120px) translateZ(-60px);
    }
}

#cube18 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(120px) translateZ(-60px);

    -webkit-animation-name: cube18;
       -moz-animation-name: cube18;
        -ms-animation-name: cube18;
         -o-animation-name: cube18;
            animation-name: cube18;
}

@keyframes cube18 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(120px) translateZ(-60px);
    }
    
    30% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(120px) translateZ(-60px);
    }
    
    45% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(180px) translateZ(-120px);
    }
    
    55% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(180px) translateZ(-120px);
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(120px) translateZ(-60px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(120px) translateY(120px) translateZ(-60px);
    }
}

/* * * * * * GROUP 3: */

.cubeTurn {
    width: 60px;
    height: 60px;
	transform-style: preserve-3d;
    transform-origin: 50% 50%;
    border: 0px !important;
}

.cubeTurn div {  
}

#cubeTurn01 {
    transform: translateX(0px) translateY(0px) translateZ(60px);
}

#cubeTurn02 {
    transform: translateX(60px) translateY(0px) translateZ(60px);
}

#cubeTurn03 {
    transform: translateX(120px) translateY(0px) translateZ(60px);
}

#cubeTurn04 {
    transform: translateX(0px) translateY(60px) translateZ(60px);
}

#cubeTurn05 {
    transform: translateX(60px) translateY(60px) translateZ(60px);
}

#cubeTurn06 {
    transform: translateX(120px) translateY(60px) translateZ(60px);
}

#cubeTurn07 {
    transform: translateX(0px) translateY(120px) translateZ(60px);
}

#cubeTurn08 {
    transform: translateX(60px) translateY(120px) translateZ(60px);
}

#cubeTurn09 {
    transform: translateX(120px) translateY(120px) translateZ(60px);
}

#cube19 {
    
    transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);

    -webkit-animation-name: cube19;
       -moz-animation-name: cube19;
        -ms-animation-name: cube19;
         -o-animation-name: cube19;
            animation-name: cube19;
}

@keyframes cube19 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    15% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);        
    }
    
    30% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);
    }
    
    50% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);        
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
}

#cube20 {
    
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);

    -webkit-animation-name: cube20;
       -moz-animation-name: cube20;
        -ms-animation-name: cube20;
         -o-animation-name: cube20;
            animation-name: cube20;
}

@keyframes cube20 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    15% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);        
    }
    
    30% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);
    }
    
    50% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);        
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
}

#cube21 {
    
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);

    -webkit-animation-name: cube21;
       -moz-animation-name: cube21;
        -ms-animation-name: cube21;
         -o-animation-name: cube21;
            animation-name: cube21;
}

@keyframes cube21 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    15% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);        
    }
    
    30% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);
    }
    
    50% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);        
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
}

#cube22 {
    
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);

    -webkit-animation-name: cube22;
       -moz-animation-name: cube22;
        -ms-animation-name: cube22;
         -o-animation-name: cube22;
            animation-name: cube22;
}

@keyframes cube22 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    15% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);        
    }
    
    30% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);
    }
    
    50% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);        
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
}

#cube23 {
    
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);

    -webkit-animation-name: cube23;
       -moz-animation-name: cube23;
        -ms-animation-name: cube23;
         -o-animation-name: cube23;
            animation-name: cube23;
}

@keyframes cube23 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    15% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);        
    }
    
    30% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);
    }
    
    50% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);        
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
}

#cube24 {
    
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);

    -webkit-animation-name: cube24;
       -moz-animation-name: cube24;
        -ms-animation-name: cube24;
         -o-animation-name: cube24;
            animation-name: cube24;
}

@keyframes cube24 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    15% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);        
    }
    
    30% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);
    }
    
    50% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);        
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
}

#cube25 {
    
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);

    -webkit-animation-name: cube25;
       -moz-animation-name: cube25;
        -ms-animation-name: cube25;
         -o-animation-name: cube25;
            animation-name: cube25;
}

@keyframes cube25 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    15% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);        
    }
    
    30% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);
    }
    
    50% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);        
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
}

#cube26 {    
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);

    -webkit-animation-name: cube26;
       -moz-animation-name: cube26;
        -ms-animation-name: cube26;
         -o-animation-name: cube26;
            animation-name: cube26;
}

@keyframes cube26 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    15% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);        
    }
    
    30% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);
    }
    
    50% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);        
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
}

#cube27 {    
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);

    -webkit-animation-name: cube27;
       -moz-animation-name: cube27;
        -ms-animation-name: cube27;
         -o-animation-name: cube27;
            animation-name: cube27;
}

@keyframes cube27 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    15% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);        
    }
    
    30% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);
    }
    
    50% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateX(-60px) translateY(-60px) translateZ(60px);        
    }
    
    70% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
    }
}

/* - - - - - - - - Controls:
#controls {
    position: relative;
    z-index: 9000;
    width: 280px;
    height: 300px;
    margin: 50px auto;
    background-color: #ffffff;
}

.controlButton {
    position: absolute;
    background-color: #ffffff;
    font-size: 40px;
    color: red;
    text-align: center;
    width: 80px;
    float: left;
    height: 80px;
    text-align: center;
 }

.controlButton:hover {
    cursor: pointer;
}

#Xcontrol {
    top: 30px;
    left: 100px;
}

#XcontrolDown {
    top: 200px;
    left: 100px;
}

#Ycontrol {
    top: 115px;
    left: 190px;
}

#YcontrolDown {
    top: 115px;
    left: 10px;
}

#Zcontrol {
    top: 30px;
    left: 10px;
}

#ZcontrolDown {
    top: 30px;
    left: 190px;
}

 - - - - - - - - Reset Button: 

#resetButton {
    position: absolute;
    top: 140px;
    left: 50%;
    margin-left: -50px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    width: 100px;
    height: 30px;
    background-color: darkred;
}

#resetButton:hover {
    cursor: pointer;
}
*/