/* preload */ 
        /*.loading-gif {
            max-width: 300px;
        }
*/
        .pre-loader {
           position: fixed;
            z-index: 100;  
            top: 0;
            left: 0;
            background: #F2F4F7;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
        }

        .pre-loader.hidden {
            animation: fadeOut 1s; 
            animation-fill-mode: forwards;
        }

        @keyframes fadeOut {
            100% {
                opacity: 0;
                visibility: hidden;
            }
        } 
.loader{
  width: 100px;
  height: 75px;
  margin: 0 auto;
  background: #fff;
  position: relative;
  border-radius: 100%;
}
.loader:before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  border: 15px solid transparent;
  border-top: 25px solid #fff;
  transform: rotate(45deg);
  top: 50px;
  left: -15px;
}

.loader:after {
  content: '';
  width: 12px;
  height: 12px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50% , -50%);
  border-radius: 50%;
  background-color: #056ee9;
  box-shadow: 20px 0 #056ee9, -20px 0 #056ee9;
  animation: flash 0.5s ease-out infinite alternate;
}

@keyframes flash {
  0% {
    background-color: rgba(5, 10, 233, 0.25);
    box-shadow: 20px 0 rgba(5, 10, 233, 0.25), -20px 0 #056ee9;
  }
  50% {
    background-color: #056ee9;
    box-shadow: 20px 0 rgba(5, 10, 233, 0.25), -20px 0 rgba(5, 10, 233, 0.25);
  }
  100% {
    background-color: rgba(5, 10, 233, 0.25);
    box-shadow: 20px 0 #056ee9, -20px 0 rgba(5, 10, 233, 0.25);
  }
}
      
        /* end preload */