/* Header
==================================== */
header{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	padding: var(--mBlock) var(--sides);
	display: grid;
	grid-gap: var(--colsx2);
	text-transform: uppercase;
	z-index: 10;
}
menu,
nav{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	grid-auto-rows: min-content;
	column-gap: var(--gap);
}
@media (min-width: 1181px) and (orientation: landscape){
	header{
		display: grid !important;
		grid-template-columns: 3fr 6fr 3fr;
		align-items: center;
		pointer-events: none;
	}
	header a{
		pointer-events: all;
	}
	menu{
		grid-column: 3;
		justify-self: flex-end;
	}
}
@media (max-width: 1180px){
	header{
		grid-template-rows: 1fr min-content;
		-webkit-backdrop-filter: blur(15px);
				  backdrop-filter: blur(15px);
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	nav{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	menu{
		grid-row: 1;
		grid-auto-flow: row;
		font-family: var(--font_reg);
		font-size: 12vw;
		font-size: clamp(16px, 12vw, 80px);
		line-height: .9;
	}
}
@media (min-width: 1181px) and (orientation: portrait){
	.page-index header{
		grid-template-rows: 1fr min-content;
		-webkit-backdrop-filter: blur(15px);
				  backdrop-filter: blur(15px);
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.page-index nav{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.page-index menu{
		grid-row: 1;
		grid-auto-flow: row;
		font-family: var(--font_reg);
		font-size: 12vw;
		font-size: clamp(16px, 12vw, 80px);
		line-height: .9;
	}
}

/*Menu Trigger*/
#menu-trigger{
	position: fixed;
	top: var(--mBlock);
	right: var(--mBlock);
	width: 40px;
	height: 40px;
	display: none;
	border: 1px solid var(--ctext);
	-webkit-border-radius: 100px;
			  border-radius: 100px;
	-webkit-backdrop-filter: blur(5px);
			  backdrop-filter: blur(5px);
	-webkit-transition: transform var(--speed) var(--ease2);
			  transition: transform var(--speed) var(--ease2);
	-webkit-user-select: none;
		-moz-user-select: none;
		 -ms-user-select: none;
			  user-select: none;
	cursor: pointer;
	z-index: 11;
}
#menu-trigger div{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 32px;
	background-color: var(--ctext);
	transform: translate(-50%, -50%);
}
#menu-trigger div:last-child{
	transform: translate(-50%, -50%) rotate(90deg);
}
#menu-trigger.active{
	transform: rotate(45deg);
}
@media (max-width: 1180px){
	#menu-trigger{
		display: block;
	}
}
@media (min-width: 1181px) and (orientation: portrait){
	.page-index #menu-trigger{
		display: block;
	}
}