.mob_nav_btn {
	display:none;
	stroke:currentColor;
	stroke-linecap:round;
	stroke-width:1.5;
	height:30px;
	width:30px;
	align-self:center;
	z-index:3;
}
@media (max-width:530px) {
	#nav {
		overscroll-behavior: contain;
		position:fixed;
		background-color:rgb(255, 255, 251);
		z-index:3;
		top:0;
		left:0;
		right:0;
		bottom:0;
		overflow:auto;
		display:flex;
		padding:30px;
		padding-top:100px;
		font-size:1.5em;

		will-change: opacity, transform;

		transition-property: opacity, visibility;
		transition-duration: .5s, 0s;
		transition-delay: .3s, .8s;

		visibility:hidden;
		opacity:0;

	}
	html.mob_nav_open #nav {
		transition-delay: 0s, 0s;
		visibility:visible;
		opacity:1;
	}

	#head #nav nav a {
		padding:4px 7px 3px 7px;
	}
	#nav li {
		will-change:transform;
		transition-property: opacity, transform;
		transition-duration: 2s, .4s;
		transition-delay:.1s;
		transform:translate(-140%, -10px);
		opacity:0;

		transition-duration: .2s, .4s;
		transform:translate(-40%, 0);
		transition-delay:.3s, .1s;
	}
	#nav li + li                { transition-delay: .4s, .2s; }
	#nav li + li + li           { transition-delay: .5s, .3s; }
	#nav li + li + li + li      { transition-delay: .6s, .4s; }
	#nav li + li + li + li + li { transition-delay: .7s, .5s; }
	.mob_nav_open #nav li {
		transform:translateX(0);
		opacity:1;
	}
	#nav ul {
		display:block;
		position:static;
	}

	/* overlay */
	xxx#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;
	}
	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;
	}
}