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

.containerformulario { 
  width:600px; 
  margin: auto; 
  display:block; 
  padding:50px 0px 0px 100px;
  box-sizing:border-box;
	
}

.group { 
  position:relative; 
  margin-bottom:10px; 
}

label {
  font-family: 'Lato', sans-serif;
  color:#f44c83; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  /*pointer-events:none;*/
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.formulario__label {
    display: block;
	font-weight: 700;
	/*padding: 40px;*/
	cursor: pointer;
	/*top: 450px;
    left: 50px;*/
}
.formulario__grupo-input {
	position: relative;
}

.formulario__input {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #000000;
}

.formulario__input:focus {
  outline:none;   
}

/* active state */
.formulario__input:focus ~ label, .formulario__input:valid ~ label{
  top:-20px;
  font-size:14px;
  color:#f44c83;
}


/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#f44c83; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
.formulario__input:focus ~ .bar:before, .formulario__input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.formulario__input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#000000; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#000000; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#000000; }
  to 	{ width:0; background:transparent; }
}

.formulario__input-error {
	font-size: 12px;
	margin-bottom: 0;
	display: none;
}

.formulario__input-error-activo {
	display: block;
}

.formulario__validacion-estado {
	position: absolute;
	right: 200px;
	bottom: 20px;
	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 label {
	color: #bb2929;
}

.formulario__grupo-incorrecto .formulario__validacion-estado {
	color: rgba(255,255,255,0.00);
	opacity: 1;
}

.formulario__grupo-incorrecto .formulario__input {
	  font-size:18px;
	  padding:10px 10px 10px 5px;
	  display:block;
	  width:300px;
	  border:none;
	  border-bottom:1px solid #bb2929;	
}

.formulario__grupo-incorrecto .formulario__textarea {
	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%;
	}
}

/*=================BOTON================*/
.button {
  position: relative;
  padding: 1em 1.5em;
  border: none;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  font-size: 18px;
  margin: 1em 0.8em;
  top: 40px;
  right: 95px;
}

.button.type3 {
  color: #f44c83;
}
.button.type3.type3::after, .button.type3.type3::before {
  content: "";
  display: block;
  position: absolute;
  width: 20%;
  height: 20%;
  border: 2px solid;
  transition: all 0.6s ease;
  border-radius: 2px;
}
.button.type3.type3::after {
  bottom: 0;
  right: 0;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: #f44c83;
  border-right-color: #f44c83;
}
.button.type3.type3::before {
  top: 0;
  left: 0;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-top-color: #f44c83;
  border-left-color: #f44c83;
}
.button.type3.type3:hover:after, .button.type3.type3:hover:before {
  border-bottom-color: #f44c83;
  border-right-color: #f44c83;
  border-top-color: #f44c83;
  border-left-color: #f44c83;
  width: 100%;
  height: 100%;
}