.imh-custom-video-widget {
	/*padding: 20px 40px;*/
	position: relative;
	display: flex; 
	justify-content: left; 
	align-items: end;
	cursor: pointer; 
	width: 100%;
	height: 100%; 
	height: 400px;
	overflow: hidden;
}

.imh-custom-video-widget-title{
	position: absolute;
	bottom: 0;
	padding: 20px;
}

.imh-custom-video-widgetplay-button {
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%);
	z-index: 4;
}

.imh-custom-video-widget-custom-text {
	position: absolute;
	bottom: 0;
	padding: 0 0 20px 40px;
	z-index: 3;
	pointer-events: none;
}

.imh-custom-video-widget-custom-text h3{
	font-family: 'Imascono'; 
	margin: 0; 
	font-weight: 600; 
	font-size: 28px;
	letter-spacing: 7px;
	text-transform: uppercase;
	transition: transform 1s ease-in-out;
}

.imh-custom-video-widget-custom-text h3.hovered{
	transform: scale(1.1);
}

.imh-custom-video-widget-video-modal {
	display: none; 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background: rgba(0,0,0,0.8); 
	justify-content: center; 
	align-items: center; 
	z-index: 9999;
}

.imh-custom-video-widget-close-modal { 
	position: absolute;
	top: 5px; 
	right: 10px;
	cursor: pointer;
	height:40px
}
.imh-custom-video-widget-video-container {
	width: 75%; 
	position: relative;
}

/** Zoom **/
/* Estilo inicial para la imagen */
.zoom-in-out-element {
    position: relative;
    transition: transform 1s ease-in-out;
	z-index: 1;
}

/* Estilo para el overlay */
.imh-custom-video-widget-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0); /* Inicia con fondo transparente */
    transition: background-color 1s ease-in-out;
	z-index: 2;
}

/* Cuando se aplica la clase hover */
.zoom-in-out-element.hovered {
    transform: scale(1.1); /* Aumenta el tamaño */
}

/* Cuando se aplica la clase overlay-visible */
.imh-custom-video-widget-bg-overlay.visible {
    background-color: rgba(0, 0, 0, 0.6); /* Se oscurece la imagen */
}
/* Media query para dispositivos móviles (ancho máximo 768px) */

@media (max-width: 768px) {
	.imh-custom-video-widget{
		padding: 10px 20px;
		height: 246px;
	}
	.imh-custom-video-widget-custom-text {
		font-size: 20px;
	}
    .imh-custom-video-widget-video-container {
        width: 100%;
    }
}