.servbigLoader, #preloader {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.2s ease-in-out;
    }

    .servbigLoader {
      background-color: rgba(0,0,0, .3);
      z-index: 1070;
    }

    #preloader {
      background-color: #fff;
      z-index: 9999;
      transition-duration: .3s;
    }

      .servbigLoader.hide, #preloader.hide {
        opacity: 0;
        pointer-events: none;
      }

    .dot {
      display: inline-block;
      margin: 0 auto;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: 0.4em;
      animation-name: dots;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
    }

    @keyframes dots {
      50% {
        opacity: 0;
        transform: scale(0.7) translateY(10px);
      }
    }

    .dot-1 {
      animation-delay: 0.2s;
    }

    .dot-2 {
      animation-delay: 0.4s;
    }

    .dot-3 {
      animation-delay: 0.6s;
    }

    .dot-4 {
      animation-delay: 0.8s;
    }
    .dot-1, .dot-2, .dot-3, .dot-4 {
      background-color: #A07C1A;
    }