:root {
  --global-nav-height: 5rem;
  --global-nav-item-active-color: var(--grey4);
  --global-nav-item-active-color: var(--FPO-Gold);
	--global-shadow-color: var(--black);
	--nav-bg-width: 85%;
	--nav-bg-transform: 15%;
	--nav-input-hidden: false;
	--nav-container-position: absolute;
	--FPO-logo-bg: transparent; /* WORK HERE : FPO */
}

.nav-container {
  display: flex;
  flex-direction: row;
  justify-content: center; /* !!! THIS KEEPS NAV CONTENT CENTERED AT MAX WIDTH */
	/* justify-content: space-between; / * !!! THIS KEEPS NAV CONTENT FORCED TO SIDES */

	/* position: absolute; / * INIT THIS WILL SCROLL NAV */
	/* position: fixed; / * THIS WILL ATTACH NAV */
	position: var(--nav-container-position); /* !!! WHEN SCREEN HEIGHT IS LESS THAN 310px, --nav-container-position IS TOGGLED VIA JS TO FIXED WHEN OPEN AND BACK TO ABSOLUTE WHEN CLOSED SO THAT NAV CONTAINER DOESN'T SCROLL AWAY FROM OPEN MENU ITEMS */

	/* height: 4.5rem; / * 72px : 4.5rem */
	height: var(--global-nav-height); /* 80px : 5rem */
  min-width: 100%;
	width: 100%;
	z-index: 200;

	transition: background-color var(--duration-long);
	
	background-color: rgba(0, 0, 0, 1); /* var(--black); */
	/* background-image: none; */
	/* background-image: linear-gradient(rgba(0,0,0, 1), rgba(0,0,0, 1), rgba(0,0,0, 1)); / * BLACK GRADIENT */
	background-blend-mode: multiply;
}

.nav-content {
  display: flex;
  flex-direction: row;
	flex-wrap: none;
	justify-content: space-between;
	position: absolute; /* THIS WILL SCROLL NAV */
	/* position: fixed; * THIS WILL ATTACH NAV */
	/* z-index: 999; */
  max-width: var(--global-content-width-max); /* !!! THIS CAPS WIDTH WHICH MAY BE LESS THAN 100% ON LARGER SCREENS */
	/* max-width: 100%; / * THIS LETS NAV BE FULL WIDTH */
  min-width: var(--global-content-width-min); /* !!! DO NOT USE 100% OR NAV ELEMENTS WILL EXPAND BEYOND PAGE CONTENT WIDTH */
	/* min-width: calc(var(--global-content-width-min) - (2 * var(--global-padding))); */
  width: 100%;
	top: 0;

	/* THESE ATTACH NAV */
	/*
	::: TEMP OFF :::
	height: 2rem;
	min-height: 2rem;
	*/
	/* padding: 2.5rem var(--global-padding); / * TIED TO HAMBURGER SIZE AND LOCATION */
	padding: 1.25rem var(--global-padding); /* !!! LOGO PLACEMENT */ /* TIED TO HAMBURGER SIZE AND LOCATION */

	/* THESE TWO ARE TEMP WORKAROUNDS */
  transition: var(--duration-long);
	opacity: 1;

	/* THIS LINE ALLOWS CLICK THROUGH TO BACKGROUND CLOSE CLICK */
	pointer-events: none; /* WORK HERE : MAY HAVE TO TOGGLE THIS ATTRIBUTE VIA CSS OR JS */
}

.nav_logo {
	align-content: flex-start;
	/* position: absolute; TEMP OFF */
	/* z-index: 999; */
  /* width: 75%; */
  top: 0;

  /* THIS LINE ALLOWS CLICK THROUGH TO BACKGROUND CLOSE CLICK */
	pointer-events: none;
  text-align: left;
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--white);

	transform: scale(1);
	transition-property: transform, color;
	transition-duration: var(--duration-btn);
	transition-timing-function: ease-in-out; /* cubic-bezier(0.6, 0, 0.4, 2); */
	/*
	transition: color var(--duration-btn) ease-in-out;
	/ * cubic-bezier(0.76, 0, 0.24, 1); * /
	*/
}

/* !!! THIS HOVERS BOTH ICON & WORD */
.nav_logo:hover,
.nav_logo:focus {
	#id_logo_word_svg path,
	#id_logo_icon_svg path {
		/* fill: var(--grey3); */
		color: var(--grey3);
	}
	transform: scale(1.02);
}

.nav_logo a {
  text-decoration: none;
  color: var(--white);
  white-space: nowrap;
  transition: var(--duration-long);
  /* text-shadow: 0 0 .125rem var(--global-shadow-color), 0 0 .5rem rgba(0,0,0,.5); */
  /* THIS LINE RESTORES NORMAL CLICK BEHAVIOR */
	pointer-events: auto;
}

.nav_logo a:hover,
.nav_logo a:focus {
	/* text-shadow: 0 0 0rem var(--global-shadow-color); */
}

/* !!! THESE HOVER ICON & WORD INDEPENDENTLY * /
.nav_logo a:hover #id_logo_icon_svg path,
.nav_logo a:focus #id_logo_icon_svg path,
.nav_logo a:hover #id_logo_word_svg path,
.nav_logo a:focus #id_logo_word_svg path {
	/ * fill: var(--grey3); * /
	color: var(--grey3);
}
*/

