.nav_container {
	position: absolute; /* THIS WILL SCROLL NAV */
	/* position: fixed; * THIS WILL ATTACH NAV */
	display: flex;
	flex-wrap: none;
	z-index: 999;
	width: 100%;
	top: 0;
	clear: both;

	/* THESE ATTACH NAV */
	height: 2rem;
	min-height: 2rem;
	padding: 2.5rem 0;

	/* THESE TWO ARE TEMP WORKSAROUNDS */
  transition: var(--duration-long);
	opacity: 1;
	background-blend-mode: multiply;
	/* background: rgba(0, 0, 0, .2); * FULL WIDTH NAV BG 40% BLACK TRANSPARENT */
	/*background-image: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.3), rgba(0,0,0, 0)); * GREY GRADIENT */
  /* box-shadow: 0 0 .25rem .25rem rgba(0, 0, 0, 0.1), 0 0 .125rem .125rem rgba(0, 0, 0, 0.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_container--hover,
.nav_container--focus {
	opacity: 1;
	/* background: var(--white); */
}

.nav_container-bggk {
	/* background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); * BLACK GRADIENT */
	background-image: linear-gradient(rgba(0,0,0, 1), rgba(51,51,51, .7), rgba(51,51,51, 0)); /* GREY GRADIENT */
}

.nav_container-bggw {
	/* background: rgba(255, 255, 255, .7); * WHITE FILL */
	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); /* WHITE GRADIENT */
}

.nav_logo {
  /* NEW */
	position: absolute;
  z-index: 999;
  width: 75%;
  top: 0;

  /* OLD */
  /* flex: 50%; */

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

.nav_logo p {
  /* background-color: #c6c6c6; */
  /* width: 32%; */
  letter-spacing: .5px;
  /* text-shadow: 0 0 .3rem var(--text-shadow-color); */
}

.nav_logo p > a {
  position: relative;
  text-decoration: none;
  white-space: nowrap;
  /* color: var(--white); hidden to add/toggle light/dark mode via js */
  transition: var(--duration-long);
  text-shadow: 0 0 .125rem var(--text-shadow-color), 0 0 .5rem rgba(0,0,0,.5);
  /* THIS LINE RESTORES NORMAL CLICK BEHAVIOR */
	pointer-events: auto;
}

.nav_logo_light {
  color: var(--white);
}

.nav_logo_dark {
  color: var(--grey4);
}

.nav_logo p > a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0rem;
  left: 0;
  /* background-color: var(--white); hidden to add/toggle light/dark mode via js */
  visibility: hidden;
  transition: all var(--duration) ease-in-out 0s;
  transform: scaleX(0);
  transform-origin: left;
}

.nav_logo_light::before {
  background-color: var(--white);
}

.nav_logo_dark::before {
  background-color: var(--grey4);
}

.nav_logo p > a:hover::before {
  background-color: var(--highlight);
  visibility: visible;
  transform: scaleX(1);
}

.nav_logo p > a:hover,
.nav_logo p > a:focus {
  color: var(--highlight);
  text-decoration: none;
  text-shadow: 0 0 0rem var(--text-shadow-color);
}

/* ********** HAMBURGER STYLES BELOW ********** */

#menuArea {
  /* NEW */
	position: absolute;
	background-attachment: fixed;

  z-index: 999;
  width: 25%;
  top: 0;
  right: 0;
  
  /* OLD */
  /* flex: 50%; */
  text-align: right;

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

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

input {
  display: none;
}

.open,
.open:before,
.open:after {
  /* hamburger color 1>2 */
  /* background-color: var(--white); hidden to add/toggle light/dark mode via js */
  width: 2rem;
  height: .15rem;
  display: block;
  border-radius: .125rem;
  position: relative;
  cursor: pointer;
  top: 0rem;
  font-size: 1rem;
  box-shadow: 0 0 .125rem rgba(0, 0, 0, 1), 0 0 .5rem rgba(0, 0, 0, 0.5);
  transition: background-color var(--duration);
}

.nav_ham_light,
.nav_ham_light:before,
.nav_ham_light:after {
  background-color: var(--white);
}

.nav_ham_dark,
.nav_ham_dark:before,
.nav_ham_dark:after {
  background-color: var(--grey4);
}

.open:before {
  /* hamburger color 2>1 */
  content: "";
  top: -0.625rem; /* og: -.75rem / .8rem*/
  transform: rotate(0deg);
  transition: all var(--duration) ease;
}

.open:after {
  /* hamburger color 3 */
  content: "";
  top: .375rem; /* og .5rem / 1.4rem */
  transform: rotate(0deg);
  transition: all var(--duration) ease;
}

