:root {
	--primaryCol: #383838; /*383838 <- Unity Color */
	--secondaryCol: #B4B4B4; /*B4B4B4 <- Unity Color */
	--backCol: #222222;
	--frontCol: #EEEEEE;
	--selectCol: #3181E7; /*3181E7 <- Unity Color */
}
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;

	overflow: scroll;
	overflow-x: hidden;

	background: #383838;
	background: var(--primaryCol);
	color: #B4B4B4;
	color: var(--secondaryCol);
	font-family: Calibri, Arial, sans-serif;
}
.bodyStyle {
	font-size: 100%;
}
* {
	box-sizing: border-box;
}
/* Custom scrollbar */
::-webkit-scrollbar {
	width: 2px;
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: #3181E7;
	background: var(--selectCol);
}

/* Page Width Layout */
.container {
	width: 100%;
	height: inherit;
	margin: 0 auto;
	padding: 0;
}


/*#region HEADER*/

/* -- Main -- */
.header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 5;
	
	background-color: #222222;
	background-color: var(--backCol);
	color: #EEEEEE;
	color: var(--frontCol);
	box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.4);
}
.headerheight {
	height: 3em;
}
@media screen and (min-width: 65em) { 
	.header { padding-left: 5%; padding-right: 5%; }
}
/* Header Links */
.header a {
	text-decoration: none;
	color: inherit;
}
/* -- Header Logo -- */
.headerLogo {
	display: table;
	float: left;
	height: 100%;
	font-size: 185%;
}
.headerLogo > a {
	display: table-cell;
	vertical-align: middle; 
}
.headerLogo img {
	vertical-align: middle;
	width: 1.4em;
	height: 1.4em;
	/*max-width: 10vw;
	max-height: 10vw;*/
	margin: 0 0.2em;
}
.headerLogo.wide img {
	width: 1.8em;
	height: auto;
}
.headerLogo span {
	display: inline-block;
	vertical-align: middle;
}
.headerLogo .smallName {
	display: inline-block;
	font-size: 60%;
	margin-left: 0.2em;
}

/* -- Main Navigation Dropdown (default) -- */
/* Dropdown on button click, navItems vertically in a list including subContent */
.navHeader {
	float: right;
	height: 100%;
	display: table;
}
.navList {
	display: table-cell;
	vertical-align: middle;
	padding: 0;
}
/* Base for Main dropdown */
.navContent {
	position: absolute;
	display: none;
	width: 100%;
	max-height: 800%;
	max-height: 80vh;
	overflow: auto;
	top: 3em; /* headerHeight */
	left: 0;
	right: 0;

	background: #383838;
	background: var(--primaryCol);
	box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.4);
}
.navItem {
	display: block;
	color: inherit;
	text-decoration: none;
	font-size: 105%;
	padding: 10px 12px;
	padding: 0.6em 0.8em;
}
.navItem:hover {
	background-color: #B4B4B4;
	background-color: var(--secondaryCol);
	color: #383838;
	color: var(--primaryCol);
}
a[href].navItem:hover {
	text-decoration: underline;
}
.navItem.curNav:hover {
	text-decoration: none;
	color: #3181E7;
	color: var(--selectCol);
}
.navItem.curNav {
	font-weight: bold;
	color: #3181E7;
	color: var(--selectCol);
}
.navGroupContent .navItem:before {
	content: " -- ";
}
/* Main Dropdown Button */
.navToggle {
	display: none;
}
.navButton {
	background: none;
	height: 100%;

	font-size: 160%;
	color: #EEEEEE;
	color: var(--frontCol);
	border: 0;
	outline: none;
	cursor: pointer;
	padding: 0.4em 0.6em;
}
.navToggle:checked ~ .navButton {
	background: #B4B4B4;
	background: var(--secondaryCol);
	content: attr(content-toggled);
}
.navToggle:checked ~ .navContent {
	display: block;
}