#id_logo_word {
	padding-left: .5rem; /* !!! SPACING BETWEEN ICON & WORD */
}

#id_logo_icon_svg {
	width: 2.5rem;
	vertical-align: middle; /* ALTERS SVG Y PLACEMENT */
}

#id_logo_word_svg {
	width: 9.625rem;
	vertical-align: middle; /* ALTERS SVG Y PLACEMENT */
}

#id_logo_icon_svg path,
#id_logo_word_svg path {
  transition: color var(--duration-short) ease-in-out;
	/* fill: var(--white); */
	color: var(--white);
}

/* /////////////////////////////////////////////////////////////////// HAMBURGER STYLES */
#id_menuArea {
	justify-items: end;
	/* position: absolute; */
	background-attachment: fixed;

  top: 0;
  margin: auto 0; /* !!! CENTER HAMBURGER VERTICALLY */
	/*
	::: TEMP OFF :::
	width: 25%;
	right: 0;
  text-align: right;
  */

  /* THIS LINE ALLOWS CLICK THROUGH TO BACKGROUND CLOSE CLICK */
	pointer-events: none;

	/*
	background-color: var(--FPO-Green);
	*/
}

#id_menuArea > * {
  /* THIS LINE RESTORES NORMAL CLICK BEHAVIOR */
	pointer-events: auto;
}

#id_menuToggle {
  display: none; /* !!! THIS HIDES INPUT CHECKBOX */
}

.open,
.open:before,
.open:after {
  /* hamburger color 1>2 */
  width: 1.875rem;
  height: .125rem;
  display: block;
  border-radius: .125rem;
  position: relative;
  cursor: pointer;
  top: .5rem; /* !!! ADJUST Y POSITION OF ALL HAMBURGER ELEMENTS */
  font-size: 1rem;
  background-color: var(--white);
  /* box-shadow: 0 0 .125rem rgba(0, 0, 0, 1), 0 0 .5rem rgba(0, 0, 0, 0.5); */
  transition: background-color var(--duration);
}

.open:before,
.open:after {
  content: "";
  transform: rotate(0deg);
  transition: all var(--duration) ease;
}

.open:before {
  /* HAMBURGER ELEMENT 1 / TOP */
  top: -0.625rem;
}

.open:after {
  /* HAMBURGER ELEMENT 3 / BOTTOM */
  top: .5rem;
}

.menuOpen {
  /* HAMBURGER HIT AREA */
	width: 1.875rem;
	height: 1.25rem;
  display: block;
			/* PADDING IS VERY SPECIFIC TO HAMBURGER CLICK AREA DIMENSIONS */
			/* padding: 0rem; /* .5 top */
			/* MARGIN IS VERY SPECIFIC TO HAMBURGER PLACEMENT */
			/* margin: auto 0; / * 2rem : CENTERED?!?! */
  cursor: pointer;
			/* float: right; TEMP OFF  */
}

.menuOpen:hover .open,
.menuOpen:hover .open:before,
.menuOpen:hover .open:after {
  /* hamburger rollover color */
  background-color: var(--grey4);
}

.menuOpen:hover .open:before {
  /* top: -9px; */
}

.menuOpen:hover .open:after {
  /* top: 5px; */
}

.menu {
  position: fixed;
  width: var(--nav-bg-width); /* 85% 85vw !!! MENU BACKGROUND HIT AREA 1 of 2 */
  height: 100%; /* 100vh */
  z-index: -900;
  right: 0;
  top: 0;
  /* top: var(--global-nav-height); / * !!! ADJUST Y BY HEIGHT OF NAV MENU */
  background-color: var(--black);
	/* background: rgba(0, 255, 0, 0.5); / * !!! OPEN MENU BACKGROUND */
}

.menu label {
  /* !!! NAV MENU OPEN, CLOSE X BUTTON CLICK AREA */
  position: absolute;
  /*
  CLOSE X BUTTON ONLY CLICK AREA
  width: 1.875rem;
  height: 1.875rem;
  right: 2.25rem;
  top: 3.75rem;
  */
  /* FULL SCREEN BUTTON CLICK AREA */
  width: 100vw; /* !!! DEFINE MENU BACKGROUND HIT AREA */
  height: 100%;
  right: 0rem;
  top: 0rem;
  cursor: default; /* pointer hot area to close open nav menu */
  
  /* !!!
  (CLOSED) MENU HIT AREA X POSITION
	THIS NEEDS TO BE FULL WIDTH ON OPEN BUT MATCH menu WIDTH ON CLOSE
  NEEDED TO FORCE HIT AREA OUT OF FRAME.
  CONNECTED TO WIDTH OF .menu -> 85%/85vw
  */
  background-color: var(--black);

  opacity: 0;
	transform: translateX(var(--nav-bg-transform)); /* 15% !!! MENU BACKGROUND HIT AREA 2 of 2 : CAN BE 100% TO FILL CONTAINER */
	filter: blur(4rem);
	transition-property: transform, filter, opacity;
	transition-duration: var(--duration-long);
	transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  transform-origin: right; /* 0% */

  /*
  background-color: rgba(255, 0, 0, .5);
  background-color: var(--FPO-Pink);
  */
}

