@font-face 
{
	font-family: 'Inter';
	src: url(../Font/InterVariable.ttf);
}

:root
{
	--Brand1: #426687;
	/* Contrast palette dark blue */
	--Brand2: #84C1D9;
	/* Contrast palette mid blue */
	--Brand3: #BEDDEA;
	/* Contrast palette light blue */
	--Black: #000000;
	--Dark: #313030;
	/* Main palette dark grey */
	--Medium: #364d62;
	/* Old palette medium grey */
	--Light: #F3F3F3;
	/* Main palette pale grey */
	--White: #ffffff;
	--Contrast: #F66D4F;
	/* Contrast palette orange */
	--Exploration: #497750;
	/* Exploration darkest colour */
	--Geology: #117070;
	/* Geology darkest colour */
	--Planning: #BF564F;
	/* Planning darkest colour */
	--Production: #C56A37;
	/* Production darkest colour */
	--Laboratories: #3C4095;
	/* Laboratories darkest colour */
	--Sustainability: #1B6EAD;
	/* Sustainability darkest colour */
	--Generic: #608BA6;
	/* Generic darkest colour */
}

body
{
	font-family: Inter;
	font-size: 10pt;
	margin: 0px;
	height: 100vh;
	background-color: var(--Dark);
}

div.portal-banner
{
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--Light);
	font-weight: bold;
}

.portal-banner > a:hover
{
	text-decoration: none;
}

.portal-banner-heading
{
	font-size: 20pt;
}

img.portal-banner-logo
{
	margin: 30px 30px 30px 0px;
}

.portal-content
{
	padding: 2% 5%;
	background-color: var(--Light);
}

div.portal-heading
{
	margin-right: 30px;
}

div.portal-heading > img
{
	margin-top: 15px;
}

div.portal-heading > h1
{
	font-weight: bold;
	color: var(--Dark);
	font-size: 16pt;
	text-decoration: none;
}

div.portal-flex-note,
div.portal-flex-promo,
div.portal-flex-buttons
{
	display: flex;
	flex-wrap: wrap;
 }

div.portal-flex-note > div
{
	flex-basis: 10em;
	flex-grow: 1;
	text-align: left;
	font-size: 14pt;
	margin-bottom: 15px;
	padding-left: 25px;
	padding-right: 25px;
	padding-top:25px;
	background-color: var(--Dark);
	color: var(--White);
}

div.portal-flex-note > div > img
{
	width: 50px;
	height: 50px;
	float: left;
	padding-top: 5px;
	margin-right: 25px;
	margin-bottom: 25px;
}

div.portal-flex-note > div > p
{
	margin-top: 0px;
	margin-bottom: 25px;
}

div.portal-flex-promo > div
{
	flex-basis: 10em;
	flex-grow: 1;
	text-align: left;
	font-size: 14pt;
	margin-bottom: 15px;
	padding-left: 50px;
	padding-right: 50px;
	padding-top:50px;
	background-color: var(--Dark);
	color: var(--White);
}

div.portal-flex-promo > div > img
{
	height: 100px;
	float: left;
	padding-top: 5px;
	margin-right: 50px;
	margin-bottom: 50px;
}

div.portal-flex-promo > div > p
{
	margin-top: 0px;
	margin-bottom: 50px;
}

div.portal-flex-buttons > a
{
	flex-basis: 19em;
	flex-grow: 0;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	margin-left: 2em;
	margin-right: 0em;
	margin-top: 1em;
	margin-bottom: 1em;
	padding: 1em;
	background-color: var(--White);
	color: var(--Dark);
	box-shadow: 0 5px 10px rgba(0,0,0,0.25);
	transition: all 0.3x;
}

div.portal-flex-buttons > div
{
	flex-basis: 19em;
	flex-grow: 0;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	margin-left: 2em;
	margin-right: 0em;
	margin-top: 1em;
	margin-bottom: 1em;
	padding: 1em;
	background-color: var(--White);
	color: var(--Dark);
	box-shadow: 0 5px 10px rgba(0,0,0,0.25);
	transition: all 0.3x;
}

div.portal-flex-buttons > div:hover
{
	background-color: var(--Dark);
	color: var(--White);
	box-shadow: 0 12px 24px rgba(0,0,0,0.5);
}

