/*
	(c)2021 - visuallizard.com

	General styles.
	Template, view, plugin and element specific, etc.
*/

.temp,
a[href="#0temp"] {
	outline: 2px dashed red !important;
}

iframe:not([style*="height"]) {
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: placeHolderShimmer;
	animation-timing-function: linear;
	background: #ddd;
	background: linear-gradient(to right, #eee 0%, #ddd 5%, #eee 10%);
	background-size: 100vw 1px;
}
@keyframes placeHolderShimmer{
	0%{ background-position: -100vw 0 }
}

.align-center {
	text-align: center;
}

/* Ceative Comons paragraph styles */
.license-text img {
	width: 22px !important;
	height: 22px !important;
	margin-left: 3px;
	vertical-align: text-bottom;
	text-decoration: none;
}

.more,
.back,
.top {
	font-weight: 700;
}
	.more > a,
	.back > a,
	.top > a {
		color: inherit;
		text-decoration: none;
	}
	.more > a:hover,
	.back > a:hover,
	.top > a:hover {
		color: #00a5a5;
	}
		.more > a:after,
		.back > a:before,
		.top > a:before {
			content: " ";
			display: inline-block;
			vertical-align: middle;
			color: inherit;
			width: 1em;
			height: 1em;
			background-image: none;
			background-repeat: no-repeat;
			background-position: center center;
			background-color: transparent;
			background-size: contain;
		}
		.more > a:after {
			background-image: url(/img/icons/chevron-right.svg);
			margin-left: .15rem;
		}
		.back > a:before {
			background-image: url(/img/icons/chevron-left.svg);
			margin-right: .15rem;
		}
		.top > a:before {
			background-image: url(/img/icons/chevron-up.svg);
			margin-right: .15rem;
		}

		.dark .more > a:after {
			background-image: url(/img/icons/chevron-right-white.svg);
		}
		.dark .back > a:before {
			background-image: url(/img/icons/chevron-left-white.svg);
		}
		.dark .top > a:before {
			background-image: url(/img/icons/chevron-up-white.svg);
		}

.blocking {
	background-color: #fafafa;
	border: 1px solid #ccc;
	border-radius: .5rem;
	padding: 1rem;
	margin: 1rem 0;
	min-height: 6rem;
}



/* ! [Content Module] */

/* Intro Block */
.intro-figure {
	position: relative;
	padding-top: 3rem;
	padding: 3rem 1rem 0;
	padding: min(3rem, 5vw) min(1rem, 5vw) 0;

	margin-bottom: 6rem;
	background-color: #3455a7;
}
	.t-wide .intro-figure {
		background-color: #009c80;
	}

		.intro-figure figcaption {
			position: relative;
			max-width: 900px;
			margin: 0 auto;
		}
			.intro-figure .image-credit {
				position: absolute;
				bottom: -3rem;
				right: 0rem;
				padding: .25rem;
				background-color: rgb(0 0 0 / .7);
				color: #fff;
				font-size: 10px;
				opacity: .7;
			}
	.intro-img {
		width: 100%;
		height: auto;
		margin-bottom: -3rem;
	}
	.intro-img.placeholder {
		background-color: #eee;
		filter: saturate(0.2);
	}
	.intro-body {
		font-weight: 300;
		font-size: 23px;
	}

	/* 	separate consecutive content blocks from Intro block */
	.intro-block + .cke {
		padding-top: 2rem;
		border-top: 1px solid currentColor;
		margin-top: 1rem;
	}



/* ! [Bulletin Module] */

/* ! Articles general */
.articles-latest {
	padding: 2rem 0;
	margin-bottom: 3rem;
	background-color: #3455a7;
	box-shadow: -50vw 0 0px 0px #3455a7, 50vw 0 0 0 #3455a7;
	color: #fff;
}
	.articles-block h2 {
		text-align: center;
		font-weight: 300;
		color: inherit;
	}

.article-items {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% + 2rem);
	margin: 0 -1rem 1rem;
}
	.article-item {
		position: relative;
		width: 25%;
		width: calc( (100% / 4) - 2rem);
		min-width: 160px;
		max-width: 480px;
		padding: 2rem 0 0;
		margin: 1rem;

		display: flex;
		flex-direction: column;
	}
		.article-item .article-title {
			margin: 0 0 .5rem 0;
			font-size: 1rem;
/* 			font-size: calc(.75em + .5vw); */
			font-weight: normal;

			flex-grow: 1;
		}
		.article-item .article-title a {
			text-decoration: none;
			color: #3455a7;
		}
		.article-item .article-title a:hover {
			text-decoration: underline;
		}
		.article-item .article-date {
			position: absolute;
			top: 0;
			margin: 0;
			font-weight: 600;
			text-transform: uppercase;
		}
	.article-figure {
		margin: 0;
		overflow: hidden;
	}
		.article-img {
			display: block;
			width: 100%;
			height: auto;

			transition: transform .3s ease-in;
		}
		.article-item:hover .article-img {
			transform: scale(1.05);
		}
	.article-details {
		padding: .5rem 0 0;
	}
	.article-item .more {
		display: none;
		text-decoration: none;
	}


