:root {
  --load-offset: 25%;
  --load-height: 67%;
}
@keyframes anim-loading-left {
  0%, 60% {
    transform: translate(-99.7%, -50%);
  }
  90%, 100% {
    transform: translate(-99.7%, -50%) translateY(calc(-1*var(--load-offset)));
  }
}
@keyframes anim-loading-right {
  0%, 60% {
    transform: translate(-0.2%, -50%);
  }
  90%, 100% {
    transform: translate(-0.2%, -50%) translateY(var(--load-offset));
  }
}
@keyframes anim-loading-rotate {
  0% {
    transform: rotate(0deg);
  }
  60%, 100% {
    transform: rotate(390deg);
  }
}
.loading-container {
  display: flex;
  justify-content: center;
}

.loading__text {
  display: block;
  margin-top: 5px;
  text-align: center;
}
.loading__wrap {
  position: relative;
  height: 120px;
  width: 120px;
  animation-fill-mode: forwards;
  animation-duration: 2.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-name: anim-loading-rotate;
  transform-origin: 50% 50%;
}
.loading-logo {
  width: 100%;
  height: 100%;
}
.loading-logo__segment {
  position: absolute;
  height: var(--load-height);
  width: calc(var(--load-height)/2);
  top: 50%;
  left: 50%;
  animation-fill-mode: forwards;
  animation-duration: 2.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.loading-logo__segment--left {
  background: url("../../img/logo/loading_left.svg") no-repeat;
  transform: translate(-100%, -50%) rotate(0deg);
  transform-origin: 100% 50%;
  animation-name: anim-loading-left;
}
.loading-logo__segment--right {
  background: url("../../img/logo/loading_right.svg") no-repeat;
  transform: translate(0%, -50%) rotate(0deg);
  transform-origin: 0% 50%;
  animation-name: anim-loading-right;
}