.imh-custom-video-widget {
	/*padding: 20px 40px;*/
	
	position: relative;
	display: flex; 
	justify-content: center; 
	align-items: center;
	cursor: pointer; 
	width: 100%;
	height: 400px;
	overflow: hidden;
	background-color: rgba(255,255,255,0.5);
}

.imh-custom-video-widget-custom-text {
	position: absolute;
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%);
	z-index: 3;
	pointer-events: none;
	width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	padding: 0 40px;
	text-align: center;
}
.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 .subtitle{
	font-family: "Imascono", Sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
}
  

.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;
}

/* 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 */
}


 /** PROJECTS GRID **/


.imascono-custom-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
	align-items: stretch;
}

.imascono-custom-projects-grid-item {
    position: relative;
    background-size: cover;
    background-position: center;
    aspect-ratio: 5 / 3; /* Define la relación de aspecto 5:3 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	cursor: pointer;
}

.imascono-custom-projects-grid-item a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.imascono-custom-projects-grid-item img{
    height: auto;
    left: calc(50% + 1px);
    position: absolute;
    top: calc(50% + 1px);
    transform: scale(1.01) translate(-50%, -50%);ç
	display: block;
    max-height: none;
    max-width: none;
    width: 100%;
}

.imascono-custom-projects-grid-item-content {
    position: relative;
    color: white;
    padding: 10px;
    z-index: 2;
  	opacity: 0;
 	transition: opacity 0.5s ease; /* Transición de opacidad */
}

.imascono-custom-projects-grid-item-content.visible {
  	opacity: 1;
}

.imh-custom-projects-grid-item-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 0.5s ease-in-out;
	z-index: 2;
}

.imh-custom-projects-grid-item-bg-overlay.visible {
   	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0); /* Inicia con fondo transparente */
    transition: background-color 0.5s ease-in-out;
	z-index: 2;
}


.imh-custom-projects-grid-item-bg-overlay.visible {
    background-color: rgba(0, 0, 0, 0.6); /* Se oscurece la imagen */
}


.imascono-custom-projects-grid-item-content h3 {
   	font-family: "Imascono", Sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
	margin: 0;
}

.imascono-custom-projects-grid-item-content p {
    margin: 5px 0 0;
	font-family: "Imascono", Sans-serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #FFFFFF;
}



/* Media query para dispositivos móviles (ancho máximo 768px) */

@media (max-width: 767px) {
	.imh-custom-video-widget{
		/*padding: 10px 20px;*/
		height: 246px;
	}
	.imh-custom-video-widget-custom-text {
		font-size: 20px;
		padding: 0 20px;
	}
    .imh-custom-video-widget-video-container {
        width: 100%;
    }
	.imascono-custom-projects-grid {
	 	grid-template-columns: repeat(1, 1fr);
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
 	.imascono-custom-projects-grid {
    	grid-template-columns: repeat(2, 1fr); 
  	}
}