/* Video Background Styles */
.video-layer {
	display: flex;
		align-items: center;
		justify-content: center;
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100vw;
}

.video-layer.none,
.video-layer.none > .none,
.video-layer .none {
	display: block !important;
}

.video-layer.full,
.video-layer.custom {
	min-height: calc(100vh - 200px);
}

.video-layer.three-qtr {
	min-height: 75vh;
}

.video-layer.half {
	min-height: 50vh;
}

.video-layer.qtr {
	min-height: 25vh;
}

.acf-block-preview .video-layer {
	width: 100%;
}

.video-layer .video-background {
    position: absolute;
		top: 0;
		left: 0;
    width: 100%;
    height: 100%;
    transition: all .25s ease;
    z-index: 0;
    overflow: hidden;
}

.video-layer .video-background.arch-mask {
	-webkit-mask-size: auto 90%;
	mask-size: auto 90%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.video-layer.active .video-background.arch-mask {
	-webkit-mask-size:  500% auto;
	mask-size: 500% auto;
	z-index: 100;
}

.video-layer .video-background.arch-mask.sharp-arch {
	-webkit-mask-image: url(images/mask-sharp-arch.svg);
	mask-image: url(images/mask-sharp-arch.svg);
}

.video-layer .video-background.arch-mask.torch-full {
	-webkit-mask-image: url(images/icon-torch-full.svg);
	mask-image: url(images/icon-torch-full.svg);
}

.video-layer .video-player {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    transition: all .25s ease;
    pointer-events: none; /* Prevents user interaction with the video */
    z-index: 1;
}

.video-layer .video-full {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	width: 100%;
	height: 100%;
	transition: all .25s ease;
	/* pointer-events: none; */ /* Prevents user interaction with the video */
	z-index: 1;
}

.video-layer.active .video-full {
	opacity: 1;
	z-index: 100;
}

.acf-block-preview .video-layer .video-player {
	height: 100%;
	left: 0;
	top: 0;
	transform: translate(0,0);
	width: 100%;
}

.video-layer.active .video-player {
	height: 100%;
	width: 100%;
	display: none;
}

.video-layer .video-background.arch-mask .video-player {
	/*height: 100%;
	width: 100%;
	transform: none;
	top: 0;
	left: 0;*/
}

.video-layer .video-overlay {
	display: block;
	height: 100%;
	position: absolute;
		left: 0;
		top: 0;
	transition: all .25s ease;
	width: 100%;
	z-index: 2;
}

.video-layer.active .video-overlay {
	opacity: 0 !important;
	display: none;
	z-index: 1000;
}

.video-layer .vid-inner-overlay {
    position: relative;
    /* top: 0; */
    /* left: 0; */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    text-align: center;
    z-index: 10;
}

	.video-layer.active .vid-inner-overlay {
		background: rgba(0,0,0,0);
		align-items: center;
		justify-content: center;
		transition: all .25s ease;
		/*transition-delay: .25s;*/
	}

	.video-layer.active.hover .vid-inner-overlay {
		background: rgba(0,0,0,.7);
		z-index: 100;
	}

	.video-layer .vid-inner-overlay > div {
		display: block;
		margin: 0 auto;
		max-width: 1500px;
		opacity: 1;
		position: relative;
		transition: all .25s ease;
		transform: scale(1);
		width: 100%;
	}
	
	.video-layer.active .vid-inner-overlay > div {
		color: #fff;
		display: flex;
		min-height: 80px;
		max-width: 480px;
		top: 100%;
		padding: 19px 0 19px 10px;
		transition-delay: .25s;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
	}

	.video-layer.active.hover .vid-inner-overlay > div {
		top: 0;
	}
	
	.video-layer .vid-inner-overlay .video-play-btn {
		background: #fff;
		border-radius: 0px;
		cursor: pointer;
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		height: 60px;
		margin-bottom: 20px;
		padding: 0 20px !important;
		position: relative;
		text-align: center !important;
		transition: all .25s ease;
		width: 60px;
	}

	.video-layer .vid-inner-overlay .video-play-btn:hover {
		background: #000;
	}

	.video-layer:not(.active) .vid-inner-overlay .video-play-btn.continue {
		display: none;
	}

	.video-layer .vid-inner-overlay .video-play-btn:before {
		border-top: 8px solid #000;
		border-right: 8px solid #000;
		border-bottom: 8px solid transparent;
		border-left: 8px solid transparent;
		content: '';
		display: block;
		height: 0px;
		margin-left: -8px;
		position: relative;
		transform: rotate(45deg);
		transition: all .25s ease;
		width: 0px;
	}

	.video-layer .vid-inner-overlay .video-play-btn:hover:before {
		border-top: 8px solid #fff;
		border-right: 8px solid #fff;
		border-bottom: 8px solid transparent;
		border-left: 8px solid transparent;
	}

	.video-layer.active .vid-inner-overlay .video-play-btn {
		background: rgba(255,255,255,.8);
		border-radius: 0;
		left: 0;
		margin: 0;
		/* position: absolute; */
		transform: rotate(0deg);
	}

	.video-layer.active .vid-inner-overlay .video-play-btn.continue {
		background: #ca3a27;
	}

	.video-layer.active .vid-inner-overlay > div > *:not(.video-play-btn) {
		display: none !important;
	}

	.video-layer.active .vid-inner-overlay .video-play-btn:before {
		background: #333;
		border: none !important;
		content: '';
		display: inline-block !important;
		height: 16px;
		margin: -2px 10px 0 0;
		position: relative;
		top: 0;
		left: 0;
		text-align: center !important;
		transform: rotate(0deg);
		width: 16px !important;
	}

	.video-layer.active .vid-inner-overlay .video-play-btn:after {
		font-family: 'GT America Bold';
		font-size: 1.1em;
		line-height: 1;
		/* position: absolute; */
		/* top: 35px; */
		/* left: 0; */
		/* text-align: center; */
		color: #333;
	}

	.video-layer.active .vid-inner-overlay .video-play-btn.continue:before {
		background: transparent;
		border-top: 5px solid #fff !important;
		border-right: 5px solid #fff !important;
		border-bottom: 5px solid transparent !important;
		border-left: 5px solid transparent !important;
		height: 0;
		transform: rotate(45deg);
		width: 0 !important;
	}

	.video-layer.active .vid-inner-overlay .video-play-btn.continue:after {
		color: #fff;
	}

	.video-layer.active .vid-inner-overlay .video-play-btn.stop:after {
		content: 'STOP VIDEO';
	}

	.video-layer.active .vid-inner-overlay .video-play-btn.continue:after {
		content: 'RESUME VIDEO';
	}
	
	.video-layer .vid-inner-overlay .video-caption-btn {
		border-radius: 50%;
		cursor: pointer;
		display: none;
		height: 60px;
		margin: 0px;
		padding: 0 !important;
		position: absolute;
			left: 70px;
		text-align: center !important;
		width: 60px !important;
	}
	
	.video-layer.active .vid-inner-overlay .video-caption-btn {
		display: block !important;
	}
	
	.video-layer.active .vid-inner-overlay .video-caption-btn:before {
		background: #fff;
		content: '';
		display: block;
		height: 20px;
		position: absolute;
			top: 10px;
			left: calc(50% - 10px);
		width: 20px;
	}
	
	.video-layer.active .vid-inner-overlay .video-caption-btn:after {
		content: 'Closed Captions';
		font-family: 'GT America Bold';
		font-size: .7em;
		line-height: 1.2;
		position: absolute;
			top: 35px;
			left: 0;
		text-align: center;
	}

	.video-layer .vid-inner-overlay h1 {
		font-size: 3em;
		margin: 0;
	}
	
	.video-layer .vid-inner-overlay p {
		font-size: 1.5em;
	}

	.video-layer .video-layer.active .vid-inner-overlay h1,
	.video-layer .video-layer.active .vid-inner-overlay h2,
	.video-layer .video-layer.active .vid-inner-overlay h3,
	.video-layer .video-layer.active .vid-inner-overlay h4,
	.video-layer .video-layer.active .vid-inner-overlay h5 {
		color: inherit;
		line-height: 1;
		margin-bottom: 5px;
		padding-bottom: 0;
	}

	.video-layer .video-layer.active .vid-inner-overlay p {
		color: inherit;
		line-height: 1;
		margin: 0;
		padding-bottom: 0;
	}

	.video-layer.active .vid-inner-overlay > div > *:not(.video-play-btn),
	.video-layer.active .vid-inner-overlay > div > *:not(.video-caption-btn) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		padding-left: 80px;
		width: 100%;
		text-align: left;
		width: 200px !important;
	}

	.video-layer.active .vid-inner-overlay > div > *:last-child {
		margin-bottom: 0;
	}

