/*  begin folding css */
  /*  by haitham https://codepen.io/haitham/pen/brpGrm*/
  .folding {
   margin: 20px auto;
   width: 40px;
   height: 40px;
   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: #FFF;
   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;
   }
  }