html,
body {
	margin:		0;
	padding:	0;
	min-height:	100vh;
	font-family:	sans-serif;
	font-size:		14px;
	background:		#eee url('/images/background_texture2x.jpg') repeat 50% 0;
}
	body {
		display:	-webkit-box;
		display:	-webkit-flex;
		display:	-ms-flexbox;
		display:	flex;
		-webkit-box-orient:			vertical;
		-webkit-box-direction:		normal;
		-webkit-flex-direction:		column;
		-ms-flex-direction:			column;
		flex-direction:				column;
		-webkit-box-pack:			center;
		-webkit-justify-content:	center;
		-ms-flex-pack:				center;
		justify-content:			center;
	}


h1 {
	margin:		0 0 0.3em 0;
	font-weight:	normal;
	font-size:		1.4em;
	color:			#d0415c;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"] {
	display:	block;
	box-sizing:	border-box;
	width:		100%;
	padding:	0.4em 0.5em;
	font-size:	1em;
	border:		solid 1px #ddd;
	border-radius:		2px;
	box-shadow:			none;
	-webkit-appearance:	none;
}
	input[type=number]::-webkit-inner-spin-button,
	input[type=number]::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

label,
.label {
	color:		#777;
	font-size:	0.9em;
}
	.input .input label {
		color:	#999;
	}

	/* Error labels */
	.form-feedback,
	label.form-feedback {
		font-size:	1em;
		padding:	0.35em 0.6em 0.3em 0.6em;
		color:		#fff;
		background:	#e6b248;
	}

		label.form-feedback,
		.label.form-feedback {
			position:	relative;
			opacity:	1;
			top:		auto;
			left:		auto;
			right:		auto;
			z-index:	5;
			margin:		0;
			font-size:	0.85em;
			pointer-events:	auto;
			cursor:			default;
		}
			label.form-feedback:before,
			.label.form-feedback:before {
				content:	"";
				display:	block;
				position:	absolute;
				bottom:		100%;
				left:		0.6em;
				border:		solid 0.4em transparent;
				border-bottom-color:	#e6b248;
			}

			.label.form-feedback {
				top:	0.6em;
			}

	p.form-feedback {
		background:	#fcfcfc;
		color:		#444;
		border:		solid 1px #ccc;
		padding:	0.4em 0.9em;
		font-size:	0.9em;
		text-align:	center;
	}
		p.form-feedback--error {
			border-color:		#fec904;
			background-color:	#fcf4d6;
		}

button,
.cta {
	display:	inline-block;
	margin:		1.2em 0 0 0;
	border:		solid #d0415c 1px;
	padding:	0.8em 1.2em 0.9em 1.2em;
	background:		#d0415c;
	color:			#fff;
	font-size:		1em;
	font-weight:	bold;
	text-transform:	uppercase;
	border-radius:	2px;
	cursor:			pointer;
	transition:		background-color 0.2s, color 0.2s;
	text-decoration:	none;
}
	button:hover,
	button:focus,
	.cta:hover,
	.cta:focus {
		background:	#fff;
		color:		#d0415c;
	}

form,
section {
	margin:		0 auto;
	padding:	1.2em;
	max-width:	500px;
}

	.inputs {
		margin:		0;
		padding:	0;
		list-style:	none;
	}
		.input {
		}
			.input + .input {
				margin-top:	0.6em;
			}

			.input .inputs {
				margin-top:		0.6em;
				margin-bottom:	-0.6em;
				letter-spacing:	0.9em;
			}

				.input .input {
					display:		inline-block;
					margin:			0 0 0.6em 0;
					letter-spacing:	0;
					vertical-align:	top;
				}

	@media (min-width: 450px) {
		.inputs {
			letter-spacing:	-0.285em;
		}

			.input {
				letter-spacing:	0;
			}

				.input + .input--last-name {
					margin-top:	0;
				}
				.input--first-name,
				.input--last-name,
				.input--phone,
				.input--postcode {
					display:	inline-block;
					width:		48%;
					vertical-align:	top;
				}
					.input--last-name,
					.input--postcode {
						margin-left:	4%;
					}

					.input--phone {
						width:	63%;
					}
					.input--postcode {
						width:	33%;
					}
	}

.form-actions {
	text-align:	right;
}

.terms {
	font-size:	0.8em;
	max-width:	calc(100% - 17em);
	color: 		#777;
}

@media (min-width: 550px) {
	.form-actions {
		float:	right;
	}

	.terms {
		margin:			0;
		padding-top:	1.2em;
		max-width:		calc(100% - 17em);
		float:			left;
	}
}