* {box-sizing: border-box;}
body{font-family: sans-serif; position: fixed; width: 100%; height: 100%}
/* Need to fix the body position, since fixing the header position messes up the grid.
   Consider rebuilding whole page, using fixed positioning for header, nav, panel and main.
	 Only use grid for content within each of these four sections */
a{text-decoration: none;}
@media (hover: none){body{touch-action: manipulation; user-select: none;}}
:root{
	--fontColorHeader:								hsl(0,    0%, 90%);
	--fontColorHeaderHover:						hsl(10, 100%, 45%);
	--colorHeaderBackground:					black;

	--fontColorToC:										hsl(215, 35%, 70%);   /* 	hsl(208, 39%, 50%) steelblue; */

	--fontColorMenuBar:								hsl(215, 17%, 20%);
	--colorMenuBarBackground:					hsl(215, 17%, 70%);
	--colorMenuBarBackgroundHover:		hsl(215, 17%, 85%);

	--colorMenuOneBackground:					hsl(215, 17%, 83%);
	--colorMenuTwoRowBackground:			hsl(215, 17%, 67%);
	--colorMenuTwoRowBackgroundHover:	hsl(215, 17%, 55%);
	--colorMenuTwoGridGap:	 					hsl(0, 0%, 55%);			/* Will show through GRID gaps */

	--fontColorMenuOne:     		 			hsl(0, 0%, 40%);
	--fontColorMenuTwo:					 			hsl(215, 20%, 33%);
	--fontColorMenuTwoHover:		 			hsl(215, 20%, 33%);

	--fontColorTitle:     	 					rgb(153,51,0);				/* Maroonish 1 */

	--colorGalleryBackground:					black;
	
	--pagePanelWidth:									180px;
	--fontColorPagePanelTitle:				hsl(20, 100%, 25%);		/* Maroonish 2 */
	--fontColorPagePanel:							hsl(215, 17%, 20%);
	--colorPagePanelBackground:				hsl(215, 17%, 55%);
	--colorPagePanelBackgroundHover:	hsl(215, 17%, 85%);

	--fontColorMain:									hsl(0, 0%, 30%);
	--colorMainBackground:						white;

	--tranDurationMenuBar:						250ms;
	--tranDelayMenuBar:								100ms;
	
	--tranDurationMenuIpad:	 					400ms;
	--tranDurationPImgIpad:						400ms;
	--tranDurationMenuDesk:			 			250ms;
	--tranDurationPImgDesk:			 			250ms;
	--tranDurationMenuPhone:					250ms;
	--tranDurationPImgPhone:					250ms;

	--tranDurationNavSiteSlide:				250ms;
	--tranDurationPagePanelSlide:			150ms;
	--tranTimingNavSiteSlide:					ease-out;
	--tranTimingPagePanelSlide:				ease-out;

	--tranTimingMenuBar:							ease-out;

	--tranTimingMenus:								ease-out;																/* ease-out -> slow end */
	--tranTimingPImgHover:						cubic-bezier(0.655, 0.05, 0.755, 0.06);	/* easeInQuint (0.755, 0.05, 0.855, 0.06) */
	--tranTimingPImgUnHover:					cubic-bezier(0.190, 1.00, 0.220, 1.00);	/* easeOutQuint */

	--tranDurationBurger:							400ms;
	--tranTimingBurger:								ease-out;}

/****** MAIN - START ********************************************************************************************/
/* Unfortunately, media queries cannot use CSS variables, otherwise could make the following breakpoint
	 depend dynamically on the presence and width of a vertical scroll bar. So assume a 17px wide scroll bar is alway present.
	 PagePanel + margin + main + margin + scrollbar = var(--pagePanelWidth) + 20 + 900 + 20 + 17 = 1137 */
	 
/* @media (min-width: 1137px){main .MainContainer{max-width: 900px; margin: auto;}} */
/* @media (max-width: 1106px){main .MainContainer{margin: 0px 20px 0px 20px}} */

main{padding: 0px 20px 0px 20px;}
.MainContainer{max-width: 900px; margin: auto;}

main{
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;										/* Enable div scrolling on iOS Safari */
	z-index: 0;}

.MainContainer{padding-top: 15px;}

@media (hover: hover){.MainContainer{padding-bottom:  15px;}}
@media (hover: none) {.MainContainer{padding-bottom: 100px;}} /* Needed because of funny vertical scrolling on iOS and Nexus 7, bottom of page gets cut off */

.MainContainer a{color: hsl(210, 85%, 39%);}
.MainContainer a{
	position: relative;}
.MainContainer a::before{
  position: absolute;
  display: block;	
	content: "";  
  background-color: hsl(210, 85%, 39%);
  height: 2px;
  left: 0;
  bottom: -2px;
  width: 100%;
  transform: scaleX(0);
  transition-duration: .2s;}
.MainContainer a:hover::before{
  transform: scaleX(1);
  transition-duration: .2s;}

.MainContainer  						{color: var(--fontColorMain);}	
.MainContainer h1						{color: var(--fontColorTitle);}


.MainContainer p.Description     {margin-left: 20px;}
.MainContainer p.SubDescription  {margin-left: 40px;}
.MainContainer p.DescriptionH2   {margin-left: 0px;}

.MainContainer h1						{font-size: 26px; line-height: 1.3em;}
.MainContainer h2						{font-size: 22px;}
.MainContainer h3						{font-size: 16px; line-height: 1.5em;}
.MainContainer p.Intro			{font-size: 16px; line-height: 1.5em;}
.MainContainer p.Description{font-size: 16px; line-height: 1.5em;}

.MainContainer h1						 + h1{margin-top: 5px;}
.MainContainer h2						 + h1{margin-top: 16px;}
.MainContainer h3						 + h1{margin-top: 16px;}
.MainContainer p.Intro       + h1{margin-top: 12px;}
.MainContainer p.Description + h1{margin-top: 16px;}

.MainContainer h1						 + h2{margin-top: 12px;}
.MainContainer h2						 + h2{margin-top: 12px;}
.MainContainer h3						 + h2{margin-top: 15px;}
.MainContainer p             + h2{margin-top: 15px;}

.MainContainer h1						 + h3{margin-top:  8px;}
.MainContainer h2						 + h3{margin-top: 16px;}
.MainContainer h3						 + h3{margin-top: 16px;}
.MainContainer p.Intro			 + h3{margin-top: 10px;}
.MainContainer p.Description + h3{margin-top: 8px;}

.MainContainer h1            + p.Intro			{margin-top:  8px;}
.MainContainer h2            + p.Intro			{margin-top: 12px;}
.MainContainer p.Intro       + p.Intro			{margin-top:  8px;}

.MainContainer h1            + p.Description{margin-top: 4px;}
.MainContainer h2            + p.Description{margin-top: 4px;}
.MainContainer h3						 + p.Description{margin-top: 4px;}
.MainContainer p.Description + p.Description{margin-top: 4px;}
/****** MAIN - END **********************************************************************************************/

/****** HEADER - START ******************************************************************************************/
header{
	grid-area: header;
	display: grid;
	grid-template-columns: max-content 1fr max-content max-content;				/* Name, Subject, ToC, Burger */
	grid-template-rows: 45px;
	grid-template-areas: "name subjects toc hamburger";
	align-items: end;
	color:						var(--fontColorHeader);
	background-color: var(--colorHeaderBackground);}

.Name{
	grid-area: name;
	justify-self: center; align-self: center;
	margin-left: 7px;
	width: 37px; height: 37px;
	border-radius: 50%;
	text-align: center;
	font-size: 22px;
	padding-top: 9px;
	color: black;
	background-color: var(--fontColorHeader);} /* required to overwrite link color */
.Name:hover{background-color:var(--fontColorHeaderHover);}

.Subjects{
	grid-area: subjects;
	align-self: center;
	margin-left: 10px;
	display: none;}

