#preloader {
  position       : fixed;
  display: table-cell;
  top            : 0;
  left           : 0;
  right          : 0;
  bottom         : 0;
  background  : linear-gradient(-45deg, #ff21aa, #ce007f, #301be9, #6200ff);
  animation      : gradient 20s ease infinite;
  background-size: 250% 250%;
  z-index        : 800;
  height         : 100%;
  width          : 100%;
}

#preloader {
  text-align    : center;
  display       : table-cell;
  vertical-align: middle;
  z-index       : 2;
}
/* 
@supports ((-webkit-backdrop-filter: blur(16px) brightness(50%)) or (backdrop-filter: blur(16px) brightness(50%))) {
  #preloader {

    background             : rgba(255, 255, 255, 0);
    backdrop-filter        : blur(16px) brightness(50%);
    -webkit-backdrop-filter: blur(16px) brightness(50%);
  }
} */

.no-js #preloader,
.oldie #preloader {
  display: none;
}

#loader {
  position: absolute;
  left    : 50%;
  top     : 50%;
  width   : 60px;
  height  : 60px;
  margin  : -30px 0 0 -30px;
  padding : 0;
}

/* #preloader h2 {
  left    : 50%;
  top     : 65%;
  text-align: center;
  margin: 0;
  position: absolute;
} */

.spinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 75px;
  height: 75px;
}
.spinner .path {
  stroke: #ffffff;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
 }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
 }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
 }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
 }
}