@media (prefers-color-scheme: light) {
	.ShowPrefersDark { display: none !important; }
}
@media (prefers-color-scheme: dark) {
	.ShowPrefersLight { display: none !important; }
}

/* Local fonts */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 300;
	src: url('/fonts/montserrat-light.woff2') format('woff2'),
		url('/fonts/montserrat-light.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	src: url('/fonts/montserrat-medium.woff2') format('woff2'),
		url('/fonts/montserrat-medium.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: url('/fonts/montserrat-bold.woff2') format('woff2'),
		url('/fonts/montserrat-bold.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'CrimsonPro';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/crimsonpro-regular.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'CrimsonPro';
	font-style: normal;
	font-weight: 600;
	src: url('/fonts/crimsonpro-semibold.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'CrimsonPro';
	font-style: normal;
	font-weight: 700;
	src: url('/fonts/crimsonpro-bold.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'CrimsonPro';
	font-style: italic;
	font-weight: 400;
	src: url('/fonts/crimsonpro-italic.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'CrimsonPro';
	font-style: italic;
	font-weight: 600;
	src: url('/fonts/crimsonpro-semibolditalic.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'CrimsonPro';
	font-style: italic;
	font-weight: 700;
	src: url('/fonts/crimsonpro-bolditalic.ttf') format('truetype');
	font-display: swap;
}


:root {
	--circleblue: #30327f;
	--circlebrown: #887566;
	--circleyellow: #ffc03f;
	--circlecyan: #40c1bb;
	--circlered: #8c0000;
	--red: #8c0000;
	--brightblue: #90a0ff;
	--brightbrown: #cca899;
	--darkmagenta: #7000ff;
	--brightmagenta: #d060ff;
	--orange: #ff6600;
	--gray: #808080;
}


/* General */

html {
	min-width: 375px;
	overflow-x: hidden;
}

html * { background-color: transparent; }

html,
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	letter-spacing: normal;
	text-decoration: none;
	text-align: left;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
}

table td {
	vertical-align: top;
}

table.Circle { table-layout: fixed; margin-right: 4px; }

table.Circle tr:first-of-type th:first-of-type { border-bottom: none; }
table.Circle tr:nth-of-type(2) { height: 6px; }
table.Circle tr:nth-of-type(3) td { padding-top: 0; padding-bottom: 4px; }
table.Circle tr:nth-of-type(n+4) td { padding-top: 4px; padding-bottom: 4px; }
table.Circle tr *:first-of-type { width: 120px; }
table.Circle tr td:first-of-type { padding-right: 12px; }
table.Circle tr *:nth-of-type(2) { width: 6px; min-width: 6px; }
table.Circle tr *:nth-of-type(3) { padding-left: 6px; padding-right: 12px; }
table.Circle tr *:nth-of-type(n+4) { padding-left: 12px; padding-right: 12px; }

table.Circle tr * { margin: 0; }
table.Circle tr th { text-align: center; }
table.Circle tr th:first-of-type { text-align: left; font-weight: 700; font-size: 13px; }
table.Circle tr td:first-of-type {
	margin: 0;
	font-family: 'CrimsonPro', serif;
	font-style: normal;
	font-size: 16px;
	font-weight: 400;
	text-align: right;
}

ul {
	list-style-type: disc;
	list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path stroke="none" fill="%23887566" d="M8,0a8,8,0,0,0,0,16a8,8,0,0,0,0,-16zm0,3a5,5,0,0,1,0,10a5,5,0,0,1,0,-10z"/></svg>');
	list-style-position: inside;
}

input[type=submit],
input[type=checkbox],
input[type=radio] {
	display: none;
	border-style: none;
}


/* Background */

div.Viewport {
	position: relative;
	z-index: 200;
	width: 100%;
	padding: 86px 0 0 0;
	display: block;
	overflow-x: hidden;
}


/* Paragraph formats */

h3,
h3 a,
h3 em {
	font-family: 'CrimsonPro', serif;
	font-size: 16px;
	margin: 0;
}
h3,
h3 a {
	font-style: normal;
}
h3 em {
	font-style: italic;
}

table,
p,
p em,
p a,
li,
li em {
	font-style: normal;
	font-weight: 300;
	font-size: 15px;
	line-height: 24px;
	margin: 0 0 24px 0;
}

img {
	width: 100%;
	height: 100%;
}

p.Image {
	text-align: center;
	margin: 50px auto;
}
p.Image.Photo {
	text-align: left;
	margin: 24px 0;
}
p.Image.Photo img {
	width: calc(11.7vw + 58px);
	height: calc(11.7vw + 58px);
	border-radius: 8px;
	margin-left: -4px;
	margin-right: 16px;
}
p.Image.Photo img:last-child {
	margin-right: -4px;
}

h3 a,
p a,
th a {
	font-weight: 500;
}
p a.Ext {
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: left;
	background-origin: border-box;
	padding-left: 12px;
}
@media (hover:none) {
	h3 a, p a, li a { opacity: 1; }
}
@media (hover:hover) {
	h3 a:hover, p a:hover, li a:hover { opacity: 1; }
}

p em,
li em {
	font-style: italic;
}

div.Body {
	position: relative;
	padding: 20px;
}

div.Body p.Caption {
	font-size: 14px;
	width: 70%;
	margin: 20px auto;
	text-align: center;
}

div.Body h2 {
	width: 90%;
	margin: 20px auto 30px auto;
	text-align: center;
	font-style: normal;
	font-weight: 300;
	font-size: 24px;
}

p.CallToAction {
	font-family: 'CrimsonPro', serif;
	font-style: normal;
	font-size: 17px;
	margin-bottom: 0 !important;
}

svg.CallToAction {
	stroke: var(--circlecyan);
	stroke-width: 3px;
	stroke-linecap: round;
	width: 40px;
	height: 5px;
	transition: width 0.3s ease-in-out, opacity 0.5s;
	display: block;
}

span.Highlight {
	font-size: inherit;
	font-weight: 400;
	border-radius: 4px;
	padding: 3px 6px;
}

div.Circle {
	position: relative;
	width: 100vw;
	margin: 40px 0 0 0;
	padding: 60px 10vw 140px 10vw;
	background-position: 25% top;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30"><defs>	<linearGradient id="circlebluegrad" x1="20" y1="30" x2="50" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%23201a40"/><stop offset="50%25" stop-color="%2330327f"/><stop offset="100%25" stop-color="%234852b3"/></linearGradient></defs><path d="M-876.928,900.096a900,900,0,0,1,1800,0a900,900,0,0,1,-1800,0z M-579.813,623.755a600,600,0,0,0,1200,0a600,600,0,0,0,-1200,0z" style="stroke:none;fill:url(%23circlebluegrad);"/></svg>');
}

div.Circle p {
	width: 90%;
	margin: 10px 0;
	font-style: normal;
	font-weight: 300;
	font-size: 24px;
	line-height: unset;
	text-align: left;
	color: white;
}


div.Title {
	position: relative;
	width: 100vw;
	margin: 0 0 40px 0;
	padding: 90px 30px 60px 30px;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs>	<linearGradient id="circlebluegrad" x1="0" y1="100%25" x2="100%25" y2="50%25"><stop offset="0" stop-color="%23201a40"/><stop offset="50%25" stop-color="%2330327f"/><stop offset="100%25" stop-color="%234852b3"/></linearGradient></defs><path d="M-1,99A1600,1600,0,0,0,101,98V-1H-1Z" style="stroke:none;fill:url(%23circlebluegrad);"/></svg>');
}

div.Title h1 {
	width: 90%;
	margin: 10px 0;
	font-family: 'CrimsonPro', serif;
	font-style: normal;
	font-weight: 300;
	font-size: 24px;
	text-align: left;
}

div.Title p {
	text-align: left;
	margin: 10px 0;
}

div.Title p.Caption {
	width: 70%;
	margin: 10px 0;
	font-size: 14px;
	text-align: left;
}

div.Title p img.BlogAuthor {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	float: left;
	margin: -16px 20px 0 -10px;
}

div.Title p.Buttons {
	line-height: 30px;
	margin: 0 8px 16px 0px;
}

div.Title p.Buttons a {
	font-weight: 500;
	margin: -4px 19px -4px -11px;
	padding: 2px 9px;
	line-height: 30px;
	border-style: solid;
	border-radius: 20px;
	border-width: 2px;
	white-space: nowrap;
	opacity: 1;
}

div.Title p.Buttons a.Switchable {
	border-radius: 0;
	margin-right: 0 !important;
	margin-left: -2px !important;
	pointer-events: all;
	cursor: pointer;
}
div.Title p.Buttons a.Switchable:first-of-type {
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	margin-left: -11px !important;
}
div.Title p.Buttons a.Switchable:last-of-type {
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	margin-right: 19px !important;
}
div.Title p.Buttons a.Switchable.Switched {
	pointer-events: none;
	cursor: default;
}
div.Title p.Buttons a.Checkable {
	pointer-events: all;
	cursor: pointer;
}

div.Feature {
	position: relative;
	width: 100vw;
	height: calc(65vw + 100px);
	min-width: 375px;
	min-height: 540px;
	margin: 0 0 100px 0;
}
div.Feature > div {
	position: relative;
	margin: 0 auto;
}
div.Feature > div.BackgroundImage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
}
div.Feature > div.BackgroundImage > img {
	object-fit: cover;
}
div.Feature h1 {
	width: calc(40vw + 150px);
	margin: 0 30px;
	font-family: 'CrimsonPro', serif;
	font-style: normal;
	font-weight: 300;
	font-size: 32px;
	text-align: left;
}
div.Feature h1:first-child {
	padding-top: 15vw;
	margin: 0 auto;
	text-align: center;
}
div.Feature.Dark h1 { color: white; }

div.Feature p.Caption {
	width: 70%;
	margin: 0 30px;
	padding-top: 32vw;
	font-size: 14px;
	text-align: left;
}

div.Showcase:after {
	content: "";
	display: table;
	clear: both;
}
div.Showcase > div {
	width: 100vw;
	height: auto;
	padding: 20px;
}

div.Showcase > div > h2 {
	width: 100%;
	margin: 40px 0 0 0;
	font-style: normal;
	font-weight: 300;
	font-size: 28px;
	text-align: center;
}
div.Showcase:nth-child(odd) > div > h2 { text-align: left; }
div.Showcase:nth-child(even) > div > h2 { text-align: right; }


div.Tiles {
	position: relative;
	width: 100vw;
	height: auto;
	margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}


div.Panel {
	position: relative;
	display: block;
	float: left;
	border-radius: 8px;
	width: 90vw;
	height: auto;
	overflow: clip;
	margin: 16px 0;
	box-shadow: 0 4px 12px -8px #383838;
}
div.Panel > div {
	padding: 20px;
}
div.Panel > div.BackgroundImage {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
div.Panel.Icon > div.BackgroundImage {
	width: 160px;
	margin-bottom: 40px;
}

div.Panel h2 {
	width: 90%;
	margin: 0 0 24px 0;
	font-style: normal;
	font-weight: 700;
	font-size: 19px;
	text-align: left;
}
div.Panel h2,
div.Panel h2 * {
	font-family: 'CrimsonPro', serif;
	font-weight: 700;
	font-size: 19px;
}
div.Panel h2.CallToAction {
	margin-bottom: 4px;
}
div.Panel.Blog h2 {
	width: 70%;
	margin: 48px 0 24px 0;
	font-weight: 500;
}

@media (hover:hover) {
	a div.Panel:hover > div > svg.CallToAction,
	a:hover > svg.CallToAction { width: 75%; }
}

div.Panel.Info {
	background-color: transparent;
	box-shadow: none;
}

div.Panel.Info p {
	font-family: 'CrimsonPro', serif;
	font-style: italic;
	font-size: 18px;
	margin-top: 36px;
	margin-bottom: 0;
}

div.Panel h3 {
	font-size: 16px;
	margin: 0 0 12px 0;
}


/* Drop-down items */

/*
.DropDown {
	position: relative;
	display: block;
	margin-bottom: 6px;
}

.DropDown:last-of-type {
	margin-bottom: 40px;
}

.DropDown section input[type=checkbox] {
	display: none;
}

.DropDown section label h3 {
	cursor: pointer;
}

.DropDown section label div {
	cursor: auto;
}

.DropDown section label h3 {
	background-image: url(/images/open.svg);
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: 0 5px;
	background-origin: padding-box;
	padding-left: 20px;
}

.DropDown label div {
	height: auto;
}

.DropDown label div p {
	padding-left: 20px;
}

.DropDown section > label div {
	max-height: 0;
	overflow-y: hidden;
	transition: max-height 1s ease;
}

.DropDown section input[type=checkbox]:checked ~ label div {
	max-height: 1000px;
}

.DropDown section input[type=checkbox]:checked ~ label h3 {
	background-image: url(/images/opened.svg);
}
*/


/* Error bar */

div.PageError > div {
	position: fixed;
	top: 0;
	width: 100%;
	max-height: 0;
	background-color: var(--circleyellow);
	border-bottom: 1px solid black;
	z-index: 990;
	padding: 0;
	margin: 0;
	display: block;
	overflow-y: hidden;
	transition: max-height 0.5s;
}

div.PageError > input[type=checkbox]:checked ~ div { max-height: 48px; }

div.PageError * {
	font-size: 13px;
	line-height: 16px;
	font-weight: 500;
	margin: 6px 6px 6px 6px;
}

div.PageError label {
	padding-left: 20px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path style="fill:none;stroke:%23383838;stroke-linecap:round;stroke-width:3;" d="M4,4l12,12M16,4l-12,12"/></svg>');
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: 2px 1px;
	background-origin: padding-box;
	cursor: pointer;
}


/* Control bar */

.ControlBar {
	width: 100%;
	height: 28px;
	padding: 5px 6px 5px 0;
	position: fixed;
	top: 0;
	z-index: 900;
	overflow: visible;
	display: flex;
	justify-content: flex-end;
	transition: top 0.3s 0.1s ease-in-out;
}

.ControlBar * {
	width: 100%;
	text-decoration: none;
	overflow: visible;
	color: white;
	display: block;
}

.ControlBar div.ControlSection { overflow: hidden; }

.ControlBar div.ControlSection > p,
.ControlBar div.ControlSection > p * {
	display: inline;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 16px;
	line-height: 16px;
}

.ControlBar div.ControlPanel > p {
	padding: 0 0 0 30px;
}
.ControlBar div.ControlPanel > p svg {
	width: 14px;
	height: 14px;
	margin: 0 6px -2px -20px;
}

.ControlBar div.ControlPanel > p,
.ControlBar div.ControlPanel > p a,
.ControlBar div.ControlPanel > p label {
	margin: 10px 0;
	font-size: 13px;
	line-height: 16px;
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
}
.ControlBar div.ControlMenu.Info div.ControlPanel > p { white-space: normal; padding-right: 16px; }
.ControlBar div.ControlPanel > p a,
.ControlBar div.ControlPanel > p label {
	display: inline;
}

.ControlBar p {
	margin: 10px 0;
	padding: 0 16px;
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;
	text-align: left;
}
.ControlBar p a {
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;
	color: white;
	display: inline;
}

.ControlBar p:last-child {
	margin-bottom: 14px;
}

.ControlMenu {
	position: relative;
	width: auto;
	height: 22px;
	cursor: default;
	border: none;
	outline: none;
	clear: none;
	display: block;
}
.ControlMenu > div.ControlSection {
	width: 30px;
	transition: width 0.5s ease-in-out;
}

div.ControlControl {
	width: 30px;
	min-width: 30px;
	min-height: 20px;
}
.ControlBar div.ControlSection > p.ControlControl {
	padding: 0 0 0 30px;
	width: auto;
	text-align: left;
	white-space: nowrap;
	opacity: 0.75;
}
.ControlBar div.ControlSection > p.ControlControl svg {
	width: 14px;
	height: 14px;
	margin: 0 6px -2px -20px;
}

.ControlPanel {
	padding: 0;
	border-radius: 0 0 8px 8px;
	position: absolute;
	width: 240px;
	height: auto;
	z-index: 900;
}

.ControlMenu.Info { margin-right: auto; }
.ControlMenu.Info .ControlPanel { border-radius: 0 0 8px 0; width: 320px; }

.ControlMenu div.ControlSection > .ControlPanel {
	max-height: 0;
	overflow-y: hidden;
}

div.ControlPanel p.Header {
	padding: 8px 0 0 30px;
	border-top: solid #c0c0c0 1px;
	text-align: left;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	color: #c0c0c0;
}

@media (hover:none) {

	.ControlMenu > div.ControlSection > .ControlPanel { transition: max-height 1s; }
	
	div.ControlMenu > input[type=radio]:checked ~ div.ControlSection { width: 160px; }
	div.ControlMenu.LastControlMenu > input[type=radio]:checked ~ div.ControlSection { width: 120px; }
	div.ControlMenu > input[type=radio]:checked ~ div.ControlSection.Close { width: 0; overflow: hidden; }
	div.ControlMenu > input[type=radio]:checked ~ div.ControlSection > div.ControlPanel {
		max-height: 208px;
		overflow-y: scroll;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	div.ControlMenu > input[type=radio]:checked ~ div.ControlSection > p { opacity: 1; }

	.ControlBar div.ControlPanel > p { margin-top: 16px; margin-bottom: 16px; }
}
div.ControlMenu > input[type=radio]:checked ~ div.ControlSection > div.ControlPanel::-webkit-scrollbar { display: none; }

@media (hover:hover) {

	.ControlMenu > div.ControlSection > .ControlPanel { transition: max-height 0.5s; }

	div.ControlBar p a:hover { opacity: 1; }

	div.ControlMenu > div.ControlSection:hover { width: 160px; }
	div.ControlMenu.LastControlMenu > div.ControlSection:hover { width: 120px; }
	div.ControlMenu > div.ControlSection.Close { display: none; }
	div.ControlMenu div.ControlSection:hover > div.ControlPanel {
		max-height: 208px;
		overflow-y: scroll;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	div.ControlMenu div.ControlSection:hover > div.ControlPanel::-webkit-scrollbar { display: none; }
	div.ControlMenu div.ControlSection:hover > p { opacity: 1; }
}



/* Navigation bar formating and transitions */

.NavigationBackground {
	position: fixed;
	top: 28px;
	width: 100%;
	background-color: transparent;
	padding: 0;
	z-index: 300;
	transition: top 0.5s ease-in-out;
}

div.NavigationEdge {
	width: 100vw;
	height: 1vw;
	display: block;
	z-index: 200;
	padding: 0;
}
div.NavigationEdge > div {
	position: absolute;
	left: 0;
	bottom: -3vw;
	width: 100vw;
	height: 200vw;
	z-index: 300;
	pointer-events: none;
}
div.NavigationEdge > div > svg {
	stroke: none;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}

.Navigation {
	padding: 20px;
	transition: padding 0.3s linear;
}

.Navigation,
.Navigation * {
	overflow-y: hidden;
	text-decoration: none;
	text-align: left;
	z-index: 800;
	display: block;
}

div.NavigationMenu p {
	margin: 12px 0 0 0;
	padding-left: 18px;
	display: block;
}
div.NavigationMenu p,
div.NavigationMenu p * {
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	line-height: 21px;
	text-align: left;
}
div.NavigationMenu p label { margin: 0; }

div.NavigationPanel p {
	margin: 0 0 12px 0;
	font-family: CrimsonPro, serif;
	font-style: normal;
	font-size: 16px;
	font-weight: 300;
	text-align: left;
}

div.NavigationPanel li {
	width: 100%;
	margin: 0 0 12px 0;
	padding-left: 18px;
	line-height: 16px;
}
div.NavigationPanel li,
div.NavigationPanel li * {
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	line-height: unset;
}
div.NavigationPanel li.NavigationPin {
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path style="fill:%2340c1bb;stroke:none;" d="M3,2L17,10L3,18z"/></svg>');
	background-position: 0 2px;
}
@media (hover:none) {
	div.NavigationPanel li { margin-top: 12px; margin-bottom: 20px; }
}

a.NavigationLogo,
svg.NavigationLogo {
	position: relative;
	width: 203px;
	height: 40px;
	float: left;
	transition: width 0.3s linear, height 0.3s linear, margin-top 0.3s linear;
}

.NavigationBar {
	width: 100%;
	height: auto;
	max-height: 0;
	transition: max-height 0.5s ease-in-out;
	position: relative;
	float: right;
	overflow-x: hidden;
	display: block;
}

.NavigationControl {
	position: relative;
	display: block;
	float: right;
	width: 40px;
	height: 34px;
	margin-top: 6px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path style="fill:none;stroke:%23a0a0a0;stroke-linecap:round;stroke-width:3;" d="M2,4H18M2,10H18M2,16H18"/></svg>');
	background-size: 20px 20px;
	background-repeat: no-repeat;
	background-position: right 7px;
	cursor: pointer;
	transition: all 0.3s linear;
}

div.NavigationClose {
	display: none;
}
div.NavigationMenu {
	position: relative;
	display: block;
	float: left;
	width: 100%;
	height: auto;
	overflow: visible;
	cursor: default;
	border: none;
	outline: none;
	clear: none;
	margin-left: 34px;
	transition: all 0.5s ease-in-out;
}

div.NavigationMenu a { pointer-events: none; }
div.NavigationMenu a p { pointer-events: auto; }

div.NavigationMenu svg {
	stroke: var(--circlecyan);
	stroke-width: 3px;
	stroke-linecap: round;
	width: 0;
	opacity: 0;
	height: 8px;
	padding-left: 10px;
	transition: all 0.5s ease-in-out;
}

div.NavigationMenu.NavigationPin svg {
	width: 130px;
	opacity: 0.6;
}

div.NavigationPanel {
	width: 300px;
	height: auto;
	max-height: 0;
	transition: all 0.5s ease-in-out;
	overflow: hidden;
	background-color: transparent;
}


@media (hover:none) {
	div.NavigationMenu > a p { opacity: 1; }
	div.Navigation input[type=checkbox]:checked ~ nav.NavigationBar { max-height: 360px; }
	div.Navigation input[type=checkbox]:checked + div.NavigationControl {
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path style="fill:none;stroke:%23a0a0a0;stroke-linecap:round;stroke-width:3;" d="M4,4L16,16M4,16L16,4"/></svg>');
	}
	div.Navigation input[type=checkbox]:checked ~ nav.NavigationBar div.NavigationMenu.NavigationPin svg { opacity: 0.3; }

	nav.NavigationBar input[type=radio]:checked + div.NavigationMenu div.NavigationPanel { max-height: 200px; }
	nav.NavigationBar input[type=radio]:checked + div.NavigationMenu > a { opacity: 1; }
	nav.NavigationBar input[type=radio]:checked + div.NavigationPanel > a { opacity: 1; }
	nav.NavigationBar input[type=radio] + div.NavigationMenu div.NavigationPanel li.NavigationPin a { pointer-events: none; }
	nav.NavigationBar input[type=radio]:checked + div.NavigationMenu a { pointer-events: auto; }
	nav.NavigationBar input[type=radio]:checked + div.NavigationMenu a p { pointer-events: none; }
	nav.NavigationBar input[type=radio]:checked + div.NavigationMenu svg { width: 130px; opacity: 1 !important; }
}

@media (hover:hover) {
	div.NavigationMenu > a p { opacity: 0.7; }
	div.NavigationMenu:hover > a p { opacity: 1; }
	div.NavigationControl { pointer-events: none; }

	div.Navigation:hover > nav.NavigationBar { max-height: 360px; }
	div.Navigation:hover > div.NavigationControl { background-image: none; }
	div.Navigation:hover div.NavigationMenu.NavigationPin svg { opacity: 0.3; }

	div.NavigationMenu:hover div.NavigationPanel { max-height: 200px; }
	div.NavigationPanel > a:hover p { opacity: 1; }
	div.NavigationPanel li a { opacity: 0.7; }
	div.NavigationPanel li a:hover { opacity: 1; }
	div.NavigationPanel li.NavigationPin a { pointer-events: none; }
	div.NavigationMenu:hover a { pointer-events: auto; }
	div.NavigationMenu:hover a p { pointer-events: none; }
	div.NavigationMenu:hover svg { width: 130px; opacity: 1 !important; }
}


/* Footer formatting */

.FooterBackground {
	position: relative;
	width: 100vw;
	background-color: transparent;
	margin: 40px 0 0 0;
	z-index: 700;
	background-position: 0 0;
	background-size: cover;
}

div.Footer {
	padding: 40px 20px;
	height: auto;
	clear: both;
	display: block;
	z-index: 800;
}

div.Footer:after {
	content: "";
	display: table;
	clear: both;
}

div.Footer div {
	width: 100%;
	float: left;
}

div.Footer div.FooterCenter,
div.Footer div.FooterRight {
	padding-top: 10px;
	float: right;
}

div.Footer div.FooterLeftBottom {
	padding-top: 10px;
}

.FooterRuler,
.FooterRulerTop {
	stroke: #c0c0c0;
	stroke-width: 1px;
	stroke-linecap: round;
	width: 100%;
	height: 10px;
	display: block;
}

svg.FooterLogo {
	width: 173px;
	height: 34px;
	display: block;
	margin-left: 12px;
	margin-bottom: 16px;
	stroke: white;
	fill: white;
}

div.FooterBackground a.FooterSharingIcon {
	--link: white;
}
a.FooterSharingIcon {
	margin: 6px 6px 6px 0;
	display: inline-block;
}

a.FooterSharingIcon:first-of-type {
	margin-left: 16px;
}

a.FooterSharingIcon svg {
	width: 24px;
	height: 24px;
}

div.Footer * {
	font-style: normal;
	font-weight: 300;
	font-size: 12px;
	line-height: 16px;
}

div.Footer p {
	width: 100%;
	margin: 0;
	padding: 16px 0 16px 16px;
	text-align: left;
}

div.Footer a p {
	margin: 0;
}

div.Footer h2 {
	width: 100%;
	margin: 8px 0 0 0;
	padding: 16px 0 16px 16px;
	text-align: left;
	font-weight: 400;
}

div.Footer h2.NavigationPin,
div.Footer p.NavigationPin {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path style="fill:%23c0c0c0;stroke:none;" d="M3,2L17,10L3,18z"/></svg>');
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-position: left;
}

div.Footer a { opacity: 1; }
@media (hover:hover) {
	div.Footer a * { opacity: 0.7; }
	div.Footer a:hover, div.Footer a:hover * { opacity: 1; }
}


/* Code styles */

span.code,
table.code tr td,
table.code tr td * {
	font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
	font-size: 12px;
	overflow-wrap: break-word;
	white-space: pre-wrap;
}

span.code {
	padding: 3px;
	border-radius: 2px;
}

table.code {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 16px 0;
}

table.code.file {
	margin: 24px 0;
}

table.code tr th,
table.code tr td {
	padding: 0 8px;
	height: 16px !important;
}
table.code tr td:nth-last-child(2) {
	text-align: right;
	width: 20px;
	min-width: 20px;
	max-width: 64px;
}
table.code.file tr td:nth-last-child(2) {
	width: 40px;
	min-width: 40px;
	max-width: 64px;
}
table.code.file tr th a {
	font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
	font-size: 13px;
}
table.Circle tr td svg,
table.code.file tr th svg {
	margin: 0 0 -4px 0;
	display: inline;
	width: 14px !important;
	height: 14px;
}

table.code th,
table.code th a {
	text-align: left;
}

@media (hover:hover) {
	table.Circle tr td a:hover,
	table.code.file tr th a:hover { opacity: 1; }
}


/* Changes for wide viewports */


@media (min-width: 1024px) {

	ul { list-style-position: outside; }

	p.Image.Photo img { width: 178px; height: 178px; }
	
	div.Body { padding: 40px calc(50vw - 280px); }
	div.Body p.Caption { width: 60%; font-size: 20px; }
	div.Body h2 { width: 100%; margin-top: 40px; margin-bottom: 40px; font-size: 32px; }

	.ControlBar { padding: 5px 20px; }
	.ControlPanel, .ControlMenu.Info .ControlPanel { border-radius: 0 0 8px 8px; }
	.ControlMenu > div.ControlSection { width: 160px; }
	.ControlMenu > div.ControlSection.Close { width: 24px; }
	.ControlMenu.LastControlMenu > div.ControlSection { width: 120px; }
	.ControlMenu.Info > div.ControlSection { width: 184px; }
	
	div.Circle { padding: 10vw calc(50vw - 422px) calc(10vw + 100px) calc(50vw - 422px); min-height: 30vw; }
	div.Circle p { width: 100%; font-size: 32px; }

	div.Title { padding: calc(3vw + 70px) calc(50vw - 462px) 90px calc(50vw - 462px); margin-bottom: 60px; }
	div.Title h1 { width: 100%; font-size: 36px; }
	div.Title p.Caption { width: 60%; font-size: 20px; }
	div.Title.HasPanel { padding-bottom: 60px; padding-right: 540px; min-height: 360px; }
	div.Feature { height: calc(715px + 5vw); }
	div.Feature h1 { width: 80%; margin-left: calc(10vw - 72px); font-size: 48px; }
	div.Feature.Image h1 { padding-top: calc(5vw + 102px); margin-left: auto; }
	div.Feature p.Caption { width: 60%; font-size: 20px; padding-top: calc(5vw + 276px); margin-left: calc(10vw - 72px); }

	div.Showcase { padding: 40px calc(50vw - 760px); }
	div.Showcase div { width: 50%; padding: 40px; }
	div.Showcase:nth-child(odd) > div { float: left; }
	div.Showcase:nth-child(even) > div { float: right; }
	div.Showcase:nth-child(odd) > div > h2 { text-align: right; margin: 0; }
	div.Showcase:nth-child(even) > div > h2 { text-align: left; margin: 0; }
	
	div.Tiles { padding-left: calc(50vw - 760px); padding-right: calc(50vw - 760px); }

	div.Panel { width: 28vw; max-width: 448px; margin: 16px; }
	div.Tiles.EqualHeight div.Panel {
			height: calc(100% - 32px); display: flex; flex-direction: column; justify-content: space-between; }
	div.Tiles.EqualHeight div.Panel > div { margin-top: 0; }
	div.Tiles.EqualHeight div.Panel > div.BackgroundImage { margin-top: auto; }
	div.Panel h2 { width: 100%; font-size: 19px; margin-top: 0; margin-bottom: 30px; }
	div.Panel.Blog h2 { width: 60%; font-size: 22px; margin: 72px 0 40px 0; }
	div.Panel.Blog p, div.Panel.Blog li { font-size: 16px; }
	div.Panel.Double { width: calc(56vw + 32px); max-width: 928px; }
	div.Panel.Triple { width: calc(84vw + 64px); max-width: 1408px; }
	div.Panel.Full { width: 90vw; max-width: 928px; }
	div.Panel.Full > div { padding: 50px; }
	div.Panel.Full > div.BackgroundImage { padding: 0; }
	div.Panel.Flat { height: calc(520px - 20vw); min-height: 210px; }

	.Navigation { padding: 20px 44px; }
	.NavigationBar { max-height: 300px; display: block; width: auto; margin-left: 0; }
	.NavigationControl { display: none; float: right; }
	@media (hover:none) {
		div.NavigationClose {
			position: relative;
			display: block;
			float: right;
			width: 24px;
			height: 34px;
			margin-top: 6px;
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path style="fill:none;stroke:%23a0a0a0;stroke-linecap:round;stroke-width:3;" d="M4,4L16,16M4,16L16,4"/></svg>');
			background-size: 20px 20px;
			background-repeat: no-repeat;
			background-position: left 7px;
			cursor: pointer;
			transition: all 0.3s linear;
		}
		.Navigation input[type=radio]:checked + div.NavigationClose { width: 0; }
	}
	div.NavigationMenu { width: 150px; margin-left: 0; padding-top: 12px; }
	div.NavigationMenu:last-of-type { width: 160px; }
	div.NavigationPanel { height: auto; }
	div.NavigationMenu p,
	div.NavigationMenu p * { margin: 0; }
	div.NavigationPanel p { margin: 0 0 12px 0; }
	
	div.Footer { padding: calc(3vw + 50px) calc(50vw - 472px) 40px calc(50vw - 472px); }
	div.Footer div.FooterLeft { width: 348px; padding-right: 40px; }
	div.Footer div.FooterLeftBottom { position: absolute; bottom: 40px; left: calc(50vw - 472px); }
	div.Footer div.FooterCenter { width: 348px; min-height: 260px; padding-top: 0; margin-top: -8px; }
	div.Footer div.FooterRight { width: 234px; padding-top: 0; margin-top: -8px; }
	.FooterRulerTop { display: none; }

	span.code,
	table.code tr td,
	table.code tr td * { font-size: 14px; }
	table.code.file { margin: 48px 0; }
}