/*--------------------------------------------------------------
# Video Foreground
--------------------------------------------------------------*/
.video-foreground {
	position: fixed;
	opacity: 0;
	transition: var(--transition);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -2;
}

.has-video-foreground .video-foreground {

	&.playing,
	&.pause {
		opacity: 1;
		z-index: 99;
	}

	&.playing .modal-video-overlay,
	&.pause .modal-video-overlay {
		content: "";
		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(rgba(0, 0, 0, 0.75) 45%, rgba(0, 0, 0, 0.9) 100%);
		z-index: -1;
	}
}

.slide.has-video-foreground .video-foreground {
	position: absolute;
}

.modal-video-body {
	max-width: 940px;
	width: 100%;
	height: 85%;
	margin: 0 auto;
	display: table;
}

.modal-video-inner {
	position: relative;
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%;

	@media (--sm-max) {
		padding: 0 20px;
	}
}

.modal-video-close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	z-index: 1;
}

.video-trigger {
	position: relative;
	display: inline-block;

	& .btn-icon {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: calc(var(--spacer) * 2) auto;
	}

	& svg {
		cursor: pointer;
	}

	& .video-trigger-label {
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 4px;
		margin: var(--spacer);
		white-space: nowrap;
	}
}

.inline-YTPlayer {
	background-color: var(--color-black);
}