/* Raleway — brand font (self-hosted from /library/fonts). Previously referenced but never loaded. */
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 300; font-display: swap; src: url("/library/fonts/Raleway-Light.ttf") format("truetype"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; font-display: swap; src: url("/library/fonts/Raleway-Regular.ttf") format("truetype"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 600; font-display: swap; src: url("/library/fonts/Raleway-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; font-display: swap; src: url("/library/fonts/Raleway-Bold.ttf") format("truetype"); }

/* Metric-matched fallback. Overrides a local system font (Verdana/Arial) to report
   Raleway's exact vertical metrics (from the .ttf: unitsPerEm 1000, ascent 940,
   descent -234, lineGap 0), so the fallback line box is identical in height to
   Raleway. When Raleway swaps in there is no vertical layout shift. Use it right
   after "Raleway" in every stack: "Raleway", "Raleway Fallback", Verdana, sans-serif. */
@font-face {
	font-family: "Raleway Fallback";
	src: local("Verdana"), local("Arial");
	ascent-override: 94%;      /* 940 / 1000 */
	descent-override: 23.4%;   /* 234 / 1000 */
	line-gap-override: 0%;
}

:root {
	--background-color: #fafafa;
	--header-background-color: #FFFFFF;
	--left-background-color: #2e373e;
	--toolbar-background-color: #e0e0e0;
	
	--header-border-color: #f3f4f5;
	
	--box-background-color: #FFFFFF;
	
	--button-background-color: #18333c;
	--button-text-color: #FFFFFF;

	--red: #B91515;
	
	--color-red: #db5461;
	--color-white: #fafafa;
	--color-blue: #02627f;
	--color-dark-blue: #011627;
	--color-grey: #808080;
	--color-light-grey: #f8f9fb;
	--color-light-blue: #e3f2fd;
	--color-orange: #db7f67;
	--color-green: #a5db54;
	--color-black: #20272C;
	--color-yellow: #f39c12;
	--color-light-yellow: #f4a62a;
	--color-grey-border: #d5d5d5;
}

body {
	background-color: #fafafa;
	font: 14px "Raleway", "Raleway Fallback", Verdana, sans-serif;
	color: #000000;
}

/* Main Section Definitions */

body {
	display: grid;
	grid-template-areas: "topHeader"
						"mainContent"
						"footer";
	overflow-x: hidden;
	grid-template-columns: 100%;
}

@media (max-width: 59.9rem) {
	body {
		grid-template-rows: 4rem auto auto;
	}
}

@media (min-width: 60rem) {
	body {
		grid-template-rows: 5rem auto auto;
	}
}


header#topHeader {
	display: table; /* Compatibility */
	grid-area: topHeader;
	background-color: #0c2b33;
	display: grid;
}

@media (max-width: 59.9rem) {
	
	header#topHeader {
		height: 2rem;
		width: calc(100% - 2rem);
		padding: 1rem;
		grid-template-columns: auto 2rem;
		grid-template-rows: 2rem auto;
		grid-template-areas: "logo button" "nav nav" "contact contact";
	}
	
	section#leftBar div.siteName {
		display: inline-block;
	}
	
	div.loginForm {
		display: none;
	}
	
	div.contactMethods { 
		display: none;
	}
	
	header#topHeader menu {
		grid-area: nav;
		display: none;
		height: 100%;
		width: 100%;
		z-index: 500;
		position: absolute;
		top: 4rem;
		right: -100%;
		background-color: #2e373e;
	}
	
	header#topHeader menu.shown {
		display: block;
	}
	
	header#topHeader menu a {
		display: block;
	}
	
	header#topHeader div.mobile-menu {
		display: inline-block;
		float: right;
		grid-area: button;
	}

	header#topHeader div.mobile-menu img {
		height: 1.8rem;
		cursor: pointer;
	}

	header#topHeader div.mobile-menu:hover img {
		filter: contrast(50) !important;
	}
}