.menuOpen {
  /* ORIGINAL LARGE AREA */
  /*
  width: 1.5rem;
  height: 1.25rem;
  display: block;
  padding: 3.9375rem;
  */
  /* HAMBURGER AREA */
	width: 2rem;
	height: 1.25rem;
  display: block;
	/* PADDING IS VERY SPECIFIC TO HAMBURGER CLICK AREA DIMENSIONS */
	padding: .5rem 0rem 0rem 0rem;
	/* MARGIN IS VERY SPECIFIC TO HAMBURGER PLACEMENT */
	margin: 2rem;
  cursor: pointer;
  float: right;
  /* background: var(--FPO-Pink); * Hamburger hot area */
}

.menuOpen:hover .open,
.menuOpen:hover .open:before,
.menuOpen:hover .open:after {
  /* hamburger rollover color */
  background-color: var(--highlight);
  box-shadow: 0 0 0rem 0rem rgba(0, 0, 0, 0), 0 0 0rem 0rem rgba(0, 0, 0, 0);
}

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

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

.menu {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(51, 51, 51, 0.95); /* 51 = #333333 menu bg color DARK GREY */
  /* background: rgba(0, 204, 255, 0.95); * 0 204 255 = #00ccff menu bg color BLUE */
}

.menu label {
  /* close X click area */
  position: absolute;
  /* CLOSE X BUTTON CLICK AREA */
  /*
  width: 1.875rem;
  height: 1.875rem;
  right: 2.25rem;
  top: 3.75rem;
  */
  /* FULL SCREEN BUTTON CLICK AREA */
  width: 100vw; /* 1.875rem; */
  height: 100vh; /* 1.875rem; */
  right: 0rem;
  top: 0rem;
  cursor: pointer;
  /* background: rgba(255, 0, 255, 0.1); * OPEN MENU CLICK AREA PINK */
}

.menu .menuContent {
  /* THESE 3 LINES CENTER MENU CONTENT V&H */
  position: relative;
  text-align: center;
  height: 100%;

  font-size: 3rem;

  /* 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 {
  /* THESE FOUR LINES FLEX MENU LIST ROW *
  display: flex;
  justify-content: center;
  flex-wrap: none;
  flex-direction: row;
  */

	/* THESE TWO LINES FLEX MENU LIST COLUMN */
  display: flex;
	align-content: center;
	flex-direction: column;
  padding: 0;
  line-height: 4rem;

  /* 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: .25rem 0rem;

  /* 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 a {
  color: var(--white); /* MENU ITEM TEXT COLOR */
  font-family: "Quicksand", sans-serif;
  /* letter-spacing: .5rem; */
  /* text-transform: uppercase; */
  text-decoration: none;
  padding: 0rem 1rem;
  transition: color var(--duration);
}

.menu ul li a:hover {
  color: var(--highlight); /* MENU ITEM HOVER TEXT COLOR */
}

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

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

.menuEffects ul li {
  transform: translateY(0%);
  /* transition: all var(--duration-long); */
  /* background: rgba(255, 0, 255, 0.1); * BG FOR EACH MENU ITEM PINK */
}

#menuToggle:checked ~ .menuEffects {
  /* OPEN: show menu */
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-long);
}

#menuToggle:checked ~ .menuEffects ul li {
  /* delay all menu items equally */
  /* transition-delay: var(--duration); */
  opacity: 1;
  transition: all var(--duration-long);
}

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

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

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

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

#menuToggle:checked ~ .menuOpen .open:before {
  /* close X: upper left x in back */
  content: "";
  background-color: var(--white);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

#menuToggle:checked ~ .menuOpen .open:after {
  /* close X: upper right x in front */
  content: "";
  background-color: var(--white);
  transform: rotate(-45deg);
  position: relative;
  top: 0;
  right: 0;
  z-index: 1;
}

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

#menuToggle:not(:checked) ~ .menuEffects ul li {
  /* CLOSE: all menu items transition at the same time */
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-long);
  transform: translateY(-20%);
}