.menu .menuContent {
  /* THESE 3 LINES CENTER MENU CONTENT V&H */
  position: relative;
  text-align: left; /* center */
  min-width: calc(var(--global-content-width-min) - (2 * var(--global-padding))); /* THIS KEEPS MENU OPEN STATE JUST WIDE ENOUGH FOR TEXT LINKS FROM WRAPPING */
  width: 100%;
  height: 100%;

	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* space-between */

  padding: 3rem 1.875rem 1rem; /* 6.125rem OPEN MAIN NAV CONTENT TOP OFFSET BY --global-padding */

  /* THIS LINE ALLOWS CLICK THROUGH TO BACKGROUND CLOSE CLICK */
	pointer-events: none;
	/* background: rgba(255, 0, 255, 0.5); / * open menu items bg area DARK BLUE */
}

.menu ul {
  display: flex;
  /* THESE THREE LINES FLEX MENU LIST ROW * /
  justify-content: center;
  flex-wrap: none;
  flex-direction: row;
  */

	/* THESE TWO LINES FLEX MENU LIST COLUMN */
	align-content: center;
	flex-direction: column;

  padding: 0rem;
  margin: 0rem;

  /* THESE 6 LINES CENTER MENU LIST V&H * /
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	*/

  /* THIS LINE ALLOWS CLICK THROUGH TO BACKGROUND CLOSE CLICK */
	pointer-events: none;
  /* background: rgba(255, 102, 0, 0.3); / * open menu items bg area ORANGE */
}

.menu ul li {
  list-style: none;
  margin: .5rem 0rem; /* !!! VERTICAL SPACING BETWEEN OPEN MENU NAV ITEMS */
  /* THIS LINE RESTORES NORMAL CLICK BEHAVIOR */
  pointer-events: auto;
  /* background: rgba(255, 0, 255, 0.1); / * OPEN MENU NAV ITEM HOT AREA PINK */
}

.menu ul li:hover {
  /* background: var(--white); */ /* menu item bg color */
}

.menu ul li a {
	display: inline-block; /* !!! APPLIED TO NAV ITEM TEXT ELEMENTS SO THEY WOULD BE FULL WIDTH */
  color: var(--white); /* MENU ITEM TEXT COLOR */
  font-size: 1.125rem; /* 21px */
  font-weight: 300; /* Light */
  line-height: 1.25rem; /* 24px */
  letter-spacing: .22em; /* 22% */
  text-decoration: none;
	width: auto;
	/* transition: color var(--duration-btn) ease-in-out; */

	/* !!! SIBLING NAV ITEMS BLUR FILTER */
	filter: blur(none);
	transition-property: color, filter;
	transition-duration: var(--duration-btn);
	transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

.menu ul li a:hover {
  /* OVERWRITTEN BELOW IN [ .menu ul li: hover ] * /
	color: var(--grey4); / * MENU ITEM HOVER TEXT COLOR : FOR SINGLE HOVER */
  color: var(--white); /* MENU ITEM HOVER TEXT COLOR : FOR SINGLE HOVER */
}

.menu ul li a.main-nav-item-current-page {
  position: relative;
  color: var(--global-nav-item-active-color); /* CURRENT PAGE MENU ITEM TEXT COLOR */
	pointer-events: none;
}

.menu ul li a.main-nav-item-current-page::before {
	content: "";
	position: absolute;
	width: 98%; /* INTENTIONALLY UNDER 100% FOR VISUALS */
	height: .06rem;
	bottom: -0.0625rem;
	left: 0;
	background-color: var(--global-nav-item-active-color);
}

.menu ul li a.main-nav-item-blur { /* !!! ADDED VIA JS TO STYLE INACTIVE SIBLINGS */
	color: var(--grey5);
	filter: blur(.1rem);
}

/* !!! THIS CHANGES SIBLING NAV ITEMS ON HOVER */
/* WORK HERE: NAME THE A CLASSES IN ORDER TO TARGET THEM SPECIFICALLY * /
.menu ul:hover {
	/ * ON HOVER OF PARENT (.menu ul), SET SELECTED CHILD (.menu ul li) * /
	li a {
		color: var(--white);
	}

	/ * 100% ON HOVER OF PARENT (.menu ul), SET NON SELECTED CHILDREN (.menu ul li) * /
	li a:not(:hover) {
		color: var(--grey5); / * TO ALTER INACTIVE SIBLING HOVER COLOR * /
		filter: blur(.1rem); / * !!! SIBLING NAV ITEMS BLUR FILTER * /
	}

	li a.main-nav-item-current-page:is(:hover), / * hover state for current page * /
	li a.main-nav-item-current-page:not(:hover) { / * init state for current page * /
		color: var(--global-nav-item-active-color); / * TO ALTER INACTIVE SIBLING HOVER COLOR * /
		filter: blur(0rem); / * !!! prevents blur filter on current page nav item * /
	}
}
*/

.menuEffects {
	/* RESET MENU EFFECTS */
	/*
	::: TEMP OFF :::
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-long);
	transition: visibility var(--duration-long);
	*/

	/* MENU CLOSE ANIMATION */
	/* opacity: 0; / * SHOW THIS TO ALPHA ON TRANSITION */
	transform: translateX(100%);
	transition-property: transform, opacity;
	transition-duration: var(--duration-long);
	transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  transform-origin: left; /* 0% */
}

.menuEffects ul li {
  /* !!! INIT STATE OF MENU NAV ITEMS */
  transform: translateX(0%);
  /* background: rgba(255, 0, 255, 0.1); * BG FOR EACH MENU ITEM PINK */
}

#id_menuToggle:checked ~ .menuEffects {
  /* OPEN: SHOW MENU */
  opacity: 1;
  visibility: visible;

	/* MENU OPEN ANIMATION */
  transform: translateX(0%);
  transform-origin: right; /* 100% IF OMITTED, TRANSITION RETURNS TO ORIGIN POINT */
}