/* -- Header Navigation Bar (overwrite) on devices without touch support and with a window width which fits the header -- */
/* Disabling dropdown button, displaying navList horizontally as a bar with subContent as dropdowns on hover */
@media screen and (min-width: 50em) {
	/* Disable main dropdown*/
	html.supports-no-touchevents .navButton {
		display: none
	}
	html.supports-no-touchevents .navContent {
		position: relative;
		display: block;
		max-height: none;
		overflow: visible;
		top: 0;
		background: none;
		box-shadow: none;
	}
	/* Display content as bar */
	html.supports-no-touchevents .navContent > a, html.supports-no-touchevents .navContent > div {
		display: inline-block;
	}
	html.supports-no-touchevents .navItem:hover {
		background-color: inherit;
		color: inherit;
	}
	/* Setup dropdowns for subContent */
	html.supports-no-touchevents .navGroupContent {
		display: none;
		background: #383838;
		background: var(--primaryCol);
		box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.4);
		position: absolute;
		min-width: 10em;
	}
	html.supports-no-touchevents .navGroupContent .navItem {
		padding: 12px 16px;
		text-decoration: none;
		display: block;
	}
	html.supports-no-touchevents .navGroupContent .navItem:before {
		content: none;
	}
	html.supports-no-touchevents .navGroupContent .navItem:hover {
		background-color: #B4B4B4;
		background-color: var(--secondaryCol);
		color: #383838;
		color: var(--primaryCol);
	}
	html.supports-no-touchevents .navGroup:hover .navGroupContent {
		display: block;
	}
	html.supports-no-touchevents .navGroup:hover {
		background: #383838;
		background: var(--primaryCol);
	}
}

/*#endregion HEADER*/



/*#region BANNER */

/* Main Banner  */
.banner {
	position: relative;
	max-width: 100%;
}
img.bannerImg {
	position: relative;
	width: 100%;
	height: 100%;
}
img.ratio16-9 {
	height: 56.25vw;
}
img.ratio16-7 {
	height: 43.75vw;
}
img.ratio16-6 {
	height: 37.50vw;
}
img.ratio16-5 {
	height: 31.25vw;
}
img.ratio16-4 {
	height: 25.00vw;
}
img.ratioDynamic {
	min-height: 30vh;
	overflow: hidden;
}
.banner16-9 {
	height: 56.25vw;
	overflow: hidden;
}
.banner16-7 {
	height: 43.75vw;
	overflow: hidden;
}
.banner16-6 {
	height: 37.50vw;
	overflow: hidden;
}
.banner16-5 {
	height: 31.25vw;
	overflow: hidden;
}
.banner16-4 {
	height: 25.00vw;
	overflow: hidden;
}
.bannerDynamic {
	min-width: 10em;
	overflow: hidden;
	max-height: 80vh;
}
/* Overlay Text */
.bannerOverlay {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	/*background: rgba(0, 0, 0, 0.1);*/
}
.bannerText {
	display: table;
	width: 100%;
	height: 100%;

	font-size: 320%;
	font-size: 3vw;
	font-size: calc(6px + 3.2vw);

	color: #EEEEEE;
	color: var(--frontCol);
	text-shadow: 0px 0px 0.25em black, 0px 0px 0.25em black, 0px 0px 0.25em black, 0px 0px 0.25em black;
}
.bannerText.dark {
	color: #222222;
	color: var(--backCol);
	text-shadow: 0px 0px 0.25em white, 0px 0px 0.25em white, 0px 0px 0.25em white, 0px 0px 0.25em white;
}
.bannerTextCentered {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
html.supports-cssgradients .bannerShadowBottom 
{
	position: absolute;
	bottom: 0;
	z-index: 2;

	width: 100%;
	height: 1em;

	background: none; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.35)); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.35)); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.35)); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.35)); /* Standard syntax */
}

/*#endregion BANNER */


/*#region CONTENT */

