:root {
  --accent-color: #087;
  --max-page-width: 1600px;
}


/**
* Eric Meyer's Reset CSS v2.0 (http: //meyerweb.com/eric/tools/css/reset/)
* http: //cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.5;
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
}
ol, ul {
	list-style: none;
}
p {
	margin: 1em 0;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Unreset */

blockquote {
	display: block;
	margin: 1em 40px;
	font-style: italic;
}

b, strong {
	font-weight: bolder;
}

i, cite, em, var, dfn {
	font-style: italic;
}

tt, code, kbd, samp {
	font-family: monospace;
}

u, ins {
	text-decoration: underline;
}

s, strike, del {
	text-decoration: line-through;
}

ul, menu, dir, ol {
	display: block;	
	margin: 1em 0;
	padding-left: 40px;
	list-style-type: disc;
}
ol {
	list-style-type: decimal;
}
li {
   display: list-item;
}

/* General styles */

body {
	margin: 0px; padding: 0px;
	background-color: #fff;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
a, a.link, a.visted { color: #333; }
a:hover             { color: var(--accent-color); }

table { border-style: none; border-width: 0px; border-spacing: 0px; }
td 	{ padding: 0px; margin: 0px; vertical-align: top; }
.highlight {
    margin: 30px -14px;
    padding: 0px 10px;
    border-left: 4px solid var(--accent-color);
    clear: both;
}
.highlight a {
    text-decoration: none;
}

.framed 	{ border: 2px solid #000; padding: 5px; }
.hidden 	{ display: none; }

table.credits { border-collapse: collapse; }
table.credits td { border: 1px solid #ccc; border-width: 1px 0px; }
table.credits td.first { text-align: right; padding-right: 10px; }


/* General layout */

.page { width: 100%; padding: 0; }
.main_area { display: flex; flex-direction: row-reverse; max-width: var(--max-page-width); margin: 0 auto; }
.content_column, .content_column_front { flex-shrink: 0; margin-top: 40px; min-width: 0; text-align: justify; }
.main_area_padding_opposite_menu { width: 340px; flex-grow: 1; flex-shrink: 1; }
.main_area_padding_by_menu       { width:   0px; flex-grow: 1; flex-shrink: 1; }
.menu_column {
	position: -webkit-sticky; position: sticky; top: 0; overflow-y: scroll; height: 100vh;
	flex-shrink: 0;
}
.footer {
	margin-top: 12px;
	padding-top: 30px;
	color: #666;
	clear: both;
	animation: opacityreveal 0.5s ease-in-out;
	animation-fill-mode: backwards;
}
.footer a {
	color: inherit;
	text-decoration: none;
}
.footer div {
	display: inline-block;
	margin-bottom: 20px;
	margin-right: 1em;
}
.footer ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	float:  right;
	margin-bottom: 20px;
}
.footer ul li {
	display: inline-block;
	margin-left: 1em;
}

 /* Hide menu column scrollbar */
.menu_column::-webkit-scrollbar, .mobile_menu::-webkit-scrollbar { /* for Chrome, Safari and Opera */
	display: none;
}
.menu_column, .mobile_menu { /* for IE, Edge and Firefox */
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}


/* Header banner styles */

/* Header on mobile that stays fixed at top of screen.
It's hidden behind the regular header when the page is scrolled to the top. */
.header_fixed {
	position: fixed;
	top: 0; left: 0; right: 0; height: 60px;
	background-color: #077;
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
	z-index: 101;
	background-image:
		radial-gradient(circle farthest-corner at 50% 70%, #0225, #0229),
		radial-gradient(circle farthest-corner at 30% 50%, #0caf, #09af);
}

/* Regular header used for both mobile and desktop. */
.header, .header_title, .mobile_menu_button {
	color: #fff;
	text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
}
.header {
	position: relative;
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid #0007;
	overflow: hidden;
	min-height: 200px;
	z-index: 102;
}
@keyframes bg_ease {
	from { background-position: 50% 10%; }
	to   { background-position: 50% 40%; }
}
.header_bg, .header_bg_backdrop {
	background-size: cover;
	background-position: 50% 40%;
	width: 100%; height: 100%;
	position: absolute;
	transform: scale(1.2);
	animation: bg_ease 2.5s ease-out;
}
.header_bg {
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: blur(3px);
}

/* The title of the website. */
.fixed_wrapper {
	position: absolute;
	top: 0; left: 0; right: 0;
	width: 100%; max-width: var(--max-page-width);
	margin: 0 auto;
	z-index: 103;
}
.header_title {
	display: block;
	margin: 15px 30px 0px;
	font-weight: bold;
}
.header_title.frontpage {
	position: absolute;
	top: 25px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 326px;
}
@keyframes centerreveal {
	from { clip-path: inset(0% 50% 0% 50%); }
	to   { clip-path: inset(0%  0% 0%  0%); }
}
.header_title.frontpage #logomark { height: 72px; left: 0; right: 0; margin: 0 auto; }
.header_title.frontpage #logotype { padding-left: 0; transform: translate(69px, 0) scale(1.7); }
.header_title.frontpage #logotype_a { top: 40px; animation: centerreveal 0.4s ease-in-out 1.5s; animation-fill-mode: backwards; }
.header_title.frontpage #logotype_b { top: 72px; animation: centerreveal 0.4s ease-in-out 1.9s; animation-fill-mode: backwards; }

.header_title #logomark {
	position: absolute;
	height: 40.5px; /* should be multiple of 9 */
	-webkit-filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.2));
}

.header_title #logotype {
	position: absolute;
	width: 200px;
	display: block;
	color: #fff;
	text-decoration: none;
	padding-left: 50px;
}
.header_title #logotype_a {
	position: absolute;
	top: -5px;
	font-size: 24px;
	letter-spacing: 0.3em;
}
.header_title #logotype_b {
	position: absolute;
	top: 27px;
	font-size: 11.9px; /* Value that is most consistent across Firefox and Chrome */
	letter-spacing: 0.25em;
}

