.plyr-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	pointer-events: none;
}

.plyr-wrapper .plyr--playing iframe {
	pointer-events: auto;
}

.plyr,
.plyr-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: var(--video-aspectratio, 56.25%);
	/* border-radius: var(--rounded-2xl); */
	border-radius: var(--rounded-lg);
	background-color: var(--gray);
	overflow: hidden;
	cursor: pointer;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.plyr .plyr__video-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto !important;
}

.plyr .plyr__video-wrapper .plyr__video-embed__container.plyr__video-embed__container {
	width: 100%;
	height: 100%;
	padding-bottom: 0;
	transform: none !important;
}

.plyr .plyr__poster {
	position: relative;
	background-size: cover;
}

.plyr .plyr__poster::after,
.video-player-popup .preview-video::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: var(--black);
	opacity: .3;
}

.plyr.plyr__poster-enabled.plyr--paused .plyr__poster,
.plyr.plyr__poster-enabled.plyr--playing .plyr__poster {
	opacity: 0;
	pointer-events: none;
}

.plyr.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster {
	pointer-events: none;
}

.plyr.plyr__poster-enabled .plyr__poster,
.plyr.plyr__poster-enabled.plyr--paused.plyr--stopped .plyr__poster {
	opacity: 1;
}

.plyr.plyr--video .plyr__controls {
	opacity: 0;
}

.plyr.plyr--video.plyr--playing .plyr__controls {
	opacity: 1;
}

.plyr.plyr--video > .plyr__control {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--transparent) url('/wp-content/themes/whello/assets/images/icon-play-video.svg') center/contain
		no-repeat;
	overflow: hidden;
	opacity: 1;
}

.plyr.plyr--video > .plyr__control:hover {
	background: var(--transparent) url('/wp-content/themes/whello/assets/images/icon-play-video.svg') center/contain
		no-repeat;
}

.plyr.plyr--video > .plyr__control > svg {
	display: none;
}

.plyr.plyr--video input[type='range'] {
	color: var(--blue);
}

.plyr-wrapper .action-mute {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 4;
	width: 20px;
	height: 20px;
	background: url('/wp-content/themes/whello/assets/images/icon-mute-white.svg') center/contain no-repeat;
	opacity: 0;
	visibility: hidden;
}

.plyr-wrapper .plyr--playing ~ .action-mute {
	opacity: .6;
	visibility: visible;
}

.plyr-wrapper .action-mute:hover {
	opacity: 1;
}

.plyr-wrapper--hide-mute .action-mute {
	background-image: url('/wp-content/themes/whello/assets/images/icon-audio-white.svg');
}

/* STYLE VIDEO POPUP */
.video-player-popup {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	/* border-radius: var(--rounded-2xl); */
	border-radius: var(--rounded-lg);
	box-shadow: var(--shadow);
	background-clip: content-box;
	padding: 0 0 1px;
	cursor: pointer;
}

.video-player-popup .preview-video {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: var(--video-aspectratio, 56.25%);
	background: var(--gray-50) center/cover no-repeat;
}

.video-player-popup .preview-video:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	background: var(--transparent) url('/wp-content/themes/whello/assets/images/icon-play-video.svg') center/contain
		no-repeat;
}

.video-player-popup .caption-video {
	width: 100%;
	margin-top: auto;
	background-color: var(--white);
}

.video-player-popup .caption-video h2,
.video-player-popup .caption-video h3,
.video-player-popup .caption-video h4,
.video-player-popup .caption-video h5 {
	margin-bottom: 4px;
}

.popup {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	transform: scale(1.04);
	transition: var(--transition);
}

.popup.popup-video {
	display: flex !important;
}

.admin-bar .popup {
	padding-top: var(--height-wpadminbar);
}

.popup.popup-active {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	pointer-events: auto;
}

.popup .overlay-popup {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: var(--overlay-transparent);
	cursor: pointer;
}

.popup .inner-popup {
	position: relative;
	z-index: 2;
	width: 800px;
	max-width: calc(100% - 40px);
	border-radius: 10px;
	padding: 50px 20px 20px;
	background-color: var(--white);
}

.popup .close-popup {
	position: absolute;
	top: 20px;
	right: 20px;
	width: auto;
	min-height: 20px;
	font-size: var(--text-2xl);
	color: var(--black);
	line-height: 0;
	transition: var(--transition);
}

.popup .close-popup:hover {
	color: var(--red);
}

@media all and (min-width: 601px) {
	.video-player-popup .caption-video {
		padding: 32px;
	}
}

@media all and (min-width: 901px) {
	.plyr.plyr--video > .plyr__control,
	.video-player-popup .preview-video:before {
		width: 60px;
		height: 60px;
	}

	/* .video-player-popup .preview-video:before {
		width: 114px;
		height: 114px;
	} */
}

@media all and (max-width: 900px) {
	.plyr.plyr--video > .plyr__control,
	.video-player-popup .preview-video:before {
		width: 72px;
		height: 72px;
	}

	/* .video-player-popup .preview-video:before {
		width: 68px;
		height: 68px;
	} */
}

@media all and (max-width: 600px) {
	.video-player-popup .caption-video {
		padding: 12px 20px 16px;
	}

	.video-player-popup .caption-video h2,
	.video-player-popup .caption-video h3,
	.video-player-popup .caption-video h4,
	.video-player-popup .caption-video h5 {
		font-size: var(--text-md);
	}

	.video-player-popup .caption-video span {
		position: relative;
		top: -3px;
		font-size: var(--text-2xs) !important;
	}
}