/* #region above */
nav.above {
	box-shadow: none !important;
	
	background-color: transparent !important;

    opacity: 0.4 !important;
}

nav.above:hover { opacity: 1 !important; }

nav.above li {
	color: var(--grayColor) !important;

	transition-property: color;
	transition-duration: 0.4s;
}

nav.above a li:hover {
	background-color: transparent !important;
	color: var(--darkColor) !important;
}

nav.above a li.navitem.brand { display: none; }
/* #endregion */

/* #region below */
nav.below {
    position: fixed;

    top: 0;
    left: 0;

    animation-name: navFadeIn;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

nav.below + * { margin-top: 50px; }

nav.below.fadeOut {
    animation-name: navFadeOut;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

nav.below a li.navitem.brand:hover { background-color: transparent !important; }
/* #endregion */

@keyframes navFadeIn {
    from { top: -55px; }
    to { top: 0; }
}

@keyframes navFadeOut {
    from { top: 0; }
    to { top: -55px; }
}