.logo-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
@keyframes vert {
  15% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(0%);
  }
  75% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes hor {
  10% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(0%);
  }
  65% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.vert,
.hor {
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.vert {
  animation-name: vert;
  transform: translateY(100%);
}
.hor {
  animation-name: hor;
  transform: translateX(-100%);
}
#first-t-vert {
  animation-delay: 200ms;
}
#first-i {
  animation-delay: 400ms;
}
#first-l {
  animation-delay: 600ms;
}
#second-l {
  animation-delay: 700ms;
}
#second-i {
  animation-delay: 600ms;
}
#second-t-vert {
  animation-delay: 650ms;
}
#first-t-vert {
  animation-delay: 800ms;
}
#first-t-hor {
  animation-delay: 1500ms;
}
#second-t-hor {
  animation-delay: 1300ms;
}