/* Layout */
.content {
	padding: 0;
	margin: 1vw 0;
	background: #383838;
	background: var(--primaryCol);
}
.mainContent {
	/*padding: 10px 20px 80px 20px;
	padding: 1em 1em 4em 1em;*/
	padding: 1vh 2vw 6vh 2vw;
	margin: 0 0 1em 0;

	background: #FFFFFF;
	color: #383838;
	color: var(--primaryCol);
	box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.6);

	border-style: outset;
	border-width: 4px;
	border-color: #B4B4B4;
	border-color: var(--secondaryCol);
	border-radius: 4px;

}
code {
	word-wrap: break-word;
}
/* Minimum paragraph width */
h1:before, h2:before, h3:before, h4:before, h5:before, h6:before, p:before {
	content: "";
	width: 10em;
	display: block;
	overflow: hidden;
}
/* Media */
iframe.embedYT {
	width: 48em;
	max-width: 100%;
	height: 27em;
}
.blockImg-2, .blockImg-3 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.blockImg-2 > * {
	width: 50%;
}
.blockImg-3 > * {
	width: 30%;
	margin-left: 1.5%;
	margin-right: 1.5%;
}
img.pageImg {
	width: 48em;
	max-width: 100%;
}
.centerBlock {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.centerBlock img {
	max-height: 20em;
	max-width: 100%;
}
img.sideImg {
	float: right;
	max-width: 100%;
	margin: 1em 0 1em 0.5em;
}
/*img[alt]:after {
	margin: 10px;
	content: "INVALID CSS";
	content: attr(alt);
	content: "<br> <br> " attr(alt) " <br>";
	color: red;
	background-color: blue;
}*/
/* Buttons */
button {
	background: none;
	outline: none;
	border: none;
	font: inherit;
	text-shadow: inherit;
	color: inherit;
}
button.base {
	cursor: pointer;
	padding: 0.25em 0.5em;
	margin: 0.5em 0.4em;
	border-style: solid;
	border-width: 0.1em;
	border-radius: 0.25em;
}
button.pageButton {
	border-color: #383838;
	border-color: var(--primaryCol);
	color: #383838;
	color: var(--primaryCol);
}
button.pageButton:hover {
	background: rgba(55, 55, 55, 0.2);
	color: #3181E7;
	color: var(--selectCol);
}
button.pageButton:active {
	background: rgba(55, 55, 55, 0.4);
	border-color: #3181E7;
	border-color: var(--selectCol);
	color: #3181E7;
	color: var(--selectCol);
}
button.titleButton {
	box-shadow: 1px 2px 10px black, 1px 2px 10px black;
	background: rgba(55, 55, 55, 0.4);
	border-color: #EEEEEE;
	border-color: var(--frontCol);
	color: #EEEEEE;
	color: var(--frontCol);
	text-shadow: 0px 0px 0.25em black, 0px 0px 0.25em black, 0px 0px 0.25em black, 0px 0px 0.25em black;
}
button.titleButton:hover {
	background: rgba(55, 55, 55, 0.6);
	border-color: #B4B4B4;
	border-color: var(--secondaryCol);
	color: #B4B4B4;
	color: var(--secondaryCol);
}
button.titleButton:active {
	box-shadow: 2px 4px 20px black, 2px 4px 20px black;
	background: rgba(55, 55, 55, 0.8);
	border-color: #3181E7;
	border-color: var(--selectCol);
	color: #3181E7;
	color: var(--selectCol);
}
/* Links */
.noLinkStyle {
	text-decoration: none;
	color: inherit !important;
}
.subRef:after {
	content: " \2197";
	display: inline;
	font-size: 75%;
}
.content a:link, footer a:link {
	color: #3181E7;
}
.content a:visited, footer a:visited {
	color: #2C74CC;
}
.content a:hover, footer a:hover {
	color: #3181E7;
}
.content a:active, footer a:active {
	color: #3891FF;
}

/* Misc */
.content p 
{
	margin-top: 0.8em;
	margin-bottom: 0.8em;
}
.content h2 {
	margin-top: 1.4em;
	margin-bottom: 0.4em;
}
.content h3 {
	margin-top: 1.2em;
	margin-bottom: 0.4em;
}
.content h4 {
	margin-top: 1.4em;
	margin-bottom: 0.4em;
}

.indented {
	padding-left: 1em;
}

/*#endregion CONTENT */


/*#region SIDE */

.sidePanel {
	float: none;
	width: auto;

	margin: 0;
	margin-bottom: 10px;
	padding: 0.75em;

	font-size: 95%;
}
.centerPanel {
	float: none;
	width: auto;

	margin: 0;
	margin-bottom: 10px;
	padding: 0.75em;

	font-size: 95%;
}
.linkBox {
	background: #B4B4B4;
	background: var(--backCol);
	color: #222222;
	color: var(--secondaryCol);
	box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.6);

	border-style: outset;
	border-width: 3px;
	border-color: #B4B4B4;
	border-color: var(--secondaryCol);
	border-radius: 2px;
}
.navBox {
	background: #222222;
	background: var(--backCol);
	color: #B4B4B4;
	color: var(--secondaryCol);
	box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.6);

	border-style: outset;
	border-width: 3px;
	border-color: #B4B4B4;
	border-color: var(--secondaryCol);
	border-radius: 2px;
}
.panelLinks {
	margin: 0;
	padding: 0;
}
.panelLinks li {
	padding: 0.15em 0;
	list-style: none;
}
.panelLinks a {
	text-decoration: none;
}
/* Ensures that the sections the nav links point to are visible when focused */
.section:target {
	padding-top: 60px;
}