/* The button to open the menu on mobile. */
.mobile_menu_button {
	position: fixed;
	display: inline-block;
	top: 15px;
	right: 30px;
	line-height: 1;
	font-size: 30px;
	font-weight: bold;
	cursor: pointer;
}

/* The title of the page. */
.title {
	position: relative;
	text-align: center;
	letter-spacing: 0.05em;
	font-size: 3.0rem;
	margin: 100px 30px 30px;
}


/* Mobile menu styles */

.mobile_menu {
	position: fixed;
	overflow: scroll;
	box-sizing: border-box;
	width: 100%;
	top: 60px;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 10px 30px 30px;
	background-color: #fff;
	color: #666;
	font-size: 20px;
	font-weight: bold;
	display: none;
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
	z-index: 105;
	line-height: 1.2;
}

.mobile_menu a, .mobile_menu a:visited, .mobile_menu a:hover {
	text-decoration: none;
}
.mobile_menu a, .mobile_menu a:visited {
	color: #666; display: block;
}
.mobile_menu a.select    { color: var(--accent-color); }

.mobile_menu ul { margin: 0px; padding: 0px; list-style-type: none; }
.mobile_menu li { margin: 5px 0; }
.mobile_menu li a          { padding: 0.5em 0px; }
.mobile_menu li li a       { padding-left: 30px; }
.mobile_menu li li li a    { padding-left: 60px; }
.mobile_menu li li li li a { padding-left: 90px; }


/* Title styles */

@keyframes headerreveal {
	from { transform: translate(0px, 20px); opacity: 0%; }
	50%  { transform: translate(0px,  8px); opacity: 30%; }
	to   { transform: translate(0px,  0px); opacity: 100%; }
}

h1, h2, h3, h4, h5, h6, h7 {
	font-weight: bold;
	line-height: 1.3;
	text-align: left;
}
h1 {
	line-height: 1.0;
	padding-top: 0.25em;
	animation: headerreveal 0.3s linear; animation-fill-mode: backwards;
}


/* Section link styles */

