.mob_nav_btn {
	display:none;
	stroke:currentColor;
	stroke-linecap:round;

	stroke-width:.8;
	padding:.1em;
	margin-left:auto;
	width:1.8em;
	height:1.8em;

	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#container .mob_nav_btn {
	overflow:visible;
}

@media (max-width:930px) {
	#nav {
		position:fixed;
		background:#fff;
		z-index:2;
		top:0;
		left:0;
		bottom:0;
		overflow:auto;
		transform:translateX(-100%);
		transition:transform .2s;
		will-change: transform;
		padding:2em;
	}
	#nav li {
		float:none;
	}
	html #nav ul {
		display:block;
		position:static;
		/* overwrite drop-down */
		visibility: visible;
	    opacity: 1;
	}
	html.mob_nav_open #nav {
		transform:translateX(0);
	}

	/* overlay */
	#head::after {
		content:'';
		opacity:0;
		visibility:hidden;
		position:fixed;
		z-index:1;
		top:-100px; left:0; right:0; bottom:0;
		background:rgba(0, 0, 0, 0.4);
		pointer-events: none; /* ? */
		transition:opacity .7s;
	}
	html.mob_nav_open #head::after {
		opacity:1;
		visibility:visible;
	}

	/* change the button */
	.mob_nav_btn {
		display:block;
		transition: transform .2s;
		will-change:transform;
		position: relative;
		z-index: 1;  /* performance! */
	}
	html.mob_nav_open .mob_nav_btn {
		transform:rotate(270deg);
	}
	.mob_nav_btn g {
		transition:stroke-width .1s;
		will-change:stroke-width;
	}
	.mob_nav_btn .-close {
		stroke-width:0;
	}
	html.mob_nav_open .mob_nav_btn .-close {
		stroke-width:inherit;
	}
	html.mob_nav_open .mob_nav_btn .-menu {
		stroke-width:0;
	}
}