.preloader {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
  background-color: #016bf4;
  position: absolute;
  z-index: 1;
}

#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#mp {
  stroke-dasharray: 0 1000;

  animation: line 3s ease forwards 1s, fillwhite 1.5s ease forwards 4s;
}

#p1 {
  stroke-dasharray: 0 500;

  animation: line 4s ease forwards, fillyellow 1s ease forwards 4s;
}

#p2 {
  stroke-dasharray: 0 100;

  animation: line 3s ease forwards 0.3s, fillyellow 1s ease forwards 4s;
}

@keyframes line {
  from {
    stroke-dasharray: 0 850;
  }

  to {
    stroke-dasharray: 1000 0;
  }
}

@keyframes line2 {
  from {
    stroke-dasharray: 0 100;
  }

  to {
    stroke-dasharray: 1000 0;
  }
}

@keyframes fillwhite {
  from {
    fill: transparent;
  }

  to {
    fill: #ffffff;
  }
}

@keyframes fillyellow {
  from {
    fill: transparent;
  }

  to {
    fill: #ffde1d;
  }
}