/*
	(c)2021 - visuallizard.com

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

.container {
/*
	Set site maximum width only here and use this class to centre and contain the content in browser window.
	Use "max-width" instead of "width" for auto-responsiveness.
	Keep horizontal padding to prevent content touching viewport edges. Adjust them in responsive.css for specific breakpoint if needed.

*/
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
	position: relative;
}

.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.full-bleed {
/* 	alternative to .full-width - https://andy-bell.design/wrote/creating-a-full-bleed-css-utility/ */
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

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


.site-title {
	float: left;
	margin: 1em 0 1em 0;
}
	.site-title > a {
		text-decoration: none;
		color: inherit;
		font-weight: 800;
		font-size: 30px;
		line-height: 1;
		transition: all .2s;
	}
	.site-title:hover > a {
		opacity: .8;
	}


/* Search Form */
.search-form {
	float: right;
	display: inline-flex;
	margin: .5em 0;
}
	.search-input {

	}
	.search-button {
		border-radius: 0;
	}


/* ! Announcement Ribbon */
.announcement {
	display: block;
	background: dodgerblue;
	padding: 1rem 0;
	color: #fff;
	font-size: 80%;
	text-align: center;
}
	.announcement * {
		color: inherit;
	}
	.announcement > .container div > * {
		margin-bottom: .25em;
	}
	.announcement > .container div > *:last-child {
		margin-bottom: 0;
	}
	.announcement h2 {
		font-size: 30px;
		margin-bottom: .5rem;
	}
	.announcement a {
		color: inherit;
		text-decoration: underline;
		text-decoration-thickness: 1.5px;
	}
	.announcement a:hover {
		color: #000;
	}


/* 	! SECTIONS	*/
main {

}
	.primary {
		width: 70%;
		padding: 2em 5% 2em 0;
	}
	.sidebar {
		width: 30%;
		padding: 2em 0 2em 5%;
		border-left: 1px solid #777;
	}

	/* ! Regions for Layout Module */
	.region-row {
		display: flex;
	}
		.region-cell {
			width: 100%;
			padding: 2rem 5%;
		}
		.region-cell:first-child {
			padding-left: 0;
		}
		.region-cell:last-child {
			padding-right: 0;
		}


/* ! 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 1em;
	color: inherit;
	text-decoration: none;
	transition: all .3s;

	line-height: 1.25;
}
.nav-link:hover {
	color: dodgerblue;
}
.nav-item[data-nav-status='has-active'] > .nav-link {
	color: dodgerblue;
}
.nav-item[data-nav-status='active'] > .nav-link {
	color: dodgerblue;
}

	/* 	Main nav specific (opinionated) */
	.main-nav {
		clear: both;
		padding: .25em 0;
		background-color: #eee;
		box-shadow: -999px 0 0 0 #eee, 999px 0 0 0 #eee;
	}

	/* Level 1 (horizontal) */
	.main-nav .nav-1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.main-nav .nav-1 > li {

	}
	.main-nav .nav-1 > li > a {
		text-align: center;
	}

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

		background-color: #fff;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 2px;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

		transition: all 0s;
		z-index: 1000;
	}
	.main-nav li              > .sub-list { visibility: hidden;  opacity: 0; transform: scale(.95); }
	.main-nav li:hover        > .sub-list { visibility: visible; opacity: 1; transform: scale(1); transition-duration: .3s; }
	.main-nav li:focus-within > .sub-list { visibility: visible; opacity: 1; transform: scale(1); }

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

	.main-nav :nth-last-child(1) > .nav-2,
	.main-nav :nth-last-child(2) > .nav-2 { right: 0; left: auto; }

	.main-nav :nth-last-child(1) > .nav-2 .nav-list,
	.main-nav :nth-last-child(2) > .nav-2 .nav-list { right: 100%; left: auto; }

	.main-nav :nth-last-child(1) > .nav-2 .has-sub > .nav-link::after,
	.main-nav :nth-last-child(2) > .nav-2 .has-sub > .nav-link::after { transform: scaleX(-1); }



	/* Level 2 (the only drop-down ) */
	.main-nav .nav-2 {
		top: 100%;
	}


	.main-nav .nav-2 > li {

	}
	.main-nav .nav-2 > li > a {

	}

	/* Level 3, etc. */
	.main-nav .nav-3 {

	}
	.main-nav .nav-3 > li {

	}
	.main-nav .nav-3 > li > a {

	}


	/* 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);
	}


/* ! Banners: defaults */
.banners {
	margin-bottom: 2em;
}
	.banner {
		position: relative;
	}
		.banner-link {
			display: block;
		}
			.banner-img {
				display: block;
				width: 100%;
				height: auto;
			}
			.banner-container {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 auto;
				padding: 1em;
				padding: 5%;

				display: flex;
				align-items: center;
				justify-content: center;
			}
			.upperleft    .banner-container { align-items: flex-start; justify-content: flex-start; }
			.uppercentre  .banner-container { align-items: flex-start; justify-content: center;     text-align: center; }
			.upperright   .banner-container { align-items: flex-start; justify-content: flex-end;   }
			.middleleft   .banner-container { align-items: center;     justify-content: flex-start; }
			.middlecentre .banner-container { align-items: center;     justify-content: center;     text-align: center; }
			.middleright  .banner-container { align-items: center;     justify-content: flex-end;   }
			.lowerleft    .banner-container { align-items: flex-end;   justify-content: flex-start; }
			.lowercentre  .banner-container { align-items: flex-end;   justify-content: center;     text-align: center; }
			.lowerright   .banner-container { align-items: flex-end;   justify-content: flex-end;   }

			.banner-text {
				display: block;
				width: 100%;
				margin: 0;
				max-width: 800px;
				color: #fff;

				text-align: left;
				text-transform: none;
				transition: color .2s;
			}
			.theme-grey .banner-text {
				color: #333;
			}
			.theme-accent .banner-text {
				color: dodgerblue;
			}
			.theme-black .banner-text {
				color: #000;
			}
			.banner-link:hover .banner-text {
				opacity: .5;
			}
				.banner-title {
					color: inherit;
					font-size: 30px;
					font-size: clamp(2rem, 1rem + 4vw, 5rem);
					margin-top: 0;
					margin-bottom: 0;
					text-transform: none;
				}
				.banner-subtitle {
					color: inherit;
					font-size: 24px;
					font-size: clamp(1rem, 1rem + 2vw, 4rem);
					margin-top: 0;
					margin-bottom: 0;
					text-transform: none;
				}
				.banner-desc {

				}

				/* optional Animations */
				.slick-slide:not(.slick-current) .banner-text {
					opacity: 0.2;
					transform: translateY(2rem);
				}
				.slick-slide.slick-current .banner-text {
					transition: transform 1s ease-out .3s, opacity 1s ease-out .3s;
					opacity: 1;
					transform: translateY(0);
				}

	/* ! Banners: Featured - slider */
	.featured-banners {

	}
		.featured-banners .banner-img {
			object-fit: cover;
			min-height: 200px;
			max-height: 500px;
			/* this sets vertical boundaries to Featured Banners
			 and prevents them from shrinking or growing beyond set height values
			 when viewport is either too short (mobile) or unknowingly large (wide monitors) */
		}

	/* ! 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.1);
		}
		.grid-fixed .banner-title {
			font-size: 20px;
		}

	/* ! Banners: Grid Flex item width
	(usually for sponsor logos where width is unknown. Set module settings 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: 1em 1%;
			padding: 0;
		}
		.grid-flex .banner-link {

		}
		.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;
		}

/* ! Galleries */
.gallery-set {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	margin: 0 0;
	padding: 0;
	list-style-type: none;
	overflow: hidden;
}
.gallery-set > li {
	width: 20%;
	margin: 0;
	padding: 0;
	max-width: 480px;
}

