/* Header styles */

header {
	grid-area: headergrid;
	margin-bottom: 1rem;
}

.NavBar{
	display: grid;
	grid-template-areas:
	"navlogo"
	"navsubtitle"
	"navmenu";
}

.NavBar a:link{
	color: #595959;
	font-family: effra, sans-serif;
	text-decoration: none;
	text-align: center;
	font-size: 1rem;
	padding-top: .5%;
	padding-left: 1%;
	padding-right: 1%;
}

.NavBar a:hover{
	color: #6a2bc7;
}

.NavBar a:visited{
	color: #595959;
}

.NavBar .Icon {
	display: none;
}

.NavLogo{
	max-height: 7vh;
	max-width: 22%;
	grid-area: navlogo;
}

.NavSubtitle{
	color: #595959;	
	font-family: effra, sans-serif;
	font-size: 1.2rem;
	text-align: center;
	grid-area: navsubtitle;
	margin-block-start: .5%;
	margin-block-end: .5%;
}

.NavMenuDiv {
	grid-area: navmenu;
	display: grid;
	grid-template-columns: 1.5fr repeat(5, 1fr) 1.5fr;
}

.NavLinkDiv{
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 2 / 7;
	text-align: center;
}

.NavSubLink{
	color: #595959;
	font-family: effra, sans-serif;
	text-decoration: none;
	font-size: 14px;
	list-style-type: none;
}

.NavSublink2 a:hover {
	color: #6a2bc7;
}

.SubMenuHidden{
	display: none;
}

.SubMenuShown{
	grid-area: subnav;
	display: grid;
	text-align: center;
	grid-template-columns: subgrid;
	grid-column: 2 / 7;
	color: #595959;
	font-family: effra, sans-serif;
	text-decoration: none;
	font-size: 14px;
	list-style-type: none;
}

.SubMenuShown ul {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / 6;
}

.NavSubLink2 {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 2 / 3;
}


/* Media queries for mobile */

@media screen and (max-width:600px){
	
	.NavBar a:not(:first-child){
		display: none;}
	.NavBar img.Icon{
		float: right;
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		padding-top: 4%;
		padding-right: 1%;
	}
	
	.NavLinkDiv{
		display: none;}
	
	.NavBar.Repsonsive {
		position: relative;
	}
	
	.NavBar.Responsive a{
		float: none;
		display: block;
	}	
	
	.NavBar.Responsive a img{
		text-align: center;
	}
	
	.NavLink{
	/*Keeps navigation links to the right on mobile */
	text-indent: 60%;
	}
	
	.NavBar.Responsive .NavLinkDiv{
		display: grid;
	}
	
	.NavSubtitle{
		font-size: .6rem;
	}
	
	.NavMenuDiv {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(5, 1fr);
	}
	
	.NavLinkDiv {
		grid-template-rows: subgrid;
		grid-row: 1 / 6;
		grid-column: 1 / 2;
	}
	
	.SubMenuShown {
		grid-template-rows: subgrid;
		grid-row: 2 / 3;
		/* Causes another grid column to be created so the main nav pops over to the left */
		grid-column: 2 / 3;
	}
	
	#SubNavUl {
		grid-template-rows: repeat(2, 1fr);
	}
	
	.NavSubLink2 {
		grid-template-rows: subgrid;
	}
}