#headernav {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	/* 	margin-bottom: 2em; */
	position: fixed;
	top: 0;
	left: 0;
	padding: 0 2vw;
	width: 100%;
	height: 80px;
	z-index: 2;
	box-sizing: border-box;
}

body[data-overlaystate='open'] #headernav,
#headernav.hidden {
	opacity: 0;
	pointer-events: none;
}

#headernav .header-items {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

#header .header-items a {
	margin: 0;
}

#header .header-logo,
#viewer .header-logo {
	overflow: hidden;
	text-indent: -999vw;
	width: 38px;
	height: 42px;
	/* 
  background-image: url(../img/APE_Logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
 */
	background-color: #fff;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url(../img/APE_Logo.png);
	mask-image: url(../img/APE_Logo.png);
	transition: 0.2s transform cubic-bezier(0.34, 1.56, 0.64, 1);
}

#header .header-logo:hover,
#viewer .header-logo:hover {
	/* 	background-color: #e0b23d; */
	transform: scale(1.1);
}

#headernav .connect-wallet {
	font-family: azo-sans-uber, sans-serif;
	font-size: 12px;
	line-height: 32px;
	text-align: center;
	padding: 0 1.5em;
	height: 32px;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	border: 1px solid #7c7c7c;
	border-radius: 100px;
	margin-right: 2em;
	transition: 0.5s opacity ease-in-out, 0.2s transform cubic-bezier(0.34, 1.56, 0.64, 1);
	cursor: pointer;
	min-width: 150px;
}

#headernav .connect-wallet.solana,
#headernav .connect-wallet.solflare {
	font-family: azo-sans, sans-serif;
	font-size: 16px;
	font-weight: normal;
	position: relative;
	padding-left: 2.5em;
}
#headernav .connect-wallet.solana:before {
	content: url('../images/icons/icon-phantom.png');
	position: absolute;
	height: 21.55px;
	width: 21.55px;
	left: 5px;
	top: 4px;
}
#headernav .connect-wallet.solflare:before {
	content: '';
	position: absolute;
	height: 20px;
	width: 20px;
	left: 8px;
	top: 5px;
	background-size: 20px 20px;
	background-image: url('../images/icons/icon-solflare.svg');
	background-repeat: no-repeat;
}

#headernav .connect-wallet:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	transform: scale(1.05);
}

#headernav .header-menu,
#hamburger-overlay .close {
	background-color: transparent;
	border: none;
	width: 28px;
	height: 28px;
	text-indent: -999vw;
	overflow: hidden;
	cursor: pointer;
	position: relative;
}

#headernav .header-menu:before,
#headernav .header-menu:after,
#hamburger-overlay .close:before,
#hamburger-overlay .close:after {
	content: '';
	height: 2px;
	width: 100%;
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	background-color: #fff;
	border-radius: 2px;
	transition: 0.2s transform cubic-bezier(0.34, 1.56, 0.64, 1);
}

#hamburger-overlay .close:before,
#headernav .header-menu:before {
	transform: translateY(-4px);
}

#hamburger-overlay .close:after,
#headernav .header-menu:after {
	transform: translateY(4px);
}

#hamburger-overlay.open .close:before,
#headernav .header-menu.open:before {
	transform: translateY(0) rotate(-45deg);
}

#hamburger-overlay.open .close:after,
#headernav .header-menu.open:after {
	transform: translateY(0) rotate(45deg);
}

#headernav .header-menu:hover {
	/* 	background-color: #e0b23d; */
	transform: scale(1.125);
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.75);
	color: #fff;
	transition: opacity 0.25s linear;
	/* 	padding-top: 80px; */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	overflow-y: auto;
	z-index: 2;
}

#header .overlay:not(.translucent):not([data-overlaytype='dropdown']) {
	background-color: #1f1c1a;
}