.sectiongrid {
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 40px; column-gap: 40px;
	grid-row-gap: 35px; row-gap: 35px;
	width: 100%;
	margin: 20px 0;
	clear: both;chro
}
.content_column_front .sectiongrid {
	grid-template-columns: 1fr 1fr 1fr;
}

.box_section {
	display: block;
	text-decoration: none;
}

/* Just hover aspects of box section img */
.box_section img {
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
	transition: box-shadow 0.2s, transform 0.2s;
}
.box_section:hover img {
	box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
	transform: scale(1.05);
}
.box_section, .box_section a, .box_section img, .box_section h2 { cursor: pointer; }
a div, a div a, a div img, a div h2 { cursor: pointer; }
a.box_section:hover {
	color: #000;
}

@keyframes opacityreveal {
	from { opacity: 0%; }
	to   { opacity: 100%; }
}
@keyframes pageshotreveal {
	from { transform: rotate(2deg) translate(0px, -20px); opacity: 0%; }
	to   { transform: rotate(0deg) translate(0px,   0px); opacity: 100%; }
}
.pageshot {
	animation: pageshotreveal 0.8s ease-out; animation-fill-mode: backwards;
}
.box_section h2, .box_section span {
	animation: opacityreveal 0.5s ease-in-out; animation-fill-mode: backwards;
}

