#side-nav-view {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	#side-nav-background {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: black;
			opacity: 0;
			z-index: 50;
	}

	#side-nav-inner {
		width: 0%;
		height: 100%;
		position: absolute;
		right: 0;
		overflow: auto;
		top: 0;
		z-index: 52;		
		background-color: white;

		box-shadow: 0px 2px 4px rgba(50, 50, 50, 0.6);		

		#welcome-message {
			float: right;
			padding: 15px 20px;
			font-size: 16px;
		}

		#back-button, #close-button, #home-button {
			margin: 10px 20px;	
			font-size: 20px;
			cursor: pointer;

			&:hover {
				color: #3498db;
			}

	
		}

		#back-button, #home-button {
			display: none;
		}		

	}

	#nav-home-view {
		padding: 0 20px;
	}

	#side-nav-inner-content {
		width: 100%;
		height: 100%;
	}

	#hide-side-nav {
		width: ~"calc(100% - 40px)";
		margin: 20px;		
	}

	.nav-links {
		list-style: none;
		margin: 20px;
		font-size: 20px;
		padding:0;

		li {			
			margin: 30px 0;		
		}
	}

	#side-nav-footer {
		border-top: 1px dashed #ddd;

		width: 100%;

		ul {
			list-style: none;
			padding: 0;
			margin: 20px;

			li {
				margin: 20px 0;
				font-size: 14px;
			}
		}
	}
}