
.vidbg-container {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #020202;
}

.vidbg-container.vidbg-loading {
	animation: vidbgpulse 1.5s infinite;
}

.vidbg-container video {
	position: absolute;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: .25s opacity ease-in-out;
	max-width: none;
	opacity: 0;
}

@keyframes vidbgpulse {
	0% {
		filter: grayscale(0%);
	}
	
	50% {
		filter: grayscale(50%);
	}
	
	100% {
		filter: grayscale(0%);
	}
}

.vidbg-container iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	max-width: none;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	transition: .25s opacity ease-in-out;
}

.vidbg-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.vidbg-end-frame {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	transition: opacity .25s ease-in-out;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.vidbg-frontend-buttons {
	display: inline-flex;
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	opacity: 0;
	transition: .25s opacity ease-in-out;
}

.vidbg-frontend-buttons.top-right {
	top: 0;
	right: 0;
	left: auto;
	bottom: auto;
}

.vidbg-frontend-buttons.top-left {
	top: 0;
	right: auto;
	bottom: auto;
	left: 0;
}

.vidbg-frontend-buttons.bottom-right {
	top: auto;
	right: 0;
	bottom: 0;
	left: auto;
}

.vidbg-frontend-buttons.bottom-left {
	top: auto;
	right: auto;
	bottom: 0;
	left: 0;
}

.vidbg-frontend-buttons a.vidbg-frontend-button {
	cursor: pointer;
	display: block;
	box-shadow: none;
	width: 28px;
	height: 28px;
	background-color: rgba(255, 255, 255, .5);
}
