/* HEADER -------------------------------------------------------------------------------------------------- */

.menu-link, .menu ul li a, .menu ul li .selected, nav#debug, #console, .imgLinkSimple { 
	font-family:'puppy'; text-transform:uppercase; font-weight:normal; color:#fff; 
}

header#header { display:flex; width:100%; justify-content:flex-start; flex-flow:row nowrap; align-items:center;
	background:-webkit-linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 60%);
	background:linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 60%);
	z-index:9999;
	position:sticky !important;
	top:0;
}

#home header#header {background:black !important}

#headerPuppy, #headerText {z-index:1000} 
#headerPuppy img, #headerText img { display:block; width:100%; height:auto; overflow:visible}
#headerPuppy { flex: 0.375 1 1em; max-width:10em; align-self:flex-start; margin-bottom:-100%}
#headerText { flex: 1 1 1em; max-width:24em; margin:0.25em 0 -0.25em -0.25em}
#headerText img { width:90%; opacity:0.75; }

nav#debug{position:fixed;right:0;width:0.66em;padding:0.75em 0;opacity:0.5;overflow:hidden;transition:all 0.125s ease;background:#000;border-radius:0.25em;z-index:1000}
nav#debug:hover{width:10em;opacity:1}
nav#debug a {padding:0.1em 1em 0.1em 0;float:right;clear:both;background:#000;margin:0;white-space:nowrap}


/* MENU NAV */

nav a {text-decoration:none !important}

