:root {
  --crest-size: 128px;
  --menu-transition: 300ms;
}

/*----- TOP NAV -----*/
.topnav {
	display: none;
	position: fixed;
	top: 40px;
	width: 100%;
	height: 74px;
	z-index: 2;
	background: var(--blue);
	//border: 44px var(--blue);
	//border-style: solid none none none; 
	box-shadow: 0px 4px 4px 0px;
}


/*----- TOP NAV BORDER -----*/
.topnavborder {
	position: absolute; 
	top: -44px;
	height: 44px;
	width: 100%;
	padding: 0px;
	background: var(--bgNavy);
	border: 0px #FFF;
	border-style: none none solid none;
}

/*----- TOP NAV CONTENT -----*/
.topnavcontent {
	position: relative;
	top: 0px;
	width: var(--contentWidth);
	margin: 0 auto;
}

.topnavcontent .crest {
	height: var(--crest-size);
	position: absolute; 
	left: 16px;
	top: -28px;
	z-index: 4;
}

.topnavcontent .menu-icon {
	height: 40px;
	padding: 0px 14px;	
	display: none;
}

.topnavcontent .menu-icon:hover {
	filter: invert(100%) invert(12%) sepia(66%) saturate(5548%) hue-rotate(4deg) brightness(107%) contrast(128%);
}

.topnavcontent table {
	margin-left: 140px;
	height: 100%;
	padding: 0px;
	
	border-collapse: collapse;
}

.topnavcontent tr {
	height: 70px;
	padding: 0px;
	margin: auto 0;
}

.topnavcontent td {
	border: 0px;
}

/*----- TOP NAV MENU OPTION -----*/
.topnav .menu-option {
	padding: 0px 16px;
	text-align: center;
	vertical-align: middle;
	padding-top: 4px;
}

.topnav .menu-option a {
	color: #FFF;
	font-family: 'Acme', Verdana;
	font-size: 22px;
	text-decoration: none;
	transition: color var(--menu-transition);
}

.topnav .menu-option:hover {
	background-color: #FFF;
}

.topnav .menu-option:hover .menu-link {
	color: var(--red);
}

.topnav .menu-option::after {
	content: '';
	display: flex;
	position: relative;
	margin: auto;
	width: 0px;
	height: 3px;
	background-color: var(--red);
	opacity: 0%;
	transition: width var(--menu-transition), opacity var(--menu-transition);
}

.topnav .menu-option:hover::after,
.topnav .menu-option-focus::after {
	width: 100%;
	opacity: 100%;
}

.topnav .menu-option-icon {
	padding: 0px 13px;
	
}

.topnav .menu-option-icon img {
	height: 56px;
}

.topnav .menu-option-icon:hover {
	background-color: #FFF;
}

.topnav .menu-option-icon:hover img {
	filter: invert(100%) invert(12%) sepia(66%) saturate(5548%) hue-rotate(4deg) brightness(107%) contrast(128%);
}

/*----- TOP NAV SUB MENU -----*/
#topnavsubmenu {
	position: fixed;
	top: 114px;
	width: 100%;
	//width: var(--contentWidth);
	height: 0px;
	overflow: hidden;
	
	background-color: #FFF;
	
	transition: height var(--menu-transition);
}

.topnavsubmenucontent {
	width: var(--contentWidth);
	margin: 5px auto;
}

.topnavsubmenucontent table {
	margin-left: 142px;
	height: 100%;
	padding: 0px;
	
	border-collapse: collapse;
}

.topnavsubmenucontent tr {
	height: 100%;
	padding: 0px;
	margin: auto 0;
}

.topnavsubmenucontent td {
	border: 0px;
}

/*----- TOP NAV SUB MENU OPTION -----*/
.topnav .submenu-option {
	padding: 0px 14px;
	text-align: center;
	vertical-align: middle;
	padding-top: 5px;	
	white-space: nowrap;
}

.topnav .submenu-option a {
	color: var(--bgNavy);
	text-decoration: none;
	font-family: 'Acme', Verdana;
	font-size: 18px;
	
	transition: color var(--menu-transition);
}

.topnav .submenu-option:hover {
	background-color: #FFF;
}

.topnav .submenu-option:hover .menu-link {
  color: var(--red);
}

.topnav .submenu-option::after {
	content: '';
	display: flex;
	position: relative;
	margin: auto;
	width: 0px;
	height: 3px;
	background-color: var(--red);
	opacity: 0%;
	transition: width var(--menu-transition), opacity var(--menu-transition);
}

.topnav .submenu-option:hover::after,
.topnav .submenu-option-focus::after {
	width: 100%;
	opacity: 100%;
}

