.mobile-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle-container {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: pure-css-loading-rotate 2s linear infinite;
}


.mobile-loading svg {
  width: 200px;
  height: 200px;
  position: absolute;
  transform: rotate(-90deg);
  top: 0;
  left: 0;
  transform-origin: center;
  overflow: visible;
  vertical-align: middle;
}

.mobile-loading svg circle{
  animation-name: pure-css-loading-circle-animation;
  stroke-dasharray: 125.664px;
  stroke-width: 3%;
  transition-property: stroke;
  animation-duration: 4s;
  animation-timing-function: cubic-bezier(.35,0,.25,1);
  animation-iteration-count: infinite;
  fill: transparent;
  transform-origin: center;
  transition: stroke-dashoffset 225ms linear;
  stroke: #912193;
  stroke-linecap: round;
}

body {
  inset: 0; overflow: hidden;
  margin: 0; padding: 0;
  position: fixed;
}
#loading {
  position: absolute;
  align-items: center;
  display: flex;
  height: 120px;
  width: 120px;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#loading img {
  animation: 1s ease-in-out 0s infinite alternate breathe;
  transition: opacity .4s;
  height: 120px;
  width: 120px;
}
#loading.main_done img {
  opacity: 1;
}
#loading.init_done img {
  opacity: 1;
}
@keyframes breathe { from { transform: scale(0.9) } to { transform: scale(0.7)}}

@keyframes pure-css-loading-rotate {
  0% {
    
    transform: rotate(0) ;
  }

  100% {

    transform: rotate(360deg) ;
  }
}

@keyframes pure-css-loading-circle-animation {
  0% {
    stroke-dashoffset: 119.381;
    transform: rotate(0deg);
  }
  12.5% {
      stroke-dashoffset: 25.1327;
      transform: rotate(0deg);
  }
  12.5001% {
      stroke-dashoffset: 25.1327;
      transform: rotateX(180deg) rotate(72.5deg);
  }
  25% {
      stroke-dashoffset: 119.381;
      transform: rotateX(180deg) rotate(72.5deg);
  }
  25.0001% {
      stroke-dashoffset: 119.381;
      transform: rotate(270deg);
  }
  37.5% {
      stroke-dashoffset: 25.1327;
      transform: rotate(270deg);
  }
  37.5001% {
      stroke-dashoffset: 25.1327;
      transform: rotateX(180deg) rotate(161.5deg);
  }
  50% {
      stroke-dashoffset: 119.381;
      transform: rotateX(180deg) rotate(161.5deg);
  }
  50.0001% {
      stroke-dashoffset: 119.381;
      transform: rotate(180deg);
  }
  62.5% {
      stroke-dashoffset: 25.1327;
      transform: rotate(180deg);
  }
  62.5001% {
      stroke-dashoffset: 25.1327;
      transform: rotateX(180deg) rotate(251.5deg);
  }
  75% {
      stroke-dashoffset: 119.381;
      transform: rotateX(180deg) rotate(251.5deg);
  }
  75.0001% {
      stroke-dashoffset: 119.381;
      transform: rotate(90deg);
  }
  87.5% {
      stroke-dashoffset: 25.1327;
      transform: rotate(90deg);
  }
  87.5001% {
      stroke-dashoffset: 25.1327;
      transform: rotateX(180deg) rotate(341.5deg);
  }
  100% {
      stroke-dashoffset: 119.381;
      transform: rotateX(180deg) rotate(341.5deg);
  }
}