/*-----Header-----*/

#header {
	position:fixed;
	top: 0;
	width: 100%;
	height: 90px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	z-index: 5;
	background-color: var(--brand-primary);
}

#menu {
	display: flex;
	justify-content: center;
	color: var(--text-alt);
	font-size: 1.4rem;
	padding: 1rem;
	cursor: pointer;
}

#logo {
	cursor: pointer;
	align-self: center;
}

#logo img {
	max-width: 200px;
}

#search-close {
	display: none;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	z-index: 3;
	color: var(--text-alt);
	cursor: pointer;
}

#search-label {
	height: 30px;
}

#search-icon {
	display: none;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	z-index: 14;
	transition: top .8s ease-in-out;
}

#search-icon-mobile {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20%;
	height: 60px;
	z-index: 14;
	transition: top .8s ease-in-out;
}

#search-icon img, #search-icon-mobile img, #search-close img {
	width: 30px;
	height: auto;
	cursor: pointer;
}

#search-form {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 80%;
	height: 90px;
	background-color: var(--brand-primary);
	justify-content: center;
	align-items: center;
	z-index: 0;
	color: var(--text-alt);
	transform: translateX(100%);
	transition: transform .8s ease-in-out;
	border-bottom: solid 1px #2A3047;
}

#mobile-search {
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: solid 1px #2A3047;
}

#mobile-search:hover {
	background-color: initial;
}

#mobile-search-form {
	display: flex;
	width: 100%;
	height: 90px;
	background-color: var(--brand-primary);
	justify-content: center;
	align-items: center;
	z-index: 0;
	color: var(--text-alt);
}

#mobile-search-box {
	width: 100%;
	height: 100%;
	padding: 0 2rem;
	background-color: var(--brand-primary);
	color: var(--text-alt);
	border: none;
}

#mobile-search-box:focus {
	outline: none;
}

#search-box {
	width: calc(240px + calc(100% - 400px)/2);
	height: 100%;
	padding: 0 1rem;
	background-color: var(--brand-primary);
	color: var(--text-alt);
	border: none;
}

#menu.search {
	display: none;
}

#search-close.search {
	display: flex;
	transform: translateX(0%);
	transition: transform 0.8s ease-in-out;
	z-index: 12;
}

#search-form.search {
	transform: translateX(0%);
	visibility: visible;
	z-index: 11;
	transition: transform 0.8s ease-in-out;
}

#search-live {
	position: fixed;
	top: 90px;
	width: calc(100% - 1rem);
	background-color: var(--brand-primary);
	border: solid 0px;
	padding: 0 1rem;
	z-index: 10;
}

.search-result {
	padding: 1rem;
	transition: background 0.5s ease-in-out;
}

.search-result:hover {
	background: #E8E8E8;
	transition: background 0.5s ease-in-out;
}

nav {
	width: 100%;
	position: fixed;
	top: 90px;
    bottom:0;
	left: 0;
	z-index: 5;
	overflow-y: scroll;
    overflow-x: hidden;
	justify-content: flex-start;
	background-color: var(--brand-primary);
	transform: translateX(-100%);
	transition: transform .8s ease-in-out;
}

.extended {
	transform: translateX(0);
	transition: transform .8s ease-in-out;
}

nav ul li {
	height: 100%;
	list-style: none;
	position: relative;
}

nav ul li a {
	display: flex;
	height: 100%;
	align-self: center;
	padding: 0.625rem;
	margin: 0 1.25rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--text-alt);
	background-color:var(--brand-primary);
	border-bottom: solid 1px var(--text-primary);
	transition: background .5s;
}

nav ul li:hover, nav ul li:hover li, nav ul li:hover a{
	background-color:#454B65;
	transition: background .5s;
}

nav ul li ul {
	display: flex;
	flex-flow: column;
	z-index: 5;
	background-color:var(--brand-primary)
}

nav ul li ul li a {
	background-color: var(--brand-primary);
	padding: 0.625rem 0.5rem;
	margin: 0 1.25rem 0 2.5rem;
	justify-content: flex-start;
	font-size: 0.925rem;
	border-bottom: solid 1px #2A3047;
	transition: background .5s;

}
nav ul li ul li:hover a {
	background-color: #585D74;
	transition: background .5s;
}

