@media only screen and (max-width:400px){
   
   



    /*HEADER*/
    .container {
        margin: 0 auto 0;
        width: 80%;
        padding: 0;
    }
    
    .btn-menu label {
        color: #023c00;
        font-size: 15px;
        margin: 0;
        padding: 3px;
    }
    
    .logo h1 {
        margin-top: 1px;
        color: #023c00;
        font-size: 12px;
         /* Ajusta el espacio entre el texto "Menú" y el logotipo */
    }
    
    .menu a{
        padding: 0;
        margin: 0;
        font-size: 12px;
    }


    /*FIN HEADER*/


    /*footer */
    
    footer {
        margin: auto;
        overflow:none;
        color: #023c00;
        font-family: "Raleway", sans-serif;
        background-color: #f9f9f9;
      }
      
      
      
      .contenedor-footer {
        padding: 0px;
        display: flex;
        align-items: center; 
        justify-content: space-evenly;
      
      }
      
      .content-section{
        
        text-align: center;
        margin: 0;
      }
     
      .content-section img{
        width: 70%;
        height: auto;
        margin: 0;
      }
    
      .content-section p{ 
        margin-top: 5px;
        font-size: 20px;
        
      }
      .content-section h1{
    
        font-size: 15px;
      }
      
      .content-section a{		
        color: #023c00;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        text-decoration: none;
    
        font-size: 15px;
    
      }
    
      .content-section a:hover{		
        text-decoration: underline;
    
      }
    
      .loguitos{
        border-top: 1px solid #ccc;
      }
    
      .loguitos img{
        
        text-align: center;
        align-items: center;
        width: 10%;
        
      }
    
      .section-2 {
        
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
        padding: 20px; 
    }
    
    .section-2 img {
        justify-self: center;
        width: 100%;
        height: auto; 
        display: block;
    }
    
      .section-3{
        padding: 10px;
        border-left: 1px solid#ccc;
        text-align: left;
      }
    
      .marca{
        width: 60%;
        padding: 0;
        margin: 0;
      }

     
    
    
      .marca a img {
        width: 100%;
        justify-content: center;
      }
 

}



@media only screen and (max-width: 600px) {
  
    .botones-idiomas {
        position: relative; 
        top: 10%; 
        left: 0%; 
        transform: translate(0%, 0%);
        z-index: 2;
        text-align: center;

    }
    
    .botones-idiomas button {
        background-color: transparent;
        color: rgb(0, 0, 0);
        border: 1px solid#000000;
        padding: 2px 5px;
        margin: 0px;
        font-size: 10px;
        
    
    }


    .header {
        
        height: 40px;
        position: absolute;
        background-color: #ffffff;
    }

    /*Fin de Estilos para el encabezado*/

/*Menù lateral*/
.cont-menu{
    
    max-width: 100%;

    height: 100vh;
    position: absolute;
    transition: all 500ms ease;
    transform: translateX(-100%);
}

#btn-menu:checked ~ .container-menu .cont-menu{
    transform: translateX(0%);
    position: absolute;
    top: 0;
    left: 0;
}


.logo-slider{
    background-color: #5b9000;
    
}

.logo-slider img {
margin: 0 auto 0;
width: 300px;
height: 300px; 
display: flex;
justify-content: center;
align-items: center;  
}


.cont-menu nav {
margin-top: 2px;
transform: translateY(2%);
}

.cont-menu nav a {
border-bottom: 1px solid #91919179;
display: block;
text-decoration: none;
padding: 20px;
color: #000000;
border-left: 5px solid transparent;
transition: all 400ms ease;
}

.cont-menu nav a:hover {
font-weight: bold;
color: #fff;
border-left: 5px solid #236e00;
background: #6bad00d2;
border-radius: 10px;
}

.cont-menu label {
position: absolute;
right: 5px;
top: 10px;
color: #fff;
cursor: pointer;
font-size: 18px;
}

/*FIN MENU */
/* SLIDER A 1*/


.slider-frame {
	width: 100%;

}

.slider-frame ul {
	display: flex;
	padding: 0;
	width: 400%;
	animation: slide 20s infinite alternate ease-in-out;
}

.slider-frame li {
	width: 100%;
	list-style: none;
}