/* WORK HERE TO FIND CORRECT BREAKPOINT FOR NAV GRADIENT */
@media
	screen and (min-width: 450px) and (orientation: portrait),
	screen and (min-width: 800px) and (orientation: landscape)
{
	.nav_container {
		/* position: fixed; */
		height: 3rem;
		min-height: 3rem;
		padding: 4rem 0;

		/* background-image: none;
		background: rgba(0,0,0,.4); * FULL WIDTH NAV BG 40% BLACK TRANSPARENT */
	}

	.nav_logo {
		/* position: fixed; */
	  padding: 1.5rem 0 1.5rem 3rem;
		font-weight: 400;

		/* background-attachment: fixed; */
	}

	#menuArea {
		/* position: fixed; */
		/* background-attachment: fixed; */
	}

	.open,
	.open:before,
	.open:after {
		/* hamburger color 1>2 */
		/* background-color: var(--white); hidden to add/toggle light/dark mode via js */
		width: 3rem;
		height: .2rem;
		display: block;
		border-radius: .125rem;
		position: relative;
		cursor: pointer;
		top: 0rem;
		font-size: 1rem;
		transition: background-color var(--duration);
	}

	.open:before {
		/* hamburger color 2>1 */
		content: "";
		top: -0.75rem; /* og: -.75rem / .8rem*/
		transform: rotate(0deg);
		transition: all var(--duration) ease;
	}

	.open:after {
		/* hamburger color 3 */
		content: "";
		top: .5rem; /* og .5rem / 1.4rem */
		transform: rotate(0deg);
		transition: all var(--duration) ease;
	}

	.menuOpen {
		/* HAMBURGER AREA */
		width: 3rem;
		height: 2rem;
		display: block;
		/* PADDING IS VERY SPECIFIC TO HAMBURGER CLICK AREA DIMENSIONS */
		padding: 1rem 3rem 1.25rem 0rem;
		/* MARGIN IS VERY SPECIFIC TO HAMBURGER PLACEMENT */
		margin: 3rem;
	}
}

/*
@media screen and (orientation: landscape) {
	body::before {
		content: "g-nav media query (landscape)";
		font-weight: bold;
		display: block;
		text-align: center;
		background: rgba(255, 255, 0, 0.9);
		position: fixed;
		top: 100;
		left: 0;
		right: 0;
		z-index: 9999;
	}
}

@media screen and (orientation: portrait) {
	body::before {
		content: "g-nav media query (portrait)";
		font-weight: bold;
		display: block;
		text-align: center;
		background: rgba(0, 255, 255, 0.9);
		position: fixed;
		top: 100;
		left: 0;
		right: 0;
		z-index: 9999;
	}
}
*/

@media screen and (orientation: landscape) {
	.menu ul {
		/* THIS LINE FLEX MENU LIST ROW */
		flex-direction: row;
  }
}

@media screen and (orientation: portrait) {
  .menu ul {
	  /* THESE TWO LINES FLEX MENU LIST COLUMN */
    align-content: center;
    flex-direction: column;
  }
}

/* SMALLEST PHONE LANDSCAPE ONLY */
@media screen and (max-width: 599px) and (orientation: landscape) {
	.menu .menuContent {
		font-size: 2.5rem;
	}
}

@media
	screen and (min-width: 375px) and (orientation: portrait),
	screen and (min-width: 600px) and (orientation: landscape) {
	.menu .menuContent {
		font-size: 3rem;
	}

	.menu ul {
		line-height: 4rem;
	}
}

/* IF TABLET SCALE UP NAV ITEMS */
@media
	screen and (min-width: 500px) and (orientation: portrait),
	screen and (min-width: 1000px) and (orientation: landscape) {
	.menu .menuContent {
		font-size: 4.5rem;
	}

	.menu ul {
		line-height: 6rem;
	}
}

/* IF LARGE TABLET, SCALE UP NAV ITEMS */
@media
	screen and (min-width: 900px) and (orientation: portrait),
	screen and (min-width: 1200px) and (orientation: landscape) {
	.menu .menuContent {
		font-size: 6rem;
	}

	.menu ul {
		line-height: 8rem;
	}
}

@media screen and (max-width: 374px) and (orientation: portrait) {
	.menu ul li {
		margin: 1rem 0rem;
	}
}

@media screen and (max-width: 600px) and (orientation: landscape) {
	.menu ul li {
		margin: 0rem .25rem;
	}
}

@media screen and (min-width: 375px) and (max-width: 767px) and (orientation: portrait) {
	.menu ul li {
		margin: 1rem 0rem;
	}
}

@media screen and (min-width: 601px) and (max-width: 939px) and (orientation: landscape) {
	.menu ul li {
		margin: 0rem .5rem;
	}
}

@media screen and (min-width: 768px) and (orientation: portrait) {
  .menu ul li {
    margin: 1rem 0rem;
  }
}

@media screen and (min-width: 940px) and (orientation: landscape) {
  .menu ul li {
    margin: 0rem 1.5rem;
  }
}

/*
1365 on project pages content
1111 on home page content
1023 is for smallest tablet
*/
@media
	screen and (min-width: 1023px) and (orientation: portrait),
	screen and (min-width: 1023px) and (orientation: landscape) {
	.nav_container {
		position: fixed; /* THIS WILL ATTACH NAV */
		height: 5.25rem; /* 5.25rem */
		min-height: 4.125rem; /* 4.125rem */
		padding: 4rem 0; /* 5rem 0 */
	}
	/* nav_logo_dark */
	.nav_logo p > a {
	  color: var(--white); /* --grey4 */
	}
	/* nav_ham_dark */
	.open,
	.open:before,
	.open:after {
  	background-color: var(--white); /* --grey4 */
  }
}