@media (min-width: 60rem) {
	
	body#body_register header#topHeader div.loginForm {
		display: none !important;
	}
	
	header#topHeader div.mobile-menu {
		display: none;
	}
	
	header#topHeader {
		height: 3rem;
		grid-template-columns: 10rem 28rem minmax(auto, 32rem) auto;
		grid-template-areas: "logo nav login contact";
		padding: 1rem 6rem 1rem 1rem; /* Fix for tablets to prevent login form squishing */
		width: calc(100% - 7rem);
	}
	
	section#leftBar div.siteName {
		display: inline-block;
	}
	
	header#topHeader menu {
		display: table-cell;
		grid-area: nav;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	header#topHeader menu a[data-mobile-login-link] { display: none; }
	
	div.loginForm {
		display: table-cell;
		vertical-align: middle;
		justify-self: center;
		align-self: center;
	}
	
	div.contactMethods {
		display: table-cell;
		grid-area: contact;
		vertical-align: middle;
		justify-self: center;
		align-self: center;
		color: #02627f;
		font-size: 0.8em;
	}
	
	div.contactMethods i {
		display: inline-block;
		padding: 0.5em;
		font-size: 2em;
	}
	
	div.contactMethods div.cmText {
		display: inline-block;
	}
	
	div.contactMethods a, div.phoneButton a:visited {
		display: block;
		color: #808080;
		padding: 0.5em;
		transition: all 0.2s;
		text-align: center;
	}
	
	div.contactMethods a:hover {
		transition: all 0.2s;
		background-color: #02627f;
		color: #FFF;
	}
	
}

section#mainContent {
	grid-area: mainContent;
	/*padding-bottom: 10em; */
}

/* Left Bar */

div.siteName {
	grid-area: logo;
	color: #db5461;
}

div.siteName img {
	display: block;
	height: 3em;
	margin: auto;
}

div.siteName a {
	color: inherit;
}

div.siteName h1 {
	font-size: 1em;
}


/* Top Header */

header#topHeader menu a {
	border: 1em solid transparent;
	color: #cfe0e4;
	font-weight: 600;
	transition: all 0.3s;
}

header#topHeader menu a.selected {
	color: #FFFFFF;
}

header#topHeader menu a:hover {
	background-color: var(--color-blue);
	color: #FFF;
}

header#topHeader div.loginForm {
	grid-area: login;
}

header#topHeader div.loginForm input[type='submit'] {
	width: 80px;
}

/* And now some standard box stuff */

/* A container is a row */
section.container {
	display: flex;
	margin: 10px;
	width: calc(100% - 1rem);
	min-height: 80px;
}

section.container ~ section.container {
	margin-top: 10px;
}

section.container.center {
	justify-content: center;
}

section.container.right {
	justify-content: flex-end;
}

section.container.spread {
	justify-content: space-evenly;
}


/* Skews */
div.skewContainer {
	display: block;
	position: relative;
	width: 100%;
}

div.skewContainer svg.top {
	position: absolute;
	top: -5em;
	height: 5em;
	width: 100%;
}

div.skewContainer svg.bottom {
	position: absolute;
	bottom: -5em;
	height: 5em;
	width: 100%;
}


/* Highlight Containers */

div.highlightContainer {
	width: calc(100% - 2em);
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	justify-content: center;
	padding: 5em 1em;
}

div.highlightContainer.dark {
	background-color: #20272c;
	color: #FFF;
}

div.highlightContainer h2, div.highlightContainer > p {
	flex: 1 0 100%;
	padding: 1em;
}

div.highlightContainer div.hItem {
	flex: 0 0 calc(25% - 1em);
	padding: 0.5em;
}

div.highlightContainer.thirds div.hItem {
	flex: 0 0 calc( 30% - 1em);
}

@media (max-width: 59.9rem) {
	
	div.highlightContainer div.hItem {
		flex: 1 0 90% !important;
	}
}

div.highlightContainer div header {
	font-size: 3em;
	opacity: 0.2;
}

div.highlightContainer div h3 {
	margin: 1em 0;
	color: #db5461;
}

/* A box is a white block */

div.boxWrapper {
	width: calc(100% - 2rem);
}

div.boxWrapper.standard {
	max-width: 78rem;
}

div.boxWrapper.small {
	max-width: 28.5rem;
}

div.boxWrapper.medium {
	max-width: 57rem;
}

div.boxWrapper.full {
	max-width: 90%;
}

div.boxWrapper header {
	display: block;
	width: 100%;
	height: 20px;
	margin: 10px 0;
}

div.boxWrapper header h3 {
	font-size: 20px;
}

div.boxWrapper ~ div.boxWrapper {
	margin-left: 10px;
}