.overlay.overlay-center {
	padding-top: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.overlay.overlay-gray {
	background-color: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(3px);
}

.overlay:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: radial-gradient(ellipse closest-side at center, rgba(65, 61, 55, 1) 0%, rgba(65, 61, 55, 0) 100%);
	z-index: -1;
}

.overlay:not(.open) {
	opacity: 0;
	pointer-events: none;
	/* 	z-index: 0; */
}

.overlay[data-overlaytype='dropdown'] {
	position: absolute;
	top: 13px;
	left: auto;
	right: 13px;
	bottom: auto;
	padding: 20px;
	background-color: transparent;
	background: linear-gradient(180deg, rgba(92, 82, 67, 0.9) 0%, rgba(28, 24, 22, 0.9) 100%);
	box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.5);
	border-radius: 6px;
}

#header .overlay .nav-menu-box {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#header .overlay[data-overlaytype='dropdown'] .nav-menu-box {
	margin: 0;
	padding: 20px 60px 20px 20px;
	justify-content: left;
}

#header .overlay .nav-menu {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-height: 40vh;
}

#header .overlay .nav-menu > li {
	font-family: azo-sans-uber, sans-serif;
	font-size: 26px;
	font-weight: normal;
	/*   font-size: clamp(11px, 2.5vw, 45px); */
}

#header .overlay[data-overlaytype='dropdown'] .nav-menu > li {
	font-size: 18px;
}

#header .overlay .nav-menu > li a {
	display: block;
	color: #808080;
	text-decoration: none;
	text-align: center;
	transition: color 0.125s linear;
}

#header .overlay[data-overlaytype='dropdown'] .nav-menu > li a {
	color: #fff;
	margin: 0;
	padding: 0.75em 0;
	text-align: left;
}

#header .overlay .menu-title {
	font-family: azo-sans-uber, sans-serif;
	font-size: 30px;
	font-weight: normal;
	/*   font-size: clamp(11px, 2.5vw, 45px); */
	color: #fff;
	margin-bottom: 2em;
	text-align: center;
}

#header .overlay .wallet-menu {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#header .overlay .menu-box {
	/* 	margin: 15vh 0; */
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#header .overlay .menu-box .ape-head img {
	width: 170px;
}

#header .overlay .menu-box.centered {
	align-items: center;
}

#header .overlay .wallet-menu > li {
	font-family: azo-sans-uber, sans-serif;
	font-size: 22px;
	/*   font-size: clamp(10px, 1.5vw, 33px); */
	border-radius: 2em;
	background-color: #999;
	margin: 0 1em;
	transition: 0.2s transform cubic-bezier(0.34, 1.56, 0.64, 1);
}

#header .overlay .wallet-menu > li:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	transform: scale(1.05);
}

#header .overlay .wallet-menu > li a {
	display: block;
	width: 6em;
	padding: 0.75em 3em 0.75em 4em;
	color: #fff;
	text-decoration: none;
	background-repeat: no-repeat;
	background-size: 1.25em auto;
	background-position: 1.75em center;
	text-align: center;
}

#header .overlay .wallet-menu > li.phantom {
	background-color: #551bfa;
}

#header .overlay .wallet-menu > li.phantom a {
	background-image: url(../images/icons/icon-phantom.svg);
}

#header .overlay .wallet-menu > li.solflare {
	background-color: #fc7227;
}

#header .overlay .wallet-menu > li.solflare a {
	background-image: url(../images/icons/icon-solflare.svg);
	background-size: 1.75em auto;
}

#header .overlay .articles {
	overflow-y: auto;
	width: 57%;
	padding: 1em 5% 2em 5%;
	margin-bottom: 80px;
}

#header .overlay .article-box + .article-box {
	margin-top: 4em;
}

#header .overlay .article-box .article-title {
	font-family: azo-sans-uber, sans-serif;
	font-size: 22px;
	/*   font-size: clamp(10px, 1.5vw, 33px); */
	margin-bottom: 0.5em;
}

