/* BEGIN: COMMON MENU /////////////////////////////////////////////////////// */

#menu {

	--m-gap-from: calc( var( --lh ) * var( --fs-from ) );
	--m-gap-to: calc( var( --lh ) * var( --fs-from ) * var( --ar ) );

	--m-gap: calc( ( 100vw - var( --vw-from ) * 1px )
		* ( var( --m-gap-to ) - var( --m-gap-from ) )
		/ ( var( --vw-to ) - var( --vw-from ) )
		+ var( --m-gap-from ) * 1px );

	background-color: var( --clr-white );
	bottom: 0;
	display: grid;
	height: 100vh;
	justify-content: center;
	left: 0;
	overflow-y: auto;
	position: fixed;
	right: 0;
	top: 0;
	transform: translateY( -100% );
	transition: transform var( --anim-short-dur ) ease-in-out;
	will-change: transform;
	z-index: 3;

}

#menu.on {

	transform: translateY( 0% );

}

#menu-container > div {
	display: grid;
}

#menu a {

	align-items: center;
	color: inherit;
	display: flex;
	font-weight: inherit;
	justify-self: start;
	padding: calc( var( --m-gap ) / 4 ) 0;
	text-decoration: none;

/* 	outline: 1px dotted red; */
/* 	width: 19em; */

}

#menu a.primary {

	text-transform: uppercase;

}

	#menu a > svg {

		height: var( --gap-smallest );
		margin-right: var( --gap-smallest );
/* 		margin-right: calc( var( --gap-smallest ) * 0.618 ); */
		margin-top: -1px;
		width: auto;

	}

		#menu a > svg > path {

			fill: var( --clr-purple );
			opacity: 0;
			transition: opacity var( --anim-short-dur ) ease-in-out;

		}

		#menu a:not(.current) > svg > path {

			fill: var( --clr-blue );

		}

		#menu a:hover > svg > path,
		#menu a.current > svg > path {

			opacity: 1;

		}

	#menu a > span {

		transition:

			color var( --anim-short-dur ) ease-in-out,
			font-weight var( --anim-short-dur ) ease-in-out;

	}

	#menu a:hover > span {

		color: var( --clr-blue );
		font-weight: var( --fw-subtitle );

	}

	#menu a.current > span {

		color: var( --clr-purple );
		font-weight: var( --fw-subtitle );

	}

	#menu-container {

		align-content: center;
		margin: var( --gap-big-combined ) 0;
		display: grid;
/* 		row-gap: var( --m-gap ); */
		row-gap: var( --gap-smaller );

	}

		#menu-container > .indent {


/* 			margin-left: calc( var( --m-gap ) ); */
			margin-left: calc( var( --gap-smaller ) );

		}

	#menu-contact {
		width: 19.25em;
	}

@media ( min-width: 640px ) {

	#menu-container > .indent {

		column-gap: var( --gap-big );
/* 		display: grid; */
		grid-template-columns: 1fr 1fr;
		grid-template-columns: 14.25em 14.25em;
		grid-template-columns: 15.5em 15.5em;

	}


}

@media ( min-width: 960px ) {

	#menu-price {

/* 		grid-template-columns: 14.25em 14.25em 14.25em !important; */

/* 		outline: 1px solid blue; */
	}

}

/* END: COMMON MENU ///////////////////////////////////////////////////////// */