header {
  background: var(--white);
}
header #topHeader {
	justify-content: space-between;
	padding: 0 2rem;
}
header > div.flex img {
	width: 11rem;
	height: auto;
	padding: 1rem 0;
}

/* signin box */
#signInBox {
	display: none;
	position: absolute;
	z-index: 9999;
	right: 2rem;
	top: 9.5rem;
	width: 300px;
	padding: 2rem 2rem 1rem;
	background: var(--lt_gray);
	color: var(--black);
	border: 2px solid var(--tertiary);
	border-radius: 5px;
	box-shadow: 0px 0px 15px -5px var(--black);
}
#signInBox form {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#signInBox .flex {
	justify-content: space-between;
	align-items: flex-start;
}
#closeSignIn {
	top: -1rem;
	right: -1rem;
	position: relative;
	display: flex;
  justify-content: center;
  align-items: center;
	width: 17px;
	height: 17px;
	cursor: pointer;
}
#closeSignIn .bar {
	position: absolute;
	width: 17px;
	height: 2px;
	background: var(--black);
	border-radius: 1px;
}
#closeSignIn .bar:first-of-type {
	transform: rotate(47deg);
}
#closeSignIn .bar:last-of-type {
	transform: rotate(-47deg);
}
#signInBox img {
	width: 70px;
	height: auto;
}
#signInBox p {
	margin: 2rem 0 1rem;
	text-align: center;
}
#signInBox .icon-input {
	position: relative;
}
#signInBox .icon-input i {
	position: absolute;
	right: 0.5rem;
	font-size: 1.6rem;
	padding: 0.5rem 0;
}
#signInBox input {
	width: 100%;
	height: 2.5rem;
	margin-bottom: 1rem;
	padding: 0 0.5rem;
	border: 1px solid var(--primary);
	border-radius: 3px;
}
#signInBox [id*="password"] {
	padding: 0 2.5rem 0 0.5rem;
}
#signInBox [id*="signInBtn"] {
	display: block;
	width: fit-content;
	margin: 1rem 0 2rem;
	padding: 0.3rem 1rem;
	border: none;
}
#signInBox .links a {
	display: block;
	margin: 0.5rem 0;
	color: var(--black);
	cursor: pointer;
	text-decoration: none;
}
#signInBox .links a span {
	font-weight: bold;
}
#signInBox .links a:hover span {
	font-style: italic;
	text-decoration: underline;
}
#signInBox .links .blue {
	color: var(--primary);
}
#signInBox .links .green {
	color: var(--green)
}

/* google search */
#searchContainer {
	position: relative;
	align-self: flex-end;
	margin: 1rem 0 1rem 2rem;
	width: 300px;
}
#searchContainer .gsc-control-cse {
	padding: 0;
}
#searchContainer .gsc-search-box.gsc-search-box-tools {
	margin: 0;
}
#searchContainer .gsc-search-box td.gsc-input {
	padding-right: 27px;
}
#searchContainer .gsc-search-box td.gsc-input .gsc-input-box {
	padding: 0;
	border-top: 1px solid var(--secondary);
	border-left: 1px solid var(--secondary);
	border-bottom: 1px solid var(--secondary);
	border-right: none;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
#searchContainer td.gsc-search-button {
	position: relative;
}
#searchContainer button.gsc-search-button {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 30px;
	margin: 0;
	padding: 0;
	background: var(--yellow);
	border: none;
	border-radius: unset;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
#searchContainer button.gsc-search-button svg {
	fill: var(--white);
	cursor: pointer;
}
#searchContainer input.gsc-input {
	padding: 0.5rem 35px 0.5rem 5px;
	background: white !important;
}
/* google search styling end */

#dividerBar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background: var(--secondary);
	padding: .5rem 2rem;
}
#dividerBar #signIn {
	display: flex;
	align-items: center;
	text-decoration: none;
	cursor: pointer;
}
#nav {
  border-bottom: 5px solid var(--secondary);
	background: var(--white);
}
#nav ul li,
#nav > ul > li > p {
	font-size: 2rem;
	font-weight: bold;
	cursor: pointer;
	color: var(--white);
	text-align: center;
	width: 100%;
	margin: 0;
	padding: 0 1rem;
}
#nav > ul {
	position: relative;
	height: 74px;
	background: var(--tertiary);
}
#nav > ul > li > p {
	display: none;
}
#nav > ul > li > p.active {
	display: block;
}
#nav > ul > li > img {
	display: none;
	height: 38px;
}
#nav > ul > li > img.active {
	display: initial;
}
#nav ul li:hover {
	color: var(--white);
}
#nav ul li a {
	color: var(--white);
	text-decoration: none;
}
#nav ul li p:hover,
#nav ul li a:hover {
	color: var(--white);
}
#nav .subnav {
	display: none;
	position: absolute;
	z-index: 9999;
	top: 74px;
	width: 19%;
	background: var(--white);
	box-shadow: 2px 13px 10px rgb(0 0 0 / 80%);
}
#nav .subnav.active {
	display: block;
}
#nav .subnav li {
	font-size: 1.5rem;
	font-weight: normal;
	padding: 0;
	text-align: left;
	background: var(--white);
	border-top: none;
	border-left: 2px solid var(--secondary);
	border-right: 2px solid var(--secondary);
	border-bottom: 2px solid var(--secondary);
}
#nav .subnav li:last-child {
	border-bottom: 2px solid var(--secondary);
}
#nav .subnav li a {
	display: flex;
	width: 100%;
	padding: .8rem 1.5rem;
	background: var(--tertiary);
	letter-spacing: 1px;
}

/* mobile divider bar styles */
#dividerBar #mobileNavIcon {
	display: none;
}
#dividerBar #mobileNavIcon img,
#dividerBar #signIn .myKheaa {
	margin-right: 1rem;
	width: auto;
	height: 32px;
}
#dividerBar #signIn .myKheaa {
	display: flex;
}

/* mobile nav styles */
#mobileNav {
	display: none;
	justify-content: space-evenly;
	flex-wrap: wrap;
	background: var(--secondary);
	padding: 1rem 2rem;
}
#mobileNav a {
	width: 34%;
	text-align: center;
}
#mobileNav a img {
	margin: .5rem;
	width: 146px;
	height: 185px;
}

/************************************

        HEADER MOBILE STYLES

************************************/
@media screen and (max-width: 640px) {
	#searchContainer .search {
		min-width: 150px;
	}
	#dividerBar {
		justify-content: space-between;
	}
	#dividerBar #mobileNavIcon {
		display: flex;
	}
	#nav ul li,
	#nav > ul > li > p {
		font-size: 1.8rem;
		padding: 0 .5rem;
	}
	#nav .subnav li {
		font-size: 1.8rem;
	}
	#nav > ul {
		height: 50px;
	}
	#nav > ul > li > img {
		height: 25px;
	}
	#nav .subnav {
		top: 55px;
		left: 0;
		width: 100%;
	}
	#nav .subnav li {
		border-left: none;
		border-right: none;
	}
	#nav #saveForCollege {
		display: none;	
	}
} 

@media screen and (max-width: 480px) {
	#mobileNav {
		padding: 1rem;
	}
	#mobileNav a {
		width: 50%;
	}
}