.topnav .submenu {
	position: relative;
	left: -13px;
	width: 180;
	padding: 10px 10px;
	overflow-y: hidden;
	text-align: center;
	list-style-type: none;
}

.topnav .submenu li:hover {
	background-color: #FFF;
}

.topnav .submenu a {
	color: #FFF;
}

.topnav .submenu a:hover {
	color: var(--red);
}

/*----- SIDE NAV-----*/
.sidenav {
	display: none;
	position: fixed;
	z-index: 3;
	top: 0px;
	margin-top: 0px;
	right: 0px;
	width: 0px;
	height: 100%;
	padding-top: 74px;
	overflow: hidden;
	background: linear-gradient(90deg, transparent 0%, var(--blue) 0%, var(--bgNavy) 100%);		
	transition: 0.4s;
}

.sidenav li {
	list-style-type: none;
	margin-left: 0px;
}

.sidenav .side-container {
	position: fixed;
	overflow-x: hidden;
	overflow-y: hidden;
	width: 250px;
	height: calc(100vh - 90px);
	padding-top: 0px;
}

@media screen and (max-height: 490px)
{	
	.sidenav .side-container {
		overflow-y: scroll;
	}
}

.sidenav .side-container2 {
	border: 2px;
	border-color: #0003;
	border-style: solid none none none;
}

.sidenav .side-option {
	padding: 14px 16px 8px 16px;
	width: 214px;
	
	border: 2px;
	border-color: #0003;
	border-style: none none solid none;
	border-spacing: 0px;
	
	white-space: nowrap;
}

.sidenav .side-option:hover {
	background-color: #FFF;
	border-color: transparent;
}

.sidenav .side-option a {
	color: #FFF;
	text-decoration: none;
	font-family: 'Acme', Verdana;
	font-size: 20px;
}

.sidenav .side-option:hover a {
	color: var(--red);
}

.topnav .side-option::after {
	content: '';
	display: flex;
	position: relative;
	margin: auto;
	width: 0px;
	height: 3px;
	background-color: var(--red);
	opacity: 0%;
	transition: width var(--menu-transition), opacity var(--menu-transition);
}

.topnav .side-option:hover::after{
	width: 100%;
	opacity: 100%;
}

.sidenav .closebtn {
	position: absolute;
	top: 16px;
	right: 16px;
	height: 40px;
}

.sidenav .closebtn:hover {
	filter: invert(100%) invert(12%) sepia(66%) saturate(5548%) hue-rotate(4deg) brightness(107%) contrast(128%);
}

.sidenav .side-group {
	padding: 0px 0px 0px 0px;
	height: auto;
	max-height: 0px;
	overflow: hidden;
	background: var(--bgNavy);
}

.sidenav .side-sub-option {
	padding: 6px 16px 4px 16px;
	width: 214px;
	//background-color: #0003;
		
	font-family: 'Acme', Verdana;
	font-size: 20px;
	white-space: nowrap;
}

.sidenav .side-sub-option:hover {
	color: var(--red);
	background-color: #FFF;
}

.sidenav .side-sub-option a {
	color: #FFF;
	text-decoration: none;
}

.sidenav .side-sub-option:hover a {
	color: var(--red);
}

.topnav .side-sub-option::after {
	content: '';
	display: flex;
	position: relative;
	margin: auto;
	width: 0px;
	height: 3px;
	background-color: var(--red);
	opacity: 0%;
	transition: width var(--menu-transition), opacity var(--menu-transition);
}

.topnav .side-sub-option:hover::after{
	width: 100%;
	opacity: 100%;
}

.sidenav .closebtn:hover {
	color: var(--red);
}

@media screen and (max-width: 1420px) /*+20 to cover scrollbar width*/
{	
	.topnavcontent {
		width: 100%;
	}
}

@media screen and (max-width: 846px) {
	:root {
	  --crest-size: 64px;
	}
	
	.topnav {
		height: 74px;
		top: 0px;
		border: 0px #FFF;
		border-style: solid none none none; 
	}
	
	.topnavborder {
		top: 0px;
		height: 0px;
	}
		
	.topnavcontent .crest {
		height: var(--crest-size);
		position: absolute; 
		left: 16px;
		top: 6px;
	}
	
	.topnavcontent table {
		margin-left: 80px;
	}
				
	.topnav .menu-icon {
		display: block;
	}
		
	.topnav tr {
		height: 64px;
	}
	
	.topnav .menu-option {
		display: none;
	}
		
	.topnav .menu-option-icon img {
		height: 40px;
	}
		
	.sidenav {
		display: block;
		top: 0px;
	}
	
	#topnavsubmenu {
		display: none;
	}
}

@media screen and (max-width: 319px) {
	.topnav .menu-option-icon {
		display: none;
	}
}