#id_menuToggle:checked ~ .menu label {
  /* !!!
  (OPEN) MENU HIT AREA X POSITION
	THIS NEEDS TO BE FULL WIDTH ON OPEN BUT MATCH menu WIDTH ON CLOSE
  NEEDED TO FORCE HIT AREA X TO LEFT EDGE OF FRAME.
  DISCONNECTED FROM WIDTH OF .menu -> 85%/85vw
  */
	opacity: .85; /* (OPEN) NAV MENU HIT AREA OPACITY */
	filter: blur(0);
	transform: translateX(0%); /* OPEN MENU HIT AREA X POSITION */
	transform-origin: left; /* 0% */
}

#id_menuToggle:checked ~ .menuEffects ul li {
	/* !!! ON OPEN: MENU NAV ITEMS TRANSITION */
  /* transition-delay: var(--duration); / * DELAY ALL MENU ITEMS EQUALLY */
  opacity: 1;
  transition: all var(--duration-long);
}

#id_menuToggle:checked ~ .menuEffects ul li:nth-child(1) {
  /* delay menu item 1 staggered */
  transition-delay: 0.1s;
}

#id_menuToggle:checked ~ .menuEffects ul li:nth-child(2) {
  /* delay menu item 2 staggered */
  transition-delay: 0.2s;
}

#id_menuToggle:checked ~ .menuEffects ul li:nth-child(3) {
  /* delay menu item 3 staggered */
  transition-delay: 0.3s;
}

#id_menuToggle:checked ~ .menuEffects ul li:nth-child(4) {
  /* delay menu item 3 staggered */
  transition-delay: 0.4s;
}

#id_menuToggle:checked ~ .menuEffects ul li:nth-child(5) {
  /* delay menu item 3 staggered */
  transition-delay: 0.5s;
}

#id_menuToggle:checked ~ .menuOpen .open {
  /* !!! Hamburger middle bar fades out on click to open menu */
  background-color: transparent;
	/* box-shadow: none; */
}

#id_menuToggle:checked ~ .menuOpen .open:before,
#id_menuToggle:checked ~ .menuOpen .open:after {
  /* close X: upper left x in back */
  /* close X: upper right x in front */
  content: "";
  background-color: var(--white);
  top: 0;
  right: 0;
  z-index: 1;
}

#id_menuToggle:checked ~ .menuOpen .open:before {
  /* close X: upper left x in back */
  transform: rotate(45deg);
  position: absolute;
}

#id_menuToggle:checked ~ .menuOpen .open:after {
  /* close X: upper right x in front */
  transform: rotate(-45deg);
  position: relative;
}

/* THIS ELEMENT IS HIDDEN, THIS WILL SHOW A FAINT VERSION OF IT */
/* #id_menuToggle:checked ~ .menuOpen:hover .open, */
#id_menuToggle:checked ~ .menuOpen:hover .open:before,
#id_menuToggle:checked ~ .menuOpen:hover .open:after {
   /* close X rollover color */
   background-color: var(--grey4);
}

#id_menuToggle:not(:checked) ~ .menuEffects ul li {
  /* !!! ON CLOSE: ALL MENU NAV ITEMS TRANSITION AT THE SAME TIME */
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-long);
  transform: translateX(20%);
}

/* /////////////////////////////////////////////////////////////////// OPEN MENU FOOTER */

.nav-footer-content {
  min-width: 100%;
  width: 100%;
	color: var(--white); /* !!! ONLY EDIT TO FOOTER STYLES */
	pointer-events: auto;
	/*
	background-color: var(--FPO-Gold);
	*/
}

.nav-footer-content hr {
	height: .125rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	border-width: 0rem;
	color: var(--grey8);
	background-color: var(--grey8);
}

.nav-footer-content p {
	font-size: .8125rem;
	font-weight: 300;
  letter-spacing: .11em; /* 11% */
	text-align: left;
	padding-bottom: 1.5rem;
	margin: 0rem;
	width: 100%;
}

#id_nav_footer_contact {
	line-height: 1.875rem;
}

.nav-footer-content p .title {
	color: var(--grey3);
	font-size: .625rem;
	text-transform: uppercase;
	letter-spacing: .22em; /* 22% */
}

#id_nav_footer_contact p::first-line {
/* #id_nav_footer_contact p .title::first-of-type { */
  line-height: 1.5rem;
}

#id_nav_email,
#id_nav_phone {
	word-break: break-all;
}

#id_nav_footer_contact_hours,
#id_nav_footer_contact_contact {
	display: none;
}

.nav-footer-content p > a {
	position: relative;
	color: var(--white);
	text-decoration: none;
	transition: all var(--duration-short) ease-in-out;
}

