/* --------------- Spinner Square ------------- */
.spinner-square {
  width: 40px ;
  height: 40px ;
  background-color: #FFFFFF ;
  -webkit-animation: square-sk-rotateplane 1.2s infinite ease-in-out ;
  animation: square-sk-rotateplane 1.2s infinite ease-in-out ;
}

@-webkit-keyframes square-sk-rotateplane {
  0% { -webkit-transform: perspective(120px); }
  50% { -webkit-transform: perspective(120px) rotateY(180deg); }
  100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); }
}

@keyframes square-sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

/* --------------- Spinner sk Chase ------------- */
.spinner-sk-chase {
  width: 40px ;
  height: 40px ;
  position: relative ;
  animation: spinner-sk-chase 2.5s infinite linear both ;
}

.spinner-sk-chase-dot {
  width: 100% ;
  height: 100% ;
  position: absolute ;
  left: 0 ;
  top: 0 ;
  animation: spinner-sk-chase-dot 2.0s infinite ease-in-out both ;
}

.spinner-sk-chase-dot:before {
  content: '' ;
  display: block ;
  width: 25% ;
  height: 25% ;
  background-color: #fff ;
  border-radius: 100% ;
  animation: spinner-sk-chase-dot-before 2.0s infinite ease-in-out both ;
}

.spinner-sk-chase-dot:nth-child(1) { animation-delay: -1.1s ; }
.spinner-sk-chase-dot:nth-child(2) { animation-delay: -1.0s ; }
.spinner-sk-chase-dot:nth-child(3) { animation-delay: -0.9s ; }
.spinner-sk-chase-dot:nth-child(4) { animation-delay: -0.8s ; }
.spinner-sk-chase-dot:nth-child(5) { animation-delay: -0.7s ; }
.spinner-sk-chase-dot:nth-child(6) { animation-delay: -0.6s ; }
.spinner-sk-chase-dot:nth-child(1):before { animation-delay: -1.1s ; }
.spinner-sk-chase-dot:nth-child(2):before { animation-delay: -1.0s ; }
.spinner-sk-chase-dot:nth-child(3):before { animation-delay: -0.9s ; }
.spinner-sk-chase-dot:nth-child(4):before { animation-delay: -0.8s ; }
.spinner-sk-chase-dot:nth-child(5):before { animation-delay: -0.7s ; }
.spinner-sk-chase-dot:nth-child(6):before { animation-delay: -0.6s ; }

@keyframes spinner-sk-chase {
  100% { transform: rotate(360deg); }
}

@keyframes spinner-sk-chase-dot {
  80%, 100% { transform: rotate(360deg); }
}

@keyframes spinner-sk-chase-dot-before {
  50% { transform: scale(0.4); }
  100%, 0% { transform: scale(1.0); }
}

/* --------------- Spinner Double ------------- */
.spinner-double {
  width: 40px ;
  height: 40px ;
  position: relative ;
}

.spinner-double-bounce1,
.spinner-double-bounce2 {
  width: 100% ;
  height: 100% ;
  border-radius: 50% ;
  background-color: #FFFFFF ;
  opacity: 0.6 ;
  position: absolute ;
  top: 0 ;
  left: 0 ;
  -webkit-animation: spinner-double-sk-bounce 2.0s infinite ease-in-out ;
  animation: spinner-double-sk-bounce 2.0s infinite ease-in-out ;
}

.spinner-double-bounce2 {
  -webkit-animation-delay: -1.0s ;
  animation-delay: -1.0s ;
}

@-webkit-keyframes spinner-double-sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0); }
  50% { -webkit-transform: scale(1.0); }
}

@keyframes spinner-double-sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }
  50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/* --------------- Spinner Rect ------------- */
.spinner-rect {
  width: 50px ;
  height: 40px ;
  text-align: center ;
  font-size: 10px ;
}

.spinner-rect > div {
  background-color: #FFFFFF ;
  height: 100% ;
  width: 6px ;
  display: inline-block ;
  -webkit-animation: spinner-rect-sk-stretchdelay 1.2s infinite ease-in-out ;
  animation: spinner-rect-sk-stretchdelay 1.2s infinite ease-in-out ;
}

.spinner-rect .rect2 {
  -webkit-animation-delay: -1.1s ;
  animation-delay: -1.1s ;
}

