body {
  opacity: 0;
}
body.preloaded {
  transition: opacity 400ms ease-in-out;
  opacity: 1;
}


.preloader-wrap {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999999999;
  background-color: #fff;
  overflow: hidden; 
  pointer-events: none;
}
  .preloader-wrap .pieces-wrap {
    transform: translate3d(0, 90%, 0);
    display: block;
    position: absolute;
    top: -5%;
    left: 0;
    width: 100%;
    height: 110%;
    pointer-events: none; }
    .preloader-wrap .pieces-wrap .piece {
      display: block;
      position: absolute;
      top: 0;
      left: -50%;
      width: 200%;
      height: 120%;
      background-color: #fff;
      opacity: 0.5; }
    .preloader-wrap .pieces-wrap .piece:nth-child(1) {
      background-color: #fed5e6; }
    .preloader-wrap .pieces-wrap .piece:nth-child(2) {
      background-color: #ffd771; }
    .preloader-wrap .pieces-wrap .piece:nth-child(3) {
      background-color: #c5e29f; }
    .preloader-wrap .pieces-wrap .piece:nth-child(4) {
      background-color: #ff5364; }
  .preloader-wrap .drops-wrap {
    display: block;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0px); }
    .preloader-wrap .drops-wrap li:not(:last-child) {
      margin-bottom: 1vw; }
    .preloader-wrap .drops-wrap li.active .dot {
      fill: #28334a; }
    .preloader-wrap .drops-wrap .dot {
      display: block;
      width: 25px;
      height: 25px;
      margin: auto;
      fill: transparent; }