.nav-footer-content p > a::before {
	content: "";
	position: absolute;
	width: 100%;
	height: .06rem;
	bottom: 0rem;
	left: 0;
	background-color: var(--white);
	transform: scaleX(0);
	transition-property: transform, background-color;
	transition-duration: var(--duration-short);
	transition-timing-function: ease-in-out;
	transform-origin: bottom right;
}

.nav-footer-content p > a:hover::before {
	background-color: var(--grey3);
	transform: scaleX(1);
	transform-origin: bottom left; /* IF OMITTED, TRANSITION RETURNS TO ORIGIN POINT */
}

.nav-footer-content p > a:hover,
.nav-footer-content p > a:focus {
	color: var(--grey3);
	/* text-decoration: none; */
}

#id_menuToggle:checked ~ .menuEffects #id_nav_footer_contact {
  /* !!! ON OPEN: MENU NAV FOOTER TRANSITION */
  /* transition-delay: var(--duration); / * DELAY MENU NAV FOOTER */
  opacity: 1;
  transition: all var(--duration-long);
  /* delay menu item 3 staggered */
  transition-delay: 0.6s;
}

#id_menuToggle:not(:checked) ~ .menuEffects #id_nav_footer_contact {
  /* !!! ON CLOSE: MENU NAV FOOTER TRANSITION AT THE SAME TIME AS NAV ITEMS */
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-long);
  transform: translateX(20%);
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA WIDTH : 375px */
@media screen and (min-width: 375px) {
	:root {
		--global-nav-height: 5.5rem;
	}

	#id_logo_icon_svg {
		width: 3rem;
		/* height: 3rem; */
	}

	#id_logo_word_svg {
		width: 11rem;
		/*
		height: 1.5rem;
		padding-right: 1.25rem;
		*/
	}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 600px + WIDTH : 600px */
@media screen and (min-width: 600px) and (min-height: 600px) {
	/* SWAP nav-content background from solid to gradient */
	/* !!! REFERENCED IN JS handleGlobalScroll */
	.nav-container {
		background-color: rgba(0, 0, 0, 0); /* transparent; */
		background-image: linear-gradient(rgba(0,0,0, .95), rgba(0,0,0, .7), rgba(0,0,0, 0)); /* BLACK GRADIENT */
		/* background-blend-mode: multiply; */
	}

	.nav-container-solid {
		background-color: rgba(0, 0, 0, 1); /* var(--black); */
	}

	.nav-container-gradient {
		background-color: rgba(0, 0, 0, 0); /* transparent; */
		background-image: linear-gradient(rgba(0,0,0, .95), rgba(0,0,0, .7), rgba(0,0,0, 0)); /* BLACK GRADIENT */
	}

	.menu .menuContent {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}

	.nav_logo {
		/*
		filter: drop-shadow(none);
		transition-property: transform, color, filter;
		transition-duration: var(--duration-btn);
		transition-timing-function: ease-in-out; / * cubic-bezier(0.76, 0, 0.24, 1); */
		/* SCALE NAV LOGO 1 OF 2 */
		filter: drop-shadow(none);
		transform: scale(1);
		transition-property: transform, color, filter;
		transition-duration: var(--duration-btn);
		transition-timing-function: ease-in-out; /* cubic-bezier(0.76, 0, 0.24, 1); */
		/* transition-timing-function: cubic-bezier(0.6, 0, 0.4, 2); */
	}

	/* !!! THIS HOVERS BOTH ICON & WORD */
	.nav_logo:hover,
	.nav_logo:focus {
		#id_logo_word_svg path,
		#id_logo_icon_svg path {
			fill: var(--white);
			color: var(--white);
		}
		filter: drop-shadow(0rem 0rem .375rem var(--global-shadow-color));
		/*
		filter: drop-shadow(0rem 0rem .125rem var(--global-shadow-color)) drop-shadow(0rem 0rem .375rem var(--global-shadow-color));
		*/
		/* SCALE NAV LOGO 2 OF 2 */
		transform: scale(1.015);
	}

	.nav-logo-compact {
		/* transform: scale(.96); */
		/* offset x position by 5px */
		transform: scale(.96) translateX(-0.3125rem);
	}

	.nav-logo-compact:hover {
		/* transform: scale(.98); */
		/* offset x position by 5px */
		transform: scale(.975) translateX(-0.3125rem);
	}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 310px */
@media screen and (min-height: 310px) {
/* !!! THIS IS SPECIFICALLY FOR MOBILE LANDSCAPE WHERE MAX SCREEN HEIGHT IS REQUIRED */
	:root {
		--nav-container-position: fixed;
	}
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA LANDSCAPE */
@media screen and (orientation: landscape) {
/* MOBILE LANDSCAPE */

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA WIDTH : 480px + LANDSCAPE */
	@media screen and (min-width: 480px) {
	/* WORK HERE : JUST UNDER 480px WIDE BROKEN*/
/* ::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 230px + WIDTH : 480px + LANDSCAPE */
		@media screen and (min-height: 230px) {
			:root {
				--nav-bg-width: 45%;
				--nav-bg-transform: 55%;
			}
		
			.menu .menuContent {
				justify-content: flex-end;
			}
		
			.menu ul li {
				margin: .375rem 0rem; /* !!! VERTICAL SPACING BETWEEN OPEN MENU NAV ITEMS */
			}
		
			#id_nav_footer_contact {
				display: none;
			}
		}
	
/* ::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 277px + WIDTH : 480px + LANDSCAPE */
		@media screen and (min-height: 277px) {
			/*
			#id_nav_footer_contact {
				display: block;
			}
	
			#id_nav_footer_contact_contact {
				display: none;
			}
			*/
		}
		
	
/* ::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 345px + WIDTH : 480px + LANDSCAPE */
		@media screen and (min-height: 345px) {
			#id_nav_footer_contact {
				display: block;
			}

			#id_nav_footer_contact_hours {
				display: block;
			}
	
			.menu .menuContent {
				padding-bottom: 0rem;
			}
		}
		
