/* CSS Document for Screens */
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i|Nunito:300,300i,600,800');

/* VARIABLES */
/* VARIABLES */
/* VARIABLES */
/* VARIABLES */
:root{  /* variables used throughout the sheet; change here for easy calculations and updates. */
	--accent-color: #5ba2d9; /*#5ba2d9, #1daeec, #5ea3d7, #305775*/
	--nav-background-color: #333;
	--nav-text-color-1: #fff;
	--nav-text-color-2: #999; 
  	--shadow-1: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
	
	--font-weight-regular: 300;
	--font-weight-regular-italic: 300i;
	--font-weight-bold: 600;
	--font-weight-heavy: 800;
	
	--layout-gutter: 25px;
	--layout-margin-top: 50px;
	--layout-margin-right: 100px;
	--layout-margin-bottom: 0px;
	--layout-margin-left: 100px;
	
	--nav-icon-size: 3.6rem;  /* how big is the main icon; this governs all other sizes and is changed by screen size */
	
	--nav-font-size-title: calc( var(--nav-icon-size) * 0.35 );
	--nav-font-size-main: calc( var(--nav-icon-size) * 0.3 );  /* nav list headers */
	--nav-font-size-sub: calc( var(--nav-icon-size) * 0.25 );    /* nav list sub-items */
	
	--nav-pad-top: calc( var(--nav-icon-size) * 0.25 );  /* position entire nav assembly from page top */
	--nav-pad-left: 0;  /* position entire nav assembly from page left */
	
	--nav-radius: calc( var(--nav-icon-size) * 0.2 );  /* corner radius for nav button and flyout list. */
	--nav-button-width: calc( var(--nav-icon-size) * 3.5 );  /* make space for the title text (*4.75 with icon) .*/
	
	--nav-hamburger-width: calc( var(--nav-icon-size) * 0.75 );
	--nav-hamburger-stroke: calc( var(--nav-icon-size) * 0.1 );
	--nav-hamburger-pad-top: calc( var(--nav-icon-size) * -0.38 );  /* position hamburger menu icon from top of navigation assembly */
	--nav-hamburger-pad-left: calc( var(--nav-icon-size) * 0.25 );  /* position hamburger menu icon from left of navigation assembly */;
	
	--nav-icon-pad-top: 0;  /* position icon (and button and list) from top of navigation assembly */
	--nav-icon-pad-left: calc( var(--nav-hamburger-pad-left) + var(--nav-hamburger-width) + calc(var(--nav-icon-size)*0.25) );  /* position main icon from left of navigation assembly */
	--nav-title-pad-left: var(--nav-icon-pad-left);  /* inden title (& all menu) past the hamburger */
	/*--nav-title-pad-left: calc( var(--nav-icon-pad-left) + var(--nav-icon-size) + calc(var(--nav-icon-size)*0.25) );  /* inden title (& all menu) past the icon */
	--nav-title-pad-top: calc( var(--nav-icon-size) * 0.2 );  /* move title down to center in button */
	
	--nav-list-width: calc( var(--nav-icon-size) * 3.75 );  /* make space for nav list text*/
	--nav-list-pad-top: calc( var(--nav-icon-size) * 1.0 );  /* position nav list below the title */
	--nav-list-pad-right: calc( var(--nav-icon-size) * 0.5 );
	--nav-list-pad-bottom: calc( var(--nav-icon-size) * 1.0 );  /* pad background below nav list */
	--nav-list-pad-left: var(--nav-title-pad-left);  /* indent nav list from page left */
	--nav-list-sub-pad-left: calc( var(--nav-icon-size) * 0.75 );  /* indent sub-nav from main nav list */
	--nav-total-width: calc( var(--nav-list-width) + var(--nav-list-pad-left) + var(--nav-list-pad-right) );  /* width to hide full nav */
	
	--nav-transition-time: 0.8s;
	--nav-transition-curve-abrupt: cubic-bezier(0.75,0.2,0.05,1);  /* first animations we notice */
	--nav-transition-curve-delay: cubic-bezier(0.9,0,0.5,1);  /* second animations we notice */
	
	--parallax-background: ;
	--parallax-foreground: #e7e7e7;
}


