/* HTML: <div class="loader"></div> */
.loader {
  width: 40px;
  height: 20px;
  --c:no-repeat radial-gradient(farthest-side,#000 93%,#0000);
  background:
    var(--c) 0    0,
    var(--c) 50%  0,
    var(--c) 100% 0;
  background-size: 8px 8px;
  position: relative;
  animation: l4-0 1s linear infinite alternate;
}

.loader:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 12px;
  background: #000;
  left: 0;
  top: 0;
  animation: 
    l4-1 1s  linear infinite alternate,
    l4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}
@keyframes l4-0 {
  0%      {background-position: 0  100%,50% 0   ,100% 0}
  8%,42%  {background-position: 0  0   ,50% 0   ,100% 0}
  50%     {background-position: 0  0   ,50% 100%,100% 0}
  58%,92% {background-position: 0  0   ,50% 0   ,100% 0}
  100%    {background-position: 0  0   ,50% 0   ,100% 100%}
}
@keyframes l4-1 {
  100% {left:calc(100% - 8px)}
}
@keyframes l4-2 {
  100% {top:-0.1px}
}



@keyframes fadeIn{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(2rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0rem);
  }
}

@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(-150px);
  }
  
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes fadeLeft {
  0% {
    opacity: 1;
    transform: translateX(0px);
  }
  100% {
    opacity: 0;
    transform: translateX(-150px);
  }
}

.slideRight{
  animation: fadeRight 0.7s cubic-bezier(0, 0, 0.57, 1.29);
}
.slideLeft{
  animation: fadeLeft 0.7s cubic-bezier(0, 0, 0.57, 1.29);
}

.pageText{
  font-size: 3rem; 
  font-family: var(--font1); 
  letter-spacing: 1px; 
  color: #333333; 
  animation: popup 0.7s ease forwards;
  opacity: 0;
}

@keyframes popup {
  0% {
    opacity: 0;
    transform: translateY(1rem);
  }
  
  60% {
    opacity: 1;
    transform: translateY(-0.2rem);
  }
  
  100% {
    opacity: 1;
    transform: translateY(0rem);
  }

}