/* --- CÓDIGO NUEVO PARA DOS COLUMNAS --- */

/* Contenedor principal: Ampliamos el ancho y usamos Flex */
.flexy-menu ul.doble-columna {
    width: 500px !important;
    display: none;
    padding: 0 !important;
   	z-index: 999999 !important; 
	
}

/* Definición de cada columna al 50% */
.col-menu {
    width: 50% !important;
    display: flex;
    flex-direction: column;
}

 




@media only screen and (min-width: 769px) {
    /* Esto hace que al hacer CLIC (clase .active), se vea en 2 columnas */
    .flexy-menu li.active > ul.doble-columna {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .col-menu {
        width: 50% !important;
        display: flex;
        flex-direction: column;
        float: left;
    }
}






/* Ajuste de los items para que ocupen todo el ancho de su columna */
.flexy-menu ul.doble-columna li {
    width: 100% !important;
    clear: both !important;
}

/* Estilo para los títulos (Por tipo / Por localidad) */
.flexy-menu ul.doble-columna li.menu-titulo a {
    background: #111 !important;
    color: #8CC9CC !important;
    font-weight: 700;
    font-size: 11px;
    border-bottom: 2px solid #8CC9CC;
}

/* Ajuste para que en celulares se vea uno abajo del otro */
@media only screen and (max-width: 768px) {
    .flexy-menu ul.doble-columna {
        width: 100% !important;
        flex-direction: column !important;
    }
    .col-menu {
        width: 100% !important;
    }
}

/* --- AJUSTES FINALES --- */

/* 1. Ver todo en ancho completo */
.ver-todo-full {
    width: 100% !important;
    clear: both;
}
.ver-todo-full a {
    background: #1a1a1a !important; /* Un tono distinto */
    text-align: center;
    color: #8CC9CC !important;
    font-weight: 700 !important;
    border-top: 1px solid #333;
}

/* 2. Distinción en vista celular */
@media only screen and (max-width: 768px) {
    /* Fondo sutil para el bloque de Inmobiliaria en el móvil */
    .flexy-menu ul.doble-columna {
        background: #f9f9f9 !important; /* Fondo claro para diferenciarlo del blanco del resto */
        border-left: 4px solid #8CC9CC; /* Una línea lateral de color */
    }

    /* Estilo para que los títulos se vean como separadores reales en el móvil */
    .flexy-menu ul.doble-columna li.menu-titulo a {
        background: #eee !important;
        color: #333 !important;
        padding-left: 20px !important;
        font-size: 12px;
        text-transform: uppercase;
    }

    /* Ajuste para que 'Quienes somos' y el resto mantengan su estilo limpio */
    .flexy-menu > li > a {
        border-bottom: 1px solid #eee;
    }
}

/* --- CORRECCIÓN FINAL: VER TODO ABAJO --- */

.flexy-menu ul.doble-columna {
    flex-wrap: wrap !important; /* Permite que los elementos salten de línea si no caben */
}

.ver-todo-full {
    width: 100% !important; /* Ocupa todo el ancho */
    flex: 0 0 100%; /* Obliga a que no se comporte como columna */
    clear: both;
}

.ver-todo-full a {
    background: #111 !important; /* Fondo más oscuro para destacar */
    color: #8CC9CC !important;
    text-align: center !important;
    padding: 15px 0 !important;
    font-weight: bold !important;
    border-top: 1px solid #333;
}




/* Distinción para Celulares */
@media only screen and (max-width: 768px) {
    .flexy-menu ul.doble-columna {
        background: #fdfdfd !important; /* Fondo apenas grisado */
        border-left: 5px solid #8CC9CC; /* Línea de color a la izquierda */
        padding-top: 10px !important;
    }

    .flexy-menu ul.doble-columna li.menu-titulo a {
        background: #f0f0f0 !important;
        color: #333 !important;
        font-size: 13px !important;
        margin-top: 5px;
    }
	
	
}




/* --- AJUSTES DE COLOR PARA CELULAR --- */

@media only screen and (max-width: 768px) {
    /* Contenedor de Inmobiliaria: Fondo sutilmente distinto para agrupar */
    .flexy-menu ul.doble-columna {
        background: #fcfcfc !important; 
        border-left: 6px solid #8CC9CC !important; /* Línea lateral de marca */
    }

    /* Títulos internos en móvil (Por tipo / Por localidad) */
    .flexy-menu ul.doble-columna li.menu-titulo a {
        background: #f0f0f0 !important;
        color: #333 !important;
        border-bottom: 1px solid #ddd !important;
    }

    /* EL BOTÓN VER TODO EN MÓVIL */
    .ver-todo-full a {
        background: #222 !important; /* Fondo oscuro para que sea un botón claro */
        color: #FFFFFF !important;  /* TEXTO BLANCO SIEMPRE EN MÓVIL */
        text-align: center !important;
        font-weight: bold !important;
        padding: 15px !important;
    }
	
	    /* EL BOTÓN VER TODO EN MÓVIL */
    .ver-todo-full a:hover {
        background: #222 !important; /* Fondo oscuro para que sea un botón claro */
        color: #FFFFFF !important;  /* TEXTO BLANCO SIEMPRE EN MÓVIL */
        text-align: center !important;
        font-weight: bold !important;
        padding: 15px !important;
    }

    /* Quienes Somos y Contacto (Mantienen su estilo original blanco/negro) */
    .flexy-menu > li > a {
        background: #ffffff !important;
        color: #000000 !important;
    }
}



/* --- SOLUCIÓN DEFINITIVA VER TODO --- */

/* 1. Estado Normal: Centrado y sin movimiento */
.flexy-menu ul.doble-columna li.ver-todo-full a {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    padding: 15px 0 !important; /* Espaciado parejo arriba y abajo */
    padding-left: 0 !important;  /* BLOQUEA EL DESPLAZAMIENTO */
    margin: 0 !important;
    color: #8CC9CC !important;
    background: #111 !important;
    transition: none !important; /* ELIMINA LA ANIMACIÓN DE MOVIMIENTO */
    text-indent: 0 !important;
}

/* 2. Estado Hover: Solo cambia el color, NO SE MUEVE */
.flexy-menu ul.doble-columna li.ver-todo-full a:hover {
    color: #FFFFFF !important;    /* TEXTO BLANCO FORZADO */
    background: #000000 !important; /* FONDO NEGRO */
    padding-left: 0 !important;    /* REFUERZO PARA QUE NO SE CORRA */
    text-indent: 0 !important;     /* REFUERZO ANTI-DESPLAZAMIENTO */
    transform: none !important;    /* POR SI HAY ALGUNA ESCALA */
}

/* 3. Vista Celular: Blanco fijo y sin bordes raros */
@media only screen and (max-width: 768px) {
    .flexy-menu ul.doble-columna li.ver-todo-full a,
    .flexy-menu ul.doble-columna li.ver-todo-full a:hover {
        color: #FFFFFF !important;
        background: #222 !important;
        text-align: center !important;
        padding-left: 0 !important;
        text-indent: 0 !important;
    }
}






/* --- UNIFICANDO ESTILO CELULAR EN VISTA PC --- */

@media only screen and (min-width: 769px) {
    .flexy-menu ul.doble-columna {
        background: #fcfcfc !important; /* Fondo grisado como en el celular */
        border-left: 6px solid #8CC9CC !important; /* El borde celeste lateral */
        padding: 10px 0 !important;
        box-shadow: 0px 4px 15px rgba(0,0,0,0.1); /* Sombra para que flote sobre el contenido */
    }

    /* Títulos con el mismo estilo que el celular */
    .flexy-menu ul.doble-columna li.menu-titulo a {
        background: #f0f0f0 !important;
        color: #333 !important;
        margin-bottom: 5px;
    }
    
    /* Separación sutil entre items */
    .flexy-menu ul.doble-columna li a {
        color: #444 !important; /* Un gris oscuro en lugar de blanco para el fondo claro */
    }

    .flexy-menu ul.doble-columna li a:hover {
        background: #8CC9CC !important;
        color: #fff !important;
    }
}




/* --- AJUSTES DE COLORES Y BORDES --- */

 

/* 2. Títulos sin el borde celeste (Cambiado a Gris) */
.flexy-menu ul.doble-columna li.menu-titulo a {
    background: #f0f0f0 !important;
    color: #000 !important; /* Texto gris oscuro */
    border-bottom: 2px solid #ccc !important; /* Borde gris en lugar de celeste */
    font-size: 12px !important;
}

/* 3. Bordes inferiores de los items en gris */
.flexy-menu ul.doble-columna li {
    border-bottom: 1px solid #eee !important; /* Línea gris muy suave entre items */
}

/* 4. El botón "Ver todo" con borde superior gris */
.ver-todo-full a {
    border-top: 1px solid #ccc !important;
  
    color: #fff !important;
}

/* Ajuste para que los links normales no tengan el celeste si no querés */
.flexy-menu ul.doble-columna li a {
    color: #555 !important;
}

/* Hover de los links: mantenemos tu celeste de marca solo aquí para que resalte al tocar */
.flexy-menu ul.doble-columna li a:hover {
    background: #f5f5f5 !important;
    color: #8CC9CC !important; 
    padding-left: 5px !important; /* Un pequeño movimiento suave */
}



/* --- CORRECCIÓN FINAL BORDES Y TRANSPARENCIA --- */

/* 1. Fondo casi opaco (menos transparencia) */
.flexy-menu ul.doble-columna {
    background: rgba(255, 255, 255, 0.98) !important; /* Blanco casi sólido */
    border-bottom: none !important;
}

/* 2. Forzar bordes grises en los items y quitar el negro */
.flexy-menu ul.doble-columna li {
    border-bottom: 1px solid #ddd !important; /* Gris suave */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* 3. Títulos con borde gris (no celeste) y fondo sólido */
.flexy-menu ul.doble-columna li.menu-titulo a {
    background: #f4f4f4 !important;
    color: #000 !important;
    border-bottom: 2px solid #ccc !important; /* Gris más marcado para títulos */
    padding-left: 15px !important;
}

/* 4. Quitar el borde negro de los enlaces al pasar el mouse */
.flexy-menu ul.doble-columna li a:hover {
    border-bottom: 1px solid #ddd !important;
    background: #f9f9f9 !important;
}

/* 5. El botón "Ver todo" con separación gris */
.ver-todo-full a {
    border-top: 1px solid #ccc !important;
    background: #222 !important;
    color: #fff !important;
}

/* Ajuste para celular: replicar el estilo sólido */
@media only screen and (max-width: 768px) {
    .flexy-menu ul.doble-columna {
        background: #ffffff !important;
        border-left: 6px solid #8CC9CC !important;
    }
}






/* --- ELIMINAR ESTILO DE BOTÓN EN TÍTULOS --- */

.flexy-menu ul.doble-columna li.menu-titulo {
    background: transparent !important; /* Quita el fondo gris */
    border-bottom: 1px solid #ddd !important; /* Mantiene una línea guía fina */
    padding: 10px 15px !important;
    cursor: default !important; /* Quita la manito del mouse */
}

.flexy-menu ul.doble-columna li.menu-titulo span,
.flexy-menu ul.doble-columna li.menu-titulo a {
    background: none !important;
    color: #888 !important; /* Color gris suave para que no compita con los links */
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 1px;
    display: block;
    pointer-events: none; /* Hace que no se pueda hacer click */
}

/* Quitamos cualquier sombra o efecto hover que pueda haber quedado */
.flexy-menu ul.doble-columna li.menu-titulo:hover {
    background: transparent !important;
}








 .flexy-menu ul.doble-columna {
  padding: 0 !important;
}


/* CODIGO MADRE */


.content{height: auto; width:55%; padding:0 0 0px  2%; float:right;   }
 

.flexy-menu{margin: 0px 0 0 0 !important;}
.flexy-menu{width: 100%;margin:0px;padding: 0;position:relative;float:left;font-family:'Poppins',sans-serif;list-style: none;  }

.flexy-menu li{display:inline-block;font-size:15px;margin:0;padding:0;float:left;line-height: 22px;position:relative; font-weight:500; letter-spacing: 1px; }

.flexy-menu > li > a{padding:37px 22px;color:#fff;text-decoration:none;display:block;text-transform:;-webkit-transition:color 0.2s linear, background 0.2s linear;-moz-transition:color 0.2s linear, background 0.2s linear;-o-transition:color 0.2s linear, background 0.2s linear;transition:color 0.2s linear, background 0.2s linear; text-transform:uppercase;  filter: alpha(opacity=70); /* internet explorer */
    -khtml-opacity: 0.7;      /* khtml, version anterior de safari */
    -moz-opacity: 0.7;       /* firefox, mozilla, netscape */
    opacity: 0.7;           /* safari, chrome, opera */
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /*internet explorer 8 - gracias Andres */ } /*! color de menu a * ------- */

.flexy-menu li:hover > a,.flexy-menu li.active a{ color: #fff; font-weight:500; }
.flexy-menu li.right{float: right;}

.flexy-menu ul, .flexy-menu ul li ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;z-index: 99999;width: 250px; font-size:11px;}


.flexy-menu ul{top: 95px;left: 0; font-family:'Poppins',sans-serif; text-transform:uppercase; 	  filter: alpha(opacity=85); /* internet explorer */
    -khtml-opacity: 0.85;      /* khtml, version anterior de safari */
    -moz-opacity: 0.85;       /* firefox, mozilla, netscape */
    opacity: 0.85;           /* safari, chrome, opera */
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; /*internet explorer 8 - gracias Andres */ /* IE */}

.flexy-menu ul li ul{top: 0;left: 100%;  }
.flexy-menu ul li{clear:both;width:100%;border: none;font-size:12px; }
 
.flexy-menu ul li a{padding:6px 20px;width:100%;color:#fff;font-size:13px;text-decoration:none;display:inline-block;float:left;
clear:both;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-transition:color 0.2s linear, background 0.2s linear;-moz-transition:color 0.2s linear, background 0.2s linear;-o-transition:color 0.2s linear, background 0.2s linear;transition:color 0.2s linear, background 0.2s linear;  
border-bottom:1px solid #999; font-weight:600;}
 


.flexy-menu > li .indicator{position: absolute;color: #fff;top: 25px;right: 2%;font-size: 17px; font-family:Arial, Helvetica, sans-serif; font-weight:100;  filter: alpha(opacity=70); /* internet explorer */
    -khtml-opacity: 0.7;      /* khtml, version anterior de safari */
    -moz-opacity: 0.7;       /* firefox, mozilla, netscape */
    opacity: 0.7;           /* safari, chrome, opera */
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /*internet explorer 8 - gracias Andres */}  /*! color de menu a * ------- */

 

.flexy-menu ul > li .indicator{top: 10px;right: 8px;}
 

.thin > li > a{padding: 10px 22px;}
.thin ul{top: 40px;}
.thin > li .indicator{top: 10px;}
.thick > li > a{padding: 40px 22px;}
.thick ul{top: 100px;}
.thick > li .indicator{top: 40px;}

.flexy-menu i{line-height: 20px !important;margin-right: 6px;font-size: 8px;float: left;}
.flexy-menu > li.showhide{display: none;width: 100%;height: 50px;cursor: pointer;color:#dedede;border-bottom: solid 1px rgba(0, 0, 0, 0.1);background: #222; border-bottom:1px solid #111;} /*! borde bottom de la barra menu chica * -------------------------- */

.flexy-menu > li.showhide span.title{margin: 16px 0 0 25px;float: left;}
.flexy-menu > li.showhide span.icon{margin: 17px 20px;float: right;}
.flexy-menu > li.showhide .icon em{margin-bottom: 3px;display: block;width: 20px;height: 2px;background: #ccc;}

.orange li:hover > a, .orange li.active a{background:rgba(116, 160, 162, 1);color: #fff!important; }  /*!color encabezado principal cuando poso mouse*/


 
@media only screen and (max-width: 1240px){  .flexy-menu > li > a{padding:37px 15px; }}

@media only screen and (max-width: 1140px){ .content{width:58%;} .flexy-menu > li > a{padding:37px 13px; } 
.fotoindex {width:20%; margin:0px; padding:10px 0px 0px 0px;  border:none;  float:left;    height:85px; text-align:right;}}
 
@media only screen and (max-width: 1300px){ .content{width:60%;} }

@media only screen and (max-width: 1000px){  .flexy-menu > li > a{padding:37px 9px; } .content{width:65%;} .flexy-menu > li > a{ font-size:14px; }}
 
@media only screen and (max-width:855px){.flexy-menu > li > a{padding:37px 7px; } .content{width:62%; } .flexy-menu > li > a{ font-size:12px; }}

 

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

.content{  width:100%; height:auto; padding:0; margin-top:0px; background:none; float:left;   filter: alpha(opacity=70); /* internet explorer */
  -webkit-box-sizing: inherit;   -webkit-font-smoothing: antialiased; 
    -khtml-opacity: 0.7;      /* khtml, version anterior de safari */
    -moz-opacity: 0.7;       /* firefox, mozilla, netscape */
    opacity: 0.7;           /* safari, chrome, opera */
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" background: #222; display:table;   }
 
.flexy-menu > li.showhide{display: none;width: 100%;height: 50px;cursor: pointer;color:#fff;border-bottom: solid 1px rgba(0, 0, 0, 0.1);background:  #212121;  border-bottom:0px solid #ddd;  } /*! borde bottom de la barra menu chica * -------------------------- */
.flexy-menu > li.showhide .icon em{margin-bottom: 3px;display: block;width: 20px;height: 2px;background: #fff;}
.flexy-menu ul li{border-bottom:1px solid #fff ;}
.flexy-menu ul li a{ border-bottom:1px solid #ddd; color:#4A4A4A; font-size:12px; }
.flexy-menu ul li a:hover{ background:#f1f1f1; color:#4A4A4A;}


.flexy-menu > li .indicator{color:#222;}
  
.orange li:hover > a, .orange li.active a{background: #f1f1f1;color: #000!important;  }

.flexy-menu{background:none;  width:100%;  }

.flexy-menu li{ border-bottom:1px solid #; font-size:13px; }
.flexy-menu > li > a{  border-bottom:1px solid #d9d9d9;}

.flexy-menu ul{   }
 
.flexy-menu.vertical{width: 100%;}
.flexy-menu li{display: block;width: 100%;}

.flexy-menu li img{width: 24px; height:16px;}

li { text-decoration:none;}
ul { text-decoration:none; }

.flexy-menu > li > a{padding-top:15px;padding-bottom:15px;padding-left: 25px; color:#000;  background:#FFFFFF;}
.flexy-menu a{width: 100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.flexy-menu ul, .flexy-menu ul li ul,.flexy-menu.vertical ul, .flexy-menu.vertical ul li ul{width: 100%;left: 0;border-left: none;position: static;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; background: #fff;}


.flexy-menu ul li{border-left: none;border-right: none;}
.flexy-menu ul li a,.flexy-menu.vertical ul li a{padding-top:10px;padding-bottom:10px;  background:#FFFFFF;}
.flexy-menu ul > li > a{padding-left: 40px !important;}
.flexy-menu > li .indicator{top: 15px;right: 25px; }
.flexy-menu ul > li .indicator{right: 24px;}
.flexy-menu.vertical ul > li .indicator{top: 10px;right: 15px;}
.flexy-menu > li > ul > li > a{padding-left: 40px !important;}
.flexy-menu > li > ul > li > ul > li > a{padding-left: 60px !important;}
.flexy-menu > li > ul > li > ul > li > ul > li > a{padding-left: 80px !important;}

}
  
  
 
	
	
	
	
	
	
	
	
	
/* --- AJUSTE TÍTULOS SIN BOTÓN Y TAMAÑO IGUALADO --- */

/* 1. Quitamos el fondo y el puntero de botón a los títulos */
.flexy-menu ul.doble-columna li.menu-titulo {
    background: transparent !important;
    border-bottom: 1px solid #ddd !important; /* Borde gris suave */
    padding: 12px 15px !important;
    cursor: default !important;
}

/* 2. Igualamos el tamaño a 15px y quitamos estilo de link */
.flexy-menu ul.doble-columna li.menu-titulo a,
.flexy-menu ul.doble-columna li.menu-titulo span {
    font-size: 12px !important; /* MISMO TAMAÑO QUE EL RESTO */
    color: #444 !important;    /* GRIS OSCURO (No celeste) */
    font-weight: 700 !important;
    background: none !important;
    text-transform: uppercase;
    pointer-events: none !important; /* No clickeable */
    display: block !important;
    border: none !important;
    padding: 0 !important;
}

/* 3. Aseguramos que el fondo del submenú sea casi sólido */
.flexy-menu ul.doble-columna {
    background: rgba(255, 255, 255, 0.98) !important;
}

/* 4. Bordes inferiores grises para todos los items */
.flexy-menu ul.doble-columna li {
    border-bottom: 1px solid #eee !important;
}

/* 5. Hover de los links normales (Para que no se vea negro) */
.flexy-menu ul.doble-columna li a:hover {
    background: # !important;
    color: #8CC9CC !important;
}



/* --- MANEJO DE COLUMNAS: PC VS CELULAR --- */

/* 1. CONFIGURACIÓN PARA PC (Escritorio) */
@media only screen and (min-width: 769px) {
    .col-menu {
        width: 50% !important; /* Dos columnas en PC */
        display: flex;
        flex-direction: column;
        float: left;
        box-sizing: border-box !important;
    }
}

/* 2. CONFIGURACIÓN PARA CELULAR */
@media only screen and (max-width: 768px) {
    .col-menu {
        width: 100% !important; /* Todo a lo largo en el celular */
        display: block;
        float: none;
        box-sizing: border-box !important;
    }
    
    .flexy-menu ul.doble-columna {
        flex-direction: column !important; /* Los bloques se apilan */
    }
}

/* 3. FIX DE LÍNEAS (Para ambos) */
.flexy-menu ul.doble-columna li {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    float: none !important;
}






/* --- FIX: SIN DESPLAZAMIENTO Y MEJOR CONTRASTE --- */

/* 1. Anulamos cualquier movimiento o desplazamiento en toda la columna */
.flexy-menu ul.doble-columna li a, 
.flexy-menu ul.doble-columna li.menu-titulo a,
.flexy-menu ul.doble-columna li.menu-titulo span {
    padding-left: 15px !important; /* Mantiene un margen fijo a la izquierda */
    transition: none !important;    /* ELIMINA LA ANIMACIÓN DE MOVIMIENTO */
    text-indent: 0 !important;      /* BLOQUEA EL DESPLAZAMIENTO DEL TEXTO */
}

/* 2. Oscurecemos el texto para mejor contraste (Gris casi negro) */
.flexy-menu ul.doble-columna li a {
    color: #222 !important; /* Texto mucho más oscuro y legible */
}

/* 3. Evitamos que se corra al pasar el mouse (Hover) */
.flexy-menu ul.doble-columna li a:hover {
    padding-left: 15px !important; /* Mismo padding que el estado normal */
    background: #f0f0f0 !important; /* Fondo sutil para notar el toque */
    color: #3F8AA0 !important;      /* El celeste de marca solo en el texto al pasar el mouse */
    text-indent: 0 !important;
}

/* 4. Ajuste para los títulos (Por tipo / Localidad) */
.flexy-menu ul.doble-columna li.menu-titulo {
    border-bottom: 1px solid #ccc !important;
}

.flexy-menu ul.doble-columna li.menu-titulo span,
.flexy-menu ul.doble-columna li.menu-titulo a {
    color: #000 !important; /* Títulos en negro puro para máximo contraste */
    font-weight: 800 !important;
}



@media only screen and (max-width: 768px) {
    .flexy-menu ul.doble-columna {
        display: none; /* Sin important */
        width: 100% !important;
        position: static !important;
    }
    
    .flexy-menu li.active > ul.doble-columna {
        display: block !important; /* En móvil, lista simple hacia abajo */
    }

    .col-menu {
        width: 100% !important;
        display: block !important;
    }
}