@charset "utf-8";

.contact-page {
	padding-top: 40px;
	padding-bottom: 60px;
}

.contact-card {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 45px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
	background: #fff;
}

.contact-card-row {
	margin-left: 0;
	margin-right: 0;
	display: flex;
	flex-wrap: wrap;
}

.contact-card-info,
.contact-card-form {
	padding: 45px 40px;
}

.contact-card-info {
	color: #fff;
}

.contact-card-heading {
	margin-top: 0;
	margin-bottom: 25px;
	font-size: 28px;
	font-weight: 700;
	color: #fff;
}

.contact-card-details {
	list-style: none;
	margin: 0 0 30px 0;
	padding: 0;
}

.contact-detail-item {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
	color: #fff;
}

.contact-detail-item address {
	display: inline;
	font-style: normal;
	margin: 0;
}

.contact-detail-item a {
	color: #fff;
	text-decoration: none;
}

.contact-detail-item a:hover {
	text-decoration: underline;
}

.contact-detail-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-width: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,0.18);
	margin-right: 14px;
}

.contact-card-social {
	margin-bottom: 30px;
}

.contact-card-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,0.18);
	margin-right: 10px;
	margin-bottom: 10px;
	color: #fff;
	transition: background 0.2s ease;
}

.contact-card-social a:hover {
	background: rgba(255,255,255,0.32);
}

.contact-card-actions .btn {
	margin-right: 10px;
	margin-bottom: 10px;
}

.btn-outline-light {
	background: transparent;
	border: 2px solid rgba(255,255,255,0.7);
	color: #fff;
	border-radius: 6px;
	transition: all 0.2s ease;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
	background: #fff;
	color: #333;
	border-color: #fff;
}

.contact-card-form-heading {
	margin-top: 0;
	margin-bottom: 8px;
	font-size: 24px;
	font-weight: 700;
}

.contact-card-form-intro {
	margin-top: 0;
	margin-bottom: 25px;
	color: #767676;
}

.contact-form-alert:not(:empty) {
	margin-bottom: 20px;
}

.contact-form-legal p {
	font-size: 13px;
	color: #999;
}

.contact-card-map {
	margin-top: 30px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.25);
}

#contact-map-container iframe {
	display: block;
	width: 100%;
}

@media (max-width: 767px) {
	.contact-card-info,
	.contact-card-form {
		padding: 30px 25px;
	}
}

/*Page heading and subtitle - the pair set on the Contact Page tab of the website settings,
sitting above the card and directly on the page background when there is one*/

.contact-page-heading {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 30px;
	font-weight: 700;
}

.contact-page-subtitle {
	margin-top: 0;
	margin-bottom: 30px;
	font-size: 16px;
	color: #767676;
}

/*Page background - image, solid colour, self-hosted video or an embedded YouTube/Vimeo clip,
set on the Contact Page tab of the website settings. Video and embed keep the background image
behind them as their poster frame, so the page still reads while the media loads*/

.contact-page-has-bg {
	position: relative;
	padding-top: 50px;
	padding-bottom: 80px;
	overflow: hidden;
	background-position: center center;
	background-size: cover;
	background-attachment: scroll;
}

.contact-page-media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	border: 0;
	pointer-events: none;
}

video.contact-page-media {
	object-fit: cover;
}

.contact-page-embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*The player keeps its own 16:9 box, so it is oversized on whichever axis falls short of the page*/
	width: 100vw;
	height: 56.25vw;
	min-width: 177.78vh;
	min-height: 100%;
	border: 0;
	pointer-events: none;
}

/*Backgrounds are decoration only - nothing the player would normally draw over the video
may ever show. The native controls are hidden outright, and the YouTube/Vimeo iframe is
oversized past the page so the player's own title bar and control bar fall outside of it*/

video.contact-page-media::-webkit-media-controls,
video.contact-page-media::-webkit-media-controls-enclosure,
video.contact-page-media::-webkit-media-controls-panel,
video.contact-page-media::-webkit-media-controls-start-playback-button,
video.contact-page-media::-webkit-media-controls-overlay-play-button {
	display: none !important;
	-webkit-appearance: none;
	opacity: 0;
}

.contact-page-embed-youtube iframe {
	/*A bit over 1/8th of the player height is chrome at the top and again at the bottom*/
	transform: translate(-50%, -50%) scale(1.4);
}

.contact-page-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(12,20,32,.72) 0%, rgba(12,20,32,.55) 45%, rgba(12,20,32,.82) 100%);
}

.contact-page-inner {
	position: relative;
	z-index: 2;
}

/*The contact card is a white card of its own - only the heading and subtitle sit directly
on the background*/

.contact-page-has-bg .contact-page-heading {
	color: #fff;
	text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.contact-page-has-bg .contact-page-subtitle {
	color: rgba(255,255,255,.88);
	text-shadow: 0 1px 8px rgba(0,0,0,.4);
}