@font-face {
font-display: swap;
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url('../fonts/raleway/raleway-v37-latin-regular.woff2') format('woff2'),
url('../fonts/raleway/raleway-v37-latin-regular.ttf') format('truetype');
}
@font-face {
font-display: swap;
font-family: 'Raleway';
font-style: italic;
font-weight: 400;
src: url('../fonts/raleway/raleway-v37-latin-italic.woff2') format('woff2'),
url('../fonts/raleway/raleway-v37-latin-italic.ttf') format('truetype');
}
@font-face {
font-display: swap;
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url('../fonts/raleway/raleway-v37-latin-700.woff2') format('woff2'),
url('../fonts/raleway/raleway-v37-latin-700.ttf') format('truetype');
}
@font-face {
font-display: swap;
font-family: 'Raleway';
font-style: italic;
font-weight: 700;
src: url('../fonts/raleway/raleway-v37-latin-700italic.woff2') format('woff2'),
url('../fonts/raleway/raleway-v37-latin-700italic.ttf') format('truetype');
}
body {
font-family: 'Raleway';
}
/* general */
body {background-repeat: repeat; margin: 0; line-height: 1.5; font-size: 16px;}
a {text-decoration: none;}
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
hr {border: 0; height: 1px; background: #333; background-image: none; background-image: linear-gradient(to right, #ccc, #333, #ccc); clear: both;}
.inside {max-width: 1080px; margin: 0 auto;}
/* alignment */
.float.right {float: right; margin: 1em 0 1em 1em;}
.float.left {float: left; margin: 1em 1em 1em 0;}
.center {display: block; margin: 0px auto;}
/* header */
#main-header {background-position: bottom; background-repeat: repeat-x;}
#hero img {display: block; filter: saturate(120%); width: 100%; max-width: 1080px; height: auto;}
#header-text {background: #111; color: white; padding: 0.2em 0 0.2em;}
#header-text span {padding-left: 1.2rem; font-size: 1.1em;}
/* icons */
#icons {float: right; height: 0; font-size: 0;}
#icons a {display: inline-block; width: 20px; height: 20px; overflow: hidden; margin-top:-5px;}
#icons a svg {transition: 0.4s ease; width: 20px;}
#icons a:hover svg {width: 24px;}
/* nav */
#main-nav ul {margin: 0; padding: 0; list-style-type: none; display: flex; justify-content: space-between; flex-wrap: wrap;}
#main-nav li {display: inline-block;}
#main-nav a {padding: 0.8em 1.2em; display: inline-block;}
/* subnav */
#main-nav ul > li ul { position: absolute; left: -999999px; z-index: 10; flex-direction: column; }
#main-nav ul > li:hover > ul { left: auto; }
#main-nav ul > li ul > li { opacity: 0; background-color: white; padding-right: 30px; transition: 0.3s all ease; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3); }
#main-nav ul > li:hover > ul > li { opacity: 1; }
#main-nav ul li ul a { color: #111111; }
#main-nav ul > li ul > li:last-of-type { border-radius: 0 0 3px 3px; }
/* menu button */
#menu-button {display: none;}
/* main */
#main-content {background-color: rgba(255,255,255,0.5);}
#content-text {max-width: 75%; background-color: white;}
#content-text article {padding: 2em;}
#content-text h1:first-of-type {margin-top: 0;}
#content-text a:hover {filter: saturate(2);}
/* sidebar */
#sidebar {width: 25%; float: right; padding-top: 2em; text-align: center; background-color: white;}
#sidebar p {margin: 0;}
#sidebar img {max-width: 100%; height: auto;}
/* footer */
footer {background: #111; color: white; text-align: center; clear: both;}
footer p {padding: 1.3em;}
footer a {transition: 0.2s ease; color: white;}
/* lightbox */
.slb-overlay {position: fixed; width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); top: 0; left: 0;}
.slb-image {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; border-radius: 5px; border: 5px solid white;}
.slb-closer {position: fixed; top: 50%; left: 50%; padding: 10px; cursor: pointer;}
.slb-closer:hover {filter: brightness(300%);}
/* info container */
#infoContainer {max-width: 1080px; margin: 0 auto; z-index: 1; position: relative; font-size: 0px; transition: 0.4s ease; display: none; text-align: center;}
#infoContainer a, #infoContainer a:hover {background: none;}
#infoContainer a:hover {text-decoration: underline;}
#infoContainer.infoTel a:hover {text-decoration: none; cursor: default;}
#infoContainer.infoMail {display: block;}
#infoContainer.infoTel {display: block;}
/* disable number dial on desktop */
#infoContainer.infoTel a {pointer-events: none;}
.textImg {display: none;}
.google-map-container {
overflow: hidden; padding-bottom: 80%; position: relative; height: 0;
}
.google-map-container > iframe {
left: 0; top: 0; position: absolute; height: 100%; width: 100%;
}
/* media queries */
@media screen and (max-width: 800px) {
.float.left, .float.right {float: none; display: block; margin: 1rem auto;}
}
@media screen and (max-width: 590px) {
html, body {-webkit-text-size-adjust: 100%;}
#menu-button {font-size: 40px; padding: 0px; display: inline; padding-left: 3%; color: #111; cursor: pointer;}
#main-nav {text-align: left;}
#main-nav a {display: none; border-bottom: 1px solid #111;}
#main-nav ul {flex-direction: column;}
#main-nav li {display: block;}
#main-nav li:first-of-type > a {border-top: 1px solid #111;}
#main-nav.active a {display: block;}
#main-nav ul > li ul { position: relative; left: auto;}
#main-nav ul > li ul > li { opacity: 1; padding: 0; border: none !important; box-shadow: none;}
#main-nav ul li ul a {padding-left: 30px;}
#sidebar {display: none;}
#content-text {max-width: 100%;}
.textImg {display: block; margin: 20px auto; width: 100%; height: auto; max-width: 500px;}
/* allow number dial on phones */
#infoContainer.infoTel a {pointer-events: auto;}
}
@media screen and (max-width: 420px) {
#header-text {padding: 0.3em 0 0.42em;}
#header-text .inside {font-size: 14px;}
#menuButton {font-size: 30px;}
}
@media screen and (max-width: 310px) {
body {padding: 0px;}
#header-text {padding: 0.3em 0 0.6em;}
#header-text .inside {font-size: 12px;}
}