:root{--success: #8de527; --danger: #ff0000; --error: #ff0000; --warning: #ffa500; --info: #71c3e9; --default: #999; --stateless: #ccc;}
::-webkit-input-placeholder {color: #d4d4d4;}
:-ms-input-placeholder {color: #d4d4d4;}
::placeholder {color: #d4d4d4;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300))); line-height: 1.6; color: var(--default);}
body * {text-rendering: geometricPrecision;box-sizing: border-box;}
b {font-weight: 600}
a {text-decoration: none; color: #0fa0ea;}
hr {display: flex; flex: 1; width: 100%; height: 1px; border: none; background: #ccc; margin:20px 0;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: none;}
table {border-collapse: collapse; border-spacing: 0;}
.hidden {height: 0;position: absolute;width: 0; display: none !important;}
.ctr {text-align: center;}
:focus {outline-color: transparent; outline-style: none;}

header {padding: 1em 0; box-shadow: 0 0 4px 2px #dee0e6; position: sticky !important; top: 0; z-index: 1000; background: #fff;}
header div {position: relative; width: 90vw; max-width: 1168px; margin: auto;}
#logo {display: block; width: 120px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 136 25'%3E%3Cpath d='M12.47 4.32c3.78 0 6.56 2.3 7.35 5.57h4.9C23.84 4.02 18.96 0 12.46 0 5.2 0-.01 5.06-.01 12c0 7 5.22 12.05 12.47 12.05 6.5 0 11.4-4.05 12.27-9.92h-4.9c-.8 3.3-3.6 5.64-7.35 5.64-4.43 0-7.6-3.27-7.6-7.8 0-4.45 3.16-7.66 7.6-7.66m20 6.5V7.1H28v16.67h4.47v-8.03c0-2.97 2.44-4.8 6.15-4.8v-4.4c-2.82 0-4.98 1.6-6.15 4.25m12.06 2.64c.72-1.86 2.44-3.1 4.57-3.1 2.2 0 4.05 1.28 4.74 3.1zm4.54-6.68c-5.33 0-9.17 3.64-9.17 8.67s3.85 8.64 9.17 8.64c4.2 0 7.87-2.6 8.83-6.24h-4.5c-.62 1.52-2.3 2.67-4.3 2.67a4.79 4.79 0 0 1-4.74-3.7h13.7c.1-.4.14-.88.14-1.32-.03-5.06-3.85-8.7-9.14-8.7zm20.5 13.5c-2.65 0-4.57-2.02-4.57-4.83 0-2.83 1.92-4.86 4.57-4.86s4.54 2.02 4.54 4.86c0 2.8-1.9 4.83-4.54 4.83zm4.54-10.5c-1.37-1.86-3.47-3-5.98-3-4.47 0-7.73 3.64-7.73 8.67s3.26 8.64 7.73 8.64c2.5 0 4.6-1.1 5.98-3v2.7h4.5V.35h-4.5v9.4zM87.2 7.1h-4.5v16.67h4.5zM84.94 0c-1.58 0-2.7 1-2.7 2.46 0 1.42 1.13 2.43 2.7 2.43 1.6 0 2.75-1 2.75-2.43C87.7 1 86.56 0 84.94 0m16.64 19.86c-3.7-.63-6.22-3.76-6.22-7.88 0-4.6 3.2-7.93 7.63-7.93 3.4 0 5.98 2 6.94 4.9h4.98C113.85 3.7 108.93 0 102.95 0 95.7 0 90.48 5.06 90.48 12v.1c.03 2.4 1.2 4.7 3.15 6.15 1.58 1.17 3.55 1.86 5.7 1.86a9.76 9.76 0 0 0 2.25-.27'/%3E%3Cpath d='M111.27 10.8H103v3.98h7.22c-.14.43-.32.85-.54 1.24a6.29 6.29 0 0 1-.93 1.45c-2.07 2.86-5.5 4.74-9.4 4.74-1.66 0-3.23-.34-4.65-.95 2.15 1.76 5 2.8 8.26 2.8 3.32 0 6.18-1.05 8.32-2.85v1.7h4.05V10.8h-4.05z' fill='%230fa0ea'/%3E%3Cpath d='M126.76 20.25c-2.65 0-4.54-2.02-4.54-4.83 0-2.83 1.9-4.86 4.54-4.86 2.68 0 4.57 2.02 4.57 4.86 0 2.8-1.9 4.83-4.57 4.83m.03-13.5c-5.33 0-9.17 3.64-9.17 8.67s3.85 8.64 9.17 8.64c5.3 0 9.14-3.6 9.14-8.64s-3.85-8.67-9.14-8.67'/%3E%3C/svg%3E") center no-repeat;}
#globe {position: absolute; right: 0; top: 0; display: block; height: 30px; width: 25px; background: url('/assets/globe.png') center/contain no-repeat;}

main {padding: 3em 1em; background-color: #0fa0ea; color: #ffffff; display: flex;}
main>div {flex: 1;text-align: center; font-size: 1.3em; align-self: stretch;}
main p.big {font-size: 2em; font-weight: bold;}
footer {font-size: 0.8em; text-align: center; padding: 1em 1em;}

.row {display: flex; width: 100%; max-width: 500px;}
.column {flex: 1; text-align: center;}

#overlay {align-items: center; background: rgba(0, 0, 0, 0.8); display: flex; height: 100vh; justify-content: center; left: 0; position: fixed; top: 0; transition: opacity 0.3s linear; width: 100%; z-index: -9999; opacity: 0; flex-direction: column;}
#overlay div.row a {color: #fff; font-size: 1em; text-decoration: none; width: 100%;}
#overlay div.row a span {display: block; margin: 10px 10px 30px 10px;}
#overlay img {text-align: center;}

#closeOverlay {position: absolute; top: 20px; right: 20px;}
#mapOverlay {position: relative; background: #0FA0EA url('/assets/map.png') center 10px no-repeat; width: 100%; max-width: 500px; border-radius: 10px; text-align: center; margin: 10px; height: 200px; margin-bottom: 40px;}
#mapOverlay:after {content:''; position: absolute; top: 99%; left: 0; right: 0; margin: 0 auto; width: 0; height: 0; border-top: solid 25px #0FA0EA; border-left: solid 25px transparent; border-right: solid 25px transparent;}
#mapOverlay>div.txt {position: absolute; bottom: 20px; color: #fff; font-weight: bold; font-size: 1.3em; width: 100%;}

@media only screen and (max-width: 600px)
{
    #mapOverlay {max-width: 400px;}
}
@media only screen and (max-width: 400px)
{
    #mapOverlay {max-width: 300px;}
}