.box_section h2	{
	font-size: 18px;
	color: var(--accent-color);
	text-decoration: none;
}
.box_section span {
	margin-top: 0.6em;
	font-size: 0.875rem;
	color: #666;
	text-decoration: none;
	display: block;
}
.box_section .imgwrapper {
	margin: 5px 0 10px;
	width: 100%;
	position: relative;
	display: inline-block;
}
.aspect_dummy {
	margin-top: 56.25%; /* 16:9 Aspect Ratio */
}
.box_section .aspect_wrapper {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
}
.box_section .aspect_wrapper img {
    border-style: none;
    border-radius: 8px;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Side box styles */

.sidebox {
	color: #666;
	margin: 52px 30px;
	line-height: 1.2;
}
.sidebox_header {
	text-transform: lowercase;
	font-weight: bold;
	margin-bottom: 5px;
}

.social, .toc {
	font-weight: normal;
}

.sidebox a, .sidebox a:visited, .sidebox a:hover {
	text-decoration: none;
}
.sidebox a			{ color: #666; }
.sidebox a:hover	{ color: var(--accent-color); }

/* Make the selected page bold and colored */
.sidebox .select { color: var(--accent-color); font-weight: bold; }
/* Make parent pages colored
(If there are no sub pages, the a element will be an only child of the list item) */
.sidebox li a:nth-last-child(2) { color: var(--accent-color); }

.sidebox ul {
	margin: 1em 0 0 0;
	padding: 0;
	list-style-type: none;
	font-weight: normal;
}
.sidebox ul ul, .widget-content {
	margin-left: 10px; /* distance on the left side of the line */
	padding-left: 8px; /* distance to the line on the left */
	font-size: 95%;
}
.sidebox li	{
	margin: 0;
	padding: 1em 0 0;
}
/* Don't make the line extend up above the first item */
.sidebox li:first-child {
	padding-top: 0;
}

.sidebox .current-link:link, .sidebox .current-link:visited {
	font-weight: bold;
	color: var(--accent-color);
}

/* Used for social links */
.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	stroke-width: 0;
	stroke: currentcolor;
	fill: currentcolor;
}

.sidebox .icon, .footer .icon {
	width: 1.2em;
	height: 1.2em;
	position: relative;
	top: 0.22em; /* vertical-align: middle didn't work. This does... */
	fill: none;
	stroke-width: 2.5;
	stroke-linejoin: round;
}


.box_master .map { width: 100%; }
.box_master .map ul { margin: 0; padding: 0; margin-bottom: 12px; list-style-type: none; }
.box_master .map ul ul { margin-left: 30px; padding-left: 10px; border-left: 2px solid #ccc; }
.box_master .map li { margin: 0; padding: 0; vertical-align: middle; }
.box_master .map a { text-decoration: none; font-weight: bold; display: block; }
.box_master .map .mapline { display: flex; flex-direction: row; align-items: center; padding-top: 8px; }
.box_master .map img { flex-grow: 0; flex-shrink: 0; height: 34px; width: 60px; object-fit: contain; border: 2px solid #ccc; margin: 0; padding: 0; display: inline; box-shadow: none; }
.box_master .map .maptitle { flex-grow: 1; flex-shrink: 1; line-height: 1; padding-left: 8px; }
.box_master .map a .hiddenpage { color: #aaa; }
.box_master .map a:hover .hiddenpage { color: var(--accent-color); }


/* CSS for the box starts here
================================================*/
.box_master {
	color: #555;
	margin: 12px 0 40px;
	font-size: 1rem;
	animation: opacityreveal 0.5s ease-in-out; animation-fill-mode: backwards;
}

.box_options {
	color: #555;
	clear: both;
	margin: 20px 0px -10px;
	padding: 3px 5px;
	text-align: right;
	border-top: 2px solid #ccc;
}
.box_options a { text-decoration: none; }

/* Margin around graphical elements. */
.box_master .imagelist, .box_master img, .box_master figure, .box_master .video-wrapper, .box_master video {
	margin: 2em auto;
	border-radius: 5px;
}
/* Shadow on self-contained graphical elements. */
.box_master img, .box_master .video-wrapper, .box_master video {
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
}
.noshadow { box-shadow: none !important; }

/* Image. */
.box_master img {
	display: block;	
	max-width: 100%;
	transition: box-shadow 0.2s, transform 0.2s;
}
.box_master a:hover img {
	box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
	transform: scale(1.02);
}

/* Figure. */
.box_master figure {
	display: block;
	font-style: italic;
}
.box_master figure img {
	width: 100%; /* Otherwise caption can be wider than image. */
	margin: 0;
}
.box_master figcaption {
	margin: 0.5em 0px 0px;
}

/* Video */
.box_master video {
	display: block;	
	width: 100%;
}

/* Make video iframe embeds be shown at 100% width with 16:9 aspect ratio. */
.video-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 5px;
}


.box_date + a img { margin-top: 0px; }
.box_master img[align=right]	{ margin: 6px 0px 12px 18px; }
.box_master img[align=left]		{ margin: 6px 18px 12px 0px; }
.posts-thumb {
	float:left;
	margin: 6px 18px 12px 0px;
	height: 250px;
}
.posts-thumb img {
	margin-top: 0em;
	margin-bottom: 0em;
}

/* Don't break the page layout with overflowing images or embeds. */
.box_master iframe, .box_master embed, .box_master object, .box_master img, .box_master pre {
	max-width: 100% !important;
}
.box_master pre { overflow: auto !important; white-space: pre-wrap; }


.box_master ul, .box_master ol { margin-top: 1.0em; margin-bottom: 1.5em; }
.box_master li { margin-top: 0.6em; margin-bottom: 0.6em; }

.box_date {
	font-size: 0.875rem; 	
	color: #666;
	margin: 0.2em 0 1.5em;
}
.box_date a { color: #666; }
.box_date a:hover { color: #672; }

.box_master h2 {
	color: var(--accent-color);
	font-size: 1.4rem;
}
.box_master h2 a {
	color: var(--accent-color);
	text-decoration: none;
}

.box_master h3 {
	margin-top: 1.7em;
	margin-bottom: 0.6em;
	font-size: 1.3rem;
}

.box_master h4 {
	margin-top: 2em;
	margin-bottom: 0.5em;
	font-size: 1.1rem;
	font-style: italic;
}

p, form {
 	margin-bottom: 0px;
}


 	.cv { margin-right: auto; margin-left: auto; }
 	.cv img { border: 0px; }
 	.cv, .cv p, .cv td, .cv h1, .cv h2, .cv h3 { font-size: 8pt; }
 	.cv h1 { font-size: 10pt; text-transform: uppercase; margin-bottom: -0.4em; margin-top: 1.4em; text-align: center; }
 	.cv h2 { color: #990000; text-transform: uppercase; margin-bottom: 0em; margin-top: 2em; border-bottom: 1px solid #990000; margin-right: 0px; margin-left: 0px; padding-right: 0px; padding-left: 0px; }
 	.cv .itemheader { font-weight: bold; padding-top: 1em; padding-right: 1em; padding-bottom: 1px; }
 	
 	.cv ul { margin: 0em 0em 0em 1.3em; padding: 0pt; }
 	.cv li { margin: 0em; list-style: none; text-indent: -1.3em; }
 	
 	.cv li ul { margin: 0em 0em 0em 1.2em; padding: 0pt; }
 	.cv li li { list-style: none; text-indent: -0.85em; }
 	
 	.cv table { padding: 0pt; margin: 0pt; border-collapse: collapse; }
 	.cv td { padding: 0pt; margin: 0px; vertical-align: top; }
 	.cv hr { width: 100%; background-color: #000000; color: #000000; border: 0px; height: 1px; }
 	.cv p  { margin-bottom: 0.0em; margin-top: 1.0em; font-style: italic; }
 	.cv p.intro { margin-bottom: 0.5em; margin-top: 0.0em; }
 	.cv a 		{ text-decoration: none; color: #000000; border-bottom: 1px dashed #000000; }
 	.cv a:hover { text-decoration: none; color: #990000; border-bottom: 1px solid  #990000; }
 	
 	/*.cv .frame { width: 60em; }*/
@media print {
 	.cv .frame { width: 56.5em; }
 	.cv .online { display: none; }
 	.cv .itemheader { padding-bottom: 0px; }
 	.cv a 		{ text-decoration: none; color: #000000; border-bottom: 0px; }
 	.cv a:hover { text-decoration: none; color: #990000; border-bottom: 0px; }
 	
}
 	.cv .m0 { display: inline; display: none; }
 	.cv .m1 { display: inline; }


table.imagelist { border: 0px solid #000; margin: 0px auto; }
table.imagelist td { padding: 15px 10px 5px; margin: 0px; font-size: 0.6rem; text-align: center; vertical-align: bottom; }
table.imagelist img { margin: 0 auto 5px; padding: 0px; }


/**
 * The Micro Clearfix
 * 
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 * 	contenteditable attribute is included anywhere else in the document.
 * 	Otherwise it causes space to appear at the top and bottom of elements
 * 	that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 * 	`:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
 	content: " "; /* 1 */
 	display: table; /* 2 */
}

.cf:after {
 	clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
 	*zoom: 1;
}


/* MEDIA QUERIES */

/* Display for phones. */
@media (max-width: 799px), (max-device-width: 579px) {
	.content_column, .content_column_front { max-width: 660px; margin: 30px 30px 0; flex-shrink: 1; }
	.content_column .sectiongrid, .content_column_front .sectiongrid { grid-template-columns: 1fr 1fr; }
	
	.wide, .toc, .menu, .menu_column { display: none; }
	.main_area_padding_opposite_menu, .main_area_padding_by_menu { width: 0; }
	.posts-thumb { height: auto; }

	.header { min-height: 180px; }
	.title { margin-top: 80px; }
	.header_title.notfrontpage { transform: scale(0.85); position: fixed; margin-top: 13px; }
	.header_title.frontpage { transform: scale(0.88); }
}

/* Display sections in single column if screen is sufficiently narrow. */
@media (max-width: 549px), (max-device-width: 579px) {
	.content_column .sectiongrid, .content_column_front .sectiongrid { grid-template-columns: 1fr; }
}

/* Display for desktop and tablets. */
@media all and (min-width: 800px) and (min-device-width: 580px) {
	.content_column { min-width: 560px; width: 70%; max-width: 660px; }
	.content_column_front { min-width: 760px; width: 85%; max-width: 1240px; }
	.menu_column { min-width: 200px; width: 25%; max-width: 340px; }
	
	.narrow { display: none; }
}