section#mainContent a, section#mainContent a:visited {
	color: #02627f;
	font-weight: 700;
}

section#mainContent {
	font-size: 14pt;
}

section#mainContent header#pageHeader {
	display: block;
	text-align: center;
	padding: 1em;
}

section#mainContent > h2 {
	padding: 1em;
	text-align: center;
}

section#mainContent article.usage h3 {
	display: block;
	margin-top: 1.5em;
	margin-bottom: 0.25em;
	border-left: 0.2em solid var(--color-grey);
	padding-left: 0.5em;
}

section#mainContent article.usage h4 {
	display: block;
	margin-top: 1em;
	margin-bottom: 0.25em;
	border-left: 0.2em solid var(--toolbar-background-color);
	padding-left: 0.5em;
}

div#backgroundCover {
	background-image: url('/images/1577253324-black-wooden-dining-table-in-a-coffee-shop-2551794.jpg');
	background-size: cover;
	background-position: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
}

div#overviewContainer {
}

div.coverContainer {
	display: block;
	width: calc(100% - 2em);
	padding: 4em 1em;
}

div.coverContainer.nopad {
	padding: 0;
	width: 100%;
}

div.coverContainer.bgImage {
	min-height: 15em;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

div.coverContainer.white {
	background-color: #f8f9fb;
}

div.coverContainer.white:not(.bgImage):not(.nopad) {
	max-width: 60rem;
	margin: auto;
}

div.coverContainer.coloured {
	background-color: rgba(2,98,127,0.8);
	color: #FFF;
}

div.coverContainer.bgfill {
	background-repeat: no-repeat;
	background-size: cover;
}

div.coverContainer.coloured div.sideBlocks article {
	background-color: rgba(5,5,5,0.9);
	border-radius: 5px;
}

div.coverContainer.coloured a, div.coverContainer.coloured a:visited {
	color: var(--color-dark-blue) !important;
}

div.coverBlend {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(32,39,44,1), rgba(32, 39, 44,.7));
	color: #FFF;
}

@media (max-width: 60rem) {

	div.coverContainer.coloured div.sideBlocks article {
		margin: 0 1em;
	}
	
}

div.coverWrapper {
	display: block;
	width: 80%;
	margin: auto;
	padding: 2em 0;
}

div.coverSplit {
	display: flex;
	width: 100%;
}

div.coverSplit div.coverLeft, div.coverSplit div.coverRight {
	height: 100%;
	flex: 1 0 50%;
}

@media (max-width: 59.9rem) {
	div.coverSplit {
		flex-wrap: wrap;
	}
	
	div.coverSplit div.coverLeft, div.coverSplit div.coverRight {
		flex: 1 0 100%;
	}
}

@media (min-width: 60rem) {
	div.coverSplit div header {
		margin: 2em;
		max-width: 70%;
	}
}

div.coverSplit div h1 {
	margin-bottom: 1.5em;
	text-align: center;
	font-size: 2em;
}

@media (max-width: 59.9rem) {
	div.coverSplit div h1 {
		font-size: 1.5em;
	}
}

div.coverSplit div.regButton {
	display: block;
	margin: 2em;
	text-align: center;
}

div.coverSplit div.regButton a {
	padding: 0.5em;
	background-color: var(--color-yellow);
	color: var(--color-dark-blue) !important;
	border-radius: 5px;
	transition: background-color 0.2s;
}

div.coverSplit div.regButton a:hover {
	background-color: var(--color-light-yellow);
	transition: background-color 0.2s;
}

div.imageBlock {
	display: block;
	width: calc(100% - 6em);
	text-align: center;
	padding: 3em;
}

div.sideBlocks {
	display: flex;
	margin: auto;
}

@media (max-width: 60rem) {
	div.sideBlocks {
		flex-wrap: wrap;
		justify-content: center;
	}
}

div.sideBlocks header h2, header.nakedHeader h2, div.imgSkew header h2, div.sideBlocks header h1, div.imgSkew header h1, div.wrapper header h1 {
	border-left: 0.2em solid #db5461;
	padding-left: 0.4em;
	margin-bottom: 1em;
}

div.sideBlocks > header {
	flex: 0 0 15em;
}

div.artInfo {
	display: block;
	width: calc(80% - 2em);
	margin: 1em auto;
	padding: 1em;
	background-color: var(--color-blue);
	border-radius: 5px;
	color: var(--color-light-blue);
}

div.artInfo a, div.artInfo a:visited {
	color:var(--color-dark-blue) !important;
}

header.nakedHeader {
	display: block;
	width: 75%;
	margin: auto;
}

div.imgSkew header {
	margin-bottom: 1em;
}

div.centerTextBlock {
	display: block;
	margin: auto;
	text-align: center;
}

div.sideBlocks > * {
	padding: 1em;
}

div.sideBlocks img {
	display: block;
	margin: 1em auto;
	border: 1px solid #f8f9fb;
	border-radius: 5px;
	max-width: 90%;
	max-height: 200vh;
}

div.sideBlocks ul, ul.listing, div.sideBlocks ol, ol.listing {
	margin: 1em;
}

div.sideBlocks ul li, ul.listing li, div.sideBlocks ol li, ol.listing li {
	margin: 1em;
	list-style: initial;
}

div.sideBlocks ul.steps li, div.sideBlocks ol li, ol.listing li {
	list-style: number;
}

div.sideBlocks ul.steps li img, div.sideBlocks ul.pointers li img {
	display: block;
	margin: 1em auto;
	border: 1px solid #f8f9fb;
	border-radius: 5px;
	height: 8em;
	max-width: 50vw;
}

