@charset "utf-8";


.menu-warp {
 position : fixed;	
 top : 0;
 left: 0;
 z-index:1; 

display:block;	
	
}

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


.menu-warp .hamburger {
 position:absolute;
 top : 0;
 left: 0;
 z-index:1;
 cursor:pointer;
 width:60px;
 height:60px;
 padding:1 rem;
 background: var(--primary-color);
 display:flex;
 align-items:center;
 justify-content:center;

		
}

/* Hamburger line */

.menu-warp .hamburger > div { 
position:relative;
width:100%;
height:2px;
background-color: #FFF;
display:flex;
align-items : center;
margin:10px;
transition: all 0.4s ease;

}


/*  Top and bottom lines */
.menu-warp .hamburger > div:before,
.menu-warp .hamburger > div:after {
	content: '';
	position:absolute;
	z-index:1;
	top:-10px;
	width:100%;
	height:2px;
	background:inherit;
	
	
	}
	
/*  Moves line down */		
.menu-warp .hamburger > div:after {
	top:10px;
	
}	
/*  Toggler animate  */			

.menu-warp .toggler:checked	+ .hamburger > div  {

transform : rotate(135deg);	
 	
}


/*  Turn lines into X  */			

.menu-warp .toggler:checked	+ .hamburger >  div:before,
.menu-warp .toggler:checked	+ .hamburger >  div:after  {
	
	top:0;
	transform : rotate(90deg);	
	}
	
	
/* Rotate on hover when checked */			
	.menu-warp .toggler:checked:hover	+ .hamburger > div  {
		
		transform : rotate(225deg);	
		
		}
		
/* Show menu*/			
.menu-warp .toggler:checked ~ .menu {
	visibility:visible;
	
	}


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

	
	}
		
		
.menu-warp .toggler:checked ~ .menu > div  > div {
	opacity:1;
	transition:opacity 0,4s ease;
	
	
	}
	
	
		
.menu-warp .menu {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
    visibility:hidden; 
    overflow:hidden; 
    display:flex;
	align-items:center;
	justify-content:center;
}


.menu-warp .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); 
    transition: all 0.4s ease;
}


.menu-warp .menu > div > div{
	
	text-align:center;
	max-width:90vw;
	max-height:100vh;
    opacity:0; 
	
	transition: opacity 0.4s ease;
	
	
	}
	
	.menu-warp .menu > div > div > ul > li{
		list-style:none;
		color: #fff; 
		font-size:1.5rm;
		padding:1rem;
		  

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

		
/*//////////////////////////////////////////////// BAR NAV /////////////////////////////////////////////*/	


.nav-warp  {
	
width:100%;
height:60px;


background-color: var(--primary-color);
border-top:    1px solid rgba(255,255,255,.2);
border-bottom: 1px solid rgba(255,255,255,.2);
position:fixed;
top:0px;
z-index:1;
display:block;


	text-decoration:none;


	line-height:60px;


}




.logo
{



top:14px;
margin-left:5px;
margin-left:70px;
cursor:pointer;
text-align:center;
z-index:99;
}

@media (max-width:819px) 
{
.logo
{



top:14px;
margin-left:20px;
cursor:pointer;
text-align:right;
z-index:99;
}
}



.hrfm0
{


color:#FFF;
text-align:center;
text-decoration:none;

}

.hrfm0:hover 
{
color:#FCC;
 }

.btnm0 {
	font-family:Playfair Display;
background:#000;
 border:2px solid #FFF;
 color:#FFF;
 text-decoration:none;
 cursor:pointer;
 border-radius:4px;
 outline:none;
 width:200px;
 height:46px;
 text-align:center;
 line-height:46px;
 margin-left:10px;

}


.btnm02 {
	
background:#000;
 border-left:1px solid #FFF;
 color:#FFF;
 text-decoration:none;
 cursor:pointer;

 outline:none;
 width:200px;
 height:46px;
 text-align:center;
 line-height:46px;

}
.btnm1 {
	
background:#FFF;
color:#000;
width:200px;
height:46px;
text-decoration:none;
line-height:46px;

cursor:pointer;
border-radius:4px;
outline:none;
text-align:center;
 text-align:center;

}
	;
.btnm0:hover,.btnm1:hover {	color:#FCC}