div.portal-flex-buttons > a:hover
{
	background-color: var(--Dark);
	color: var(--White);
	box-shadow: 0 12px 24px rgba(0,0,0,0.5);
}

div.portal-flex-buttons > div > img
{
	padding-right: 16px;
	display: inline-block;
	vertical-align: middle;
}

div.portal-flex-buttons > a > img
{
	padding-right: 16px;
	display: inline-block;
	vertical-align: middle;
}

.portal-flex-buttons-active-datamine
{
	border-top: 5px solid var(--Brand1);
}

.portal-flex-buttons-active-exploration
{
	border-top: 5px solid var(--Exploration);
}

.portal-flex-buttons-active-geology
{
	border-top: 5px solid var(--Geology);
}

.portal-flex-buttons-active-planning
{
	border-top: 5px solid var(--Planning);
}

.portal-flex-buttons-active-production
{
	border-top: 5px solid var(--Production);
}

.portal-flex-buttons-active-laboratories
{
	border-top: 5px solid var(--Laboratories);
}

.portal-flex-buttons-active-sustainability
{
	border-top: 5px solid var(--Sustainability);
}

.portal-flex-buttons-active-generic
{
	border-top: 5px solid var(--Generic);
}

.ext-link-datamine
{
	margin-left: 6px;
	color: var(--Brand1);
}

.ext-link-exploration
{
	margin-left: 6px;
	color: var(--Exploration);
}

.ext-link-geology
{
	margin-left: 6px;
	color: var(--Geology);
}

.ext-link-planning
{
	margin-left: 6px;
	color: var(--Planning);
}

.ext-link-production
{
	margin-left: 6px;
	color: var(--Production);
}

.ext-link-laboratories
{
	margin-left: 6px;
	color: var(--Laboratories);
}

.ext-link-sustainability
{
	margin-left: 6px;
	color: var(--Sustainability);
}

.ext-link-generic
{
	margin-left: 6px;
	color: var(--Generic);
}

.ext-link-footer
{
	margin-left: 6px;
	color: var(--White);
}

.vertical-middle
{
	vertical-align: middle;
}

hr
{
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
	clear: left;
}

div.portal-footer
{
	height: 300px;
	text-align: center;
	align-items: top;
	font-size: 12pt;
	color: var(--Light);
}

div.portal-flex-footer
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

div.portal-flex-footer > div
{
	flex-basis: 8em;
	flex-grow: 0;
	text-align: left;
	margin: 1em 1em 0em 1em;
	padding: 1em 1em 0em 1em;
}

img.portal-footer-logo
{
	margin-top: 9px;
}

div.portal-flex-footer > div > p.portal-footer-p
{
	margin-top: 20px;
	margin-bottom: 0px;
}

div.portal-flex-footer > div > h1
{
	font-size: 14pt;
	font-weight: bold;
	color: var(--Light);
}

a, a:link, a:visited
{
	color: var(--Light);
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

.portal-flex-footer-row
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	min-width: 170px;
}

.portal-flex-footer-row > div
{
	margin-right: 10px;
	margin-top: 0px;
}

.portal-support
{
	display: block;
	width: 200px;
	height: 30px;
	padding-top: 5px;
	color: var(--White);
	text-align: center;
	background-color: var(--Brand1);
	box-shadow: 0 5px 10px rgba(0,0,0,0.25);
	transition: all 0.3x;
}

.portal-support:hover
{
	background-color: var(--Contrast);
	text-decoration: none;
}

.portal-support > a:hover
{
	text-decoration: none;
}

.portal-social:hover
{
	filter: brightness(75%);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media only screen and (max-device-width: 480px)
{
	div.portal-banner
	{
		display: block;
		color: var(--Light);
		font-weight: bold;
		margin-bottom: 20px;
	}
	
	div.portal-heading
	{
		margin-right: 0px;
		align: center;
		text-align: center;
	}
	
	div.portal-flex-buttons > div
	{
		margin-left: 1em;
		margin-right: 1em;
		margin-top: 1em;
		margin-bottom: 1em;
	}
}

@media only screen and (min-device-width: 481px)
{
	div.portal-heading
	{
		float: left;
		width: 160px;
	}
}