/* Video
--------------------------------------------- */
.video {
	line-height: 0;
}

.video--hidden {
	display: none;
}

.video--placeholder img {
	width: 100%;
}

.video--play-button {
	display: flex;
	opacity: 0;
	z-index: 10;
	width: 50px;
	height: 50px;
	padding: 0;
	box-shadow: none;
	background-color: #fff;
	border: none;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	cursor: pointer;
	justify-content: center;
	align-items: center;
}

.video--play-button:focus {
	opacity: .75;
}

.video:hover .video--play-button {
	opacity: .75;
}

.video video {
	position: relative;
	z-index: 110;
	width: 100%;
}

@media screen and (max-width: 1000px) {
	.video--play-button {
		opacity: .75;
	}
}

.hover-image {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.hover-image-preview {
	display: none;
}

.hover-image:hover .hover-image-preview {
	display: initial;
}

.hover-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.product--trailer-placeholder {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.product--trailer-placeholder img {
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product--trailer-play-button {
	display: flex;
	font-size: 50px;
	width: 100px;
	height: 100px;
}