/*
	(c)2020 - visuallizard.com

	General Layout Styles.
	Sets major blocking to elements that appear accross the site in different templates.
	All can be removed and started from scratch or elemnts can be adjusted individually.
*/

/*
	COLOURS:
		#ffd41c		yellow light 	[buttons]
		#001135		navy 			[nav links]

	FONTS:
		[Proxima Nova: "proxima-nova"]
		Thin 		100
		Light 		300		kit
		Regular 	400 	kit
		Medium 		500
		Semibold 	600 			*use bold instead*
		Bold 		700 	kit
		Extrabold 	800		kit		used [nav, buttons ]
		Black 		900
*/

.container {
/*
	Set site maximum width only here and use this class to centre the content in browser window.
	Use "max-width" instead of "width" for auto-responsivness.
*/
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 1rem;
	position: relative;
}

.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}


.site-header {
	padding: 1rem 0 0 0;
	position: relative;
}

.site-header-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	position: static;

	padding: 0;
}


.site-title {
	float: left;
	margin: auto 2% auto -100px;
	max-width: 270px;
	min-width: 200px;
	position: relative;
	z-index: 1001;
}
	.site-title > a {
		display: block;
		text-decoration: none;
		color: inherit;
		font-weight: 800;
		font-size: 30px;
		line-height: 1;
		transition: all .2s;
	}
	.site-title > a > img {
		display: block;
		width: 100%;
		margin-top: 5px; /* compensate for logo's arrow visual centering */
	}
	.site-title:hover > a {
		opacity: .8;
		background-color: transparent;
	}


/* Languages toggle */
.languages {
	padding: 0;
	margin: 0 auto;
	list-style: none;
	display: inline-flex;

	position: absolute;
	top: 10px;
	right: 22vw;

	font-size: .85rem;
	font-weight: bold;
}
	.languages a {
		text-transform: uppercase;
		display: block;
		padding: .5rem;
	}
	.languages a:hover {
		color: #fff;
	}


/* Search Toggle */
	.search-toggle {
		width: 30px;
		height: 24px;
		padding: 2px 6px;
		min-width: 24px;
		margin: auto;
		background-color: transparent;
		color: #333;
		border: none;
	}
	.search-toggle:hover {
		color: #001135;
		background-color: #f2f2f2 !important;
	}

/* Search Form */
.search-form {
	display: flex;
	margin: 0 0 1em 0;
}
.input-search {
	display: inline-flex;
	align-items: center;
}
	.input-search label {
		margin: 0 1em 0 0;
		line-height: 1;
	}

	.no-js .search-form.mfp-hide {
		display: block !important; /* show mfp form when there is NO JS. */
	}

	.mfp-content .search-form {
		margin: 0 auto;
		max-width: 600px;
	}
	.mfp-content .search-form > div {
		width: 100%;
	}

	.mfp-content .search-input {
		flex-grow: 1;

		padding: 1em 3em 1em 1em;
		font-size: 20px;
		border: 2px solid #fff;
		background-color: rgba(0,0,0,.3);
		color: #fff;
		letter-spacing: .05em;
	}
	.mfp-content .search-button {
		border: none;
		background: transparent;
		padding: 0 1em;
		margin: 0 0 0 -4em;
		min-width: 0;
		color: #fff;
	}
	.mfp-content .search-button .icon {
		width: 2em;
		height: 2em;
		color: inherit;

	}
	.mfp-close-btn-in .mfp-close {
		position: fixed;
		color: #fff;
		top: .5em;
		right: .5em;
		font-size: 3em;
	}

	/* Custom Google Search submit buttons */
	body .gsc-search-button-v2,
	body .gsc-search-button-v2:hover {
		background-color: #ffd41c;
		border: none;
	}
	body .gsc-search-button-v2 svg {
		fill: #000;
	}



.page-header {
	position: relative;
}
.page-figure {
	margin: 0;
}
.page-img {
	display: block;
	width: 100%;
	height: auto;
}
.page-titles {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 1.5%;
	background: rgba(255,255,255,.8);
	z-index: 1;

	font-weight: 300;
}
	.parent-title {
		margin: 0;
		font-size: 2.5em;
	}
	.grand-title {
		margin: 0;
		font-size: 1.75em;
	}


/* Inside KB hide .page-image, but display .page-titles bar: */
.knowledge-base.topic .page-figure,
.knowledge-base.article .page-figure {
	display: none;
}
.knowledge-base.topic .page-titles,
.knowledge-base.article .page-titles {
	position: relative;
	left: auto;
	bottom: auto;
	background: #f2f2f2;
}