.slider-frame img {
	width: 100%;
    margin-top: 6%;
    position: relative;
    object-fit: contain;

}

@keyframes slide {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}
/*--------------*/
/* FIN SLIDER A1*/

/* SLIDER A 2*/


/*---------------*/

.prev-btn, .next-btn {
    
    
    top: 25%;
    
}
/* FIN SLIDER A2 */

/* SECTION 2 HORARIOS */

.Horarios-atencion {
    background: linear-gradient(to right, rgba(185, 185, 185, 0.208), #ffffff, #ffffff);
    width: 90%; /* Reducir el ancho para adaptarse mejor a pantallas más pequeñas */
    margin:50px auto; /* Centra horizontalmente */
    display: flex;
    flex-direction: column; /* Cambia la dirección del flujo a vertical */
    align-items: center; /* Centra los elementos horizontalmente */
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 10px; /* Agrega espacio interno */
}

.textos-horarios {
    width: 100%; /* Ocupa todo el ancho disponible */
}

.textos-horarios h1 {
    font-size: 16px; /* Aumenta el tamaño del texto */
    text-align: center; /* Centra horizontalmente */
    margin: 5px 0; /* Añade espacio entre el título y los enlaces */
}

.textos-horarios a {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration: none;
    font-size: 12px; /* Ajusta el tamaño del texto */
    color: #023c00;
    text-align: center; /* Centra horizontalmente */
    padding: 5px 10px; /* Añade espacio alrededor del texto */
    border-radius: 3px;
    border: 1px solid #ccc;
    margin: 5px 0; /* Añade espacio entre los enlaces */
}

.textos-horarios a:hover {
    background-color: #eaeaea;
}

.Horarios-atencion p {
    font-family: "Raleway", sans-serif;
    font-size: 12px; /* Ajusta el tamaño del texto */
    text-align: center; /* Centra horizontalmente */
}

.Horarios-atencion img {
    margin: 10px;
    width: 50%; /* Ajusta el ancho de la imagen al contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

.sedes-text p {
    font-family: "Raleway", sans-serif;
    margin: 5px 0; /* Añade espacio entre los párrafos */
    font-size: 12px; /* Ajusta el tamaño del texto */
    text-align: center; /* Centra horizontalmente */
}

#status-ubicacion1,
#status-ubicacion2 {
    padding: 5px;
    text-align: center;
    font-size: 12px; /* Ajusta el tamaño del texto */
}




/* FIN SECCION HORARIOS */

/*AHORRO INFANTIL */


.ahorro-infantil {
    display: flex;
    flex-direction: column; /* Cambia la dirección del flujo a vertical para dispositivos móviles */
    position: relative; /* Cambia a posición relativa para que los elementos hijos respeten este contenedor */
    height: auto; /* Establece la altura automática para que se ajuste al contenido */
    color: #ccc;
    text-align: center;
    background-size: 110%; /* Ajusta el fondo para cubrir completamente el contenedor */
    margin-top: 50px;
}

.textos-ahorro-infantil {
    text-align: center; /* Centra el texto horizontalmente */
    margin: 20px auto; /* Añade margen superior e inferior y centra horizontalmente */
    color: #fff;
}
.textos-ahorro-infantil h1 {
    margin: 0;
    font-size: 12px;

}
.textos-ahorro-infantil p {
    margin-top: 0;
    font-size: 0px;
    font-family: "Raleway", sans-serif;
}

.textos-ahorro-infantil a {
    width: 100%;
    font-family: "Raleway", sans-serif;
    text-decoration: none;
    font-size: 12px;
    color: #fff;
    text-align: center;
    padding: 3px;
    border-radius: 3px;
    border: 1px solid #ccc;
    margin-top: 1px;
}

.textos-ahorro-infantil a:hover {
    color: #023c00;
    background-color: #eaeaeacb;
}

/*FIN AHORRO INFANTIL */

/* INVERSION */
.inversion {
    width: 70%; /* Reducir el ancho para dispositivos más pequeños */
    margin: 50px auto; /* Ajustar los márgenes */
    text-align: center; /* Centrar el contenido interno */
    display: flex;
    flex-direction: column; /* Cambiar la dirección del flujo a columna para dispositivos móviles */
    align-items: center;
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 20px; /* Añadir espacio interno */
}

