/*--------------------------------//
//                                //
//           Side Nav             //
//                                //
//--------------------------------*/
.side-nav {
	color: #000;
	color: var(--color-background-text);
	background-color: #FFF;
	background-color: var(--color-background);
    top: 4.5em;
    bottom: 0;
    width: 75vw;
    overflow-y: auto;
    position: fixed;
    transform: translateX(-100%);
    transition: transform .15s ease;
    z-index: 5;
}

.side-nav.active {
    transform: translateX(0);
}

.side-nav .tab {
	padding-left: 1em;
	line-height: 3em;
}

.side-nav .tab.selected {
	border-left-width: 0.25em;
	border-left-style: solid;
	border-left-color: #FFD600;
	border-left-color: var(--color-secondary);
	padding-left: 0.75em;
}

.mask {
	background-color: rgba(0,0,0,.5);
    bottom: 0;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateZ(0);
    transition: opacity .2s linear;
    visibility: hidden;
}

.mask.active {
	opacity: 1;
    visibility: visible;
}

.mask-active {
	overflow: hidden;
}

@media only screen and (min-device-width: 752px) and (max-device-width: 960px) {
	.side-nav {
		top: 7em;
	}
}