/* inicio estilos ANIMACIÓN INGENIOWEBMX */
@import url('https://fonts.googleapis.com/css?family=Anton|Roboto');


.word {
	font-family: 'Anton', sans-serif;
	perspective: 1000px; 
}

.word span {
	cursor: pointer;
	display: inline-block;
	font-size: 100px;
	user-select: none;
	line-height: .8;
}

.word span:nth-child(1).active {
	animation: balance 0.6s ease-out;
	transform-origin: bottom left;
}

@keyframes balance {
	0%, 100% {
		transform: rotate(0deg);
	}
	
	30%, 60% {
		transform: rotate(-45deg);
	}
}

.word span:nth-child(2).active {
	animation: shrinkjump 0.7s ease-in-out;
	transform-origin: bottom center;
}

@keyframes shrinkjump {
	10%, 35% {
		transform: scale(2, .2) translate(0, 0);
	}
	
	45%, 50% {
		transform: scale(1) translate(0, -150px);
	}
	
	80% {
		transform: scale(1) translate(0, 0);
	}
	
}

.word span:nth-child(3).active {
	animation: falling 1s ease-out;
	transform-origin: bottom center;
}

@keyframes falling {
	12% {
		transform: rotateX(240deg);
	}
	
	24% {
		transform: rotateX(150deg);
	}
	
	36% {
		transform: rotateX(200deg);
	}
	
	48% {
		transform: rotateX(175deg);
	}
	
	60%, 85% {
		transform: rotateX(180deg);
	}
	
	100% {
		transform: rotateX(0deg);
	}
}

.word span:nth-child(4).active {
	animation: rotate 0.6s ease-out;
}

@keyframes rotate {
	20%, 80% {
		transform: rotateY(180deg);
	}
	
	100% {
		transform: rotateY(360deg);
	}
}

.word span:nth-child(5).active {
	animation: toplong 0.7s linear;
}




.word span:nth-child(6).active {
	animation: balance 1s ease-out;
	transform-origin: bottom left;
}

@keyframes balance {
	0%, 100% {
		transform: rotate(0deg);
	}
	
	30%, 60% {
		transform: rotate(-45deg);
	}
}

.word span:nth-child(7).active {
	animation: shrinkjump 0.8s ease-in-out;
	transform-origin: bottom center;
}

@keyframes shrinkjump {
	10%, 35% {
		transform: scale(2, .2) translate(0, 0);
	}
	
	45%, 50% {
		transform: scale(1) translate(0, -150px);
	}
	
	80% {
		transform: scale(1) translate(0, 0);
	}
	
}

.word span:nth-child(8).active {
	animation: falling 0.9s ease-out;
	transform-origin: bottom center;
}

@keyframes falling {
	12% {
		transform: rotateX(240deg);
	}
	
	24% {
		transform: rotateX(150deg);
	}
	
	36% {
		transform: rotateX(200deg);
	}
	
	48% {
		transform: rotateX(175deg);
	}
	
	60%, 85% {
		transform: rotateX(180deg);
	}
	
	100% {
		transform: rotateX(0deg);
	}
}

.word span:nth-child(9).active {
	animation: rotate 0.6s ease-out;
}

@keyframes rotate {
	20%, 80% {
		transform: rotateY(180deg);
	}
	
	100% {
		transform: rotateY(360deg);
	}
}

.word span:nth-child(10).active {
	animation: toplong 1s linear;
}


.word span:nth-child(11).active {
	animation: toplong 0.9s linear;
}


.word span:nth-child(12).active {
	animation: balance 0.6s ease-out;
	transform-origin: bottom left;
}

@keyframes balance {
	0%, 100% {
		transform: rotate(0deg);
	}
	
	30%, 60% {
		transform: rotate(-45deg);
	}
}




@keyframes toplong {
	10%, 40% {
		transform: translateY(-48vh) scaleY(1);
	}
	
	90% {
		transform: translateY(-48vh) scaleY(4);
	}
}
/* fin estilos ANIMACIÓN INGENIOWEBMX */

/* inicio estilos botón MAS INFORMACION */
.btn {
    font-size: 17px;
    background: transparent;
    border: none;
    padding: 1em 1.5em;
    color: #000000;
    text-transform: uppercase;
    position: relative;
    transition: 0.5s ease;
    cursor: pointer;
  }
  
  .btn::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: #ffc506;
    transition: 0.5s ease;
  }
  
  .btn:hover {
    color: #1e1e2b;
    transition-delay: 0.5s;
  }
  
  .btn:hover::before {
    width: 100%;
  }
  
  .btn::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0;
    width: 100%;
    background-color: #ffc506;
    transition: 0.4s ease;
    z-index: -1;
  }
  
  .btn:hover::after {
    height: 100%;
    transition-delay: 0.4s;
    color: aliceblue;
  }
  /* FIN estilos botón MAS INFORMACION */

  /* inicio estilos ondas circulares */


  
.circle{
    position: absolute;
    border-radius: 50%;
    background: white;
    animation: ripple 15s infinite;
    box-shadow: 0px 0px 1px 0px #508fb9;
  }
  
  .small{
    width: 200px;
    height: 200px;
    left: -100px;
    bottom: -100px;
  }
  
  .medium{
    width: 400px;
    height: 400px;
    left: -200px;
    bottom: -200px;
  }
  
  .large{
    width: 600px;
    height: 600px;
    left: -300px;
    bottom: -300px;
  }
  
  .xlarge{
    width: 800px;
    height: 800px;
    left: -400px;
    bottom: -400px;
  }
  
  .xxlarge{
    width: 1000px;
    height: 1000px;
    left: -500px;
    bottom: -500px;
  }
  
  .shade1{
    opacity: 0.2;
  }
  .shade2{
    opacity: 0.5;
  }
  
  .shade3{
    opacity: 0.7;
  }
  
  .shade4{
    opacity: 0.8;
  }
  
  .shade5{
    opacity: 0.9;
  }
  
  @keyframes ripple{
    0%{
      transform: scale(0.8);
    }
    
    50%{
      transform: scale(1.2);
    }
    
    100%{
      transform: scale(0.8);
    }
  }

  @media (max-width: 991.98px) {
	.position-relative p {
		color: #fff;
		font-weight: bold;
	}
  


	.circle{
		position: absolute;
		border-radius: 30%;
		background: white;
		animation: ripple 15s infinite;
		box-shadow: 0px 0px 1px 0px #508fb9;
	  }
	  
	  .small{
		width: 200px;
		height: 200px;
		left: -100px;
		bottom: -100px;
	  }
	  
	  .medium{
		width: 400px;
		height: 400px;
		left: -200px;
		bottom: -200px;
	  }
	  
	  .large{
		width: 600px;
		height: 600px;
		left: -300px;
		bottom: -300px;
	  }
	  
	  .xlarge{
		width: 800px;
		height: 800px;
		left: -400px;
		bottom: -400px;
	  }
	  
	  .xxlarge{
		width: 1000px;
		height: 1000px;
		left: -500px;
		bottom: -500px;
	  }
	  
	  .shade1{
		opacity: 0.1;
	  }
	  .shade2{
		opacity: 0.5;
	  }
	  
	  .shade3{
		opacity: 0.7;
	  }
	  
	  .shade4{
		opacity: 0.8;
	  }
	  
	  .shade5{
		opacity: 0.9;
	  }
	
  }