@charset "UTF-8";
/* L&L Aiea Navigation CSS Document */

@import url('https://fonts.googleapis.com/css2?family=BenchNine:wght@300;400;700&family=Teko:wght@300;400;500;600;700&display=swap');

nav {
	float: right;
}
.navigation {
	font-family: 'BenchNine', sans-serif;
	display: flex;
	justify-content: flex-end;
	list-style-type: none;
	margin-top: 15px;
}
.navigation > li {
	margin: 0 0.3vw;
	position: relative;
}
.navigation > li:last-of-type {
	margin-right: 0;
}
.navigation > li a {
	font-size: clamp(14px, 2vw, 24px);
	color: white;
	display: block;
	text-align: center;
	font-weight: 300;
}
.navigation > li a:hover, .navigation > li a:active {
	color: var(--yellow);
}

/*Dropdown*/
.navigation ul {
	background: var(--maroon);
	max-height: 0;
	position: absolute;
	top: 35px;
	left: 0;
	overflow: hidden;
	z-index: 20;  
	text-align: left;
	transition: max-height 800ms ease;
}
.navigation li:hover ul, .navigation li:active ul {
	max-height: 500px;
}
.navigation ul li ~ li {
	border-top: solid 1px ivory;
}
.navigation ul li a {
	font-family: 'Kumbh Sans', sans-serif;
	font-weight: 300;
	font-size: clamp(12px, 1vw, 16px);
	color: ivory;
	padding: 8px 0.5vw 8px 0.5vw;
	display: block;
	white-space: nowrap;
}
.navigation ul li a:hover, .navigation ul li a:active {
	background: var(--aquablue);
	color: ivory;
}

label, input {
	display: none;
}


@media (max-width:992px) {
	.navigation {
		margin-top: 18px;
	}
}

@media (max-width: 700px) {
	nav {
	width: 15%;
	margin: -7px 2vw 0 0;
}
	label {
		display: block;
		font-size: 5rem;
		text-align: right;
		cursor: pointer;
		color: gold;
		width: 100%;
	}
	label:hover {
		color: white;
	}
	.navigation {
		max-height: 0;
		background: rgba(150, 39, 43, 1);
		flex-flow: column;
		overflow: hidden;
		width: 170px;
		padding: 0;
		position: absolute;
		top: 55px;
		right: -170px;
		z-index: 100;
		transition: right .7s ease-in-out;
	}
	input:checked + .navigation {
		max-height: 700px;
		right: 0;
	}
	
	.navigation li {
		border: none;
		border-bottom: solid 1px #fff4d1;
		margin: 0;
		position: relative;
	}
	.navigation li:last-child {
		border-bottom: none;
	}
	.navigation li a {
		color: #fff4d1;
		font-family: 'PT Sans', sans-serif;
		padding: 5px 0 5px 5%;
		font-size: 1.6rem;
		transition: none;
	}
	
	.navigation li ul {
		max-height:  0;
		position: static;
		padding: 0;
		background: #333;
		transition: max-height 500ms ease-in-out;
	}
	
	.navigation li:hover ul {
		max-height: 700px;
	}
	.navigation li:hover li {
		border-bottom: solid 1px #fff4d1;
	}
	.navigation li:hover ul li a {
		font-size: 1.2rem;
		color: #fff4d1;
		padding: 8px 0;
		text-align: center;
	}
	.navigation li:hover ul li a:hover {
		color: #fff4d1;
	}
}