.spinner-rect .rect3 {
  -webkit-animation-delay: -1.0s ;
  animation-delay: -1.0s ;
}

.spinner-rect .rect4 {
  -webkit-animation-delay: -0.9s ;
  animation-delay: -0.9s ;
}

.spinner-rect .rect5 {
  -webkit-animation-delay: -0.8s ;
  animation-delay: -0.8s ;
}

@-webkit-keyframes spinner-rect-sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4); }
  20% { -webkit-transform: scaleY(1.0); }
}

@keyframes spinner-rect-sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

/* --------------- Spinner Double Cube ------------- */
.spinner-double-cube {
  width: 40px ;
  height: 40px ;
  position: relative ;
}

.spinner-double-cube-cube1,
.spinner-double-cube-cube2 {
  background-color: #FFFFFF ;
  width: 15px ;
  height: 15px ;
  position: absolute ;
  top: 0 ;
  left: 0 ;
  -webkit-animation: spinner-double-cube-sk-cubemove 1.8s infinite ease-in-out ;
  animation: spinner-double-cube-sk-cubemove 1.8s infinite ease-in-out ;
}

.spinner-double-cube-cube2 {
  -webkit-animation-delay: -0.9s ;
  animation-delay: -0.9s ;
}

@-webkit-keyframes spinner-double-cube-sk-cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); }
  100% { -webkit-transform: rotate(-360deg); }
}

@keyframes spinner-double-cube-sk-cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  }
  50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

/* --------------- Spinner Double V2 ------------- */
.spinner-double-v2 {
  width: 40px ;
  height: 40px ;
  background-color: #FFFFFF ;
  border-radius: 100% ;
  -webkit-animation: spinner-double-v2-sk-scaleout 1.0s infinite ease-in-out ;
  animation: spinner-double-v2-sk-scaleout 1.0s infinite ease-in-out ;
}

@-webkit-keyframes spinner-double-v2-sk-scaleout {
  0% { -webkit-transform: scale(0); }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes spinner-double-v2-sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

/* --------------- Spinner Double Point ------------- */
.spinner-double-point {
  width: 40px ;
  height: 40px ;
  position: relative ;
  text-align: center ;
  -webkit-animation: spinner-double-point-sk-rotate 2.0s infinite linear ;
  animation: spinner-double-point-sk-rotate 2.0s infinite linear ;
}

.spinner-double-point-dot1,
.spinner-double-point-dot2 {
  width: 60% ;
  height: 60% ;
  display: inline-block ;
  position: absolute ;
  top: 0 ;
  background-color: #FFFFFF ;
  border-radius: 100% ;
  -webkit-animation: spinner-double-point-sk-bounce 2.0s infinite ease-in-out ;
  animation: spinner-double-point-sk-bounce 2.0s infinite ease-in-out ;
}

.spinner-double-point-dot2 {
  top: auto ;
  bottom: 0 ;
  -webkit-animation-delay: -1.0s ;
  animation-delay: -1.0s ;
}

@-webkit-keyframes spinner-double-point-sk-rotate {
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spinner-double-point-sk-rotate {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes spinner-double-point-sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0); }
  50% { -webkit-transform: scale(1.0); }
}

@keyframes spinner-double-point-sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }
  50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/* --------------- Spinner Triple Point ------------- */
.spinner-triple-point {
  width: 70px ;
  text-align: center ;
}

.spinner-triple-point > div {
  width: 18px ;
  height: 18px ;
  background-color: #FFFFFF ;
  border-radius: 100% ;
  display: inline-block ;
  -webkit-animation: spinner-triple-point-sk-bouncedelay 1.4s infinite ease-in-out both ;
  animation: spinner-triple-point-sk-bouncedelay 1.4s infinite ease-in-out both ;
}

.spinner-triple-point .bounce1 {
  -webkit-animation-delay: -0.32s ;
  animation-delay: -0.32s ;
}

.spinner-triple-point .bounce2 {
  -webkit-animation-delay: -0.16s ;
  animation-delay: -0.16s ;
}

@-webkit-keyframes spinner-triple-point-sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0); }
  40% { -webkit-transform: scale(1.0); }
}