/* Transition between different subject sizes is set in SubjectWidthsXX.css files */

.ToC{
	grid-area: toc;
	justify-self: center; align-self: center;
	color: var(--fontColorToC);
	transition: transform  var(--tranDurationBurger) var(--tranTimingBurger);}
.ToC:hover{
	cursor:pointer;
	color: var(--fontColorHeaderHover);}

.ToCClose{transform: scale(0);}

.ToCOpen{
	height: 37px;}

.ToCClose{
	font-size: 38px;
	margin-top: 2px;}

.Burger{
	grid-area: hamburger;
	margin: 0px 10px 0px 10px;
	justify-self: center; align-self: center;
	transform: scale(0);
	transition: transform  var(--tranDurationBurger) var(--tranTimingBurger);}

.MenuBurger{
	height: 25px;}

.XBurgerGold{
	color: rgb(255, 193, 11);
	font-size: 38px;}

.XBurgerRed{
	color: red;
	font-size: 38px;}

.Burger:hover{cursor: pointer; color: var(--fontColorHeaderHover);}
/****** HEADER - END ********************************************************************************************/

/****** MENU BAR - LARGE DESKTOP - START ************************************************************************/
@media (min-width: calc(180px + 768px)){
	:root{--menu2Shift: 180px;}
	.MenuBar{margin-left: calc((100vw - 750px - var(--pagePanelWidth))/2);}}

	@media (max-width: calc(180px + 768px - 1px)){
	:root{--menu2Shift: 0px;)}
	.MenuBar{margin-left: calc((100vw - 750px)/2);}
	.MenuBarContainer{width: 100vw;}}

@media (hover: hover) and (min-width: 750px){	/* Firefox does not support hover media query */
	:root{--format: largeDesktop;}
	.NavSite{display:	 none;}
	
	.MenuBarContainer{
		z-index: 3;
		background-color: hsl(215, 17%, 85%);}
	.MenuBar{
		width: 750px;
		height: 32px;
		display: grid;
		grid-template-columns: repeat(7, auto);
		align-items: center;}

	.Menu1{
		display: grid;
		justify-items: center;}
	.Menu1:hover{
		cursor: default;}
	.Menu1Text{
		padding: 8px 10px;
		border-radius: 10px 10px 0px 0px;
		color: hsl(215, 17%, 40%);
		transition: background-color 200ms 0ms;}
	.MenuItem:hover .Menu1Text{
		color: hsl(215, 17%, 25%);
		background-color: hsl(215, 17%, 78%);}
		
	.Menu2 div span{padding: 0px 10px;}
	.MenuBar .MenuItem:first-child .Menu2{text-align: left;}
	.MenuBar .MenuItem:last-child  .Menu2{text-align: right;}
		
	.Menu2{
		position: absolute;
		left: var(--menu2Shift); top: 77px;
		width: 100vw;
		display: grid;
		grid-template-columns: repeat(4, max-content);
		line-height: 50px;
		background-color: hsl(215, 17%, 78%);
		text-align: center;
		overflow: hidden;
		transition: color 325ms 0ms, height var(--tranDurationMenuBar) var(--tranDelayMenuBar);
		color: hsl(215, 17%, 78%);
		height: 0px;}
	.MenuItem:hover .Menu2{
		color: hsl(215, 17%, 25%);
		height: 50px;}

	.MenuItem .Menu2 div:last-child{
		transition: background-color 300ms 0ms;}	
	.MenuItem .Menu2 div:not(:last-child){
		transition: border-right 325ms 0ms, background-color 300ms 0ms;
		border-right: 2px solid hsl(215, 17%, 78%);}
	.MenuItem:hover .Menu2 div:not(:last-child){
		border-right: 2px solid hsl(215, 17%, 65%);}
	.Menu2 div:hover{
		background-color: hsl(215, 17%, 65%);
		cursor: pointer;}
		
	.MenuBar .MenuItem:nth-child(1) .Menu2{padding-left: calc((100vw - 750px - var(--menu2Shift))/2 +  16px);}
	.MenuBar .MenuItem:nth-child(2) .Menu2{padding-left: calc((100vw - 750px - var(--menu2Shift))/2 +  16px);}
	.MenuBar .MenuItem:nth-child(3) .Menu2{padding-left: calc((100vw - 750px - var(--menu2Shift))/2 + 174px);}
	.MenuBar .MenuItem:nth-child(4) .Menu2{padding-left: calc((100vw - 750px - var(--menu2Shift))/2 + 272px);}
	.MenuBar .MenuItem:nth-child(5) .Menu2{padding-left: calc((100vw - 750px - var(--menu2Shift))/2 + 470px);}
	.MenuBar .MenuItem:nth-child(6) .Menu2{padding-left: calc((100vw - 750px - var(--menu2Shift))/2 + 215px);}
	.MenuBar .MenuItem:nth-child(7) .Menu2{padding-left: calc((100vw - 750px - var(--menu2Shift))/2 + 405px);}
}
/****** MENU BAR - LARGE DESKTOP - END **************************************************************************/

/****** PAGEPANEL - START ***************************************************************************************/
.PagePanel{
	width: 						var(--pagePanelWidth);
	color:						var(--fontColorPagePanel);
	background-color:			var(--colorPagePanelBackground);
	transition-duration:		var(--tranDurationPagePanelSlide);
	transition-timing-function: var(--tranTimingPagePanelSlide);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;										/* Enable div scrolling on iOS Safari */
	z-index: 1;
	line-height: 1.4em;}

@media (hover: hover){.PagePanel{padding-bottom: 15px;}}
@media (hover: none) {.PagePanel{padding-bottom: 75px;}} /* Needed because of funny vertical scrolling on iOS and Nexus 7, bottom of page gets cut off */
	
.PagePanel .PagePanelTitle1       {text-align: center; color: var(--fontColorPagePanelTitle);}
.PagePanel .PagePanelTitle2       {text-align: center; color: var(--fontColorPagePanelTitle);}
.PagePanel .PagePanelTitle1      a{color: var(--fontColorPagePanelTitle);}
.PagePanel .PagePanelTitle2      a{color: var(--fontColorPagePanelTitle);}
.PagePanel .PagePanelSectionHeader{text-align: center;}
.PagePanel a{color: var(--fontColorPagePanel);}
.PagePanel a:hover{background-color: var(--colorMenuBarBackgroundHover); cursor: pointer; transition: background-color 0ms;}

@media (hover: hover){
	.PagePanel .PagePanelTitle1{padding: 22px 0px 5px 0px; font-size: 22px;}
	.PagePanel .PagePanelTitle2{padding:  2px 0px 5px 0px; font-size: 22px;}
	.PagePanel a{display: block; padding: 12px 10px;}}
	
@media (hover: none){
	.PagePanel .PagePanelTitle1{padding: 20px 0px 5px 0px; font-size: 26px;}
	.PagePanel .PagePanelTitle2{padding:  0px 0px 5px 0px; font-size: 26px;}
	.PagePanel a{display: block; padding: 12px 10px;}}
/****** PAGEPANEL - END *****************************************************************************************/
	
/****** GALLERY START *******************************************************************************************/
.NavSite .CenterCircle .Gallery img{					/* Images are only 300 px wide */
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 300px; height: auto;
	padding: 0; margin: 0;}

/* Different gallery backgrounds to match different image backgrounds */
.Matrix   	{background-color: rgb(1,  3, 1);} .Matrix      img{border-radius: 50px;}
.TOSlink  	{background-color: rgb(8, 10, 7);} .TOSlink     img{border-radius: 50px;}
.FiberPink	{background-color: rgb(8,  8, 9);}
.Transceiver{}																 .Transceiver img{border-radius: 50px;}

