/* Apertura del megamenú por click (clase .open) en lugar de :hover.
   Se aplica desde 1020px, que es el breakpoint donde main.css activa el hover.
   Por debajo de 1020px el menú ya funciona por click (clase .opened). */
@media all and (min-width: 1020px){
    #megamenu .megamenu-nav > li.dropdown > .dropdown-toggle{
        cursor: pointer;
    }
    #megamenu .megamenu-nav > li.dropdown:not(.open) > .dropdown-menu{
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        -webkit-transform: translate3d(0, -5px, 0) !important;
        transform: translate3d(0, -5px, 0) !important;
    }
    #megamenu .megamenu-nav > li.dropdown.open > .dropdown-menu{
        top: auto;
        display: block;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
    }
    #megamenu .megamenu-nav > li.dropdown-menu-full.open > a::before{
        border-bottom: 2px solid #000;
        content: "";
        position: absolute;
        left: 10px;
        bottom: 0;
        right: 10px;
    }
    #megamenu .megamenu-nav > li.dropdown .dropdown-menu li.dropdown-submenu:not(.open) > .dropdown-menu{
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    #megamenu .megamenu-nav > li.dropdown .dropdown-menu li.dropdown-submenu.open > .dropdown-menu{
        top: 0;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
    }
}