* {box-sizing: border-box;}
body{margin:0; padding:0; font-family: sans-serif; touch-action: manipulation; user-select:none; overflow: hidden;}
/** Can't set height to 100vh because iOS favorites bar height is included - iOS bug **/

:root{
	--fontColorHeader:								hsl(0, 0%, 90%);
	--fontColorHeaderHover:						hsl(10, 100%, 45%);
	--colorHeaderBackground:					black;
	
	--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 */

	--colorGalleryBackground:					black;
	
	--tranDurationMenuIpad:	 					400ms;
	--tranDurationPImgIpad:						400ms;
	--tranDurationMenuDesk:						250ms;
	--tranDurationPImgDesk:						250ms;
	--tranDurationMenuPhone:					250ms;	
	--tranDurationPImgPhone:	 				250ms;
	--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:							500ms;
	--tranTimingBurger:								ease-out;}

/****** OLD BROWSER WARNING ***************************************************************************/
@media (hover:hover), (hover:none){
	:root{
		--warningDisplay:				 				none;}
}
#OldBrowserWarning{
	position: absolute; top: 10px; left: 10px; right: 10px;
	border: solid 1px red; padding: 5px; text-align: center;
	background-color: rgb(255, 240, 240);
	display: var(--warningDisplay);}

/****** HEADER - START ********************************************************************************/
header{
	display: grid;
	color:						var(--fontColorHeader);
	background-color: var(--colorHeaderBackground);}

.Name{
	display: none;
	grid-area: name;
	font-size: 40px;
	padding: 10px 0px 0px 10px;
	color: var(--fontColorHeader);
	text-decoration: none;}
.Name:hover{color: var(--fontColorHeaderHover);}	

.Subjects{
	display: none;
	grid-area: subjects;
	font-size: 20px;
	padding-left: 10px;}

.Burger{
	grid-area: hamburger;
	width: 48px;
	justify-self: right; align-self: center;
	transform: scale(0);
	transition-duration: var(--tranDurationBurger); transition-timing-function: var(--tranTimingBurger);}
.Burger:hover{cursor:pointer;}


@media (orientation: landscape){
 .NameLong {display: block;}
 .Subjects{padding-top: 27px;}
 .MenuBurger{   width: 48px;}
 .GalleryBurger{width: 50px;}
 .XBurger{      width: 48px;}
 .Burger{padding: 12px 10px 12px 0px;} 								/* vertical orientation padding set in phone section */
	main{top: 60px;}																		/* Set ONE higher than expected to remove white line */
	header{
		grid-template-columns: max-content 1fr max-content;
		grid-template-rows: 60px;
		grid-template-areas:
			"name subjects hamburger";}

	@media (min-width: 785px){													/* landscape and LONG   subject on ONE row */
	 .SubjectsLong{display:block;}}

	@media (min-width: 650px) and (max-width: 784px){		/* landscape and MEDIUM subject on ONE row */
	 .SubjectsMedium{display:block;}}

	@media (min-width: 545px) and (max-width: 649px){		/* landscape and SHORT  subject on ONE row */
	 .SubjectsShort{display:block;}}

	@media (min-width: 420px) and (max-width: 544px){		/* landscape and TINY   subject on ONE row */
	 .SubjectsTiny{display:block;}}

	@media (min-width: 320px) and (max-width: 419px){		/* landscape and TINY   subject and SHORT name on ONE row */
	 .NameLong  {display: none;}
	 .NameShort {display: block;}
	 .SubjectsTiny{display:block;}}

	@media (max-width: 319px){													/* landscape and NO     subject and SHORT name on ONE row */
	 .NameLong  {display: none;}
	 .NameShort {display: block;}}
}

@media (orientation: portrait){
	.NameLong {display: block;}
	@media (min-width: 620px){													/* portrait and LONG    subject on ONE row */
		header{
			grid-template-columns: max-content 1fr 0px;
			grid-template-rows: 60px;
			grid-template-areas:
				"name subjects hamburger";}
	 .Subjects{padding-top: 27px;}
	 	main{top: 60px;}}																	/* Set ONE higher than expected to remove white line */

	@media (min-width: 728px){
	 .SubjectsLong {display:block;}}	
		
	@media (min-width: 620px) and (max-width: 727px){										
	 .SubjectsMedium {display:inline-block;}}	
		
	@media (max-width: 619px){													/* portrait and L/M/S/T subject on TWO rows */
		header{
			grid-template-columns: max-content 1fr;
			grid-template-rows: 51px 32px;
			grid-template-areas:
				"name     hamburger"
				"subjects hamburger";}
		main{top: 82px;}}																	/* Set ONE higher than expected to remove white line */

	@media (min-width: 530px) and (max-width: 619px){		/* portrait and LONG    subject on TWO rows */
		.SubjectsLong {display:block;}}

	@media (min-width: 395px) and (max-width: 529px){		/* portrait and MEDIUM  subject on TWO rows */
		.SubjectsMedium {display:block;}}

	@media (min-width: 320px) and  (max-width: 394px){	/* portrait and SHORT   subject on TWO rows */
		.SubjectsShort{display:inline-block;}}

	@media (max-width: 319px){													/* portrait and NO      subject on ONE row */
		.NameLong {display: none;}
		.NameShort{display: block;}
		.SubjectsShort{display:block;}}
}