div.box {
	display: block;
	background-color: var(--box-background-color);
	padding: 1rem;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

/* Text modifiers */

div.box h2 {
	margin-bottom: 10px;
}

div.box h3, div.box h4 {
	margin-bottom: 5px;
}

div.box p {
	margin: 5px;
}

div.box ul {
	margin: 5px;
}

div.box ul li {
	list-style: circle !important;
	margin-left: 20px;
}

/* Table Styling */
tr.notice td {
	
}

/* bREADCRUMBS */
nav.breadcrumbs {
	display: block;
	width: calc(100% - 1.5em);
	font-size: 0.8em;
	padding: 0.8em 0.5em 0.8em 2em;
}

nav.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

nav.breadcrumbs li:not(:first-of-type)::before {
    display: inline-block;
    content: "/";
    padding: 0 0.5em;
}

section#mainContent a.button {
	display: block;
	width: 10em;
	text-align: center;
	background-color: #02627f;
	color: #FFFFFF !important;
	padding: 0.5em;
	margin: 0.25em;
	border-radius: 5px;
	cursor: pointer;
}

img.largeBorder {
	display: block;
	border-radius: 5px;
	border: 2px solid #000 !important;
	max-height: 26em;
	max-width: 80vw !important;
	background-color: #FFF;
}

img.mediumBorder {
	display: block;
	border-radius: 5px;
	border: 2px solid #000 !important;
	background-color: #FFF;
}

img.smallBorder {
	display: block;
	border-radius: 5px;
	border: 2px solid #000 !important;
	background-color: #FFF;
}

@media (max-width: 59.9rem) {
	img.mediumBorder { max-width: 80% !important; }
	img.smallBorder { max-width: 80% !important; }
}

@media (min-width: 60rem) {
	img.mediumBorder { max-width: 40vw !important; }
	img.smallBorder { max-width: 20vw !important; }
}

/* Fact Blocks */

div.factBlocks {
	display: grid;
	text-align: left;
	grid-template-columns: 25em;
	/*grid-template-rows: 1fr;*/
	grid-gap: 1em;
	align-items: center;
	justify-items: start;
}

div.factBlocks.double {
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 59.9rem) {
	div.factBlocks, div.factBlocks.double {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
	}
}

div.factBlocks > div {
	padding: 1em;
}

div.factBlocks header {
	font-size: 1.1em;
	font-weight: 700;
	margin-bottom: 0.5em;
}

div.factBlocks header i {
	margin-right: 1em;
}

div.factBlocks span {
	display: block;
	font-size: 0.8em;
	margin-left: 0;
	opacity: 0.8;
}

div.factBlocks span.factNumber {
	font-size: 140%;
	font-weight: 700;
	color: #02627f;
}

div.wrapper {
	max-width: 80rem;
	padding: 0 2em;
	margin: auto;
}
@media (max-width: 59.9rem) {
	div.wrapper {
		max-width: calc(100% - 1em);
		padding: 0 1em;
	}
}

/* Overscan */
div#overscan {
	display: block;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 40;
	background-color: rgba(0, 0, 0, 0.6);
}	
/* Overscan Header Placeholders */
div#overscan section header[data-placeholder] {
	display: block;
	color: #FFFFFF;
	width: calc(100% - 2em);
	height: 3.5em;
	padding: 1em;
	background: linear-gradient(rgb(1,38,50,.5), rgb(1,38,50,.8)), url('/themes/images/abstract2.png');
}

div#overscan section#viewBlock {
	
	background-color: #FFFFFF;
	border-radius: 3px;
	margin: auto;
	z-index: 50;
	position: relative;
	width: 57em;
	max-height: 80%;
	box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.5);
	top: 15%;
	max-width: calc(100% - 15em);
}

@media (max-width: 59.9rem) {
	
	div#overscan section#viewBlock {
		top: 0;
		width: 100% !important;
		height: 100% !important;
		max-height: initial;
		min-height: 25em;
		padding: 0;
		max-width: unset;
	}
	
}

div#overscan section#viewSlide {
	display: block;
	position: fixed;
	top: 2em;
	bottom: 2em;
	right: -40rem;
	width: 40rem;
	background-color: #FFFFFF;
	z-index: 45;
	box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.5);
	padding-bottom: 8em;
}

@media (max-width: 59.9rem) {
	div#overscan section#viewSlide {
		width: calc(100% - 3em) !important;
	}
}

div#overscan section#viewSlide > section {
	display: block;
	width: calc(100% - 2em);
	height: calc(100% - 2em);
	padding: 1em;
	overflow-y: auto;
}

