section.loader {
    font-family: Consolas, monaco, monospace;
    position:absolute;
    top:1214; left:0; right:0; 
    height: 500px;

    background-color:#0297bc7c;
    
    color:white;
    
  }
  
  section.loader .loader-center {
    width:300px;
    height:100px;
    line-height:100px;
    
    margin:0 auto;
    text-align:center;
    font-size:50px;
    
    position:absolute;
    top:40%; left:50%;
    margin-left:-150px; margin-top:-50px;
    
  }
  
  section.loader .loader-center .chars .dots .char {
    font-size:150%;
    display:inline-block;
    
  }
  
  /* animation starts here */
  .dots .dot {
    position:relative;
    top:0; left:0; 
  }
  
  .dot._dot-1 {
    animation:dot_1 0.5s linear infinite;
    animation-fill-mode: forwards;
    animation-direction:normal;
  }
  
  .dot._dot-2 {
    animation:dot_1 0.5s linear infinite;
    animation-fill-mode: forwards;
    animation-direction:normal;
    animation-delay:0.3s;
  }

  .dot._dot-3 {
    animation:dot_1 0.5s linear infinite;
    animation-fill-mode: forwards;
    animation-direction:normal;
    animation-delay:0.6s;
  }
  

  
  @keyframes dot_1 {
    0% {
      top:0;
      left:15px;
    }
    
    33% {
      top:26px;
      left:30px;
    }
    
    66% {
      top:26px;
      left:0px;
    }
    100%{
      top:0;
      left:15px;
    }
  }
  
  
  @keyframes dot_2 {
   
    0% {
      top:0;
      left:15px;
    }
    
    33% {
      top:26px;
      left:30px;
    }
    
    66% {
      top:26px;
      left:0px;
    }
    100%{
      top:0;
      left:15px;
    }
  }
  
  
  @keyframes dot_3 {
    0% {
      top:0;
      left:15px;
    }
    
    33% {
      top:26px;
      left:30px;
    }
    
    66% {
      top:26px;
      left:0px;
    }
    100%{
      top:0;
      left:15px;
    }
  }