main{ /** using Grid here to center the container within main breaks iOS **/
	position: absolute; bottom: 0px;
	width: 100%;}
/****** HEADER - 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;} /* width and height are different for PHONE LANDSCAPE */

/* 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 **********************************************************************************/

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

.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;}

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

.MenuTwoRow{
	color:            var(--fontColorMenuTwo);					/* Blend in with Menu Two at start of transition */
	background-color: var(--colorMenuOneBackground);} 	/* Blend in with Menu One at start of transition */
/* Phone section: background-color = --colorMenuTwoRowBackground,
	 to prevent tapping outside of MenuTwo from changing background back to --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;}

/****** ALL - END *************************************************************************************/

/****** iPad - ALL - START*****************************************************************************/
@media (min-width: 620px) and (max-width: 834px) and (min-height: 860px),			/* iPad Portrait  */
			 (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";}

	/* .A4 .MenuTwo{grid-template-rows: 2fr 1fr 1fr;} */

	.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:		  5px;}
	.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 (min-width: 835px) and (min-height: 600px){				/* < 835 triggers portrait mode in iPad */
	:root{
		--format: iPad;
		--orientation: landscape;}

	.NavSite{
		width: 820px; height: 502px;
		position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);}

	/* CenterCircle provides a constant background while 7 galleries fade in and out */
	.NavSite .CenterCircle{
		position: absolute; top: 0px; left: 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:    4px; left:   58px;}
	.A2{position: absolute; top:  131px; left:    7px;}
	.A3{position: absolute; top:  269px; left:    7px;}
	.A4{position: absolute; top:  396px; left:   58px;}
	.B1{position: absolute; top:    4px; left:  662px;}
	.B2{position: absolute; top:  131px; left:  713px;}
	.B3{position: absolute; top:  269px; left:  713px;}
	.B4{position: absolute; top:  396px; left:  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 (min-width: 620px) and (max-width: 834px) and (min-height: 860px){
	:root{
		--format: iPad;
		--orientation: portrait;}
		
	.NavSite{
		width: 620px; height: 790px;
		position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);}

	.NavSite .CenterCircle{
		position: absolute; top: 145px; left: 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:  101px; left:   16px;}
	.B1{position: absolute; top:  589px; left:   16px;}
	.A2{position: absolute; top:   12px; left:  171px;}
	.B2{position: absolute; top:  678px; left:  171px;}
	.A3{position: absolute; top:   12px; left:  349px;}
	.B3{position: absolute; top:  678px; left:  349px;}
	.A4{position: absolute; top:  101px; left:  504px;}
	.B4{position: absolute; top:  589px; left:  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 (min-width: 500px) and (max-width: 619px) and (min-height: 500px),
			 (min-width: 620px) and (max-width: 834px) and (min-height: 500px) and (max-height: 859px),
			 (min-width: 835px)												 and (min-height: 500px) and (max-height: 599px){
	:root{
		--format: smallDesktop;}

	.Burger{transform: scale(0);} 							/* needed for smooth transition from phone portrait mode */
		
	.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);
		--MenuBorderRadius:	20px;}
		
	.MenuOne, .MenuTwo, .MenuTwoRow{
		transition-duration: var(--tranDurationMenuDesk);}

/* Use JS to calculate --NavSiteHeight based on NavSite clientHeight, adjust for iPhone landscape bar */
	.NavSite{
		width: 100%; height: 100%;
		--CenterCircleTop:	 calc((var(--NavSiteHeight) - var(--CenterCircleHeight))/2);
		--CenterCircleLeft:	 calc(var(--MenuOneLeft) + 120px);
		--CenterCircleWidth: 340px;
		--MenuOneLeft:			 calc((100vw - 460px) / 2);
		--MenuOneGapVer:		 calc(.03 * var(--CenterCircleHeight));
		--MenuTwoLeftOld:		 120px;					/* Distance between left edge of Menu One and left edge of Menu Two */
		--MenuTwoLeftNew:		 120px;}

	.NavSite .CenterCircle{
		position: relative;	top: var(--CenterCircleTop);	left: var(--CenterCircleLeft);
		width: var(--CenterCircleWidth); height: var(--CenterCircleHeight);
		border: solid 1px var(--colorMenuTwoRowBackground); border-radius: 20px;
		background-color: var(--colorGalleryBackground);}

	.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(--MenuBorderRadius);
		transform:		 translate(var(--MenuTwoLeftOld), var(--MenuTwoTopOld)) scale(0);}

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

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

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

	.A3 .MenuTwo .MenuTwoRow{															/* Two Columns */
		text-align: left;
		grid-template-columns: 120px     1fr; 							/* Left column width is narrower in phone modes */
		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;}}
	
	.MenuBurger{transform: scale(1);}

	.A1 br{display:none;}

	.MenuOne{
			width: 100px;}
	
	@media (min-height: 540px){
		.MenuOne{
			height:						 100px;
			border-radius:			50px;}
		.NavSite{
			--MenuOneHeight:	 100px;
			--MenuBorderRadius:	50px;}
		.MenuBurger{   width: 48px;}
		.GalleryBurger{width: 55px;}
		.XBurger{      width: 48px;}
		.Burger{padding: 25px 10px 25px 0px;}}

	@media (max-height: 539px){
		.MenuOne{
			height:							60px;
			border-radius:			20px;}
		.NavSite{
			--MenuOneHeight:		60px;
			--MenuBorderRadius:	20px;}
		.Subjects{display: none;}
		.MenuBurger{   width: 48px;}
		.GalleryBurger{width: 50px;}
		.XBurger{      width: 48px;}
		.Burger{padding: 9px 10px 9px 0px;}
		header{grid-template-rows: 60px;}
		main{top: 60px;}}																				/* Set ONE higher than expected to remove white line */

	.MenuContainer{display: none;}

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

	.MenuOne:hover{cursor:pointer;}

	/* Prevent tapping outside of MenuTwo from changing background back to --colorMenuOneBackground */
	.MenuTwoRow{background-color: var(--colorMenuTwoRowBackground);}

	.NavSite .CenterCircle{
		width: 100%; height: 100%;														/* CenterCircle expands to fill whole container */
		border: none; border-radius: 0;
		background-color: var(--colorGalleryBackground);}

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

	/* --NavSiteHeight: use JS to calculate based on NavSite clientHeight, adjust for iPhone landscape bar */
	.NavSite{
		width: 100%; height: 100%;
		--MenuOneGapHor:	 calc((100vw - 200px) / 3);
		--MenuOneLeftA:		 var(--MenuOneGapHor);																					/* Left edge of column A */
		--MenuOneLeftB:		 calc((2 * var(--MenuOneGapHor)) + 100px);											/* Left edge of 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);																/* Left edge of MenuTwo for column A */
		--MenuTwoLeftNewB: calc(-100px - 1.5*var(--MenuOneGapHor));}											/* 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(--MenuBorderRadius);
		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;}									/* Two columns for some phone lanscape rows */

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

	/* These padding values override general values for iPad and desktop set at top of this page */	
	.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: 5px;}
	.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);}
	
	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 */
	/* can't set p, img mouse-over/out delays here because there is no hover for phone, just click */
}
/****** PHONE PORTRAIT - END **************************************************************************/