/* Set transition delays for each of the seven galleries */
.CenterCircle div:nth-of-type(1){animation: ShowHide 21s  0s ease-in infinite;}		/* "V" must be uppercase */
.CenterCircle div:nth-of-type(2){animation: ShowHide 21s  3s ease-in infinite;}
.CenterCircle div:nth-of-type(3){animation: ShowHide 21s  6s ease-in infinite;}
.CenterCircle div:nth-of-type(4){animation: ShowHide 21s  9s ease-in infinite;}
.CenterCircle div:nth-of-type(5){animation: ShowHide 21s 12s ease-in infinite;}
.CenterCircle div:nth-of-type(6){animation: ShowHide 21s 15s ease-in infinite;}
.CenterCircle div:nth-of-type(7){animation: ShowHide 21s 18s ease-in infinite;}

/* Timing for seven galleries */
@keyframes ShowHide{
	00% {opacity: 0.0;}
	06% {opacity: 1.0;}
	13% {opacity: 1.0;}
	19% {opacity: 0.0;}
	100%{opacity: 0.0;}}
/****** GALLERY - END *******************************************************************************************/

/****** BODY GRID (HEADER, MENUBAR, PAGEPANEL, MAIN) - START ****************************************************/
body{
	display: grid;
	grid-template-rows: auto auto 1fr;
	height: 100vh;
	overflow: hidden;}
	
/* Menubar, PagePanel, Main */
	
@media (min-width: calc(180px + 768px)){															
 .ToC{transform: scale(0) !important;}
	body{
		grid-template-columns: 180px   1fr;
		grid-template-areas:  "header  header"
													"navPage navSite"
													"navPage main";}
 .PagePanel{grid-area: navPage; transform: translate(0px, 0px) !important;}
	main   {grid-area: main;}}

@media (min-width: 750px) and (max-width: calc(180px + 768px - 1px)){				/* Menubar, Main */
	.ToCOpen{transform: scale(1);}
	body{
		grid-template-columns: 180px   1fr;
		grid-template-areas:  "header  header"
													"navSite navSite"
													"main    main";}
 .PagePanel{grid-area: main; transform: translate(-180px, 0px);}
	main   {grid-area: main;}}

@media (max-width: 749px){															/* Main */
	.ToCOpen{transform: scale(1);}
	body{
		grid-template-columns: 180px   1fr;
		grid-template-areas:  "header  header"
													"main    main"
													"main    main";}
 .PagePanel{grid-area: main; transform: translate(-180px, 0px);}
	main   {grid-area: main;}}
/****** BODY GRID (HEADER, MENUBAR, PAGEPANEL, MAIN) - END ******************************************************/

/****** iPad, SMALL DESKTOP, PHONE - START **********************************************************************/
@media                    (max-width: 749px),
			 (hover: none)  and (min-width: 750px){

	.MenuBar{display: none;}

	.NavSite{
		grid-area: main;
		transform:									translate(-100%, 0%);
		transition-duration:				var(--tranDurationNavSiteSlide);
		transition-timing-function:	var(--tranTimingNavSiteSlide);
		overflow: hidden;
		background-color: white;
		z-index:1;}

	.NavSite em{font-style: normal; color: var(--fontColorTitle);}
	.NavSite p{margin: 0; padding: 0; line-height: 1.5;}
	.NavSite p + p{margin-top: 12px;}

	.MenuBurger{transform: scale(1);}

	.MenuOne, .MenuTwo, .MenuTwoRow{transition-timing-function: var(--tranTimingMenus);}

	/* MenuOne is a grid container with just one row */
	/* Single small div item will be centered vertically and horizontally within that row */
	/* Do not define a column width
		 - allow width to expand to wider .MenuOne hover width so that div content stays horizontally centered */
	.MenuOne{
		position:	absolute; top: 0px; left: 0px;
		display:		grid; align-items: center; justify-items: center;
		text-align: center;
		color:            var(--fontColorMenuOne);
		background-color: var(--colorMenuOneBackground);
		z-index: 1;}

	.MenuContainer:hover .MenuOne{
		color:            var(--fontColorTitle);
		background-color: var(--colorMenuTwoRowBackground);}

	.MenuTwo{
		position: absolute; top: 0px; left: 0px;
		display: grid;
		/* Columns defined in each section */
		grid-template-rows: 1fr;				/* Equal height rows */
		grid-auto-rows: 1fr;						/* As many equal height rows as necessary */
		grid-gap: 1px;
		text-align: center;
		overflow: hidden;								/* Prevent square MenuTwoRow divs from extending beyond curved edges of MenuTwo */
		color:            var(--fontColorMenuTwo);
		background-color: var(--colorMenuTwoGridGap);
		z-index: 0;}										/* Change to z-index: 20 in JS phoneModeClick(e) */

	.MenuTwoRow{
		display: grid; align-items: center; justify-items: center;
		padding-left: 10px; padding-right: 10px;}

	.MenuTwoRow{
		color:            var(--fontColorMenuTwo);
		background-color: var(--colorMenuOneBackground);}

	.MenuContainer:hover .MenuTwoRow{
		color:            var(--fontColorMenuTwo);
		background-color: var(--colorMenuTwoRowBackground);}

	.MenuTwoRow[onClick]:hover{
		cursor:pointer;
		color:						var(--fontColorMenuTwoHover);
		background-color: var(--colorMenuTwoRowBackgroundHover);}

	.GameImage{      grid-area: GameImage;       justify-self: right; padding-right: 15px;}
	.GameDescription{grid-area: GameDescription; justify-self: left;}

	/* Hide extra images, but display in Phone Landscape */
	div.LaserImage{display: none;}
	div.GroupImage{display: none;}

	.MenuTwoRow .View{
		display: inline-block;
		margin-top: 10px;
		width: max-content;
		padding: 15px;
		border-radius: 10px;
		background-color: hsl(215, 17%, 90%);
	}
	
	img.GameImage		{max-width: 105px; height: auto;}
}
/****** iPad, SMALL DESKTOP, PHONE - END ************************************************************************/

/****** iPad - ALL - START***************************************************************************************/
@media (hover: hover) and (min-width: 620px) and (max-width: 749px) and (min-height: 860px),	/* iPad Portrait  */
			 (hover: none)  and (min-width: 620px) and (max-width: 834px) and (min-height: 860px),	/* iPad Portrait  */
			 (hover: none)  and (min-width: 835px)												and (min-height: 600px){	/* iPad Landscape */

	.MenuOne, .MenuTwo, .MenuTwoRow{
		transition-duration: var(--tranDurationMenuIpad);}

	.MenuOne{
		width:				100px;
		height:				100px;
		border-radius: 50px;}																	/* 50px works better than 50% */

	.MenuTwo{
		width:				500px;
		height:				500px;
		border-radius: 50%;}

	.MenuTwo{grid-template-columns: 1fr;}										/* Two columns for some phone lanscape rows */

	.A3 .MenuTwo .MenuTwoRow{																/* Two Columns */
		text-align: left;
		grid-template-columns: 230px     1fr; 								/* Left column width will be narrower in phone modes */
		grid-template-areas:  "GameImage GameDescription";}

	.A3 .MenuTwo div:first-child{padding-top:		 30px;}
	.A3 .MenuTwo div:last-child {padding-bottom: 30px;}

	.A4 .MenuTwo div:first-child{padding-top:		 80px; padding-bottom: 20px;}
	.A4 .MenuTwo div:last-child {padding-bottom: 20px;}

	.B1 .MenuTwo div:first-child{padding-top:		 12px;}
	.B1 .MenuTwo div:last-child {padding-bottom: 10px;}

	.B2 .MenuTwo div:first-child{padding-top:		 20px;}
	.B2 .MenuTwo div:last-child {padding-bottom: 18px;}

	.B3 .MenuTwo div:first-child{padding-top:			8px;}
	.B3 .MenuTwo div:last-child {padding-bottom: 25px;}

	.B4 .MenuTwo div:first-child{padding-top:		 20px; padding-bottom: 0px;}
	.B4 .MenuTwo div:last-child {padding-bottom: 12px;}

	.MenuContainer       .MenuTwoRow p, .MenuContainer       .MenuTwoRow img{
		opacity: 0;
		transition-duration:				var(--tranDurationPImgDesk);
		transition-timing-function: var(--tranTimingPImgUnHover);}
	.MenuContainer:hover .MenuTwoRow p, .MenuContainer:hover .MenuTwoRow img{
		opacity: 1;
		transition-timing-function: var(--tranTimingPImgHover);}

	p.LaserImage img{max-width: 238px;}			/* Hide in Phone Landscape */
	p.GroupImage img{max-width: 200px;}			/* Hide in Phone Landscape */
	p.DeerImage  img{max-width: 270px;}
	img.Computer		{max-width: 200px;}			/* Different dimensions in Phone Landscape */
}
/****** iPad - ALL - END ****************************************************************************************/

