/*Loader*/
#loader {
  background: #fff;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  top: 0;
  left: 0;
  position: fixed;
}

#status {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -300px;
  margin-left: -230px;
  width: 400px;
  height: 400px;
}


#loader section.loader {
  position: relative;
  background: #fff;
  height: 450px;
  width: 450px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-filter: blur(8px) contrast(18);
          filter: blur(8px) contrast(18);
  mix-blend-mode: screen;
}
#loader section.loader > span {
  position: absolute;
}
#loader section.loader > span:nth-of-type(1) {
  left: 50%;
  width: 150px;
  height: 150px;
  -webkit-animation: spin-3 8s ease-in-out infinite forwards;
          animation: spin-3 8s ease-in-out infinite forwards;
}
#loader section.loader > span:nth-of-type(1) span {
  width: 30px;
}
#loader section.loader > span:nth-of-type(2) {
  left: 20%;
  width: 150px;
  height: 100px;
  -webkit-animation: spin-4 6s ease-in-out infinite;
          animation: spin-4 6s ease-in-out infinite;
}
#loader section.loader > span:nth-of-type(2) span {
  width: 21px;
}
#loader section.loader > span:nth-of-type(3) {
  left: 48%;
  top: 48%;
  width: 100px;
  height: 100px;
  -webkit-animation: spin-5 3.5s ease-in-out infinite forwards;
          animation: spin-5 3.5s ease-in-out infinite forwards;
}
#loader section.loader > span:nth-of-type(3) span {
  width: 25px;
}
#loader section.loader > span:nth-of-type(4) {
  left: 28%;
  top: 48%;
  width: 200px;
  height: 200px;
  -webkit-animation: spin-2 4.5s ease-in-out infinite forwards;
          animation: spin-2 4.5s ease-in-out infinite forwards;
}
#loader section.loader > span:nth-of-type(4) span {
  width: 20px;
}
#loader section.loader > span:nth-of-type(5) {
  left: 50%;
  top: 25%;
  width: 200px;
  height: 200px;
  -webkit-animation: spin-6 3.5s ease-in-out infinite forwards;
          animation: spin-6 3.5s ease-in-out infinite forwards;
}
#loader section.loader > span:nth-of-type(5) span {
  width: 20px;
}
#loader section.loader > span > span {
  position: absolute;
  background: #260436;
  right: 20px;
  top: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
}

#loader #status section.loader div {
  position: relative;
  width: 80px;
  aspect-ratio: 1;
  background: #1d5f81;
  border-radius: 50%;
}
#loader #status section.loader div > div {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
}
#loader #status section.loader div > div > span {
  position: absolute;
  aspect-ratio: 1;
  background: #0d3a15;
  border-radius: 50%;
}
#loader #status section.loader div > div:nth-child(1) {
  left: -5px;
  width: 70px;
  -webkit-animation: spin-1 5s ease-in infinite forwards;
          animation: spin-1 5s ease-in infinite forwards;
}
#loader #status section.loader div > div:nth-child(1) > span {
  width: 50px;
}
#loader #status section.loader div > div:nth-child(2) {
  left: 10px;
  bottom: 0;
  width: 80px;
  -webkit-animation: spin-2 3s ease-in 1.5s infinite forwards;
          animation: spin-2 3s ease-in 1.5s infinite forwards;
}
#loader #status section.loader div > div:nth-child(2) > span {
  width: 60px;
}

@-webkit-keyframes spin-1 {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  100% {
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
  }
}

@keyframes spin-1 {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  100% {
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
  }
}
@-webkit-keyframes spin-2 {
  0% {
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
  }
  100% {
    -webkit-transform: rotate(310deg);
            transform: rotate(310deg);
  }
}
@keyframes spin-2 {
  0% {
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
  }
  100% {
    -webkit-transform: rotate(310deg);
            transform: rotate(310deg);
  }
}
@-webkit-keyframes spin-3 {
  0% {
    -webkit-transform: rotate(220deg);
            transform: rotate(220deg);
  }
  100% {
    -webkit-transform: rotate(580deg);
            transform: rotate(580deg);
  }
}
@keyframes spin-3 {
  0% {
    -webkit-transform: rotate(220deg);
            transform: rotate(220deg);
  }
  100% {
    -webkit-transform: rotate(580deg);
            transform: rotate(580deg);
  }
}
@-webkit-keyframes spin-4 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spin-4 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes spin-5 {
  0% {
    -webkit-transform: rotate(-100deg);
            transform: rotate(-100deg);
  }
  100% {
    -webkit-transform: rotate(260deg);
            transform: rotate(260deg);
  }
}
@keyframes spin-5 {
  0% {
    -webkit-transform: rotate(-100deg);
            transform: rotate(-100deg);
  }
  100% {
    -webkit-transform: rotate(260deg);
            transform: rotate(260deg);
  }
}
@-webkit-keyframes spin-6 {
  0% {
    -webkit-transform: rotate(210deg);
            transform: rotate(210deg);
  }
  100% {
    -webkit-transform: rotate(570deg);
            transform: rotate(570deg);
  }
}
@keyframes spin-6 {
  0% {
    -webkit-transform: rotate(210deg);
            transform: rotate(210deg);
  }
  100% {
    -webkit-transform: rotate(570deg);
            transform: rotate(570deg);
  }
}