.featherlight {
	background: transparent;
	bottom: 0;
	cursor: zoom-out;
	display: none;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	left: 0;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	white-space: nowrap;
	z-index: 2147483647;

	* {
		box-sizing: border-box;
	}

	&:last-of-type {
		background: $underlay-background-color;
	}

	&::before {
		content: "";
		display: inline-block;
		height: 100%;
		margin-right: -0.25em;
		vertical-align: middle;
	}

	.featherlight-content {
		animation: fadein 0.5s;
		background: $content-background-color;
		border: 0;
		cursor: auto;
		display: inline-block;
		max-height: 80%;
		max-width: 90%;
		min-width: inherit;
		overflow: visible;
		padding: 0;
		position: relative;
		text-align: left;
		vertical-align: middle;
		white-space: normal;

		@media screen and ( min-width: 980px ) {
			max-height: 90%;
		}

		.caption {
			color: $caption-text-color;
			font-size: 16px;
			font-weight: lighter;
			line-height: 1.25;
			max-width: 100%;
			overflow: hidden;
			position: absolute;
			text-align: left;
			text-overflow: ellipsis;
			white-space: nowrap;

			&:hover,
			&:focus {
				overflow: visible;
				white-space: normal;
			}
		}

		a {
			color: $caption-text-color;
			text-decoration: underline;

			&:hover,
			&:focus {
				text-decoration: none;
			}
		}
	}

	.featherlight-inner {
		animation: fadein 0.5s;
		display: block;
	}

	// Reset button style.
	button {
		-webkit-appearance: button;
		font-family: sans-serif;
		font-size: 100%;
		line-height: 1.15;
		margin: 0;
		overflow: visible;
		text-transform: none;

		&::-moz-focus-inner {
			border-style: none;
			padding: 0;
		}
	}

	.featherlight-close-icon {
		background-color: transparent;
		background-image: $close-icon;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% auto;
		border: 0;
		cursor: pointer;
		display: block;
		height: 30px;
		opacity: 0.6;
		overflow: hidden;
		padding: 0;
		position: fixed;
		right: 25px;
		text-align: center;
		text-indent: 100%;
		top: 25px;
		white-space: nowrap;
		width: 30px;
		z-index: 9999;

		&:hover,
		&:focus {
			opacity: 1;
		}
	}

	.featherlight-image {
		max-width: 100%;
	}

	iframe {
		border: 0;
	}
}

[data-featherlight] {
	img {
		cursor: zoom-in;
	}
}

.featherlight-iframe {

	.featherlight-content {
		border-bottom: 0;
		-webkit-overflow-scrolling: touch;
		overflow-y: scroll;
		padding: 0;
	}
}
