div#menu-news{
    position: absolute;
    z-index: 10;
    background-color: var(--blanco);
    transition: width .3s;
    
}
div#menu-news.width-cero{
    width: 0;
}
div#menu-news.width-set{
    width:50%;
}
button.btnBarNews{
    height: 5.2rem;
    box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.25);
}
@media (min-width:768px) {
    div#menu-news,
    div#menu-news.width-cero,
    div#menu-news.width-set{
        width: 100%;
        position:relative;
        background-color: transparent;
        transition: none;
    }

    button.btnBarNews{
        height: 6.3rem;
        display: none;
    }
}

i.menu-bar-news{
    font-size: 2.1rem!important;
    line-height: inherit;
}
div#navbarText{
    transition: transform .3s;
}
div#navbarText.traslate-neg{
    transform: translateX(-150px);
    
}

div#navbarText.traslate-pos{
    transform: translateX(0);
}

ul#menu-noticias{
    min-height: 85vh;
    
}
@media (min-width:768px) {
    ul#menu-noticias{
        display: block;
    }

    div#navbarText,
    div#navbarText.traslate-neg,
    div#navbarText.traslate-pos{
        transform: none;
        transition: none;
    }
}

.menu-noticias > ul > li{
    height: 7rem;
}
.menu-noticias > ul > li >a {
    background-image:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    height: 100%;
    align-content: center;
    border-bottom: 1px solid ghostwhite;
}


.menu-noticias > ul > li:hover > a{
    background-image: linear-gradient(180deg, #21252975, rgba(255, 255, 255, 0));
    border:1px solid var(--gris-claro);
}

.menu-noticias > ul > li > a{
    padding-left: 1rem;
    color: var(--blanco);
    display: block;
    position: relative;
    background-color: inherit;
}

.menu-noticias > ul > li > a > i{
    display: none;
}

.menu-noticias > ul > li.current-menu-item > a > i{
    display: inline-block;    
}

@media (min-width:768px) {
    .menu-noticias > ul > li > a{
        transition: all .5s;
    }

    
    
}



/*Colores del los items del menu*/

.item-rojo{
    background-color: var(--guati-color-prim);
    
}
.item-verde{
    background-color: var(--guati-color-sec);
    
}
.item-indigo{
    background-color: var(--guati-color-ter);
    
}
.item-celeste{
    background-color: var(--guati-color-cuar);
    
}
.item-amarillo{
    background-color: var(--guati-color-quin);
    
}