menu {
	width: 300px;
	background: $layoutBackground;
	overflow-y: auto;
	overflow-x: visible;
	padding: 20px;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	border-right: $layoutBorder;

	h1.logo {
		margin: 40px 0 0 0;
		align-self: stretch;
		display: flex;

		a {
			@include pixel-text(0);
			flex: 1;
			font-family: 'Sixtyfour', 'Work Sans', 'Arial', 'sans-serif';
			align-self: stretch;
			padding-right: 3px;
			font-size: 20px;
			text-transform: uppercase;
			transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: relative;

			img {
				flex-shrink: 0;
				width: 30px;
				margin-right: 10px;
				position: absolute;
				left: 5px;
				transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);

				&.after {
					opacity: 0;
				}
			}
		}
	}

	&:hover {
		h1.logo {
			a {
				@include pixel-text(3);

				img {
					&.before {
						opacity: 0;
					}

					&.after {
					 	animation-duration: 200ms;
  						animation-name: logotouch;
					}
				}
			}
		}
	}

	nav {
		display: flex;
		align-self: stretch;
		flex: 1;


		ul {
			margin: 60px 0 20px 0;
			flex: 1;
			align-self: flex-start;
			display: flex;
			flex-direction: column;
			list-style: none;

			li {
				align-self: stretch;
				overflow: hidden;
				position: relative;
				transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
				margin: 10px 0;
				border-radius: $baseRadius;

				a {
					color: rgba(255, 255, 255, 0.9);
					font-size: 16px;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					align-self: stretch;
					flex: 1;
					padding-top: 5px;
					padding-bottom: 5px;
					padding-left: 10px;

					i {
						color: white;
						opacity: .2;
						background: transparent;
						display: flex;
						justify-content: center;
						align-items: center;
						align-self: stretch;
						padding: 10px 10px;
						width: 40px;
						border-radius: $baseRadius;
						text-align: center;
						margin-right: 20px;
					}
				}

				&:after {
					background: white;
					content: "";
					height: 195px;
					left: -200px;
					opacity: .2;
					position: absolute;
					top: -50px;
					transform: rotate(35deg);
					transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
					width: 50px;
					z-index: -2;
					cursor: pointer;
				}

				&.active {
					a {
						color: $primary;
						font-weight: bold;

						i {
							opacity: 1;
							background: rgba(255, 255, 255, 0.9);
							background: #017BFF;
						}
					}
				}

				&:hover {
					background: $primary;

					&:after {
						z-index: 2;
						left: 120%;
						transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
					}

					a {
						color: white;
						font-weight: bold;

						i {
							color: white;
							opacity: 1;
						}
					}
				}
			}
		}
	}

	footer {
		background: rgba(255, 255, 255, 0.01);
		padding: 20px 0;
		display: flex;
		flex-direction: row;
		align-self: stretch;
		text-align: center;
		justify-content: center;

		p {
			color: #444;

			&.version {
				a {
					color: #777;
					font-weight: bold;
				}
			}
		}
	}
}