html { background-color: #fff; }
body { font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 300; color: #555; margin: 0; padding: 0; }
#page { max-width: 1200px; margin: 0 auto; position: relative; }

/* text */
h1 { margin: 0 0 0.1em 0; font-size: 4.0em; font-weight: var(--font-weight-heavy); line-height: 1em; color: #f1f1f1; text-transform: lowercase; }
h2 { margin: 0; font-size: 2.6em; font-weight: var(--font-weight-bold); line-height: 1em; color: var(--accent-color); text-transform: uppercase; }
h3 { margin: 0 0 0.5em 0; font-size: 1.8em; font-weight: var(--font-weight-bold); color: var(--accent-color); text-transform: lowercase; }
.resumetext h3 { margin-top: 1.5em; }
.resumetext h3.top { margin-top: 0; }
h4 { margin: 0 0 0.5em 0; font-size: 1.3em; font-weight: var(--font-weight-bold); line-height: 1.25em; text-transform: first; }
.resumetext h4 { margin-top: 1em; line-height: 1.5em; }
h5 { margin: 0em 0 0.5em 0; font-size: 1.1em; font-weight: var(--font-weight-regular); text-transform: none; }
.resumetext h5.employer { margin: -0.5em 0em 0.5em 0em ; }
p { font-family: 'Nunito Sans', sans-serif; margin: 0 0 1em 0; text-align: left; }
p.caption { margin: 0.5em 0 0 0; }
p.captionontop { font-size: 0.9em; margin: 0; padding-left: 0.5em; position: relative; top: -2.0em; color: #eee; background-color: rgba(0,0,0,0.16) ; }/*
p.captionontop { font-size: 0.9em; margin: -1.0em 0 -1.0em 0; padding: 0 0 0.5em 0; position: relative; top: -1.2em; color: #eee; background-color: rgba(0,0,0,0.16) ; }*/
p.captionbox { font-size: 0.9em; padding: 0.5em; position: relative; top: 0; color: #5ba2d9; background-color: #fff; }
section.main p.caption { margin-right: 50%; }
.resumetext p { margin: 0em 0em 0.7em 2em; clear: both; text-align: left; }

a { color: #2c5475; }
a.btn { display: inline-block; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); transition: all 200ms ease; }
a.btntxt { padding: 4px 8px; text-decoration: none; background-color: #ddd; color: #fff; }
a.btn:hover { z-index: 2; transform: scale(1.05); box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); }
a.btntxt:hover { background-color: #5ba2d9; }
a.btn:active { transform: scale(0.95); background-color: none; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
header a { color: #f8f8f8; }

.blueunderline { border-bottom: 2px solid var(--accent-color); margin-bottom: 25px; }
.righttab { margin-right: 0px; position: relative; float: right; text-align: right; }
.italic { font-weight: var(--font-weight-regular-italic); font-style: italic; }
.emphasize { font-weight: var(--font-weight-bold); }

/* header/footer */
header { height: 200px; background: none; position: relative; border-top: 2px solid #eee; }
header div.hero { position: absolute; width: 85%; bottom: 15px; left: 110px; }
header h1 { font-size: 6em; position: absolute; bottom: 0; }
header h2 { position: absolute; z-index: 1; bottom: 0; }
footer { font-size: 0.8em; margin: 40px 0 20px 110px; color: #999; height: 40px; }
footer div.content { display: block; color: #999; }

/* section--all */
section::after { content: ''; display: block; clear: both; }
video.vidsmall { display: none; }
video.vidbig { display: block; width: 100%; }
audio { width: 100%; }
.fullsize { width: 100%; height: auto; }
.fullsize img { height: 100%; width: auto; }
.highlightsquare { display: none; }
.highlighthorizontal { display: block; }
.figurevertical { display: block; }
.figuresquare { display: none; }
.circle { width: 20vw; height: 20vw; border-radius: 50%; }

/* section--main */
section.container { margin: 10px; background-color: none /*was#fafafa*/; /* box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);*/ }
section.main { margin: 25px 100px 0px 100px; }
section.main img { width: 100%; height: auto; overflow: hidden; }
section.main div.content { margin: 0; }
section.main div.resume { margin-right: -50px; }
.resumetext { 
display: block; margin: 0 50px 0 0; 
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
			   }
.resumedoublecolumn { display: block; }
.resumesinglecolumn { display: none; }
.resumepromoted { background-color: rgba(91, 162, 217, 0.07); background-opacity: 0.15; margin: 0 -10px -5px -10px; padding: 0 10px 5px 10px; }
div.promoted { overflow: hidden; }
div.promotedlong { overflow: hidden; }
section.main aside { width: 100%; float: left; position: relative; }
section.main div.intro { margin-right: -25px; }
section.main aside.intro { width: 50%; }
.introtext { margin-right: 25px; }
section.main aside.description { width: 50%; }
.descriptiontext { margin-right: 25px; display: block; }
.descriptionimage { display: block; overflow: hidden; }
section.main aside.textheavy { width: 100%; columns: 2 auto; column-gap: 25px; margin-bottom: 25px; }
section.main aside.highlight { width: 100%; height: auto; }
section.main aside.highlight img { margin-right: 50px; width: 100%; position: relative; }

/* spacers */
section.maintop { content: ''; display: block; clear: both; height: 25px; }
div.descriptionspacer { content: ''; display: block; clear: both; height: 25px; }
div.highlightspacer { content: ''; display: block; clear: both; height: 0px; }
div.descriptionimagespacer { content: ''; display: block; clear: both; height: 0; }
div.closerspacer { content: ''; display: block; clear: both; height: 0px; }
section.maincap { content: ''; display: block; clear: both; height: 100px; }
section.spacerbigimage { content: ''; display: block; clear: both; height: 50px; }
.resumedivider { margin-top: 25px; }


/* section--hook */
section.hook { margin: 25px 75px 0px 100px; }
section.hook .blueunderline { margin-right: 25px; }
section.hook aside { margin: 0; width: 33.3%; height: auto; float: left; }
section.hook aside.twoacross { width: 50%; margin-bottom: 25px; }
section.hook aside.fouracross { width: 25%; }
section.hook div.spacefouracross { content: ''; height: 0; }
section.hook aside .content { margin: 0 25px 0 0; padding: 0px; }
section.hook aside .content img { display: block; width: 100%; height: auto; }

/* NAVIGATION */
/* NAVIGATION */
/* NAVIGATION */
/* NAVIGATION */
nav { display: block; position: fixed; top: 0; left: 0; 
  z-index: 10; /* keep it over everything */
}
/* nav links */
#navToggle a { text-decoration: none; color: var(--nav-text-color-1); transition: color 0.2s ease; }
#navToggle a:hover { color: var(--accent-color); }
/* parent nav container */
#navToggle {
  display: block;
  position: absolute; /* this positions the whole nav container—the overall origin */
  top: var(--nav-pad-top); left: var(--nav-pad-left);
  user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}
/* nav menu button assembly */
/* hidden checkbox to open&close nav */
#navToggle input {
  display: block; margin: 0; width: var(--nav-button-width); height: var(--nav-icon-size);
  position: absolute; top: var(--nav-icon-pad-top); left: var(--nav-pad-left);
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 4; /* and place it over the button graphic */
}
/* animated hamburger button graphic */
/* animated hamburger button graphic */
/* animated hamburger button graphic */
/* animated hamburger button graphic */
#navToggle span {
  display: block;
  width: var(--nav-hamburger-width); height: var(--nav-hamburger-stroke);
  margin-bottom: var(--nav-hamburger-stroke);
  position: relative; top: var(--nav-hamburger-pad-top); left: var(--nav-hamburger-pad-left);
  
  background: var(--nav-text-color-1);
  border-radius: calc( var(--nav-hamburger-stroke) * 0.5 );
  
  z-index: 3;  /* make sure it's behind the hidden checkbox but in front of the larger button background */
  
  transform-origin: 50% 50%; 
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%; 
  -ms-transform-origin: 50% 50%; 
  -o-transform-origin: 50% 50%;
  
  transition: var(--nav-transition-time) var(--nav-transition-curve-abrupt);
}
#navToggle span:nth-last-child(1) { opacity: 0; top: calc( var(--nav-hamburger-pad-top) + ( var(--nav-hamburger-stroke) * -4 )); } /* put last (fourth) span under second span */



/* nav button graphic */
#navToggle .logo {
  display: none; width: var(--nav-icon-size); height: var(--nav-icon-size);
  margin: 0; position: absolute; top: var(--nav-icon-pad-top); left: var(--nav-icon-pad-left);
  background-color: var(--accent-color); background-size: var(--nav-icon-size) var(--nav-icon-size); border-radius: 50%;
  z-index: 3;  /* place behind the hidden checkbox */
  transition: var(--nav-transition-time) var(--nav-transition-curve-abrupt);
}
#navToggle .logo img {
	width: var(--nav-icon-size); height: var(--nav-icon-size);
	transform: rotate(0deg) scale(0.9, 0.9); 
	transition: var(--nav-transition-time) var(--nav-transition-curve-abrupt);
}
.site-title { 
  margin: 0; white-space: nowrap; position: relative; top: var(--nav-title-pad-top); left: var(--nav-title-pad-left); 
  z-index: 3; /* keep it over the nav menu contents */
  font-weight: var(--font-weight-bold); font-size: var(--nav-font-size-title); color: var(--nav-text-color-1); line-height: 0.9; text-transform: capitalize; 
  transition: var(--nav-transition-time) var(--nav-transition-curve-delay);
}
.nav-title-button {
  position: absolute; top: var(--nav-icon-pad-top); left: var(--nav-pad-left);
  width: var(--nav-button-width); height: var(--nav-icon-size); background-color: rgba(50,50,50,0.9); border-radius: 0 var(--nav-radius) var(--nav-radius) 0; 
  z-index: 2;
  box-shadow: var(--shadow-1);
  transition: var(--nav-transition-time) var(--nav-transition-curve-delay);
}
/* nav contents */
#nav-menu {
  position: absolute; top: 0; left: 0; margin: 0; width: var(--nav-list-width);
  padding: var(--nav-list-pad-top) var(--nav-list-pad-right) var(--nav-list-pad-bottom) var(--nav-list-pad-left);
  background-color: var(--nav-background-color); border-radius: 0 var(--nav-radius) var(--nav-radius) 0;
  color: var(--nav-text-color-2); text-transform: capitalize; list-style-type: none; -webkit-font-smoothing: antialiased;    /* to stop flickering of text in safari */
  box-shadow: var(--shadow-1);
  transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%;
  transform: translate( calc( var(--nav-total-width) * -1.1 ), 0); 
  transition: transform var(--nav-transition-time) var(--nav-transition-curve-delay);
}
#nav-menu li { padding: 0.2em 0; font-weight: var(--font-weight-bold); font-size: var(--nav-font-size-main); font-weight: var(--font-weight-bold); }
#nav-menu ul { padding-inline-start: var(--nav-list-sub-pad-left); }
#nav-menu ul > li { list-style-type: none; text-transform: lowercase; font-weight: var(--font-weight-bold); font-size: var(--nav-font-size-sub); }
/* transitions when nav button checked */
#navToggle input:checked ~ .site-title { color: var(--nav-text-color-1); } /* move nav contents to normal location */
#navToggle input:checked ~ .nav-title-button { background-color: var(--nav-background-color); box-shadow: none; } /* move nav contents to normal location */
#navToggle input:checked ~ ul { transform: none; } /* move nav contents to normal location */
#navToggle input:checked ~ .logo img { transform: rotate(-360deg) scale(1, 1); } /* spin image *//* Transform hamburger spans into an X. */
/* Transform hamburger spans into an X. */
/* Transform hamburger spans into an X. */
#navToggle input:checked ~ span:nth-last-child(4) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } /* hide first span (4th up from bottom) */
#navToggle input:checked ~ span:nth-last-child(2) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } /* hide the last span (2nd up from bottom) */
/* hide the middle span. */
#navToggle input:checked ~ span:nth-last-child(3) { width: calc( var(--nav-hamburger-width) * 1 ); transform: rotate(-135deg); }  /* rotate middle span. */
/* last span should go the other direction */
#navToggle input:checked ~ span:nth-last-child(1) { opacity: 1; width: calc( var(--nav-hamburger-width) * 1 ); transform: rotate(-225deg) ; }  /* rotate last span (which coincides with middle span). */


/* parallax */
/* parallax */
/* parallax */
/* parallax */
.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax-group {
  position: relative;
  height: 100vh;
  transform-style: preserve-3d;
}
.parallax-layer_fore { transform: translateZ(0); }

.parallax-layer_fore::after { content:''; display: block; clear: both; position: relative; top: 20vh; height: 20vh; overflow: visible; background: linear-gradient(0deg, rgba(221,221,221,1), rgba(221,221,221,0)); transform: translateZ(-1px) scale(4); }

/*
.parallax-layer_base_trim { position: relative; top: 365vh; height: 50vh; background: linear-gradient(0deg, rgba(221,221,221,1), rgba(221,221,221,0)); transform: translateZ(-1px) scale(4); }
*/
.parallax-layer_base { height: 266vh /*(was 155%, 185vh)*/; background: repeating-linear-gradient(45deg, var(--parallax-foreground), var(--parallax-foreground) 0.8vw, transparent 0.8vw, transparent 2vw), repeating-linear-gradient(-45deg, var(--parallax-foreground), var(--parallax-foreground) 0.8vw, transparent 0.8vw, transparent 2vw); transform: translateZ(-1px) scale(4); }
/*
.parallax-layer_base::after { content:'end base'; display: block; clear: both; position: relative; bottom: 0; height: 20vh; background: linear-gradient(0deg, rgba(221,221,0,1), rgba(221,221,221,0)); transform: translateZ(-2px) scale(5); }
*/
.parallax-layer_back { height: 246vh /*(was 130vh, 160vh)*/; background: repeating-linear-gradient(45deg, var(--parallax-foreground), var(--parallax-foreground) 0.5vw, transparent 0.5vw, transparent 1.0vw), repeating-linear-gradient(-45deg, var(--parallax-foreground), var(--parallax-foreground) 0.5vw, transparent 0.5vw, transparent 1.0vw); transform: translateZ(-2px) scale(5); }
/*
.parallax-layer_base::after { content:'end after'; display: block; clear: both; position: relative; bottom: 0; height: 20vh; overflow: visible; background: linear-gradient(0deg, rgba(221,221,0,1), rgba(221,221,221,0)); transform: translateZ(-4px) scale(7);}
*/
.parallax-layer_deep { height: 205vh /*(was nothing, 125vh)*/; background: repeating-linear-gradient(to bottom, var(--parallax-foreground), var(--parallax-foreground) 0.5vw, transparent 0.5vw, transparent 1.0vw),repeating-linear-gradient(to right, var(--parallax-foreground), var(--parallax-foreground) 0.5vw, transparent 0.5vw, transparent 1.0vw); transform: translateZ(-4px) scale(7); }




/* media-queries */
/* media-queries */
/* media-queries */
/* media-queries */
/* below for large devices & smaller; above for extra large devices. */
@media screen and (max-width: 1200px) {
	:root{ --nav-icon-size: 3.2rem; }
	
.parallax-layer_fore::after { height: 30vh; top: 30vh /*(was 20vh)*/; }
.parallax-layer_base { height: 170vh /*(was 166vh)*/; }
.parallax-layer_back { height: 155vh /*(was 146vh)*/; }
.parallax-layer_deep { height: 125vh /*(was 105vh)*/; }
}

@media screen and (max-width: 1000px) {
	h1 { font-size: 3.2em; }
	header h1 { font-size: 5em; bottom: 0.05em; }
	h2 { font-size: 2.4em; }
	h3 { font-size: 1.6em; }
	
	section.main p.caption { margin-right: 34%; }
	section.main div.promoted {height: auto; }
	section.main div.promotedlong {height: auto; }
	section.main aside.description { width: 50%; }
	section.main aside.description img { width: 100%; height: auto; }
	.descriptiontext { margin-right: 25px; }
	.descriptionimage { margin-right: 0; }
	section.main aside.highlight img { margin-right: 0; width: 100%; height: auto; }
	section.main aside.highlight .content { margin-right: 0; }
	section.main aside.highlight.fullsize { height: auto; width: 100%; }
	section.main aside.highlight.fullsize img { width: 100%; height: auto; }
	.highlightsquare { display: block; margin-right: 0;}
	.highlighthorizontal { display: none; }
	.circle { width: 25vw; height: 25vw; }
	section.hook { margin: 25px 75px 0px 100px; }
	section.hook aside.fouracross { width: 50%; }
	section.hook div.spacefouracross { display: block; clear: both; height: 25px; }
	
	
.parallax-layer_fore::after { height: 21vh; top: 21vh /*(was 30vh)*/; }
.parallax-layer_base { height: 188vh /*(was 170vh)*/; }
.parallax-layer_back { height: 170vh /*(was 155vh)*/; }
.parallax-layer_deep { height: 130vh /*(was 125vh)*/; }
}
/* below for medium devices & smaller; above for large & extra large devices. */
@media screen and (max-width: 850px) {
	:root{ --nav-icon-size: 2.4rem; 
		--nav-font-size-main: calc( var(--nav-icon-size) * 0.4 );  /* nav list headers */
		--nav-font-size-sub: calc( var(--nav-icon-size) * 0.35 );    /* nav list sub-items */
		--nav-list-width: calc( var(--nav-icon-size) * 4.25 );  /* make space for nav list text*/
	}

	h1 { font-size: 2.5em; }
	header h1 { font-size: 4em; bottom: 0.1em; }
	h2 { font-size: 2.3em; }
	h3 { font-size: 1.5em; margin-bottom: 0.2em; }
		.resumetext h3 { margin-top: 1em; }
		.resumetext h3.top { margin-top: 1em; }
	h4 { font-size: 1.2em; }
	h5 { font-size: 1.0em; }
/* header */
	header { height: 175px; }
	header div.hero { left: 60px; }
	footer { margin-left: 60px; }
/* main */
	section.main { margin: 0px 50px 0 50px; }
	section.maincap { height: 50px; }
	nav > ul { padding-left: 45px; }
	section.hook { margin: 25px 25px 0px 50px; }
	div.closerspacer { height: 25px; }
	section.main aside.textheavy { width: 100%; columns: 2 auto; column-gap: 25px; }
	.highlightsquare { display: none; }
	.highlighthorizontal { display: block; width: 100%; }
	.figurevertical { display: none; }
	.figuresquare { display: block; }
	section.main div.resume { width: 75%; margin: 0 25% 0 0; }
	section.main div.resume .textheavy { width: 100%; columns: 1 auto; }
	.resumetext { margin: 0; }
	.resumedivider { width: 75%; margin: 50px 0 0 25%; }
	.resumedoublecolumn { display: none; }
	.resumesinglecolumn { display: block; }
	section.main aside.description { width: 100%; }
	.descriptiontext { width: 100%; margin-right: 0; columns: 2 auto; column-gap: 25px; }
	.descriptionhighlight { width: 66%; columns: 1 auto; }
	div.descriptionimagespacer { height: 25px; }
	
.parallax-layer_base { height: 225vh /*(was 188vh)*/; }
.parallax-layer_back { height: 195vh /*(was 170vh)*/; }
.parallax-layer_deep { height: 150vh /*(was 130vh)*/; }
}

/* below for small devices & smaller; above for medium, large, & extra large devices. */
@media screen and (max-width: 768px) {
	:root{ 
		--nav-icon-size: 2.2rem; 
		--nav-font-size-main: calc( var(--nav-icon-size) * 0.35 );  /* nav list headers */
		--nav-font-size-sub: calc( var(--nav-icon-size) * 0.3 );    /* nav list sub-items */
		--nav-list-width: calc( var(--nav-icon-size) * 4.25 );  /* make space for nav list text*/
	}
	#nav-menu li { padding: 0.5em 0; }
	
	h1 { font-size: 2.6em; }
	header h1 { font-size: 3.6em; bottom: 0.05em; }
	h2 { font-size: 1.8em; }
	h3 { font-size: 1.3em; }
	h4 { font-size: 1.1em; }
	a.btn { font-size: 0.9em; }
/* header */
	header { height: 150px; }
	footer { height: 40px; }
	footer div.content { display: block; }
	
/* main */		
	div.closerspacer { height: 0; }
	section.main aside.description img { margin: auto; width: 100%; height: auto; }
	.descriptionhighlight { width: 100%; }
	section.main aside.highlight .content { margin-right: 0; }
    section.main aside.highlight img { width: 100%; height: auto; }
	.highlightsquare { display: none; }
	.highlightvertical { display: block; width: 20em; margin: auto; }
	section.main div.resume { margin-right: 0; }
	.resumedivider { margin-top: 25px; }
/* section--hook */
	section.hook { margin: 25px 25px 0px 50px; }
	section.hook aside.threeacrosstext { width: 100%; margin-top: 0; }
	section.hook aside.threeacrosspic { width: 50%; margin-top: 0; margin-bottom: 50px;}
	
.parallax-layer_fore::after { height: 25vh; top: 25vh /*(was 21vh)*/; }
.parallax-layer_base { height: 230vh /*(was 225vh)*/; }
.parallax-layer_back { height: 198vh /*(was 195vh)*/; }
.parallax-layer_deep { height: 153vh /*(was 150vh)*/; }
}

/* below for extra small devices & smaller; above for everything else. */
@media screen and (max-width: 576px) {
	:root{ 
		--nav-icon-size: 2.2rem; 
		--nav-font-size-main: calc( var(--nav-icon-size) * 0.4 );  /* nav list headers */
		--nav-font-size-sub: calc( var(--nav-icon-size) * 0.375 );    /* nav list sub-items */
		--nav-list-width: calc( var(--nav-icon-size) * 5 );  /* make space for nav list text*/
	}
	
	h1 { font-size: 1.8em; }
	header h1 { font-size: 2.85em; bottom: 0.15em; }
	h2 { font-size: 1.6em; }
	section.hook h3 { margin-top: 25px; }
	video.vidsmall { display: block; width: 100%; }
	video.vidbig { display: none; }
/* header */
	header div.hero { left: 0; bottom: 5px; text-align: left; padding-left: 35px; }
	header div.hero  h1 { margin-bottom: 10px; }
	header div.hero  h2 { margin-bottom: 10px; }
	header div.hero  h3 { font-size: 0.9em; }
	footer { margin: 20px 0px 20px 35px; }
/* section--main */
	section.maintop { height: 15px; }
	section.main { margin: 0 25px 0 25px; }
	section.maincap { height: 25px; }
	section.spacerbigimage { height: 25px; }
	.descriptiontext { width: 100%; columns: 1 auto; column-gap: 0; }
	section.main aside { width: 100%; }
	section.main div.intro { margin-right: 0; }
	section.main div.intro .blueunderline { margin-right: 0; }
	section.main aside.intro { width: 100%; }
	.introtext { margin-right: 0; }
	section.main p.caption { margin-right: 0; }
	section.main aside.textheavy { width: 100%; columns: 1 auto; column-gap: 25px; }
	section.main aside.highlight { width: 100%; height: auto; float: none; }
	.figurevertical { display: block; }
	.figuresquare { display: none; }
	.circle { height: 45vw; width: 45vw; }
	section.main div.resume { width: 100%; margin-left: 0; }
	.resumedivider { width: 100%; margin-left: 0; }
/* section--hook */
	section.hook { margin: 0 0 0 25px; }
	section.hook aside { width: 100%; margin-top: 25px; }
	section.hook aside.twoacross { width: 100%; margin-top: 0; margin-bottom: 25px; }
	section.hook aside.threeacrosstext { margin-top: 0; }
	section.hook aside.fouracross { width: 100%; margin-top: 0; margin-bottom: 25px; }
	section.hook div.spacefouracross { height: 0; }
	section.hook aside.intro { margin-top: 0; }
	
.parallax-layer_fore::after { height: 24vh; top: 24vh /*(was 25vh--22)*/; }
.parallax-layer_base { height: 277vh /*(was 230vh--298)*/; }
.parallax-layer_back { height: 235vh /*(was 198vh--253)*/; }
.parallax-layer_deep { height: 180vh /*(was 153vh--190)*/; }
}

/* below for extra short screens: 2-column nav */
@media screen and (max-width: 825px) and (max-height: 567px) {
	:root{ 
		--nav-icon-size: 2.0rem; 
		--nav-font-size-main: calc( var(--nav-icon-size) * 0.4 );  /* nav list headers */
		--nav-font-size-sub: calc( var(--nav-icon-size) * 0.35 );    /* nav list sub-items */
		--nav-list-width: calc( var(--nav-icon-size) * 12 ); 
		--nav-list-pad-left: var(--nav-hamburger-pad-left);  /* indent nav list from page left */
	}
	#nav-toggle { height: 350; overflow: auto; }
	#nav-menu{
		-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; 
		-webkit-column-gap: 3rem; -moz-column-gap: 3rem; column-gap: 3rem;
		-webkit-column-rule: 4px double #555555; -moz-column-rule: 4px double #555555; column-rule: 4px double #555555; 
	}
	#nav-menu li.break { -webkit-column-break-before: always; column-break-before: always; }
}