@media only screen and (min-width: 1160px) {
	#header{
		position:relative;
    	top: 0;
		height: 120px;
		background-color:#333A56;
		display: flex;
		flex-flow: row;
		justify-content: center;
		align-items:center;
		align-content: center;
	}

	#menu {display: none;}

	#logo {
		justify-content: center;
		align-items: center;
		align-self: auto;
		padding: 0;
	}

	#logo img {width: auto; height: 70px}

	#search-close {
		position: absolute;
		left:calc(calc(100% - 950px)/2);
		height: 90px;
		top:120px;
	}
	#search-label {
		height: 40px;
	}
	#search-icon{
		display: flex;
		height: 100%;
		padding-left: 5px;
		background-color:#333A56;
		transition: background 0s linear 1s, transform 0.8s ease-in-out 0s;
	}

	#search-icon-mobile {
		display: none;
		height: 100%;
		padding-left: 5px;
		background-color:#333A56;
		transition: background 0s linear 1s, transform 0.8s ease-in-out 0s;
	}

	#search-icon.search {
		max-height: 90px;
		transform: translateY(105px);
		background-color: transparent;
		transition: transform .8s ease-in-out, color 0s;
	}

	#search-icon img, #search-close img{
		width: 40px;
	}

	#search-form {
		display: flex;
		width: 100vw;
		top: 120px;
		border-top: solid 1px #2A3047;
		position: absolute;
	}

	#mobile-search {
		display: none;
	}

	#search-box {
		width: 800px;
		border: none;
	}

	#search-box:focus {
		outline: none;
	}

	nav {
		display: flex;
		position: relative;
		width: auto;
		z-index: 3;
		top: 0;
		overflow:visible;
		justify-content: center;
		margin-left: 1.5rem;
		border: none;
		padding: 0;
		transform: translateX(0);
		transition: 0s;
		visibility: visible;
	}

	.nav-body {
		overflow: visible;
	}

	nav ul {
		float: left;
		padding: 0;
		z-index: 2;
	}

	nav ul li {
		float: left;
		list-style: none;
		position: relative;
		margin: 0;
		padding: 0;
	}

	nav ul li a {
		display: flex;
		align-items: center;
		height: 120px;
		border: none;
		padding: 0 0.9375rem;
		margin: 0;
	}

	nav ul li ul {
		position: absolute;
		z-index: -5;
		top: 120px;
		min-width: 100%;
		transform: translateY(-100%);
		transition: transform .8s ease-in-out;
	}

	nav ul li:hover ul {
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s, 0s, 0.3s;
	}

	nav.no ul li:hover ul {
		transform: translateY(-100%);
	}

	nav.close ul li:hover ul, nav.close ul li ul {
		transform: translateY(-100%) !important;
		transition: transform .8s ease-in-out !important;
	}

	nav ul li ul li {
		width: auto;
	}

	nav ul li ul li a {
		height: auto;
		width: 100%;
		padding: 1rem;
		margin: 0;
		justify-content: flex-start;
		border-bottom: none;
	}
}

@media only screen and (min-width: 1364px) {

	#header{
		height: 130px;
	}
	#search-close {
		left:calc(calc(100% - 1140px)/2);
		top:130px;
	}
	#search-icon{
		padding-left: 10px;
	}
	#search-icon.search {
		transform: translateY(110px);
	}
	#search-form{
		top: 130px;
	}
	#search-box {
		width: 950px;
	}
	nav {
		margin-left: 10px;
	}
	nav ul li a {
		height: 130px;
		font-size: 18px;
		padding:0 20px;
	}
	nav ul li ul {
		top: 130px;
		transform: translateY(calc(-100% - 130px));
	}

	nav.no ul li:hover ul {
		transform: translateY(calc(-100% - 130px));
	}

	nav ul li ul li a {
		font-size: 14px;
	}
}

@media only screen and (min-width: 1600px) {

	/* #header{
		height: 140px;
	}
	#logo img {
		height: 100px;
	}

	nav ul li a {
		height: 140px;
	}
	nav ul li ul {
		top: 140px;
		transform: translateY(calc(-100% - 140px));
	} */
}

@media only screen and (min-width: 2200px) {
	/* #header{
		height: 160px;
	}
	#logo img {
		height: 120px;
	}
	#search-close {
		left:calc(calc(100% - 1700px)/2);
		top:160px;
		padding: 0;
	}
	#search-label {
		height: 50px;
	}
	#search-icon{
		padding-left: 30px;
	}
	#search-icon.search {
		transform: translateY(125px);
	}
	#search-icon img, #search-close img{
		width: 50px;
	}
	#search-form{
		top: 160px;
	}
	#search-box {
		width: 1400px;
	}

	nav {
		margin-left: 50px;
	}
	nav ul li a {
		height: 160px;
		font-size: 24px;
		padding: 0 35px;
	}
	nav ul li ul {
		top: 160px;
		transform: translateY(calc(-100% - 160px));
	}
		nav.no ul li:hover ul {
		transform: translateY(calc(-100% - 160px));
	}
	nav ul li ul li a {
		font-size: 17px;
	} */
}