.menu-link { margin:auto 0 auto auto; flex:0 0; display:none; text-decoration:none; padding:0.15em 0.4em 0.65em 0.5em; font-size:2em; line-height:0.25em;background:#000; }

.menu { 
	margin:auto 0 auto auto; flex:0 0; display:inline-table; 
	font-size:1.5vw;
	font-size:min(1.625vw, 1.625em); 
	}
	
.menu ul { padding:0; margin:0; list-style:none; position:relative; display:flex; justify-content: flex-end;}
.menu li { margin:0; padding:0 }

.menu ul:after { content:""; clear:both; display:block; }
/* .menu ul li {  background-color:rgba(255, 0, 0, 0); } */
/* .menu > ul > li { display:table-cell; }  */
.menu ul li a, .menu ul li .selected { display:block; text-decoration:none; color:#fff; font-size:1em; }
.menu ul li > a, .menu ul li .selected { padding:0.375em 0.625em 0.5em; }


.menu li.has-submenu a, .menu ul li .selected { cursor:default; }
.menu li.has-submenu a { background:none;  }
.menu li.has-submenu ul a  { cursor:pointer;  }
 
.menu ul ul { display:block; height:0; overflow:hidden; position:absolute;  z-index:10000; min-width:12em; top:100%; background:#000  }

.menu ul li:hover > ul { display:block; height:auto; }

.menu ul ul > li { position:relative; opacity:0; background:none;
	transition:opacity 0.25s ease-out; }

.menu ul ul > li a { padding:0.25em 1em; height:auto; }
.menu ul li:hover ul li a, .menu ul li ul li .selected { padding:0.4em 1em 0.45em!important;}
.menu ul li:hover ul li  { opacity:1 }

.menu ul li.has-submenu:hover > a, .menu-link:hover, a.menu-link.active { background:#000  }
.menu ul li:hover > a{ background:#f70; } 

.menu ul li a, .menu ul li .selected, a.menu-link {
	color:#a69d90; 
	transition:background 0.125s ease-in, color 0.25s ease
	}
.menu ul ul li a, .menu ul ul li .selected {color:#a69d90;}
.menu ul li a:hover, .menu ul > li:hover > a, .menu ul li a.active, a.menu-link:hover {color:#fff}

.menu ul li .selected   { color:#fff !important; text-shadow:0 0 0.5em #ffb37b }
.menu ul ul li .selected { padding-left:1em; }

.menu ul li a.imgLink {width:2.2em;height:2em;position:relative;padding:0}
.menu ul li a.imgLink span {position:absolute;height:2em;width:100%;top:0;left:0;right:0;bottom:0;margin:auto;}
.menu ul li a.imgLink img {position:absolute;width:100%;height:2em; opacity:0; transition:opacity 0.25s ease-out; -webkit-transform: rotate(0);-moz-transform: rotate(0);transform: rotate(0);}
.menu ul li a.imgLink:hover {background:none}
.menu ul li a.imgLink:hover img {opacity:1;} 

a.imgLinkSimple { margin:0; text-align:left; display:inline-block; position:relative; padding-left:2em !important; }
a.imgLinkSimple img { width:1.375em; height:auto; position:absolute; left:0.3em; margin:auto; top:0; bottom:0.1em }

/* show icon only when not using burger menu */

@media screen and (min-width:53em) { 
	.menu ul li a.iconOnly { height:100%; padding: 0 1.25em !important; }
	.menu ul li a.iconOnly span { display: none; }
	.menu ul li a.iconOnly img { left:0; right:0; }
}

/* show icon and text when using burger menu or when wide screen, but only icon if medium width screen */

@media screen and (max-width:75em) and (min-width:53em) { 
	.menu ul li a.imgLinkSimple { height:100%; padding: 0 1.25em !important; }
	.menu ul li a.imgLinkSimple span { display: none; }
	.menu ul li a.imgLinkSimple img { left:0; right:0; }
}

/* hack for resetting font-size when using news */

@media screen and (max-width:75em) { 
	header#header.news {
		font-size:0.8em;
	}
}

/* menu divider */

.menu li.divider {
	height:3px;
	}

.menu li.textDivider {
	font-family:puppy;
	text-transform:uppercase;
	padding:0.5em 0 0.5em 1.5em;
	font-size: 0.625em;
	color:#756f66;
	user-select:none;
	}
	
.menu li.divider, .menu li.textDivider {
	background: #21201c; /*#3e3c37;*/
	}



/* smaller menu */

@media screen and (max-width:53em) { 
	
	a.menu-link { display:inline-table; z-index:10000; }

	.menu { background-color:rgba(0, 0, 0, 1); 
		transition:none;
		max-width:0em !important; position:absolute; right:0; top:0; z-index:10000; height:auto; opacity:0; font-size:1em; margin:0
	}
	
	.menu, .menu > ul ul { display:none; overflow:hidden; height:0; width:100%; max-width:100%; }
	.menu > li > ul { padding:0px; border:none; }
	.menu ul li:hover > ul { display:block; height:0; top:0; }
	.menu li.has-submenu a { cursor:pointer; }
	.menu ul ul > li { opacity:1; }

	.menu.active, .menu > ul ul.active, .menu ul li:hover > ul.active { display:block; height:auto; top:0; }
	.menu.active {right:0; top:3em;max-width:18em !important;opacity:1}

	.menu ul { display:inline; }
	.menu li {max-width:none}
	.menu li, .menu > ul > li { display:block; }
	.menu li a { color:#000; display:block; padding: 1em !important; border:1px solid #333; border-width:0.125em 0 0; position:relative; }
	.menu ul li:nth-of-type(6) a {border-width:0.125em 0}
	
	.menu li.has-submenu > a:after { content:'+'; position:absolute; top:0; right:0; display:block; font-size:2em; padding:0.4em 0.5em; }
	.menu li.has-submenu > a.active:after { content:"-"; }

	.menu ul ul { display:inherit; position:relative; border:none; }
	.menu ul li a, .menu ul li .selected {color:#a69d90;}
	.menu ul li a, .menu ul li:hover ul li a { padding:0.625em 1em !important; }
	.menu ul ul li a, .menu ul li:hover ul li a, .menu ul li .selected { border:none; padding:0.625em 1em 0.625em 1.5em !important; }
	.menu ul ul li .selected {margin-left:0.5em}

	.menu ul li a.imgLink {border:none;float:left;margin:0;width:3.75em;height:4.5em}
	.menu ul li:nth-of-type(7) a.imgLink {margin-left:0.5em}

	.menu ul li.has-submenu:hover > a {background:#000}
	.menu ul li.has-submenu > a:hover {background:#333}

	.menu ul li a.imgLinkSimple { padding-left:2.75em !important}
	.menu ul li a.imgLinkSimple img{ left:0.875em !important}

}


/* hires tablet landscape, 1368 width monitor */	

@media all and (min-width:75em) {
	.menu li { font-size:0.85em}
}

/* 1920 width monitor */	
	
@media all and (min-width:90em) {
	.menu ul { font-size:0.85em}
	.menu li li { font-size:0.95em}
}



/*jump test */
#jumpNav {
	width:100%;height:5em;background:black;position:fixed;bottom:0;z-index:9999;text-align:center;
	
	display:none
	
}
#jumpNav a {
	width:1em;height:1em;display:inline-block;margin:1em;padding:0.25em;background:white
}