.flex-center {
	display: flex;
	align-items: center;
	justify-content:center
}

.outer-menu {
	position: fixed;
	z-index: 1000000000;
	right: 10%;
	top: 10%;
}

.outer-menu label {
	display:none !important
}

.outer-menu .checkbox-toggle {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	cursor: pointer;
	width: 3vw;
	height: 3vw;
	opacity: 0;
	margin:0 !important
}

.outer-menu .checkbox-toggle2 {
	position: absolute;
	top: 8vw;
	right: 0;
	z-index: 2;
	cursor: pointer;
	width: 5vw;
	height: 5vw;
	opacity: 0;
	margin:0 !important
}

.outer-menu .checkbox-toggle:checked + .hamburger > div {
	transform:rotate(135deg)
}

.outer-menu .checkbox-toggle:checked + .hamburger > div:before, .outer-menu .checkbox-toggle:checked + .hamburger > div:after {
	top: 0;
	transform: rotate(90deg);
	width:100%
}

.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
	opacity:0
}

.outer-menu .checkbox-toggle:checked ~ .menu {
	pointer-events: auto;
	visibility:visible
}

.outer-menu .checkbox-toggle:checked ~ .menu > div {
	transform: scale(1);
	transition-duration:0.75s
}

.outer-menu .checkbox-toggle:checked ~ .menu > div > div {
	opacity: 1;
	transition:opacity 0.4s ease 0.4s
}

.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
	transform:rotate(225deg)
}

.outer-menu .hamburger {
	position: relative;
	right: 0;
	z-index: 1;
	width: 3vw;
	height: 3vw;
	cursor: pointer;
	transition: box-shadow 0.4s ease;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sugar);
	padding: 1.2vw;
	border-radius: 50%;
}

.outer-menu .hamburger > div {
	position: absolute;
	flex: none;
	width: 1.5vw;
	height: 2px;
	background: #fff;
	transition: all 0.4s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.outer-menu .hamburger > div:before, .outer-menu .hamburger > div:after {
	content: '';
	position: absolute;
	z-index: 1;
	top: -5px;
	left: 0;
	width: 80%;
	height: 2px;
	background: inherit;
	transition: all 0.4s ease;
}

.outer-menu .hamburger > div:after {
	width:80%
}

.outer-menu .hamburger > div:after {
	top:5px
}

.outer-menu .menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	visibility: hidden;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	outline: 1px solid transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}

.outer-menu .menu > div {
	width: 200vw;
	height: 200vw;
	color: #FEFEFE;
	background-position: top left;
	background: var(--bluegrey);
	border-radius: 50%;
	transition: all 0.4s ease;
	flex: none;
	transform: scale(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content:center
}

.outer-menu .menu > div > div {
	max-width: 90vw;
	max-height: 100vh;
	opacity: 0;
	transition: opacity 0.4s ease;
	width: 40%;
	float: left;
	position:relative
}

.outer-menu .menu > div > div:nth-of-type(2) {
	left:0
}

.outer-menu .menu > div > div > ul > li {
	list-style-type: none !important;
	margin-right: 1vw;
}

	.outer-menu .menu > div > div > ul > li:last-of-type {margin-right: 0;}

button.menubutton {margin-right: 3vw;}

.menu ul {float: left; clear: both;}

.menu li a {
	}

.outer-menu .menu > div > div > ul > li > a:hover {
	color: var(--sugar);
	transition:color 0.1s ease
}

.menu li a {
  color: var(--cappuccino);
  margin-bottom: 0.2vw;
  font-size: 1.5vw;
  padding: 0.5vw 1vw 0.5vw;
  border-radius: var(--buttonradius);
}

.menu li a.buttonise {color: var(--sugar); /* border: 1px solid var(--sugar); */}

	.menu li button a {color: #fff;}

.menu svg {width: 2vw;}

.hover-underline-animation {
	display: inline-block;
	position: relative;
	color:var(--pink);
}

.hover-underline-animation::after {
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--pink);
	transform-origin: bottom right;
	transition:transform 0.25s ease-out
}

.active {border-bottom: var(--pink) 1px solid;}
  a.active {color: var(--pink) !important;}

.hover-underline-animation:hover::after {
	transform: scaleX(1);
	transform-origin:bottom left
}

@media only screen and (max-width: 1000px) {
	.outer-menu .menu > div > div > ul > li {
		float:none
	}
}

.outer-menu .menu > div > div > ul > li.current_page_item > a {
	color:rgba(153, 153, 153, .7)
}

.outer-menu .menu > div > div > ul > li.contact {
	margin-bottom:1vw
}

.outer-menu .menu > div > div > ul > li.contact > a {
	font-size: 2vw !important;
	text-transform: revert !important;
	font-weight:300 !important
}

img.menu_icon {width: 2vw;
  height: auto;
  vertical-align: middle;
  margin-right: 1vw;}
  
.menunewsletter {float: left; clear: both; width: 100%; margin-top: 0vw;}  
  	.menunewsletter p {font-size: 0.8vw; color: var(--cake) !important;margin-bottom: 1vw;}
	.menunewsletter input {padding: 0.5vw 1vw;}  
	.menunewsletter label {display: none !important;}
	.menunewsletter > .nf-field-container {margin-bottom: 0;}
	
@media screen and (max-width: 1000px) {
	.outer-menu .checkbox-toggle, .outer-menu .hamburger {
		width: 9vw !important;
		height: 9vw !important
	}

	.outer-menu .hamburger > div {
	width: 4vw;
	}

	.outer-menu .menu > div > div > ul > li > a {
		font-size:8vw !important
	}

	.outer-menu .menu > div > div > ul > li.contact > a {
		font-size: 3vw !important
	}
}