/* 	! SECTIONS	*/
main {
	margin: 4em 0;
}
	.main-container {
		display: flex;
        width: 100%;
	}
	.home .main-container {
		display: block;
	}

    .main-region {
        width: 100%;
    }

	.sidebar {

	}
	.sideleft {
		float: left;
		padding-right: 2rem;
		width: 20%;
	}
	.sideright {
		float: right;
		padding-left: 1rem;
		width: 25%;
	}
	.primary {
		float: left;
		width: 70%;
		padding: 0 3rem 2rem 3rem;
		border: 2px solid #ffd41c;
		border-top: none;
		border-bottom: none;
	}

	.knowledge-base .sideleft {
		width: 30%;
	}
	.knowledge-base .sideright {
		width: 15%;
	}
	.knowledge-base .primary {
		padding: 0 2rem 2rem;
	}


	.region-row {
		display: flex;
	}
		.region-left {
			width: 75%;
		}
		.region-right {
			width: 25%;
			min-width: 200px;
			padding-top: 0.75em;
		}


/* ! NAVIGATIONS  */

/* General for all levels and navs: */
.nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-item {
	position: relative;
	display: inline-block;
	display: block;
	vertical-align: top;
}
.nav-link {
	display: block;
	padding: .5em;
/* 	color: inherit; */
	text-decoration: none;
	transition: all .3s;

	line-height: 1.3;
	font-weight: 400;
	font-size: 1.25rem;
	letter-spacing: .05em;
	position: relative;
}


	/* 	Main nav specific (opinionated) */
	.main-nav {
		padding: 0;
		flex-grow: 1;
		margin-right: 2%;
	}
		.main-nav .nav-link {
			color: #000;
		}
		.main-nav .nav-item:hover > .nav-link {
			color: #001135;
/* 			background-color: transparent; */
		}
		.main-nav .nav-item.active > .nav-link {
			color: #001135;
		}



	/* Level 1 (horizontal) */
	.main-nav .nav-1 {
		display: flex;
		flex-direction: row;
/* 		justify-content: space-between; */
		margin-bottom: 2rem;
		margin-top: 2rem;
	}
	.main-nav .nav-1 > li {
		position: static;
		width: auto;
	}
	.main-nav .nav-1 > li:hover {
		z-index: 99;
	}
	.main-nav .nav-1 > li > a {
		text-align: center;
		text-transform: uppercase;
		margin: 0 auto 0;
		padding: 1.5rem 1.5rem;
		font-size: 1rem;
		white-space: nowrap;

		transition: all 0s ease-in;

		position: relative;
	}
	.main-nav .nav-1 > li:hover > a {
		background-color: #f2f2f2;
		transition-duration: .3s;
	}
	/* 	invisible accessibility triangles */
	.main-nav .nav-1 > li:hover > a:before,
	.main-nav .nav-1 > li:hover > a:after {
		content: '';
		display: block;
		position: absolute;
		bottom: -2rem;
		width: 4rem;
		height: 4rem;
		background: transparent;
		transform: rotate(45deg);
	}
		.main-nav .nav-1 > li:hover > a:before { left: -2rem; }
		.main-nav .nav-1 > li:hover > a:after { right: -2rem; }

	/* all sub-lists (drop-downs & drop-sides) */
	.main-nav .mega {
		display: block;
		position: absolute;
		top: 0;
		left: auto;
		width: 200px;
		margin: 0;
		padding: 3em 1em;

		background-color: rgba(255,255,255,.95);
		background-color: #f2f2f2;
		box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);

		transition: all 0s ease-in;
		transform-origin: top center;
		z-index: 1000;
		min-height: 45vh;
	}
	.main-nav li              > .mega { visibility: hidden;  opacity: 0; transform: scale(.99); }
	.main-nav li:hover        > .mega { visibility: visible; opacity: 1; transform: scale(1); transition-duration: .3s; }
	.main-nav li:focus-within > .mega { visibility: visible; opacity: 1; transform: scale(1); }

	.main-nav .sub-list .sub-list { left: 100%; }


	/* 	Mega Menu */
	.main-nav .mega-container > .sub-list {
		position: relative;
		left: auto;
		top: auto;

		margin-left: 6%;
		float: left;
	}
	.main-nav .mega {
		top: 100%;
		top: calc(100% - 2rem);
		left: 0;
		width: 100%;
	}
	.mega-figure {
		display: block;
		margin: 0;
		float: left;
		background: #0079c1;
		width: 300px;
		height: 300px;
		overflow: hidden;
		background-image: url(../img/mega-thumb-default.jpg);
		background-size: cover;
	}
	.mega-img {
		width: auto;
		height: 100%;
		position: relative;
/* 		transform: translateX(-33.33%); */
	}

	/* Level 2 (the only drop-down ) */
	.main-nav .nav-2 {
		top: 100%;
		width: 25%;
/* 		background: yellow; */
	}
	.main-nav .nav-2 > li {
		position: static;
		padding-right: 2em;
	}
	.main-nav .nav-2 li a {
		border-bottom: 2px solid transparent;
	}
	.main-nav .nav-2 li:hover > a {
		border-bottom-color: #ffd41c;
		background-color: transparent;
	}
	.main-nav .nav-2 > li > a {
		padding-left: 0;
	}

	/* Level 3, etc. */
	.main-nav .nav-3 {
		position: absolute;
		top: 0;
		padding-left: 1.5em;
		border-left: 2px solid #ffd41c;
		width: 100%;
		min-height: 100%;

/* 		Wrap extra long lists in this level into columns,
		but remove these styles if Level 4 is allowed: */
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		max-height: 330px;
		column-gap: 3rem;
	}
	.main-nav .nav-3 > li {

	}
	.main-nav .nav-3 > li > a {
		padding-left: 0;
		padding: .25em;
		font-size: 90%;
	}

	.main-nav li              > .nav-3 { visibility: hidden;  opacity: 0; transform: scale(.95); }
	.main-nav li:hover        > .nav-3 { visibility: visible; opacity: 1; transform: scale(1); }
	.main-nav li:focus-within > .nav-3 { visibility: visible; opacity: 1; transform: scale(1); }

	/* Level 4, etc. */
	.main-nav .nav-4 {
		display: none;
	}


	.js .main-nav .nav-1 > .mycentre-link {

	}
	.js .main-nav .nav-1 > .mycentre-link > a {
		position: absolute;
		top: 10px;

		display: block;
		padding: .5rem 1rem;

		background: #ffd41c;
		box-shadow: 150px 0px 0px 0px #ffd41c, 300px 0px 0px 0px #ffd41c;
		border-radius: 0;
	}
	.js .main-nav .nav-1 > .mycentre-link > a:after { content: none; }

	/* Has-subs Chevron indicators
	.main-nav .has-sub > .nav-link {
		padding-right: 1.5em;
	}
	.main-nav .has-sub > .nav-link:after {
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		right: .25em;
		content: " ";
		background: no-repeat right center url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path fill='%23setColorCodeHere' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' /></svg>");
		display: block;
		width: 1em;
		height: 1em;
		background-size: 100%;
		transform-origin: center center;
	}
	.main-nav .nav-1 > .has-sub > .nav-link:after {
		transform: rotate(90deg);
	}
	*/


	/* 	Side Navigation */
	.side-nav {
		margin-right: -2rem;
	}
	.side-nav .nav-list {
		margin-left: 1em;
	}
	.side-nav .nav-link {
		font-size: 1rem;
		padding: .35em .75em .35em .35em;
	}
	.side-nav .nav-link:hover {
		background-color: #ffd41c;
	}

	.side-nav > .nav-item > .nav-link {

	}

	.side-nav > .nav-item {
		display: none;
	}
	.side-nav > .nav-item[data-nav-status="has-active"],
	.side-nav > .nav-item[data-nav-status="active"] {
		display: block;
	}
	.side-nav.kb-nav > .nav-item {
		display: block;
	}
	.side-nav .nav-item[data-nav-status="active"] {

	}
	.side-nav .nav-item[data-nav-status="active"] > a {
		border-bottom: 2px solid #ffd41c;
	}
	/* Display all Side Nav on error pages: */
	.error400 .side-nav > .nav-item {
		display: block;
	}

	.side-nav .active > .nav-link {
		border-bottom: 2px solid #0079c1;
		color: inherit;
	}
	.sidenav-toggle {
		background-color: transparent;
		width: 1.5em;
		height: 1.5em;
		display: block;
		padding: .05em;
		min-width: 0;
		min-height: 0;
		color: #001135;
		border: 0;
		border-radius: 50%;

		transform-origin: center;
		transition: .1s transform;

		position: absolute;
		left: -1.75em;
		top: .4em;
	}
	.sidenav-toggle:hover {
		background-color: transparent;
		color: inherit;
	}
	.sidenav-toggle svg {
		width: 100%;
		height: 100%;
	}
	.side-nav .is-toggle-off > .nav-list {
		max-height: 0;
		overflow: hidden;
	}
	.side-nav .is-toggle-on > .sidenav-toggle {
		transform: rotate(90deg);
	}
	.side-nav .nav-2 {
		margin-left: 2rem;
	}
	.side-nav .nav-2 .nav-link {
		font-size: 90%;
	}

	.main-nav a[href*="http"],
	.side-nav a[href*="http"] {
		padding-right: 1em;
	}
	.main-nav a[href*="http"]::after,
	.side-nav a[href*="http"]::after {
		content: ' ➚';
		content: '';
		display: inline-block;
		vertical-align: middle;
		width: 1em;
		height: .75em;
		margin-left: .25em;
		margin-right: -1em;
		background: center center no-repeat transparent url(/img/icons/icon-new-window.svg);
		background-size: auto auto;
		background-size: 75% auto;
	}


	.kb-nav {
		margin-left: 1.5rem;
	}
	.kb-nav .nav-2 {
/* 		margin-left: 2rem; */
	}
	.kb-nav .nav-item {
		margin-bottom: .25rem;
	}
	.kb-nav .nav-link {
		display: flex;
		justify-content: space-between;
	}
	.kb-nav .nav-link span {
		padding-left: .5em;
		font-size: 14px;
	}
	/* 	hide empty ULs generated by KB just in case */
	.kb-nav ul:empty {
		display: none;
	}


