/* red */
#menu > nav a[data-class="red"],
#menu > nav a[data-class="red"] + ul a {
	color: #d22;
}
#menu > nav a[data-class="red"]:hover,
#menu > nav a[data-class="red"] + ul a:hover {
	color: #fff;
	background: #d22;
}
#menu > nav a[data-class="red"][data-active="true"]:not(:hover),
#menu > nav a[data-class="red"] + ul a[data-active="true"]:not(:hover) {
	color: #fff;
	background: #d54;
}

/* green */
#menu > nav a[data-class="green"],
#menu > nav a[data-class="green"] + ul a {
	color: #4b4;
}
#menu > nav a[data-class="green"]:hover,
#menu > nav a[data-class="green"] + ul a:hover {
	color: #fff;
	background: #4b6;
}
#menu > nav a[data-class="green"][data-active="true"]:not(:hover),
#menu > nav a[data-class="green"] + ul a[data-active="true"]:not(:hover) {
	color: #fff;
	background: #6c6;
}

/* blue */
#menu > nav a[data-class="blue"],
#menu > nav a[data-class="blue"] + ul a {
	color: #48d;
}
#menu > nav a[data-class="blue"]:hover,
#menu > nav a[data-class="blue"] + ul a:hover {
	color: #fff;
	background: #48d;
}
#menu > nav a[data-class="blue"][data-active="true"]:not(:hover),
#menu > nav a[data-class="blue"] + ul a[data-active="true"]:not(:hover) {
	color: #fff;
	background: #59d;
}


#menu {
	position: fixed;
	z-index: 99999;
	left: -425px;
	top: 0;
	height: 100%;
	overflow: hidden;
	transition: left 0.5s;
	pointer-events: none;
}
#menu.open {
	left: 0;
}
#menu > nav {
	width: 420px;
	height: calc(100% - 15px);
	float: left;
	font-size: 16px;
	border-right: 5px solid #000;
	border-top: 15px solid #000;
	background: rgba(255, 255, 255, 0.95);
	pointer-events: auto;
}
#menu > nav ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
#menu > nav a {
	display: block;
	padding: 3px 0;
	text-decoration: none;
	transition: all 0.2s;
}
#menu > nav > ul > li > a {
	padding: 15px 0 15px 20px;
	font-weight: bold;
}
#menu > nav > ul > li ul {
	margin-bottom: 10px;
	display: none;
}
#menu > nav > ul > li ul a {
	padding-left: 70px;
}
#menu > nav > a {
	display: block;
	padding: 25px 0 15px 0;
	text-align: center;
}



#menu > button {
	position: relative;
	float: left;
	width: 100px;
	height: 60px;
	margin-top: 200px;
	padding: 0;
	border: none;
	background: url('/data/201b1278-c931-4f56-a9ff-10d0759d3b32') no-repeat 0 0;
	cursor: pointer;
	pointer-events: auto;
}
#menu.open > button {
	background-position: 0 -60px;
}
#menu > button:active,
#menu > button:focus {
	outline: none;
}