div#viewTopAction {
	display: block;
	position: absolute;
	right: -1em;
	top: -1em;
	z-index: 175;
}

div#viewTopAction input {
	height: 2em;
	width: 2em;
	border: 2px solid #FFFFFF;
	color: #FFFFFF;
	background-color: #000000;
	border-radius: 50%;
}

div#viewTopAction #viewCloseMobile {
	display: none;
}

@media (max-width: 59.9rem) {
	
	div#viewTopAction {
		top: 0.5em;
		right: initial;
		left: 0.5em;
		width: 3em;
		height: 3em;
	}
	
	div#viewTopAction #viewCloseMobile {
		display: block;
		color: #FFF;
		cursor: pointer;
		transition: all 0.2s;
		text-align: center;
		padding: 1em;
		font-size: 1.2em;
	}
	
	div#viewTopAction #viewCloseMobile:hover {
		color: #18333c;
	}
	
	
	div#viewTopAction input#viewClose {
		display: none;
	}
}

div#viewTopAction input:hover {
	filter: none;
	background-color: #c0c0c0;
}



div#overscan div.boxHeader {
	color: #FFFFFF;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 5.5em;
	padding: 0;
	z-index: 60;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

div#overscan div.boxHeader header {
	display: flex;
	padding: 1.5em;
	justify-content: right;
	grid-gap: 1em;
}

div#overscan div.boxHeader header > div {
	text-align: right;
}

@media (max-width: 59.9rem) {
	div#overscan div.boxHeader header {
		padding: 1.5em 0.5em;
	}
}

@media screen and (orientation: landscape) {
	/*
	div#overscan div.headerPlaceholder {
		display: none;
	}
	
	div#overscan div.boxHeader {
		position: relative;
	}
	*/
}

div#overscan div.boxHeader header h2 {
	margin-bottom: 0.2em;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

div#overscan div.boxHeader header[data-with-buttons] menu {
	display: flex;
	grid-gap: 0.5em;
}

div#overscan div.boxHeader header[data-with-buttons] menu input {
	display: block;
	background-position: center center;
  background-size: 1em;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,0.5);
  border-radius: 5px;
	width: 2em;
	height: 2em;
}

div#viewContent {
	height: calc(100% - 3em);
	overflow-y: auto;
	overflow-x: hidden;
}

div#viewContent.noScroll {
	overflow-y: hidden;
}

div#viewContent.noScroll > form {
	height: calc(100% - 5em); /* Minus the bottom bar */
}

div#osRibbon+div#viewContent {
	height: calc(100% - 4.3em);
}

div#osRibbon+div#viewContent+div#viewBottomAction {
	height: 3em;
	padding: 0.5em 0;
}

@media (max-width: 59.9rem) {
	div#overscan section#viewBlock div#viewContent > section {
		padding: 0.5em;
	}
}

div#viewContent > div:not(.boxHeader) {
	overflow-y: auto;
}

div#viewContent div.formLoopGroup {
	overflow-y: auto;
}

div#overscan div#viewContent div.formGroup {
	display: block;
	padding: 0.5em;
}

div#viewBottomAction {
	width: 100%;
	height: 3em;
	display: flex;
	justify-content: center;
}

div#viewBottomAction input {
	height: 2em;
	border-radius: 5px;
	padding: 0 1.2em;
	background-color: #18333c;
	color: #FFFFFF;
	transition: all 0.2s
}

div#viewBottomAction input ~ input {
	margin-left: 1em;
}

div#viewBottomAction input:not(:last-of-type) {
	background-color: #eeecee;
	color: #000;
}

@media (max-width: 59.9rem) {
	
	div#viewContent {
		height: calc(100% - 1em);
		/*margin-bottom: 8em;*/
	}
	
	div#viewContent > * {
		padding-bottom: 6em;
	}
	
	div#viewBottomAction {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 4em;
		background-image: linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1) 60%)
		/*background-color: rgba(255, 255, 255, 0.1);
		-webkit-box-shadow: 0px -1em 1em 2em rgba(255,255,255,0.8);
		-moz-box-shadow: 0px -1em 1em 2em rgba(255,255,255,0.8);
		box-shadow: 0px -1em 1em 2em rgba(255,255,255,0.8);
		*/
	}
	
}

div#viewBottomAction input:hover {
	background-color: #02627f !important;
	color: #FFF !important;
	filter: none !important;
}



table.list {
	width: 100%;
	table-layout: fixed;
	min-height: 100px;
	border: 0;
	border-collapse: collapse;
}

