div#loading_container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffffdd;
    z-index: 100;
}

#loading {
    margin-top: 40%;
}   

.loader {
  margin: auto;
  margin-top: 10px;
  width: 60px;
  aspect-ratio: 1;
  display: grid;
  grid: 50%/50%;
  color: var(--color_1);
  --_g: no-repeat linear-gradient(currentColor 0 0);
  background: var(--_g),var(--_g),var(--_g);
  background-size: 50.1% 50.1%;
  animation: 
    l6-0   1.5s infinite steps(1) alternate,
    l6-0-0 3s   infinite steps(1);
}
.loader::before {
  content: "";
  background: currentColor;
  transform: perspective(150px) rotateY(0deg) rotateX(0deg);
  transform-origin: bottom right; 
  animation: l6-1 1.5s infinite linear alternate;
}
@keyframes l6-0 {
  0%  {background-position: 0    100%,100% 100%,100% 0}
  33% {background-position: 100% 100%,100% 100%,100% 0}
  66% {background-position: 100% 0   ,100% 0   ,100% 0}
}
@keyframes l6-0-0 {
  0%  {transform: scaleX(1)  rotate(0deg)}
  50% {transform: scaleX(-1) rotate(-90deg)}
}
@keyframes l6-1 {
  16.5%{transform:perspective(150px) rotateX(-90deg)  rotateY(0deg)    rotateX(0deg);filter:grayscale(0.8)}
  33%  {transform:perspective(150px) rotateX(-180deg) rotateY(0deg)    rotateX(0deg)}
  66%  {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg)}
  100% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(0.8)}
}



#loader_img {
    margin: auto;
    position: relative;
    top: 132px;
    width: 90px;
    height: 14px;
    --c:var(--color_1) 92%,#0000;
    background: 
    radial-gradient(circle closest-side,var(--c)) calc(100%/-4) 0,
    radial-gradient(circle closest-side,var(--c)) calc(100%/4)  0;
    background-size:calc(100%/2) 100%;
    animation: l14 1.5s infinite;
}
@keyframes l14 {
    0%   {background-position: calc(100%/-4) 0    ,calc(100%/4) 0}
    50%  {background-position: calc(100%/-4) -14px,calc(100%/4) 14px}
    100% {background-position: calc(100%/4)  -14px,calc(3*100%/4) 14px}
}


#audio_loading {
  display: flex;
  background-color: #eee;
  border-radius: 40px;
  height: 40px;
  position: fixed;
  left: 10px;
  top: 306px;
  width: 40px;
  padding: 5px;
  z-index: 100;
}

audio {
  position: fixed;
  left: 0;
  right: 0;
  top: 260px;
}


/* Audio Loader */

@keyframes animation_1 {
  25%{
    transform: scaleY(.4);
  }
  50%{
    transform: scaleY(.3);
  }
  75%{
    transform: scaleY(.5);
  }
}
@keyframes animation_2 {
  25%{
    transform: scaleY(0.8);
  }
  50%{
    transform: scaleY(.4);
  }
  75%{
    transform: scaleY(.6);
  }
}
@keyframes animation_3 {

  25%{
    transform: scaleY(0.6);
  }
  50%{
    transform: scaleY(.4);
  }
  75%{
    transform: scaleY(0.8);
  }
}

.boxContainer{
  display: flex;
  justify-content: center;
  height: 40px;
  width: 100%;
  flex: 2.5;
}

.audio_loading_text {
  margin: 0 10px;
  line-height: 50px;
  width: 100%;
  flex: 5;
  color:#666;
}

.box{
  transform: scaleY(.4);
  height: 100%;
  width: 5px;
  background-color: var(--color_1);
  background-image: linear-gradient(160deg, var(--color_1) 0%, var(--color_2) 100%);
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  border-radius: 8px;
  margin: 0 2.5px;
}

.box1{ animation-name: animation_1; animation-delay: 0.2s; }
.box1:nth-of-type(2) { animation-delay: 0.5s; }

.box2{ animation-name: animation_2; animation-delay: 0.0s;  }
.box2:nth-of-type(2) { animation-delay: 0.4s;  }

.box3{ animation-name: animation_3; animation-delay: 0.1s;  }
.box3:nth-of-type(2) { animation-delay: 0.1s;  }

.box4{ animation-name: animation_2; animation-delay: 0.4s;  }
.box4:nth-of-type(2) { animation-delay: 0.0s;  }

.box5{ animation-name: animation_1; animation-delay: 0.5s;  }
.box5:nth-of-type(2) { animation-delay: 0.2s;  }

@media all and (min-width:1024px) {
  #audio_loading {
    left: 30%;
    bottom: 115px;
    top: auto;
  }

  #loading {
    margin-top: 20%;
  }
}   
}