:root {
  /*=============*/
  /* BREAKPOINTS */
  /*=============*/

  --min-width-smaller-phones:  320px;
  --min-width-small-phones:    480px;
  --min-width-tablets:         768px;
  --min-width-small-desktops:  992px;
  --min-width-wide-screens:   1200px;

  --max-content-width: 1600px;

  /*=============*/
  /* TRANSITIONS */
  /*=============*/

  --hover-in-time: 0s;
  --hover-out-time: 0.2s;
  --hover-in-fun: ease-out;
  --hover-out-fun: ease-in;

  --open-time: 0.2s;
  --close-time: 0.2s;
  --open-fun: ease-out;
  --close-fun: ease-in;

  --menu-in-time: 0.2s;
  --menu-out-time: 0.2s;
  --menu-in-fun: ease-out;
  --menu-out-fun: ease-in;

  --message-in-time: var(--menu-in-time);
  --message-out-time: var(--menu-out-time);
  --message-in-fun: var(--menu-in-fun);
  --message-out-fun: var(--menu-out-fun);

  --box-in-time: var(--hover-in-time);
  --box-out-time: var(--hover-out-time);
  --box-in-fun: var(--hover-in-fun);
  --box-out-fun: var(--hover-out-fun);

  --cookie-popup-out-time: .5s;
  --cookie-popup-out-fun: ease-out;

  /*=======*/
  /* FONTS */
  /*=======*/

  --normal-font-size: 15px;

  --menu-font-family: 'Oswald', sans-serif;
  --menu-font-weight: 300;

  --heading-font-family: 'Oswald', sans-serif;
  --heading-font-weight: 400;

  --normal-font-family: 'Poppins', sans-serif;
  --normal-font-weight: 400;

  --bold-font-family: 'Poppins', sans-serif;
  --bold-font-weight: 600;

  --thin-font-family: 'Poppins', sans-serif;
  --thin-font-weight: 200;

  --tiny-font-family: 'Poppins', sans-serif;
  --tiny-font-weight: 200;

  /*========*/
  /* COLORS */
  /*========*/

  --profile-0: #fff;
  --profile-1: #ff801a;
  /*--profile-1: #ff961f; TODO: remove when obsolete */
  --profile-2: #7f7979; /* TODO: tweak */
  --profile-3: #eae2d6;
  --profile-3b: #d5c6ae;
  --profile-4: #f8f5f2;
  --profile-5: #e0e0e0;
  --profile-6: #ff780a;

  --facebook-bg: #4267B2;
  --facebook-text: #fff;

  --error-text: #eb2828;

  --logo: #000;
  --logo-shadow: var(--profile-1);

  --main-bg: var(--profile-0);
  --main-text: #000;
  --main-link: var(--profile-1);
  --main-link-hover: #000;
  --main-border: #eae2d6;
  --main-border-hover: #6c5737;
  --main-tr-hover-bg: #f8f5f1;

  --banner-text: var(--profile-0);

  --resize-border: #000;

  --button-bg: var(--main-border);
  --button-bg-hover: var(--profile-1);
  --button-text: var(--main-text);
  --button-text-hover: var(--button-text);
  --button-text-disabled: #888;
  --button-border: #000;

  --input-bg: var(--profile-0);
  --input-border: var(--main-text);
  --input-border-hover: var(--profile-1);
  --input-border-active: var(--profile-1);
  --input-border-disabled: var(--button-text-disabled);
  --input-bg-disabled: #ddd;
  --input-text-disabled: var(--main-text);

  --checkbox-border: var(--input-border);
  --checkbox-border-hover: var(--input-border-hover);
  --checkbox-border-active: var(--input-border-active);
  --checkbox-border-disabled: var(--checkbox-border);
  --checkbox-bg: var(--input-bg);
  --checkbox-bg-hover: var(--checkbox-border-hover);
  --checkbox-bg-active: var(--checkbox-border-active);
  --checkbox-bg-checked: var(--checkbox-border);
  --checkbox-bg-disabled: var(--input-bg-disabled);
  --checkbox-bg-disabled-checked: #bbb;

  --attention-text: var(--error-text);
  --grey-title-text: #777;

  --blocking-message-bg: #000;
  --blocking-message-content-bg: #000;
  --blocking-message-content-text: #fff;
  --blocking-message-content-link: var(--main-link);
  --blocking-message-content-link-hover: var(--blocking-message-content-text);

  --box-shadow: #888;

  --line-in-blocking-message: #222;

  --cookies-bg: var(--profile-1);
  --cookies-text: #000;
  --cookies-border: var(--cookies-text);
  --cookies-button-hover: var(--profile-0);

  --discount-text: #EB2828;

  --bar-bg: var(--profile-1);
  --bar-height: .5rem;
  --bar-sep: .25rem;

  /*================*/
  /* OTHER SETTINGS */
  /*================*/

  --button-radius: .8em;
  --view-width: 0; /* Will be set by JS */
  --view-height: 0; /* Will be set by JS */
  --common-header-height: 0; /* Will be set by JS */
  --main-content-width: 32rem;
  --main-content-default-padding: 2rem 1rem 0;
  --blocking-message-padding: 1rem;

  --header-z-index: 10;
  --on-top-of-header-z-index: 11;
  --blocking-message-z-index: 100;
  --cookie-popup-z-index: var(--blocking-message-z-index);
}

