@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

*{
	padding: 0px;
	margin: 0px;

}


.logotipo{
	font-size: 100px;
}

.mensaje{
	font-family: 'Bebas Neue', cursive;
	font-size: 45px;
}

.container{	
	background: #ffff;
	text-align: center;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.cajapadre{	
	display: grid;
	grid-template-columns: auto auto;
	height: 100%;
	width: 90%	
}

.caja{	
	background-color:  #ffff  ;
	line-height: 150px;	
	font-family: 'Shadows Into Light', cursive;
	text-align: center;		
}

.c1{
	grid-column: 1/4;
}

.c2{
	grid-column:1/4; 

}

.c3{
	grid-column: 1/4;
}

/* ? ----- Cuenta Regresiva ----- */
#cuenta {
	display: grid;
	grid-template-columns: auto auto auto auto ;
	font-family: 'Bebas Neue', cursive;

}

.simply-section {
	background: #ffff;	
	color: #00000;
	text-align: center;
	justify-content: center;
	align-items: center;
	display: flex;
}

.simply-amount {	
	font-size: 50px;
	font-weight: 20;
	display: inline-block;
}

.simply-word {
	font-weight: 300;
	font-size: 30px;
}

@media (max-width: 800px){
	#cuenta {
		display: grid;
		grid-template-columns: auto auto auto;
		text-align: center;
	}

	.simply-section{
		grid-column: 1/4;
		height: 100px;
	}

	.simply-amount {	
		font-size: 30px;
		font-weight: 700;
	}

	.simply-word {
		font-weight: 300;
		font-size: 20px;
	}	

	.logotipo{
		font-size: 73px;
	}

	.mensaje{
		font-size: 40px;
	}

	.txt{
		font-size: 100px;
	}

	.imagen{
		width: 90px;
		height: 90px;	
	}
}

.redes-sociales{
	display: grid;
	grid-template-columns: auto;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn{					
	color: #ffff;
	font-size: 30px;
	min-width: 300px;
	min-height: 60px;		
	font-family: 'Bebas Neue', cursive;	
	border-color: #ffff;
}

.oculta{
	display: none;
	visibility: hidden;
	width: 0%;
	height: 0vh;
	
}
.cajapadre2{
	text-align: center;
	width: 100%;
	height: 100vh;
	visibility: none;	
	display: none;
	position: fixed;
	font-size: 100px;
	background: transparent;
}

.vis{	
	visibility:visible;	
	display: block;	
	justify-content: center;
	align-items: center;	
}

.anima {
	animation: fluido 10s ease-in-out infinite;
	background: linear-gradient(90deg, rgba(238,26,51,1) 0%, rgba(238,33,217,1) 35%, rgba(233,227,107,1) 62%, rgba(0,212,255,1) 100%);
	background-size: 300%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.animacion {
	animation: fluido 10s ease-in-out infinite;
	background-image: linear-gradient(135deg, #cc60d0 0, #d958c1 6.25%, #e451b2 12.5%, #ec4ca2 18.75%, #f24892 25%, #f54882 31.25%, #f64972 37.5%, #f54d62 43.75%, #f25353 50%, #ed5a44 56.25%, #e66136 62.5%, #de6927 68.75%, #d47016 75%, #c97700 81.25%, #bd7e00 87.5%, #b08400 93.75%, #a28a00 100%);
	background-size: 300%;	
}


@keyframes fluido {
	0% { background-position: 0 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0 50% }
}
.txt{
	font-family: 'Bebas Neue', cursive;	
}

.animaa {
	animation: fluido 5s ease-in-out infinite;
	background: linear-gradient(-60deg, #ff6961, #84b6f4, #fcb7af, #b0c2f2, #9bd3ae);
	background-size: 300%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.imagen{
	width: 350px;
	height: 350px;	
}

.btn:hover{
	background-color: transparent; 
	color: #ffff;
}