/* source https://codepen.io/TheDutchCoder/pen/gholk */

/* The loader container */
.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    
    width: 200px;
    height: 200px;
    
    margin-top: -100px;
    margin-left: -100px;
    
    perspective: 400px;
    /* transform-type: preserve-3d; */
   }
  
  
  /* The dot */
  .dot {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    
    width: 40px;
    height: 40px;
    
    margin-top: -20px;
    margin-left: -80px;
    
    /* transform-type: preserve-3d;*/
    transform-origin: 80px 50%;
    transform: rotateY(0);
    
    background-color: #1e3f57;
    
    animation: dot1 2000ms cubic-bezier(.56,.09,.89,.69) infinite;
  }
  
  .dot:nth-child(2) {
    z-index: 9;
    animation-delay: 150ms;
  }
  
  .dot:nth-child(3) {
    z-index: 8;
    animation-delay: 300ms;
  }
  
  .dot:nth-child(4) {
    z-index: 7;
    animation-delay: 450ms;
  }
  
  .dot:nth-child(5) {
    z-index: 6;
    animation-delay: 600ms;
  }
  
  .dot:nth-child(6) {
    z-index: 5;
    animation-delay: 750ms;
  }
  
  .dot:nth-child(7) {
    z-index: 4;
    animation-delay: 900ms;
  }
  
  .dot:nth-child(8) {
    z-index: 3;
    animation-delay: 1050ms;
  }
  
  @keyframes dot1 {
    0% {
      transform: rotateY(0) rotateZ(0) rotateX(0);
      background-color: #1e3f57;
    }
    45% {
      transform: rotateZ(180deg) rotateY(360deg) rotateX(90deg);
      background-color: #6bb2cd;
      animation-timing-function: cubic-bezier(.15,.62,.72,.98);
    }
    90%, 100% {
      transform: rotateY(0) rotateZ(360deg) rotateX(180deg);
      background-color: #1e3f57;
    }
  }