/* ! Banners */
.banners {
	width: 100%;
}
	.banners img {
		display: block;
/* 		width: 100%; */
		height: auto;
	}
	.banner {
		position: relative;
	}
	.banner-text {

	}
	.banner .button {
		color: inherit;
		border-color: currentColor;
	}

/* ! Featured banners */
.featured-banners {
	position: relative;
	z-index: 1;

	overflow: hidden;
/* 	max-height: 38vw; */
}
	.featured-banners .banner {
		background-color: #fff;
	}
	.featured-banners .banner-inside {
		min-width: 100vw;
/* 		min-height: 50vh; */
		padding-top: 37.5%; /* 750/2000*100 */
		background-size: cover;
		background-repeat: no-repeat;
	}
	.featured-banners .banner-text {
		position: absolute;
		top: 50%;
		right: 0;
		margin: 0 auto;
		max-width: 480px;
		width: 40%;
		text-shadow: 0 0 3px rgba(0,0,0,.5);
		color: #fff;
		transform: translateY(-50%);
		transition: all .2s;

		opacity: 0;
		text-shadow: 0 0 .5px rgba(255,255,255,.75);
	}
		.featured-banners .banner-title {
			color: inherit;
			font-size: 36px;
			font-size: calc(2em + 2vw);
			line-height: 1.1;
			margin-top: 0;
			margin-bottom: .25em;
			padding-bottom: .25em;
			padding-right: 1em;
		}
		.featured-banners .banner-subtitle {
			border-top: .3em solid #fff;
			padding-top: .5em;
			text-transform: uppercase;
			font-size: calc(.75em + .5vw);
			line-height: 1.5;
			margin: 0 0 1em;
		}
		.featured-banners .banner-link {
			display: block;
			text-decoration: none;
			color: inherit;
		}
		.featured-banners .banner-link:hover {
			opacity: .8;
		}
		.featured-banners .banner-img {
			display: block;
			width: 100%;
			height: auto;
		}




	/* Content Banners Gallery  */
	.content-banners {
		margin-top: 70px;
	}
		.content-banners .slick-arrow {
			top: -50px;
			transform: translateY(0);
			background-color: #0079c1;
		}
		.content-banners .slick-dots {
			bottom: auto;
			top:  -35px;
			padding-left: 0;
		}
		.content-banners .slick-dots > li > button {
			border-color: #0079c1;
		}
		.content-banners .slick-dots > li:hover > button,
		.content-banners .slick-dots > li.slick-active > button {
			background-color: #0079c1;
		}

		.content-banners .banner-text {
			position: absolute;
			top: 3%;
			left: 3%;
			margin: 0 auto;
			max-width: 600px;
			width: 30%;
			text-shadow: 0 0 3px rgba(0,0,0,.5);
			color: #fff;
			transform: translateY(-50%);
			transition: all .2s;
		}


	/* ! Banners: Grid Fixed item width */
	.grid-fixed.banners {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 102%;
		margin: 0 -1% 0;
		padding: 0;
	}
		.grid-fixed .banner {
			display: inline-block;
			width: 25%;
			padding: 1em 1%;
		}
		.grid-fixed .banner-link {
			display: flex;
			align-items: center;
			height: 100%;
		}
		.grid-fixed .banner-img {
			transition: transform .3s;
		}
		.grid-fixed .banner-link:hover .banner-img {
			transform: scale(1.05);
		}
		.grid-fixed .banner-title {
			font-size: 20px;
		}

