/* El contenedor del panel. Lo abre/cierra js/menu.js con slideUp/slideDown
   (display inline), asi que alcanza con el id. */
#megamenu {
   display: none;
}

/* Se oculta lo NO activo en vez de mostrar lo activo, para no inventarle un
   display al panel: el activo conserva el que le da la plantilla (flex, grid
   o block, segun la maqueta).
   Especificidad (0,3,0): tiene que ganarle a .u-list:not(.u-repeater) de
   main.css, que es (0,2,0). Con el selector plano .u-megamenu-categoria (0,1,0)
   los paneles nunca se ocultaban y quedaban todos visibles a la vez. */
.u-megamenu .u-megamenu-categoria:not(.active) {
   display: none;
}

/* El u-sheet de la maqueta trae un min-height calculado con tarjetas de
   titulo + imagen + sublista. Mientras el panel imprima solo titulos, ese alto
   deja un hueco enorme debajo. (0,2,0) y carga despues de plantilla.css. */
.u-megamenu .u-sheet {
   min-height: 0;
}

ul.nav-megamenu {
   display: flex;
   list-style: none;
   justify-content: center;
   align-content: center;
}
.nav-megamenu li {
   margin: 5px 0;
   padding: 0 10px;
   border-right: 1px solid #030303;
}
.nav-megamenu li:last-child {
   border-right: none;
}
.nav-megamenu li .link-megamenu {
   cursor: pointer;
   text-transform: capitalize;
   color: black;
   font-weight: 400;
}
.nav-megamenu li .active {
   color: #4b99e2;
}

.u-megamenu .container-ul-subcategorias2 ul {
   max-height: 135px;
   overflow: hidden;
   padding-left: 0;
   text-transform: capitalize;
   /*transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);*/
}
.u-megamenu .container-ul-subcategorias2 ul > li {
   list-style: none;
}
.u-megamenu .ul-subcategorias2-visible ul {
   max-height: 100%;
   overflow: visible;
   /*transition: max-height 0.5s ease-in-out;*/
}
.u-megamenu .ul-desplegar {
   margin-left: 0;
   margin-top: 5px;
}
.u-megamenu .ul-desplegar a {
   margin: 0;
   color: #000;
   cursor: pointer;
   font-size: 0.9rem;
   transform: rotate(0);
   letter-spacing: inherit;
}
.u-megamenu .ul-subcategorias2-visible .ul-desplegar i {
   transform: rotate(180deg);
}
/* Again, you’re free to use and define the classes: */
.column { float: left; }
.size-1of1 { 
   width: 100%; 
}
.size-1of2 { 
   width: 50%; 
}
.size-1of3 { 
   width: 33.333%; 
}
.size-1of4 { 
   width: 25%; 
}

@media screen and (max-width: 480px){
	#grid[data-columns]::before {
		content: '1 .column.size-1of1';
	}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	#grid[data-columns]::before {
		content: '2 .column.size-1of2';
	}
}
@media screen and (min-width: 769px) {
	#grid[data-columns]::before {
		content: '3 .column.size-1of3';
	}
}
@media screen and (min-width: 991px) {
	#grid[data-columns]::before {
		content: '4 .column.size-1of4';
	}
}