.vcc-container {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: var( --vcc-height, 600px );
	display: flex;
}

.vcc-is-background {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	transform: none;
	z-index: 0;
}

.vcc-full-width:not(.vcc-is-background) {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%);
}

.vcc-video-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.vcc-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	visibility: hidden;
	z-index: 0;
}

.vcc-video.active,
.vcc-video.sliding-out {
	visibility: visible;
	z-index: 1;
}

.vcc-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background-color: var( --vcc-overlay-color, #000000 );
	opacity: var( --vcc-overlay-opacity, 0.4 );
	pointer-events: none;
}

.vcc-content {
	position: relative;
	z-index: 3;
	width: 100%;
	display: flex;
	padding: 40px 24px;
	box-sizing: border-box;
}

.vcc-content-inner {
	width: 100%;
}

.vcc-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #fff;
	background: #23282d;
	font-size: 14px;
	text-align: center;
	padding: 0 16px;
}

.vcc-arrows {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	z-index: 10;
	pointer-events: none;
	padding: 0 20px;
	box-sizing: border-box;
}

.vcc-arrow {
	background: rgba(0, 0, 0, 0.3);
	border: none;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto;
	transition: background 0.3s;
}

.vcc-arrow:hover {
	background: rgba(0, 0, 0, 0.6);
}

@media ( max-width: 782px ) {
	.vcc-container {
		height: var( --vcc-height-mobile, 450px );
	}
}