html { margin: 0; scroll-padding-top: 90px; scroll-behavior: smooth; }
body { margin: 0; font-size: 155%; color: #000; font-weight: 400; font-family: "Poppins", Helvetica, Arial, sans-serif; padding: 1em 1.5em 5em 1.5em; margin: 0px; background: url(../images/background_b.jpg) no-repeat; background-size: 100% 100%; background-attachment: fixed; }

p { font-size: 1.25em; font-weight: 400; line-height: 1.9em; color: #203; }
small { font-size: 0.8em; line-height: 0.9em; }
p small { font-size: 0.9em; line-height: 0.9em; }
p .font-weight-light { font-weight: 300; color: #666; }
p .font-weight-light a { font-weight: 400; text-decoration-thickness: 0.075em; text-underline-offset: 3px; }
p+ul { margin-top: -1em; }
#content .text a, #content .text a:visited, #content .text p a:hover, #content .text p a:active { color: #85b; }

h1, h2, h3, h4, h5, h6
{
	font-family: "Bilbo Swash Caps", cursive;
	font-weight: normal;
	color: #96c;
	line-height: 1em;
}
h1 { font-size: 4.5em; }
h2 { font-size: 3.5em; }
h3 { font-size: 2.5em; }
h4 { font-size: 2em; }
h5 { font-size: 1.5em; }
h6 { font-size: 1em; }

#site-title { font-size: 5em; line-height: 0.8em; text-align: center; margin: 0.2em auto 0.2em auto; font-weight: normal; letter-spacing: 0.08em; }
#site-subtitle { font-size: 2.25em; line-height: 1em; text-align: center; margin: 0em 0 1em 0; overflow: hidden; width: 100%; display: table; }
#site-subtitle h2 { font-family: "Poppins", Helvetica, Arial, sans-serif; font-weight: 200; color: #333; font-size: 0.8em; display: table-cell; white-space: nowrap; text-align: center; vertical-align: middle; }
#site-subtitle h2 { font-size: 1em; width: 1%; padding: 0 0.25em 0 0.25em; text-shadow: 0 0 8px rgba(255,255,255, 0.5); }
#site-subtitle small { font-size: 0.9em; }

h2 { margin-bottom: 0; margin-top: 0.2em; }
h2+p { margin-top: -0.05em !important; }
h2+ul { margin-top: 0.25em !important; }

hr {
	border: 0;
	height: 3px;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	width: 100%;
}
hr.hr-left {
	border: 0;
	height: 3px;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
	width: 100%;
}
hr.hr-right {
	border: 0;
	height: 3px;
	background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
	width: 100%;
}
#content .text hr {
	border: 0;
	height: 2px;
	background-image: linear-gradient(to right, #fff, #96c, #fff);
	width: 100%;
}

#menu { border-collapse: collapse; margin: auto; background: #333; color: #fff; width: 100%; position: sticky; top: 0; box-shadow: 0 1em 2em rgba(255,255,255, 0.5); z-index: 9999; }
#menu ul { text-align: center; list-style-type: none; margin: 0; padding: 0; }
#menu > ul > li { text-align: center; font-weight: 300; white-space: nowrap; display: inline-block; }
#menu > ul > li a { padding: 0.25em 1.5em 0.25em 1.5em; text-align: center; display: inline-block; font-size: 1.15em; }
#menu a, #menu a:visited, #menu a:hover, #menu a:active { color: #fff; text-decoration: none; }
#menu a:hover, #menu a:active { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#menu > ul > li a[href="#home"] { background: url(../images/icons/brow_chakra_wb.png) 0 center no-repeat; background-size: 1.25em; padding-left: 1.5em; }

figure { padding: 0; margin: 0; }
figcaption { font-size: 0.9em; margin: 0.7em 0 1.75em 0; text-align: center; font-weight: 300; color: #666; }
figcaption b { font-weight: 400; }
figcaption span.figure-num { display: none; }

#content .text h5 { font-family: "Poppins", Helvetica, Arial, sans-serif; margin: 0.2em 0 0 0; }
#content .text h2+h5 { margin-top: 1em; }
#content .text h5+p, #content .text h5+ul { margin-top: 0.2em !important; }
#content .text h5+ul { margin-top: 0.5em !important; }
#content .text p+h5 { margin-top: 1em !important; }
#content .text ul { list-style: none; padding-left: 2px; margin-left: 0; margin-bottom: 1.5em; }
#content .text ul li { font-size: 1.25em; margin-bottom: 0.25em; }
#content .text ul li::before {
  content: "\2022";  /* -- \2022 is the CSS Code/unicode for a bullet. */
  color: #96c;
  font-weight: bold;
  display: inline-block; /* -- Needed to add space between the bullet and the text. */
  width: 1em; /* -- Also needed for space (tweak if needed). */
  margin-left: -1em; /* -- Also needed for space (tweak if needed). */
}

.center { text-align: center; margin: auto; padding: 0; text-indent: 0 !important; }
#content .text .center.dingbat { color: #96c; display: block; text-indent: 0 !important; }
#content .text .center.dingbat span { margin-top: -1.5em; display: block; }

/* -- CSS for closing saluation. */
.special-words { color: #96c; letter-spacing: 0.5em; text-align: center; display: block !important; text-indent: 0 !important; }

#content .text .qr-code { display: table; width: auto; }
#content .text .qr-code a { display: table-row; }
#content .text .qr-code span { display: table-cell; vertical-align: middle; }

#content { border-collapse: collapse; max-width: 70em; margin: auto; margin-top: 3em; height: fit-content; }
#content td { padding: 0 2em 0 2em; text-align: left; vertical-align: middle; }
#content .img { vertical-align: top; width: 30%; }
#content .img img { box-shadow: 0.1em 0.1em 0.3em rgba(0,0,0, 0.3); width: 100%; }
#content .text { vertical-align: middle; padding-top: 3em !important; padding-bottom: 4em !important; position: relative; }

#content .vertical-bar { padding: 0; }
#content .vertical-bar div { border-left: 1px solid #96c; height: 100%; }
/* -- Need to use positioning to get height to work here for Safari. Otherwise, border will not show up; height would seem to be nonexistent. 2em here should match the padding of the adjacent elements with .img and .text classes. */
#content .vertical-bar { position: relative; }
#content .vertical-bar div { position: absolute; top: 2em; height: calc(100% - (2 * 2em)); }

#content .text h2 { margin: 0.2em 0 0em 0; }
#content .text p { width: 100%; }
#content .text p+h2, #content .text ul+h2 { margin-top: 0.5em; }
#content .text h2+p { margin-top: 0; margin-bottom: 0; }
#content .text ul+p { margin-top: 0; margin-bottom: 0; }
#content .text p+p { margin-top: 0em; margin-bottom: 0; text-indent: 2em; }
#content tr { height: 100%; scroll-margin-top: -0.3em; }
#content tr.section-spacer td { padding: 2em; position: relative; }
#content tr.section-spacer hr { position: absolute; left: 0; right: 0; margin-top: 10px; }
#content tr.section-spacer:last-of-type { display: none; }
#content .next-tile { display: block; text-align: center; position: absolute; left: 0; right: 0; bottom: 0; }
#content .next-tile a { display: block; padding: 1em; border: none; cursor: pointer; }
#content .next-tile a:hover span { border-color: #000; }
#content tr:nth-last-child(2) .next-tile { display: none; }
#content .next-tile a span { display: inline-block; width: 1em; height: 1em; border-right: 0.2em solid #ccc; border-top: 0.2em solid #ccc; transform: rotate(135deg); }

.sidebar { background: #f0f0f0; border: 1px outset #f0f0f0; box-sizing: border-box; padding: 1em; margin-bottom: 1em; }
#content .text .sidebar p:first-child { margin-top: 0; }
#content .text .sidebar p:last-child { margin-bottom: 0; }
#content .text hr { margin: 2em 0 2em 0; }

#content tr:nth-child(odd) { background: rgba(255, 255, 255, 1.0); box-shadow: 0.3em 0.3em 0.9em rgba(0,0,0, 0.4); border: 1px solid #fff; border-right-color: #999; border-bottom-color: #999; }
#content tr:nth-child(odd) td { padding-top: 2em; padding-bottom: 2em; }

.hide { display: none !important; }

/* -- These classes are used for slide show format on smaller screens. On bigger screens, the images are stacked vertically in a column. */
.show { display: revert !important; max-height: initial !important; overflow: initial !important; }
@media screen and (max-width: 600px)
{
	.hide-if-small-screen { max-height: 0; overflow: hidden ; margin: 0 !important; }
}

@media all and (max-width: 2560px)
{
	body { font-size: 152%; }
}
@media all and (max-width: 1920px)
{
	body { font-size: 114%; }
}
@media all and (max-width: 1860px)
{
	body { font-size: 111%; }
}
@media all and (max-width: 1800px)
{
	body { font-size: 107%; }
}
@media all and (max-width: 1740px)
{
	body { font-size: 104%; }
}
@media all and (max-width: 1680px)
{
	body { font-size: 100%; }
}
@media all and (max-width: 1620px)
{
}
@media all and (max-width: 1600px)
{
}
@media all and (max-width: 1560px)
{
}
@media all and (max-width: 1500px)
{
}
@media all and (max-width: 1440px)
{
	#menu > ul > li a { padding: 0.25em 1em 0.25em 1em; }
}
@media all and (max-width: 1366px)
{
	#menu > ul > li a { padding: 0.25em 0.75em 0.25em 0.75em; }
}
@media all and (max-width: 1320px)
{
	#menu > ul > li a { padding: 0.25em 0.75em 0.25em 0.75em; }
}
@media all and (max-width: 1280px)
{
	#menu > ul > li a { padding: 0.25em 0.75em 0.25em 0.75em; font-size: 1.1em; }
	
	#site-subtitle { margin-bottom: 0.5em; }
	#content { margin-top: 2em; }
	#content tr.section-spacer td { padding: 1.5em; }
}
@media all and (max-width: 1100px)
{
	#menu > ul > li a { padding: 0.25em 0.5em 0.25em 0.5em; font-size: 0.95em; }
}
@media all and (max-width: 1024px)
{
	#content td { padding: 0 1.75em; }
	#content tr:nth-child(odd) td { padding-top: 1.75em; padding-bottom: 1.75em; }
	#content .vertical-bar div { position: absolute; top: 1.75em; height: calc(100% - (2 * 1.75em)); }
}
@media all and (max-width: 960px)
{
	#content td { padding: 0 1.7em; }
	#content tr:nth-child(odd) td { padding-top: 1.7em; padding-bottom: 1.7em; }
	#content .vertical-bar div { position: absolute; top: 1.7em; height: calc(100% - (2 * 1.7em)); }
}
@media all and (max-width: 896px)
{
	#content td { padding: 0 1.65em; }
	#content tr:nth-child(odd) td { padding-top: 1.65em; padding-bottom: 1.65em; }
	#content .vertical-bar div { position: absolute; top: 1.65em; height: calc(100% - (2 * 1.5em)); }

	#site-title { font-size: 4.75em; }
	#site-subtitle { font-size: 2em; }
	#content .text p { font-size: 1.2em; }
	#menu > ul > li a { font-size: 0.9em; }

	#content tr.section-spacer td { padding: 1.25em; }
}
@media all and (max-width: 850px)
{
	#content td { padding: 0 1.6em; }
	#content tr:nth-child(odd) td { padding-top: 1.5em; padding-bottom: 1.5em; }
	#content .vertical-bar div { position: absolute; top: 1.5em; height: calc(100% - (2 * 1.6em)); }

	#site-title { font-size: 4.5em; }
	#site-subtitle { font-size: 1.8em; margin-top: 0px; }

	#content .text h5 { font-size: 1.2em; }
	#content .text p { font-size: 1.1em; }
	#content .text ul li { font-size: 1.1em; }

	#menu > ul > li a { font-size: 0.8em; }
}
@media all and (max-width: 832px)
{
	#content td { padding: 0 1.55em; }
	#content tr:nth-child(odd) td { padding-top: 1.5em; padding-bottom: 1.5em; }
	#content .vertical-bar div { position: absolute; top: 1.55em; height: calc(100% - (2 * 1.55em)); }
}
@media all and (max-width: 800px)
{
	#content td { padding: 0 1.5em; }
	#content tr:nth-child(odd) td { padding-top: 1.5em; padding-bottom: 1.5em; }
	#content .vertical-bar div { position: absolute; top: 1.5em; height: calc(100% - (2 * 1.5em)); }

	#site-title { font-size: 4.25em; }
	#site-subtitle { font-size: 1.6em; }

	#content .text h2 { font-size: 3em; }

	#content .text h5 { font-size: 1.2em; }
	#content .text p { font-size: 1.05em; }
	#content .text ul li { font-size: 1.05em; }
}
@media all and (max-width: 768px)
{
	#content td { padding: 0 1.45em; }
	#content tr:nth-child(odd) td { padding-top: 1.45em; padding-bottom: 1.45em; }
	#content .vertical-bar div { position: absolute; top: 1.5em; height: calc(100% - (2 * 1.45em)); }

	#site-title { font-size: 4em; }
	#site-subtitle { font-size: 1.6em; }
	
	#content .text h5 { font-size: 1.2em; }
	#content .text p { font-size: 1.0em; }
	#content .text ul li { font-size: 1.0em; }
}
@media all and (max-width: 750px)
{
	#content .text h2 { font-size: 2.95em; }
}
@media all and (max-width: 712px)
{
}
@media all and (max-width: 700px)
{
	#content .text h2 { font-size: 2.8em; }
}
@media all and (max-width: 656px)
{
}
@media all and (max-width: 650px)
{
	#content .text h2 { font-size: 2.65em; }
}
@media all and (max-width: 600px)
{
	html { scroll-padding-top: 0; }
	#content tr { height: 100%; scroll-margin-top: 0.5em; }
	figure { scroll-margin-top: 2.5em !important; }
	figcaption span.figure-num { display: inline; font-size: 0.8em; position: absolute; right: 0; top: 0; }

	#content { margin-top: 0; }

	#site-title { font-size: 3.75em; }
	#content .text h2 { font-size: 2.5em; font-weight: 500; }
	#site-subtitle { font-size: 1.5em; }

	#content { margin-top: 1.5em; }
	#content .vertical-bar { display: none; }

	#content tr:not(.section-spacer) td:not(.vertical-bar) { display: block; }
	#content .text { padding-top: 0 !important; }
	#content .text p { min-width: 10em; display: inline; }
	#content .text p:after { content: ""; display: block; width: 100%; height: 1em; }
	#content .img { width: auto; text-align: center; display: block; float: none; margin: auto !important; padding-bottom: 1em !important; }

	#content h2 { line-height: 1em; margin-bottom: 0.2em !important; }
	#content h2.inline { line-height: 0.8em; display: inline; padding-right: 0.1em; }

	#content tr.section-spacer td { padding: 1em !important; }

	#content .text ul { padding-left: 1.5em; }
	
	h5 { font-size: 1.4em; }

	input#menu_toggle, label[for="menu_toggle"] { display: inline; }

	#menu > ul > li {
		display: block;
	}
	#menu > ul > li a {
		display: block;
		background: none !important;
		padding: 0 !important;
	}
	#menu label {
		display: block;
		cursor: pointer;
		padding: 10px 0 10px 50px;
	}
	.sbuttons:hover .sbutton:not(:last-child) {
		opacity: 1;
	}
}
@media all and (max-width: 550px)
{
	body { padding: 0.5em; }
	#site-title { font-size: 3.5em; }
	
	#content .text p { font-size: 1em; }
}
@media all and (max-width: 450px)
{
	#site-title { font-size: 3.25em; }
}
@media all and (max-width: 400px)
{
	#site-title { font-size: 3em; }
}

#menu .current-mi > a, #menu .current-mi > a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media all and (min-width: 601px)
{
	#menu .submenu { display: none; margin: 0; padding: 0; box-shadow: 0.5em 0.5em 0.75em rgba(0,0,0, 0.2); }
	#menu > ul > li:hover .submenu { position: absolute; display: block; background: #fff; color: #000; }
	#menu > ul > li:hover .submenu li,
	#menu > ul > li:hover .submenu a { color: #000; text-align: left; }
	#menu .submenu a { display: block; padding: 0.2em 1.1em 0.2em 1.1em; }
	#menu .submenu li:first-child a { padding-top: 0.8em; }
	#menu .submenu li:last-child a { padding-bottom: 0.8em; }
	#menu .submenu:hover { display: block; }

	figure:not(:first-child) { max-height: initial; overflow: initial; }
	.img .left, .img .right { display: none; }
}

input#menu_toggle, label[for="menu_toggle"] { display: none; }
@media all and (max-width: 600px)
{
	label[for="menu_toggle"] {
		display: block;
		margin: 1.2em;
		cursor: pointer;
		position: fixed; right: 0;
		z-index: 9999;
		background: rgba(0,0,0,0.2);
	}
	.bar1, .bar2, .bar3 {
		display: block;
		width: 30px;
		height: 2px;
		background-color: #fff;
		margin: 9px 0;
		transition: 0.4s;
	}
	
	#menu { position: fixed !important; top: 0; left: 0; right: 0; }
	#menu label { padding: 0.5em 1em; }
	#menu > ul {
		max-height: 0;
		overflow: hidden;
		margin: -68px 0 0 0;
		padding-top: 68px;
		background: rgba(0,0,0, 0.2); 
	}
	#menu_toggle:checked ~ label .bar1, 	#menu_toggle:checked ~ label .bar3 { background-color: #000; }
	#menu_toggle:checked ~ label .bar1 { transform: translate(0, 11px) rotate(-45deg); }
	#menu_toggle:checked ~ label .bar2 { opacity: 0; }
	#menu_toggle:checked ~ label .bar3 { transform: translate(0, -11px) rotate(45deg); }			#menu_toggle:checked ~ label { background: none; }
	#menu_toggle:checked ~ ul
	{
		max-height: 100%;
		background: rgba(255,255,255, 0.95);
		position: fixed;
		top: 68px; left: 0; right: 0; bottom: 0;
		transition: 1s;

		padding-top: 78px;
	}
	#menu_toggle:checked ~ ul li {
		padding: 0.5em !important;
		text-transform: uppercase;
		margin: 0.5em 0 0 0;
	}
	#menu_toggle:checked ~ ul li a {
		color: #000;
		font-size: 1.5em; line-height: 1.5em;
		white-space: normal;
	}
	#menu_toggle:checked ~ ul > li > .submenu {
		display: block !important;
	}
	#menu_toggle:checked ~ ul .submenu
	{
		padding: 0;
	}
	#menu_toggle:checked ~ ul .submenu-parent
	{
		padding: 0 !important;
	}
	#menu_toggle:checked ~ ul .submenu-parent > a
	{
		display: none;
	}
}

