.site-menu {
	position: absolute;
	right: 0;
	top: 0;
	height: 100vh;
	width: 100%;
	display: none;
	z-index: -1;
}

.site-menu-contents {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.site-menu-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	overflow: hidden;
}

@media screen and (orientation:landscape) {
	.site-menu-container {
		flex-direction: row;
	}
}

.site-menu-element {
	position: relative;
	padding: var(--unit) calc(var(--unit) * 2);
	margin: var(--unit);
}


.site-menu-element h2 {
	font-size: calc(var(--fontsize) + 1px);
	text-transform: uppercase;
	color: var(--background-color);
}

.site-menu-element-background {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--background-color);
	border-radius: 999px;
	z-index: -1;
	transform: scale(0.7);
	opacity: 0;
	transition: opacity .45s var(--easier), transform .45s var(--easier);
}

@media (hover) {
	.site-menu-element:not(.menu-currentpage):hover .site-menu-element-background {
		opacity: 1;
		transform: scale(1);
		transition: opacity .45s var(--easier), transform .45s var(--easier);
	}

	.site-menu-element:not(.menu-currentpage):hover h2 {
		color: var(--text-color);
	}
}

.menu-currentpage h2 {
	opacity: 0.6;
}

.menu-show {
	display: flex;
}

.site-menu-background {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	z-index: -1;
}

.site-menu-background-element {
	width: 25%;
	height: 100%;
	background-color: var(--text-color);
	transform: translateY(100vh);
}

.header-menu-open .header-logo-container {
	color: var(--background-color) !important;
}

.header-menu-open .header-logo-container::before {
	background-color: var(--background-color) !important;
}

.header-menu-open .menutoggle-container svg,
.header-menu-open .summarycart-container svg {
	fill: var(--background-color) !important;
}

/* hover effects only on devices that can hover: a tap on iPad/iPhone would leave them stuck on */
@media (hover) {
	.header-menu-open .menutoggle-container:hover svg,
	.header-menu-open .summarycart-container:hover svg {
		fill: var(--text-color) !important;
	}

	.header-menu-open .menutoggle-container:hover .menutoggle-icon-background,
	.header-menu-open .summarycart-container:hover .summarycart-icon-background {
		background-color: var(--background-color) !important;
	}
}

.body-header-menu-open {
	overflow: hidden;
}