/****** PHONE LANDSCAPE - START ***********************************************************************/
@media (orientation: landscape) and (max-height: 499px){
	:root{
		--format: phone;
		--orientation: landscape;}
		
	.Description{display:none;}	/* just show titles */
	.About{display:none;}
	
	.MenuBurger{transform: scale(1);}

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

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

	@media (max-height: 324px){
		.MenuOne{																								/* Override general values set for desktop and iPad */
			height:							60px;
			border-radius:			20px;}
		.NavSite{
			--MenuOneHeight:		60px;
			--MenuBorderRadius:	20px;}}

	.MenuContainer{display: none;}														/* Initial load should only show the gallery */

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

	.MenuOne:hover{cursor:pointer;}
	
	/* Prevent tapping outside of MenuTwo from changing background back to --colorMenuOneBackground */
	.MenuTwoRow{
		background-color: var(--colorMenuTwoRowBackground);}

	/* --NavSiteHeight: use JS to calculate based on NavSite clientHeight, adjust for iPhone landscape bar */		
	.NavSite .CenterCircle{
		width: 100%; height: var(--NavSiteHeight);							/* CenterCircle expands to fill whole container */
		border: none; border-radius: 0;
		background-color: var(--colorGalleryBackground);}

	.NavSite .CenterCircle .Gallery{
		position: absolute; 																		/* Make galleries stack on top of each other */
		width: 100%; height: var(--NavSiteHeight);							/* Fit galleries within CenterCircle content dimensions */
		border: none; border-radius: 0;
		opacity: 0.0;}
	
	.NavSite .CenterCircle .Gallery img{width: auto; height: var(--ImageSize)}
			
	.NavSite{
		width: 100%; height: 100%;
		--MenuOneGapVer:	 calc((var(--NavSiteHeight) - (2*var(--MenuOneHeight))) / 3);
		--MenuOneTopA:		 var(--MenuOneGapVer);
		--MenuOneTopB:		 calc( 2*var(--MenuOneGapVer) + 1*var(--MenuOneHeight));
		
		--MenuOneGapHor:	 calc((100vw - 400px) / 5);
		--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(--MenuBorderRadius);
		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{															/* Two Columns */
		text-align: left;
		grid-template-columns: 120px     1fr; 							/* Left column width is narrower in phone modes */
		grid-template-areas:  "GameImage GameDescription";}

	.A3 .MenuTwo .MenuTwoRow:nth-child(1){grid-row-start: 1;    grid-row-end: 3;}
	
	/* .A4 .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-height: calc(100% - 25px); max-width: 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);}

	/* These padding values override general values for iPad and desktop set at top of this page */	
	.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 */
}
/****** PHONE LANDSCAPE - END *************************************************************************/