nav#navigation {
    background-color: var(--custom-color);
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 9998;    
}

nav#navigation {
    padding:0;
    text-align: center;
    padding: 10px 0px 5px 0px;
    }

nav#navigation button.navbar-toggler, nav#navigation button.navbar-toggler:focus {
    border: none;
    color: var(--custom-color-text);
    outline: none;
    box-shadow: none;
    margin: 0px;
}

nav#navigation .navbar-text { 
    font-size: 1.2rem;
    text-transform: uppercase;
    color: var(--custom-color-text); 
}
  
nav#navigation .nav-item {
    display: inline-block;
    padding: 10px 0px;
    margin: 0px 40px;
    color: var(--custom-color-text);
    font-size: 1.2rem;
    text-transform: uppercase;  
    cursor: pointer;
    }

nav#navigation .nav-item a { 
    position: relative;
    isolation: isolate;
    color: var(--custom-color-text);
    text-decoration: none;
    font-size: 1.2rem;
    text-transform: uppercase;
    } 

nav#navigation .nav-item a.active::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--custom-color-text);
    position: absolute;
    bottom: -.5em;
    left: 0;
    right: 0;
    transform: scale(1);
}

nav#navigation .nav-item a::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--custom-color-text);
    position: absolute;
    bottom: -.5em;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transition: transform ease-in-out 250ms;
    }

nav#navigation .nav-item a:hover::before {
    transform: scale(1,1);
}