/* Animación de entrada más suave */
.slideBack {
	animation: slideBack 1.3s ease 0ms forwards;
}

@keyframes slideBack {
  0% {
    transform: translateX(100%);
	opacity: 0;
  }
  100% {
    transform: translateX(0);
	opacity: 1;
  }
}

.slideInLeft {
	animation: slideInLeft 1.3s ease 0ms backwards;
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-500%);
	opacity: 0;
  }
  100% {
    transform: translateX(0);
	opacity: 1;
  }
}

.slideInRight {
	animation: slideInRight 1.3s ease 0ms forwards;
}

@keyframes slideInRight {
  0% {
    transform: translateX(0);
	opacity: 1;
  }
  100% {
    transform: translateX(100%);
	opacity: 0;
  }
}

.slideInLeft2 {
	animation: slideInLeft2 1.3s ease 0ms forwards;
}

@keyframes slideInLeft2 {
  0% {
    transform: translateX(0);
	opacity: 1;
  }
  100% {
    transform: translateX(-100%);
	opacity: 0;
  }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeInAndScale {
  from {
    opacity: 0;
    transform: scale(0.8) rotate(-10deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
@keyframes moveIn {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}

/*-------------------Slide In-----------------------*/
.slide-in {
 animation: slide-in 0.7s ease 1000ms forwards;
}
.slide-in-1 {
 animation: slide-in 0.7s ease 200ms backwards;
}
.slide-in-2 {
 animation: slide-in 0.7s ease 400ms backwards;
}
.slide-in-3{
 animation: slide-in 0.7s ease 600ms backwards;
}
.slide-in-4{
 animation: slide-in 0.7s ease 800ms backwards;
}
.slide-in-5{
 animation: slide-in 0.7s ease 1000ms backwards;
}
.slide-in-6{
 animation: slide-in 0.7s ease 1100ms backwards;
}
.slide-in-7 {
 animation: slide-in 0.7s ease 1200ms backwards;
}
.slide-in-8 {
 animation: slide-in 0.7s ease 1300ms backwards;
}
.slide-in-9 {
 animation: slide-in 0.7s ease 1400ms backwards;
}
.slide-in-10 {
 animation: slide-in 0.7s ease 1800ms backwards;
}
.slide-in-11 {
 animation: slide-in 0.7s ease 1900ms backwards;
}
.slide-in-12 {
 animation: slide-in 0.7s ease 2000ms backwards;
}
.slide-in-13 {
 animation: slide-in 0.7s ease 2100ms backwards;
}
.slide-in-14 {
 animation: slide-in 0.7s ease 2200ms backwards;
}
.slide-in-15 {
 animation: slide-in 0.7s ease 2300ms backwards;
}
.slide-in-16 {
 animation: slide-in 0.7s ease 2400ms backwards;
}
.slide-in-17 {
 animation: slide-in 0.7s ease 2500ms backwards;
}
.slide-in-18 {
 animation: slide-in 0.7s ease 2600ms backwards;
}
.slide-in-19 {
 animation: slide-in 0.7s ease 2700ms backwards;
}
@keyframes slide-in {
	from {
	  opacity: 0;
	  -moz-transform: translateX(-100px);
	  transform: translateX(-100px);
	}
	to {
	  opacity: 1;
	  -moz-transform: translate(0px);
	  transform: translate(0px);
	}
}	

/*-----------Slide out-----------------*/
.slide-out-2 {
 animation: slide-out 1.5s ease 0ms forwards;
}
.slide-out-3 {
 animation: slide-out 3s ease 100ms forwards;
}
.slide-out-4 {
 animation: slide-out 2s ease 100ms backwards;
}
@keyframes slide-out {
	from {
	  opacity: 1;
	  transform: translateX(0);
	}
	to {
	  opacity: 0;
	  transform: translateX(-100%);
	}
}	
@keyframes slide-out-3 {
	0% { opacity: 1}
  5% { opacity: 0.95}
  10% { opacity: 0.9}
  15% { opacity: 0.85}
  20% { opacity: 0.8}
  25% { opacity: 0.75}
  30% { opacity: 0.7}
  35% { opacity: 0.65}
  40% { opacity: 0.6}
  45% { opacity: 0.55 }
  50% { opacity: 0.5}
  55% { opacity: 0.45}
  60% { opacity: 0.4 }
  65% { opacity: 0.35}
  70% { opacity: 0.3}
  75% { opacity: 0.25}
  80% { opacity: 0.2}
  85% { opacity: 0.15}
  90% { opacity: 0.1}
  95% { opacity: 0.05 }
  100% { opacity: 0}
}

/*-------------Drop In----------------------*/
.drop-in-0 {
 animation: drop-in 0.9s ease 100ms backwards;
}
.drop-in-1 {
 animation: drop-in 0.7s ease 100ms backwards;
}
.drop-in-2 {
 animation: drop-in 0.7s ease 300ms backwards;
}
.drop-in-3 {
 animation: drop-in 0.7s ease 500ms backwards;
}
.drop-in-4 {
 animation: drop-in 0.7s ease 700ms backwards;
}

.drop-in-5 {
 animation: drop-in 0.7s ease 1100ms backwards;
}
.drop-in-6 {
 animation: drop-in 0.7s ease 1300ms backwards;
}
.drop-in-7 {
 animation: drop-in 0.7s ease 1500ms backwards;
}
.drop-in-8 {
 animation: drop-in 0.7s ease 1700ms backwards;
}
.drop-in-9 {
 animation: drop-in 0.7s ease 1900ms backwards;
}
.drop-in-10 {
 animation: drop-in 0.7s ease 2100ms backwards;
}
.drop-in-11 {
 animation: drop-in 0.7s ease 2300ms backwards;
}
.drop-in-12 {
 animation: drop-in 0.7s ease 2500ms backwards;
}
.drop-in-13 {
 animation: drop-in 0.7s ease 2700ms backwards;
}


.drop-down{
 animation: drop-in 1.4s ease 900ms backwards;
}
.drop-down-2 {
 animation: drop-in 1.4s ease 0ms forwards;
}
.drop-down-3 {
 animation: drop-in 1.4s ease 900ms forwards;
}

@keyframes drop-in {
 from {
  opacity: 0;
  -moz-transform: translateY(-70%);
  transform: translateY(-70%);
 }
 to {
  opacity: 1;
  -moz-transform: translateY(0px);
  transform: translate(0px);
 }
}

/* ---------------drop-up----------------- */
.drop-up {
 animation: drop-up 1.4s ease 100ms backwards;
}
.drop-up-0 {
 animation: drop-up 1.2s ease 200ms backwards;
}
.drop-up-1 {
 animation: drop-up 1.2s ease 400ms backwards;
}
.drop-up-2 {
 animation: drop-up 1.2s ease 600ms backwards;
}
.drop-up-3 {
 animation: drop-up 1.2s ease 800ms backwards;
}
.drop-up-4 {
 animation: drop-up 1.2s ease 1000ms backwards;
}
.drop-up-5 {
 animation: drop-up 1.2s ease 1200ms backwards;
}
@keyframes drop-up {
	 from {
		 opacity: 1;
		-moz-transform: translateY(0px);
		transform: translate(0px);
		}
	 to {
		opacity: 0;
		-moz-transform: translateY(-100%);
		transform: translateY(-100%);
	 }
}

/*------------- Grow ----------------------*/
.grow-init {
	-moz-transform: scale(1);
	transform:scale:(1);
}
.grow-in-1 {
 animation: grow 1.3s ease 100ms backwards;
}
.grow-in-2 {
 animation: grow 1.3s ease 400ms backwards;
}
.grow-in-3 {
 animation: grow 1.3s ease 600ms backwards;
}
.grow-in-4 {
 animation: grow 1.3s ease 800ms backwards;
}
.grow-in-5 {
 animation: grow 1.3s ease 1000ms backwards;
}
.grow-in-6 {
 animation: grow 1.3s ease 1200ms backwards;
}
.grow-in-7 {
 animation: grow 1.3s ease 1400ms backwards;
}
.grow-in-8 {
 animation: grow 1.3s ease 1600ms backwards;
}
.grow-in-9 {
 animation: grow 1.3s ease 1800ms backwards;
}
.grow-in-10 {
 animation: grow 1.3s ease 2000ms backwards;
}
.grow-in-11 {
 animation: grow 1.3s ease 2200ms backwards;
}
.grow-in-12 {
 animation: grow 1.3s ease 2200ms backwards;
}
.grow-in-13 {
 animation: grow 1.3s ease 2400ms backwards;
}
.grow-in-14 {
 animation: grow 1.3s ease 2600ms backwards;
}
.grow-in-15 {
 animation: grow 1.3s ease 2800ms backwards;
}

@-webkit-keyframes grow {
    0% { 
    -moz-transform: scale(0);
    transform: scale(0);
    }
    100% { 	
    -moz-transform: scale(1);
    transform: scale(1);
    }
}

/*------------- popup ----------------------*/
.fade {
	 animation: fade 1.3s ease 100ms backwards;
}
.grow-in {
 animation: grow2 1.3s ease 100ms forwards;
}

@-webkit-keyframes grow2 {
    0% { 
	opacity:0;
    -moz-transform: scale(0);
    transform: scale(0);
    }
    100% { 	
	opacity:1;
    -moz-transform: scale(1);
    transform: scale(1);
    }
}

@-webkit-keyframes fade {
    0% { 
		opacity:0.9;
		-moz-transform: scale(0.9);
		transform: scale(0.9);
    }
    100% { 	
		opacity:0;
		-moz-transform: scale(0);
		transform: scale(0);
    }
}

.grow-out-0 {
 animation: growOut 2.5s ease 250ms forwards;
}
.grow-out-1 {
 animation: growOut 1.5s ease 550ms forwards;
}
.grow-out-2 {
 animation: growOut 1.5s ease 850ms forwards;
}
.grow-out-3 {
 animation: growOut 1.5s ease 1150ms forwards;
}
.grow-out-4 {
 animation: growOut 1.5s ease 1450ms forwards;
}
.grow-out-5 {
 animation: growOut 1.5s ease 1750ms forwards;
}
.grow-out-6 {
 animation: growOut 1.5s ease 2050ms forwards;
}
@-webkit-keyframes growOut {
    0% {    
    -webkit-transform: scale(1);
    transform: scale(1);
    }
    100% {   
    -webkit-transform: scale(0);
    transform: scale(0);
	display:none;
    }
}

.grow-out-7 {
 animation: growSmaller 1.5s ease 100ms forwards;
}
@-webkit-keyframes growSmaller {
    0% {    
		opacity: 1;
		transform:scale(0.7);
		-moz-transform: translateY(0px);
		transform: translateY(0px);	
    }
	20% { 
		transform:scale(0.5);
		-moz-transform: translateY(-50%);
		transform: translateY(-50%);	
    }
    100% {   
		transform:scale(0);
		opacity: 0;
		-moz-transform: translateY(-100%);
		transform: translateY(-100%);
    }
}
/*-------------Rotate--------------------*/
.rotate{
	animation: rotation infinite 15s linear;
	width:48px;
	border-radius:50%;
	box-shadow: rgba(232,185,16,0.07) 0px 1px 2px, rgba(232,185,16,0.07) 0px 2px 4px, rgba(205,92,92,0.09) 0px 4px 8px, rgba(232,185,16,0.07) 0px 8px 16px, rgba(205,92,92,0.09) 0px 16px 32px, rgba(232,185,16,0.07) 0px 16px 32px;
}

@keyframes rotation{
  from{
    transform:rotateY(0deg);
  }
  
  to{
    transform:rotateY(360deg);
  }
}