/****** iPad LANDSCAPE - START **********************************************************************************/
@media (hover: none) and (min-width: 835px) and (min-height: 600px){	/* < 835 triggers portrait mode in iPad Pro */
	:root{
		--format: iPad;
		--orientation: landscape;}

	.NavSite{
		width: 100%; height: 100%;
		--shiftLeft: calc((var(--NavSiteWidth) - 820px) / 2);
		--shiftTop: calc((var(--NavSiteHeight) - 502px) / 2);}

	/* CenterCircle provides a constant background while 7 galleries fade in and out */
	.NavSite .CenterCircle{
		position: absolute;
		top:  calc(var(--shiftTop)  + 0px);
		left: calc(var(--shiftLeft) + 160px);
		width: 500px; height: 500px;
		border: solid 1px var(--colorMenuTwoRowBackground); border-radius: 50%; /* Blend in with MenuTwo overlay border */
		background-color: var(--colorGalleryBackground);			/* Provide constant background while images fade in and out */}

	.NavSite .CenterCircle .Gallery{
		position: absolute; 																	/* Make galleries stack on top of each other */
		width: 498px; height: 498px;													/* Fit galleries within CenterCircle content dimensions */
		border-radius: 50%;
		opacity: 0.0;}

	.A1{position: absolute; top: calc(var(--shiftTop) +   4px); left: calc(var(--shiftLeft) + 58px);}
	.A2{position: absolute; top: calc(var(--shiftTop) + 131px); left: calc(var(--shiftLeft) + 7px);}
	.A3{position: absolute; top: calc(var(--shiftTop) + 269px); left: calc(var(--shiftLeft) + 7px);}
	.A4{position: absolute; top: calc(var(--shiftTop) + 396px); left: calc(var(--shiftLeft) + 58px);}
	.B1{position: absolute; top: calc(var(--shiftTop) +   4px); left: calc(var(--shiftLeft) + 662px);}
	.B2{position: absolute; top: calc(var(--shiftTop) + 131px); left: calc(var(--shiftLeft) + 713px);}
	.B3{position: absolute; top: calc(var(--shiftTop) + 269px); left: calc(var(--shiftLeft) + 713px);}
	.B4{position: absolute; top: calc(var(--shiftTop) + 396px); left: calc(var(--shiftLeft) + 662px);}

	.A1       .MenuOne{transform-origin: 50px 50px;}
	.A2       .MenuOne{transform-origin: 50px 50px;}
	.A3       .MenuOne{transform-origin: 50px 50px;}
	.A4       .MenuOne{transform-origin: 50px 50px;}
	.B1       .MenuOne{transform-origin: 58%  50px;}
	.B2       .MenuOne{transform-origin: 58%  50px;}
	.B3       .MenuOne{transform-origin: 58%  50px;}
	.B4       .MenuOne{transform-origin: 58%  50px;}

	.A1:hover .MenuOne{                             transform: rotate( 33deg); width: 166px;}
	.A2:hover .MenuOne{                             transform: rotate( 11deg); width: 166px;}
	.A3:hover .MenuOne{                             transform: rotate(-11deg); width: 166px;}
	.A4:hover .MenuOne{                             transform: rotate(-33deg); width: 166px;}
	.B1:hover .MenuOne{transform-origin: 70%  52px; transform: rotate(-33deg); width: 166px; left: -65px;}
	.B2:hover .MenuOne{transform-origin: 70%  54px; transform: rotate(-11deg); width: 166px; left: -65px;}
	.B3:hover .MenuOne{transform-origin: 70%  46px; transform: rotate( 11deg); width: 166px; left: -65px;}
	.B4:hover .MenuOne{transform-origin: 70%  49px; transform: rotate( 33deg); width: 166px; left: -65px;}

	.A1{--MenuTwoLeftOld: -240px; --MenuTwoTopOld: -225px;}
	.A2{--MenuTwoLeftOld: -245px; --MenuTwoTopOld: -210px;}
	.A3{--MenuTwoLeftOld: -245px; --MenuTwoTopOld: -190px;}
	.A4{--MenuTwoLeftOld: -240px; --MenuTwoTopOld: -175px;}
	.B1{--MenuTwoLeftOld: -160px; --MenuTwoTopOld: -225px;}
	.B2{--MenuTwoLeftOld: -155px; --MenuTwoTopOld: -210px;}
	.B3{--MenuTwoLeftOld: -155px; --MenuTwoTopOld: -190px;}
	.B4{--MenuTwoLeftOld: -160px; --MenuTwoTopOld: -175px;}

						.MenuTwo{transform: translate(var(--MenuTwoLeftOld), var(--MenuTwoTopOld)) scale(0);}

	.A1:hover .MenuTwo{transform: translate( 102px,   -4px) scale(1) !important}
	.A2:hover .MenuTwo{transform: translate( 153px, -131px) scale(1) !important}
	.A3:hover .MenuTwo{transform: translate( 153px, -269px) scale(1) !important}
	.A4:hover .MenuTwo{transform: translate( 102px, -396px) scale(1) !important}
	.B1:hover .MenuTwo{transform: translate(-502px,   -4px) scale(1) !important}
	.B2:hover .MenuTwo{transform: translate(-553px, -131px) scale(1) !important}
	.B3:hover .MenuTwo{transform: translate(-553px, -269px) scale(1) !important}
	.B4:hover .MenuTwo{transform: translate(-502px, -396px) scale(1) !important}

	.A1:hover .MenuOne, .A2:hover .MenuOne, .A3:hover .MenuOne, .A4:hover .MenuOne{
		border-radius: 50px  0px  0px 50px;}
	.B1:hover .MenuOne, .B2:hover .MenuOne, .B3:hover .MenuOne, .B4:hover .MenuOne{
		border-radius:  0px 50px 50px  0px;}
}
/****** iPad LANDSCAPE - END ************************************************************************************/

