/*-------PALETA DE COLORES-----------
rgb(244, 246, 255);
rgb(243, 198, 35)
rgb(18, 118, 129)
rgb(16, 55, 92)
-----------------------------------*/

@font-face {
  font-family: 'cab'; /* Elige un nombre para tu fuente */
  src: url('../fonts/cabin.ttf') format('truetype'); /* Ajusta la ruta a la ubicación de tu fuente */
}

body{
	margin:0;
}
html{
	background-color: white;
}
p{
	font-family: 'cab';
}
.contenedor_inicial{
	position:relative;
	width:100%;
	height: 100vh;
	background-color: rgb(244, 246, 255);
}

#id_logo_formulario{
	width: 350px;
	height: auto;
	margin-bottom:20px;
}

.c_form{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-align: center;
	display:block;
	width:400px;
	height: auto;
}

.c_f_login{
	text-align: center;
	Color:black;
	background-color: white;
	border-radius: 0.5rem;
	padding:20px;
}

#t_f_login{
	font-size: 2em;
	margin:0;
}

.c_input{
	display: flex;
	flex-direction: column;
	margin:10px;
	gap: 20px;
}

.submit{
	padding:10px;
	font-size: 1.4em;
	border-radius: 0.5rem;
	background-color: black;
	color:white;
}

.submit:hover{
	background-color: #ffa800;
	border-color: #ffa800;
}

input{
	padding:10px;
	font-size: 1.4em;
	border-radius: 0.5rem;
	border-color:rgb(204, 206, 215);
	border-style: solid;
}

/*--------ANIMACION---------------*/

#id_animacion_loader{
	width: 100%;
	height: 100vh;
	display:none;
}

.capa_traslucida{
	background-color: white;
	filter: blur(5px);
	opacity: 0.9;
	width:100%;
	height: 100vh;
	z-index:5;
}


#id_logo_animacion{
	width:100%;
	height:60%;
	width:auto;
	animation-name: rotar, fadeAnimation;
	animation-duration: 4s,0.5s;
  	animation-timing-function: linear;
  	animation-iteration-count: infinite,1;
}
#c_l_a{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	text-align: center;
}


@keyframes rotar {
  0% {
    transform: rotate(0deg);
  }
  25% {
  	transform: rotate(0deg);
  }
  50%{
  	transform: rotate(180deg);
  }
  75%{
  	transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeAnimation {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0;
    transform: scale(0.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media screen and (min-width: 200px) and (max-width: 1019px){
	#id_logo_animacion{
		width:80%;
		height: auto;
	}
}