/* CSS Document */
@font-face {
  font-family: 'hk_groteskbold';
  src: url("../fonts/hkgrotesk-bold-webfont.ac7d688aa457.eot");
  src: url("../fonts/hkgrotesk-bold-webfont.ac7d688aa457.eot?#iefix") format("embedded-opentype"), url("../fonts/hkgrotesk-bold-webfont.dbc087630d59.woff2") format("woff2"), url("../fonts/hkgrotesk-bold-webfont.b008dd40d2e3.woff") format("woff"), url("../fonts/hkgrotesk-bold-webfont.4cfc848e7843.ttf") format("truetype"), url("../fonts/hkgrotesk-bold-webfont.00843c2001c9.svg#hk_groteskbold") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'hk_groteskmedium';
  src: url("../fonts/hkgrotesk-medium-webfont.d67037f6c5d5.eot");
  src: url("../fonts/hkgrotesk-medium-webfont.d67037f6c5d5.eot?#iefix") format("embedded-opentype"), url("../fonts/hkgrotesk-medium-webfont.04ed8c3b75d0.woff2") format("woff2"), url("../fonts/hkgrotesk-medium-webfont.0e02e8409d1c.woff") format("woff"), url("../fonts/hkgrotesk-medium-webfont.0ad34a25ac00.ttf") format("truetype"), url("../fonts/hkgrotesk-medium-webfont.3f4aa6adb88e.svg#hk_groteskmedium") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'webfontregular';
  src: url("../fonts/hkgrotesk-regular-web-webfont.530ca3f80307.eot");
  src: url("../fonts/hkgrotesk-regular-web-webfont.530ca3f80307.eot?#iefix") format("embedded-opentype"), url("../fonts/hkgrotesk-regular-web-webfont.9846e1ad141e.woff2") format("woff2"), url("../fonts/hkgrotesk-regular-web-webfont.0cbec4ce3851.woff") format("woff"), url("../fonts/hkgrotesk-regular-web-webfont.7f39908be101.ttf") format("truetype"), url("../fonts/hkgrotesk-regular-web-webfont.0830b357be8a.svg#webfontregular") format("svg");
  font-weight: normal;
  font-style: normal; }

html {
  overflow: hidden scroll; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 14px; }

::-webkit-scrollbar {
  width: 0px;
  /* remove scrollbar space */
  background: transparent;
  /* optional: just make scrollbar invisible */ }

#logo {
  display: inline-block;
  position: absolute;
  text-align: center;
  top: 1.5em;
  width: 100%;
  margin: 0 auto;
  pointer-events: none;
  z-index: 100; }
  #logo img {
    width: 200px; }

#map {
  height: 100%; }

/* ===== OVERLAY MENU INFO ===== */
#about, #add {
  top: .25em;
  font-size: 2.4em;
  cursor: pointer;
  position: fixed;
  z-index: 9;
  color: black;
  font-family: 'hk_groteskbold'; }

#about {
  left: .25em; }
  #about > span {
    display: none; }

#add {
  right: .25em; }

.button {
  margin-top: 10px;
  border: 1px solid #CCC;
  background: #DDD;
  color: #000;
  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  vertical-align: middle;
  padding: 5px 20px;
  width: 13ch;
  text-align: center;
  font-family: 'hk_groteskmedium';
  font-size: 15px;
  color: #1a1a1a; }
  .button:hover {
    color: #FF00C1; }

.grecaptcha-badge {
  margin: auto; }

.overlay {
  font-size: 1.3em;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 11;
  top: 0;
  background-image: url("../images/grid_light.7c0eace41ef7.png");
  overflow-x: hidden;
  transition: 0.5s; }
  .overlay.left {
    left: 0; }
    .overlay.left .overlay-content {
      margin: 8em 0 1em 0; }
  .overlay.right {
    top: 40%;
    right: 0; }
    .overlay.right .overlay-content {
      margin: 1em 0;
      height: 125%; }
    .overlay.right ol {
      text-align: left;
      font-family: 'webfontregular'; }
      .overlay.right ol li:not(:first-child) {
        margin-top: .5em; }
    .overlay.right .subform {
      margin: auto;
      text-align: left;
      padding-left: 0;
      padding-top: 0;
      padding-bottom: 0.4em;
      padding-right: 0.4em;
      width: 100%;
      height: 8em;
      font-family: 'webfontregular';
      font-size: 12pt;
      background-color: #F0CBDD;
      border: 2px solid #F8B1CF; }
  .overlay.left.hidden, .overlay.right.hidden {
    width: 0%; }
    .overlay.left.hidden .closebtn, .overlay.right.hidden .closebtn {
      display: none; }
  .overlay .overlay-content {
    position: relative;
    text-align: center;
    height: 100%;
    padding: 0 2em;
    color: #1a1a1a; }
  .overlay p {
    text-decoration: none;
    font-family: 'webfontregular';
    color: #1a1a1a;
    display: block;
    font-weight: normal;
    text-align: left;
    margin: 1.5em 0 0 0; }
    .overlay p:first-child {
      margin-top: 0; }
  .overlay h1 {
    margin-top: 2em;
    text-decoration: none;
    font-family: 'webfontregular';
    font-size: 18px;
    color: #1a1a1a;
    display: block;
    transition: 0.3s;
    font-weight: normal;
    text-align: center; }
  .overlay a {
    text-decoration: none;
    font-family: 'webfontregular';
    font-size: 18px;
    color: #1a1a1a;
    display: inline;
    transition: 0.3s;
    font-weight: normal;
    text-align: left; }
    .overlay a:not(.closebtn):hover, .overlay a:not(.closebtn):focus {
      color: #0000ff; }
    .overlay a.current {
      color: #1a1a1a;
      font-style: italic; }
  .overlay .closebtn {
    position: fixed;
    font-size: 40px !important;
    line-height: 0px;
    color: black;
    z-index: 10000; }
    .overlay .closebtn:hover {
      cursor: pointer; }
    .overlay .closebtn.left {
      top: .5em;
      right: .25em; }
    .overlay .closebtn.right {
      top: 43%;
      left: .25em;
      right: auto; }

.noty_bar {
  font-family: 'webfontregular';
  background-color: rgba(26, 26, 26, 0.95) !important;
  color: #fff !important; }
  .noty_bar .noty_progressbar {
    background-color: #fff !important;
    opacity: 0.7 !important; }

.social-icons {
  margin: 2em 0 4em 0;
  display: flex;
  justify-content: space-around; }
  .social-icons > a > img {
    width: 3em;
    height: 3em; }

@media all and (min-width: 800px) {
  #logo img {
    width: 300px; }
  #about, #add {
    top: .5em; }
  #about {
    left: .5em; }
    #about > img {
      display: none; }
    #about > span {
      display: initial; }
  #add {
    right: .5em; }
  .overlay.left {
    width: 40%; }
    .overlay.left .closebtn.left {
      left: .25em;
      right: initial; }
  .overlay.right {
    top: 0;
    width: 40%; }
    .overlay.right .closebtn.right {
      top: .5em;
      right: .25em;
      left: initial; }
    .overlay.right .overlay-content {
      margin: 8em 0 1em 0;
      height: 100%; } }

@media all and (max-height: 450px) {
  .overlay a {
    font-size: 20px; }
  .closebtn {
    font-size: 40px !important;
    top: 15px;
    right: 35px; } }