@keyframes spinner-triple-point-sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/* --------------- Spinner Circle ------------- */
.spinner-circle {
  width: 40px ;
  height: 40px ;
  position: relative ;
}

.spinner-circle .spinner-circle-child {
  width: 100% ;
  height: 100% ;
  position: absolute ;
  left: 0 ;
  top: 0 ;
}

.spinner-circle .spinner-circle-child:before {
  content: '' ;
  display: block ;
  width: 15% ;
  height: 15% ;
  background-color: #FFFFFF ;
  border-radius: 100% ;
  -webkit-animation: spinner-circle-circleBounceDelay 1.2s infinite ease-in-out both ;
  animation: spinner-circle-circleBounceDelay 1.2s infinite ease-in-out both ;
}

.spinner-circle .spinner-circle2 {
  -webkit-transform: rotate(30deg) ;
  -ms-transform: rotate(30deg) ;
  transform: rotate(30deg) ;
}

.spinner-circle .spinner-circle3 {
  -webkit-transform: rotate(60deg) ;
  -ms-transform: rotate(60deg) ;
  transform: rotate(60deg) ;
}

.spinner-circle .spinner-circle4 {
  -webkit-transform: rotate(90deg) ;
  -ms-transform: rotate(90deg) ;
  transform: rotate(90deg) ;
}

.spinner-circle .spinner-circle5 {
  -webkit-transform: rotate(120deg) ;
  -ms-transform: rotate(120deg) ;
  transform: rotate(120deg) ;
}

.spinner-circle .spinner-circle6 {
  -webkit-transform: rotate(150deg) ;
  -ms-transform: rotate(150deg) ;
  transform: rotate(150deg) ;
}

.spinner-circle .spinner-circle7 {
  -webkit-transform: rotate(180deg) ;
  -ms-transform: rotate(180deg) ;
  transform: rotate(180deg) ;
}

.spinner-circle .spinner-circle8 {
  -webkit-transform: rotate(210deg) ;
  -ms-transform: rotate(210deg) ;
  transform: rotate(210deg) ;
}

.spinner-circle .spinner-circle9 {
  -webkit-transform: rotate(240deg) ;
  -ms-transform: rotate(240deg) ;
  transform: rotate(240deg) ;
}

.spinner-circle .spinner-circle10 {
  -webkit-transform: rotate(270deg) ;
  -ms-transform: rotate(270deg) ;
  transform: rotate(270deg) ;
}

.spinner-circle .spinner-circle11 {
  -webkit-transform: rotate(300deg) ;
  -ms-transform: rotate(300deg) ;
  transform: rotate(300deg) ;
}

.spinner-circle .spinner-circle12 {
  -webkit-transform: rotate(330deg) ;
  -ms-transform: rotate(330deg) ;
  transform: rotate(330deg) ;
}

.spinner-circle .spinner-circle2:before {
  -webkit-animation-delay: -1.1s ;
  animation-delay: -1.1s ;
}

.spinner-circle .spinner-circle3:before {
  -webkit-animation-delay: -1s ;
  animation-delay: -1s ;
}

.spinner-circle .spinner-circle4:before {
  -webkit-animation-delay: -0.9s ;
  animation-delay: -0.9s ;
}

.spinner-circle .spinner-circle5:before {
  -webkit-animation-delay: -0.8s ;
  animation-delay: -0.8s ;
}

.spinner-circle .spinner-circle6:before {
  -webkit-animation-delay: -0.7s ;
  animation-delay: -0.7s ;
}

.spinner-circle .spinner-circle7:before {
  -webkit-animation-delay: -0.6s ;
  animation-delay: -0.6s ;
}

.spinner-circle .spinner-circle8:before {
  -webkit-animation-delay: -0.5s ;
  animation-delay: -0.5s ;
}

.spinner-circle .spinner-circle9:before {
  -webkit-animation-delay: -0.4s ;
  animation-delay: -0.4s ;
}

.spinner-circle .spinner-circle10:before {
  -webkit-animation-delay: -0.3s ;
  animation-delay: -0.3s ;
}

.spinner-circle .spinner-circle11:before {
  -webkit-animation-delay: -0.2s ;
  animation-delay: -0.2s ;
}

.spinner-circle .spinner-circle12:before {
  -webkit-animation-delay: -0.1s ;
  animation-delay: -0.1s ;
}

