/*
	(c)2020 - 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.
*/

/*
	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-responsiveness.
*/

.container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 1rem;
	position: relative;
}


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


/* !Search block */
.search-block {
	display: none;
	position: relative;
	width: 100%;
	padding: 10px 0;
	margin: 0;
	background: #f3f4f4;
	transition: all 0.2s ease;
}
.search-block.open {
	margin: 0;
}
	.search-block form.search-form {
		display: flex;
		position: relative;
		justify-content: space-around;
		flex-wrap: nowrap;
		width: 50%;
		margin: 0 auto;
	}



/* ! fixed social media element */
div#fixed-social {
	display: block;
	position: fixed;
	top: 160px;
	right: 0;
	z-index: 1;
	border-top-left-radius: 7px;
	border-bottom-left-radius: 7px;
	background: #0d2c54;
	color: #fff;
}
	div#fixed-social ul.social-media {
		display: block;
		position: relative;
		width: 40px;
		padding: 10px;
		margin: 0;
		list-style: none;
	}
		div#fixed-social ul.social-media li {
			display: block;
			position: relative;
			padding: 5px 0;
			border-top: 2px solid #fff;
		}
		div#fixed-social ul.social-media li:first-child {
			border: none;
		}
			div#fixed-social ul.social-media li a {
				display: block;
				padding: 0;
				text-align: center;
				color: #fff;
			}
				div#fixed-social ul.social-media li a svg {
					display: block;
					width: 20px;
					height: 20px;
				}



/* !site header */
.site-header {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}
	.site-header > .container {
		display: grid;
		position: static;
		grid-template-columns: 5% 200px 100px auto 5%;
		grid-template-rows: auto;
		grid-template-areas:
			". logo . navigation ."
		;
		z-index: 10;
	}
	.site-title {
		display: block;
		position: relative;
		grid-area: logo;
		height: 100px;
		margin: 0;
		padding: 1em;
		background: url("../../img/logo-icelandicfest.png") no-repeat center center;
		background-size: 80%;
		z-index: 100;
	}
		.site-title > a {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			font-size: 30px;
			font-weight: 500;
			line-height: 1;
			text-decoration: none;
			text-indent: -999em;
			color: #fff;
		}


	.home-banner-set,
	.page-banner-set {
		display: block;
		position: relative;
		z-index: 2;
	}
	.home-banner-set:before,
	.page-banner-set:before {
		content: "";
		display: block;
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		bottom: auto;
		right: 0;
		height: 120px;
		background-image: linear-gradient(rgba(13,44,85,1) 0%, rgba(13,44,85,0) 100%);
	}






