#head {
	flex-direction:column;
	height:100vh;
	justify-content:space-between;
	display:flex;
	xpadding:1rem .7rem;
	padding:1.9vmin .7rem 2.2vmin .7rem;
	position:sticky;
	top:0;
	align-items:center;
	font-weight:400;
	color:var(--color);
	font-size:.8rem;
	text-transform:uppercase;
	z-index:3;
	transition:color 1s;
}
#head > :not(#logo) {
	writing-mode: tb-rl;
	transform: rotate(-180deg);
	xflex-basis:20rem;
	flex-basis:50%;
	letter-spacing:.15em;
}
#head > .-menu {
	display:flex;
	justify-content:flex-end;
	white-space:nowrap;
}
.mob_nav_btn {
	margin-top:1rem;
}
#logo > img {
	display:block;
	width:3.4em;
	max-width:none;
}


.mob_nav_btn {
	stroke:currentColor;
	stroke-linecap:round;
	stroke-width:.8;
	padding:.1rem;
	margin-left:auto;
	width:1.5rem;
	height:1.5rem;
	-webkit-user-select: none;
    user-select: none;
	align-self: center;
	z-index: 2;
	transition: transform .2s;
	will-change:transform;
	position: relative;
}
#container .mob_nav_btn {
	overflow:visible;
}
html.mob_nav_open .mob_nav_btn {
	transform:rotate(270deg);
}
html.mob_nav_open #head {
	color:#fff;
	background-color:var(--color2);
}
.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;
}
.mob_nav_btn .-menu {
	transform:scaleY(.7);
	transform-origin: center;
	stroke-width:1.2;
}
html.mob_nav_open .mob_nav_btn .-menu {
	stroke-width:0;
}



#nav {
	position:fixed;
	left:0; right:0; bottom:-1px; top:0;
	height:100vh; /* safari */
	display:grid;
	grid-template-columns: minmax(23rem, 1fr) 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	xbackground: var(--color-light);
	background: var(--color2);
	z-index:1;
	transition: .1s;
	transform:translateX(-100%);
	color:#fff;
}
#nav > nav {
	grid-area: 1 / 1 / 3 / 2;
	display: flex;
	place-content: center;
	padding:2rem 2rem 2rem 5rem;
}
#nav > nav > ul {
	margin:auto;
	font-size:3rem;
}

#nav > div {
	position:relative;
}
#nav > div > cms-image2 {
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	max-width:none !important;
}
#nav > div > cms-image2 img {
	transition: 7s;
	transform:scale(1.001);
}
#nav > div > cms-image2 img:hover {
	transform:scale(1.2);
}

#nav > .-i1 { grid-row-end: span 2; }
#nav > .-i2 { grid-row-end: span 2; }
#nav > .-i3 {}
#nav > .-i4 {}


#nav nav a {
	display:block;
	padding:.5rem 0;
	color:inherit;
	font-weight:300;
}
#nav nav a:hover {
	xtext-decoration:underline;
	font-weight:500;
}

html.mob_nav_open #nav, #nav:focus-within {
	transform:translateX(0);
}


@media (max-width: 1200px) {
	html {
		scroll-padding-top: 4rem;
	}
	#nav {
		top:4.1rem;
		bottom:0;
		xheight:calc(100vh - 4.1rem); /* safari */
		height:auto;
		grid-template-columns: minmax(18rem, 1fr) 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}
	#nav > .-i1 { grid-row-end: span 1; }
	#nav > .-i2 { grid-row-end: span 1; }
	#nav > .-i3 {}
	#nav > .-i4 {}

	#container {
		grid-template-columns: 1fr;
		grid-template-columns:minmax(20rem, 1fr);
	}
	#head {
		position:fixed;
		xtop:0;
		left:0;
		right:0;
		padding:.8rem 1.4rem;
		flex-direction:row-reverse;
		flex-wrap: wrap;
		height:auto;
		background:#fff;
	}
	#head > :not(#logo) {
		writing-mode:initial;
		transform:none;
	}
	#container .mob_nav_btn {
		margin:0 0 0 1rem;
	}
	#nav > nav {
		padding:2rem;
	}

	#head > :not(#logo) {
		flex-basis:auto;
	}
}
@media (max-width: 820px) {
	#nav > nav > ul {
		font-size:2.4rem;
	}
	#nav {
	  grid-template-columns: minmax(15rem, 1fr) 1fr;
	  grid-template-rows: 1fr 1fr 1fr 1fr;
	}
	#nav > nav { grid-area: 1 / 1 / 5 / 1 }
	#nav > .-i1 {  }
	#nav > .-i2 {  }
	#nav > .-i3 {}
	#nav > .-i4 {}
}

@media (max-width: 600px) {
	#head > :last-child {
		display:none;
	}
}