/* CSS Document */

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
@import url("https://fonts.googleapis.com/css?family=Oswald:300");
@import url("https://fonts.googleapis.com/css?family=Syncopate");

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

/* -- General ---------------------------------------------------------- */

:root {
	--surface-0-color: #f3f2ee;
	--surface-1-color: #b5e9f5;
	--surface-2-color: #126f84;
	--surface-4-color: #0b4450;

	--accent-1-color: #FF9F00;	/* orange peel */

	--on-surface-color-level-0L: rgba(255, 255, 255, 0.10);  /* dim outline */
	--on-surface-color-level-1L: rgba(255, 255, 255, 0.30);  /* disabled */
	--on-surface-color-level-2L: rgba(255, 255, 255, 0.45);  /* low emphasis */
	--on-surface-color-level-3L: rgba(255, 255, 255, 0.65);  /* medium emphasis */
	--on-surface-color-level-4L: rgba(255, 255, 255, 0.75);  /* high emphasis */
	--on-surface-color-level-5L: rgba(255, 255, 255, 0.90);  /* focus */

	--on-surface-color-level-0D: rgba(0, 0, 0, 0.10);  /* dim outline */
	--on-surface-color-level-1D: rgba(0, 0, 0, 0.30);  /* disabled */
	--on-surface-color-level-2D: rgba(0, 0, 0, 0.45);  /* low emphasis */
	--on-surface-color-level-3D: rgba(0, 0, 0, 0.65);  /* medium emphasis */
	--on-surface-color-level-4D: rgba(0, 0, 0, 0.75);  /* high emphasis */
	--on-surface-color-level-5D: rgba(0, 0, 0, 0.90);  /* focus */

	--surface-1-shadow:
		0px 1px 2px rgba(0, 0, 0, 0.33),
		0px 0px 2px -1px rgba(0, 0, 0, 0.11);
	--surface-2-shadow:
		0px 2px 4px rgba(0, 0, 0, 0.33),
		0px 0px 4px -2px rgba(0, 0, 0, 0.11);
	--surface-3-shadow:
		0px 3px 6px rgba(0, 0, 0, 0.33),
		0px 0px 6px -3px rgba(0, 0, 0, 0.11);
	--surface-4-shadow:
		0px 4px 8px rgba(0, 0, 0, 0.33),
		0px 0px 8px -4px rgba(0, 0, 0, 0.11);
}

html {
	overscroll-behavior: none;

	box-sizing: border-box;
}

*, *:before, *:after {
	overscroll-behavior: inherit;

	box-sizing: inherit;

	padding: 0;
	margin: 0;
}

/* -- Body ------------------------------------------------------------- */

body {
	width: 100vw;
	height: 100vh;

	background-color: var(--surface-0-color);

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

/* Fix for ios Safari issue. */
@supports (-webkit-touch-callout: none) {
	body {
		height: -webkit-fill-available;
	}
}

/* -- Page ------------------------------------------------------------- */

.Page {
	flex: auto;

	width: 100%;
	height: 100%;

	background-color: transparent;

	overflow-x: hidden;
	overflow-y: auto;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

.PageBanner {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
		url(../images/banner.jpg
	);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* -- Header Section --------------------------------------------------- */

.HeaderSection {
	flex-shrink: 0;

	position: fixed;
	top: 0px;

	width: 100%;
	height: auto;

	background-color: var(--surface-4-color);

	box-shadow: var(--surface-4-shadow);

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.HeaderSectionTransparent {
	background-color: transparent;

	box-shadow: none;
}

#HeaderSectionContainer {
	flex-shrink: 0;

	width: 100%;
	max-width: 1024px;
	height: auto;

	background-color: transparent;

	padding-left: 15px;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#HeaderLogo {
	width: auto;
	height: 80px;

	margin-right: 10px;
}

#HeaderNavBar {
	flex: 1 0 auto;

	background-color: transparent;

	border-bottom: 1px solid var(--on-surface-color-level-1L);

	padding-right: 5px;
	padding-bottom: 5px;

	margin-bottom: -8px;

	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

#HeaderNavBar > a {
	color: var(--on-surface-color-level-4L);
	background-color: transparent;

	font-family: Syncopate, sans-serif;
	font-weight: normal;
	font-size: 0.75em;
	letter-spacing: 1px;

	text-transform: uppercase;
	text-decoration: none;

	display: inline-block;

	margin-left: 20px;
}
#HeaderNavBar > a:hover {
	color: var(--on-surface-color-level-5L);
}
#HeaderNavBar > a:focus {
	color: var(--on-surface-color-level-5L);
}

/* -- Footer Section --------------------------------------------------- */

.FooterSection {
	flex-shrink: 0;

	width: 100%;
	height: auto;

	background-color: transparent;

	margin-top: auto;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
.FooterSection.NonTransparent {
	background-color: var(--surface-0-color);
}

#FooterSectionContainer {
	flex-shrink: 0;

	width: 100%;
	max-width: 1024px;
	height: auto;

	background-color: transparent;

	padding-left: 15px;
	padding-right: 15px;
	padding-top: 30px;
	padding-bottom: 10px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#FooterRow1 {
	flex-shrink: 0;

	width: 100%;
	height: auto;

	background-color: transaprent;

	padding-bottom: 8px;

	display: flex;
	flex-direction: row;
	justify-content: center; 
	align-items: center;
}

#FooterRow2 {
	flex-shrink: 0;

	width: 100%;
	height: auto;

	background-color: transparent;

	border-top: 1px solid var(--on-surface-color-level-0D);

	padding-top: 10px;

	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

#FooterSocialMediaLinks {
	flex-shrink: 0;

	background-color: transparent;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#FooterSocialMediaLinks > li {
	list-style-type: none;
}

#FooterSocialMediaLinks > li img {
	width: 25px;
	height: auto;

	border-radius: 50%;

	margin-left: 8px;
	margin-right: 8px;
}
#FooterSocialMediaLinks > li img:hover {
	box-shadow: var(--surface-1-shadow);
}
#FooterSocialMediaLinks > li img:focus {
	box-shadow: var(--surface-1-shadow);
}

#FooterLinks {
	flex-shrink: 0;

	background-color: transparent;

	margin-left: 15px;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#FooterLinks > li {
	list-style-type: none;
}
#FooterLinks > li + li:before {
	color: var(--on-surface-color-level-1D);
	background-color: transparent;

	content: "|";

	padding-left: 8px;
	padding-right: 4px;
}

#FooterLinks > li > a {
	color: var(--on-surface-color-level-2D);
	background-color: transparent;

	font-family: Open Sans, sans-serif;
	font-weight: normal;
	font-size: 0.75em;

	text-decoration: none;

	display: inline-block;
}
#FooterLinks > li > a:hover {
	color: var(--on-surface-color-level-3D);
}
#FooterLinks > li > a:focus {
	color: var(--on-surface-color-level-3D);
}

#FooterCopyrightMsg {
	color: var(--on-surface-color-level-2D);
	background-color: transparent;

	font-family: Open Sans, sans-serif;
	font-weight: normal;
	font-size: 0.75em;

	text-decoration: none;

	display: inline-block;

	margin-right: 15px;
}