.inversion img {
    width: 50%; /* Ajustar el ancho de la imagen al 70% del contenedor */
    max-width: 40vh; /* Establecer un ancho máximo basado en la altura de la ventana */
    height: auto; /* Mantener la relación de aspecto */
    margin: 0 auto; /* Centrar horizontalmente */
}

.textos-inversion {
    text-align: center; /* Centrar el texto horizontalmente */
    margin: 20px auto; /* Añadir margen superior e inferior y centrar horizontalmente */
    width: 100%;
}

.textos-inversion p {
    margin-top: 20px;
    font-size: 16px; /* Reducir el tamaño de la fuente para dispositivos más pequeños */
    font-family: "Raleway", sans-serif;
}

.textos-inversion a {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration: none;
    display: inline-block; /* Hacer que el enlace sea un bloque para ocupar el ancho disponible */
    width: 40%; /* Establecer un ancho del 40% del contenedor */
    font-size: 14px; /* Reducir el tamaño de la fuente para dispositivos más pequeños */
    color: #000;
    text-align: center;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #ccc;
    margin: 20px auto 0;
}

.textos-inversion a:hover {
    color: #023c00;
    background-color: #eaeaeacb;
}
/* FIN INVERSION*/
/* FOOTER*/



.content-section p{ 
    margin-top: 5px;
    font-size: 0px;
    
  }

  .content-section h1{

    font-size: 0px;
  }
  
  .content-section a{		
    color: #023c00;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration: none;
    font-size: 0px;
    padding:0;
    margin: 0;

  }

  

  .marca img {
    justify-self: center;
    width: 120px;
  }

  .marca{
    width: 60%;
    padding: 0;
    margin: 0;
  }

 


  .marca a img {
    width: 100%;
    justify-content: center;
  }

  .content-section img{
    width: 80%;
  }

  .loguitos img{
    
    text-align: center;
    align-items: center;
    width: 8%;
  }

  .section-2 img {
    justify-self: center;
    width: 100%;
    height: auto; 
    display: block;
}
}
  /* Para pantallas con un ancho máximo de 1200px (pero mayor de 600px) */
  @media only screen and (min-width: 601px) and (max-width: 900px) {
    
    .botones-idiomas {
        position: relative; 
        top: 10%; 
        left: 0%; 
        transform: translate(0%, 0%);
        z-index: 2;
        text-align: center;

    }
    
    .botones-idiomas button {
        background-color: transparent;
        color: rgb(0, 0, 0);
        border: 1px solid#000000;
        padding: 2px 5px;
        margin: 0px;
        font-size: 10px;
        
    
    }
    .prev-btn, .next-btn {
    
        top: 30%;
       
    }
    

    .slider-frame img {
        width: 100%;
        margin-top: 9%;
        position: relative;
        object-fit: contain;
    
    }

    

    /* SLIDER A 2*/
/*Menù lateral*/
.cont-menu{
    
    max-width: 100%;

    height: 100vh;
    position: absolute;
    transition: all 500ms ease;
    transform: translateX(-100%);
}

#btn-menu:checked ~ .container-menu .cont-menu{
    transform: translateX(0%);
    position: absolute;
    top: 0;
    left: 0;
}

.logo-slider{
    background-color: #5b9000;
    
}

.logo-slider img {
margin: 0 auto 0;
width: 300px;
height: 300px; 
display: flex;
justify-content: center;
align-items: center;  
}


.cont-menu nav {
margin-top: 2px;
transform: translateY(2%);
}

.cont-menu nav a {
border-bottom: 1px solid #91919179;
display: block;
text-decoration: none;
padding: 20px;
color: #000000;
border-left: 5px solid transparent;
transition: all 400ms ease;
}

.cont-menu nav a:hover {
font-weight: bold;
color: #fff;
border-left: 5px solid #236e00;
background: #6bad00d2;
border-radius: 10px;
}

.cont-menu label {
position: absolute;
right: 5px;
top: 10px;
color: #fff;
cursor: pointer;
font-size: 18px;
}

/*FIN MENU */

/*---------------*/


/* FIN SLIDER A2 */

/* SECTION 2 HORARIOS */

