@charset "UTF-8";
/* header section */
.header {
	position: fixed;
	z-index: 110;
	width: 100%;
	padding: 1rem 6vw;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}
.hdark { background-color: var(--shallowHeader-color); }
.headerShallow {
	background-color: var(--shallowHeader-color);
	padding: 0.5rem 6vw;
}
@media (max-width: 550px) {
	.header { padding: 2rem 6vw; }
	.headerShallow { padding: 1rem 6vw; }
}
.headerbutton p {
	margin-bottom: 0;
	color: #ffffff;
}
@media (max-width: 900px) {
	.header .headerbutton p { display: none; }
}
.header .grid { margin-top: 0; }
.headerCol { align-self: center; }
.columnRight {
	display: flex;
	justify-content: flex-end;
}
.topMargin { margin-top: 60px; }
.threecolHead { grid-template-columns: repeat(3, 1fr); }
.twocolHead { grid-template-columns: repeat(2, 1fr); }
/* header buttons */
.headerbutton {
	display: flex;
	gap: 1rem;
	cursor: pointer;
	padding: 0;
	background-color: transparent;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	transform-origin: 50% 50%;
}
.headerbutton:hover { transform: scale(1.1); }
.headerbutton p { align-self: center; }
.headerbutton img {
	width: 32px;
	height: 32px;
}
@media (max-width: 550px) {
	.headerbutton img {
		width: 26px;
		height: 26px;
	}
}
/* SITE LOGO */
.masterLogo, .stackedLogo {
	width: clamp(300px, 40vw, 670px);
	/* width: 40vw; */
	line-height: 0;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}
.stackedLogo {
	display: none;
	width: 140px;
}
.stackedLogoSmall { width: 120px; }
.logoHidden { display: none; }
.masterLogo img, .stackedLogo img {
	width: 100%;
	height: auto;
}
.masterLogoSmall { width: clamp(250px, 40vw, 410px); }
.masterLogo, .stackedLogo { margin: 0 auto; }
.masterLogo a:link, .stackedLogo a:link {
	display: block;
	cursor: pointer;
}
@media (max-width: 550px) {
	.stackedLogo { display: block; }
	.masterLogo { display: none; }
}
.columnLeft .masterLogo, .contactDetails .masterLogo { margin: 0; }
.contactDetails .masterLogo { margin-bottom: 2rem; }