/* colors */
:root {
	--color-header-background: #fff;

	--color-nav-mobile-background: #000;
	--color-nav-mobile-a: #fff;
	--color-nav-mobile-a-hover: #ccc;
	--color-nav-background: none;
	--color-nav-a-background: #066543;
	--color-nav-a: #fff;
	--color-nav-a-hover: #000;
	--color-nav-a-background-hover: #066543;
	
	--color-main: #4d4d4d;
	--color-main-hX: #000;
	--color-main-a: #066543;
	--color-main-a-hover: #04452e;
	
	--color-footer-background: #231f20;
	--color-footer: #fff;
	--color-footer-a: #fff;
	--color-footer-a-hover: #ccc;	
}

html { scroll-padding-top: var(--header-height); }
body { padding-top: var(--header-height); } /* important - must match scroll-padding-top */
body.noscroll { height: 100%; overflow: hidden; }

/* header, nav, logo */
:root {
	--header-height: 150px;	
	--logo-height: 120px;
	--logo-height-compact: 60px;
}		
header { z-index: 1000; position: fixed; top: 0; width: 100%; background: var(--color-header-background); display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; align-items: center; box-shadow: 0 1px 6px #666; height: var(--header-height); transition: height 0.5s; }
header .logo { width: auto; height: var(--logo-height); display: block; cursor: pointer; transition: height 0.5s; margin-left: 10px; }
header.compact { --header-height: 80px; height: var(--header-height); }
header.compact .logo { height: var(--logo-height-compact); }
header nav a:not([href]) { cursor: default; }

@media (max-width: 991px) {
	header nav .scroller { height: 100%; overflow: scroll; }	
	header nav { position: absolute; top: var(--header-height); left: 0px; width: 100%; background: var(--color-nav-mobile-background); text-align: center; letter-spacing: 2px; display: none; box-shadow: 0 1px 6px #666; height: calc(100vh - var(--header-height)); }
	header nav ul { margin: 2rem 0; padding: 0; }
	header nav li { margin: 18px 0; }
	header nav a { display: block; color: var(--color-nav-mobile-a); }
	header nav a:hover { color: var(--color-nav-mobile-a-hover); }	
	
	header nav .submenu { margin: 0.5em 0; }
	header nav .submenu a { text-transform: none; font-size: 0.9rem; color: var(--color-nav-mobile-a); padding: 0.25rem; }	
	header nav .submenu a[href]:hover { color: var(--color-nav-mobile-a-hover); }
}
@media (min-width: 992px) {
	header { flex-wrap: nowrap; }
	header nav { position: relative; flex-basis: auto; width: auto; text-align: center; background: var(--color-nav-background); display: block !important; margin-right: 10px; }
	header nav ul { margin: 0; }
	header nav li { display: inline-block; margin: 0 0 0 10px; letter-spacing: 0.15rem; position: relative; }
	header nav li:hover a { background-color: var(--color-nav-a-background-hover); color: var(--color-nav-a-hover); }
	header nav li:hover .submenu a { background-color: #f1f1f1; color: #000; }
	header nav li:hover .submenu a:hover { background-color: #ddd; }
		
	header nav a { display: inline-block; background-color: var(--color-nav-a-background); color: var(--color-nav-a); padding: 10px 15px; transition: background-color 0.25s;  font-weight: 400;  }
	header nav a:hover { background-color: var(--color-nav-a-background-hover); color: var(--color-nav-a-hover); }

	header nav .submenu { display: none; position: absolute; background-color: var(--color-nav-a-background); min-width: 100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; opacity: 0.9; margin: 0; }
	header nav .submenu a { color: black; padding: 12px 16px; text-decoration: none; display: block; margin: 0; text-align: initial; white-space: normal; line-height: 1.5rem; outline: none; font-weight: normal; text-transform: none; }
	header nav li:hover .submenu { display: block; }
}

/* main */
main { color: var(--color-main); }
main h2, h3 { color: var(--color-main-hX); letter-spacing: 2px; }
main a { color: var(--color-main-a); }
main a:hover { color: var(--color-main-a-hover); }
main ul,ol { list-style-position: inside; margin: 1rem 2rem; }

/* footer */
footer { background: var(--color-footer-background); color: var(--color-footer); }
footer a { color: var(--color-footer-a); transition: all 0.5s; }
footer a:hover { color: var(--color-footer-a-hover); }
footer p { margin-bottom: 0.25em; }

/* top of page button */
.top-of-page-btn { z-index: 100; position: fixed; width: 40px; height: 40px; text-align: center; border-radius: 50%; line-height: 40px; color: rgba(255,255,255,0.5); font-size: 24px; background-color: rgba(0,0,0,0.5); bottom: 5%; right: 5%; display: none; cursor: pointer; }	

/* burger button */
:root {
	--burger-btn-width: 35px;
  --burger-btn-gap: 12px;
	--burger-btn-height: 4px;
	--burger-btn-color: #066543;
}
#burger-btn { width: var(--burger-btn-width); height: calc((var(--burger-btn-gap) * 2) + var(--burger-btn-height)); position: relative; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; margin-right: 10px; }
#burger-btn span { display: block; position: absolute; height: var(--burger-btn-height); width: 100%; background: var(--burger-btn-color); border-radius: 4px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; }			
#burger-btn span:nth-child(1) { top: 0px; }
#burger-btn span:nth-child(2), #burger-btn span:nth-child(3) { top: var(--burger-btn-gap); }
#burger-btn span:nth-child(4) { top: calc(var(--burger-btn-gap) * 2); }
#burger-btn.open span:nth-child(1) { top: var(--burger-btn-gap); width: 0%; left: 50%; }
#burger-btn.open span:nth-child(2) { transform: rotate(45deg); }
#burger-btn.open span:nth-child(3) { transform: rotate(-45deg); }
#burger-btn.open span:nth-child(4) { top: var(--burger-btn-gap); width: 0%; left: 50%; }			
@media (min-width: 992px) {
	#burger-btn { display: none; }					
}

/* privacy popup */
.privacy-popup { position: fixed; bottom: 0px; left: 0px; width: 100%; background: #333; z-index: 200; color: #fff; display: none; }
.privacy-popup > .container { padding: 20px; }
.privacy-popup button { padding: 10px 25px 10px 25px; margin-top: 10px; border: solid 1px #4d4d4f; border-radius: 4px; background: #fff; color: #333; cursor: pointer; }
.privacy-popup button:hover { background: #eee; }

/* lightbox */
.lightbox { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10000; background-color: rgba(0,0,0, 0.95); display: none; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; }
.lightbox .lightbox-content { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; }
.lightbox .close { color: #fff; font-size: 24px; position: absolute; top: 20px; right: 20px; cursor: pointer; z-index: 140; }
.lightbox .tinyslider { flex-basis: 100%; }
.lightbox .tinyslider-prev, .lightbox .tinyslider-next { color: #fff; font-size: 2.5rem; opacity: 0.5; }

/* banner */
.banner { height: 300px; width: 100%; position: relative; display: flex; justify-content: center; align-items: center; }
.banner .caption { text-align: center; color: #fff; position: absolute; font-size: 3rem; letter-spacing: 0.5rem; line-height: 4rem; text-shadow: 1px 1px 4px #000; }
.banner img { object-fit: cover; object-position: center; height: 100%; width: 100%; }

.banner.condensed { height: 250px; }
@media (min-width: 768px) {
	.banner { height: 350px; }
	.banner .caption { font-size: 3.5rem; line-height: 4.5rem; }
}
@media (min-width: 992px) {
	.banner { height: 400px; }
	.banner .caption { font-size: 4rem; line-height: 4.5rem; }
	.banner.condensed { height: 300px; }
}
@media (min-width: 1200px) {
	.banner { height: 450px; }
	.banner .caption { font-size: 5rem; line-height: 6rem; }
}

/* slide banner */
.slide-banner { position: relative; }
.slide-banner .tinyslider-slide { height: 300px; }
.slide-banner .caption { position: absolute; top: 50%; transform: translateY(-50%) translateX(-50%); left: 50%; user-select: none; }
.slide-banner .tinyslider-slide img { object-fit: cover; object-position: center; height: 100%; width: 100%; }
.slide-banner .tinyslider-prev,.tinyslider-next { color: #fff; font-size: 2.5rem; opacity: 0.5; }
@media (min-width: 992px) {
	.slide-banner .tinyslider-slide { height: 400px; }
}

/* ken burns banner */
:root {
	--ken-burns-duration: 40s;
}
.ken-burns { overflow: hidden; position: relative; }
.ken-burns img { width: 100%; position: absolute; animation: keyframes-ken-burns-top-left var(--ken-burns-duration) ease; animation-direction: alternate; animation-iteration-count: infinite; }
@keyframes keyframes-ken-burns-bottom-right {
  0% { transform-origin: bottom right; transform: scale(1.0); }
  100% { transform: scale(1.2); }
}
@keyframes keyframes-ken-burns-top-left {
  0% { transform-origin: top left; transform: scale(1.0); }
  100% { transform: scale(1.2); }
}

/* toast */
.toast { position: fixed; top: 0px; left: 0px; width: 100%; background: #333; z-index: 1010; color: #fff; display: none; }		
.toast > .container { padding: 20px; }

/* contact form */
ul.contacts { margin: 0; }
ul.contacts li { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 20px; }
.contacts .icon { width: 70px; text-align: center; margin-right: 10px; line-height: 1rem; }
.contacts .icon img { height: 70px; }

.enquiry-field { display: flex; flex-flow: column-reverse; margin-bottom: 0.25rem; }
.enquiry-field label, .enquiry-field input, .enquiry-field textarea { transition: all 0.2s; touch-action: manipulation; }
.enquiry-field input, .enquiry-field textarea { font-size: 1rem; border: 0; border-bottom: 2px solid transparent; font-family: inherit; appearance: none; border-radius: 0; cursor: text; background: #f1f1f1; padding: 10px; }
.enquiry-field input:focus, .enquiry-field textarea:focus { outline: 0; border-bottom: 2px solid #066543; }
.enquiry-field label { text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 3px; }
.enquiry-field input:placeholder-shown + label, .enquiry-field textarea:placeholder-shown + label { cursor: text; max-width: 66.66%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: left bottom; transform: translate(4px, 25px) scale(1);	}
.enquiry-field ::placeholder { opacity: 0; transition: inherit; color: #ccc; }					
.enquiry-field input:focus::placeholder, .enquiry-field textarea:focus::placeholder { opacity: 1; }
.enquiry-field input:not(:placeholder-shown) + label, .enquiry-field input:focus + label, .enquiry-field textarea:not(:placeholder-shown) + label, .enquiry-field textarea:focus + label { transform-origin: left bottom; transform: translate(0, 0) scale(0.7); cursor: pointer; }
.enquiry-field input:not(:placeholder-shown):invalid { background-color: salmon; }

.submit-button { padding: 10px 25px 10px 25px; margin-top: 10px; border: solid 1px #4d4d4f; border-radius: 4px; background: #fff; color: #333; cursor: pointer; text-transform: uppercase; }
.submit-button:hover { background: #eee; }

/* responsive iframe embed */
.embed-responsive { overflow:hidden; padding-bottom: 56.25%; position:relative; height:0;	}
.embed-responsive iframe { left:0; top:0; height:100%; width:100%; position:absolute; }