/*** Animação de atenção para modais de aviso ***/
.swing {
	transform-origin: top center;
	animation: swing 2s ease infinite;
}
@keyframes swing {
	20% { transform: rotate(15deg); }	
	40% { transform: rotate(-10deg); background: var(--red-tim); }
	60% { transform: rotate(5deg); background: var(--red-tim); }	
	80% { transform: rotate(-5deg);  }	
	100% { transform: rotate(0deg); background: var(--red-tim); }
}

/*** Animação de icones de confirmação modal ***/
.hithere {
  animation: hithere 3s ease infinite;
}
@keyframes hithere {
  30% { transform: scale(0.9); }
  40%, 60% { transform: rotate(-10deg) scale(0.8); }
  50% { transform: rotate(10deg) scale(0.8);}
  70% { transform: rotate(0deg) scale(0.9); }
  100% { transform: scale(1); }
}

/********** Animação de piscar trocando cor *********/
.neon {
  font-size: 6vw !important;
  line-height: 9vw;
  color: white;
}

.neon {
  animation: neon 1s ease infinite;
  -moz-animation: neon 1s ease infinite;
  -webkit-animation: neon 1s ease infinite;
}

@keyframes neon {
  0%,
  100% {
    color: var(--blue-tim-three);
  }
  50% {
    color: var(--blue-tim-one);
  }

  0% {
    -webkit-transform: translateZ(600px);
    transform: translateZ(600px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }

}

/********** Animação de giro circular *********/
.rotate {
	display: inline-block;
  transform: rotate(0);
  animation: rotate .8s cubic-bezier(.21,.72,.63,.93) infinite;
  transform-origin: 0.65625rem 1.325rem;
}

@keyframes rotate {
  0% {
    transform:rotate(0deg)
  }
  to {
    transform:rotate(1turn)
  }
}

/********** Animação para usar em setas *********/
.shake {
  animation: shake 2s ease infinite;
}

@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

/*** Responsivo ***/
@media only screen and (max-width:1000px){
  .neon {
    font-size: 30vw !important;
  }

}