/*  begin bounce css */
  
  /*.bounce {
   margin: 100px auto 0;
   width: 70px;
   text-align: center;
  }*/
  
  /*.bounce{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0;
      width: 70px;
      text-align: center;
    }*/

    .bounce{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0;
    }

  .bounce>div {
   width: 18px;
   height: 18px;
   background-color: #333;
   border-radius: 100%;
   display: inline-block;
   animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  }
  
  .bounce .bounce1 {
   animation-delay: -0.32s;
  }
  
  .bounce .bounce2 {
   animation-delay: -0.16s;
  }
  
  @keyframes sk-bouncedelay {
   0%,
   80%,
   100% {
    transform: scale(0);
   }
   40% {
    transform: scale(1.0);
   }
  }

  /*  begin dots css */
  
  .dots {
   margin: 100px auto;
   width: 40px;
   height: 40px;
   position: relative;
   text-align: center;
   animation: sk-rotate 2.0s infinite linear;
  }
  
  .dot1,
  .dot2 {
   width: 60%;
   height: 60%;
   display: inline-block;
   position: absolute;
   top: 0;
   background-color: #333;
   border-radius: 100%;
   animation: sk-bounce 2.0s infinite ease-in-out;
  }
  
  .dot2 {
   top: auto;
   bottom: 0;
   animation-delay: -1.0s;
  }
  
  @keyframes sk-rotate {
   100% {
    transform: rotate(360deg);
   }
  }
  
  @keyframes sk-bounce {
   0%,
   100% {
    transform: scale(0.0);
   }
   50% {
    transform: scale(1.0);
   }
  }