@-webkit-keyframes spinner-circle-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes spinner-circle-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/* --------------- Spinner Cube Grid ------------- */
.spinner-cube-grid {
  width: 40px ;
  height: 40px ;
}

.spinner-cube-grid .spinner-small-cube {
  width: 33% ;
  height: 33% ;
  background-color: #FFFFFF ;
  float: left ;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out ;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out ;
}

.spinner-cube-grid .spinner-small-cube1 {
  -webkit-animation-delay: 0.2s ;
  animation-delay: 0.2s ;
}

.spinner-cube-grid .spinner-small-cube2 {
  -webkit-animation-delay: 0.3s ;
  animation-delay: 0.3s ;
}

.spinner-cube-grid .spinner-small-cube3 {
  -webkit-animation-delay: 0.4s ;
  animation-delay: 0.4s ;
}

.spinner-cube-grid .spinner-small-cube4 {
  -webkit-animation-delay: 0.1s ;
  animation-delay: 0.1s ;
}

.spinner-cube-grid .spinner-small-cube5 {
  -webkit-animation-delay: 0.2s ;
  animation-delay: 0.2s ;
}

.spinner-cube-grid .spinner-small-cube6 {
  -webkit-animation-delay: 0.3s ;
  animation-delay: 0.3s ;
}

.spinner-cube-grid .spinner-small-cube7 {
  -webkit-animation-delay: 0s ;
  animation-delay: 0s ;
}

.spinner-cube-grid .spinner-small-cube8 {
  -webkit-animation-delay: 0.1s ;
  animation-delay: 0.1s ;
}

.spinner-cube-grid .spinner-small-cube9 {
  -webkit-animation-delay: 0.2s ;
  animation-delay: 0.2s ;
}

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

/* --------------- Spinner Fading Circle ------------- */
.spinner-fading-circle {
  width: 40px ;
  height: 40px ;
  position: relative ;
}

.spinner-fading-circle .spinner-small-circle {
  width: 100% ;
  height: 100% ;
  position: absolute ;
  left: 0 ;
  top: 0 ;
}

.spinner-fading-circle .spinner-small-circle:before {
  content: '' ;
  display: block ;
  width: 15% ;
  height: 15% ;
  background-color: #FFFFFF ;
  border-radius: 100% ;
  -webkit-animation: spinner-fading-circle-circleFadeDelay 1.2s infinite ease-in-out both ;
  animation: spinner-fading-circle-circleFadeDelay 1.2s infinite ease-in-out both ;
}

.spinner-fading-circle .spinner-small-circle2 {
  -webkit-transform: rotate(30deg) ;
  -ms-transform: rotate(30deg) ;
  transform: rotate(30deg) ;
}

.spinner-fading-circle .spinner-small-circle3 {
  -webkit-transform: rotate(60deg) ;
  -ms-transform: rotate(60deg) ;
  transform: rotate(60deg) ;
}

.spinner-fading-circle .spinner-small-circle4 {
  -webkit-transform: rotate(90deg) ;
  -ms-transform: rotate(90deg) ;
  transform: rotate(90deg) ;
}

.spinner-fading-circle .spinner-small-circle5 {
  -webkit-transform: rotate(120deg) ;
  -ms-transform: rotate(120deg) ;
  transform: rotate(120deg) ;
}

.spinner-fading-circle .spinner-small-circle6 {
  -webkit-transform: rotate(150deg) ;
  -ms-transform: rotate(150deg) ;
  transform: rotate(150deg) ;
}

.spinner-fading-circle .spinner-small-circle7 {
  -webkit-transform: rotate(180deg) ;
  -ms-transform: rotate(180deg) ;
  transform: rotate(180deg) ;
}

.spinner-fading-circle .spinner-small-circle8 {
  -webkit-transform: rotate(210deg) ;
  -ms-transform: rotate(210deg) ;
  transform: rotate(210deg) ;
}

.spinner-fading-circle .spinner-small-circle9 {
  -webkit-transform: rotate(240deg) ;
  -ms-transform: rotate(240deg) ;
  transform: rotate(240deg) ;
}

.spinner-fading-circle .spinner-small-circle10 {
  -webkit-transform: rotate(270deg) ;
  -ms-transform: rotate(270deg) ;
  transform: rotate(270deg) ;
}

