@keyframes animate-carousel 
{
0% 
{     opacity: 0; 
      top: 0;
      height: 0;      
}
50% 
{
      opacity: 1;
      top: 0;
      height: 44px;      
}
100% 
{
      opacity: 0;  
      height: 0;
      top: 44px;      
}
}
@keyframes animate-down 
{
0% 
{
      opacity: 0; 
}
50% 
{
      opacity: 1;
}
100% 
{
      opacity: 0;
}
}



@-webkit-keyframes animate-scroll 
{
from 
{      
      opacity: 0;
      bottom: -300px; 
} 
to 
{
      opacity: 1;
      bottom: 0;
}
}
@keyframes animate-scroll
{
from 
{
      opacity: 0;
      bottom: -300px;
}
to 
{
      opacity: 1;
      bottom: 0;
}
}
@-webkit-keyframes animate-fade 
{
from 
{
      opacity: 0;
} 
to 
{
      opacity: 1;
}
}
@keyframes animate-fade
{
from 
{
      opacity: 0;
} 
to 
{
      opacity: 1;
}
}


@keyframes animate-arrow 
{
0% 
{
      transform:rotatez(-45deg) translateY(30px) translateX(28px);
}
100% 
{
      transform: rotatez(-45deg) translateY(-35px) translateX(-35px);
}
}
@-webkit-keyframes animate-arrow 
{
0% 
{
      transform: translateX(45px);
}
100% 
{
      transform: translateX(-44px);
}
}
@keyframes animate-border 
{
0% 
{
      transform: translateX(45px);
}
100% 
{
      transform: translateX(-44px);
}
}
@-webkit-keyframes animate-border 
{
0% 
{
      transform: translateX(45px);
}
100% 
{
      transform: translateX(-44px);
}
}



@property --border-angle 
{
      syntax: "<angle>";
      inherits: true;
      initial-value: 0turn;
}
@-webkit-keyframes animate-modal
{
to 
{
      --border-angle: 1turn;
}
}
@keyframes animate-modal
{
to 
{
      --border-angle: 1turn;
}
}



@keyframes animate-infinite
{
0% 
{
      transform: translateX(0);
}
100% 
{
      transform: translateX(calc(clamp(20px, 100%, 500px) * -12));
}
}
@-webkit-keyframes animate-infinite
{
0% 
{
      transform: translateX(0);
}
100% 
{
      transform: translateX(calc(clamp(20px, 100%, 500px) * -12));
}
}