/* ::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 360px + WIDTH : 480px + LANDSCAPE */
		@media screen and (min-height: 360px) {	
			.menu .menuContent {
				justify-content: center;
			}
		}
	}



/* ::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 320px + LANDSCAPE */
	@media screen and (min-height: 320px) {

/* ::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 320px + WIDTH : 700px + LANDSCAPE */
		@media screen and (min-width: 700px) {
			:root {
				--nav-bg-width: 40%;
				--nav-bg-transform: 60%;
			}
		}
	
/* ::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 320px + WIDTH : 800px + LANDSCAPE */
		@media screen and (min-width: 800px) {
			:root {
				--nav-bg-width: 35%;
				--nav-bg-transform: 65%;
			}
		}

/* ::::::::::::::::::::::::::::::::::: MEDIA WIDTH : 601px + HEIGHT : 500px + LANDSCAPE */
		@media screen and (min-width: 601px) and (min-height: 500px) {
			.menu .menuContent {
				justify-content: flex-end;
				padding-bottom: 0rem;
			}

			#id_nav_footer_contact_contact {
				display: block;
			}
		}

/* ::::::::::::::::::::::::::::::::::: MEDIA WIDTH : 601px + HEIGHT : 600px + LANDSCAPE */
		@media screen and (min-width: 601px) and (min-height: 600px) {
			#id_nav_footer_contact hr {
				margin-top: 1.5rem;
				margin-bottom: 2rem;
			}

			.menu ul li {
				margin: .75rem 0rem; /* !!! VERTICAL SPACING BETWEEN OPEN MENU NAV ITEMS */
			}

			.menu ul li a {
				font-size: 1.5rem; /* 24px */
				line-height: 1.75rem; /* 28px */
			}
		}

/* ::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 320px + WIDTH : 801px + LANDSCAPE */
		/* WITH ROW NAV ITEMS */
		@media screen and (min-width: 6801px) {
			:root {
				--nav-bg-width: 100%;
				--nav-bg-transform: 60%;
			}
	
			.menu {
				/* background-color: rgba(0, 0, 0, .85); */
			}
	
			.menu label {
				/* HIT AREA */
				height: var(--nav-bg-width);
				transform: translateY(0%); /* 15% !!! MENU BACKGROUND HIT AREA 2 of 2 : CAN BE 100% TO FILL CONTAINER */
				transform-origin: top; /* 0% */
				background-color: rgba(0, 0, 0, .85);
			}
	
			.menu .menuContent {
				padding-bottom: 2rem; /* 6.25rem */
			}
	
			.menu ul {
				align-content: center;
				flex-direction: row;
				margin: auto auto 0rem; /* CENTER VERTICALLY & HORIZONTALLY */
			}
	
			.menu ul li {
				margin: 0rem 1rem; /* !!! HORIZONTAL SPACING BETWEEN OPEN MENU NAV ITEMS */
			}
	
			.menu ul li a {
				font-size: 1.375rem; /* 21px */
				line-height: 1.5rem; /* 24px */
			}

			.menuEffects {
				transform: translateY(-100%);
				transform-origin: top; /* 0% */
			}
	
			.menuEffects ul li {
				/* !!! INIT STATE OF MENU NAV ITEMS */
				transform: translateY(0%);
				/* background: rgba(255, 0, 255, 0.1); * BG FOR EACH MENU ITEM PINK */
			}
	
			#id_menuToggle:checked ~ .menuEffects {
				/* MENU OPEN ANIMATION */
				transform: translateY(-60%); /* -60% -16.5rem */
				transform-origin: top; /* 100% IF OMITTED, TRANSITION RETURNS TO ORIGIN POINT */
			}
	
			#id_menuToggle:checked ~ .menu label {
				/* !!!
				(OPEN) MENU HIT AREA X POSITION
				THIS NEEDS TO BE FULL WIDTH ON OPEN BUT MATCH menu WIDTH ON CLOSE
				NEEDED TO FORCE HIT AREA X TO LEFT EDGE OF FRAME.
				DISCONNECTED FROM WIDTH OF .menu -> 85%/85vw
				*/
				opacity: .85; /* (OPEN) NAV MENU HIT AREA OPACITY */
				filter: blur(0);
				transform: translateY(60%); /* 55% 16.5rem OPEN MENU HIT AREA X POSITION */
				transform-origin: top; /* 0% */
			}
	
			#id_menuToggle:not(:checked) ~ .menuEffects ul li {
				/* !!! ON CLOSE: ALL MENU NAV ITEMS TRANSITION AT THE SAME TIME */
				transform: translateY(-20%);
			}

			#id_nav_footer_contact {
				display: none;
			}
		}
	