table.list thead tr th {
	padding: 10px;
	border-bottom: 2px solid var(--color-light-grey);
	text-align: left;
}

table.list thead tr th:last-of-type { text-align: right; }
table.list tbody tr td:last-of-type { text-align: right; }

table.list tbody td {
	padding: 5px;
}

table.list tbody tr:hover {
	cursor: pointer;
	background-color: var(--color-light-grey);
}


/* Registration Page */
@media (max-width: 59.9rem) {
	body#body_register div.formLoopGroup span.fieldGroup {
		flex-wrap: wrap;
		margin-bottom: 1em;
		background-color: #f8f9fb;
		padding: 0.5em 2.3em 0.5em 0.5em;
	}
	
	body#body_register div.formLoopGroup > span.fieldGroup:nth-of-type(n+3) div label {
		display: block;
	}
	
	body#body_register div.formLoopGroup span.fieldGroup menu input.remove {
		right: 0.3em;
	}
	
	body#body_register div.formLoopGroup span.fieldGroup menu {
		position: initial;
	}

}

div#registerButton {
	display: block;
	padding: 4em 1em;
	width: calc(100% - 2em);
	text-align: center;
	background-color: #fafafa;
}

div#registerButton p {
	margin: 1em;
}

div#registerButton a, div#registerButton a:visited {
	display: inline-block;
	border-radius: 5px;
	padding: 0.8em;
	background-color: #02627f;
	color: #FFF !important;
}

div#registerButton a:hover {
	filter: saturate(7);
}


/* Public Article Listing */

div.articleList {
	display: block;
	padding: 2em;
}

div.articleList h3 {
	display: block;
	width: 100%;
	padding: 1em;
	text-align: center;
	color: #18333c;
}

div.articleListItems {
	display: grid;
	justify-content: center;
	grid-template-columns: repeat(3, minmax(10em, 25em));
	margin: auto;
	grid-gap: 1em;
}

@media (max-width: 59.9rem) {
	div.articleListItems {
		grid-template-columns: minmax(10em, 20em);
	}
}

div.artWrapper {
	padding: 1em;
	height: calc(100% - 2em);
	background-color: #FFF;
}

div.artWrapper > a {
	display: block;
	width: 100%;
	height: 100%;
}

div.artWrapper figure {
	display: block;
	margin: 0;
	padding: 0;
}

div.artWrapper img {
	display: block;
	width: 100%;
	height: 15em;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	object-fit: cover;
}

div.artWrapper header {
	display: block;
	margin: 1em 0.5em;
	font-size: 1.2em;
}

div.artWrapper p {
	display: block;
	margin: 2em 1em;
	font-size: 0.8em;
	color: #9e9e9e;
	font-weight: 500;
}

div.artWrapper div.subText {
	font-size: 0.5em;
	color: #9e9e9e;
	font-weight: 500;
	font-size: italic;
	display: block;
	width: 100%;
	text-align: right;
}


div.articleListItemsSmall {
	display: grid;
	justify-content: center;
	grid-template-columns: repeat(2, minmax(5em, 25em));
	margin: auto;
	grid-gap: 0.5em;
}

@media (max-width: 59.9rem) {
	div.articleListItemsSmall {
		grid-template-columns: minmax(10em, 20em);
	}
}

div.articleListItemsSmall div.artWrapper {
	padding: 0.5em;
	height: calc(100% - 1em);
	background-color: #FFF;
	position: relative;
}

div.articleListItemsSmall div.artWrapper header {
	display: block;
	margin: 0.5em 0.5em;
	font-size: 1em;
}

div.articleListItemsSmall div.artWrapper p {
	display: block;
	margin: 2em 1em;
	font-size: 0.8em;
	color: #9e9e9e;
	font-weight: 500;
}

div.articleListItemsSmall div.artWrapper div.ccTitle {
	display: block;
	position: absolute;
	width: calc(100% - 1em);
	bottom: 0.25em;
	right: 0.5em;
	text-align: right;
	font-size: 0.8em;
	color: #9e9e9e;
	font-weight: 500;
	font-style: italic;
}

/* App Download Buttons */
div.buttonDownloads {
	display: flex;
	justify-content: center;
	width: 100%;
	min-height: 83px;
}

div.buttonDownloads > div {
	padding: 1em;
}

@media (max-width: 59.9rem) {
	div.buttonDownloads > div {
		padding: 1em 0.5em;
	}
}

