html.preloader {
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.preloader {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

#preloader {
  position: absolute;
  z-index: 10000;
  background: #FFF;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: top;
  overflow: hidden;
}

#preloader .top-progress {
  position: fixed;
  top: 0; left: 0; right: 0; height: 2px; background-color: #fdb5c5; transition: all;
  width: 100%;
  animation: frames-preloader-top-progress 3s;
  transition-timing-function: ease-out;
}

@keyframes frames-preloader-top-progress {
  0%   {
    opacity: 0;
    left: -100%;
  }
  100%   {
    opacity: 1;
    left: 0;
  }
}

#preloader img {
  opacity: 0.7;
  position: absolute;
  top: calc(50% - 80px);
  left: calc(50% - 45px);
  width: 90px;

  animation-name: spin;
  animation-duration: 3000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
      transform:rotate(0deg);
  }
  to {
      transform:rotate(360deg);
  }
}