* {
	box-sizing: border-box;
}

body {
	font-family: 'Roboto', sans-serif;
	background: #E5E5E5;
}

main {
	max-width: 500px;
	width: 90%;
	margin: auto;
	padding: 40px;
}

h2 {
	text-align: center;
	color: #0585c3;
	/*color: rgba(0,0,0,0.5);*/
  }

.formulario {
 display: grid;
 grid-template-columns: 1fr;
 grid-gap: 20px;
}

.formulario__label {
 display: block;
 font-weight: 700;
 padding: 10px;
 cursor: pointer;
}

.formulario__grupo-input {
 position: relative;
}

.formulario__input {
 width: 100%;
 background: #fff;
 border: 3px solid transparent;
 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 1;
}

.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: 100%;
 background: #000;
 color: #fff;
 font-weight: bold;
 border: none;
 border-radius: 3px;
 cursor: pointer;
 transition: .1s ease all;
}

.formulario__btn-borrar {
 height: 45px;
 line-height: 45px;
 width: 100%;
 background: crimson;
 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: 15px;
 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;
}

/* ----- -----  Mediaqueries ----- ----- */
@media screen and (max-width: 800px) {
 .formulario {
  grid-template-columns: 1fr;
 }
 .formulario__grupo-terminos,
.formulario__mensaje,
.formulario__grupo-btn-enviar {
 grid-column: 1;
}
 .formulario__btn {
  width: 100%;
 }
}

/* ----- -----  Estilos  ----- ----- */
.centro a {
	display: flex;
	justify-content: center;
	color: #0585c3;
}
   
p.form-link {
	 color: #e60000;
}

.ingresa {
	color: #0066ff;
   }