html,
body,
form {
  margin: 0;
  padding: 0;
}

body,
input,
textarea {
  font-family: var(--normal-font-family);
  font-weight: var(--normal-font-weight);
  font-size: var(--normal-font-size);
}
h1,
h2 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
}
table {
  border-collapse: collapse;
}
emph {
  font-style: normal;
  font-family: var(--bold-font-family);
  font-weight: var(--bold-font-weight);
}

input,
.input,
select,
textarea {
  background-color: var(--input-bg);
  font-family: var(--normal-font-family);
  font-weight: var(--normal-font-weight);
  border: 1px solid var(--input-border);
  padding: .2rem .3rem;
  transition: all var(--hover-out-time) var(--hover-out-fun);
}
select {
  padding-left: 0;
  padding-right: 0;
}
input:disabled,
.input.disabled,
select:disabled,
textarea:disabled {
  background-color: var(--input-bg-disabled);
  color: var(--input-text-disabled);
  opacity: 1;
}
input:active,
input:focus,
.input.active,
.input.focus,
select:active,
select:focus,
textarea:active,
textarea:focus {
  outline: none;
  border-color: var(--input-border-active);
  box-shadow: 0 0 .2em var(--input-border-active);
  transition: all var(--hover-in-time) var(--hover-in-fun);
}
input:hover,
.input:hover,
select:hover,
textarea:hover {
  border-color: var(--input-border-hover);
  transition: all var(--hover-in-time) var(--hover-in-fun);
}
input:disabled:active,
input:disabled:hover,
.input.disabled:active,
.input.disabled:hover,
select:disabled:active,
select:disabled:hover,
textarea:disabled:active,
textarea:disabled:hover {
  border-color: var(--input-border);
  box-shadow: none;
}
select {
  background-color: var(--main-bg);
  font-size: 100%;
}
.input {
  cursor: text;
}

a,
a:visited {
  color: var(--main-link);
  text-decoration: none;
  transition: all var(--hover-out-time) var(--hover-out-fun);
}
a:active,
a:focus,
a:hover {
  color: var(--main-link-hover);
  transition: all var(--hover-in-time) var(--hover-in-fun);
}

button {
  font-family: var(--bold-font-family);
  font-weight: var(--bold-font-weight);
  font-size: .95rem;
  background-color: var(--button-bg);
  color: var(--button-text);
  padding: .5em 1em;
  border: 1px solid var(--button-border);
  border-radius: var(--button-radius);
  transition: all var(--hover-out-time) var(--hover-out-fun);
  user-select: none;
}
button:active,
button:focus,
button:hover {
  outline: none;
  background-color: var(--button-bg-hover);
  color: var(--button-text-hover);
  cursor: pointer;
  /* box-shadow: .1em .1em .4em var(--box-shadow); TODO: keep? */
  transition: all var(--hover-in-time) var(--hover-in-fun);
}
button:disabled {
  color: var(--button-text-disabled);
}
button:disabled:active,
button:disabled:focus,
button:disabled:hover {
  background-color: var(--button-bg);
  color: var(--button-text-disabled);
  cursor: not-allowed;
  box-shadow: none;
}

svg {
  overflow: visible;
}

svg.loading {
  width: 1rem;
  height: 1rem;
}