/****** iPad PORTRAIT - START ***********************************************************************************/
@media (hover: hover) and (min-width: 620px) and (max-width: 749px) and (min-height: 860px),
			 (hover: none)  and (min-width: 620px) and (max-width: 834px) and (min-height: 860px){
	:root{
		--format: iPad;
		--orientation: portrait;}

	.NavSite{
		/* width: 620px; height: 790px; */
		width: 100%; height: 100%;
		--shiftLeft: calc((var(--NavSiteWidth) - 620px) / 2);
		--shiftTop: calc((var(--NavSiteHeight) - 790px) / 2);}

	.NavSite .CenterCircle{
		position: absolute;
		/* top: 145px; */
		/* left: 60px; */
		top:  calc(var(--shiftTop)  + 145px);
		left: calc(var(--shiftLeft) +  60px);
		width: 500px; height: 500px;
		border: solid 1px var(--colorMenuTwoRowBackground); border-radius: 50%;
		background-color: var(--colorGalleryBackground);}

	.NavSite .CenterCircle .Gallery{
		position: absolute; 																	/* Make galleries stack on top of each other */
		width: 498px; height: 498px;													/* Fit galleries within CenterCircle content dimensions */
		border-radius: 50%;
		opacity: 0.0;}

	.A1{position: absolute; top: calc(var(--shiftTop) + 101px); left: calc(var(--shiftLeft) +  16px);}
	.B1{position: absolute; top: calc(var(--shiftTop) + 589px); left: calc(var(--shiftLeft) +  16px);}
	.A2{position: absolute; top: calc(var(--shiftTop) +  12px); left: calc(var(--shiftLeft) + 171px);}
	.B2{position: absolute; top: calc(var(--shiftTop) + 678px); left: calc(var(--shiftLeft) + 171px);}
	.A3{position: absolute; top: calc(var(--shiftTop) +  12px); left: calc(var(--shiftLeft) + 349px);}
	.B3{position: absolute; top: calc(var(--shiftTop) + 678px); left: calc(var(--shiftLeft) + 349px);}
	.A4{position: absolute; top: calc(var(--shiftTop) + 101px); left: calc(var(--shiftLeft) + 504px);}
	.B4{position: absolute; top: calc(var(--shiftTop) + 589px); left: calc(var(--shiftLeft) + 504px);}

	.A1       .MenuOne{transform-origin: 51px 51px;}
	.B1       .MenuOne{transform-origin: 51px 51px;}
	.A2       .MenuOne{transform-origin: 51px 51px;}
	.B2       .MenuOne{transform-origin: 51px 51px;}
	.A3       .MenuOne{transform-origin: 55%  50px;}
	.B3       .MenuOne{transform-origin: 55%  50px;}
	.A4       .MenuOne{transform-origin: 55%  50px;}
	.B4       .MenuOne{transform-origin: 55%  50px;}

	.A1:hover .MenuOne{                             transform: rotate( 45deg); width: 151px;}
	.B1:hover .MenuOne{                             transform: rotate(-45deg); width: 152px;}
	.A2:hover .MenuOne{                             transform: rotate( 75deg); width: 151px;}
	.B2:hover .MenuOne{                             transform: rotate(-75deg); width: 152px;}
	.A3:hover .MenuOne{transform-origin: 67%  50px; transform: rotate(-75deg); width: 151px; left: -51px;}
	.B3:hover .MenuOne{transform-origin: 67%  50px; transform: rotate( 75deg); width: 151px; left: -51px;}
	.A4:hover .MenuOne{transform-origin: 67%  50px; transform: rotate(-45deg); width: 151px; left: -51px;}
	.B4:hover .MenuOne{transform-origin: 67%  50px; transform: rotate( 45deg); width: 151px; left: -51px;}

	.A1{--MenuTwoLeftOld: -235px; --MenuTwoTopOld: -235px;}
	.B1{--MenuTwoLeftOld: -235px; --MenuTwoTopOld: -165px;}
	.A2{--MenuTwoLeftOld: -215px; --MenuTwoTopOld: -245px;}
	.B2{--MenuTwoLeftOld: -215px; --MenuTwoTopOld: -155px;}
	.A3{--MenuTwoLeftOld: -185px; --MenuTwoTopOld: -245px;}
	.B3{--MenuTwoLeftOld: -185px; --MenuTwoTopOld: -155px;}
	.A4{--MenuTwoLeftOld: -165px; --MenuTwoTopOld: -235px;}
	.B4{--MenuTwoLeftOld: -165px; --MenuTwoTopOld: -165px;}

						.MenuTwo{transform: translate(var(--MenuTwoLeftOld), var(--MenuTwoTopOld)) scale(0);}

	.A1:hover .MenuTwo{transform: translate(  44px,   44px) scale(1) !important}
	.B1:hover .MenuTwo{transform: translate(  44px, -444px) scale(1) !important}
	.A2:hover .MenuTwo{transform: translate(-111px,  133px) scale(1) !important}
	.B2:hover .MenuTwo{transform: translate(-111px, -533px) scale(1) !important}
	.A3:hover .MenuTwo{transform: translate(-289px,  133px) scale(1) !important}
	.B3:hover .MenuTwo{transform: translate(-289px, -533px) scale(1) !important}
	.A4:hover .MenuTwo{transform: translate(-444px,   44px) scale(1) !important}
	.B4:hover .MenuTwo{transform: translate(-444px, -444px) scale(1) !important}

	.A1:hover .MenuOne, .A2:hover .MenuOne, .B1:hover .MenuOne, .B2:hover .MenuOne{
		border-radius: 50px  0px  0px 50px;}
	.A3:hover .MenuOne, .A4:hover .MenuOne, .B3:hover .MenuOne, .B4:hover .MenuOne{
		border-radius:  0px  50px  50px 0px;}
}
/****** iPad PORTRAIT - END *************************************************************************************/

