/**
 * CSS Responsive Navigation
 * A pure CSS responsive navigation
 */
#toggle-nav {
	display: none;
}

label[for^="toggle-nav"] {
	display: none;
	z-index: 9999;
	cursor: pointer;
}

.nav [data-icon]:before {
	content: attr(data-icon);
}

@media only screen and (max-width: 759px) {
	label[for^="toggle-nav"] {
		display: block;
	}
	#toggle-nav:checked ~ .menu {
		opacity: 1;
		display: block;
	}
	.menu {
		opacity: 0;
		display: none;
		overflow: hidden;
		width: 100%;
	}
	.menu > li {
		display: block;
		width: 100%;
	}
}