svg.checkbox,
svg.crossbox,
svg.radio-button {
  width: .9rem;
  height: .9rem;
  border: 1px solid var(--checkbox-border);
  background-color: var(--main-bg);
  transition: all var(--hover-out-time) var(--hover-out-fun),
              background-color var(--box-out-time) var(--box-out-fun);
}
svg.checkbox .colorable,
svg.crossbox .colorable,
svg.radio-button .colorable {
  transition: all var(--hover-out-time) var(--hover-out-fun),
              fill var(--box-out-time) var(--box-out-fun);
}
svg.radio-button {
  border-radius: 50%;
}
svg.checkbox,
svg.crossbox {
  border: 1px solid var(--checkbox-border);
}
svg.checkbox .colorable,
svg.crossbox .colorable,
svg.radio-button .colorable {
  fill: var(--main-bg);
}
svg.checkbox:hover,
svg.crossbox:hover,
svg.radio-button:hover,
label:hover > svg.checkbox,
label:hover > svg.crossbox,
label:hover > svg.radio-button {
  cursor: pointer;
  border-color: var(--checkbox-border-hover);
  transition: all var(--hover-in-time) var(--hover-in-fun),
              background-color var(--box-out-time) var(--box-out-fun);
}
svg.radio-button:hover .colorable,
label:hover > svg.radio-button .colorable {
  transition: all var(--hover-in-time) var(--hover-in-fun),
              background-color var(--box-out-time) var(--box-out-fun);
}
svg.checkbox:active,
svg.checkbox:focus,
svg.crossbox:active,
svg.crossbox:focus,
svg.radio-button:active,
svg.radio-button:focus {
  outline: none;
  border-color: var(--checkbox-border-active);
  box-shadow: 0 0 .2em var(--checkbox-border-active);
  transition: all var(--hover-in-time) var(--hover-in-fun),
              background-color var(--box-out-time) var(--box-out-fun);
}
svg.radio-button:active .colorable,
svg.radio-button:focus .colorable {
  transition: all var(--hover-in-time) var(--hover-in-fun),
              fill var(--box-out-time) var(--box-out-fun);
}
svg.checkbox.checked,
svg.crossbox.crossed {
  background-color: var(--checkbox-bg-checked);
}
svg.radio-button.selected .colorable {
  fill: var(--checkbox-border);
}
svg.checkbox.checked:active,
svg.checkbox.checked:focus,
svg.crossbox.crossed:active,
svg.crossbox.crossed:focus {
  background-color: var(--checkbox-bg-active);
  transition: all var(--hover-in-time) var(--hover-in-fun),
              background-color var(--box-in-time) var(--box-in-fun);
}
svg.checkbox.checked:hover,
svg.crossbox.crossed:hover,
label:hover > svg.checkbox.checked,
label:hover > svg.crossbox.crossed {
  background-color: var(--checkbox-bg-hover);
  transition: all var(--hover-in-time) var(--hover-in-fun),
              background-color var(--box-in-time) var(--box-in-fun);
}
svg.radio-button.selected:active .colorable,
svg.radio-button.selected:focus .colorable,
svg.radio-button.selected:hover .colorable,
label:hover > svg.radio-button.selected .colorable {
  fill: var(--checkbox-border-active);
  transition: all var(--hover-in-time) var(--hover-in-fun),
              fill var(--box-in-time) var(--box-in-fun);
}
svg.checkbox.disabled,
svg.crossbox.disabled,
svg.radio-button.disabled,
svg.checkbox.disabled.checked,
svg.crossbox.disabled.checked,
svg.radio-button.disabled.selected {
  border-color: var(--checkbox-border-disabled) !important;
  background-color: var(--checkbox-bg-disabled) !important;
  cursor: default !important;
}
svg.checkbox.disabled.checked,
svg.crossbox.disabled.checked,
svg.radio-button.disabled.selected {
  background-color: var(--checkbox-bg-disabled-checked) !important;
}
svg.checkbox.disabled:not(.checked) .colorable,
svg.crossbox.disabled:not(.checked) .colorable,
svg.radio-button.disabled:not(.selected) .colorable {
  border-color: var(--checkbox-border-disabled) !important;
  fill: var(--checkbox-bg-disabled) !important;
}
svg.checkbox.disabled:active,
svg.checkbox.disabled:focus,
svg.crossbox.disabled:active,
svg.crossbox.disabled:focus,
svg.radio-button.disabled:active,
svg.radio-button.disabled:focus,
svg.checkbox.disabled.checked:active,
svg.checkbox.disabled.checked:focus,
svg.crossbox.disabled.checked:active,
svg.crossbox.disabled.checked:focus,
svg.radio-button.disabled.selected:active,
svg.radio-button.disabled.selected:focus {
  border-color: var(--checkbox-border-disabled);
  box-shadow: 0 0 .2em var(--checkbox-border-disabled);
}

