nav{
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:80px;
	display:flex;
	justify-content:space-between;
	z-index:100;
}
nav>ul{
	margin:16px;
}
nav>ul.main{
	margin:8px;
	text-align: center;
}
nav>ul ul{
	opacity:0;
	pointer-events:none;
	position:absolute;
	background-color:#FFF;
	border-radius:16px;
	padding:16px;
	width:600px;
	margin-top:15px;
	transition:0.2s;
	left: 50%;
    margin-left: -300px;
	text-align: left;
	box-shadow:0 0 8px rgba(0, 50, 200, .1),0 30px 70px -35px rgba(0, 50, 200, .2);
}
#menubtn{
    position: absolute;
    right: 0;
    padding: 20px 30px;
    top: 0;
	z-index:10;
	display:none;
	color:rgb(var(--theme));
}
#menubtn>i{font-size:25pt;}
nav>ul ul>strong{
	display:block;
	padding:10px 0;
	color: rgb(var(--theme));
	letter-spacing:2px;
	font-size:10pt;
}
nav li>a.dd:before{
    content: "";
	opacity:0;
	transition:0.2s;
    border: solid 10px transparent;
    border-bottom-color: #FFF;
    position: absolute;
    bottom: -15px;
    margin-left: -15px;
    left: 50%;
}
nav li>a.dd:hover:before{
	opacity:1;
}
nav>ul ul:after{
	content:"";
	height:20px;
	left:0;right:0;
	position:absolute;
	top:-20px;
}
nav li{
	display: inline-block;
}
nav a{
	color:#0a3045;
	font-weight:500;
	text-decoration:none;
	border-radius:8px;
	text-align:center;
	transition:0.2s;
	user-select:none;
}
nav li>a{
	display:inline-block;
	align-items:center;
	padding:8px 16px;
	position:relative;
}
nav li>a.dd:after{
	content:"keyboard_arrow_down";
	font-family:'Material Symbols Outlined';
	position:absolute;
	margin-left:5px;
	transition:0.2s;
}
nav li>a.btn{
	color: rgb(var(--theme));
	background-color:#FFF;
}
nav ul.main>li>a:not(.btn){
	padding:12px 30px;
	margin:0px;
	cursor:pointer;
}
nav ul.main>li>a.dd{
	padding-right:35px;
}
nav ul ul>li>a:hover{
	background-color:rgba(var(--theme),.1);
}
nav ul.main>li>a.dd:hover:after{
	transform:rotate(180deg);
}
nav>ul ul>li{
	max-width:294px;
	width:100%;
	vertical-align:top;
	margin-bottom:4px;
}
nav>ul ul>li>a{
	padding-left:52px;
	text-align:left;
	min-height:60px;
}
nav>ul ul>li>a>i{
    position: absolute;
    margin-left: -44px;
    margin-top: 4px;
    font-size: 25pt !important;
    color: rgb(var(--theme));
}
nav>ul ul>li>a>img{
    position: absolute;
    margin-left: -44px;
    margin-top: 4px;
	height:31px;
	width:31px;
}
nav>ul ul p{margin:0;font-weight:normal;font-size: 11pt;}

nav>.logo{
	padding:12px;
}
nav>.logo>img{
	height:50px;
	background: rgb(var(--theme));
    padding: 6px;
    border-radius: 8px;
    box-sizing: border-box;
}

nav li img{
	height:20px;
}
.btn{
    cursor: pointer;
    padding: 11px 25px;
    display: inline-block;
    margin: 6px;
    background-color: rgb(var(--theme));
    border-radius: 4px;
    transition: 0.2s;
    color: #FFF;
    font-weight: bold;
	padding-right:45px;
	position:relative;
}

.btn.hollow{
	box-shadow:inset 0 0 0 1px rgb(var(--theme));
	background-color:transparent!important;
	color:rgb(var(--theme))!important;
}
section.theme .btn.hollow{
	color: #FFF!important;
	box-shadow:inset 0 0 0 1px #FFF;
}

.btn:before,.btn:after{
    font-weight: normal;
    content: "keyboard_arrow_right";
    font-family: "Material Symbols Outlined";
    position: absolute;
    padding: 3px 7px;
    top: 6px;
    border-radius: 7px;
    transition: 0.2s;
    font-size: 16pt;
	right:7px;
}

.btn:before{
	content: "remove";
	opacity:0;
}
.btn:hover:before{
	opacity:1;
}
.btn:hover:after{
	transform:translate(6px);
}
.small-only{
	display:none;
}

@media screen and (min-width: 749px){
	nav li>a:hover~ul,nav>ul ul:hover{
		opacity:1;
		pointer-events:unset;
		display:block;
		z-index:1;
	}
	nav ul.main>li>a:not(.btn):hover{
		background-color:rgba(var(--theme),.1);
		transition:0s;
	}
}
@media screen and (max-width:750px){
	
	.small-only{
		display:unset;
	}
	
	#menubtn{display:block;}
		
	nav{
		overflow:hidden;
	}
	
	nav.open{
		height:unset;
		bottom:0;
	}
	
	nav.open #menu{
		bottom:0;
		top:0;
	}
	
	nav>ul a.btn{
		color:#FFF;
		background-color:rgb(var(--theme));
		display: inline-block;
	}
	
	nav>ul.main{
		pointer-events:none;
		position:absolute;
		left:0;
		right:0;
		margin:0;
		padding:15px 10px 0;
		z-index:2;
		background-color:#FFF;
		opacity:0;
		transition:0.2s;
		transform:scale(0.9);
		box-shadow:0 15px 38px rgba(91,130,230,.1);
	}
	nav.open>ul.main{
		pointer-events:unset;
		opacity:1;
		transform:scale(1);
	}
	nav>ul.main>li{
		display:block;
		
	}
	nav>ul.main>li:not(.sticky)>a{
		color:#000;
		text-align:left;
		display: block;
		border-bottom:dashed 1px #dee7f1;
		padding:18px 5px;
	}
	nav>ul ul>li{
		max-width:unset;
	}
	nav>ul ul>li>a{
		display:block;
	}
	nav li>a.dd:before{
		display:none;
	}
	nav>ul ul{
        margin: 0;
        box-shadow: none;
        position: fixed;
        inset: 0;
        transform: translateX(100%);
        opacity: 1;
        transition: 0.2s;
        z-index: 1;
        box-sizing: border-box;
        padding: 30px;
        width: 100%;
        padding-top: 56px;
		pointer-events:auto;
	}
	
	nav li>a:hover~ul,nav li>ul:hover{
		transform:translateX(0%);
	}
	
	nav li>a.dd:after{
		transform: rotate(-90deg)!important;
	}
	
	nav>ul>li.sticky{
		height:124px;
		padding-top:10px;
		margin:5px;
		border-radius:5px;
	}
	
}