/*  Maquetación y otros estilos del formulario  */
 

/*  https://www.lawebera.es/como-hacer/ejemplos-html-xhml/maquetacion-formulario-xhtml-y-css.php   */


.formulario {
	width: 100%;
	background-image: url(https://www.pavimentosdandi.es/img/contacto/pergola.jpg);
	margin: 0;
	padding: 50px;
	
	background-size: 100vw 100vh;
	background-attachment: fixed;
	font-family: monospace;
}
 
.formulario label{
	font-family: sans-serif; 
	font-weight: normal;
	float: left;
	text-align: left;
	margin-left: 4px; /*Ancho de la columna*/
	width: 320px; /*Ancho de la etiqueta. Para que se genere un margen derecho, esta medida debe ser menor que el margen izquierdo.*/
	color: white;
}
 
.formulario input[type="text"]{ /*ancho de las cajas de texto*/
	width: 350px;
}

.formulario input[type="tel"]{ /*ancho de las cajas de texto*/
	width: 350px;
}
 
.formulario input[type="email"]{ /*ancho de las cajas de texto*/
	width: 350px;
}

.formulario textarea{
	width: 350px;
	height: 150px;
	font: normal 14px arial, helvetica, sans-serif;
}

form {
	width: 390px;
	margin: auto;
	background: rgba(0,0,0,0.4);
	padding: 10px 20px;
	box-sizing: border-box;
	margin-top: 20px;
	border-radius: 7px;
}

form h2 {
	color: #fff;
	text-align: center;
	margin: 0;
	fonrt-size: 30px;
	margin-bottom: 20px;
}

#boton {
	background: #31384A;
	color: #fff;
	padding: 20px;
	width:350px;
}

#boton:hover {
	cursor: pointer;
}


@media (max-width: 480px){
	form{
		width: 100%;
	}
	
	.formulario input[type="text"]{ 
		width: 100%;
	}
	.formulario input[type="tel"]{ 
		width: 100%;
	}
	
	.formulario input[type="email"]{ 
		width: 100%;
	}

	#boton {
		width: 100%;
	}

	.formulario textarea{
		width: 100%;
	}
	
	.formulario label{
		width: 100%;
	}
	
}