/*!
 * Bootstrap v3.2.0 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*!
 * normalize and grid
 */



        html {
            scroll-behavior: smooth;
        }
    
        .image-container {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .image-container img {
            display: block;
        }

        .info-box {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            /*background-color: rgba(255, 204, 0, 1.0);*/   
            color: white;
            text-align: center;
            padding: 10px;
            opacity: 0;
            transition: opacity 0.3s ease;
            font-size: 16px;
        }

        .image-container:hover .info-box {
            opacity: 1;
        }

       .arrow-container {
            position: absolute;
            bottom: 5px; /* Ajusta esta posición según sea necesario */
            right: 7px; /* Ajusta esta posición según sea necesario */
            width: 35px; /* Ajusta el tamaño según sea necesario */
            height: 35px; /* Ajusta el tamaño según sea necesario */
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8; /* Opcional: ajustar la opacidad del círculo */
        }

        .arrow-container img {
            width: 20px; /* Ajusta el tamaño de la flecha según sea necesario */
            height: 20px; /* Ajusta el tamaño de la flecha según sea necesario */
        }
	   
	   
	    .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9); /* FONDO DE LA IMAGEN GRANDE */
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            overflow: hidden;
            opacity: 0; /* Inicialmente oculto */
            transform: scale(1.1); /* Inicialmente escalado */
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .overlay:target {
            display: flex;
            opacity: 1; /* Hacerlo visible */
            transform: scale(1); /* Escalar a tamaño completo */
        }

        .overlay img {
            max-width: 90%;
            max-height: 90%;
            animation: fade-in 0.5s ease; /* Añadir animación de desvanecimiento */
        }

        .overlay .caption {
            position: absolute;
            bottom: 20%;  /* DISTANCIA DEL TEXTO HACIA EL FONDO */
            /*left: 0;
            right: 0;
            background-color: rgba(255, 204, 0, 0.7);*/  /* FONDO DEL TEXTO IMAGEN GRANDE */
            color: white;
            text-align: center;
            padding: 10px;
            /*font-size: 18px;*/
            transform: translateX(100%);
            animation: slide-in 1s forwards;
            animation-delay: 0.5s; /* Retraso de 0.5 segundos */
			max-width: 90%; /* Limitar el ancho máximo */
            margin: 0 auto; /* Centrando horizontalmente */
        }


@media (max-width: 600px) {
            .overlay .caption {
                max-width: 100%; /* Ocupa todo el ancho en pantallas pequeñas */
                margin: 0; /* Elimina el centrado en pantallas pequeñas */
                left: 0; /* Asegura que el texto esté alineado a la izquierda */
                right: 0; /* Asegura que el texto esté alineado a la derecha */
            }
        }



        @keyframes slide-in {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(0);
            }
        }

        @keyframes fade-in {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .overlay .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 24px;
            cursor: pointer;
            text-align: center;
        }
		
.negro {  background-color: #000000;}
.gris {  background-color: #f6f6f6;}  
.blanco {  background-color: #ffffff;} 
.azul {  background-color: #DDE4EA;}
.azul2 {  background-color: #BDCBD7;}
.azul3 {  background-color: #92A9BC;}
.azul4 {  background-color: #58778F;}
.azul5 {  background-color: #0071B7;}
.amarillo {  background-color: #ffcc00;}
.verde {  background-color: #385723;}
.rojo {  background-color: #fc0000;}
.marron {  background-color: #C55A11;}
.marron2 {  background-color: #BF9000;}

.sticky {
            position: -webkit-sticky; /* Para compatibilidad con navegadores WebKit */
            position: sticky; /* Habilita el efecto sticky */
            top: 0; /* El encabezado se mantendrá en la parte superior del contenedor */
            left: 0;
            width: 100%;
            /*background-image: url('../imagenes/fondo-menu.jpg');*/
   background-position: center top;
  background-repeat: repeat-x;
            /*padding: 10px 0;*/
            z-index: 1000; /* Asegura que el encabezado se mantenga sobre otros elementos */
        }

#notas {
margin:0 auto;	
padding: 0px; /*.....espaciar los articulos*/
text-align: center; /*........para centrar los articulos*/
width: 100%;
}

#notas article{	
display: inline-block; 
margin: 0px ; /* separa los articulos entre si*/
padding: 10px;
border-radius: 0px;
width: 24%;
/*background: #ffffff;*/
text-align: center;
vertical-align: top;
}

@media (max-width:1200px)
{
#notas article{	
display: inline-block; 
margin: 0px ; /* separa los articulos entre si*/
padding: 10px;
border-radius: 0px;
width: 48%;
/*background: #ffffff;*/
text-align: center;
vertical-align: top;
}
}

@media (max-width:760px)
{
#notas article{	
display: inline-block; 
margin: 0px ; /* separa los articulos entre si*/
padding: 10px;
border-radius: 0px;
width: 90%;
/*background: #ffffff;*/
text-align: center;
vertical-align: top;
}
}


#logos {
margin:0 auto;	
padding: 0px; /*.....espaciar los articulos*/
text-align: center; /*........para centrar los articulos*/
width: 100%;
}

#logos article{	
display: inline-block; 
margin: 0px ; /* separa los articulos entre si*/
padding: 10px;
border-radius: 0px;
width: 10%;
/*background: #ffffff;*/
text-align: center;
vertical-align: top;
}


@media (max-width:760px)
{
#logos article{	
display: inline-block; 
margin: 0px ; /* separa los articulos entre si*/
padding: 10px;
border-radius: 0px;
width: 23%;
/*background: #ffffff;*/
text-align: center;
vertical-align: top;
}
}
		
	.img { top:  -50px;}
.imgg { top: -100px;}
.imgbottom { top: 50px;}
.imggbottom { top: 100px;}


.image-container-visible {
  position: relative;
            display: inline-block;
            cursor: pointer;
            margin: 10px;
        }

        .thumb {
            display: none; /* Ocultar todas las miniaturas inicialmente */
        }

        .thumb-group1:first-of-type, 
        .thumb-group2:first-of-type,
		.thumb-group3:first-of-type,
		.thumb-group4:first-of-type,
		.thumb-group5:first-of-type {
            display: inline-block; /* Mostrar la primera miniatura de cada grupo */
        }

        #moreImagesGroup1,
		#moreImagesGroup2,
		#moreImagesGroup3,
		#moreImagesGroup4, 
        #moreImagesGroup5 {
            display: none; /* Ocultar imágenes adicionales inicialmente */
        }

        #showMoreLink1, #hideImagesLink1,
		#showMoreLink2, #hideImagesLink2,
		#showMoreLink3, #hideImagesLink3,
		#showMoreLink4, #hideImagesLink4, 
        #showMoreLink5, #hideImagesLink5 {
            display: block;
			cursor: pointer;
            margin: 20px 0;
            /* color: blue;*/
            /*text-decoration: underline;*/
			background-color: #58778F;   
            color: white;
            text-align: center;
            padding: 10px;
			font-family: 'Montserrat-VariableFont_wght';
    font-size: 18px;
	width: 250px;
  height: 40px;
  
        }

        #hideImagesLink1,
		#hideImagesLink2,
		#hideImagesLink3,
		#hideImagesLink4, 
        #hideImagesLink5 {
            display: none; /* Ocultar el enlace de ocultar inicialmente */
        }