:root{
	--colorTextos: #49454567;
}

*,::before,::after{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


body{
background: #FC5C7D;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6A82FB, #FC5C7D);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6A82FB, #FC5C7D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

width: 100%;
/*height: 650px;*/
display: flex;
justify-content: center; /*alinea de manera horizontal*/
align-items: center;   /*alinea de manera vertical*/
}

h1{
	text-align: center;
	margin:0px 20px 0px 20px;
	font-weight: 900;
}

form{
	background: #fff;
	width: 30%;
	padding: 10px 5px;
	margin: 10px;
	border-radius: 25px;
	box-shadow: 0 0 6px 0 rgba(255, 255, 255, 0.8);
}

.form{
	width: 100%;
	margin: auto;
}

form .grupo{
	position: relative;
	margin: 15px;
}

input, textarea{
	background: none;
	color: #c6c6c6;
	font-size: 15px;
	padding: 10px 10px 10px 5px;
	display: block;
	width: 100%;
	border:none;
	border-bottom: 1px solid var(--colorTextos);
	resize: none;
}

select{

	background: none;
	color: rgb(94,93,93);
	font-size: 15px;
	padding: 10px 10px 10px 5px;
	display: block;
	width: 80%;
	border:none;
	border-bottom: 1px solid var(--colorTextos);
	resize: none;
}



input:focus,textarea:focus,select:focus{ /*esta propiedad es cuando no esta selccionada*/
	outline:none ;
	color: rgb(94,93,93);
}

input:focus~label,
input:valid~label,
textarea:focus~label,textarea:valid~label{ /*esta propiedad cuando no esta selccionada*/
	position: absolute;
	top: -14px;
	font-size: 12px;
	color: #808080;
}


.titulo-principal {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 25px;
  color: #333333;
  line-height: 1.2;
  text-align: center;
  padding-bottom: 25px;
}

  .subtitulos {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  color: #454545;
  line-height: 1.2;
  text-align: left;
  padding-top: 10px;
  padding-left: 20px;
}



label{
	color: var(--colorTextos);
	font-size: 16px;
	position: absolute;
	left: 5px;
	/*top: 10px;*/
	transition: 0.5s ease all;
	pointer-events: none;
}


input:focus~.barra::before,
textarea:focus~.barra::before{
	width: 100%;
}

.barra{
	position: relative;
	display: block;
	width: 100%;
}



.barra::before{
	content: '';
	height: 2px;
	width: 0;
	bottom: 0;
	position: absolute;
	background: linear-gradient(to right,#6A82FB, #FC5C7D);
	transition: 0.3s ease all;
	left: 0%;
}



.warnings{
	width: 200px;
	text-align: center;
	margin: auto;
	color: #B06AB3;
	padding-top: 20px;
}







button{
background: #FC5C7D;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6A82FB, #FC5C7D);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6A82FB, #FC5C7D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

display: block;
width: 75%;
height: 40px;
border: none;
color: #fff;
border-radius: 4px;
font-size: 16px;
margin: auto;
cursor: pointer;
}


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

	form{
		width: 35%;
		}
	}



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

	form{
		width: 45%;
		}
	}


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

	form{
		width: 55%;
		}
	}


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

	form{
		width: 95%;
		}
	}


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

		form{
			width: 99%;
			}
		}