* {

	box-sizing: border-box;

	font-family: 'Nunito', sans-serif;

}

body {

	font-family: 'Nunito', sans-serif;

	background: #fff;

}



.header-forms{

	margin-top: 10px;

    text-align: center;

}



main {

	max-width: 800px;

	width: 90%;

	margin: auto;

	padding: 40px;

	margin-top: 143px;

}

.formulario {

	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 20px;

	margin-top: 45px;

}

.formulario__label {

	display: block;

	font-weight: 700;

	padding: 10px;

	cursor: pointer;

}

.formulario__grupo-input {

	position: relative;

}

.formulario__input {

	width: 100%;

	background: #fff;

	border: 1px solid ;

	border-radius: 3px;

	height: 45px;

	line-height: 45px;

	padding: 0 40px 0 10px;

	transition: .3s ease all;

}

.formulario__input:focus {

	border: 3px solid #0075FF;

	outline: none;

	box-shadow: 3px 0px 30px rgba(163,163,163, 0.4);

}

.formulario__input-error {

	font-size: 12px;

	margin-bottom: 0;

	display: none;

}

.formulario__input-error-activo {

	display: block;

}

.formulario__validacion-estado {

	position: absolute;

	right: 10px;

	bottom: 15px;

	z-index: 100;

	font-size: 16px;

	opacity: 0;

}

.formulario__checkbox {

	margin-right: 10px;

}

.formulario__grupo-terminos, 

.formulario__mensaje,

.formulario__grupo-btn-enviar {

	grid-column: span 2;

}

.formulario__mensaje {

	height: 45px;

	line-height: 45px;

	background: #F66060;

	padding: 0 15px;

	border-radius: 3px;

	display: none;

}

.formulario__mensaje-activo {

	display: block;

}

.formulario__mensaje p {

	margin: 0;

}

.formulario__grupo-btn-enviar {

	display: flex;

	flex-direction: column;

	align-items: center;

}

.formulario__btn {

	height: 45px;

	line-height: 45px;

	width: 30%;

	background: #000;

	color: #fff;

	font-weight: bold;

	border: none;

	border-radius: 3px;

	cursor: pointer;

	transition: .1s ease all;

}

.formulario__btn:hover {

	box-shadow: 3px 0px 30px rgba(163,163,163, 1);

}

.formulario__mensaje-exito {

	font-size: 14px;

	color: #119200;

	display: none;

}

.formulario__mensaje-exito-activo {

	display: block;

}

/* ----- -----  Estilos para Validacion ----- ----- */

.formulario__grupo-correcto .formulario__validacion-estado {

	color: #1ed12d;

	opacity: 1;

}

.formulario__grupo-incorrecto .formulario__label {

	color: #bb2929;

}

.formulario__grupo-incorrecto .formulario__validacion-estado {

	color: #bb2929;

	opacity: 1;

}

.formulario__grupo-incorrecto .formulario__input {

	border: 3px solid #bb2929;

}

.barra{
    background-color: #f7ef00;
    height: 10px;
    margin-top: 100px;
}

/* ----- -----  Mediaqueries ----- ----- */

@media screen and (max-width: 800px) {



    /*Ocultar telefono en Forms*/



	.header-forms{

		margin-top: -135px;

	}



	.formulario {

		grid-template-columns: 1fr;

	}



	.formulario__grupo-terminos, 

	.formulario__mensaje,

	.formulario__grupo-btn-enviar {

		grid-column: 1;

	}



	.formulario__btn {

		width: 100%;

	}

}