/* 	! SECTIONS	*/
main {
	display: block;
	position: relative;
	z-index: 2;
}
body.default main:before,
body.events main:before,
body.contest main:before {
	content: "";
	display: block;
	position: relative;
	padding: 60px 0 30px 0;
	background: url("../../img/dots.svg") center center no-repeat;
	background-size: 60px;
}
	main div.message {

	}
	main div.main-region,
	main div.article-view,
	main div.search-results,
	main div#mc_embed_signup,
	main div.subscription-card,
	main div.auth-form-block {
		width: 80%;
		max-width: 1000px;
		padding: 1em 0;
		margin: 0 auto;
	}
	main.contest div.main-region {
		width: 80%;
		max-width: 1000px;
		margin: 0 auto;
	}
	main div.error {
		padding: 1em;
	}
		div.main-region .contest-block {
			padding: 2em 0;
			margin: 0 4em;
			border-top: 1px solid #ddd;
		}
			div.main-region .contest-block > h2:first-of-type { text-align: center; }
			div.main-region .contest-block h3 {
				padding-top: 1em;
				border-top: 1px solid #ddd;
			}
	main ul.breadcrumbs {
		display: flex;
		position: relative;
		flex-wrap: nowrap;
		justify-content: center;
		padding: 1em 0;
		text-align: center;
		text-transform: uppercase;
		font-size: 1rem;
		list-style: none;
	}
		main ul.breadcrumbs li {
			display: block;
			position: relative;
			padding: 0 0.5em;
			margin: 0 0 0 1em;
		}
		main ul.breadcrumbs li:first-child {
			margin: 0;
		}
			main ul.breadcrumbs li:before {
				content: ">";
				display: block;
				position: absolute;
				top: 0;
				left: -1em;
				width: 1em;
				padding: 0;
				line-height: 1;
				text-align: center;
				color: #1fc2de;
			}
			main ul.breadcrumbs li:first-child:before {
				display: none;
			}
	main div.plaque-info {
		margin: 0 0 1.5em 0;
	}
	main div.form-block {
		margin: 0 0 1.5em 0;
	}
	div.home-section {
		display: block;
		position: relative;
		z-index: 0;
		width: 100%;
		padding: 0;
		margin: 0 auto;
	}
	div.home-section .main-region.event {

	}
	div.home-section#events-feature {
		background: url("../../img/background-event-texture.png") no-repeat right bottom;
		background-size: 200%;
	}
	div.home-section#video-feature {
		background: url("../../img/background-brush-texture.png") no-repeat left center;
		background-size: cover;
		background-color: #0d2c54;
	}
	div.home-section#video-festival {
		background: url("../../img/background-festival-video.jpg") no-repeat center center;
		background-size: cover;
		background-color: #0d2c54;
	}
	div.home-section#video-festival:after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(13,44,84,0.5);
	}
	div.home-section#merchandise-feature {
		grid-template-columns: 10% auto 10%;
		grid-template-rows: auto;
		grid-template-areas:
			". merchandise ."
		;
	}
	div.home-section#merchandise-feature:before {
		content: "";
		display: block;
		position: absolute;
		z-index: 2;
		bottom: -20px;
		left: 0;
		width: 300px;
		height: 500px;
		background: url("../../img/flower-teal.svg") center bottom no-repeat;
		background-size: contain;
	}
	div.home-section#merchandise-feature:after {
		content: "";
		display: block;
		position: absolute;
		z-index: 0;
		top: 0;
		right: 0;
		width: 150px;
		height: 300px;
		background: url("../../img/intersection-orange.svg") right top no-repeat;
		background-size: contain;
	}
	div.home-section#gallery-feature {
		grid-template-columns: auto;
		grid-template-rows: auto;
		grid-template-areas:
			"gallery"
		;
		background: #ccc;
	}
	div.home-section#presidents-message {
		text-align: center;
		background: url("../../img/bg-translucent-brush-texture.png") no-repeat left center;
		background-size: cover;
	}
	div.map {
		display: block;
		position: relative;
		z-index: -20;
		min-height: 500px;
		padding: 0;
		margin: 0;
		background: #ccc;
	}
		div.map #events-map {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
		}

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


/* ! 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: 2em 15%;

				display: flex;
				align-items: center;
				justify-content: center;
			}
			.home-banner-set .banner-container { padding-bottom: 5em; }
			.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;
			}
			.banner-link:hover .banner-text {
				opacity: .5;
			}
				.banner-title {
					color: inherit;
					font-size: 3rem;
					margin-top: 0;
					margin-bottom: 0.5rem;
					text-transform: uppercase;
				}
				.banner-subtitle {
					color: inherit;
					font-size: 1.75rem;
					margin-top: 0;
					margin-bottom: 0.5rem;
					text-transform: none;
				}
				.banner-desc {

				}

	/* ! 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 */
.documents {

}
	.doc-category {

	}
		.doc-category-title {

		}
		.doc-category-desc {

		}
	.doc-item {
		margin-bottom: 2rem;
	}
	.doc-desc {

	}
		.doc-desc *:last-child {
			margin-bottom: 0;
		}
	.doc-link {

	}
		.doc-link .icon {
			width: 1em;
			height: 1em;
			min-width: 1em;
			margin-right: .5rem;
		}


