@keyframes errorFormTimeBar {
  0% {
    width: 0%;
    opacity: 1;
  }
  90% {
    width: 90%;
    opacity: 1;
  }
  100%{
    width: 100%;
    opacity: 0;
  }
}

@keyframes mensajeNuevo {
  from{
    transform: translateY(-3px) rotate(0deg);
  }
  to{
    transform: translateY(3px) rotate(10deg);
  }  
}

@keyframes errorForm {
  0% {
    opacity: 0;
    translate: 0 -100px;
  }
  10% {
    opacity: 1;
    translate: 0;
  }
  90% {
    opacity: 1;
    translate: 0;
  }
  100% {
    opacity: 0;
    translate: 0 -100px;
    display: none;
  }
}

@keyframes pedidoNuevo {
  from{transform: scale(100%);}
  to{transform: scale(105%);}
}

@keyframes inputError {
  0%{opacity: 0; top: -50px}
  20%{opacity: 1; top: -100px}
  80%{opacity: 1; top: -100px}
  100%{opacity: 0; top: -150px}
}

@keyframes notificacionNueva {
  0%{
    transform: translateY(0px) rotate(0deg);
  }
  50%{
    transform: translateY(0px) rotate(0deg);
  }
  60%{
    transform: translateY(0px) rotate(10deg);
  }
  70%{
    transform: translateY(0px) rotate(0deg);
  }
  80%{
    transform: translateY(0px) rotate(10deg);
  } 
}

@keyframes cortinaSpan {
  0%{
    box-shadow: 0 0 0 black;
  }
  100%{
    box-shadow: 0 0 20px black;
  }
}

@keyframes loadingImg {
  0%{
    transform: rotate(0deg);
  }
  90%{
    transform: rotate(360deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes borde {
  0%{
    stroke-dasharray: 0 88;
    stroke-dashoffset: 45;
  }
  65%{
    stroke-dasharray: 88 0;
    stroke-dashoffset: 0;
  }
  100%{
    stroke-dasharray: 1 87;
    stroke-dashoffset: -130;
  }
}

@keyframes titilar {
  0%{
    outline: 0px solid rgba(0,0,0,0);
  }
  60%{
    outline: 0px solid rgba(0,0,0,0);
  }
  70%{
    outline: 10px solid rgba(0,0,0,0.2);
  }
  100%{
    outline: 0px solid rgba(0,0,0,0.0);
  }
}

@keyframes vibrar {
  90%{
    transform: translateX(0px);
  }
  91%{
    transform: translateX(-1px);
  }
  92%{
    transform: translateX(1px);
  }
  93%{
    transform: translateX(-1px);
  }
  94%{
    transform: translateX(1px);
  }
  95%{
    transform: translateX(-1px);
  }
  96%{
    transform: translateX(1px);
  }
  97%{
    transform: translateX(-1px);
  }
  98%{
    transform: translateX(1px);
  }
  99%{
    transform: translateX(-1px);
  }
  100%{
    transform: translateX(0px);
  }
}

@keyframes timeOut {
  0%{
    background-position: 100% 0;
  }
  100%{
    background-position: 0% 0;
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes rotar {
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}