/////////////////////////////////////////////////////

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

/////////////////////////////////////////////////////

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/////////////////////////////////////////////////////

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/////////////////////////////////////////////////////

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/////////////////////////////////////////////////////

@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100px);
  }
}

/////////////////////////////////////////////////////

@keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/////////////////////////////////////////////////////

@keyframes fadeIn {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

/////////////////////////////////////////////////////

@keyframes drawDash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/////////////////////////////////////////////////////

@keyframes removeDash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1000;
  }
}

/////////////////////////////////////////////////////

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

/////////////////////////////////////////////////////

.zoomIn {
  animation-name: zoomIn;
}

@keyframes bounceOut {
  0%,
  100% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
}

/////////////////////////////////////////////////////

@keyframes zoomIn {
  from {
  }
  to {
    transform: scale3d(10, 10, 10);
  }
}

/////////////////////////////////////////////////////

@keyframes fadify {
  0%,
  100% {
    opacity: 1;
  }
  85% {
    opacity: 0.85;
  }
  70% {
    opacity: 0.7;
  }
  55% {
    opacity: 0.55;
  }
  40% {
    opacity: 0.4;
  }
}

/////////////////////////////////////////////////////

@keyframes fullWidth {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

/////////////////////////////////////////////////////

.grow {
  transform: scale3d(1, 1, 1) !important;
}

// Pat-prefixed version for Tailwind compatibility
.pat-grow {
  transform: scale3d(1, 1, 1) !important;
}