/* ! Articles - Index*/
	.articles-index > .more {
		display: none;
	}

/* ! Articles - Latest (Home Page) */
	.articles-latest .article-item a {
		color: #fff;
	}
	.articles-latest .article-item {
		padding-top: 0;
	}
	.articles-latest .article-date {
		/* visuallyhidden */
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}
	.articles-latest .pagination-links {
		display: none;
	}




/* ! Articles - Single (Bulletin	view) */
	.article-view .article-title {
		max-width: 50ch;
	}
	.article-view .article-image {
		margin: 0 auto 1rem;
		display: block;
		max-width: 400px;
	}
	.article-view .article-date {
		display: block;
		margin-bottom: 1rem;
	}



/* ! Events */

/* ! Events items listing */
.events-items > .pagination-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
	.events-items .pagination-links {

	}

	.events-items {
		display: flex;
		flex-wrap: wrap;
		width: calc(100% + 2rem);
		margin: 0 -1rem 1rem;
	}
	.event-item {
		position: relative;
		width: 33.33%;
		width: calc( (100% / 3) - 2rem);
		min-width: 250px;
		max-width: 600px;
		padding: 2rem 0 0;
		margin: 1rem;

		display: flex;
		flex-direction: column;
	}

		.event-figure {
			margin: 0 0 .5rem 0;
			order: -1;

			background: #eee;
			overflow: hidden;
		}
			.event-figure a,
			.event-figure .no-link {
				display: block;
				position: relative;
			}
			.event-figure a:hover {
				transition: transform .5s;
				transform: scale(1.02);
			}
				.event-img {
					display: block;
					width: 100%;
					height: auto;

					transition: transform .5s;
				}

				.events-index .event-figure > a,
				.events-index .event-figure > .no-link {
					padding-top: 50%;
					overflow: hidden;
				}
				.events-index .event-img {
					object-fit: contain;
					object-position: center;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translateY(-50%) translateX(-50%);

					width: auto;
					height: auto;
					max-width: 100%;
					max-height: 100%;
				}
				.events-index .event-figure a:hover {
					transform: scale(1.02);
				}
			.event-img.placeholder {
				background-color: #eee;
			}
		.event-item .event-details {

		}
			.event-item .event-title {
				margin: 0 0 .5rem 0;
				flex-grow: 1;
			}
			.event-item .event-title a {
				text-decoration: none;
			}
			.event-item .event-title a:hover {
				color: #000;
			}
			.event-item .event-meta {
				position: absolute;
				top: 0;
				margin: 0;

				color: inherit;
				line-height: 1.2;
				margin-bottom: .25em;
			}
			.event-item .event-date {
				font-weight: 600;
				text-transform: uppercase;
			}
			.event-item .event-brief {
				display: none;
/* 				margin-bottom: 1rem; */
			}
			.event-item .link { color: inherit; font-weight: bold; }
			.event-item .link:hover { }
			.event-item .link.custom-link[href^="http"]:after {
				content: '';
				display: inline-block;
				width: 1em;
				height: .75em;
				margin-left: .25em;
				background: center center no-repeat transparent url(/img/icons/new-window.svg);
				background-size: auto;
				background-size: 100% auto; }
			.event-item .button {
/* 				color: #fff; */
			}

		.event-item .button:hover {

		}


	/* ! Events Index */
	.events-index {
		padding-top: 2rem;
	}
	.events-index > h2 {

	}


	/* ! Events Featured */
	.events-featured {
		margin-top: 2rem;
		border-bottom: 1px solid currentColor;
		padding-bottom: 2rem;
	}
	.events-featured > h2 {
		text-align: center;
		font-weight: 300;
		color: inherit;
	}

	.events-index .event-title,
	.events-featured .event-title {
		font-size: 1rem;
		font-weight: normal;
		color: #3455a7;
	}
	.events-index .event-item .more,
	.events-featured .event-item .more {
		display: none;
	}

	.events-featured .event-item:nth-child(n+1) {
/* 		flex-direction: column; */
	}
	.events-featured > .more {
/* 		font-size: 1.5rem; */
	}

	/* 	Display first event in listing as promoted (for both .events-featured and .events-index) */
	@media only screen and (min-width: 800px) {

		/* 1st Event item is 100% wide  (for both .events-featured and .events-index) */
		.events-listing.with-promoted .page-count-1 .event-item:nth-child(1) { max-width: 100%; width: 100%; margin-bottom: 1rem; flex-direction: row; padding-top: 0; }
		.events-listing.with-promoted .page-count-1 .event-item:nth-child(1) .event-figure { max-width: 60%; min-height: 0; /* padding-top: 32.6%;  */ flex-grow: 1; align-self: flex-start; margin-bottom: 0; }
		.events-listing.with-promoted .page-count-1 .event-item:nth-child(1) .event-details { max-width: 40%; padding-left: 2rem; padding-bottom: 2rem; position: relative; }
		.events-listing.with-promoted .page-count-1 .event-item:nth-child(1) .event-title { font-size: 2rem; }
		.events-listing.with-promoted .page-count-1 .event-item:nth-child(1) .event-meta { position: static; left: auto; top: auto; }
		.events-listing.with-promoted .page-count-1 .event-item:nth-child(1) .event-brief { display: block; }
		.events-listing.with-promoted .page-count-1 .event-item:nth-child(1) .more { display: block; }

		/* 2nd+ Event items */
		.events-listing.with-promoted .page-count-1 .event-item:not(:nth-child(1)) .event-brief { display: none; }
		.events-listing.with-promoted .page-count-1 .event-item:not(:nth-child(1)) .more { display: none; }

		/* Invert order of .event-figure and .event-details for .events-index */
		.events-listing.with-promoted .events-index .page-count-1 .event-item:nth-child(1) .event-details { order: -2; padding-left: 0; padding-right: 2rem; margin-bottom: 2rem; }
	}


	/* ! Event View  */
	.m-events.drilled-in .main-container > h1 {
		/* display: none; */
	}

	.event-view {
		display: flex;
		flex-direction: column;
	}
	.event-view .event-figure {
		order: -1;

		/* for .intro-block */
		background-color: #3455a7;
		margin-bottom: 6rem;
		overflow: visible;
	}
		.event-view .event-img {
/* 			object-fit: none; */
/* 			position: static; */
/* 			transform: translateY(0) scale(1); */

			/* for .intro-block */
			margin-bottom: -3rem;
		}

	.event-view > h1,
	.event-view > h2 {
		margin-bottom: 2rem;
		padding: 0 1rem;
	}
	.event-view .dates {
		font-weight: 700;
	}
	.event-view .back {
		margin-top: 3rem;
	}