/* ::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 320px + WIDTH : 810px + LANDSCAPE */
		/* WITH ROW NAV ITEMS & NAV FOOTER CONTACT */
		@media screen and (min-width: 6810px) {
			.menu .menuContent {
				padding-bottom: 1rem; /* 6.25rem */
			}
	
			#id_menuToggle:checked ~ .menuEffects {
				/* MENU OPEN ANIMATION */
				transform: translateY(-20%); /* -60% -16.5rem */
			}
	
			#id_menuToggle:checked ~ .menu label {
				/* !!!
				(OPEN) MENU HIT AREA X POSITION
				THIS NEEDS TO BE FULL WIDTH ON OPEN BUT MATCH menu WIDTH ON CLOSE
				NEEDED TO FORCE HIT AREA X TO LEFT EDGE OF FRAME.
				DISCONNECTED FROM WIDTH OF .menu -> 85%/85vw
				*/
				transform: translateY(20%); /* 60% 16.5rem OPEN MENU HIT AREA X POSITION */
			}
	
			#id_nav_footer_contact {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				flex-wrap: wrap;
				padding-top: .5rem;
				/*
				background-color: var(--FPO-Gold);
				*/
			}
	
			#id_nav_footer_contact hr {
				width: 100%;
				margin-top: 1rem;
				margin-bottom: 1rem;
			}
	
			#id_nav_footer_contact_hours,
			#id_nav_footer_contact_contact {
				/* width: initial; */
				display: block;
				width: 30%;
			}
	
			#id_menuToggle:not(:checked) ~ .menuEffects #id_nav_footer_contact {
				/* !!! ON CLOSE: MENU NAV FOOTER TRANSITION AT THE SAME TIME AS NAV ITEMS */
				transform: translateY(-20%);
			}
		}
	}
}


/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA PORTRAIT */
@media screen and (orientation: portrait) {
/* MOBILE PORTRAIT */

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 387px + PORTRAIT */
	@media screen and (min-height: 387px) {
		#id_nav_footer_contact_hours {
			display: block;
		}
	}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 459px + PORTRAIT */
	@media screen and (min-height: 459px) {
		.menu ul li {
			margin: .625rem 0rem; /* !!! VERTICAL SPACING BETWEEN OPEN MENU NAV ITEMS */
		}

		.menu ul li a {
			font-size: 1.3125rem; /* 21px */
			line-height: 1.5rem; /* 24px */
		}
	}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 540px + PORTRAIT */
	@media screen and (min-height: 540px) {
		.menu .menuContent {
			padding-bottom: 0rem;
		}

		#id_nav_footer_contact_contact {
			display: block;
		}
	}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 600px + PORTRAIT */
	@media screen and (min-height: 600px) {
		#id_nav_footer_contact hr {
			margin-top: 1.5rem;
			margin-bottom: 2rem;
		}
	}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 631px + PORTRAIT */
	@media screen and (min-height: 631px) {
		.menu ul li a {
			font-size: 1.5rem; /* 24px */
			line-height: 1.75rem; /* 28px */
		}
	}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 671px + PORTRAIT */
	@media screen and (min-height: 671px) {
		.menu .menuContent {
			padding-bottom: .5rem;
		}

		.menu ul li {
			margin: .75rem 0rem; /* !!! VERTICAL SPACING BETWEEN OPEN MENU NAV ITEMS */
		}
	}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 715px + PORTRAIT */
	@media screen and (min-height: 715px) {
		.menu ul li {
			margin: 1rem 0rem; /* !!! VERTICAL SPACING BETWEEN OPEN MENU NAV ITEMS */
		}
	
		.menu ul li a {
			font-size: 1.875rem; /* 30px */
			line-height: 2rem; /* 32px */
		}
	}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA HEIGHT : 745px + PORTRAIT */
	@media screen and (min-height: 745px) {
		.menu .menuContent {
			padding-bottom: 1rem;
		}
	
		#id_nav_footer_contact hr {
			margin-top: 2rem;
			margin-bottom: 2.75rem;
		}
	}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA WIDTH : 450px + PORTRAIT */
	@media screen and (min-width: 450px) {
		:root {
			--nav-bg-width: 60%;
			--nav-bg-transform: 40%;
		}
	}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA WIDTH : 600px + PORTRAIT */
	@media screen and (min-width: 600px) and (min-height: 601px) {
	/* TABLET / LAPTOP / DESKTOP PORTRAIT */
/* ::::::::::::::::::::::::::::::::::: MEDIA WIDTH : 600px + HEIGHT : 601px + PORTRAIT */
		:root {
			--nav-bg-width: 50%;
			--nav-bg-transform: 50%;
		}

		.menu .menuContent {
			justify-content: center;
		}
	}

}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA + WIDTH : 1000px */
@media screen and (min-width: 1000px) {
/* WITH ROW NAV ITEMS */
/*
WORK HERE
- footer
	- 600, 800, 1000, 1200 breakpoints
	- nav content horizontal spacing between footer-content
	- footer nav links - bump up size

- hover/focus underline / y-roll?

- translateX / translateY depending on portrait/landscape
	.menuEffects {
	.menuEffects ul li {
*/

	:root {
		--nav-bg-width: 100%;
		--nav-bg-transform: 60%;
		--nav-input-hidden: true;
	}

	#id_menuToggle {
		display: none; /* !!! THIS HIDES INPUT CHECKBOX */
	}

	#id_menuArea label {
		display: none; /* !!! THIS HIDES HAMBURGER */
	}

	.menu {
	  height: var(--global-nav-height); /* !!! SET TO NAV HEIGHT */

		/* !!! 3 lines below 1 of 2: CONSTRAINS MENU WIDTH, ALIGNS RIGHT SIDE TO MAX CONTENT WIDTH */
		display: flex;
		flex-direction: row;
		justify-content: center;
		/* background-color: rgba(0, 0, 0, .25); */
		background-color: transparent;
	}

	.menu label {
		/* HIT AREA */
		display: none;
		height: var(--global-nav-height); /* !!! SET TO NAV HEIGHT */
		filter: blur(0);
		transform: translateY(0%); /* 15% !!! MENU BACKGROUND HIT AREA 2 of 2 : CAN BE 100% TO FILL CONTAINER */
		transform-origin: top; /* 0% */
	}

	.menu .menuContent {
		width: var(--global-content-width-max); /* !!! 2 of 2: CONSTRAINS MENU WIDTH, ALIGNS RIGHT SIDE TO MAX CONTENT WIDTH */
		padding: 0rem var(--global-padding);
	}

	.menu ul {
		margin: auto 0;
		justify-content: end;
		flex-direction: row;
	}

	.menu ul li {
		margin: 0rem 0rem 0rem 2rem; /* !!! HORIZONTAL SPACING BETWEEN OPEN MENU NAV ITEMS */
		transform: translateX(0%);
	}

	.menu ul li a {
		/*
		font-size: 1rem; / * 16px * /
		line-height: 1.25rem; / * 20px * /
		*/
		font-size: .75rem; /* 12px */
		line-height: 1rem; /* 16px */
	}

	.menu ul li a.main-nav-item-current-page::before {
		width: 100%;
		bottom: -0.125rem;
	}

	.menu ul li a.main-nav-item-blur { /* !!! ADDED VIA JS TO STYLE INACTIVE SIBLINGS */
		color: var(--grey4);
		filter: blur(.05rem);
	}

	/* !!! THIS CHANGES SIBLING NAV ITEMS ON HOVER * /
	.menu ul:hover {
		/ * ON HOVER OF PARENT (.menu ul), SET SELECTED CHILD (.menu ul li) * /
		li a {
			color: var(--white);
		}
	
		/ * ON HOVER OF PARENT (.menu ul), SET NON SELECTED CHILDREN (.menu ul li) * /
		li a:not(:hover) {
			color: var(--grey5);
			filter: blur(.05rem); / * !!! SIBLING NAV ITEMS BLUR FILTER * /
		}
	}
	*/

	.menuEffects {
		transform: translateY(0%);
		transform-origin: top; /* 0% */
	}

	.menuEffects ul li {
		/* !!! INIT STATE OF MENU NAV ITEMS */
		transform: translateY(0%);
	}

