/* spin */

/*#loader {
  border: 12px solid #f3f3f3;
  border-radius: 50%;
  border-top: 12px solid #444444;
  width: 70px;
  height: 70px;
  animation: spin 1s linear infinite;
} 

@keyframes spin {
  100% {
      transform: rotate(360deg);
  }
} */


/* audio */
#loader-audio {
  height: 30px;
  width: 10px;
  border-radius: 4px;
  color: #fff;
  background: currentColor;
  /* position: relative; */
  animation: ht 1s ease-in infinite alternate;
  box-shadow: 15px 0 0 -1px , -15px 0 0 -1px ,
              30px 0 0 -2px , -30px 0 0 -2px,
              45px 0 0 -3px , -45px 0 0 -3px;
}

@keyframes ht {
  100% { height: 0px }
}


/* pin*/
/* #loader {
  width: 48px;
  height: 48px;
  display: block;
  margin: 20px auto;
  box-sizing: border-box;
  position: relative;
}
#loader::after {
  content: '';  
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  left: 0;
  bottom: 0;
  position: absolute;
  border-radius: 50% 50% 0;
  border: 15px solid #FFF;
  transform: rotate(45deg) translate(0, 0);
  box-sizing: border-box;
  animation: animMarker 0.4s ease-in-out infinite alternate;
}
#loader::before {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 150%;
  width: 24px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  animation: animShadow 0.4s ease-in-out infinite alternate;
}

@keyframes animMarker {
  0% {
    transform: rotate(45deg) translate(5px, 5px);
  }
  100% {
    transform: rotate(45deg) translate(-5px, -5px);
  }
}

@keyframes animShadow {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
} */


/*mouse scroll*/
#loader {
  width: 48px;
  height: 78px;
  /* position: relative; */
  box-sizing: border-box;
  border: 2px solid #fff;
  margin: auto;
  border-radius: 50% 50% 50% 50% / 25% 25% 25% 25%;
}
#loader::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 10px;
  animation: scrollDown 1.5s linear infinite;
}
@keyframes scrollDown {
   0% {
    top: 15px;
    height: 4px;
    opacity: 1;
  }
  33% {
    top: 15px;
    height: 40px;
  }
  66% {
    top: 50px;
    height: 10px;
    opacity: 1;
  }
  100% {
    top: 56px;
    height: 4px;
    opacity: 0;
  }
}

.center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}