.alvet-div-menu-desplegable {
    top: 190px; /*230px;*/
    height: 570px;
    padding-top: 37px; /*67px;*/
}

.alvet-div-menu-desplegable nav > ul  li {
    list-style-type: none;
    position: relative;
    width: 225px;
}

.alvet-div-menu-desplegable nav ul li ul li {
    list-style-type: none;
    position: relative;
    width: 430px;
}

.alvet-div-menu-desplegable li > a {
    text-decoration: none;
    display: inline-block;
    width: 270px;
    height: 30px;
    color: var(--alvet-marron-oscuro);
    font-size:14px;
}

.alvet-div-menu-desplegable li > a:hover {
    color: #000;
    font-weight: bold;
}

.alvet-div-menu-desplegable li ul li a {
    text-decoration: none;
    display: inline-block;
    width: 270px;
    height: 15px;
    color: var(--alvet-marron-oscuro);
    font-size: 12px;
}

.alvet-div-menu-desplegable li ul li a:hover {
    color: var(--alvet-naranja-oscuro);
}

.alvet-div-menu-desplegable nav ul li[data-codigo="1"] div.opcion{
    height:20px;
}

.alvet-div-menu-desplegable nav li ul {
    display: none;
    position: absolute;
    top: 0px;
    left: 230px;
}

.alvet-div-menu-desplegable nav li ul:target {
    display: block;
}

.alvet-div-menu-desplegable nav li > a.activo {
    background-image: url("data:image/svg+xml;utf8,<svg id='i-chevron-right' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'> <path d='M12 30 L24 16 12 2' /> </svg>");
    background-repeat: no-repeat;
    background-position: 80% 30%;
}

.alvet-div-menu-desplegable nav li > a.activo.sin-flecha {
    background-image: none;
}

.alvet-div-menu-desplegable nav li  a.activo {
    font-weight: bold;
}

.alvet-div-menu-desplegable nav ul {
    padding-left: 5px;
}


.alvet-div-menu-desplegable .alvet-cerrar-menu {
    font-size: 30px;
    position: absolute;
    top: 0px;
    right: 25px;
    cursor: pointer;
}

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

    .alvet-div-menu-desplegable nav li ul {
        left: 270px;
    }

    .alvet-div-menu-desplegable nav ul li ul li {
        width: 550px;
    }

    .alvet-div-menu-desplegable nav li > a.activo {
        background-position: 90% 30%;
    }
}