#header .overlay .article-box p {
	font-size: 18px;
	/*   font-size: clamp(9px, 1.2vw, 27px); */
	margin-bottom: 1em;
}

#header .overlay[data-overlaytype='dropdown'] .secondary-nav {
	width: 100%;
	padding-top: 20px;
	border-top: 1px solid #949494;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

#header .overlay .social {
	display: flex;
	flex-direction: row;
	margin: 0 0 50px 0;
	padding: 0;
	justify-content: center;
}

#header .overlay .social > li {
	margin: 0 1em;
}

#header .overlay .social > li a {
	background-color: #fff;
	width: 38px;
	height: 30px;
	display: block;
	padding: 10px;
	text-indent: -999vw;
	overflow: hidden;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 3em;
	mask-size: 3em;
	border: 1px solid #1f1c1a;
	border-radius: 100%;
}

#header .overlay[data-overlaytype='dropdown'] .secondary-nav .social {
	margin: 0;
}

#header .overlay[data-overlaytype='dropdown'] .secondary-nav .social > li {
	margin: 0;
}

#header .overlay[data-overlaytype='dropdown'] .secondary-nav .social > li a {
	background-color: #949494;
	width: 24px;
	height: 19px;
	padding: 5px;
	margin: 0;
	-webkit-mask-size: 1.5em;
	mask-size: 1.5em;
}

#header .overlay .social > li.icon-twitter a {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg fill="black" height="28" viewBox="0 0 35 28" width="35" xmlns="http://www.w3.org/2000/svg"><path d="m34.4645 3.40635c-1.2525.555-2.598.93-4.0125 1.0995 1.4595-.87331 2.5514-2.2478 3.072-3.867002-1.3712.814482-2.872 1.387792-4.437 1.695002-1.0524-1.1237-2.4464-1.868513-3.9655-2.118791-1.5191-.2502783-3.0783.007976-4.4356.734668-1.3573.726693-2.4367 1.881163-3.0707 3.284173-.6339 1.40302-.7869 2.97607-.4352 4.47495-2.7785-.13951-5.4965-.86168-7.97785-2.11964-2.4813-1.25797-4.67037-3.02362-6.42513-5.18236-.6 1.035-.945 2.235-.945 3.513-.00067 1.15049.28265 2.28336.82482 3.2981.54216 1.01473 1.32642 1.87995 2.28318 2.51885-1.10959-.0353-2.19469-.3351-3.165-.87445v.09c-.00011 1.61365.55805 3.17755 1.57977 4.42645 1.02173 1.249 2.44408 2.1059 4.02573 2.4255-1.02933.2786-2.1085.3197-3.156.12.44624 1.3885 1.31549 2.6026 2.48605 3.4724 1.17056.8699 2.58382 1.3519 4.04193 1.3786-2.47523 1.9432-5.53215 2.9972-8.67898 2.9925-.55743.0002-1.114388-.0324-1.668002-.0975 3.194212 2.0538 6.912512 3.1438 10.709982 3.1395 12.855 0 19.8825-10.647 19.8825-19.88095 0-.3-.0075-.603-.021-.903 1.367-.98854 2.5469-2.21266 3.4845-3.615z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg fill="black" height="28" viewBox="0 0 35 28" width="35" xmlns="http://www.w3.org/2000/svg"><path d="m34.4645 3.40635c-1.2525.555-2.598.93-4.0125 1.0995 1.4595-.87331 2.5514-2.2478 3.072-3.867002-1.3712.814482-2.872 1.387792-4.437 1.695002-1.0524-1.1237-2.4464-1.868513-3.9655-2.118791-1.5191-.2502783-3.0783.007976-4.4356.734668-1.3573.726693-2.4367 1.881163-3.0707 3.284173-.6339 1.40302-.7869 2.97607-.4352 4.47495-2.7785-.13951-5.4965-.86168-7.97785-2.11964-2.4813-1.25797-4.67037-3.02362-6.42513-5.18236-.6 1.035-.945 2.235-.945 3.513-.00067 1.15049.28265 2.28336.82482 3.2981.54216 1.01473 1.32642 1.87995 2.28318 2.51885-1.10959-.0353-2.19469-.3351-3.165-.87445v.09c-.00011 1.61365.55805 3.17755 1.57977 4.42645 1.02173 1.249 2.44408 2.1059 4.02573 2.4255-1.02933.2786-2.1085.3197-3.156.12.44624 1.3885 1.31549 2.6026 2.48605 3.4724 1.17056.8699 2.58382 1.3519 4.04193 1.3786-2.47523 1.9432-5.53215 2.9972-8.67898 2.9925-.55743.0002-1.114388-.0324-1.668002-.0975 3.194212 2.0538 6.912512 3.1438 10.709982 3.1395 12.855 0 19.8825-10.647 19.8825-19.88095 0-.3-.0075-.603-.021-.903 1.367-.98854 2.5469-2.21266 3.4845-3.615z"/></svg>');
}