@media screen and (max-width: 600px)
{
	/* -- CSS to set up multiple images in slide show format. */
	#content .img { position: relative; }
	figure
	{
		background: rgba(255,255,255, 1) !important;
  	}
	figure:not(:first-child) { max-height: 0; overflow: hidden; }
	figure.show { animation: fadeIn 1s ease-out 0.0001s; }
	figcaption { margin: 0.7em 0 0 0; position: relative; z-index: 100; }
	.img .left, .img .right
	{
		display: block; cursor: pointer; 
		height: 100%;
		position: absolute !important;
		z-index: 99; 
		top: 0;
		width: 50%;
		opacity: 0.7;
	}
	.img .left span, .img .right span
	{
		font-size: 3em;
		position: absolute !important;
		z-index: 99; top: calc(50% - 1.1em); 
		text-shadow: 2px 2px 8px #333;
		color: #fff;
		pointer-events: none;
    }

	.img .left:hover span, .img .right:hover span { opacity: 1 !important; color: #fff; }
	.img .left, .img .right { position: absolute; }
	.img .left { left: 0; }
	.img .right { right: 0; }
	.img .left span { left: 0.25em; }
	.img .right span { right: 0.25em; }
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

input.read-more-state {
	display: none;
}
.read-more-target {
	font-size: 0;
	max-height: 0;
	opacity: 0;
	transition: .25s ease;
}
input.read-more-state:checked ~ div.read-more-target {
	font-size: inherit;
	max-height: 999em;
	opacity: 1;
}
input.read-more-state ~ label.read-more-trigger {
	margin-top: 0.5em;
}
input.read-more-state:checked ~ label.read-more-trigger {
	margin-top: 0;
}
input.read-more-state ~ label.read-more-trigger:before {
	content: 'Read More »';
}
input.read-more-state:checked ~ label.read-more-trigger:before {
	content: '« Less';
}
label.read-more-trigger {
	cursor: pointer;
	display: inline-block;
	border-bottom: 1px solid #639; line-height: 1em;
	color: #639;
	
	float: right;
}
input.read-more-state ~ label[for="read-more-bio"].read-more-trigger:before {
	content: 'Read Bio »';
}
input.read-more-state:checked ~ label[for="read-more-bio"].read-more-trigger:before {
	content: '« Close Bio';
}


nobr  {  white-space: nowrap;  hyphens: none;  }