.gallery-box {
	position: relative;
	display: block;
	margin: 0;
	height: 0;
	padding-top: 100%;
	background-size: cover;
}
.gallery-box a {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	justify-content: flex-end;
	color: #fff;

	transform: scale(1);
	cursor: pointer;
}
.gallery-box[style*="placeholder"] {
	background-size: cover;
}
.gallery-text {
	width: 100%;
	min-height: 0;
	max-height: 70%;
	margin: 0;
	padding: 1.5em 1.5em 1em;
	border: none;
	border-radius: 0;
	background-color: transparent;
	background-image: linear-gradient(to bottom, rgba(0,0,0, 0), rgba(0,0,0, .5), rgba(0,0,0, .85));
	color: #fff;
	opacity: 1;
	transition: all .3s ease-in-out;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	z-index: 1;
}
.gallery-title {
	margin-bottom: 0;
}
.gallery-box .gallery-brief {
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	margin-bottom: 0;
	transition: all .3s ease-in-out;
}
.gallery-box .gallery-brief:empty {
	margin: 0;
}
.gallery-box a:hover .gallery-brief {
	max-height: 200px;
	opacity: 1;
	margin-top: 1em;
}

/* ! Documents */
.document-category {
	position: relative;
	width: 100%;
	padding: 1em 0;
	margin: 0 0 1.5em 0;
}
	.document-category > h3 {
		display: block;
		position: relative;
		flex-basis: 100%;
		max-width: 100%;
		padding: 0;
	}
	.document-cat-desc {
		display: block;
		position: relative;
		flex-basis: 100%;
		max-width: 100%;
		padding: 0;
	}
	.document-items {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		grid-gap: 2rem;
		align-items: stretch;

		padding-top: .5rem;
	}
		.document-item {
			display: flex;
			flex-direction: column;
			position: relative;
			padding: 2.5rem 2rem 1rem;
			margin: 1rem 0 0;
			border: 1px solid hsla(209, 64%, 22%, 0.2);
			border-radius: .25rem;

			text-align: center;
		}

			.document-item .document-title {
				margin-bottom: 1rem;
			}
			.document-item .document-desc {
				text-align: left;
				font-size: 80%;
			}
			.document-item .document-desc * {
				font-size: inherit;
			}
			.document-item .doc-link {
				padding: .75rem 2rem;
				margin-top: auto;
			}

			.doc-icon {
				width: 3rem;
				height: 3rem;
				display: flex;
				color: inherit;

				position: absolute;
				top: -1.5rem;
				left: 0;
				right: 0;
				margin: 0 auto;
				padding: .5rem;
				border-radius: 50%;
				border: 1px solid hsla(209, 64%, 22%, 0.2);
				background-color: #fff;
			}
			.doc-icon .svg-label {
				margin: 0 .5rem 0 0;
				font-weight: bold;
				font-style: normal;
				font-size: 10px;
				letter-spacing: .03em;
				text-transform: uppercase;
				color: inherit;
			}



/* ! Site Footer  */
.site-footer {
	position: relative;
	clear: both;
	padding: 1em 0;
	margin: 0;
	background-color: #777;
	color: #fff;
}

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