@import url('../fonts/fonts.css');

/* ==== reset ==== */
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, div.paragraph, p, blockquote, fieldset, input { margin: 0; padding: 0; }
a img { border: 0; }
a { text-decoration: none; color: #5199a8; transition: all 0.2s ease-in-out; }
a:hover { color: #8dc7d3; }
html { height: 100%; }
body { font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 15px; line-height: 28px; color: #90999f; min-height: 100%; background: #f9f9f9; -webkit-font-smoothing: antialiased; }
.body-wrap, .bg-wrapper { background-color: #ffffff; }

h2 { font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 3px; font-size: 21px; color: #3f3f3f; margin: 0 auto .3em; }
div.paragraph, p { font-family: 'Raleway', sans-serif; font-weight: 300; line-height: 28px; margin: 0 auto 1em; color: #90999f; }
div.paragraph ul, div.paragraph ol { padding-left: 3em !important; margin: 5px 0 !important; }
div.paragraph li { padding-left: 5px !important; margin: 3px 0 0 !important; }
div.paragraph ul, div.paragraph ul li { list-style: disc outside !important; }
div.paragraph ol, div.paragraph ol li { list-style: decimal outside !important; }

hr.styled-hr { background-color: #d0d0d0; height: 1px; border: 0; }

/* ==== header / logo ==== */
#header { text-align: center; padding-top: 52px; padding-bottom: 25px; background: #ffffff; }
.wsite-logo a { color: #484848; }
#sitename img { max-width: 90px; height: auto; }
.nav-trigger { display: none; }

/* ==== nav ==== */
#navigation { padding-bottom: 40px; width: 960px; margin: auto; text-align: center; text-transform: uppercase; font-family: 'Raleway', sans-serif; font-size: 13px; overflow: hidden; white-space: nowrap; }
#navigation ul { display: inline-block; white-space: normal; list-style-type: none; }
#navigation li { display: inline-block; }
#navigation a { display: inline-block; padding: 10px 14px; color: inherit; }
#navigation li:hover, #navigation li#active { background-color: #f6f6f6; color: #484848; }
#navigation:before, #navigation:after { background-color: #d0d0d0; content: ""; display: inline-block; height: 1px; bottom: .1em; position: relative; vertical-align: middle; width: 50%; }
#navigation:before { right: 29px; margin-left: -50%; }
#navigation:after { left: 29px; margin-right: -50%; }

.navmobile-wrapper { display: none; }

/* ==== layout containers ==== */
.container, #footer-content { width: 960px; padding: 4em 1.6em; margin: 0 auto; box-sizing: border-box; }
.wsite-section-content { position: relative; width: 100%; }
.wsite-spacer { width: 100%; }

/* ==== banner / header image section ==== */
.banner-wrap { position: relative; text-align: center; background-repeat: no-repeat; background-size: cover; background-position: center center; width: 100%; }
.wsite-header-section { height: 460px; position: relative; background-position: center center; background-size: cover; display: flex; align-items: center; justify-content: center; }
.wsite-vcenter { display: flex; align-items: center; justify-content: center; }
.wsite-vcenter > .wsite-section-content { width: 100%; }
.wsite-header-section:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); z-index: 1; }
#banner { position: relative; width: 900px; height: 100%; margin: auto; display: table; table-layout: fixed; z-index: 3; }
#banner-container { display: table-cell; vertical-align: middle; padding: 4em 1.6em; }
#banner h2, .wsite-header-section .wsite-content-title { font-family: 'Ubuntu Sans', sans-serif; font-size: 49px; color: #ffffff; font-weight: 300; text-align: center; text-transform: none; letter-spacing: normal; }
#banner .paragraph, .wsite-header-section .paragraph { font-family: 'Raleway', sans-serif; font-weight: 200; font-size: 16px; color: #ffffff; letter-spacing: 2px; text-align: center; }

@keyframes lit-banner-fade-up {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: translateY(0); }
}
.wsite-header-section .wsite-content-title,
.wsite-header-section .paragraph {
	animation: lit-banner-fade-up 0.9s ease-out both;
}
.wsite-header-section .paragraph {
	animation-delay: 0.25s;
}

/* ==== buttons ==== */
.wsite-button { display: inline-block; cursor: pointer; }
.wsite-button-inner { font-family: 'Lato', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #ffffff; background-color: #5199a8; padding: 8px 20px; display: inline-block; font-size: 12px; }
.wsite-button-large .wsite-button-inner { padding: 10px 25px; }
.wsite-button-small .wsite-button-inner { font-size: 12px; }
.wsite-button-highlight .wsite-button-inner { background-color: #5199a8; }
.wsite-button-highlight:hover .wsite-button-inner { background-color: #5cb0c2; }
.wsite-button-normal .wsite-button-inner { background-color: #484848; }
.wsite-button-normal:hover .wsite-button-inner { background-color: #616161; }

/* ==== images ==== */
.wsite-image img { max-width: 100%; height: auto; display: inline-block; }
.wsite-image div { }

/* ==== multi-column layout ==== */
.wsite-multicol-table-wrap { margin: 0 -15px; }
.wsite-multicol-table { width: 100%; border-collapse: collapse; }
.wsite-multicol-col { vertical-align: top; }

/* ==== forms ==== */
.wsite-form-label { font-weight: normal; font-family: 'Raleway', sans-serif; font-size: 14px; display: block; margin-bottom: 4px; }
.wsite-form-fields-required-label { display: block; margin-bottom: 10px; font-size: 13px; }
.form-required { color: #e04c4c; }
.wsite-form-input, .wsite-form-input-container textarea { border: solid 1px #d0d0d0; border-radius: 0; margin: 8px 0; background-image: none; min-height: 35px; padding: 8px; font-size: 13px; box-sizing: border-box; width: 100%; font-family: 'Raleway', sans-serif; }
.wsite-form-input:focus { border-color: #5199a8; outline: none; }
.wsite-form-field { margin: 5px 0; }
.mailto-box { text-align: center; }
.mailto-box a.wsite-button { margin-top: 10px; }

/* ==== slideshow (custom, replaces Weebly wSlideshow) ==== */
.lit-slideshow { width: 100%; }
.lit-slideshow-main { position: relative; width: 100%; overflow: hidden; background: #f2f2f2; }
.lit-slideshow-main img { width: 100%; height: auto; display: block; }
.lit-slideshow-thumbs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin-top: 10px; padding-bottom: 4px; }
.lit-slideshow-thumbs img { width: 70px; height: 70px; object-fit: cover; cursor: pointer; opacity: 0.55; transition: opacity 0.2s ease-in-out; flex: 0 0 auto; }
.lit-slideshow-thumbs img:hover { opacity: 0.85; }
.lit-slideshow-thumbs img.active { opacity: 1; outline: 2px solid #5199a8; }

.contact-links, .contact-links li, .contact-links font { font-size: 14px !important; }

/* ==== footer ==== */
.lit-footer a, .lit-footer h2.wsite-content-title { color: #515151 !important; }

#footer { font-family: 'Raleway', sans-serif; font-size: 14px; background: #f9f9f9; }
#footer-content { width: 960px; margin: auto; text-align: center; padding: 1.5em 1.6em; }

/* ==== responsive ==== */
@media (max-width: 1024px) {
	#navigation, #banner, .container, #footer-content { width: auto; min-width: 100%; }
}
@media (max-width: 992px) {
	h2 { font-size: 1.4em; }
	.paragraph, div.paragraph { font-size: 1em !important; line-height: 1.5em !important; }
}
@media (max-width: 767px) {
	.wsite-multicol-col { max-width: 100% !important; display: block; width: auto !important; margin: 0 auto 1em !important; }
	.wsite-section { height: auto !important; }
	#banner h2, .wsite-header-section .wsite-content-title { font-size: 2em !important; }
	.wsite-header-section { height: auto !important; min-height: 260px; padding: 40px 0; }
	.container { padding: 2em 1.2em; }
}
@media (max-width: 700px) {
	#header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; text-align: left; }
	#sitename { flex: 1; }
	.nav-trigger { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; width: 24px; }
	.nav-trigger .open-btn { display: flex; flex-direction: column; gap: 5px; }
	.nav-trigger span.mobile { display: block; background-color: #484848; height: 2px; width: 24px; }
	#navigation { display: none; }
	.navmobile-wrapper { display: block; }
	.navmobile-wrapper #navmobile { display: none; width: 100%; background: #ffffff; border-top: 1px solid #eee; }
	.navmobile-wrapper #navmobile.open { display: block; }
	.navmobile-wrapper ul { list-style: none; text-align: center; }
	.navmobile-wrapper li { border-bottom: 1px solid #f0f0f0; }
	.navmobile-wrapper a { display: block; padding: 14px; color: #484848; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; }
}