@charset "utf-8";
/* CSS Document */

.video-preview {
	position: relative;
	overflow: hidden;
	border: 0;
	padding: 0;
	background: #111
}
.video-preview iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	border: 0;
	pointer-events: none;
	transform: translate(-50%, -50%)
}
.main-video {
	width: min(100%, 614px);
	aspect-ratio: 614 / 909;
	display: block;
	justify-self: center
}
.main-video iframe {
	width: 50.6%;
	transform: translate(-50%, -50%) scale(2)
}
.video-tint {
	position: absolute;
	inset: 0;
	background: rgba(24,37,63,.06)
}
.main-play, .card-play {
	cursor: pointer;
	position: absolute;
	z-index: 2;
	left: 6.8%;
	bottom: 4%;
}
.main-play {
	width: 7.2%
}
.review-card {
	width: 100%;
	float: left;
	aspect-ratio: 383 / 666;
	margin: 0 0 0;
}
.review-card iframe {
	width: 100%
}
.shade {
	position: absolute;
	inset: 0;
	background: rgba(15,24,40,.13)
}
.card-play {
	width: 13%
}
.modal {
	inset: 0;
	background: rgba(46,45,44,.88);
	display: grid;
	place-items: center;
	padding: 22px;
	backdrop-filter: blur(7px);
	position: fixed;
	z-index: 9999;
}
.modal[hidden] {
	display: none
}
.modal-box {
	width: min(900px, 100%);
	padding: 12px 12px 12px;
	border-radius: 14px;
	background: #f1eee7;
	position: relative;
}
.close {
	width: 40px;
	height: 40px;
	right: -11px;
	top: -11px;
	border: 0;
	border-radius: 50%;
	background: #b98a3b;
	color: #f5efe3;
	font-size: 25px;
	position: absolute;
	z-index: 3;
}
.video-player {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	border-radius: 8px;
	overflow: hidden;
	background: #111
}
.video-player iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}
@media(max-width:767px) {
.main-video {
	width: min(75vw, 500px);
}
}
@media(max-width:600px) {
.main-video {
	width: 88vw;
}
.review-card {
	min-width: 76vw;
	scroll-snap-align: center;
}
.modal {
	padding: 12px;
}
.main-play {
	width: 11.2%;
}
}