/****** SMALL DESKTOP - START ***********************************************************************************/
@media (hover: hover) and (min-width: 500px) and (max-width: 619px) and (min-height: 500px),
			 (hover: hover) and (min-width: 620px) and (max-width: 749px) and (min-height: 500px) and (max-height: 859px),
			 (hover: none)  and (min-width: 500px) and (max-width: 619px) and (min-height: 500px),
			 (hover: none)  and (min-width: 620px) and (max-width: 834px) and (min-height: 500px) and (max-height: 859px),
			 (hover: none)  and (min-width: 835px)                        and (min-height: 500px) and (max-height: 599px){
	:root{
		--format: smallDesktop;}

	.A1 br{display:none;}

	.MenuOne{
		width:					100px;}

	.MenuOne{
		height:					 calc((var(--CenterCircleHeight) - 7 * var(--MenuOneGapVer)) / 8);
		border-radius:	 20px;}
	.NavSite{
		--MenuOneHeight: calc((var(--CenterCircleHeight) - 7 * var(--MenuOneGapVer)) / 8);
		--BorderRadius:  20px;}

	.MenuOne, .MenuTwo, .MenuTwoRow{transition-duration: var(--tranDurationMenuDesk);}

/* Use JS Math.min() in setDimensions() to calculate --NavSiteHeight, --CenterCircleHeight based on innerHeight - headerHeight */
	@media (min-width: 916px){.NavSite{--MenuOneLeft: calc((100vw - 588px) / 2);}}	/* account for navPagePanel width */
	@media (max-width: 915px){.NavSite{--MenuOneLeft: calc((100vw - 460px) / 2);}}
	.NavSite{
		width:     100%;	height: 100%; 		/* but --CenterCircleHeight is limited to 600px by JS code */
		--CenterCircleTop:	 calc((var(--NavSiteHeight) - var(--CenterCircleHeight))/2);
		--CenterCircleLeft:	 calc(var(--MenuOneLeft) + 120px);
		--CenterCircleWidth: 340px;
		--MenuOneGapVer:		 calc(.03 * var(--CenterCircleHeight));
		--MenuTwoLeftOld:		 120px;					/* Need to keep --MenuTwoLeftOld variable name because referenced by showMenus() */
		--MenuTwoLeftNew:		 120px;}

	.NavSite .CenterCircle{
		z-index: -1;
		position: relative;
		top:			var(--CenterCircleTop);
		left:			var(--CenterCircleLeft);
		width:		var(--CenterCircleWidth);
		height:		var(--CenterCircleHeight);
		border:		solid 1px; border-radius: 20px;
		border-color:     var(--colorMenuTwoRowBackground);
		background-color: var(--colorGalleryBackground);}			/* Specify background so doesn't fade with opacity changes */

	.NavSite .CenterCircle .Gallery{
		position: absolute;																		/* Make galleries stack on top of each other */
		width: calc(var(--CenterCircleWidth) - 2px); height: calc(var(--CenterCircleHeight) - 2px);	/* Fit galleries within CenterCircle content dimensions */
		border-radius: 20px;
		opacity: 0.0;}

	.A1{--MenuOneTop: calc(var(--CenterCircleTop) + 0*var(--MenuOneGapVer) + 0*var(--MenuOneHeight));}
	.A2{--MenuOneTop: calc(var(--CenterCircleTop) + 1*var(--MenuOneGapVer) + 1*var(--MenuOneHeight));}
	.A3{--MenuOneTop: calc(var(--CenterCircleTop) + 2*var(--MenuOneGapVer) + 2*var(--MenuOneHeight));}
	.A4{--MenuOneTop: calc(var(--CenterCircleTop) + 3*var(--MenuOneGapVer) + 3*var(--MenuOneHeight));}
	.B1{--MenuOneTop: calc(var(--CenterCircleTop) + 4*var(--MenuOneGapVer) + 4*var(--MenuOneHeight));}
	.B2{--MenuOneTop: calc(var(--CenterCircleTop) + 5*var(--MenuOneGapVer) + 5*var(--MenuOneHeight));}
	.B3{--MenuOneTop: calc(var(--CenterCircleTop) + 6*var(--MenuOneGapVer) + 6*var(--MenuOneHeight));}
	.B4{--MenuOneTop: calc(var(--CenterCircleTop) + 7*var(--MenuOneGapVer) + 7*var(--MenuOneHeight));}

	.A1{position: absolute; top: var(--MenuOneTop); left: var(--MenuOneLeft);}
	.A2{position: absolute; top: var(--MenuOneTop); left: var(--MenuOneLeft);}
	.A3{position: absolute; top: var(--MenuOneTop); left: var(--MenuOneLeft);}
	.A4{position: absolute; top: var(--MenuOneTop); left: var(--MenuOneLeft);}
	.B1{position: absolute; top: var(--MenuOneTop); left: var(--MenuOneLeft);}
	.B2{position: absolute; top: var(--MenuOneTop); left: var(--MenuOneLeft);}
	.B3{position: absolute; top: var(--MenuOneTop); left: var(--MenuOneLeft);}
	.B4{position: absolute; top: var(--MenuOneTop); left: var(--MenuOneLeft);}

	.MenuContainer:hover .MenuOne{
		width: 121px; border-radius: 20px 0px 0px 20px;}

	.A1{--MenuTwoTopOld: calc(-0*var(--MenuOneHeight) - 0*var(--MenuOneGapVer));}
	.A2{--MenuTwoTopOld: calc(-1*var(--MenuOneHeight) - 1*var(--MenuOneGapVer));}
	.A3{--MenuTwoTopOld: calc(-2*var(--MenuOneHeight) - 2*var(--MenuOneGapVer));}
	.A4{--MenuTwoTopOld: calc(-3*var(--MenuOneHeight) - 3*var(--MenuOneGapVer));}
	.B1{--MenuTwoTopOld: calc(-4*var(--MenuOneHeight) - 4*var(--MenuOneGapVer));}
	.B2{--MenuTwoTopOld: calc(-5*var(--MenuOneHeight) - 5*var(--MenuOneGapVer));}
	.B3{--MenuTwoTopOld: calc(-6*var(--MenuOneHeight) - 6*var(--MenuOneGapVer));}
	.B4{--MenuTwoTopOld: calc(-7*var(--MenuOneHeight) - 7*var(--MenuOneGapVer));}

	.MenuTwo{
		width: 				 var(--CenterCircleWidth);
		height:				 var(--CenterCircleHeight);
		border-radius: var(--BorderRadius);
		transform:		 translate(var(--MenuTwoLeftOld), var(--MenuTwoTopOld)) scale(0);}

	.MenuContainer:hover .MenuTwo{
		transform:		 translate(var(--MenuTwoLeftNew), var(--MenuTwoTopOld)) scale(1) !important;}

	.A1 .MenuTwo{border-radius: 0px 20px 20px 20px;}
	.B4 .MenuTwo{border-radius: 20px 20px 20px 0px;}

	.MenuTwo{grid-template-columns: 1fr;}

	.A3 .MenuTwo .MenuTwoRow{
		text-align: left;
		grid-template-columns: 120px     1fr;
		grid-template-areas:  "GameImage GameDescription";}

	.A3 .MenuTwo div:first-child{padding-top:    0px;}
	.A3 .MenuTwo div:last-child {padding-bottom: 0px;}

	.A4 .MenuTwo div:first-child{padding-top:   30px;}
	.A4 .MenuTwo div:last-child {padding-bottom: 0px;}

	.B1 .MenuTwo div:first-child{padding-top:    0px;}
	.B1 .MenuTwo div:last-child {padding-bottom: 0px;}

	.B2 .MenuTwo div:first-child{padding-top:    0px; padding-bottom: 0px;}
	.B2 .MenuTwo div:last-child {padding-bottom: 0px;}

	.B3 .MenuTwo div:first-child{padding-top:    0px;}
	.B3 .MenuTwo div:last-child {padding-bottom: 0px;}

	.B4 .MenuTwo div:first-child{padding-top:    0px; padding-bottom: 0px;}
	.B4 .MenuTwo div:last-child {padding-bottom: 0px;}

	.MenuContainer       .MenuTwoRow p, .MenuContainer       .MenuTwoRow img{
		opacity: 0;
		transition-duration:				var(--tranDurationPImgDesk);
		transition-timing-function: var(--tranTimingPImgUnHover);}
	.MenuContainer:hover .MenuTwoRow p, .MenuContainer:hover .MenuTwoRow img{
		opacity: 1;
		transition-timing-function: var(--tranTimingPImgHover);}

	p.LaserImage img{max-height: calc(var(--NavSiteHeight) - 300px); max-width: 280px;}
	p.GroupImage img{max-height: calc(var(--NavSiteHeight) - 300px); max-width: 200px;}
	p.DeerImage  img{max-width: 280px;}
	img.Computer{max-width: 200px;}			    /* Different dimensions in Phone Landscape */
}
/****** SMALL DESKTOP - END *************************************************************************************/

