/* TEXTOS______________________________________________________________________________________________________________________________________ */


/* TEXTO VERTICAL */
.aparece {
    opacity: 0;
}
.aparece.active {
    opacity: 1;
}

.aparece.active.splitting .char {
  animation: slide-in .6s cubic-bezier(.5, 0, .5, 1) both;
  animation-delay: calc(3ms * var(--char-index) + 1000ms );
}

@keyframes slide-in {
  from {
    transform: translateY(1.5em);
    opacity: 0;
  }
}

.aparece-sub {
  opacity: 0;
}
.aparece-sub.active {
  opacity: 1;
  transition: all 500ms ease-out; 
}

/* TEXTO HORIZONTAL */

.aparece-h {
  opacity: 0;
}
.aparece-h.active {
  opacity: 1;
}

.aparece-h.active.splitting .char {
animation: slide-in-h .6s cubic-bezier(.5, 0, .5, 1) both;
animation-delay: calc(3ms * var(--char-index) + 1000ms );
}


@keyframes slide-in-h {
from {
  transform: translateY(1.5em);
  opacity: 0;
}
}


.aparece-intro {
  position: relative;
  z-index: 120;
  opacity: 0;
}
.aparece-intro.active {
  opacity: 1;
}

.aparece-intro.active.splitting .char {
	animation: texto-intro .75s cubic-bezier(.5, 0, .5, 1) both;
	animation-delay: calc(.25s + (120ms * var(--char-index)));
}

@keyframes texto-intro {
	from {
	transform: translateX(-3em) translateY(-1.5em) rotate(-135deg) scale(0.5);
	opacity: 0;
	}
}


/* NOSOTROS NOS HACEMOS CARGO */





/* ---------------------------------- */


.texto-hola {
  .char {
    line-height: 1;
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(.77,.02,.11,.97);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-delay: calc(0.05s * var(--char-index) );
    animation-duration: calc( 0.6s + ( 0.03s * var(--char-total)) );
    animation-name: bounce-char;
  }
}

@keyframes bounce-char {
  30% { transform: translateY(0%) scale(1.08, .9); }
  70% { transform: translateY(-40%) scale(.9, 1.08); }
}



/* TADA */

.icono-salta.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes tada {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  10%, 20% {
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes tada {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  10%, 20% {
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
}




/* rubber band */


.icono-elastico.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes rubberBand {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
  transform: scale3d(1.25, 0.75, 1);
  }
  40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
  transform: scale3d(0.75, 1.25, 1);
  }
  50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  -webkit-transform: scale3d(1.05, .95, 1);
  transform: scale3d(1.05, .95, 1);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes rubberBand {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
  transform: scale3d(1.25, 0.75, 1);
  }
  40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
  transform: scale3d(0.75, 1.25, 1);
  }
  50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  -webkit-transform: scale3d(1.05, .95, 1);
  transform: scale3d(1.05, .95, 1);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }