/* ---------------------------------------------------------------- */
/* Burger Menu
/* ---------------------------------------------------------------- */
	/* vars */
	.burger-nav {
		--icon-w: 2rem;
		--gap: 1rem;
		--font-size: var(--font-size-xlarge);
		--text-color: var(--color-white);
		--bg-color: var(--color-primary);
		--active-color: var(--color-secondary);
		--max-w: 20rem;
	}

	/* transform */
	.burger-nav {
		/*-moz-transform: translateX(-22em);
		-webkit-transform: translateX(-22em);
		-ms-transform: translateX(-22em);
		transform: translateX(-22em);*/
			-moz-transform: translateX(100vw);
			-webkit-transform: translateX(100vw);
			-ms-transform: translateX(100vw);
		transform: translateX(100vw);
			-moz-transition: -moz-transform 0.45s ease, visibility 0.45s;
			-webkit-transition: -webkit-transform 0.45s ease, visibility 0.45s;
			-ms-transition: -ms-transform 0.45s ease, visibility 0.45s;
		transition: transform 0.45s ease, visibility 0.45s;
	}

	.burger-nav {
		position: fixed;
		top: 0;
		right: 0;
		width: 80%;
		min-width: 15rem;
		height: 100%;
		-webkit-overflow-scrolling: touch;
		font-family: var(--font-variant);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		font-size: var(--font-size);
		color: var(--text-color);
		background: var(--bg-color);
		opcity: 0.5;
		cursor: default;
		visibility: hidden;
		z-index: var(--z-index-flyout);
	}

		.burger-nav > .inner {
			-moz-transition: opacity 0.45s ease;
			-webkit-transition: opacity 0.45s ease;
			-ms-transition: opacity 0.45s ease;
			transition: opacity 0.45s ease;
			-webkit-overflow-scrolling: touch;
			position: relative;
			width: 100%;
			max-width: var(--max-w);
			padding: calc( var(--gap) * 1.5 ) calc( var(--gap) * 2 );
			opacity: 0;
			overflow-y: auto;
		}

.burger-nav li + li {
	margin-block-start: 1rem;
}
	.burger-nav a:hover,
	.burger-nav a:focus,
	.burger-nav a:active {
		color: var(--active-color);
	}

.burger-nav .nav-toggle .icon .fill-1 {
	fill: var(--text-color);
}
.burger-nav > .close {
		-moz-transition: opacity 0.45s ease, -moz-transform 0.45s ease;
		-webkit-transition: opacity 0.45s ease, -webkit-transform 0.45s ease;
		-ms-transition: opacity 0.45s ease, -ms-transform 0.45s ease;
	transition: opacity 0.45s ease, transform 0.45s ease;

		-moz-transform: scale(0.25) rotate(180deg);
		-webkit-transform: scale(0.25) rotate(180deg);
		-ms-transform: scale(0.25) rotate(180deg);
	transform: scale(0.25) rotate(180deg);

	-webkit-tap-highlight-color: transparent;

	display: block;
	position: absolute;
	top: var(--gap);
	top: 1.8rem;
	left: var(--max-w);
	width: var(--icon-w);
	height: var(--icon-w);
	border: 0;
	font-size: 1em;
	color: inherit;
	line-height: 1.2;
	opacity: 0;
	overflow: hidden;
	padding: 0;
	white-space: nowrap;
	text-indent: 6rem;
}

.burger-nav > .close:before,

.burger-nav > .close:after {
		-moz-transition: opacity 0.2s ease;
		-webkit-transition: opacity 0.2s ease;
		-ms-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: var(--icon-w);
	height: var(--icon-w);
	background-position: center;
	background-repeat: no-repeat;
	background-size: var(--icon-w);
}

.burger-nav > .close:before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23FFFFFF%3B %7D%3C/style%3E%3Cline x1='15' y1='15' x2='85' y2='85' /%3E%3Cline x1='85' y1='15' x2='15' y2='85' /%3E%3C/svg%3E");
	opacity: 0;
}

.burger-nav > .close:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23FFFFFF%3B %7D%3C/style%3E%3Cline x1='15' y1='15' x2='85' y2='85' /%3E%3Cline x1='85' y1='15' x2='15' y2='85' /%3E%3C/svg%3E");
	opacity: 1;
}

.burger-nav > .close:hover:before {
	opacity: 0.6;
}

.burger-nav > .close:hover:after {
	opacity: 0;
}

@media screen and (max-width: 736px) {

			/*#menu {
				-moz-transform: translateX(-16.5em);
				-webkit-transform: translateX(-16.5em);
				-ms-transform: translateX(-16.5em);
				transform: translateX(-16.5em);
				width: 16.5em;
			}
			*/
				.burger-nav > .inner {
					padding: 2.75em 1.5em;
				}

				.burger-nav > .close {
					/*top: 0.5em;
					right: -4.25em;
					width: 4.25em;
					text-indent: 4.25em;*/
				}

					.burger-nav > .close:before,
					.burger-nav > .close:after {
						background-size: 2rem;
					}

		}
@media screen and (min-width: 45em) {
	.burger-nav {
		max-width: 45vw;
	}
}
@media screen and (min-width: 60em) {
	.burger-nav {
		max-width: 31vw;
	}
}
/*
	body.is-menu-visible #wrapper {
		cursor: default;
		opacity: 0.85;
		backdrop-filter: blur(15px);
		pointer-events: all;
		background-color: rgba(0,0,0,0.4);
	}
*/
	body.is-menu-visible {
		--overlay-transparency: 0.3;
		overflow: hidden;
	}
	body.is-menu-visible .backdrop {
		position: fixed;
		left: 0; top: 0; right: 0; bottom: 0;
		/*backdrop-filter: blur(15px);*/
		pointer-events: none;
		background-color: rgba(0,0,0,var(--overlay-transparency));
		z-index: var(--z-index-backdrop);
	}
	body.is-menu-visible .burger-nav {
			-moz-transform: translateX(0);
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
		transform: translateX(0);
		visibility: visible;
	}
	body.is-menu-visible .burger-nav > * {
		opacity: 1;
	}
	body.is-menu-visible .burger-nav .close {
			-moz-transform: scale(1.0) rotate(0deg);
			-webkit-transform: scale(1.0) rotate(0deg);
			-ms-transform: scale(1.0) rotate(0deg);
		transform: scale(1.0) rotate(0deg);
		opacity: 1;
	}

.burger-nav a {
	text-decoration: none;
}

/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/*
 menu toggle
*/
.menu-toggle {
	--icon-w: 2rem;
	--gap: 1rem;
	/*position: absolute;
	z-index: 999;
	right: 0;
	top: 1.7rem;
	*/
}

	.menu-toggle ul {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
		display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
		align-items: center;
		list-style: none;
		margin: 0;
		padding: 0;
		color: var(--text-color);
	}

		.menu-toggle ul li {
			display: block;
			padding: 0;
		}

			.menu-toggle a {
				display: block;
				position: relative;
				color: inherit;
				background-color: transparent;
				/*border-radius: 4px;
				border: 0;
				font-size: 0.8em;
				font-weight: 900;
				letter-spacing: 0.35em;
				text-transform: uppercase;*/
			}

			.menu-toggle a[href="#menu"] {
				-webkit-tap-highlight-color: transparent;
				/*width: 2.5em;*/
				/*overflow: hidden;*/
				font-family: var(--font-variant);
				text-transform: uppercase;
				letter-spacing: 0.04em;
				fotn-weight: normal;
				white-space: nowrap;
				text-decoration: none;
				padding-inline-end: calc( var(--icon-w) + var(--gap) );
			}

			.menu-toggle a[href="#menu"]:before,
			.menu-toggle a[href="#menu"]:after {
				-moz-transition: opacity 0.2s ease;
				-webkit-transition: opacity 0.2s ease;
				-ms-transition: opacity 0.2s ease;
				transition: opacity 0.2s ease;
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-position: right center;
				background-repeat: no-repeat;
				background-size: var(--icon-w);
			}

			.menu-toggle a[href="#menu"]:before,
			.menu-toggle a[href="#menu"]:after {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23FFFFFF%3B %7D%3C/style%3E%3Cline x1='0' y1='25' x2='100' y2='25' /%3E%3Cline x1='0' y1='50' x2='100' y2='50' /%3E%3Cline x1='0' y1='75' x2='100' y2='75' /%3E%3C/svg%3E");
				opacity: 1;
			}
			.menu-toggle a[href="#menu"]:before {
				opacity: 0;
			}

			.scrolled .menu-toggle a[href="#menu"]:before,
			.scrolled .menu-toggle a[href="#menu"]:after {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23757575%3B %7D%3C/style%3E%3Cline x1='0' y1='25' x2='100' y2='25' /%3E%3Cline x1='0' y1='50' x2='100' y2='50' /%3E%3Cline x1='0' y1='75' x2='100' y2='75' /%3E%3C/svg%3E");
				opacity: 1;
			}
			.scrolled .menu-toggle a[href="#menu"]:before {
				opacity: 0;
			}

			.menu-toggle a[href="#menu"]:hover:before {
				opacity: 0.6;
			}
			.menu-toggle a[href="#menu"]:hover:after {
				opacity: 0;
			}

@media screen and (max-width: 46em) {
	/*#header {
		padding: 4em 0 0.1em 0 ;
	}
		#header nav {
			left: 0.5em;
			top: 0.5em;
		}
	*/
	.menu-toggle {
		--icon-w: 2rem;
		--gap: 0rem;
	}
}
.menu-toggle span {
	visibility: hidden;
}
@media screen and (min-width: 850px) {
	.menu-toggle span {
		visibility: visible;
	}
}

body.is-menu-visible .menu-toggle {
	transition: transform 0.45s ease, visibility 0.45s;
}
body.is-menu-visible .menu-toggle {
	visibility: hidden;
}