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

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


#simulador {
  background-color: #e8e8e8;
}

#title1 {
	color: #ffffff;
	font-size: max(1.9rem, 1.9vw);
	letter-spacing: 0.05em;
	font-family: h1;
	animation-name: afl;
	animation-delay: 250ms;
	animation-duration: 0.6s;           /* NECESARIO */
	animation-fill-mode: both;         /* Mantiene el estado final */
	animation-timing-function: ease;   /* Opcional pero recomendable */
}

#title2 {
	color: #ffffff;
	text-align: left;
	font-size: 6rem;
	font-family: AvenirLTStd-Black;
	text-transform: uppercase;
	animation-name: afr;
	animation-duration: 0.6s;           /* NECESARIO */
	animation-fill-mode: both;
	animation-timing-function: ease;
}


#title3 {
  color: var(--content-primary); /* Asumiendo que "_content_primary" es una variable CSS */
  text-align: center;
  animation-name: afl;
  animation-duration: 0.6s;       /* Debes definir duración o no se ejecutará */
  animation-fill-mode: both;
  animation-timing-function: ease;
}

#gresmanc
{
	background-color: #fff8f2;
}


#us_form_register {
  text-align: left;
}


#us_form_register .w-form-row {
  padding-left: 0;
  padding-right: 0;
}


/* Laptops (ejemplo: >= 1024px) */
@media (min-width: 1024px) {
  #title1 {
    color: #ffffff;
    font-size: max(1.9rem, 1.9vw);
    letter-spacing: 0.05em;
  }
  
  #title2 {
     font-size: 5rem;
   }
}

/* Tablets (ejemplo: 768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
	#title1 {
		color: #ffffff;
		font-size: max(1.7rem, 1.7vw);
		letter-spacing: 0.05em;
  	}
  
	#title2 {
		font-size: 4rem;
	}
  }
}

/* Móviles (ejemplo: < 768px) */
@media (max-width: 767px) {
	#title1 {
		color: #ffffff;
		font-size: max(1.7rem, 1.7vw);
		letter-spacing: 0.05em;
  	}
  
	#title2 {
	  font-size: 3rem;
	}
}