/* Homepage hero carousel */

/* Full-bleed up to the design width, centred on the viewport regardless of
   the 1170px #container it lives inside. */
#bgimage {
	overflow-x: hidden;
}

.heroCarousel {
	position: relative;
	width: 100vw;
	max-width: 1920px;
	margin-left: calc(50% - min(50vw, 960px));
	background: #efece6;
}

.heroCarousel__viewport {
	position: relative;
	width: 100%;
	/* 2078 x 782 - the aspect ratio of the widest slide artwork, so nothing
	   in it gets cropped. Percentage padding keeps this working everywhere. */
	padding-bottom: 37.63%;
	overflow: hidden;
}

.heroCarousel__slides {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.heroCarousel__slide {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .9s ease-in-out, visibility 0s linear .9s;
}

.heroCarousel__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .9s ease-in-out, visibility 0s;
}

.heroCarousel__slide a,
.heroCarousel__slide img {
	display: block;
	width: 100%;
	height: 100%;
}

.heroCarousel__slide img {
	object-fit: cover;
	object-position: center;
}

/* Arrows */
.heroCarousel__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .75);
	color: #42413a;
	font-size: 22px;
	line-height: 48px;
	text-align: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity .25s ease, background .25s ease;
}

.heroCarousel:hover .heroCarousel__nav,
.heroCarousel__nav:focus {
	opacity: 1;
}

.heroCarousel__nav:hover {
	background: #fff;
}

.heroCarousel__nav--prev {
	left: 20px;
}

.heroCarousel__nav--next {
	right: 20px;
}

/* Dots */
/* Bottom-right: every slide keeps its artwork and copy left-of-centre, and
   the 50 Years banner runs a line of text along the bottom middle. */
.heroCarousel__dots {
	position: absolute;
	right: 24px;
	bottom: 18px;
	z-index: 2;
	line-height: 1;
}

.heroCarousel__dot {
	display: inline-block;
	width: 11px;
	height: 11px;
	margin: 0 5px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(66, 65, 58, .35);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
	cursor: pointer;
	transition: background .25s ease;
}

.heroCarousel__dot:hover {
	background: rgba(66, 65, 58, .6);
}

.heroCarousel__dot.is-active {
	background: #23a5a4;
}

/* Screen-reader-only text for the arrow/dot labels */
.heroCarousel__srOnly {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media screen and (max-width: 800px) {
	.heroCarousel__nav {
		display: none;
	}

	.heroCarousel__dots {
		right: 12px;
		bottom: 10px;
	}

	.heroCarousel__dot {
		width: 9px;
		height: 9px;
		margin: 0 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.heroCarousel__slide {
		transition: none;
	}
}