#navigation{
    padding-inline-start: 5px;
}

#navigation .navigation-li{
    padding: 5px;
    cursor: pointer;
    text-transform: uppercase;
    color: rgb(0, 0, 0, 0.5);
    transition: 0.3s;
}

#navigation .navigation-li:hover, #navigation .navigation-li.active{
    color: rgb(0, 0, 0);
}

#navigation ul{
    padding-inline-start: 30px;
}

#navigation ul, #navigation li{
    list-style-type: none;
    font-size: 18px;
}

#navigation .has-subitems{
    text-transform: uppercase;
    margin-top: 20px;
    margin-bottom: 20px;
}

#navigation .has-subitems > ul{
    display: none;
    margin-top: 20px;
}

#navigation .has-subitems.active > ul{
    display: block;
}

#navigation .has-subitems::before{
    position: absolute;
    margin-right: 20px;
    right: 0;
    font-family: 'Glyphicons Halflings';
    content:"\e080";
    color: rgb(0, 0, 0, 0.5);
    transition: 0.3s;
}

#navigation .has-subitems.active::before{
    content:"\e080";
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    transition: 0.8s;
}

#navigation .has-subitems:hover::before, #navigation .has-subitems.has-subitems.active::before{
    color: rgb(0, 0, 0);
}


#navigation li.has-subitems > img{
    width: 30px !important;
    max-width: 30px !important;
}

#navigation .selectable-item > a > img{
    width: 20px !important;
    max-width: 20px !important;
    margin-right: 10px;
}

#navigation .selectable-item, #navigation .selectable-item > a{
    padding-top: 5px;
    padding-bottom: 5px;
    color: rgb(0, 0, 0, 0.5);
    transition: 0.3s;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
}

#navigation .selectable-item:hover, #navigation .selectable-item > a:hover, #navigation .selectable-item.active > a{
    color: rgb(0, 0, 0);
}