/* Navbar & Navmenu color */
:root{
}
.header{
	z-index:20;
	background:var(--background-navbar);
	position:fixed;
	width:100%;
	height:52px;
	text-align:right;
}
/* Nav items */
.menu{
	list-style:none;
	text-align:left;
	position:absolute;
	width:100%;
	height:auto;
	top:0;
	margin-top:52px;
	padding:0 0 10px 0;
	clear:both;
	background:#333;
	transition:0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	transform:scale(1, 0);
	transform-origin:top;
}
/* Hamburger menu button */
.menu-btn:checked ~ .menu{
	transform:scale(1, 1);
	transform-origin:top;
	transition:0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	z-index:3;
}
/* Hamburger menbu text */
.menu a{
	display:inline-block;
	width:100%;
	height:100%;
	padding:15px 0;
	text-decoration:none;
	font-weight:800;
	letter-spacing:2px;
	font-size:16px;
	text-transform:capitalize;
	color:#fff;
	opacity:0;
	transition:0.5s;
}
.menu a:hover{
	font-size:18px;
}
.menu li{
	border-top:1px solid rgb(200, 200, 200);
	padding:0 0;
	margin:0 54px;
	opacity:0;
	transition:0.5s;
}

.menu-btn:checked ~ .menu a,
.menu-btn:checked ~ .menu li{
	z-index:3;
	opacity: 1;
	transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
}
.menu-btn:checked ~ .menu li:last-child{
	border-bottom:1px solid #ccc;
}
.menu-btn{
	display:none;
}
.menu-icon{
	display:inline-block;
	position:relative;
	cursor:pointer;
	padding:24px 14px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.navicon{
	background:#000;
	display:block;
	height:3px;
	width:26px;
	position:relative;
	transition:0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}.navicon:before,
	.navicon:after{
	content:"";
	display:block;
	height:100%;
	width:100%;
	position:absolute;
	background:#000;
	transition:0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
.navicon:before{
	top: 9px;
}
.navicon:after{
	bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked ~ .menu-icon .navicon:before{
	transform:rotate(-45deg);
}
.menu-btn:checked ~ .menu-icon .navicon:after{
	transform: rotate(45deg);
}
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before{
	top:0;
}
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after{
bottom:0;
}
.menu-btn:checked ~ .menu-icon .navicon{
	background:rgba(0, 0, 0, 0);
	transition:0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
/* Hamburger Menu Animation End */
/* Navbar Container */
.navtext-container{
	width:100%;
	height:52px;
	background:#fff;
	position:absolute;
	box-sizing:border-box;
	display:flex;
	justify-content:center;
	align-items:center;
	border-bottom:1px solid #000;
}
/* Navbar Text */
.navtext{
	position:absolute;
	color:#000;
	font-family:"Kiwi Maru",serif;
	letter-spacing:2px;
	font-weight:800;
	z-index:10;
}
.navtext a{
	text-decoration:none;
	color:#000;
}