/*#endregion SIDE */

/*#region COOKIE NOTE */

.cookieNote {
	display: none;
	position: fixed;
	bottom: 0;

	width: 100%;
	padding: 0.2em 1em;
	font-size: 100%;

	background-color: black;
	background-color: var(--backCol);
	background-color: rgba(15,15,15,0.8);

	color: #EEEEEE;
	color: var(--frontCol);
}

.cookieNote span {
	display: inline-block;
	padding: 0.25em 0.5em;
	margin: 0.5em 0.4em;
}

.cookieNote > div, .cookieNote > button {
	float: right;
}

.cookieNote button {
	width: 8em;
	max-width: 40%;
	margin: 0.5em 0.8em;

	border-color: #EEEEEE;
	border-color: var(--frontCol);
	color: #EEEEEE;
	color: var(--frontCol);
}
.cookieNote button:hover {
	border-color: #B4B4B4;
	border-color: var(--secondaryCol);
	color: #B4B4B4;
	color: var(--secondaryCol);
}
.cookieNote button:active {
	border-color: #3181E7;
	border-color: var(--selectCol);
	color: #3181E7;
	color: var(--selectCol);
}




/*#endregion COOKIE NOTE */


/*#region FOOTER */

footer {
	text-align: center;
	font-size: 85%;
}

/*#endregion FOOTER */

/* Adjust text size based on available text width in window */
/*@media screen and (max-width: 30em) { 
	.bodyStyle { font-size: 100%; }
}*/
@media screen and (min-width: 100em) { 
	.bodyStyle { font-size: 105%; }
}
@media screen and (min-width: 120em) { 
	.bodyStyle { font-size: 110%; }
}
@media screen and (min-width: 140em) { 
	.bodyStyle { font-size: 118%; }
}
@media screen and (min-width: 160em) { 
	.bodyStyle { font-size: 126%; }
}
@media screen and (min-width: 180em) { 
	.bodyStyle { font-size: 134%; }
}
@media screen and (min-width: 200em) { 
	.bodyStyle { font-size: 142%; }
}
@media screen and (min-width: 220em) { 
	.bodyStyle { font-size: 150%; }
}

/* Manage horizontal layout based on window size */
@media screen and (min-width: 40em) { 
	.container { padding-left: 1%; padding-right: 1%; }
	.sidePanel { margin-left: 1%; margin-right: 1%; }
}
@media screen and (min-width: 65em) { 
	.container { width: 80%; }
	.sidePanel { width: 78%; margin-left: auto; margin-right: auto; }
}
@media screen and (min-width: 90em) { 
	.container { width: 65%; }
	.sidePanel.left { width: 17.5%; float: left; margin-left: 0.5%; }
	.sidePanel.right { width: 17.5%; float: right; margin-right: 0.5%; }
}



.listmonk-form {
	background-color: #EEEEEE;
	background-color: var(--frontCol);
	font-family: 'Noto Sans', 'Dejavu Sans', sans-serif;
	margin: 0 auto;
	padding: 1em;
	max-width: 33em;
	font-size: 80%;
}

.listmonk-title {
	color: #000000;
	font-size: 200%;
	line-height: 30%;
	text-align: center;
}
.listmonk-subtitle {
	font-size: 100%;
	text-align: center;
}
.listmonk-subtext {
	font-size: 90%;
	text-align: center;
}

.listmonk-input-text {
	width: 100%;
	padding: 0.6em;
	text-align: center;
}
.listmonk-input-text:focus::placeholder {
	color: transparent;
}
.listmonk-submit {
	font-weight: bold;
	font-size: 120%;
	width: 100%;
	padding: 0.25em 0.5em;
	margin: 0.5em 0.0em;
	border-style: solid;
	border-width: 0.1em;
	border-radius: 0.25em;
	border-color: #B4B4B4;
	border-color: var(--secondaryCol);
	background-color: #222222;
	background-color: var(--backCol);
	color: #EEEEEE;
	color: var(--frontCol);
}

.listmonk-submit:hover {
	background-color: #383838;
	background-color: var(--primaryCol);
}

.listmonk-submit:active {
	background-color: #222222;
	background-color: var(--backCol);
}

.listmonk-form label { /* Option Labels */
	font-size: 100%;
	font-weight: bold;
	line-height: 200%;
}
.listmonk-form label ~ span { /* Descriptions */
	font-size: 90%;
	font-style: italic;
}