#header .overlay .social > li.icon-discord a {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path fill="white" class="cls-1" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path fill="white" class="cls-1" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>');
}

#header .overlay .social > li a:hover {
	background-color: #e0b23d;
	transform: scale(1.1);
}

#header .overlay .boilerplate {
	width: 100%;
	display: block;
	font-size: 16px;
	padding: 1em;
	box-sizing: border-box;
	text-align: center;
}

#header .overlay .boilerplate a {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	margin: 0 1em;
	padding: 0.5em;
}

#header .overlay[data-overlaytype='dropdown'] .secondary-nav .boilerplate {
	padding: 0;
}

#header .overlay[data-overlaytype='dropdown'] .secondary-nav .boilerplate a {
	color: #949494;
	font-size: 9px;
	margin: 0;
}

#header .overlay a,
#header .overlay .nav-menu > li a {
	transition: 0.2s transform cubic-bezier(0.34, 1.56, 0.64, 1);
}

#header .overlay a:hover,
#header .overlay .nav-menu > li:hover a {
	color: #e0b23d;
	transform: scale(1.05);
}

#header .overlay .nav-menu > li:hover a.nav-link {
	transform: scale(1.6);
}

.overlay .overlay-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	/* 	margin-bottom: 2em; */
	position: fixed;
	top: 0;
	left: 2vw;
	width: 96%;
	height: 80px;
	box-sizing: border-box;
	/* 	background-color: #1f1c1a; */
}

.overlay[data-overlaytype='dropdown'] .overlay-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	/* 	margin-bottom: 2em; */
	position: absolute;
	top: -13px;
	left: auto;
	right: calc(2vw - 13px);
	width: auto;
	height: 80px;
	/* 	background-color: #1f1c1a; */
}

.overlay:not(.hamburger) .close,
#overlay-header .close {
	border: none;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
	text-indent: -999vw;
	width: 28px;
	height: 28px;
	background-color: #fff;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 75%;
	mask-size: 75%;
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg fill="none" height="21" viewBox="0 0 22 21" width="22" xmlns="http://www.w3.org/2000/svg"><g stroke="white" stroke-linecap="round" stroke-width="2"><path d="m2.41421 1 18.38479 18.3848"/><path d="m1 19.5858 18.3848-18.38479"/></g></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg fill="none" height="21" viewBox="0 0 22 21" width="22" xmlns="http://www.w3.org/2000/svg"><g stroke="white" stroke-linecap="round" stroke-width="2"><path d="m2.41421 1 18.38479 18.3848"/><path d="m1 19.5858 18.3848-18.38479"/></g></svg>');
	transition: 0.2s transform cubic-bezier(0.34, 1.56, 0.64, 1);
}

.overlay:not(.hamburger) .close:hover,
#overlay-header .close:hover {
	/* 	background-color: #e0b23d; */
	transform: scale(1.1);
}

.overlay ul:not(.traits) {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
