@keyframes rotated {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}
@keyframes shapeMover {
  0%, 100% {transform: perspective(400px) translateY(0) rotate(-6deg) translateZ(0px) translateX(0);}
  50% {transform: perspective(400px) rotate(-3deg) translateZ(10px) translateY(10px) translateX(10px);}
}
@keyframes shapeMovers {
  0%, 100% {transform: perspective(200px) translateY(0) rotate(6deg) translateZ(0px) translateX(0);}
  50% {transform: perspective(200px) rotate(4deg) translateZ(10px) translateY(10px) translateX(10px);}
}
@keyframes squareMover {
  0%, 100% {transform: translate(0, 0) rotate(0);}
  20%, 60% {transform: translate(20px, 40px) rotate(180deg);}
  30%, 80% {transform: translate(40px, 60px) rotate(0deg);}
}
@keyframes textRotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
@keyframes rotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(359deg);}
}
@keyframes messageMove {
  0%, 100% {transform: translateX(0);}
  25%, 75% {transform: translateX(7px);}
  50% {transform: translateX(15px);}
}
@keyframes leftToRight {
  0% {transform: translateX(0);}
  50% {transform: translateX(15px);}
  100% {transform: translateX(0);}
}
@keyframes topToBottom {
  0% {transform: translateY(0);}
  50% {transform: translateY(25px);}
  100% {transform: translateY(0);}
}
@keyframes topToBottomTwo {
  0% {transform: translateY(0);}
  50% {transform: translateY(-25px);}
  100% {transform: translateY(0);}
}
@keyframes topToBottomThree {
  0% {transform: translateY(0);}
  50% {transform: translateY(-7px);}
  100% {transform: translateY(0);}
}
@keyframes scale {
  0% {transform: scale(0.5);}
  50% {transform: scale(1);}
  100% {transform: scale(0.5);}
}
@keyframes iconTranslateX {
  49% {transform: translateX(100%);}
  50% {opacity: 0;transform: translateX(-100%);}
  51% {opacity: 1;}
}
@keyframes zumpTop {
  0% {transform: translateZ(0);}
  50% {transform: translate3d(0, 15px, 0);}
  100% {transform: translateZ(0);}
}
@keyframes ripple {
  70% {box-shadow: 0 0 0 40px rgba(10, 165, 205, 0);}
  100% {box-shadow: 0 0 0 0 rgba(10, 165, 205, 0);}
}
@keyframes phone-icon-animate {
  0%, 100% {transform: rotate(0) scale(1) skew(1deg);}
  10%, 70% { transform: rotate(-25deg) scale(1) skew(1deg);  }
  20%, 40% {transform: rotate(25deg) scale(1) skew(1deg);}
  30% {transform: rotate(-25deg) scale(1) skew(1deg);}
  50% {transform: rotate(0) scale(1) skew(1deg);}
  60%, 80% {transform: rotate(25deg) scale(1) skew(1deg);}
}
/* initial hidden state */
.animate-left, .animate-right, .animate-bottom{opacity:0;transition: all 1s ease;}
.animate-left{transform: translateX(-80px);}
.animate-bottom{transform: translateY(80px);}
.animate-right{transform: translateX(80px);}
.show{opacity:1;transform: translate(0);}
.delay-1{transition-delay:0s;}
.delay-2{transition-delay:0.2s;}
.delay-3{transition-delay:0.8s;}
.animate-top{opacity:0;transform: translateY(-120px);}
.animate-top.show{animation: jumpDown 1s ease forwards;}
@keyframes jumpDown{
0%{opacity:0;transform: translateY(-120px);}
60%{opacity:1;transform: translateY(20px);}
80%{opacity:1;transform: translateY(-10px);}
100%{opacity:1;transform: translateY(0);}
}
@keyframes floatX2 {
  0% {transform: translateX(10%);}
  50% {transform: translateX(50%);}
  100% {transform: translateX(10%);}
}
@keyframes icon-bounce {
  0%, 100%, 20%, 50%, 80% {transform: translateY(0);}
  40% { transform: translateY(-10px);}
  60% { transform: translateY(-5px);}
}
@keyframes mover {
  0% {transform: translateY(0);}
  100% {transform: translateY(-20px);}
}
@keyframes flying {
  0% {transform: translate(5px, 5px);}
  50% {transform: translate(-5px, -5px);}
  100% {transform: translate(5px, 5px);}
}