.menu-wrap {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1;

}


.menu-wrap .toggler {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	cursor: pointer;
	width: 50px;
	height: 50px;
	opacity: 0;
}

.menu-wrap .hamburger {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 60px;
	height: 60px;
	padding: 1rem;
	background-color: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	border:2px solid #FFFFFF;
  	border-radius:15px;
}

/*hamburger line*/
.menu-wrap .hamburger > div {
	position: relative;
	width: 100%;
	height: 2px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease;
}


/*style for top and bottom lines*/
.menu-wrap .hamburger > div:before,
.menu-wrap .hamburger > div:after {
	content:  '';
	position: absolute;
	z-index: 1;
	top: -10px;
	width: 100%;
	height: 2px;
	background: inherit;
}

/*moves lines down*/
.menu-wrap .hamburger > div:after  {
	top: 10px;

}

/*toggler animate*/
.menu-wrap .toggler:checked + .hamburger > div {
	transform: rotate(135deg);
}


/*turns lines*/
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
	top: 0;
	transform: rotate(90deg);
}

/*rotate on hover when checked*/
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);

}
/*show menu*/
.menu-wrap .toggler:checked ~ .menu {
	visibility: visible;
	background-color: #000 !important; opacity: 90%;

}

.menu-wrap .toggler:checked ~ .menu  > div {
	transform: scale(1);
	transition-duration: var(--menu-speed);
}

.menu-wrap .toggler:checked ~ .menu  > div > div {
opacity: 1;
transition: opacity 0,4s ease;

}

.menu-wrap .menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .menu > div {
	background: var(--overlay-color)
		border-radius: 50%;
		width: 200vw;
		height: 200vw;
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		transform: scale(0);
		transform: all 0.4s ease;
}

.menu-wrap .menu > div > div {
text-align:center;
max-width: 90vh;
max-height: 100vh;
opacity: 0;
transition: opacity 0.4s ease;
}

.menu-wrap .menu > div > div > ul > li {
	list-style: none;
	color: #fff;
        font-family: arial;
	font-size: 1.5rem;
	padding: 1rem;
}

.menu-wrap .menu > div > div > ul >li > a {
	color: inherit;
	text-decoration: none;
	transition: color 0.4s ease;
}


@media screen and (min-width: 700px) {
.menu-wrap{
visibility: hidden;
}