#wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   height: calc(100vh - 2px);
}

#preloader {
   position: relative;
   width: 260px;
   height: 110px;
}

#prelab {
   display: block;
   width: 100%;
   text-align: center;
   margin-top: 75px;
   color: #b25bd7;
   font-size: 24px;
   line-height: normal;
}

.ld {
   width: 25px;
   height: 25px;
   background-color: black;
   position: absolute;
   left: 100px;
   top: 0px;
   animation-name: ld;
   animation-duration: 4s;
   animation-iteration-count: infinite;
}

#ld2,
#ld3 {
   left: 135px;
}

#ld3,
#ld4 {
   top: 35px;
}

#ld2 {
   animation-delay: 1s;
}

#ld3 {
   animation-delay: 2s;
}

#ld4 {
   animation-delay: 3s;
}

@keyframes ld {
   0% {
      background-color: black;
   }

   25% {
      background-color: #b25bd7;
   }

   50% {
      background-color: black;
   }
}

/* fades animations */

.fadeout,
.fadein {
   animation-duration: 0.75s;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
}

.fadein {
   animation-name: fadein;
}

.fadeout {
   animation-name: fadeout;
}

.fadein_nofill {
   animation-name: fadein;
   animation-duration: 1s;
}

@keyframes fadein {
   0% {
      opacity: 0.0;
   }

   100% {
      opacity: 1.0;
   }
}

@keyframes fadeout {
   0% {
      opacity: 1.0;
   }

   100% {
      opacity: 0.0;
   }
}