/*preloader*/
.loader {
  position: fixed;
  background-color: var(--back2);
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hidden {
  animation: fadeOut 1.5s;
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.loader .container {
  position: absolute;
  top: 70%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.goo1 {
  -webkit-filter: url(#goo);
}

.loader .container div {
  background: linear-gradient(-45deg, var(--back1), rgb(141, 31, 71), var(--normalColor));
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.goo1>div {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0%;
  left: 0%;
  transform-origin: -50% -50%;
  animation: circle 2.5s infinite cubic-bezier(.57, 0, .52, 1);
}

.goo1>div:nth-child(1) {
  animation-delay: .25s;
}

.goo1>div:nth-child(2) {
  animation-delay: .5s;
}

.goo1>div:nth-child(3) {
  animation-delay: .75s;
}

.goo1>div:nth-child(4) {
  animation-delay: 1s;
}

.goo1>div:nth-child(5) {
  animation-delay: 1.25s
}

@keyframes circle {
  50% {
    width: 25px;
    height: 25px;
  }

  100% {
    transform: rotate(360deg);
  }
}

/* LOGO */
.torpedoLogo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
}

.torpedoLogo svg {
  color: var(--textColor);
  fill: var(--textColor);
  margin: 0 auto;
  width: 100px;
  height: 100px;
}

.torpedoLogoCont {
  fill: var(--normalColor);
}

.torpedoWord {
  color: var(--normalColor);
  font-size: 1em;
}