/**
 * Secure Image Lightbox
 *
 * The core class names (.featherlight-content, .featherlight-image,
 * .featherlight-close-icon, .caption, .featherlight-previous/-next) match the
 * ones WP Featherlight used, so any custom theme CSS that targeted the old
 * lightbox continues to apply.
 */

.sil-lightbox {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2147483647;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.9 );
	cursor: zoom-out;
	text-align: center;
	-webkit-tap-highlight-color: transparent;
}

.sil-lightbox.sil-visible {
	display: flex;
	-webkit-animation: sil-fadein 0.3s ease;
	        animation: sil-fadein 0.3s ease;
}

html.sil-open {
	overflow: hidden;
}

.sil-lightbox * {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

/* Content wrapper */
.sil-lightbox .featherlight-content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 90%;
	max-height: 85%;
	cursor: auto;
}

/* The image */
.sil-lightbox .featherlight-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 80vh;
	margin: 0 auto;
	background: #111;
	-webkit-animation: sil-fadein 0.4s ease;
	        animation: sil-fadein 0.4s ease;
}

@media screen and ( min-width: 980px ) {
	.sil-lightbox .featherlight-content {
		max-height: 90%;
	}
	.sil-lightbox .featherlight-image {
		max-height: 86vh;
	}
}

.sil-lightbox.sil-loading .featherlight-image {
	min-width: 64px;
	min-height: 64px;
	opacity: 0.3;
}

/* Caption */
.sil-lightbox .caption {
	max-width: 100%;
	margin-top: 10px;
	color: #fff;
	font: 400 15px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: center;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.6 );
}

.sil-lightbox .caption a {
	color: #fff;
	text-decoration: underline;
}

.sil-lightbox .caption a:hover,
.sil-lightbox .caption a:focus {
	text-decoration: none;
}

/* Close button */
.sil-lightbox .featherlight-close-icon {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 2;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	cursor: pointer;
	opacity: 0.7;
	overflow: hidden;
	text-indent: 110%;
	white-space: nowrap;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: 70% auto;
	        background-size: 70% auto;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M21%204.41L19.59%203%2012%2010.59%204.41%203%203%204.41%2010.59%2012%203%2019.59%204.41%2021%2012%2013.41%2019.59%2021%2021%2019.59%2013.41%2012%2021%204.41z%22/%3E%3C/svg%3E");
	transition: opacity 0.2s ease;
}

.sil-lightbox .featherlight-close-icon:hover,
.sil-lightbox .featherlight-close-icon:focus {
	opacity: 1;
	outline: none;
}

/* Gallery navigation */
.sil-lightbox .featherlight-previous,
.sil-lightbox .featherlight-next {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 1;
	display: none;
	width: 20%;
	max-width: 120px;
	padding: 0;
	border: 0;
	cursor: pointer;
	opacity: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: 28px auto;
	        background-size: 28px auto;
	transition: opacity 0.2s ease;
}

.sil-lightbox.sil-has-nav .featherlight-previous,
.sil-lightbox.sil-has-nav .featherlight-next {
	display: block;
}

.sil-lightbox.sil-has-nav:hover .featherlight-previous,
.sil-lightbox.sil-has-nav:hover .featherlight-next {
	opacity: 0.55;
}

.sil-lightbox .featherlight-previous:hover,
.sil-lightbox .featherlight-previous:focus,
.sil-lightbox .featherlight-next:hover,
.sil-lightbox .featherlight-next:focus {
	opacity: 1;
	outline: none;
}

.sil-lightbox .featherlight-previous {
	left: 0;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z%22/%3E%3C/svg%3E");
}

.sil-lightbox .featherlight-next {
	right: 0;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M8.59%2016.59L10%2018l6-6-6-6-1.41%201.41L13.17%2012z%22/%3E%3C/svg%3E");
}

/* On touch screens navigation is primarily via swipe; keep the arrows
   discoverable but out of the way. */
@media screen and ( max-width: 782px ) {
	.sil-lightbox.sil-has-nav .featherlight-previous,
	.sil-lightbox.sil-has-nav .featherlight-next {
		width: 24%;
		opacity: 0.4;
	}
	.sil-lightbox .featherlight-close-icon {
		top: 12px;
		right: 12px;
	}
}

@-webkit-keyframes sil-fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes sil-fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}