/****** PHONE PORTRAIT - START **********************************************************************************/
@media (orientation: portrait) and (max-width: 499px){
	:root{
		--format:	phone;
		--orientation: portrait;}
		
	@media (max-height: 520px){
		.About{display:none;}}
		
	.CenterCircle{display: none;}

	.A1 br{display:none;}

	.MenuOne{
			width:					 100px;}

	@media (min-height: 540px){		/* Tall circles */
		.MenuOne{
			height:					 100px;
			border-radius:    50px;}
		.NavSite{
			--MenuOneHeight: 100px;
			--BorderRadius:   50px;}}

	@media (max-height: 539px){		/* Short ovals */
		.MenuOne{
			height:						60px;
			border-radius:    20px;}
		.NavSite{
			--MenuOneHeight:  60px;
			--BorderRadius:   20px;}}

	.MenuOne, .MenuTwo, .MenuTwoRow{transition-duration: var(--tranDurationMenuPhone);}

	.MenuOne:hover{cursor:pointer;}

	.MenuTwoRow{
		color:            var(--fontColorMenuTwo);
		background-color: var(--colorMenuTwoRowBackground);}

/* Use JS Math.min() in setDimensions() to calculate --NavSiteHeight, --CenterCircleHeight based on innerHeight - headerHeight */
	.NavSite{
		width: 100%; height: 100%;
		--MenuOneGapHor: calc((100vw - 200px) / 3);
		--MenuOneLeftA:  var(--MenuOneGapHor);																					/* Left edge of MenuOne for column A */
		--MenuOneLeftB:  calc((2 * var(--MenuOneGapHor)) + 100px);											/* Left edge of MenuOne for column B */

		--MenuOneGapVer:	 calc((var(--NavSiteHeight) - (4 * var(--MenuOneHeight))) / 5);
		--MenuOneTop1:		 var(--MenuOneGapVer);																				/* Top edge of row 1 */
		--MenuOneTop2:		 calc(2*var(--MenuOneGapVer) + 1*var(--MenuOneHeight));				/* Top edge of row 2 */
		--MenuOneTop3:		 calc(3*var(--MenuOneGapVer) + 2*var(--MenuOneHeight));				/* Top edge of row 3 */
		--MenuOneTop4:		 calc(4*var(--MenuOneGapVer) + 3*var(--MenuOneHeight));				/* Top edge of row 4 */

		--MenuTwoWidth:		 calc(200px + 2*var(--MenuOneGapHor));
		--MenuTwoHeight:	 calc(4*var(--MenuOneHeight) + 4*var(--MenuOneGapVer));

		--MenuTwoTopOld:	 calc(-.5*var(--MenuTwoHeight) + .5*var(--MenuOneHeight));
		--MenuTwoLeftOld:  calc(-.5*var(--MenuTwoWidth) + 50px);

		--MenuTwoTopNew1:	 calc(-0.5*var(--MenuOneGapVer));															/* Top edge of MenuTwo for row 1 */
		--MenuTwoTopNew2:	 calc(-1.5*var(--MenuOneGapVer) - 1*var(--MenuOneHeight));		/* Top edge of MenuTwo for row 2 */
		--MenuTwoTopNew3:	 calc(-2.5*var(--MenuOneGapVer) - 2*var(--MenuOneHeight));		/* Top edge of MenuTwo for row 3 */
		--MenuTwoTopNew4:	 calc(-3.5*var(--MenuOneGapVer) - 3*var(--MenuOneHeight));		/* Top edge of MenuTwo for row 4 */

		--MenuTwoLeftNewA: calc(-1*var(--MenuOneGapHor)/2);															/* New left edge of MenuTwo for column A */
		--MenuTwoLeftNewB: calc(-100px - 1.5*var(--MenuOneGapHor));}										/* New left edge of MenuTwo for column B */

	.A1{position: absolute; top: var(--MenuOneTop1); left: var(--MenuOneLeftA);}
	.A2{position: absolute; top: var(--MenuOneTop2); left: var(--MenuOneLeftA);}
	.A3{position: absolute; top: var(--MenuOneTop3); left: var(--MenuOneLeftA);}
	.A4{position: absolute; top: var(--MenuOneTop4); left: var(--MenuOneLeftA);}
	.B1{position: absolute; top: var(--MenuOneTop1); left: var(--MenuOneLeftB);}
	.B2{position: absolute; top: var(--MenuOneTop2); left: var(--MenuOneLeftB);}
	.B3{position: absolute; top: var(--MenuOneTop3); left: var(--MenuOneLeftB);}
	.B4{position: absolute; top: var(--MenuOneTop4); left: var(--MenuOneLeftB);}

	.MenuTwo{																					/* Override general values set for desktop and iPad */
		width:				 var(--MenuTwoWidth);
		height:				 var(--MenuTwoHeight);
		border-radius: var(--BorderRadius);
		transform: translate(var(--MenuTwoLeftOld), var(--MenuTwoTopOld)) scale(0);}

	.A1{--MenuTwoTopNew: var(--MenuTwoTopNew1); --MenuTwoLeftNew: var(--MenuTwoLeftNewA); }
	.A2{--MenuTwoTopNew: var(--MenuTwoTopNew2); --MenuTwoLeftNew: var(--MenuTwoLeftNewA); }
	.A3{--MenuTwoTopNew: var(--MenuTwoTopNew3); --MenuTwoLeftNew: var(--MenuTwoLeftNewA); }
	.A4{--MenuTwoTopNew: var(--MenuTwoTopNew4); --MenuTwoLeftNew: var(--MenuTwoLeftNewA); }
	.B1{--MenuTwoTopNew: var(--MenuTwoTopNew1); --MenuTwoLeftNew: var(--MenuTwoLeftNewB); }
	.B2{--MenuTwoTopNew: var(--MenuTwoTopNew2); --MenuTwoLeftNew: var(--MenuTwoLeftNewB); }
	.B3{--MenuTwoTopNew: var(--MenuTwoTopNew3); --MenuTwoLeftNew: var(--MenuTwoLeftNewB); }
	.B4{--MenuTwoTopNew: var(--MenuTwoTopNew4); --MenuTwoLeftNew: var(--MenuTwoLeftNewB); }

	.MenuTwo{grid-template-columns: 1fr;}

	.A3 .MenuTwo .MenuTwoRow{
		text-align: left;
		grid-template-columns: 120px     1fr;
		grid-template-areas:  "GameImage GameDescription";}

	.A3 .MenuTwo div:first-child{padding-top:    5px;}
	.A3 .MenuTwo div:last-child {padding-bottom: 5px;}

	.A4 .MenuTwo div:first-child{padding-top:   25px; padding-bottom: 10px;}
	.A4 .MenuTwo div:last-child {padding-bottom: 0px;}

	.B1 .MenuTwo div:first-child{padding-top:    5px;}
	.B1 .MenuTwo div:last-child {padding-bottom: 5px;}

	.B2 .MenuTwo div:first-child{padding-top:    5px; padding-bottom: 5px;}
	.B2 .MenuTwo div:last-child {padding-bottom: 0px;}

	.B3 .MenuTwo div:first-child{padding-top:    5px;}
	.B3 .MenuTwo div:last-child {padding-bottom: 0px;}

	.B4 .MenuTwo div:first-child{padding-top:    0px; padding-bottom: 0px;}
	.B4 .MenuTwo div:last-child {padding-bottom: 0px;}

	.MenuContainer p, .MenuContainer img{transition-duration: var(--tranDurationPImgPhone);}
	/* Can't set p, img mouse-over/out delays here because there is no hover for phone, just click */
	
	p.LaserImage img{max-height: calc(var(--NavSiteHeight) - 300px); max-width: 305px;}
	p.GroupImage img{max-height: calc(var(--NavSiteHeight) - 240px); max-width: 200px;}
	p.DeerImage  img{max-width:  calc(var(--MenuTwoWidth) - 60px);}
	img.Computer{max-height: calc(var(--NavSiteHeight) - 240px); max-width: 200px;} /* Different dimensions in Phone Landscape */
}
/****** PHONE PORTRAIT - END ************************************************************************************/