.blocking-box {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: var(--blocking-message-z-index);
  transition: all var(--message-out-time) var(--message-out-fun);
}
.blocking-box.preshow {
  opacity: 0;
}
.blocking-box.show {
  opacity: 1;
  transition: all var(--message-in-time) var(--message-in-fun);
}
.blocking-box .background {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--blocking-message-bg);
  opacity: .3;
}
.blocking-box .grid {
  position: absolute;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
}
.blocking-box .grid .content {
  max-width: 36rem;
  background-color: var(--blocking-message-content-bg);
  box-sizing: border-box;
  padding: var(--blocking-message-padding);
  border-radius: .8rem;
  text-align: center;
  position: relative;
}
.blocking-box .grid .content a {
  color: var(--blocking-message-content-link);
}
.blocking-box .grid .content a:active,
.blocking-box .grid .content a:focus,
.blocking-box .grid .content a:hover {
  color: var(--blocking-message-content-link-hover);
}
.blocking-box .grid .content.filling-screen {
  border-radius: 0;
}
.blocking-box .grid .content p {
  color: var(--blocking-message-content-text);
  margin-top: 0;
  max-height: 75vh;
  overflow-y: auto;
}
.blocking-box .grid .content .buttons {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.blocking-box .grid .content input {
  display: block;
  margin: 1rem 0 0;
}
.blocking-box .grid .content .errors {
  margin: 1rem 0 0;
  color: var(--error-text);
}

.user-wait {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  cursor: wait;
}

.body-grid {
  min-height: 100vh;
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-columns: 1fr;
  grid-template-rows: auto
                      1fr
                      auto;
  background-color: var(--main-bg);
}

.body-grid > .main {
  grid-area: main;
  background-color: var(--main-bg);
  color: var(--main-text);
  position: relative;
  display: grid;
  grid-template-areas:
    "banner"
    "content";
  grid-template-columns: 1fr;
  grid-template-rows: auto
                      1fr;
  justify-items: center;
  margin-bottom: 2rem;
}

.body-grid > .main > .content {
  grid-area: content;
  width: 100%;
  max-width: var(--main-content-width);
  padding: var(--main-content-default-padding);
  box-sizing: border-box;
}
.body-grid > .main > .content > *:first-child {
  margin-top: 0;
}

.body-grid > .main.splash {
  background-image: url("/images/splash-background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 0;
  padding: 3rem 1rem;
}
.body-grid > .main.splash > .content {
  align-self: center;
  background-color: var(--main-bg);
  padding: 2rem;
  box-sizing: border-box;
  border-radius: 1rem;
}
.body-grid > .main.splash .content > h1 {
  text-align: center;
  text-transform: uppercase;
}

.body-grid > .main > .banner {
  grid-area: banner;
  background-image: url("/images/splash-background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  min-height: 12rem;
  box-sizing: border-box;
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-size: 200%;
  color: var(--banner-text);
  text-transform: uppercase;
}

.body-grid > .main .actions {
  margin: 2rem 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.body-grid > .main .actions > a {
  display: block;
}
.body-grid > .main .actions a {
  text-align: center;
}

.body-grid .loading-block {
  margin: 1rem 0;
  text-align: center;
}
.body-grid .loading-block svg {
  width: 2rem;
  height: 2rem;
}

.body-grid > * > .bar {
  background-color: var(--main-bg);
}
.body-grid > * > .bar .color {
  height: var(--bar-height);
  background-color: var(--bar-bg);
}
.body-grid > * > .bar .sep {
  height: var(--bar-sep);
}

.open-close-outer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--close-time) var(--close-fun);
}
.open-close-outer-wrapper.is-open {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--open-time) var(--open-fun);
}
.open-close-inner-wrapper {
  overflow: hidden;
}
.open-close-outer-wrapper.post-open > .open-close-inner-wrapper {
  overflow: visible;
}

.cookie-popup {
  position: fixed;
  z-index: var(--cookie-popup-z-index);
  bottom: 0;
  left: 0;
  margin: 1em;
  background-color: var(--cookies-bg);
  color: var(--cookies-text);
  border: 1px solid var(--cookies-border);
  border-radius: .8rem;
  max-width: 32em;
  box-sizing: border-box;
  padding: 1em;
  font-size: 80%;
}
.cookie-popup.preclose {
  opacity: 0;
  transition: all var(--cookie-popup-out-time) var(--cookie-popup-out-fun);
}
.cookie-popup h1 {
  margin-top: 0;
}
.cookie-popup a,
.cookie-popup a:visited {
  color: var(--cookies-text);
  font-family: var(--bold-font-family);
  font-weight: var(--bold-font-weight);
  font-size: 90%;
}
.cookie-popup a:active,
.cookie-popup a:focus,
.cookie-popup a:hover {
  color: var(--cookies-button-hover);
}
.cookie-popup .buttons {
  width: 100%;
  text-align: center;
}
.cookie-popup .buttons button:active,
.cookie-popup .buttons button:focus,
.cookie-popup .buttons button:hover {
  background-color: var(--cookies-button-hover);
}

body > .fullscreen-map {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--on-top-of-header-z-index);
}

.grecaptcha-badge {
  z-index: -1;
  left: 0 !important;
}