#preloader {
    display: none; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    opacity: 0.8;
    z-index: 1051;
    position: fixed;
    background-image: url('../../img/loading2.gif');
    background-repeat: no-repeat;
    background-position: center;
}
  #preloader img {
      position: absolute;
      display: block;
      opacity: 0.9;
      top: 10%;
      left: 50%;
      margin-left: -92px;
  }
    
  .spl_spinner {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(4, 15, 22, 0.8);
  }
  .spinner_loader {
    position: fixed;
    top: 50%;
    left: 50%;
     transform: translate(-50%, -50%);
    width: 298px;
    height: 298px;
    border-radius: 50%;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 30px;
    color: #fff;
    letter-spacing: 1px;
     display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
  }
  .spinner_loader::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 40px solid #086375;
    border-top: 40px solid #0C91AC;
    border-radius: 50%;
    animation: animateCircle 2s linear infinite;
    animation: animate 2s linear infinite;
  }
  .bottom_text{
      position: absolute;
      bottom: -40%;
      z-index: 9999;
      text-align: center;
      width: 900px;
      display: inline-block;
  }
  .bottom_text h1{
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 30px;
    color: #fff;
  }
  @keyframes animateCircle {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes animate {
    0% {
      transform: rotate(45deg);
    }
    100% {
      transform: rotate(405deg);
    }
  }   
  
  
  @media only screen and (max-width: 1800px) {
    .spinner_loader {
      width: 230px;
      height: 230px;
      font-size: 25px;
    }
    .spinner_loader::before {
      border: 30px solid #086375;
      border-top: 30px solid #0C91AC;
  }
  
  }
  
  @media only screen and (max-width: 1700px) {
    .spinner_loader {
      width: 200px;
      height: 200px;
      font-size: 23px;
    }
    .spinner_loader::before {
      border: 30px solid #086375;
      border-top: 30px solid #0C91AC;
  }
  
  .bottom_text h1 {
  font-size: 25px;
  }
  }
  
  @media only screen and (max-width: 1600px) {
    .spinner_loader {
      width: 150px;
      height: 150px;
      font-size: 17px;
    }
    .spinner_loader::before {
      border: 20px solid #086375;
      border-top: 20px solid #0C91AC;
  }
  .bottom_text h1 {
  font-size: 20px;
  }
  }
  
  @media only screen and (max-width: 767px) { 
  .bottom_text h1 {
    font-size: 16px;
   }
  }
  @media only screen and (max-width: 350px) { 
    .bottom_text h1 {
      font-size: 15px;
     }
    }
  @media only screen and (max-width: 330px) { 
    .bottom_text h1 {
      font-size: 12px;
     }
    }