@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';
}
body { margin: 0; }
a { text-decoration: none; transition: 0.2s all ease; }
hr { border: 0; height: 1px; background: #333; background-image: none; background-image: linear-gradient(to right, #ccc, #333, #ccc); }
.inside { margin: 0 auto; box-sizing: border-box; }
.float { max-width: 400px; height: auto; }
.float.right { float: right; margin: 1em 0 1em 1em; }
.float.left { float: left; margin: 1em 1em 1em 0; }
header { position: fixed; width: 100%; background-color: white; top: 0; z-index: 1000; }
header > * { transition: 0.4s all ease; }
#header-top { padding: 1.3em 0; }
#header-top .inside { padding: 0 1em; }
#header-top a:hover { text-decoration: underline; }
#header-top strong, #header-top a { white-space: nowrap; }
.icon.round { height: 1em; width: auto; margin: 2px 0.5em -2px 0; }
.sticky #header-top { padding: 0.3em 1em; }
#header-middle { padding: 1em; }
#header-middle .inside { display: flex; justify-content: space-between; padding: 0 1em; }
#header-middle img { max-height: 70px; }
.sticky #header-middle img { max-height: 50px; }
.sticky #header-middle { border-bottom: 1px solid #e5e5e5; }
#top-nav { display: flex; align-items: center; margin-right: -1em; }
#top-nav a { padding: 1em; font-weight: bold; text-transform: uppercase; color: #211f20; }
.sticky #top-nav { align-items: center; }
#menu-button { display: none; font-size: 40px; margin-right: 1rem; cursor: pointer; }
.sticky #menu-button { display: inline-block; }
#header-bottom { background-color: #fafafa; }
.sticky #header-bottom { display: none; border-bottom: 1px solid #e5e5e5; }
#header-bottom.visible { display: block; }
#main-nav ul { display: flex; list-style-type: none; margin: 0; padding: 0; }
#main-nav li { transition: 0.2s all ease; position: relative; display: flex; }
#main-nav a { padding: 1em; color: #211f20; width: 100%; }
#main-nav > ul > li > a:hover { background-color: #736963; color: white; }
#main-nav li ul { position: absolute; left: -999999px; top: 3.2em; z-index: 10; flex-direction: column; min-width: 100%; }
#main-nav li ul li { border-bottom: 1px solid #e5e5e5; background-color: white; white-space: nowrap; }
#main-nav li ul li:last-of-type { border-radius: 0 0 3px 3px; }
#main-nav ul > li:hover > ul { left: 0; }
#main-nav li.mobile.only { display: none; }
#hero { width: 100%; height: 24.115vw; margin-top: 13.4em; background-color: grey; background-size: cover; }
#content { display: flex; justify-content: space-between; gap: 2em; padding: 0 1em; font-size: 0.9em; }
article { font-size: 1.1em; line-height: 1.8em; flex: 5; }
article h1 { font-size: 2.2em; line-height: 1em; border-bottom: 1px solid #d4d4d4; padding-bottom: 0.2em; font-family: 'Times New Roman', serif; }
article strong, article a { font-size: 1.2em; }
article a:hover { text-decoration: underline; }
aside { margin-top: 4em; flex: 3; text-align: right; }
aside img { margin: 3em 0 0; width: auto; max-width: 100%; }
#partner-section { text-align: center; margin: 2em auto; }
footer { text-align: center; background-color: #736963; padding: 2em; color: white; }
footer a { color: white; margin: 0 1em; }
footer a:hover { text-decoration: underline; }
/* open street map */
div[id^="osm-map"] { line-height: normal; }
@media screen and (max-width: 1350px) {
.inside { padding: 0 1em; }
#content { padding: 0 2em; }
}
@media screen and (max-width: 900px) {
.bigscreen.only { display: none; }
#header-top { padding: 0.3em 1em; }
#header-top span, #header-top img.icon { display: none; }
#header-top a { display: block; }
#header-middle img { max-height: 50px; }
#menu-button { display: inline-block; }
#header-bottom { display: none; border: none !important; }
#main-nav > ul { flex-direction: column; position: fixed; inset: 8em 0 0 0; overflow-y: auto; background-color: #fafafa; }
.sticky #main-nav > ul { inset: 12em 0 0 0; }
#main-nav a { width: auto; }
#main-nav li { border-bottom: 1px solid #e5e5e5; flex-direction: column; }
#main-nav li.mobile.only { display: flex; }
#main-nav li ul { position: relative; left: 0; top: 0; }
#main-nav li ul li:last-of-type { border-radius: 0; border-bottom: none; }
#main-nav li ul li a { padding-left: 2em; }
#hero { margin-top: 8em; }
}
@media screen and (max-width: 720px) {
.inside { padding: 0; }
#content { flex-direction: column; padding: 0 2em; }
aside { margin: 0; text-align: center; }
aside img { margin: 1em 0; }
article h1 { font-size: 1.8em; }
article strong { font-size: 1.1em; }
}
@media screen and (max-width: 620px) {
.float.left, .float.right { float: none; max-width: 100%; display: block; margin: 0 auto; }
}
@media screen and (max-width: 460px) {
article ul { padding: 0; list-style-type: inside; }
}