div.buttonDownloads img {
	display: block;
	height: 2.5em !important;
	max-width: 100% !important;
}

div.buttonDownloads div[data-google] img {
	
}

/* Footer */

footer#bottomFooter {
	display: block;
	grid-area: footer;
	padding: 3em 0;
	font-size: 0.8em;
	color: #a9c2c8;
	text-align: center;
	background-color: #0c2b33;
	margin-top: 0;
}

footer#bottomFooter div.skewContainer {
}

footer#bottomFooter svg.top {
	position: absolute;
	left: 0;
	top: -5em;
	height: 5em;
	width: 100%;
	background-color: #fafafa;
}

footer div.socialIcons {
	font-size: 1rem;
	display: flex;
	margin: 2em;
	justify-content: center;
}

footer div.socialIcons div.socialItem {
	flex: 0 0 2em;
	min-height: 2em;
	background-color: #db5461;
	border-radius: 50%;
	margin: 1em;
	transition: background-color 0.3s ease;
}

footer div.socialIcons div.socialItem:hover {
	background-color: var(--color-blue);
}

footer#bottomFooter div.socialIcons div.socialItem a, footer#bottomFooter div.socialIcons div.socialItem a:visited {
	color: #20272C;
	width: 100%;
	height: 100%;
	display: block;
}

footer#bottomFooter div.socialIcons div.socialItem i {
	margin: 0.5em;
}

footer div.footerLinks {
	margin: 4em 0;
}

footer div.footerLegal {
	margin: 4em 1em;
}

footer div.footerLinks {
	display: flex;
}

footer div.footerLinks li {
	margin: 0.2em 0;
}

footer div.footerLinks .flLeft {
	display: flex;
	flex: 1 0 75%;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 1rem;
}

div.flwrapper div.flheader {
	border: 1em solid transparent;
	flex: 1 0 calc(30% - 2em);
}

div.flheader span {
	display: block;
	padding: 0.5em;
}

div.flheader ul+span {
	margin-top: 1em;
}

div.footerLogo {
	text-align: right;
	flex: 1 0 calc(25% - 5em);
	align-self: center;
	font-size: 1rem;
	padding: 2.5em;
}

div.footerLogo img.barsightFooterLogo {
	display: inline-block;
	margin: 1em;
	height: 6em;
}

div.footerLogo h4 {
	display: block;
	margin: 0.5em 1em;
}

div.footerLogo ul li {
	display: flex;
	padding-right: 1em;
	margin: 1em 0;
	font-size: 0.8em;
}

div.footerLogo ul li b {
	flex: 0 0 50%;
}

div.footerLogo ul li a {
	flex: 0 0 50%;
}

@media (max-width: 59.9rem) {
	footer div.footerLinks {
		flex-wrap:wrap;
	}
	
	footer div.footerLinks .flLeft, footer div.footerLinks .footerLogo {
		flex: 0 0 calc(100% - 2em);
		padding: 1em;
	}
	
	footer div.footerLinks .flLeft .flheader {
		flex: 1 0 100%;
	}
	
	footer div.footerLinks li {
		margin: 0.3em 0;
	}
	
	footer div.footerLinks .footerLogo {
		text-align: center;
	}
	
}

footer div.footerSupporters ul {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
}

footer div.footerSupporters li {
	padding: 1em;
}

footer div.footerSupporters img {
	max-height: 9em;
	min-width: 85px;
}

footer#bottomFooter a, footer#bottomFooter a:visited {
	color: #fafafa;
	transition: color 0.3s ease;
}

footer#bottomFooter a:hover {
	color: var(--color-blue);
}

footer#bottomFooter p {
	margin: 1em auto;
}

footer#bottomFooter div.socialIcons, a, footer#bottomFooter div.socialIcons a:visited {
	font-weight: bold;
	color: #db5461;
}

footer#bottomFooter div.footerLinks.bigLinks a, footer#bottomFooter div.footerLinks.bigLinks a:visited { font-weight: 700; }
footer#bottomFooter div.footerLinks.smallLinks a, footer#bottomFooter div.footerLinks.smallLinks a:visited { font-weight: 300; }

footer#bottomFooter div.footerLegal a:hover {
	color: var(--color-blue);
	transition: color 0.3s ease;
}


/* Login Page Mod */
body#body_login section.container div.formSubGroup.right.flex {
	margin-top: 1em;
}