/* Full width page template - heading banners rendered edge to edge under the
   main navigation, at the same height as the main site homepage banner. */
.full-width-page-banner {
	position: relative;
}

/* Bootstrap gives .navbar a 20px bottom margin - close it so the banner sits
   flush under the nav. Skipped once the nav goes fixed on scroll, since it is
   then out of flow and that margin no longer pushes the banner down. */
#navigation:not(.fixed-nav) + .full-width-page-banner {
	margin-top: -20px;
}

/* Hold the slide at the banner ratio (848 x 290) so it has a definite height
   before the image loads - owl measures the stage on init and on refresh, and
   an auto-height slide leaves it sizing against a collapsed box. */
.full-width-page-banner .is {
	position: relative;
	padding-top: 34.198%;
	overflow: hidden;
}

/* Heading banners are a fixed 848 x 290, so let them keep their own ratio
   rather than cropping them into a set height. The shared .slide-banner-img
   rule caps the height and crops with object-fit, so both are undone here. */
.full-width-page-banner .slide-banner-img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
}

.full-width-page-banner .slide-content-container {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20px 30px;
	background: rgba(0, 0, 0, 0.65);
	text-align: center;
}

.full-width-page-banner .slide-content-container p {
	margin: 0;
	color: #fff;
	font-size: 1.6em;
	letter-spacing: 0.5px;
	font-family: mont-book, sans-serif;
}

.full-width-page-banner .owl-theme .owl-dots {
	position: absolute;
	bottom: 12px;
	width: 100%;
	margin: 0;
}

.full-width-page-banner .owl-theme .owl-dots .owl-dot span {
	background: rgba(255, 255, 255, 0.4);
}

.full-width-page-banner .owl-theme .owl-dots .owl-dot.active span,
.full-width-page-banner .owl-theme .owl-dots .owl-dot:hover span {
	background: #fff;
}