@charset "utf-8";

.financing-page {
	padding-top: 20px;
	padding-bottom: 60px;
}

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

.financing-panel {
	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);
	border: none;
}

.financing-panel .panel-body {
	padding: 40px;
}

.financing-step-intro {
	color: #767676;
	margin-bottom: 25px;
}

.financing-section-heading {
	margin-top: 25px;
	margin-bottom: 15px;
	padding-top: 15px;
	border-top: 1px solid #eee;
	font-size: 17px;
	font-weight: 700;
}

.financing-step2-banner {
	margin-bottom: 25px;
}

.financing-new-application {
	color: #767676;
	margin-bottom: 25px;
	font-size: 13px;
}

@media (max-width: 767px) {
	.financing-panel .panel-body {
		padding: 25px 20px;
	}
}

/*Page background - image, solid colour, self-hosted video or an embedded YouTube/Vimeo clip,
set on the Financing 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*/

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

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

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

.financing-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.financing-page-media::-webkit-media-controls,
video.financing-page-media::-webkit-media-controls-enclosure,
video.financing-page-media::-webkit-media-controls-panel,
video.financing-page-media::-webkit-media-controls-start-playback-button,
video.financing-page-media::-webkit-media-controls-overlay-play-button {
	display: none !important;
	-webkit-appearance: none;
	opacity: 0;
}

.financing-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);
}

.financing-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%);
}

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

/*The form panels are white cards of their own - only the heading sits directly on the background*/

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