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

:root {
    --black: #000000;
    --white: #ffffff;
    --gray: #c0c0c0;
    --ltgray: #f0f0f0;
    --dkgray: #444444;
    --blue: #006688;
    --gold-deep: #7B7A2B;
    --gold: #cecc72;
}

.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.
*/
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}
main > .container { max-width: 1000px; }

.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: 1em 0;
}

.site-header .container {
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
	column-gap: 2%;
	row-gap: 1.25rem;
	flex-wrap: wrap;
	padding: 0;
}
	.site-title {
		display: block;
		position: relative;
		flex: 0 0 15%;
		max-width: 15%;
		padding: 0;
		margin: 0;
	}
		.site-title > img {
			display: block;
			position: relative;
            width: 100%;
			margin: 0 auto;
		}
		.site-title > a {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			text-decoration: none;
			text-indent: -999em;
			color: inherit;
			font-weight: 800;
			font-size: 30px;
			line-height: 1;
			transition: all .2s;
		}
		.site-title:hover > a {

		}


/* Search Form */
.search-form {
	display: inline-flex;
	position: relative;
	flex-basis: 25%;
	margin: 0;
}
	.search-input {

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



/* 	! SECTIONS	*/
main { padding: 0 0 5rem 0; }
main > div.page-title {
    display: block;
    position: relative;
    width: 100%;
    padding: 10rem 0;
    margin: 0 0 5rem 0;
    background-color: var(--ltgray);
}
div.page-title > h1 {
    display: block;
    position: relative;
    width: 100%;
    max-width: 1000px;
    padding: 3rem;
    margin: 0 auto;
    text-align: center;
    background-color: var(--white);
    color: var(--black);
}
main .home-banners { margin: 0 0 5rem 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: 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;
			}
			.banner-link:hover .banner-text {
				opacity: .5;
			}
				.banner-title {
					color: inherit;
					font-size: 50px;
					font-size: calc(1.5em + 2vw);
					margin-top: 0;
					margin-bottom: 0;
					text-transform: none;
				}
				.banner-subtitle {
					color: inherit;
					font-size: 30px;
					font-size: calc(1em + 2vw);
					margin-top: 0;
					margin-bottom: 0;
					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) */
		}



/* ! Site Footer  */
footer.site-footer {
	position: relative;
	padding: 1em 0;
	margin: 0;
	background-color: #444;
	color: #fff;
}
	footer div.container {
		display: flex;
		position: relative;
		justify-content: flex-start;
		flex-wrap: wrap;
		column-gap: 2%;
		row-gap: 1.25rem;
		padding: 0;
		margin: 0 auto;
	}
		footer div.container div.footer-block {
			display: block;
			position: relative;
			flex-basis: 30%;
			max-width: 30%;
			flex-grow: 1;
			padding: 0;
			margin: 0;
		}
			footer div.container div.footer-block h2 {
                font-size: 2.5rem;
				font-weight: 500;
				text-transform: uppercase;
			}
			footer div.container div.footer-block a {
				color: var(--gold);
			}
			footer div.container div.footer-block a:hover {
				color: var(--white);
			}
			footer div.container div.footer-block ul.social {
				display: flex;
				position: relative;
				justify-content: flex-start;
				column-gap: 1rem;
				width: 100%;
				padding: 0;
				margin: 0;
				list-style: none;
			}
				footer div.container div.footer-block ul.social li {
					display: block;
					position: relative;
					width: 40px;
					height: 40px;
				}
					footer div.container div.footer-block ul.social li a {
						display: block;
						position: relative;
						padding: 5px;
						line-height: 0.75;
						color: #fff;
					}
					footer div.container div.footer-block ul.social li a#facebook {  }
					footer div.container div.footer-block ul.social li a#instagram {  }
		footer div.container div.footer-block#map {
			max-width: 50%;
		}
			footer div.container div.footer-block#map > iframe {
				display: block;
				position: relative;
				width: 100%;
				min-height: 300px;
			}
	footer div.container p.copyright {
		display: block;
		position: relative;
		width: 100%;
		margin: 0;
		text-align: center;
	}

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