/* Only builder side. */
.dipl_video_mask_inner.youtube .fluid-width-video-wrapper,
.dipl_video_mask_inner.vimeo .fluid-width-video-wrapper{
	padding-top: 56.2963%;
}

.dipl_video_mask_wrapper {
	position: relative;
}
.dipl_video_mask_inner{
	position: relative;
	overflow: hidden;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
	mask-size: contain;
	-webkit-mask-size: contain;
}
.dipl_video_mask_wrapper.dipl-mask-type-text .dipl_video_mask_inner{
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
}
.dipl_video_mask_inner video,
.dipl_video_mask_inner iframe {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.dipl_video_mask_element_inner > svg{
	display: block;
}
/* Text Mask. */
.dipl-video-text-mask-svg{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.dipl-video-text-mask-svg mask{
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.divi-plus-video-mask-text{
	fill: white;
	font-size: 12rem;
	font-weight: 900;
	letter-spacing: 8px;
	text-anchor: middle;
}

/* Video masks item. */
.dipl_video_mask .dipl_video_mask_item{
	position: absolute !important;
	top: 0;
	left: 0
}
.dipl-video-mask-gradient-svg svg{
	position: absolute;
}

/* Cover — lives inside .dipl_video_mask_inner so it inherits the same mask clip as the
   video, and fades out once playback starts. Always given a solid fallback background so
   it fully blocks the provider's own native "click to play" thumbnail/button underneath —
   without an opaque layer here, YouTube/Vimeo's own play icon shows (and is clickable)
   right through a transparent cover, duplicating/fighting with the custom Play Icon. A
   Poster Image, when set, paints over this same fallback via an inline background-image. */
.dipl_video_mask_poster{
	position: absolute;
	inset: 0;
	background-color: #000000;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
	cursor: pointer;
	transition: opacity 0.3s ease;
}
.dipl_video_mask_wrapper.dipl-has-played .dipl_video_mask_poster{
	opacity: 0;
	pointer-events: none;
}

/* Play/Pause controls — sit above the video, the mask, and any decorative Video Mask
   Element children (rendered last in the DOM, plus a z-index for safety). */
.dipl_video_mask_controls{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	pointer-events: none;
}
.dipl_video_mask_play_icon,
.dipl_video_mask_pause_icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	margin: 0;
	cursor: pointer;
	pointer-events: auto;
	line-height: 1;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.dipl_video_mask_play_icon:before,
.dipl_video_mask_pause_icon:before{
	display: inline-block;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	-webkit-font-feature-settings: normal;
	font-feature-settings: normal;
	speak-as: none;
}

/* Default (paused): Play icon shown, Pause icon hidden. */
.dipl_video_mask_pause_icon{
	position: absolute;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Playing: Pause icon shown, Play icon hidden. */
.dipl_video_mask_wrapper.video-is-playing .dipl_video_mask_play_icon{
	position: absolute;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.dipl_video_mask_wrapper.video-is-playing .dipl_video_mask_pause_icon{
	position: static;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* While playing, controls auto-fade (JS adds/removes this class) and reveal again on
   hover/tap over the module — keyed off the wrapper so touch devices (no real :hover)
   still get the controls back via tap-to-reveal. */
.dipl_video_mask_wrapper.video-is-playing.dipl-controls-hidden .dipl_video_mask_controls{
	opacity: 0;
	visibility: hidden;
}
.dipl_video_mask_wrapper.video-is-playing.dipl-controls-hidden:hover .dipl_video_mask_controls{
	opacity: 1;
	visibility: visible;
}