nav {
	position: fixed;
	width: var(--nav-width);
	height: 100vh;
	padding: 0 30px 30px 30px;
	box-sizing: border-box;
}

	nav .logo {
		display: flex;
		align-items: center;
		width: auto;
		height: 58px;
		justify-content: center;
		position: relative;
		left: -5px;
	}

		nav .logo img {
			height: 35px;
			width: auto;
		}

		nav .logo span {
			color: var(--color-lightest);
			font-weight: 700;
			margin-left: 5px;
		}

	nav .nav-links {
		margin-top: 17px;
	}

	nav ul {
		list-style: none;
		position: relative;
		margin: 0;
		padding: 0;
		/*transition: all 300ms;*/
	}

		nav ul li {
			position: relative;
			text-align: left;
			display: block;
			margin: 0;
			padding: 10px 0;
			font: var(--nav-font);
			text-decoration: none;
			white-space: nowrap;
			text-transform: var(--nav-text-transform);
			color: var(--nav-link-color);
			cursor: pointer;
		}

			nav ul li a {
				display: block;
				text-decoration: none;
				color: var(--nav-link-color);
			}

			nav ul li:hover,
			nav ul li:hover a {
				color: var(--color-lightest);
			}

			nav ul li i {
				margin-right: 10px;
				font-size: 1.1rem;
				text-align: center;
				width: 20px;
				position: relative;
				top: 1px;
			}

			nav ul li.active,
			nav ul li.active a {
				color: var(--color-lightest);
				font-weight: 700;
			}

				nav ul li.active i {
					color: var(--color-lightest);
				}

			nav ul li ul {
				background: var(--nav-link-color);
				max-height: 0;
				background: none;
				padding: 0 15px;
				margin: 0;
				position: static;
				transition: 300ms;
				overflow: hidden;
			}

				nav ul li ul:before {
					content: "\f107";
					font-family: var(--font-icon);
					font-weight: 300;
					color: var(--nav-link-color);
					position: absolute;
					top: 3px;
					right: -10px;
					cursor: pointer;
					padding: 10px 20px;
					transition: 300ms;
				}

			nav ul li.expanded ul {
				max-height: 100%;
				overflow: visible;
			}

				nav ul li.expanded ul::before {
					transform: scaleY(-1);
					top: 2px;
				}

			nav ul li ul li {
				visibility: hidden;
				opacity: 0;
				width: 100%;
				margin-left: 8px;
				transition: 200ms;
				padding: 0;
			}

			nav ul li.expanded ul li {
				visibility: visible;
				opacity: 1;
			}

			nav ul li ul li a {
				color: var(--nav-link-color) !important;
				font-weight: 400 !important;
				padding: 10px;
			}

				nav ul li ul li a:hover {
					color: var(--color-lightest) !important;
					background: rgba(0,0,0,.3);
					border-radius: 15px;
				}

			nav ul li ul li.active a {
				color: var(--color-lightest) !important;
				font-weight: 700 !important;
			}

			nav ul li ul li:first-child {
				margin-top: 15px;
			}

			nav ul li.break {
				border-top: 1px solid var(--border-color-reverse);
				padding-top: 16px;
				margin-top: 12px;
			}

			nav ul li a span.subtext {
				font-size: .7rem;
				line-height: .7rem;
				vertical-align: top;
				margin-left: 6px;
			}

	nav .customer {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: .9rem;
		color: var(--color-lightest);
		padding: 20px;
		background-color: var(--border-color);
	}