.loading-animation-box {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: logoLoading1 1s infinite ease-in-out alternate;
}

.loading-animation-part1,
.loading-animation-part2 {
  background-color: var(--brand);
  height: 100px;
  width: 100px;
  position: absolute;
}

.loading-animation-part1 {
  -webkit-mask-box-image: url("../img/logo_part_1.svg");
  animation: logoLoading2 .5s infinite ease-in-out alternate;
}

.loading-animation-part2 {
  -webkit-mask-box-image: url("../img/logo_part_2.svg");
  animation: logoLoading3 .5s infinite ease-in-out alternate;
}

@keyframes logoLoading1 {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}
@keyframes logoLoading2 {
  from {
    transform: translate(-8px,-20px)
  }
  to {
    transform: translate(-16px,-10px) rotate(30deg)
  }
}
@keyframes logoLoading3 {
  from {
    transform: translate(8px,20px)
  }
  to {
    transform: translate(16px,10px) rotate(-30deg)
  }
}