/* WORK HERE
- mobile with menu open, scale to 1000px+, menu items jump x, alpha?
	#id_menuToggle:checked ~ .menu label {
*/

	#id_menuToggle:checked ~ .menuEffects {
		/* MENU OPEN ANIMATION */
		transform-origin: top; /* 100% IF OMITTED, TRANSITION RETURNS TO ORIGIN POINT */
	}

	#id_menuToggle:checked ~ .menu label {
		/* !!!
		(OPEN) MENU HIT AREA X POSITION
		THIS NEEDS TO BE FULL WIDTH ON OPEN BUT MATCH menu WIDTH ON CLOSE
		NEEDED TO FORCE HIT AREA X TO LEFT EDGE OF FRAME.
		DISCONNECTED FROM WIDTH OF .menu -> 85%/85vw
		*/
		transform: translateY(0%); /* 55% 16.5rem OPEN MENU HIT AREA X POSITION */
		transform-origin: top; /* 0% */
	}

	#id_menuToggle:checked ~ .menuEffects ul li:nth-child(1),
	#id_menuToggle:checked ~ .menuEffects ul li:nth-child(2),
	#id_menuToggle:checked ~ .menuEffects ul li:nth-child(3),
	#id_menuToggle:checked ~ .menuEffects ul li:nth-child(4),
	#id_menuToggle:checked ~ .menuEffects ul li:nth-child(5) {
		/* delay menu item 3 staggered */
		transition-delay: none;
		transition-property: none; /* !!! CLEARS NAV ITEMS SCALING TRANSFORM JUMP */
	}

	#id_menuToggle:not(:checked) ~ .menuEffects ul li {
		/* !!! ON CLOSE: ALL MENU NAV ITEMS TRANSITION AT THE SAME TIME */
		opacity: 1; /* !!! NAV ITEMS OPACITY */
		transform: translateX(0%); /* !!! RESETS NAV ITEMS TO THEIR ORIGINAL X POSITION SO THEY PROPERLY ALIGN ON RIGHT SIDE */
		visibility: visible;
	}

	#id_nav_footer_contact {
		display: none;
	}
}

#id_logo { /* WORK HERE : FPO */
	background-color: var(--FPO-logo-bg);
}