.spinner-fading-circle .spinner-small-circle11 {
  -webkit-transform: rotate(300deg) ;
  -ms-transform: rotate(300deg) ;
  transform: rotate(300deg) ;
}

.spinner-fading-circle .spinner-small-circle12 {
  -webkit-transform: rotate(330deg) ;
  -ms-transform: rotate(330deg) ;
  transform: rotate(330deg) ;
}

.spinner-fading-circle .spinner-small-circle2:before {
  -webkit-animation-delay: -1.1s ;
  animation-delay: -1.1s ;
}

.spinner-fading-circle .spinner-small-circle3:before {
  -webkit-animation-delay: -1s ;
  animation-delay: -1s ;
}

.spinner-fading-circle .spinner-small-circle4:before {
  -webkit-animation-delay: -0.9s ;
  animation-delay: -0.9s ;
}

.spinner-fading-circle .spinner-small-circle5:before {
  -webkit-animation-delay: -0.8s ;
  animation-delay: -0.8s ;
}

.spinner-fading-circle .spinner-small-circle6:before {
  -webkit-animation-delay: -0.7s ;
  animation-delay: -0.7s ;
}

.spinner-fading-circle .spinner-small-circle7:before {
  -webkit-animation-delay: -0.6s ;
  animation-delay: -0.6s ;
}

.spinner-fading-circle .spinner-small-circle8:before {
  -webkit-animation-delay: -0.5s ;
  animation-delay: -0.5s ;
}

.spinner-fading-circle .spinner-small-circle9:before {
  -webkit-animation-delay: -0.4s ;
  animation-delay: -0.4s ;
}

.spinner-fading-circle .spinner-small-circle10:before {
  -webkit-animation-delay: -0.3s ;
  animation-delay: -0.3s ;
}

.spinner-fading-circle .spinner-small-circle11:before {
  -webkit-animation-delay: -0.2s ;
  animation-delay: -0.2s ;
}

.spinner-fading-circle .spinner-small-circle12:before {
  -webkit-animation-delay: -0.1s ;
  animation-delay: -0.1s ;
}

@-webkit-keyframes spinner-fading-circle-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes spinner-fading-circle-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

/* --------------- Spinner Folding Cube ------------- */
.spinner-folding-cube {
  width: 40px ;
  height: 40px ;
  position: relative ;
  -webkit-transform: rotateZ(45deg) ;
  transform: rotateZ(45deg) ;
}

.spinner-folding-cube .spinner-medium-cube {
  float: left ;
  width: 50% ;
  height: 50% ;
  position: relative ;
  -webkit-transform: scale(1.1) ;
  -ms-transform: scale(1.1) ;
  transform: scale(1.1) ;
}

.spinner-folding-cube .spinner-medium-cube:before {
  content: '' ;
  position: absolute ;
  top: 0 ;
  left: 0 ;
  width: 100% ;
  height: 100% ;
  background-color: #FFFFFF ;
  -webkit-animation: spinner-folding-cube-foldCubeAngle 2.4s infinite linear both ;
  animation: spinner-folding-cube-foldCubeAngle 2.4s infinite linear both ;
  -webkit-transform-origin: 100% 100% ;
  -ms-transform-origin: 100% 100% ;
  transform-origin: 100% 100% ;
}

.spinner-folding-cube .spinner-medium-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg) ;
  transform: scale(1.1) rotateZ(90deg) ;
}

.spinner-folding-cube .spinner-medium-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg) ;
  transform: scale(1.1) rotateZ(180deg) ;
}

.spinner-folding-cube .spinner-medium-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg) ;
  transform: scale(1.1) rotateZ(270deg) ;
}

.spinner-folding-cube .spinner-medium-cube2:before {
  -webkit-animation-delay: 0.3s ;
  animation-delay: 0.3s ;
}

.spinner-folding-cube .spinner-medium-cube3:before {
  -webkit-animation-delay: 0.6s ;
  animation-delay: 0.6s ;
}

.spinner-folding-cube .spinner-medium-cube4:before {
  -webkit-animation-delay: 0.9s ;
  animation-delay: 0.9s ;
}

@-webkit-keyframes spinner-folding-cube-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

@keyframes spinner-folding-cube-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}