@charset "utf-8";

nav {
	position:fixed;
	bottom:0px;
	width: min(1152px,100vw);
	left: 50%;
	margin: 0 max(-576px, -50vw);
	text-align:left;

}
nav img {
	position:relative;
	background-color:rgba(0,0,0,.75);
	padding:15px 15px 0 15px;
	margin:0;
	vertical-align:bottom;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	z-index:2;
	max-height:75px;
}
nav ul {
	position:absolute;
	text-align:center;
	display:block;
	overflow:hidden;
	list-style:none;
	margin:0;
	padding: 0 min(96px, 10vw);
	width:min(1152px,100vw);
	height:1px;
	bottom:0;
	z-index:1;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	transition:height .25s linear, width .25s linear, background-color .25s linear;
}
nav:hover ul, 
nav:focus-within ul {
	height:90px;
	background-color:rgba(0,0,0,.75);
	-webkit-transition:height .25s linear;
	-moz-transition:height .25s linear;
	transition: height .25s linear, width .25s linear, background-color .25s linear;}
nav li {
	display:inline-block;
	list-style:none;
	height:45px;
	text-align:center;
	padding:0 20px;
}
nav a {
	display:inline-block;
	height:45px;
	line-height:45px;
	color:rgb(143,
			188,
			143);;
	font-size:16px;
	text-decoration:none;
	
}
nav a:hover {
	color:rgb(32, 178, 170);
	text-decoration:underline;
}
@media screen and (max-width: 959px) {
nav {
	top:0;
	left:0;
	bottom:0;
	height:inherit;
	width:10vw;
	margin:0;
}
nav img {
	position:absolute;
	bottom:0;
	left:0;
	height:10vmax;

}
nav ul {
	padding:0 2.5px;
	border-radius:0;
	height:100%;
	width:0;
	background-color:rgba(0,0,0,.75);
	margin:0;
}
nav:hover ul,
nav:focus-within ul {
	min-width:33vw;
	width:max-content;	
	height:100%;
}
nav li {
	height:min(45px,10vh);
	min-width:calc(33vw - 5px);
	text-align: left;
	display:block;
}
nav a {
	height:20px;
	line-height:min(45px, 10vh);
	display:block;
}
}