.banner-fade {
  background-color: #343a40;
  opacity: 1;
  width: 370px;
  height: 100px;
  animation: banner-fade 6s infinite;
  z-index: 99;
  position: absolute;
  margin-top: 230px;
  animation-delay: -3s;
}

@keyframes banner-fade {
  45% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.loader {
  position: relative;
  margin: auto;
}

.loader-container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-height: 100vh;
  background: #343a40;
}

.logo-img {
  width: 320px;
  height: 350px;
  position: relative;
  z-index: 96;
}

.front {
  color: #343a40;
}

.middle1 {
  height: 180px;
  width: 20px;
  background-color: #343a40;
  position: absolute;
  z-index: 98;
  margin-top: 31px;
  margin-left: 105px;
  animation: mid1 6s infinite;
  transform: rotate(45deg);
  animation-delay: -3s;
}

.middle2 {
  height: 180px;
  width: 22px;
  background-color: #343a40;
  position: absolute;
  z-index: 98;
  margin-top: 29px;
  margin-left: 140px;
  animation: mid2 6s infinite;
  transform: rotate(45deg);
  animation-delay: -3s;
}

.middle3 {
  height: 180px;
  width: 22px;
  background-color: #343a40;
  position: absolute;
  z-index: 98;
  margin-top: 46px;
  margin-left: 156px;
  animation: mid3 6s infinite;
  transform: rotate(45deg);
  animation-delay: -3s;
}

.middle4 {
  height: 180px;
  width: 21px;
  background-color: #343a40;
  position: absolute;
  z-index: 98;
  margin-top: 60px;
  margin-left: 178px;
  animation: mid4 6s infinite;
  transform: rotate(45deg);
  animation-delay: -3s;
}

.middle5 {
  height: 180px;
  width: 20px;
  background-color: #343a40;
  position: absolute;
  z-index: 98;
  margin-top: 94px;
  margin-left: 175px;
  animation: mid5 6s infinite;
  transform: rotate(45deg);
  animation-delay: -3s;
}

@keyframes mid1 {
  0% {
    top: 0px;
    left: 0px;
  }
  8% {
    top: -160px;
    left: 160px;
  }
  100% {
    top: -160px;
    left: 160px;
  }
}
@keyframes mid2 {
  8% {
    top: 0px;
    left: 0px;
  }
  16% {
    top: -160px;
    left: 160px;
  }
  100% {
    top: -160px;
    left: 160px;
  }
}
@keyframes mid3 {
  16% {
    top: 0px;
    left: 0px;
  }
  24% {
    top: -160px;
    left: 160px;
  }
  100% {
    top: -160px;
    left: 160px;
  }
}
@keyframes mid4 {
  24% {
    top: 0px;
    left: 0px;
  }
  32% {
    top: -160px;
    left: 160px;
  }
  100% {
    top: -160px;
    left: 160px;
  }
}
@keyframes mid5 {
  32% {
    top: 0px;
    left: 0px;
  }
  40% {
    top: -160px;
    left: 160px;
  }
  100% {
    top: -160px;
    left: 160px;
  }
}
.fade-in {
  animation: fadeIn 6s infinite;
  opacity: 0;
  height: 200px;
  width: 200px;
  background-color: #343a40;
  position: absolute;
  z-index: 98;
  margin-top: 20px;
  margin-left: 60px;
  animation-delay: -3s;
}

@keyframes fadeIn {
  79% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}/*# sourceMappingURL=preloading.css.map */