@keyframes fade-up {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-10%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(10%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade {
from {	transform: translateX(100px)}
to {	transform: translateX(0px)}
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

@keyframes moveit {
  0% { transform: translateX(-30vw);}
  100% { transform: translateX(100vw);}
  }
@keyframes move-short {
  0% { transform: translateX(25vw);}
  100% { transform: translateX(-40vw);}
  }
  
  @keyframes u-moveit {
  0% { transform: translateX(-20vw);}
  10% { transform: translateX(10vw);}
 30% { transform: translateX(-4vw);}
50% { transform: translateX(50vw);}
70% { transform: translateX(40vw);}
80% { transform: translateX(85vw);}
  100% { transform: translateX(100vw);}
  }
  
  @keyframes u-moveit-lean {
  0% { transform: rotate(0deg);}
  8% { transform: rotate(13deg);}
 30% { transform:  rotate(-16deg);}
40% { transform:  rotate(13deg);}
60% { transform:  rotate(-21deg);}
70% { transform:  rotate(12deg);}
  100% { transform:  rotate(-11deg);}
  }
    
  @keyframes hat {
  0% { transform: translateX(0) translateY(0);}
  90% { transform: translateX(0) translateY(0);}
  98% { transform: translateX(-150px) translateY(150px);opacity: 1;}
  100% { transform: translateX(-150px) translateY(150px);opacity: 0;}
  }


@-webkit-keyframes highlight {
  to { background-position: 0 0}}

@keyframes highlight {  to { background-position: 0 0}}

    @keyframes svg-text-anim {
       40% {
          stroke-dashoffset: 0;
          fill: transparent;
        }
        60% {
          stroke-dashoffset: 0;
          fill: #ffffff;
        }
        100% {
          stroke-dashoffset: 0;
          fill: #ffffff;
        }
    }
    
    @keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}