: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: 100%;
	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 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;
}
/* FixedBanner
.banner {
	z-index: 1;
	top: 0;
	position: fixed;
}
.unslider {
	height:0;
} */
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;
}
.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;
}
/* 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(8px + 2.5vw);

	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;
}
.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 */
}
/* FixedBanner
.bannerheight {
	height: 43.75vw;
} */
.hideOnStart {
	display: none;
}
.hide {
	display: none;
}

/* Slide Buttons */
.slidebtn {
	position: absolute;
	width: 10%;
	height: 100%;
	z-index: 4;

	background: black;
	opacity: 0.2;
	border: 0;

	color: white;
	font-size: 60px;

	cursor: pointer;
}
.left {
	float: left;
	left: 0;
}
.right {
	float: right;
	right: 0;
}

/* UNSLIDER */
.unslider {
	overflow:auto;
	margin:0;
	padding:0;
}
.unslider-wrap {
	position:relative;
}
.unslider-wrap.unslider-carousel>li {
	float:left;
}
.unslider-vertical>ul {
	height:100%
}
.unslider-vertical li {
	float:none;
	width:100%;
}
.unslider-fade {
	position:relative;
}
.unslider-fade .unslider-wrap li {
	position:absolute;
	left:0;
	top:0;
	right:0;
	z-index:8;
}
.unslider-fade .unslider-wrap li.unslider-active {
	z-index:10;
}
.unslider li,.unslider ol,.unslider ul {
	list-style:none;
	margin:0;
	padding:0;
	border:none;
}
.unslider-arrow {
	position:absolute;
	left:20px;
	z-index:2;
	cursor:pointer;
}
.unslider-arrow.next {
	left:auto;
	right:20px;
}
/* Slide Dots */
.unslider-nav ol {
	list-style: none;
	text-align: center;
}
.unslider-nav li {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 8px;
	background: transparent;
	border-radius: 6px;
	overflow: hidden;
	text-indent: -999em;
	border: 2px solid var(--secondaryCol);
	cursor: pointer;
}
.unslider-nav li.unslider-active {
	background: var(--secondaryCol);
	cursor: default;
}


/*#endregion BANNER */


/*#region CONTENT */

/* Layout */
.content {
	padding: 0;
	margin: 1vw 0;
	background: #383838;
	background: var(--primaryCol);
}
.mainContent {
	/*padding: 10px 40px 80px 20px;*/
	padding: 1em 1em 4em 1em;
	padding: 1vh 4vw 6vh 2vw;
	margin: 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;
}
img.pageImg {
	width: 48em;
	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);
}
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%;
}
.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%; }
}