/*
 * The lightbox frame (Slick Lightbox), after slick-lightbox.css.
 *
 * Slick's optional slick-theme.css is not bundled, so the previous / next
 * arrows and the close button are drawn here with Font Awesome 4 (already on
 * every page) instead of the "slick" icon font.
 */

.slick-lightbox .slick-prev,
.slick-lightbox .slick-next {
	display: block;
	position: absolute;
	top: 50%;
	z-index: 1;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: transparent;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}

.slick-lightbox .slick-prev:before,
.slick-lightbox .slick-next:before,
.slick-lightbox-close:before {
	display: block;
	font-family: FontAwesome;
	line-height: 1;
	color: #fff;
	opacity: 0.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.slick-lightbox .slick-prev:before,
.slick-lightbox .slick-next:before {
	font-size: 40px;
}

.slick-lightbox .slick-prev:before {
	content: "\f104";
}

.slick-lightbox .slick-next:before {
	content: "\f105";
}

.slick-lightbox-close:before {
	font-size: 20px;
	content: "\f00d";
}

.slick-lightbox .slick-prev:hover:before,
.slick-lightbox .slick-next:hover:before,
.slick-lightbox .slick-prev:focus-visible:before,
.slick-lightbox .slick-next:focus-visible:before,
.slick-lightbox-close:hover:before,
.slick-lightbox-close:focus-visible:before {
	opacity: 1;
}

.slick-lightbox-slick-caption {
	font-size: 14px;
}

/*
 * Stacking, as on the old site (#41): prettyPhoto put its backdrop at
 * z-index 9500 and the picture at 10000. The backdrop is a layer of its own
 * (added by lightbox.js), so the light header (.normal.light, 9501) stays
 * above it and the ordinary header (.normal, 999) goes under it, while the
 * lightbox itself, transparent, keeps the image and its controls above both.
 * Only those take the pointer, so the light header stays usable and a click
 * anywhere else lands on the backdrop, which closes the lightbox.
 */
.slick-lightbox {
	z-index: 10000;
	pointer-events: none;
}

.slick-lightbox-slick-img,
.slick-lightbox-slick-caption,
.slick-lightbox .slick-prev,
.slick-lightbox .slick-next,
.slick-lightbox-close {
	pointer-events: auto;
}

.clementsequine-lightbox-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9500;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0;
	transition: opacity 0.5s ease;
}

/*
 * The shade, as on live (#42). The old site had two lightboxes: prettyPhoto
 * on the image groups (media grids, News carousels), black at opacity 0.7,
 * and Magnific Popup on the single images (the Stallion hero, News featured
 * and card images: groups "hero" and "image"), #0b0b0b at opacity 0.8.
 * lightbox.js copies the group's data-lightbox label to data-group.
 */
.clementsequine-lightbox-backdrop.is-open {
	opacity: 0.7;
}

.clementsequine-lightbox-backdrop[data-group="hero"],
.clementsequine-lightbox-backdrop[data-group="image"] {
	background: #0b0b0b;
}

.clementsequine-lightbox-backdrop.is-open[data-group="hero"],
.clementsequine-lightbox-backdrop.is-open[data-group="image"] {
	opacity: 0.8;
}