/* ! FAQ Toggles  */
.toggle {
	position: absolute;
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
	left: auto;
	right: 1.25rem;
	top: 1.2rem;
	color: inherit;
	width: 1.75rem;
	height: 1.75rem;
	min-width: 0;
	cursor: pointer;
	transform-origin: center;
	transition: transform .2s;
}
	.toggle:hover {
		background: transparent;
		color: inherit;
	}
	.toggle:focus {
		outline: 1px dotted currentColor;
	}
	.toggle .svg-icon {
		display: block;
		width: 100%;
		height: 100%;
		transform-origin: center;
	}

	.is-toggle-on .toggle .toggle-v {
		display: none;
	}

	.toggle-unit {
		margin: 0 0 1rem 0;
		position: relative;
		z-index: 0;
	}
	.toggle-unit.is-toggle-on {
		z-index: 1;
	}
	.toggle-unit.is-toggle-on .toggle {
		transform: rotate(180deg);
		opacity: .8;
	}
	.toggle-details {
		margin: 0;
		padding: 0 2rem;
		overflow: hidden;
		max-height: 0;
		transition: all .2s ease-in-out;
	}
		.is-toggle-on .toggle-details,
		.no-js .toggle-details {
			opacity: 1;
			max-height: 99999px;
			margin-bottom: 1rem;
			padding: 1rem 2rem;
			will-change: opacity, max-height, margin, padding;
		}
		.is-toggle-off .toggle-details {
			opacity: 0;
			max-height: 0;
			margin-bottom: 0;
		}

	.toggle-head {
		position: relative;
		padding: .5rem 3rem .5rem 2rem;
		margin: 0;
		border-radius: 0;

		font-weight: bold;
		color: #fff;
		background: #ccc;
		background-color: #3455a7;

		z-index: 1;
		cursor: pointer;
		transition: .2s all;
	}
		.toggle-head:hover,
		.is-toggle-on > .toggle-head {
			background-color: #009c80;
		}
		.toggle-head > .toggle-title {
			padding: 0;
			margin-bottom: .25rem;
			margin-top: .25rem;
			text-transform: none;
			letter-spacing: normal;
			font: 900 28px/1.4 myriad-pro, sans-serif;
			color: inherit;
			cursor: pointer;
		}

	/* FAQ specific */
	.faq-display {
		margin-bottom: 1rem;
	}