/* ! Site Footer	*/
div.sponsor-section {
	display: grid;
	position: relative;
	grid-template-columns: 15% 22.5% 1fr 22.5% 1fr 22.5% 15%;
	grid-template-rows: auto;
	grid-template-areas:
		". thanks thanks thanks thanks thanks ."
		". platinum platinum platinum platinum platinum ."
		". gold gold gold gold gold ."
		". silver silver silver bronze bronze ."
		". lava lava lava other other ."
		". gov gov gov gov gov ."
	;
	padding: 3em 0 5em 0;
	margin: 0;
	background: #ededed;
	overflow: hidden;
}
div.sponsor-section:before {
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	bottom: 100px;
	left: -50px;
	width: 500px;
	height: 800px;
	background: url("../../img/group-blue.svg") left top no-repeat;
	background-size: contain;
}
body.default div.sponsor-section:before {
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	bottom: 50px;
	left: -50px;
	width: 500px;
	height: 800px;
	background: url("../../img/group-blue.svg") left top no-repeat;
	background-size: contain;
}
div.sponsor-section:after {
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	top: 30px;
	right: -30px;
	width: 500px;
	height: 800px;
	background: url("../../img/group-pink.svg") right top no-repeat;
	background-size: contain;
}
body.default div.sponsor-section:after {
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	top: 50px;
	right: -50px;
	width: 500px;
	height: 800px;
	background: url("../../img/group-blue.svg") right top no-repeat;
	background-size: contain;
}
	div.sponsor-thanks {
		display: block;
		position: relative;
		z-index: 1;
		grid-area: thanks;
		padding: 0 40% 0 0;
		margin: 0 0 1em 0;
	}
		div.sponsor-thanks h2 {
			text-transform: none;
		}
	div.sponsor-set {
		display: block;
		position: relative;
		z-index: 1;
		padding: 1.5em;
		margin-bottom: 1em;
		box-shadow: 0px 0px 5px #ccc;
		border-radius: 5px;
		background: #fff;
	}
	div.sponsor-set#platinum			{ grid-area: platinum; }
	div.sponsor-set#gold 					{ grid-area: gold; }
	div.sponsor-set#silver 				{ grid-area: silver; margin-right: 1em; }
	div.sponsor-set#bronze 				{ grid-area: bronze; }
	div.sponsor-set#lava 					{ grid-area: lava; margin-right: 1em; }
	div.sponsor-set#community 		{ grid-area: community; margin-right: 1em; }
	div.sponsor-set#other 				{ grid-area: other; }
	div.sponsor-set#gov-partners	{ grid-area: gov; }
		div.sponsor-section h2 {
			margin: 0 0 0.5em 0;
			line-height: 1.125;
		}
		div.sponsor-thanks h2 { font-size: 2.5rem; }
		div.sponsor-thanks h3 { margin: 0 0 0.5em 0; text-transform: none; }
		div.sponsor-set h2 { font-size: 1.25rem; }
		div.sponsor-set#platinum h2,
		div.sponsor-set#gold h2 { margin: 0 0 1.5em 0; text-align: center; }
		div.sponsor-set h3 {
			margin: 0 0 1em 0;
			font-size: 1rem;
			font-weight: 600;
			line-height: 1.125;
		}
		div.sponsor-set ul { padding: 0; margin: 0; list-style: none; font-size: 0.875rem; font-weight: 400; }
		div.sponsor-set#platinum ul,
		div.sponsor-set#gold ul,
		div.sponsor-set#gov-partners ul {
			display: flex;
			position: relative;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			column-gap: 2%;
			row-gap: 1.25rem;
			width: 100%;
			padding: 0;
			margin: 0;
			list-style: none;
			text-align: center;
		}
		div.sponsor-set#silver ul { columns: 2 150px; }
		div.sponsor-set#bronze ul,
		div.sponsor-set#lava ul,
		div.sponsor-set#community ul,
		div.sponsor-set#other ul { columns: 2 150px; }
		div.sponsor-set ul li { padding: 0 1em 0 0; margin: 0 0 0.75em; line-height: 1.1; }
		div.sponsor-set#platinum ul li,
		div.sponsor-set#gold ul li {
			display: flex;
			position: relative;
			align-items: center;
			flex-grow: 1;
			flex-basis: 32%;
			max-width: 32%;
			align-self: stretch;
			padding: 2em;
			margin: 0;
			border: 1px solid #e3e4e4;
		}
		div.sponsor-set#gov-partners ul li {
			display: flex;
			position: relative;
			justify-content: center;
			align-items: center;
			align-content: center;
			flex-wrap: wrap;
			flex-grow: 1;
			flex-basis: 23.5%;
			max-width: 23.5%;
			padding: 2em 0.5em;
			margin: 0 auto;
			border: 1px solid #e3e4e4;
			text-align: center;
		}
		div.sponsor-set ul li img { display: block; width: 100%; height: auto; }
		div.sponsor-set ul li a { display: block; line-height: 1.1; color: #0d2c54; }
		div.sponsor-set#gold ul li a {  }
		div.sponsor-set#gov-partners ul li a {  }
		div.sponsor-set ul li a:hover { text-decoration: underline; }

div.contact-section {
	z-index: 1;
	display: flex;
	position: relative;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
	min-height: 700px;
	padding: 0;
	margin: 0;
}
	div.contact-section div.contact-map {
		display: block;
		position: relative;
		flex-basis: 50%;
		max-width: 50%;
		min-height: 700px;
		padding: 0;
		margin: 0;
		background: url("../../img/map-icefest.png") no-repeat center bottom;
		background-size: cover;
	}
		div.contact-section div.contact-map > a {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
		}
	div.contact-section div.contact-info {
		display: block;
		position: relative;
		flex-basis: 50%;
		max-width: 50%;
		padding: 4em;
		margin: 0;
		background: #0d2c54;
		color: #fff;
	}
		div.contact-section div.contact-info > img {
			display: block;
			max-width: 200px;
			margin: 0 0 1em 0;
		}
		div.contact-section div.contact-info h2 {
			line-height: 1.125;
		}
		div.contact-section div.contact-info h3 {
			line-height: 1.125;
			text-transform: none;
		}
		div.contact-section div.contact-info p {
			font-size: 1rem;
			font-weight: 500;
		}
.site-footer {
	display: grid;
	position: relative;
	grid-template-columns: 10% auto 30% 10%;
	grid-template-rows: auto;
	grid-template-areas:
		". footer-nav social-media ."
		". logo copyright ."
	;
	padding: 1em 0;
	margin: 0;
}

	.site-footer ul.social-media {
		display: flex;
		position: relative;
		justify-content: space-around;
		flex-wrap: nowrap;
		grid-area: social-media;
		max-width: 100%;
		padding: 1em 0 1em 50%;
		margin: 0;
		border-bottom: 1px solid #f3f4f4;
		list-style: none;
	}
		.site-footer ul.social-media li {
			display: block;
			position: relative;
			flex-grow: 1;
			max-width: 40px;
			padding: 0;
			margin: 0 0 0 0.5em;
			line-height: 0;
			text-align: center;
		}
		.site-footer ul.social-media li:first-child { margin: 0; }
			.site-footer ul.social-media li a {
				display: block;
				position: relative;
				width: 40px;
				height: 40px;
				padding: 5px;
				margin: 0;
				color: #0d2c54;
			}
	.site-footer p.tagline {
		grid-area: logo;
		width: 45%;
		padding: 1rem 0;
		margin: 0;
	}
	.site-footer p.copyright {
		grid-area: copyright;
		padding: 1.5rem 0;
		margin: 0;
		text-align: right;
		text-transform: uppercase;
		font-size: 0.75rem;
		font-weight: 500;
		line-height: 1.5;
		color: #0d2c54;
	}

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