/* ! Banners: Grid Flex item width
	(usually for sponsor logos where width is unknown. Set module settigns to something like Width:0 and Height:100px ) */
	.grid-flex.banners {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 102%;
		margin: 0 -1% 1em;
		padding: 0;
	}
		.grid-flex .banner {
			width: auto;
			margin: 1%;
			padding: 0;
		}
		.grid-flex .banner-link {
			display: block;
		}
		.grid-flex .banner-img {
			display: block;
			width: auto;
			height: 100%;
			max-height: 100px;
			margin: 0;
			transition: all .3s;
		}
		.grid-flex .banner:hover .banner-img {
			transform: scale(1.1);
		}
		.grid-flex .banner-title {
			font-size: 20px;
		}



/* ! Site Footer  */
.site-footer {
	position: relative;
	clear: both;
	padding: 0;
	margin: 0;
	background-color: #4d4d4d;
	color: #fff;
}
	.site-footer a {
		color: inherit;
		text-decoration: none;
	}
	.site-footer a:hover {
		color: #ffd41c;
		background-color: transparent;
	}

	.footer-top {
		background: url(../img/bg-navy-stripes.jpg) center center no-repeat #2b3242;
		background-size: cover;
		color: #fff;
		padding: 3rem 0 3rem;
	}
	.footer-top h2 {
		text-transform: uppercase;
		font-size: 40px;
		color: #ffd41c;
		margin-bottom: .5em;
	}
	.footer-top h3:first-child {
		position: absolute;
		bottom: calc(100% + 3rem);
		left: -1rem;
		width: 100%;
		margin: 0;
		padding: .5rem 1rem;

		background: #ffd41c;
		box-shadow: 999px 0 0 0 #ffd41c;
		color: #001135;

		text-transform: uppercase;
	}


	.footer-bottom {
		padding: 30px 0;
	}

	.footer-bottom-container {

	}
	.footer-bottom-left { width: 70%; float: left; }
	.footer-bottom-right { width: 30%; float: left; padding-left: 3em; border-left: 1px solid #fff; }


	.footer-bottom-right .cke {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.footer-bottom-right .cke > .c-first {
		width: 100px;
		padding-right: 1rem;
	}
	.footer-bottom-right .cke > .c-last {
		width: auto;
		max-width: 200px;
		margin-top: 1rem;
	}
	.footer-bottom-right .cke > .c-first img {
		max-width: 80px;
	}
	.site-footer .nav-1 {
		margin-top: 1em;
		columns: 3 200px;
	}
	.site-footer .nav-1 > li {
		-webkit-column-break-inside: avoid;
                  page-break-inside: avoid;
                       break-inside: avoid;
	}
	.site-footer .nav-2 {
		display: none; /* hide 2nd+ level */
	}
	.accessibility-statement {
		line-height: 1.3;
		font-weight: 300;
		font-size: .8em;
		letter-spacing: 0.01em;
		opacity: .8;
		padding: 0 .8em;
		margin-top: -.75em;
		margin-bottom: 0;
	}



.social-links .icon {
	width: 2rem;
	height: 2rem;
}
	.social-link {
		display: inline-block;
	}
	.social-link:hover {
		color: #ffd41c;
		background-color: transparent;
	}

/* ! Error Pages */
.code-404.error-header {
	font-size: 50px;
}
.code-404.error-code {
	font-size: 12px;
}

.back-to-top {
	display: block;
	position: relative;
	margin: 1em 0;
	text-align: right;
	clear: both;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	z-index: 1;
}
	.back-to-top:before {
		content: '\2B06';
		margin-right: .25em;
	}

/* Magnific Popup Lightbox */
.mfp-title {
	font-size: 1em;
	line-height: 1.3;
	margin-bottom: 1em;
}