/* documents */
	.document-cat-details {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}
		.document-cat-desc {
			width: 100%;
			margin-bottom: 1rem;
		}
	.document-item {
/* 		flex-basis: 40%; */
		min-width: 300px;
	}
		.document-title {
			margin: 0 0 .5rem 0;
			color: inherit;
			font-weight: 600;
			line-height: 1.3;
		}
			.document-title a {
				text-decoration: none;

				display: flex;
				align-items: center;
				padding: .25rem 0;
				text-align: left;
			}
			.document-title a:hover {

			}
				.document-title a .doc-icon {
					width: 2rem;
					height: 2rem;
					min-width: 2rem;
					margin-right: 1rem;
				}
		.document-desc {
/* 			font-size: 80%; */
			margin-left: 3em;
		}

	/* 	Documents: download-links */
	.documents-list {
		list-style: none;
		margin-top: 0;
	}


	.cards .document-item {
		min-width: 0;
		background-color: #fafafa;
	}
	.cards .document-item:only-child {
		margin-right: auto;
	}
	.cards .document-desc {
		margin-top: auto;
		margin-left: 0;
		font-size: 80%;
	}
	.cards .card-img {
		background-color: #ddd;
	}
	.cards .placeholder {
		filter: saturate(0);
		background-color: #ddd;
	}
	.cards .download {
		margin-top: auto;
		margin-bottom: 0;
		color: #00a5a5;
		text-transform: uppercase;
		font-weight: 600;
		font-size: 80%;
	}
	.cards .download .download-link {
		text-decoration: none;
	}
	.cards .download .download-icon {
		display: inline-block;
		vertical-align: middle;
		width: 1.25em;
		height: 1.25em;
	}



/* ! Staff */