.Horarios-atencion {
    background: linear-gradient(to right, rgba(185, 185, 185, 0.208), #ffffff, #ffffff);
    width: 90%; /* Reducir el ancho para adaptarse mejor a pantallas más pequeñas */
    margin:50px auto; /* Centra horizontalmente */
    display: flex;
    flex-direction: column; /* Cambia la dirección del flujo a vertical */
    align-items: center; /* Centra los elementos horizontalmente */
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 10px; /* Agrega espacio interno */
}

.textos-horarios {
    width: 100%; /* Ocupa todo el ancho disponible */
}

.textos-horarios h1 {
    font-size: 16px; /* Aumenta el tamaño del texto */
    text-align: center; /* Centra horizontalmente */
    margin: 5px 0; /* Añade espacio entre el título y los enlaces */
}

.textos-horarios a {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    width: 70%;
    
    text-decoration: none;
    font-size: 12px; /* Ajusta el tamaño del texto */
    color: #023c00;
    text-align: center; /* Centra horizontalmente */
    padding: 5px 10px; /* Añade espacio alrededor del texto */
    border-radius: 3px;
    border: 1px solid #ccc;
    margin: 5px auto 0; /* Añade espacio entre los enlaces */
}



.Horarios-atencion p {
    font-family: "Raleway", sans-serif;
    font-size: 12px; /* Ajusta el tamaño del texto */
    text-align: center; /* Centra horizontalmente */
}

.Horarios-atencion img {
    margin: 10px;
    width: 50%; /* Ajusta el ancho de la imagen al contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

.sedes-text p {

    margin: 5px 0; /* Añade espacio entre los párrafos */
    font-size: 12px; /* Ajusta el tamaño del texto */
    text-align: center; /* Centra horizontalmente */
}


/* FIN SECCION HORARIOS */
/*AHORRO INFANTIL */




.textos-ahorro-infantil {
    text-align: center; /* Centra el texto horizontalmente */
    margin: 20px auto; /* Añade margen superior e inferior y centra horizontalmente */
    color: #fff;
}
.textos-ahorro-infantil h1 {
    margin: 0;
    font-size: 20px;

}
.textos-ahorro-infantil p {
    margin-top: 0;
    font-size: 14px;
    font-family: "Raleway", sans-serif;
}

.textos-ahorro-infantil a {
    width: 100%;
    font-family: "Raleway", sans-serif;
    text-decoration: none;
    font-size: 12px;
    color: #fff;
    text-align: center;
    padding: 3px;
    border-radius: 3px;
    border: 1px solid #ccc;
    margin-top: 10px;
}

.textos-ahorro-infantil a:hover {
    color: #023c00;
    background-color: #eaeaeacb;
}

/*FIN AHORRO INFANTIL */
/* INVERSION */
.inversion {
    width: 90%; /* Reducir el ancho para dispositivos más pequeños */
    margin: 50px auto; /* Ajustar los márgenes */
    text-align: center; /* Centrar el contenido interno */
    display: flex;
    flex-direction: column; /* Cambiar la dirección del flujo a columna para dispositivos móviles */
    align-items: center;
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 20px; /* Añadir espacio interno */
}

.inversion img {
    width: 60%; /* Ajustar el ancho de la imagen al 70% del contenedor */
    max-width: 40vh; /* Establecer un ancho máximo basado en la altura de la ventana */
    height: auto; /* Mantener la relación de aspecto */
    margin: 0 auto; /* Centrar horizontalmente */
}

.textos-inversion {
    text-align: center; /* Centrar el texto horizontalmente */
    margin: 20px auto; /* Añadir margen superior e inferior y centrar horizontalmente */
    width: 100%;
}

.textos-inversion p {
    margin-top: 20px;
    font-size: 16px; /* Reducir el tamaño de la fuente para dispositivos más pequeños */
    font-family: "Raleway", sans-serif;
}

.textos-inversion a {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration: none;
    display: inline-block; /* Hacer que el enlace sea un bloque para ocupar el ancho disponible */
    width: 40%; /* Establecer un ancho del 40% del contenedor */
    font-size: 14px; /* Reducir el tamaño de la fuente para dispositivos más pequeños */
    color: #000;
    text-align: center;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #ccc;
    margin: 20px auto 0;
}

.textos-inversion a:hover {
    color: #023c00;
    background-color: #eaeaeacb;
}
/* FIN INVERSION*/
}

