@charset "UTF-8";
.cubes .sk-cube {
    position:absolute;
    width: 50%;
    height: 50%;
   /*background-color: #cefafe;*/
    float: left;
    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube1{background-color:#cefafe;}
.sk-cube2{background-color:#fbd685;}
.sk-cube3{background-color:#fbff2c;}
.sk-cube4{background-color:#cdcdfe;}
  
.cubes .sk-cube1 {animation-delay: 0.2s;}
.cubes .sk-cube2 {animation-delay: 0.3s;}
.cubes .sk-cube3 {animation-delay: 0.4s;}
.cubes .sk-cube4 {animation-delay: 0.1s;}
  
  /*.cubes .sk-cube5 {
   animation-delay: 0.2s;
  }
  
  .cubes .sk-cube6 {
   animation-delay: 0.3s;
  }
  
  .cubes .sk-cube7 {
   animation-delay: 0s;
  }
  
  .cubes .sk-cube8 {
   animation-delay: 0.1s;
  }
  
  .cubes .sk-cube9 {
   animation-delay: 0.2s;
  }*/
  
@keyframes sk-cubeGridScaleDelay {
   0%,
   70%,
   100% {
    transform: scale3D(1, 1, 1);
   }
   35% {
    transform: scale3D(0, 0, 1);
   }
}

/*  begin folding css */
  
.folding {
    margin: 20px auto;
    width: 80px;
    height: 80px;
    position: relative;
    /*transform: rotateZ(45deg);*/
}
  
.folding .sk-cube {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    transform: scale(1.1);
}
  
.folding .sk-cube:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #A7A7A7;
    animation: sk-foldCubeAngle 2.4s infinite linear both;
    transform-origin: 100% 100%;
}
  
.folding .sk-cube2 {transform: scale(1.1) rotateZ(90deg);}
.folding .sk-cube3 {transform: scale(1.1) rotateZ(180deg);}
.folding .sk-cube4 {transform: scale(1.1) rotateZ(270deg);}
  
.folding .sk-cube2:before {animation-delay: 0.3s;}
.folding .sk-cube3:before {animation-delay: 0.6s;}
.folding .sk-cube4:before {animation-delay: 0.9s;}
  
@keyframes sk-foldCubeAngle {
   0%,
   10% {
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
   }
   25%,
   75% {
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
   }
   90%,
   100% {
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
   }
}