@charset "utf-8";

.menu-wrap{
	position:fixed;
	left:82%;
	top:10px;
	width: 30px;
	height: 30px;
	padding: 1rem;
	background: rgba(255, 255, 255, 0);
    align-items: center;
	justify-content: center;
	
	

	}
	
  .menu-wrap .toggler {
	position:absolute;
    top: 0;
    left: 0;
	z-index: 2;
	cursor: pointer;
	width:60px;
	height: 60px;
	opacity: 0;
	align-items: center;
	justify-content: center;
	
	
	}
	
	.menu-wrap .hamburger{
	position: absolute;
	top: 0;
	left: 0;  
	z-index: 0;
	width: 15px;
	height: 15px;
	padding: 0.4rem;
	background: rgba(0,0,102,.8);
	border-radius: 10px;
    border: thick double rgba(255,255,255,1); 
	display: flex;
	align-items: center;
	justify-content: center;
	}
	
	/* hamburger middle line */
	.menu-wrap .hamburger > .middleline {
		position: relative;
		width: 100%;
		height: 3px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.4s ease;
		}
		
	/*Topline */
 .menu-wrap .hamburger > .middleline:before,
 .menu-wrap .hamburger > .middleline:after 
   {
		    content:" ";
			position:absolute;
		    z-index: 1;
			top: -5px;
			left:0;
			width: 100%;
			height: 3px;
			background: #fff; 
			  
			
			        
		 
	}
			
		                   
		/*bottomline*/
 	.menu-wrap .hamburger > .middleline:after {
			top: 5px;
	         }
		   
	

	
    .menu-wrap .toggler:checked +.hamburger > .middleline  {
	    transform: rotate(135deg);
		}
			
	
	
	
	
	
	.menu-wrap .toggler:checked + .hamburger > div:before,	
    .menu-wrap .toggler:checked + .hamburger > div:after 
	
	{
	top:0;
	   transform:rotate(90deg);
	  
		}
		
      		
	
	.menu-wrap .toggler:checked:hover + .hamburger > div {	
	   transform: rotate(225deg);
	}
	
	
	
	
	
	
	.menu-wrap .toggler:checked ~.menu {
		visibility:visible;
	
	
		}
			
	.menu-wrap .toggler:checked ~.menu > div {
		transform: scale(1);
		transition-duration:  1s ease;
	}
			
	.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; 
	}
	/* overlay*/
	
	
	.menu-wrap .menu > div {
		background: rgba(0, 0, 102, 0.8);
		border-radius: 50%;
		width:100vw;
		height:100vh;
		display: flex;
		flex: none;
		align-items:center;
		justify-content:center;
		
		transform: scale(0); 
		transition:all 0.4s ease;     
		
		}
		
		
	.menu-wrap .menu > div > div {	
	max-width: 90vw;
	max-height: 100vh; 
	opacity: 0; 
	transition: opacity 0.4s ease;
	}
	
	.menu-wrap .menu > div > div > ul > li {
		list-style: none;
		color: #fff;
		font-size: 1.5rem;
		padding: .6rem;
	}
	
	.menu-wrap .menu > div > div > ul > li > a {
		color:inherit;
		text-decoration:none;
		transition: color 0.4s ease;
	}