.staff-set {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	width: 104%;
	margin: 1em -2% 0;
	padding: 0;
	list-style-type: none;
}
.staff-item {
	width: 29%;
	margin: 1em 2% 2em;
	padding: 0 0em 0em;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

}
	.staff-item > * {
		flex-grow: 1;
	}
	.staff-header {
		width: 260px;
/* 		width: clamp(200px, 50%, 300px); */

		display: flex;
		flex-direction: column;
		flex-grow: 0;
		margin-bottom: 2em;
	}
	.staff-bio {
		max-width: calc(100% - 200px - 2rem);
		margin: 0;
		padding: 0;
	}

		.staff-fig {
			display: block;
			margin: 0;
			padding: 0;
			width: 100%;
			height: auto;

			position: relative;
			align-self: start;
		}
			.staff-img {
				display: block;
				width: 100%;
				height: auto;
				transition: transform .2s ease-in;
			}
			.staff-fig a:hover .staff-img {
				transform: scale(1.05);
			}

		.staff-details {
			position: relative;
			display: flex;
			flex-direction: column;
	/* 		justify-content: center; */
			width: 100%;
		}
		.staff-name {
			margin-bottom: .25em;
			text-align: left;
		}
		.staff-position {
			margin-bottom: .5em;
			font-size: 80%;
		}
		.staff-info {
			margin-bottom: 0;
			font-size: 80%;
		}
		.staff-more {
			margin: .5rem 0 0;
			font-size: 80%;
		}

		.default-popup {
			position: relative;
			background: #fff;
			padding: 40px 20px 20px;
			width: auto;
			max-width: 500px;
			margin: 20px auto;
		}

/* Content Specific */
.gg {
	list-style: none;
	margin: 4rem 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
	.gg li {
		list-style: none outside none;
		margin: 0;
		padding: 0;
		border: 1px solid #fff;
		box-sizing: border-box;
		float: left;
		width: 20%;
	}
		.gg li img {
			display: block;
			width: 100%;
			transition: all 0.2s ease-in-out;
		}
		.gg li a:hover img {
			box-shadow: 0 0 6px 6px rgba(0,0,0,0.2);
			transform: scale(1.05,1.05);
		}

		.gg-max-width-96 li {
			max-width: 96px;
		}

.playlist-grid {
	list-style: none;
	margin: 2rem 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
	.playlist-grid li {
		list-style: none outside none;
		margin: 0 0 2rem 0;
		padding: 0;
		width: 48%;
		min-width: 200px;
	}
		.playlist-grid li figure {
			margin: 0;
		}
		.playlist-grid li img {
			display: block;
			width: 100%;
			height: auto;
			transition: all 0.2s ease-in-out;
		}
		.playlist-grid li a:hover img {
			box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);
			transform: scale(1.02);
		}
		.playlist-grid figcaption {
			display: block;
			font-weight: bold;
			padding: .5rem .25rem;
		}


.sdg-home-grid {
	list-style: none;
	margin: 4rem 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.sdg-home-grid li,
.sdg-home-grid:after {
	list-style: none outside none;
	margin-bottom: 1rem;
	padding: 0;
	width: calc(100% / 3 - .75rem);
}
	.sdg-home-grid:after {
		content: "";
	}
.sdg-home-grid li img {
	display: block;
	max-width: 100%;
	transition: all 0.2s ease-in-out;
}
.sdg-home-grid li a:hover img {
	box-shadow: 0 0 6px 6px rgba(0,0,0,0.2);
	transform: scale(1.05,1.05);
}

/* MC newlsetter  */

#mc-embedded-subscribe-form {
	max-width: 460px;
	margin: 0 0 2rem;
}
	.mc-field-group {
		margin-bottom: 1rem;
	}
	.mc-field-group input[type="text"],
	.mc-field-group input[type="email"] {
		width: 100%;
	}
#mc-embedded-subscribe-form .indicates-required {
	float: right;
	font-size: 80%;
}
.input-group ul {
	list-style: none;
	padding: 0;
}
.input-group li {
	display: flex;
	align-items: flex-start;
	margin-bottom: 1rem;
}
.input-group strong {
	font-size: .875rem;
	font-weight: bold;
}
.input-group label {
	font-weight: normal;
}