@charset "utf-8";
/* CSS Document */

/*Booking hero - the admin-configured background sits behind the whole appointment request form, so
the section grows with the form and only falls back to filling the screen when the form is short.
100vh less the .content padding above it, so a short form lands exactly one screen tall*/

.booking-hero {
	min-height: calc(100vh - 50px);
	padding-top: 100px;
	padding-bottom: 100px;
	max-width: inherit;
}

.booking-hero-content {
	max-width: 800px !important;
}

.booking-hero #alert-container {
	color: #fff;
}

.booking-hero-title {
	text-align: center;
	color: #fff;
	margin-bottom: 5px;
	font-size: 52px;
	line-height: 65px;
}

.booking-hero-sub-title {
	text-align: center;
	color: #fff;
	margin-top: 10px;
	margin-bottom: 5px;
	font-size: 30px;
	line-height: 38px;
}

.booking-hero-text {
	color: #fff;
	text-align: center;
	margin-top: 20px;
}

#book-appointment-form {
	background: #fff;
	margin-top: 20px;
	box-shadow: 0 12px 28px rgba(16,42,82,.12), 0 4px 8px rgba(16,42,82,.06);
	border: 1px solid #ddd;
	border-radius: 12px;
}

/*The form's footer is the bottom of the same card, so it follows the card's corners instead of
rounding on its own*/

#book-appointment-form footer {
	background: #fff;
	border-top: none;
	border-radius: 0px 0px 12px 12px;
}

#book-appointment-form fieldset {
	background: none;
}

/*The title is sized for a desktop hero - on a phone it has to come down or it takes the screen
before the form does*/

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

	.booking-hero {
		padding-top: 80px;
		padding-bottom: 60px;
	}

	.booking-hero-title {
		font-size: 34px;
		line-height: 42px;
	}

	.booking-hero-sub-title {
		font-size: 22px;
		line-height: 30px;
	}
}