.div-animation{
    animation-name: cuadrado;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

#idTexto, #idTexto1, #idBoton, #idBoton1{opacity: 0;}
.text-animation, .text-animation-1, .btn-animation{
    animation-name: animationText;
    animation-duration: 2.3s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}.text-animation-1{animation-name: animationText1}
.btn-animation{animation-name: animation-btn;}

@keyframes cuadrado{
	0%{
        transform: scale(0);
    }
    25%, 50%, 100%{
        transform: scale(1.2) rotate(360deg);
        color: #7E5109;
        font-weight: bold;
    }
}

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

@keyframes animationText1{
	0%{transform: translateX(60rem); opacity: 0;}
    100%{ transform: translateX(0); opacity: 1;}
}

@keyframes animation-btn{
	0%{
		opacity: 0;
		transform: translateY(10rem);
		padding: 0;
	}
	100%{
		opacity: 1;
		transform: translateY(0);
		padding: 1rem;
	};
}

@keyframes animation-message{
	0%{
		opacity: 0;
		transform: scale(0);
		border-radius: 50%;
		padding: 0;
	}
	100%{
		opacity: 1;
		transform: scale(1);
		border-radius: 0.6rem;
		padding: 3rem;
	}
}

@keyframes animation-message-1{
	0%{opacity: 1; transform: scale(1);}
	100%{opacity: 0; transform: scale(0);}
}

@keyframes animation-title{
	0%{transform: translateY(6rem) scale(0); opacity: 0;}
	100%{transform: translateY(0) scale(1.1); opacity: 1;}
}

@keyframes animation-sub-title{
	0%{transform: translateY(-6rem); opacity: 0;}
	100%{transform: translateY(0); opacity: 1;}
}

@keyframes animation-opacy{0%{opacity: 0;} 100%{opacity: 1;}}