:root{
	--background-color:#314453;
	--darker-background-color:#283946;
	--accent-color:#1d2831;
	--text-color:#fff;
	--navbar-height:50px;
}



nav{
	height:var(--navbar-height);
	width:100%;
	background: #fff;
	display:flex;
	justify-content:center;
	align-items:center;
}


nav ul{
	height:100%;
	display: flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	list-style-type:none;
}

nav li{
	height:100%;
	width:auto;
	text-align:center;
	position:relative;
	padding:5px 10px;
}

nav ul a{
	height: 100%;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	color:#333;
	font-size:14px;
	font-weight:400;
	text-transform:uppercase;
	padding:0 5px;
}

nav ul a:hover{background-color:#666; color:#fff;}

.dropdown{
	height:min-content;
	width:200px;
	background:#fff;
	display:none;
	flex-direction:column;
	position:absolute;
	left:0;
	top:var(--navbar-height);
}

.dropdown li{
	height:50px;
	width:100%;
}

.dropdown li a{
	justify-content:flex-start;
	padding-left:30px;
	width: calc(100% - 30px);
	font-size:14px;
	font-weight:lighter;
	border-bottom:none;
	color:#333;
	font-weight:400;
	text-transform:uppercase;
}

nav li:hover .dropdown{
	display:flex;
}

nav input[type="checkbox"]{
	display:none;
}

.expandable_li{
	display:flex;
	justify-content:center;
	align-items:center;
	color:#333;
	font-size:14px;
	font-weight:400;
	text-transform:uppercase;
}

.expandable_li:hover{
	background:#666; 
	color:#fff;
}

.toggle_button{
	width:25px;
	height:20px;
	position:absolute;
	top:15px;
	right:calc(50% - 20px);
	display:none;
	flex-direction:column;
	justify-content:space-between;
}

.bar{
	height:3px;
	width:100%;
	background:#666;
	border-radius:100px;
}

@media only screen and (max-width:1025px){
	.toggle_button{
		display:flex;
	}
	
	nav ul{
		height:min-content;
		width:100%;
		background: #fff;
		display:none;
		position:absolute;
		top:var(--navbar-height);
	-webkit-box-shadow: 2px 5px 7px 1px rgba(0,0,0,0.33); 
box-shadow: 2px 5px 7px 1px rgba(0,0,0,0.33);
	}
	
	nav li{
		height:min-content;
		width:100%;
		border-bottom:1px solid #666;
		padding:0;
	}
	
	nav ul a{
		padding: 30px 0;
		color:#333;
		font-size:20px;
		text-transform:uppercase;
		font-weight:300;
	}
	
	.expandable_li{
		display:block;
		color:#333;
		font-size:20px;
		text-transform:uppercase;
		font-weight:300;
	}
	
	.expandable_li label{
		padding:30px 0;
		cursor:pointer;
		display:block;
	}
	
	.expandable_li:hover .dropdown{
		display:none;
	}
	
	.expandable_li input[type="checkbox"]:checked ~ .dropdown {
		display:block;
	}
	
	.dropdown{
		position:static;
		width:100%;
	}
	
	.dropdown li{
		padding:0 5px;
		position:static;
		display:block;
		background:#ededed;
	}
	
	.dropdown li a{
		width:100%;
		padding:5px;
		justify-content:center;
		color:#333;
		font-size:18px;
		text-transform:uppercase;
		font-weight:300;
	}
	
	#toggle_button:checked ~ ul{
		display:block
	}
	
}