@media only screen and (min-width: 901px) and (max-width: 1250px) {
/*---------------*/
.botones-idiomas {
    position: relative; 
    top: 10%; 
    left: 0%; 
    transform: translate(0%, 0%);
    z-index: 2;
    text-align: center;

}

.botones-idiomas button {
    background-color: transparent;
    color: rgb(0, 0, 0);
    border: 1px solid#000000;
    padding: 2px 5px;
    margin: 0px;
    font-size: 15px;
    

}
.prev-btn, .next-btn {
    top: 25%;
}

.logo-slider{
    background-color: #5b9000;
    
}

.logo-slider img {
margin: 0 auto 0;
width: 300px;
height: 300px; 
display: flex;
justify-content: center;
align-items: center;  
}


/* FIN SLIDER A2 */

/* HORARIOS */
.Horarios-atencion {
    background: linear-gradient(to  right, rgba(185, 185, 185, 0.208),#ffffff, #ffffff);
    width: 90%;
  
}
/* FIN HORARIOS */

/*AHORRO INFANTIL */




.textos-ahorro-infantil {
    text-align: center; /* Centra el texto horizontalmente */
    margin: 20px auto; /* Añade margen superior e inferior y centra horizontalmente */
    color: #fff;
}
.textos-ahorro-infantil h1 {
    margin: 0;
    font-size: 25px;

}
.textos-ahorro-infantil p {
    margin-top: 0;
    font-size: 17px;
    font-family: "Raleway", sans-serif;
}

.textos-ahorro-infantil a {
    width: 100%;
    font-family: "Raleway", sans-serif;
    text-decoration: none;
    font-size: 19px;
    color: #fff;
    text-align: center;
    padding: 3px;
    border-radius: 3px;
    border: 1px solid #ccc;
    margin-top: 15px;
}

.textos-ahorro-infantil a:hover {
    color: #023c00;
    background-color: #eaeaeacb;
}

/*FIN AHORRO INFANTIL */

    /* INVERSION */
.inversion {
    width: 90%; /* Reducir el ancho para dispositivos más pequeños */
    margin: 50px auto 0; /* Ajustar los márgenes */
    text-align: center; /* Centrar el contenido interno */
    display: flex;
    flex-direction: column; /* Cambiar la dirección del flujo a columna para dispositivos móviles */
    align-items: center;
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 10px; /* Añadir espacio interno */
}

.inversion img {
    width: 50%; /* Ajustar el ancho de la imagen al 70% del contenedor */
    max-width: 40vh; /* Establecer un ancho máximo basado en la altura de la ventana */
    height: auto; /* Mantener la relación de aspecto */
    margin: 0 auto; /* Centrar horizontalmente */
}

.textos-inversion {
    text-align: center; /* Centrar el texto horizontalmente */
    margin: 20px auto; /* Añadir margen superior e inferior y centrar horizontalmente */
    width: 100%;
}

.textos-inversion p {
    margin-top: 20px;
    font-size: 20px; /* Reducir el tamaño de la fuente para dispositivos más pequeños */
    font-family: "Raleway", sans-serif;
}

.textos-inversion a {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration: none;
    display: inline-block; /* Hacer que el enlace sea un bloque para ocupar el ancho disponible */
    width: 40%; /* Establecer un ancho del 40% del contenedor */
    font-size: 20px; /* Reducir el tamaño de la fuente para dispositivos más pequeños */
    color: #000;
    text-align: center;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #ccc;
    margin: 20px auto 0;
}

.textos-inversion a:hover {
    color: #023c00;
    background-color: #eaeaeacb;
}
/* FIN INVERSION*/

/*  horarios de atenncion IMG */


}

@media only screen and (min-width: 0px) and (max-width: 700px) {
    

    
    /*-------BUTTON------*/
#expand-btn {
    font-size: 10px;
    width: 200px;
    height: 35px;
}

#expand-btn a{
    text-align: center;
    margin: 0 auto 0;
}

.Horarios-atencion img{
    border-radius: 50%;

}

}

@media only screen and (min-width: 0px) and (max-width: 900px) {
    
    

.Horarios-atencion img{
    border-radius: 50%;
    width: 200px;
}

}