div.sideBlocks ul.steps li img.small, div.sideBlocks ul.pointers li img.small { height: 4em; }
div.sideBlocks ul.steps li img.large, div.sideBlocks ul.pointers li img.large { height: 16em; }



div.fullBlocks {
	display: block;
	width: 100%;
}


div.resourceLink {
	display: block;
	width: 100%;
	text-align: right;
}

div.resourceLink a, div.resourceLink a:visited {
	color: #02627f;
}

div.resourceCategories {
	display: flex;
	flex-wrap: wrap;
	margin: 2em;
}

div.rCat {
	flex: 1 0 30%;
	background-color: #e0e0e0;
	border-radius: 5px;
	padding: 1em;
	margin: 1em;
}

@media (max-width: 59.9rem) {
	
	div.resourceCategories {
		margin: 0.5em;
	}
	
	div.rCat {
		flex: 0 0 calc(100% - 3em);
		margin: 0.5em;
	}
}

div.rCat ul li {
	font-size: 0.8em;
}

div.rCatDesc {
	margin: 1em;
}

div.resSideWrapper {
	display: grid;
	grid-template-columns: 15em auto;
	grid-template-rows: auto;
	grid-template-areas: "resList resArticle";
}

@media (max-width: 59.9rem) {
	div.resSideWrapper {
		grid-template-columns: auto;
		grid-template-rows: auto auto;
		grid-template-areas: "resArticle" "resList";
	}
}

div.resSideWrapper div.resSideMenu {
	grid-area: resList;
	padding: 1em;
	background: linear-gradient(180deg, #e0e0e0 0%, #fafafa 90%);
}

div.resSideMenu h3 {
	padding: 0.5em;
	border: 0 !important;
	margin-bottom: 1em;
	display: block;
	width: 100%;
	text-align: center;
}

div.resSideMenu h4 {
	font-size: 0.9rem;
	border: 0 !important;
	font-weight: normal !important;
	cursor: pointer;
	transition: color 0.2s;
}

div.resSideMenu h4:hover {
	color: var(--color-red);
	transition: color 0.2s;
}

div.resSideMenu h4 i {
	font-size: 0.5em;
	width: 1.5em;
	padding: 1em;
	opacity: 0.5;
	transition: opacity 0.2s;
}

div.resSideMenu h4 i:hover {
	opacity: 1;
	transition: opacity 0.2s;
}

div.resSideMenu h4 a {
	color: #000 !important;
}

div.resSideMenu ul {
	padding: 0 0.5em 1em 1.5em;
}

div.resSideMenu div.resSideBlock[data-shown='true'] ul {
	display: block;
}

div.resSideMenu div.resSideBlock[data-shown='false'] ul {
	display: none;
}

div.resSideMenu ul li {
	display: block;
	font-size: 0.8em;
	padding: 0.2em 0;
}

div.resSideMenu ul li a {
	display: block;
	width: 100%;
}

div.resSideMenu ul li:not(.selected) a {
	font-weight: 500 !important;
}

div.resSideMenu ul li.selected a {
	padding: 0.2em;
	color: var(--color-blue);
}

div.resSideMenu ul li.subcategory {
	margin-top: 1em;
	font-weight: 700;
}

div.resContent {
	grid-area: resArticle;
}

section#mainContent p + p {
	margin-top: 1em;
}


/* Article / Resource Card Blocks */
div.cardBlocks {
	display: flex;
	width: calc(100% - 5em);
	margin: 1em 2.5em;
}

@media (max-width: 59.9rem) {
	div.cardBlocks {
		flex-wrap: wrap;
	}
}

div.cardBlocks div.cbIWrapper {
	flex: 1 0 25%;
	border: 0.5em solid transparent;
}

div.cardBlocks div.cbIInner {
	border-radius: 4px;
	background-color: rgba(0,0,0,0.5);
}

div.cardBlocks div.cbIInner > div {
	display: block;
	width: calc(100% - 1em);
	height: calc(100% - 1em);
	padding: 0.5em;
}

div.cardBlocks h5 {
	font-size: 1.2em;
	margin: 0.5em 0;
}

div.cardBlocks p {
	margin: 0 0.5em 1em 0.5em;
}


div.backLink {
	display: block;
	padding: 4em 1em;
	width: calc(100% - 2em);
	text-align: center;
}

section#mainContent div.backLink a.button {
	display: inline-block;
}




div.imgSkew {
	display: flex;
	min-height: 10em;
	width: 100%;
}

div.imgSkew div.iskewImage {
	background-position: center right;
	background-size: cover;
	background-repeat: no-repeat;
	flex: 0 0 60%;
	min-height: 20em;
	position: relative;
	clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
}

div.imgSkew.reverse div.iskewImage {
	background-position: center left;
	clip-path: polygon(15% 100%, 100% 100%, 100% 0%, 0 0);
}

div.imgSkew div.iskewText {
	padding: 4em 4em 8em 4em;
	flex: 1 0;
}

@media (max-width: 59.9rem) {
	div.imgSkew {
		flex-wrap: wrap;
	}
	
	div.imgSkew div.iskewImage {
		flex: 0 0 100%;
		clip-path: initial !important;
	}

	div.imgSkew div.iskewText {
		padding: 4em 1em 8em 1em;
	}

}


div.imgSkew span.imageCopy {
	font-size: 0.5em;
	color: #4c5256;
	position: absolute;
	left: 2em;
	bottom: 1em;
}

img.image-small {
	height: 20em;
}

img.image-medium {
	height: 40em;
}

footer#bottomFooter svg.top {
	background-color: #fafafa;
	top: -8em;
}

p.legal {
	font-size: 0.8em;
}