/****** PHONE LANDSCAPE - START *********************************************************************************/
@media (hover: hover) and (orientation: landscape) and (max-width: 749px) and (max-height: 499px),
			 (hover: none)  and (orientation: landscape)                        and (max-height: 499px){
	:root{
		--format: phone;
		--orientation: landscape;}

	.Description{display:none;}	/* just show titles */
	.About{display:none;}

	.CenterCircle{display: none;}

	.A1 br{display:none;}
	.MenuTwoRow p + p{margin-top: 0px;}

	.MenuOne{
			width:					 100px;}

	@media (min-height: 325px){
		.MenuOne{
			height:					 100px;
			border-radius:   100px;}
		.NavSite{
			--MenuOneHeight: 100px;
			--BorderRadius:   50px;}}

	@media (max-height: 324px){
		.MenuOne{
			height:           60px;
			border-radius:    20px;}
		.NavSite{
			--MenuOneHeight:  60px;
			--BorderRadius:   20px;}}

	.MenuOne, .MenuTwo, .MenuTwoRow{transition-duration: var(--tranDurationMenuPhone);}

	.MenuOne:hover{cursor:pointer;}

	.MenuTwoRow{
		color:            var(--fontColorMenuTwo);
		background-color: var(--colorMenuTwoRowBackground);}

/* Use JS Math.min() in setDimensions() to calculate --NavSiteHeight, --CenterCircleHeight based on innerHeight - headerHeight */
	@media (min-width: 916px){.NavSite{--MenuOneGapHor: calc((100vw - 128px - 400px) / 5);}}	/* Account for navPagePanel width */
	@media (max-width: 915px){.NavSite{--MenuOneGapHor: calc((100vw -   0px - 400px) / 5);}}
	.NavSite{
		width: 100%; height: 100%;
		--MenuOneGapVer:	 calc((var(--NavSiteHeight) - (2*var(--MenuOneHeight))) / 3);
		--MenuOneTopA:		 var(--MenuOneGapVer);
		--MenuOneTopB:		 calc( 2*var(--MenuOneGapVer) +  1*var(--MenuOneHeight));

		--MenuOneLeft1:		 var(--MenuOneGapHor);
		--MenuOneLeft2:		 calc((2*var(--MenuOneGapHor)) + 100px);
		--MenuOneLeft3:		 calc((3*var(--MenuOneGapHor)) + 200px);
		--MenuOneLeft4:		 calc((4*var(--MenuOneGapHor)) + 300px);

		--MenuTwoWidth:		 calc(400px + 4*var(--MenuOneGapHor));
		--MenuTwoHeight:	 calc(2*var(--MenuOneGapVer) + 2*var(--MenuOneHeight));

		--MenuTwoTopOld:   calc(-.5*var(--MenuTwoHeight) + .5*var(--MenuOneHeight));
		--MenuTwoLeftOld:  calc(-.5*var(--MenuTwoWidth) + 50px);

		--MenuTwoTopNewA:	 calc(-0.5*var(--MenuOneGapVer));
		--MenuTwoTopNewB:	 calc(-1.5*var(--MenuOneGapVer) - 1*var(--MenuOneHeight));

		--MenuTwoLeftNew1: calc(-.5*var(--MenuOneGapHor));
		--MenuTwoLeftNew2: calc(-100px - 1.5*var(--MenuOneGapHor));
		--MenuTwoLeftNew3: calc(-200px - 2.5*var(--MenuOneGapHor));
		--MenuTwoLeftNew4: calc(-300px - 3.5*var(--MenuOneGapHor));
	}

	.A1{position: absolute; top: var(--MenuOneTopA); left: var(--MenuOneLeft1);}
	.A2{position: absolute; top: var(--MenuOneTopA); left: var(--MenuOneLeft2);}
	.A3{position: absolute; top: var(--MenuOneTopA); left: var(--MenuOneLeft3);}
	.A4{position: absolute; top: var(--MenuOneTopA); left: var(--MenuOneLeft4);}
	.B1{position: absolute; top: var(--MenuOneTopB); left: var(--MenuOneLeft1);}
	.B2{position: absolute; top: var(--MenuOneTopB); left: var(--MenuOneLeft2);}
	.B3{position: absolute; top: var(--MenuOneTopB); left: var(--MenuOneLeft3);}
	.B4{position: absolute; top: var(--MenuOneTopB); left: var(--MenuOneLeft4);}

	.MenuTwo{																					/* Override general values set for desktop and iPad */
		width:				 var(--MenuTwoWidth);
		height:				 var(--MenuTwoHeight);
		border-radius: var(--BorderRadius);
		transform: translate(var(--MenuTwoLeftOld), var(--MenuTwoTopOld)) scale(0);}

	.A1{--MenuTwoTopNew: var(--MenuTwoTopNewA); --MenuTwoLeftNew: var(--MenuTwoLeftNew1);}
	.A2{--MenuTwoTopNew: var(--MenuTwoTopNewA); --MenuTwoLeftNew: var(--MenuTwoLeftNew2);}
	.A3{--MenuTwoTopNew: var(--MenuTwoTopNewA); --MenuTwoLeftNew: var(--MenuTwoLeftNew3);}
	.A4{--MenuTwoTopNew: var(--MenuTwoTopNewA); --MenuTwoLeftNew: var(--MenuTwoLeftNew4);}
	.B1{--MenuTwoTopNew: var(--MenuTwoTopNewB); --MenuTwoLeftNew: var(--MenuTwoLeftNew1);}
	.B2{--MenuTwoTopNew: var(--MenuTwoTopNewB); --MenuTwoLeftNew: var(--MenuTwoLeftNew2);}
	.B3{--MenuTwoTopNew: var(--MenuTwoTopNewB); --MenuTwoLeftNew: var(--MenuTwoLeftNew3);}
	.B4{--MenuTwoTopNew: var(--MenuTwoTopNewB); --MenuTwoLeftNew: var(--MenuTwoLeftNew4);}

	/* Rearrange grid */
	.A1 .MenuTwo{grid-template-columns: 1fr;}

	.A2 .MenuTwo, .A3 .MenuTwo, .A4 .MenuTwo, .B1 .MenuTwo, .B2 .MenuTwo, .B3 .MenuTwo, .B4 .MenuTwo{
		grid-template-columns: 1fr 1fr;}

	.A3 .MenuTwo .MenuTwoRow{
		text-align: left;
		grid-template-columns: 120px		 1fr;
		grid-template-areas:  "GameImage GameDescription";}

	.A3 .MenuTwo .MenuTwoRow:nth-child(1){grid-row-start: 1;    grid-row-end: 3;}

	/* .B1 .MenuTwo .MenuTwoRow:nth-child(5){grid-column-start: 1; grid-column-end: 3;} */

	/* .B3 .MenuTwo .MenuTwoRow:nth-child(3){grid-column-start: 1; grid-column-end: 3; grid-row-end: 4;} */

	.B4 .MenuTwo .MenuTwoRow:nth-child(1){grid-row-start: 1;    grid-row-end: 4;}

	/* These image values override general values for iPad and desktop set at top of this page */
	p.LaserImage{display:none;}			/* Move div laser image into left column */
	p.GroupImage{display:none;}			/* Move div laser image into left column */
	div.LaserImage img{max-height: calc(var(--NavSiteHeight) - 50px); max-width: calc(100% - 25px);}
	div.GroupImage img{height: 140px; width: auto;}
	p.DeerImage    img{max-height: calc(var(--NavSiteHeight) - 70px); max-width: calc(var(--MenuTwoWidth)/2 - 60px);}
	img.Computer{max-width: calc(100% - 25px); max-height: calc(100% - 25px);}
	
	.MenuTwoRow{overflow: hidden;}	/* Keep vertical overflow on right from lowering image on the left */
	
	div.LaserImage{grid-row-start: 1; grid-row-end: 2; display: grid;}
	div.GroupImage{grid-row-start: 1; grid-row-end: 2; display: grid;}

	img.ByteToDecimal{max-width: calc(100% - 15px); max-height: calc(100%);}

	img.Concentration{max-width: calc(100% - 15px); max-height: calc(100% - 15px);}

	img.Nim{max-width: calc(100% - 15px); max-height: calc(100% - 15px);}

	.A3 .MenuTwo div:first-child{padding-top:    0px;}
	.A3 .MenuTwo div:last-child {padding-bottom: 0px;}

	.A4 .MenuTwo div:first-child{padding-top:    0px;}
	.A4 .MenuTwo div:last-child {padding-bottom: 0px;}

	.B1 .MenuTwo div:first-child{padding-top:    0px;}
	.B1 .MenuTwo div:last-child {padding-bottom: 0px;}

	.B2 .MenuTwo div:first-child{padding-top:    0px;}
	.B2 .MenuTwo div:last-child {padding-bottom: 0px;}

	.B3 .MenuTwo div:first-child{padding-top:    0px;}
	.B3 .MenuTwo div:last-child {padding-bottom: 0px;}

	.B4 .MenuTwo div:first-child{padding-top:    0px;}
	.B4 .MenuTwo div:last-child {padding-bottom: 0px;}

	.MenuContainer p, .MenuContainer img{transition-duration: var(--tranDurationPImgPhone);}
	/* Can't set p, img mouse-over/out delays here because there is no hover for phone, just click */
	
	img.Frisbee{max-width: calc(100% - 40px);}
}
/****** PHONE LANDSCAPE - END ***********************************************************************************/