/* loop controls */
.loop-controls {
	justify-content: flex-start;
	bottom: 0;
	height: 60px;
	width: 100%;
	z-index: 100;
}

.acf-block-preview .loop-controls {
	display: none;
}

.video-layer.active .loop-controls {
	display: none;
}

	.loop-controls > div {
		display: flex;
		flex-wrap: wrap;
		height: 100%;
		position: relative;
		width: 100px;
	}

		.loop-controls > div > .loop-control {
			cursor: pointer;
			display: block;
			height: 100%;
			opacity: 0;
			position: absolute;
			width: 100%;
			z-index: 10;
		}

		.loop-controls > div > .play-pause-loop {
			color: #fff;
			display: flex;
			align-content: center;
			justify-content: center;
			flex-wrap: wrap;
			line-height: 40px;
			position: relative;
			width: 100%;
			z-index: 1;
		}

			.loop-controls > div > .play-pause-loop > span {
				position: relative;
			}

			.loop-controls > div > .play-pause-loop > span:first-child {
				background: rgba(255,255,255,0.5);
				display: flex;
				align-content: center;
				justify-content: space-around;
				flex-wrap: wrap;
				height: 30px;
				overflow: hidden;
				position: relative;
				width: 30px;
			}

				.loop-controls > div > .play-pause-loop > span:first-child:before,
				.loop-controls > div > .play-pause-loop > span:first-child:after {
					background: rgba(255,255,255,1);
					content: '';
					display: block;
					height: 12px;
					transition: all .25s ease;
					transform: rotate(0deg);
					width: 4px;
					position: absolute;
					top: calc(50% - 6px);
				}

				.loop-controls > div > .play-pause-loop > span:first-child:before {
					left: calc(50% - 6px);
				}

				.loop-controls > div > .play-pause-loop > span:first-child:after {
					right: calc(50% - 5px);
				}

				/*.loop-controls > div > .loop-control:checked + .play-pause-loop > span:first-child:before {
					background: rgba(255,255,255,0);
					border-right: 5px solid #fff;
					border-top: 5px solid #fff;
					border-left: 5px solid transparent;
					border-bottom: 5px solid transparent;
					height: 0;
					margin-top: 1px;
					transform: rotate(45deg);
					width: 0;
					left: calc(50% - 8px);
				}*/

				.loop-controls > div > .loop-control:checked + .play-pause-loop > span:last-child {
					display: flex;
				}

				.loop-controls > div > .loop-control:checked + .play-pause-loop > span:first-child:before,
				.loop-controls > div > .loop-control:checked + .play-pause-loop > span:first-child:after {
					display: none
				}

			.loop-controls > div > .play-pause-loop > span:last-child {
				background: #000;
				-webkit-mask-image: url(images/infinity-loop-icon.svg);
				mask-image: url(images/infinity-loop-icon.svg);
				-webkit-mask-repeat: no-repeat;
				mask-repeat: no-repeat;
				-webkit-mask-position: center;
				mask-position: center;
				-webkit-mask-size: 80% 100%;
				mask-size: 60% 100%;
				align-content: center;
				justify-content: space-around;
				flex-wrap: wrap;
				height: 30px;
				overflow: hidden;
				position: absolute;
					top: calc(50% - 15px);
					left: calc(50% - 15px);
				width: 30px;
				display: none;
			}

			/*.loop-controls > div > .play-pause-loop > span:last-child:before,
			.loop-controls > div > .play-pause-loop > span:last-child:after {
				display: block;
				font-family: 'GT America Bold';
				font-size: 18px;
				margin-left: 6px;
				position: relative;
				width: 100%;
			}

			.loop-controls > div > .play-pause-loop > span:last-child:before {
				content: 'pause';
				margin-top: 38px;
				transition: all .25s ease;
			}
			
			.loop-controls > div > .loop-control:checked + .play-pause-loop > span:last-child:before {
				margin-top: -40px;
			}

			.loop-controls > div > .play-pause-loop > span:last-child:after {
				content: 'resume';
			}*/
			
@media ( max-width: 950px ) {
	.video-player,
	.video-layer .vid-inner-overlay .video-play-btn,
	.loop-controls {
		display: none !important;
	}
}