:root {
  --indicator-pos-x: 0;
  --indicator-pos-y: 0;
}

/* Font Weight */
/* Color Scheme */
/* GREEN */
/* Btns */
/* Alerts */
/* Dimensions */
/* Devices Width */
/* Container Width */
/* Speeds */
/* Paddings */
* {
  outline: 0 none;
  -moz-outline: 0 none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border: none;
  font-family: "Work Sans", sans-serif;
}
*:focus {
  outline: 0 none;
  -moz-outline: 0 none;
}
*:before, *:after {
  box-sizing: border-box;
}
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-kerning: none;
  letter-spacing: 0;
  font-variant-numeric: lining-nums;
  font-optical-sizing: auto;
}

html {
  transition: 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 100ms cubic-bezier(0.42, 0, 0.58, 1);
  position: relative;
  float: right;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  background-color: #FFFFFF;
}
html.dropin:before {
  content: " ";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 2000;
}
html.locked {
  overflow: hidden;
}

body {
  position: relative;
  float: right;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  min-height: 100vh;
  background-color: transparent;
}

.contain {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
  align-content: stretch;
  padding: 0 10vh;
}
@media (min-width: 1500px) {
  .contain {
    padding: 0 80px;
  }
}
@media (max-width: 1900px) {
  .contain {
    padding: 0 60px;
  }
}
@media (max-width: 1250px) {
  .contain {
    padding: 0 40px;
  }
}
@media (max-width: 450px) {
  .contain {
    padding: 0 20px;
  }
}

.container {
  position: relative;
  margin: auto;
  z-index: 10;
  padding: 0 30px;
}
@media (min-width: 500px) {
  .container {
    width: 100%;
  }
}
@media (min-width: 900px) {
  .container {
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .container {
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 1251px) {
  .container {
    max-width: 985px;
    max-width: 90%;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1685px;
  }
}

.forth-w {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  max-width: 25%;
  width: 100%;
  float: left;
}
@media (max-width: 767px) {
  .forth-w {
    max-width: 100%;
  }
}

.third-w {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  max-width: 33.33333333%;
  width: 100%;
  float: left;
}
@media (max-width: 767px) {
  .third-w {
    max-width: 100%;
  }
}

.half-w {
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
  max-width: 50%;
  width: 100%;
  float: left;
}
@media (max-width: 767px) {
  .half-w {
    max-width: 100%;
  }
}

.full-w {
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
  float: left;
}
@media (max-width: 767px) {
  .full-w {
    max-width: 100%;
  }
}

.col-1 {
  position: relative;
  float: left;
  width: 4.1%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-1 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-2 {
  position: relative;
  float: left;
  width: 8.3%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-2 {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.col-3 {
  position: relative;
  float: left;
  width: 12.5%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-3 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-4 {
  position: relative;
  display: block;
  float: left;
  width: 16.6%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-4 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-5 {
  position: relative;
  float: left;
  width: 20.8%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-5 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-6 {
  position: relative;
  float: left;
  width: 25%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-6 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-7 {
  position: relative;
  float: left;
  width: 29.1%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-7 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-8 {
  position: relative;
  float: left;
  width: 33.3%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-8 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-9 {
  position: relative;
  float: left;
  width: 37.5%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-9 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-10 {
  position: relative;
  float: left;
  width: 41.6%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-10 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-11 {
  position: relative;
  float: left;
  width: 45.8%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-11 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-12 {
  position: relative;
  float: left;
  width: 50%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-12 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-13 {
  position: relative;
  float: left;
  width: 54.1%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-13 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-14 {
  position: relative;
  float: left;
  width: 58.3%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-14 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-15 {
  position: relative;
  float: left;
  width: 62.5%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-15 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-16 {
  position: relative;
  float: left;
  width: 66.6%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-16 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-17 {
  position: relative;
  float: left;
  width: 70.8%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-17 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-18 {
  position: relative;
  float: left;
  width: 75%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-18 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-19 {
  position: relative;
  float: left;
  width: 79.1%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-19 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-20 {
  position: relative;
  float: left;
  width: 83.3%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-20 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-21 {
  position: relative;
  float: left;
  width: 87.5%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-21 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-22 {
  position: relative;
  float: left;
  width: 91.6%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-22 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-23 {
  position: relative;
  float: left;
  width: 95.8%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-23 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.col-24 {
  position: relative;
  float: left;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 767px) {
  .col-24 {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }
}

.remove {
  opacity: 0;
  pointer-events: none;
}

.hidden {
  display: none !important;
}
@media (max-width: 767px) {
  .hidden-phone {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 899px) {
  .hidden-phone {
    display: block !important;
  }
}
@media (min-width: 900px) {
  .hidden-phone {
    display: block !important;
  }
}
@media (min-width: 1251px) {
  .hidden-phone {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .hidden-phone {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .hidden-tablet-middle {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 899px) {
  .hidden-tablet-middle {
    display: none !important;
  }
}
@media (min-width: 900px) {
  .hidden-tablet-middle {
    display: block;
  }
}
@media (min-width: 1251px) {
  .hidden-tablet-middle {
    display: block;
  }
}
@media (min-width: 1200px) {
  .hidden-tablet-middle {
    display: block;
  }
}
@media (max-width: 767px) {
  .hidden-tablet {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 899px) {
  .hidden-tablet {
    display: block;
  }
}
@media (min-width: 900px) {
  .hidden-tablet {
    display: none !important;
  }
}
@media (min-width: 1251px) {
  .hidden-tablet {
    display: block;
  }
}
@media (min-width: 1200px) {
  .hidden-tablet {
    display: block;
  }
}
@media (max-width: 767px) {
  .hidden-desktop {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 899px) {
  .hidden-desktop {
    display: block;
  }
}
@media (min-width: 900px) {
  .hidden-desktop {
    display: block;
  }
}
@media (min-width: 1251px) {
  .hidden-desktop {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-desktop {
    display: block;
  }
}
@media (max-width: 767px) {
  .hidden-desktop-large {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 899px) {
  .hidden-desktop-large {
    display: block;
  }
}
@media (min-width: 900px) {
  .hidden-desktop-large {
    display: block;
  }
}
@media (min-width: 1251px) {
  .hidden-desktop-large {
    display: block;
  }
}
@media (min-width: 1200px) {
  .hidden-desktop-large {
    display: none !important;
  }
}

.visible {
  display: block !important;
}
@media (max-width: 767px) {
  .visible-phone {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 899px) {
  .visible-phone {
    display: none !important;
  }
}
@media (min-width: 900px) {
  .visible-phone {
    display: none !important;
  }
}
@media (min-width: 1251px) {
  .visible-phone {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .visible-phone {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .visible-tablet-middle {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 899px) {
  .visible-tablet-middle {
    display: block !important;
  }
}
@media (min-width: 900px) {
  .visible-tablet-middle {
    display: none;
  }
}
@media (min-width: 1251px) {
  .visible-tablet-middle {
    display: none;
  }
}
@media (min-width: 1200px) {
  .visible-tablet-middle {
    display: none;
  }
}
@media (max-width: 767px) {
  .visible-tablet {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 899px) {
  .visible-tablet {
    display: block !important;
  }
}
@media (min-width: 900px) {
  .visible-tablet {
    display: block !important;
  }
}
@media (min-width: 1251px) {
  .visible-tablet {
    display: none;
  }
}
@media (min-width: 1200px) {
  .visible-tablet {
    display: none;
  }
}
@media (max-width: 767px) {
  .visible-desktop {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 899px) {
  .visible-desktop {
    display: none;
  }
}
@media (min-width: 900px) {
  .visible-desktop {
    display: none;
  }
}
@media (min-width: 1251px) {
  .visible-desktop {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-desktop {
    display: none;
  }
}
@media (max-width: 767px) {
  .visible-desktop-large {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 899px) {
  .visible-desktop-large {
    display: none;
  }
}
@media (min-width: 900px) {
  .visible-desktop-large {
    display: none;
  }
}
@media (min-width: 1251px) {
  .visible-desktop-large {
    display: none;
  }
}
@media (min-width: 1200px) {
  .visible-desktop-large {
    display: block !important;
  }
}

.unvisible {
  visibility: hidden !important;
}

.align__left {
  text-align: left !important;
}
.align__center {
  text-align: center !important;
}
.align__right {
  text-align: right !important;
}

.shadows {
  -moz-box-shadow: 0px 0px 20px #ddd;
  -webkit-box-shadow: 0px 0px 20px #ddd;
  box-shadow: 0px 0px 20px #ddd;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=20, Direction=90, Color='#dddddd')";
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=20, Direction=90, Color='#dddddd');
}

.right {
  float: right;
}

nav {
  position: fixed;
  bottom: calc(var(--point-size) / 2);
  left: 0;
  width: 100%;
  z-index: 1000;
  color: #FFFFFF;
  pointer-events: none;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
nav div.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: calc(var(--point-size) / 4);
  gap: calc(var(--point-size) / 8);
  color: inherit;
  max-width: 1000px;
  width: calc(100% - var(--point-size));
  pointer-events: all;
  padding: clamp(15px, var(--point-size) / 4, 25px);
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: none;
  border-radius: calc(var(--point-size) / 4);
  -moz-border-radius: calc(var(--point-size) / 4);
  -webkit-border-radius: calc(var(--point-size) / 4);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  box-shadow: 0 0 calc(var(--point-size) * 1.5) rgba(0, 0, 0, 0.3);
}
nav div.container:before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--point-size) / 4);
  -moz-border-radius: calc(var(--point-size) / 4);
  -webkit-border-radius: calc(var(--point-size) / 4);
  background: linear-gradient(to right, rgba(var(--bg-colour), 0.7) 0%, rgba(var(--bg-colour), 0.4) 100%);
}
@media (max-width: 767px) {
  nav div.container {
    padding-top: 30px;
    width: calc(100% - var(--point-size) / 2);
  }
}
@media (max-width: 767px) {
  nav {
    padding-top: 30px;
    bottom: calc(var(--point-size) / 3);
  }
}

a.logo,
a.logo:focus,
a.logo:active,
a.logo:visited {
  position: relative;
  margin: auto 0;
  margin-right: calc(var(--point-size) / 4);
  height: 40px;
  text-decoration: none;
  display: block;
  filter: drop-shadow(0 0 calc(var(--point-size) / 6) rgba(0, 0, 0, 0.8));
}
a.logo svg,
a.logo:focus svg,
a.logo:active svg,
a.logo:visited svg {
  fill: white;
  height: 40px;
}
a.logo svg.icon,
a.logo:focus svg.icon,
a.logo:active svg.icon,
a.logo:visited svg.icon {
  display: none;
}

ul:not(.menu) {
  color: inherit;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: calc(var(--point-size) / 8);
  list-style: none;
  margin: auto 0 auto auto;
  padding: 0;
  z-index: 1;
}
ul:not(.menu) li {
  position: relative;
}
ul:not(.menu) li ul {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: opacity, transform;
  -moz-transition-property: opacity, transform;
  -o-transition-property: opacity, transform;
  -webkit-transition-property: opacity, transform;
  position: absolute;
  bottom: calc(clamp(30px, var(--point-size) / 2, 50px) + 100%);
  right: clamp(-15px, -1 * var(--point-size) / 4, -25px);
  width: calc(100vh - var(--point-size));
  max-width: 300px;
  padding: calc(var(--point-size) / 2);
  background-color: rgb(var(--bg-colour));
  border-radius: calc(var(--point-size) / 4);
  -moz-border-radius: calc(var(--point-size) / 4);
  -webkit-border-radius: calc(var(--point-size) / 4);
  box-shadow: 0 0 calc(var(--point-size)) rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 calc(var(--point-size) * 1.5) rgba(0, 0, 0, 0.3);
  flex-flow: column nowrap;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(calc(-1 * var(--point-size)));
}
ul:not(.menu) li ul:not(:has(a)) {
  width: auto;
}
ul:not(.menu) li ul.open {
  pointer-events: all;
  opacity: 1;
  transform: translateY(0);
}
ul:not(.menu) li ul p {
  position: relative;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  text-align: left;
  font-size: clamp(16px, 1.5vmin, 20px);
  gap: calc(var(--point-size) / 4);
}
ul:not(.menu) li ul p span {
  position: relative;
  width: clamp(16px, 1.5vmin, 20px);
  height: clamp(16px, 1.5vmin, 20px);
  border-radius: clamp(16px, 1.5vmin, 20px);
  -moz-border-radius: clamp(16px, 1.5vmin, 20px);
  -webkit-border-radius: clamp(16px, 1.5vmin, 20px);
  border: 1px solid rgba(220, 220, 220, 0.5);
  background-color: white;
}
ul:not(.menu) li ul p span.sold {
  background-color: rgb(var(--sold));
}
ul:not(.menu) li ul p span.reserved {
  background-color: rgb(var(--reserved));
}
ul:not(.menu) li ul a,
ul:not(.menu) li ul a:focus,
ul:not(.menu) li ul a:active,
ul:not(.menu) li ul a:visited {
  position: relative;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  text-align: left;
  background-color: rgba(220, 220, 220, 0.05);
  cursor: pointer;
  font-size: clamp(16px, 1.5vmin, 20px);
  gap: calc(var(--point-size) / 4);
}
ul:not(.menu) li ul a span,
ul:not(.menu) li ul a:focus span,
ul:not(.menu) li ul a:active span,
ul:not(.menu) li ul a:visited span {
  margin: 0 0 auto 0;
}
ul:not(.menu) li ul a:before,
ul:not(.menu) li ul a:focus:before,
ul:not(.menu) li ul a:active:before,
ul:not(.menu) li ul a:visited:before {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  ul:not(.menu) li ul a:hover,
  ul:not(.menu) li ul a:focus:hover,
  ul:not(.menu) li ul a:active:hover,
  ul:not(.menu) li ul a:visited:hover {
    background-color: rgba(220, 220, 220, 0.1);
  }
}
ul:not(.menu) li ul a.active,
ul:not(.menu) li ul a:focus.active,
ul:not(.menu) li ul a:active.active,
ul:not(.menu) li ul a:visited.active {
  background-color: rgb(220, 220, 220);
  color: rgb(var(--bg-colour));
}
ul:not(.menu).zoom {
  padding: calc(var(--point-size) / 4);
  position: absolute;
  bottom: 100%;
  right: 0;
  transform: translateY(calc(-1 * var(--point-size) / 2));
  background-color: rgb(var(--bg-colour));
  border-radius: calc(var(--point-size) / 4);
  -moz-border-radius: calc(var(--point-size) / 4);
  -webkit-border-radius: calc(var(--point-size) / 4);
  box-shadow: 0 0 calc(var(--point-size)) rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 calc(var(--point-size) * 1.5) rgba(0, 0, 0, 0.3);
  display: none;
}
ul:not(.menu).zoom li:has(input) {
  min-height: calc(24px + clamp(10px, var(--point-size) / 4, 20px) * 2);
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}
ul:not(.menu).zoom li:has(input) span {
  margin: clamp(10px, var(--point-size) / 4, 20px);
}
ul:not(.menu).zoom li:has(input) input[type=range] {
  -webkit-appearance: none !important;
  background: rgba(220, 220, 220, 0.2);
  height: 10px;
  border-radius: calc(var(--point-size) / 4);
  -moz-border-radius: calc(var(--point-size) / 4);
  -webkit-border-radius: calc(var(--point-size) / 4);
  width: 30vw;
  max-width: 150px;
}
ul:not(.menu).zoom li:has(input) input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  background: rgb(220, 220, 220);
  height: 24px;
  width: 10px;
  border-radius: calc(var(--point-size) / 4);
  -moz-border-radius: calc(var(--point-size) / 4);
  -webkit-border-radius: calc(var(--point-size) / 4);
}
ul:not(.menu).zoom.touch {
  display: flex;
}
@media (hover: none) {
  ul:not(.menu).zoom {
    display: flex;
  }
}

ul.menu {
  transition: 400ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: 400ms cubic-bezier(0, 0, 0.2, 1);
  -o-transition: 400ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: 400ms cubic-bezier(0, 0, 0.2, 1);
  transition-property: transform, opacity;
  -moz-transition-property: transform, opacity;
  -o-transition-property: transform, opacity;
  -webkit-transition-property: transform, opacity;
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  max-width: 400px;
  width: calc(100% - var(--point-size));
  max-height: clamp(100svh - (var(--nav-size) + var(--point-size) / 2), 100svh - (var(--nav-size) + var(--point-size) / 2), 800px);
  border-bottom: none;
  border-radius: calc(var(--point-size) / 4);
  -moz-border-radius: calc(var(--point-size) / 4);
  -webkit-border-radius: calc(var(--point-size) / 4);
  box-shadow: 0 0 calc(var(--point-size)) rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 calc(var(--point-size) * 1.5) rgba(0, 0, 0, 0.3);
  z-index: 800;
  bottom: calc(100% + var(--point-size) / 2);
  left: 0;
  transform: translateY(calc(-1 * var(--point-size)));
  background-color: rgb(var(--bg-colour));
  overflow: auto;
  scrollbar-color: white rgba(var(--bg-colour), 0.5);
  scrollbar-width: thin;
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  gap: calc(var(--point-size) / 4);
}
ul.menu .draggable {
  pointer-events: none !important;
}
ul.menu:before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  content: "";
  display: block;
  display: none;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--point-size) / 4);
  -moz-border-radius: calc(var(--point-size) / 4);
  -webkit-border-radius: calc(var(--point-size) / 4);
  background: linear-gradient(to right, rgba(var(--bg-colour), 0.6) 30%, rgba(var(--bg-colour), 0.5) 100%);
}
ul.menu.open {
  transform: translateX(0);
  pointer-events: all;
  opacity: 1;
}
ul.menu.open ul {
  pointer-events: all;
}
ul.menu.open .draggable {
  pointer-events: all !important;
}
ul.menu > li {
  position: relative;
  width: 100%;
  z-index: 0;
  padding: 0 clamp(15px, var(--point-size) / 2, 25px);
}
ul.menu > li:first-of-type {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  padding: calc(clamp(15px, var(--point-size) / 2, 25px) * 1.5) clamp(15px, var(--point-size) / 2, 25px);
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-content: flex-start;
}
ul.menu > li:first-of-type img:not(.bg) {
  position: absolute;
  width: calc(clamp(15px, var(--point-size) / 2, 25px) * 4);
  height: 100%;
  object-position: center;
  object-fit: cover;
  -o-object-position: center;
  -o-object-fit: cover;
  top: 0;
  left: 0;
}
ul.menu > li:first-of-type img.bg {
  position: absolute;
  opacity: 0.3;
}
ul.menu > li:first-of-type h1, ul.menu > li:first-of-type h2 {
  margin: 0 auto;
  font-size: clamp(30px, 3vmin, 40px);
  font-weight: 500;
  width: 100%;
}
ul.menu > li:first-of-type h2 {
  font-size: clamp(16px, 1.5vmin, 20px);
}
ul.menu > li:first-of-type:has(img) {
  padding-left: calc(clamp(15px, var(--point-size) / 2, 25px) * 5);
}
ul.menu > li:last-of-type {
  position: sticky;
  bottom: 0;
  z-index: 400;
  padding: 0;
  margin: 0;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
}
ul.menu > li svg {
  margin: auto;
  width: 90%;
  fill: white;
}
ul.menu > li ul {
  position: relative;
  opacity: 1;
  bottom: 0;
  transform: translate(0);
  box-shadow: none;
  flex-flow: row wrap;
  max-width: 100%;
  width: 100%;
  background-color: transparent;
  padding: clamp(15px, var(--point-size) / 2, 25px) 0 calc(var(--point-size) / 4) clamp(15px, var(--point-size) / 2, 25px);
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  display: none;
}
ul.menu > li ul li {
  position: relative;
  width: 100%;
  order: 1;
  display: flex;
  flex-flow: row nowrap;
  gap: calc(var(--point-size) / 4);
  gap: calc(var(--point-size) / 8);
  z-index: 0;
}
ul.menu > li ul li ul {
  margin: 0;
  gap: calc(var(--point-size) / 4);
}
ul.menu > li ul li ul li {
  width: auto;
}
ul.menu > li ul li:has(button.remove) {
  position: sticky;
  top: 0;
  right: 0;
  z-index: 1000 !important;
}
ul.menu > li ul li:has(button.active) {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1000 !important;
}
ul.menu > li ul li.hide:not(:has(button.active)) {
  display: none;
}
ul.menu > li ul li:hover {
  z-index: 300;
}
ul.menu > li ul:before {
  display: none;
}
ul.menu > li ul.filters {
  display: flex;
  flex-flow: row nowrap;
  padding: 0;
  overflow: scroll;
  overflow-y: hidden;
  scrollbar-color: white rgba(var(--bg-colour), 0.5);
  scrollbar-width: thin;
}
ul.menu > li ul.filters button {
  min-width: 0;
}
ul.menu > li ul.filters li {
  width: auto;
}
ul.menu > li ul.filters li:last-child {
  margin-left: auto;
}
ul.menu > li ul.filters li:has(button.active) {
  order: 0;
}
ul.menu > li a,
ul.menu > li a:focus,
ul.menu > li a:active,
ul.menu > li a:visited,
ul.menu > li button,
ul.menu > li button:focus,
ul.menu > li button:active,
ul.menu > li button:visited {
  position: relative;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  text-align: left;
  background-color: rgba(220, 220, 220, 0.05);
  cursor: pointer;
  font-size: clamp(16px, 1.5vmin, 20px);
  gap: calc(var(--point-size) / 4);
}
ul.menu > li a strong,
ul.menu > li a:focus strong,
ul.menu > li a:active strong,
ul.menu > li a:visited strong,
ul.menu > li button strong,
ul.menu > li button:focus strong,
ul.menu > li button:active strong,
ul.menu > li button:visited strong {
  font-size: clamp(12px, 1vmin, 16px);
  margin: auto 0;
  color: white;
  font-weight: 400;
  padding: 2px 5px;
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
  text-shadow: 0 0 calc(var(--point-size) / 8) rgb(0, 0, 0);
}
ul.menu > li a strong.sold,
ul.menu > li a:focus strong.sold,
ul.menu > li a:active strong.sold,
ul.menu > li a:visited strong.sold,
ul.menu > li button strong.sold,
ul.menu > li button:focus strong.sold,
ul.menu > li button:active strong.sold,
ul.menu > li button:visited strong.sold {
  background-color: rgba(var(--sold), 0.75);
}
ul.menu > li a strong.reserved,
ul.menu > li a:focus strong.reserved,
ul.menu > li a:active strong.reserved,
ul.menu > li a:visited strong.reserved,
ul.menu > li button strong.reserved,
ul.menu > li button:focus strong.reserved,
ul.menu > li button:active strong.reserved,
ul.menu > li button:visited strong.reserved {
  background-color: rgba(var(--reserved), 0.75);
}
ul.menu > li a small,
ul.menu > li a:focus small,
ul.menu > li a:active small,
ul.menu > li a:visited small,
ul.menu > li button small,
ul.menu > li button:focus small,
ul.menu > li button:active small,
ul.menu > li button:visited small {
  opacity: 0.4;
  margin: auto 0 auto auto;
  color: inherit;
}
ul.menu > li a:before,
ul.menu > li a:focus:before,
ul.menu > li a:active:before,
ul.menu > li a:visited:before,
ul.menu > li button:before,
ul.menu > li button:focus:before,
ul.menu > li button:active:before,
ul.menu > li button:visited:before {
  display: none;
}
ul.menu > li a.remove,
ul.menu > li a:focus.remove,
ul.menu > li a:active.remove,
ul.menu > li a:visited.remove,
ul.menu > li button.remove,
ul.menu > li button:focus.remove,
ul.menu > li button:active.remove,
ul.menu > li button:visited.remove {
  background-color: rgba(220, 0, 0, 0.3) !important;
  opacity: 1;
  pointer-events: all;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (hover: hover) and (pointer: fine) {
  ul.menu > li a:hover,
  ul.menu > li a:focus:hover,
  ul.menu > li a:active:hover,
  ul.menu > li a:visited:hover,
  ul.menu > li button:hover,
  ul.menu > li button:focus:hover,
  ul.menu > li button:active:hover,
  ul.menu > li button:visited:hover {
    background-color: rgba(220, 220, 220, 0.1);
    opacity: 1;
  }
}
ul.menu > li a.active,
ul.menu > li a:focus.active,
ul.menu > li a:active.active,
ul.menu > li a:visited.active,
ul.menu > li button.active,
ul.menu > li button:focus.active,
ul.menu > li button:active.active,
ul.menu > li button:visited.active {
  background-color: rgba(220, 220, 220, 0.8);
  color: rgb(var(--bg-colour));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
ul.menu > li a.active small,
ul.menu > li a:focus.active small,
ul.menu > li a:active.active small,
ul.menu > li a:visited.active small,
ul.menu > li button.active small,
ul.menu > li button:focus.active small,
ul.menu > li button:active.active small,
ul.menu > li button:visited.active small {
  opacity: 0.8;
}
ul.menu > li a,
ul.menu > li a:focus,
ul.menu > li a:active,
ul.menu > li a:visited {
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0.5;
  justify-content: center;
  gap: 0;
  font-size: 14px;
}
ul.menu > li a strong,
ul.menu > li a:focus strong,
ul.menu > li a:active strong,
ul.menu > li a:visited strong {
  font-size: 14px;
  font-weight: 600;
}
ul.menu > li:has(ul.filters) {
  display: flex;
  flex-flow: row nowrap;
  position: sticky;
  justify-content: flex-start;
  align-content: center;
  gap: clamp(15px, var(--point-size) / 2, 25px);
  background-color: rgba(var(--bg-colour));
  top: 90px;
  z-index: 200;
  padding-top: calc(var(--point-size) / 4);
  padding-bottom: calc(var(--point-size) / 4);
  margin-bottom: calc(var(--point-size) / 4);
}
ul.menu > li:has(ul.filters) p {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: center;
  margin: 0 0 auto 0;
  padding: clamp(10px, var(--point-size) / 4, 20px) 0;
}
ul.menu > li:not(:has(ul.filters button.active)) li:has(button.remove) {
  display: none;
}
ul.menu > li:hover {
  z-index: 300;
}
ul.menu li:has(button.active) > ul {
  display: flex;
}
ul.menu:has(li.hide) > li ul {
  display: flex;
}
ul.menu:has(li.hide) > li ul:not(:has(li:not(.hide))) {
  display: none;
}

ul li button,
ul li button:focus,
ul li button:active,
ul li button:visited,
ul li a,
ul li a:focus,
ul li a:active,
ul li a:visited,
button.menu,
button.menu:focus,
button.menu:active,
button.menu:visited,
button.contact,
button.contact:focus,
button.contact:active,
button.contact:visited,
button.back,
button.back:focus,
button.back:active,
button.back:visited {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: background-color, color, opacity;
  -moz-transition-property: background-color, color, opacity;
  -o-transition-property: background-color, color, opacity;
  -webkit-transition-property: background-color, color, opacity;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
  padding: clamp(10px, var(--point-size) / 4, 20px);
  cursor: pointer;
  margin: auto 0;
  background-color: rgba(var(--bg-colour), 0.25);
  background-color: rgba(var(--bg-colour), 0.65);
  background-color: rgba(255, 255, 255, 0.03);
  text-shadow: 0 0 calc(var(--point-size) / 2) rgba(0, 0, 0, 0.6);
  text-decoration: none;
  text-align: center;
  z-index: 300;
  line-height: 24px;
  font-size: 15px;
  min-width: calc(clamp(10px, var(--point-size) / 4, 20px) * 2 + 24px);
}
ul li button span.tooltip,
ul li button:focus span.tooltip,
ul li button:active span.tooltip,
ul li button:visited span.tooltip,
ul li a span.tooltip,
ul li a:focus span.tooltip,
ul li a:active span.tooltip,
ul li a:visited span.tooltip,
button.menu span.tooltip,
button.menu:focus span.tooltip,
button.menu:active span.tooltip,
button.menu:visited span.tooltip,
button.contact span.tooltip,
button.contact:focus span.tooltip,
button.contact:active span.tooltip,
button.contact:visited span.tooltip,
button.back span.tooltip,
button.back:focus span.tooltip,
button.back:active span.tooltip,
button.back:visited span.tooltip {
  transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: transform, opacity;
  -moz-transition-property: transform, opacity;
  -o-transition-property: transform, opacity;
  -webkit-transition-property: transform, opacity;
  position: absolute;
  white-space: nowrap;
  top: 100%;
  left: 50%;
  font-size: 12px;
  transform: translate(-50%, calc(var(--point-size)));
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: 300;
  background-color: rgb(var(--bg-colour)) !important;
  padding: calc(var(--point-size) / 8) calc(var(--point-size) / 4) !important;
  border-radius: calc(var(--point-size) / 4) !important;
  -moz-border-radius: calc(var(--point-size) / 4) !important;
  -webkit-border-radius: calc(var(--point-size) / 4) !important;
}
ul li button:before,
ul li button:focus:before,
ul li button:active:before,
ul li button:visited:before,
ul li a:before,
ul li a:focus:before,
ul li a:active:before,
ul li a:visited:before,
button.menu:before,
button.menu:focus:before,
button.menu:active:before,
button.menu:visited:before,
button.contact:before,
button.contact:focus:before,
button.contact:active:before,
button.contact:visited:before,
button.back:before,
button.back:focus:before,
button.back:active:before,
button.back:visited:before {
  transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: transform;
  -moz-transition-property: transform;
  -o-transition-property: transform;
  -webkit-transition-property: transform;
  content: " ";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  background-color: white;
  width: clamp(8px, var(--point-size) / 4, 10px);
  height: clamp(4px, var(--point-size) / 4, 5px);
  border-radius: 15px 15px 0 0;
  -moz-border-radius: 15px 15px 0 0;
  -webkit-border-radius: 15px 15px 0 0;
  transform: translate(-50%, 0) scaleY(0);
  box-shadow: 0 0 calc(var(--point-size) / 2) rgba(0, 0, 0, 0.9);
  transform-origin: 50% 100%;
}
@media (hover: hover) and (pointer: fine) {
  ul li button:hover,
  ul li button:focus:hover,
  ul li button:active:hover,
  ul li button:visited:hover,
  ul li a:hover,
  ul li a:focus:hover,
  ul li a:active:hover,
  ul li a:visited:hover,
  button.menu:hover,
  button.menu:focus:hover,
  button.menu:active:hover,
  button.menu:visited:hover,
  button.contact:hover,
  button.contact:focus:hover,
  button.contact:active:hover,
  button.contact:visited:hover,
  button.back:hover,
  button.back:focus:hover,
  button.back:active:hover,
  button.back:visited:hover {
    background-color: rgba(var(--bg-colour), 0.5);
    background-color: rgba(255, 255, 255, 0.05);
  }
  ul li button:hover span.tooltip,
  ul li button:focus:hover span.tooltip,
  ul li button:active:hover span.tooltip,
  ul li button:visited:hover span.tooltip,
  ul li a:hover span.tooltip,
  ul li a:focus:hover span.tooltip,
  ul li a:active:hover span.tooltip,
  ul li a:visited:hover span.tooltip,
  button.menu:hover span.tooltip,
  button.menu:focus:hover span.tooltip,
  button.menu:active:hover span.tooltip,
  button.menu:visited:hover span.tooltip,
  button.contact:hover span.tooltip,
  button.contact:focus:hover span.tooltip,
  button.contact:active:hover span.tooltip,
  button.contact:visited:hover span.tooltip,
  button.back:hover span.tooltip,
  button.back:focus:hover span.tooltip,
  button.back:active:hover span.tooltip,
  button.back:visited:hover span.tooltip {
    opacity: 1 !important;
    transform: translate(-50%, 0) !important;
  }
}
ul li button.visibility span.pointson,
ul li button:focus.visibility span.pointson,
ul li button:active.visibility span.pointson,
ul li button:visited.visibility span.pointson,
ul li a.visibility span.pointson,
ul li a:focus.visibility span.pointson,
ul li a:active.visibility span.pointson,
ul li a:visited.visibility span.pointson,
button.menu.visibility span.pointson,
button.menu:focus.visibility span.pointson,
button.menu:active.visibility span.pointson,
button.menu:visited.visibility span.pointson,
button.contact.visibility span.pointson,
button.contact:focus.visibility span.pointson,
button.contact:active.visibility span.pointson,
button.contact:visited.visibility span.pointson,
button.back.visibility span.pointson,
button.back:focus.visibility span.pointson,
button.back:active.visibility span.pointson,
button.back:visited.visibility span.pointson {
  display: none;
}
ul li button.status span.statuson,
ul li button:focus.status span.statuson,
ul li button:active.status span.statuson,
ul li button:visited.status span.statuson,
ul li a.status span.statuson,
ul li a:focus.status span.statuson,
ul li a:active.status span.statuson,
ul li a:visited.status span.statuson,
button.menu.status span.statuson,
button.menu:focus.status span.statuson,
button.menu:active.status span.statuson,
button.menu:visited.status span.statuson,
button.contact.status span.statuson,
button.contact:focus.status span.statuson,
button.contact:active.status span.statuson,
button.contact:visited.status span.statuson,
button.back.status span.statuson,
button.back:focus.status span.statuson,
button.back:active.status span.statuson,
button.back:visited.status span.statuson {
  display: none;
}
ul li button.info,
ul li button:focus.info,
ul li button:active.info,
ul li button:visited.info,
ul li a.info,
ul li a:focus.info,
ul li a:active.info,
ul li a:visited.info,
button.menu.info,
button.menu:focus.info,
button.menu:active.info,
button.menu:visited.info,
button.contact.info,
button.contact:focus.info,
button.contact:active.info,
button.contact:visited.info,
button.back.info,
button.back:focus.info,
button.back:active.info,
button.back:visited.info {
  width: auto;
  margin: 0;
  display: none;
}
ul li button.info .tooltip,
ul li button:focus.info .tooltip,
ul li button:active.info .tooltip,
ul li button:visited.info .tooltip,
ul li a.info .tooltip,
ul li a:focus.info .tooltip,
ul li a:active.info .tooltip,
ul li a:visited.info .tooltip,
button.menu.info .tooltip,
button.menu:focus.info .tooltip,
button.menu:active.info .tooltip,
button.menu:visited.info .tooltip,
button.contact.info .tooltip,
button.contact:focus.info .tooltip,
button.contact:active.info .tooltip,
button.contact:visited.info .tooltip,
button.back.info .tooltip,
button.back:focus.info .tooltip,
button.back:active.info .tooltip,
button.back:visited.info .tooltip {
  left: auto;
  right: 0;
  transform: translate(0, calc(var(--point-size))) !important;
}
ul li button.info:hover .tooltip,
ul li button:focus.info:hover .tooltip,
ul li button:active.info:hover .tooltip,
ul li button:visited.info:hover .tooltip,
ul li a.info:hover .tooltip,
ul li a:focus.info:hover .tooltip,
ul li a:active.info:hover .tooltip,
ul li a:visited.info:hover .tooltip,
button.menu.info:hover .tooltip,
button.menu:focus.info:hover .tooltip,
button.menu:active.info:hover .tooltip,
button.menu:visited.info:hover .tooltip,
button.contact.info:hover .tooltip,
button.contact:focus.info:hover .tooltip,
button.contact:active.info:hover .tooltip,
button.contact:visited.info:hover .tooltip,
button.back.info:hover .tooltip,
button.back:focus.info:hover .tooltip,
button.back:active.info:hover .tooltip,
button.back:visited.info:hover .tooltip {
  transform: translate(0, 0) !important;
}
ul li button.contact,
ul li button:focus.contact,
ul li button:active.contact,
ul li button:visited.contact,
ul li a.contact,
ul li a:focus.contact,
ul li a:active.contact,
ul li a:visited.contact,
button.menu.contact,
button.menu:focus.contact,
button.menu:active.contact,
button.menu:visited.contact,
button.contact.contact,
button.contact:focus.contact,
button.contact:active.contact,
button.contact:visited.contact,
button.back.contact,
button.back:focus.contact,
button.back:active.contact,
button.back:visited.contact {
  position: absolute;
  bottom: 100%;
  right: 0;
  flex-flow: row nowrap;
  gap: calc(var(--point-size) / 8);
  background-color: #FFFFFF;
  color: rgb(var(--bg-colour));
  margin-bottom: clamp(15px, var(--point-size) / 4, 25px);
  border-radius: calc(var(--point-size) / 4);
  -moz-border-radius: calc(var(--point-size) / 4);
  -webkit-border-radius: calc(var(--point-size) / 4);
  display: none;
  z-index: 0;
}
ul li button.contact span,
ul li button:focus.contact span,
ul li button:active.contact span,
ul li button:visited.contact span,
ul li a.contact span,
ul li a:focus.contact span,
ul li a:active.contact span,
ul li a:visited.contact span,
button.menu.contact span,
button.menu:focus.contact span,
button.menu:active.contact span,
button.menu:visited.contact span,
button.contact.contact span,
button.contact:focus.contact span,
button.contact:active.contact span,
button.contact:visited.contact span,
button.back.contact span,
button.back:focus.contact span,
button.back:active.contact span,
button.back:visited.contact span {
  color: rgb(var(--bg-colour));
  text-shadow: none;
}
ul li button.contact:hover,
ul li button:focus.contact:hover,
ul li button:active.contact:hover,
ul li button:visited.contact:hover,
ul li a.contact:hover,
ul li a:focus.contact:hover,
ul li a:active.contact:hover,
ul li a:visited.contact:hover,
button.menu.contact:hover,
button.menu:focus.contact:hover,
button.menu:active.contact:hover,
button.menu:visited.contact:hover,
button.contact.contact:hover,
button.contact:focus.contact:hover,
button.contact:active.contact:hover,
button.contact:visited.contact:hover,
button.back.contact:hover,
button.back:focus.contact:hover,
button.back:active.contact:hover,
button.back:visited.contact:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
@media (hover: none) {
  ul li button.contact,
  ul li button:focus.contact,
  ul li button:active.contact,
  ul li button:visited.contact,
  ul li a.contact,
  ul li a:focus.contact,
  ul li a:active.contact,
  ul li a:visited.contact,
  button.menu.contact,
  button.menu:focus.contact,
  button.menu:active.contact,
  button.menu:visited.contact,
  button.contact.contact,
  button.contact:focus.contact,
  button.contact:active.contact,
  button.contact:visited.contact,
  button.back.contact,
  button.back:focus.contact,
  button.back:active.contact,
  button.back:visited.contact {
    margin-bottom: calc(50px + 3 * clamp(15px, var(--point-size) / 4, 25px));
  }
}
ul li button.contact.touch,
ul li button:focus.contact.touch,
ul li button:active.contact.touch,
ul li button:visited.contact.touch,
ul li a.contact.touch,
ul li a:focus.contact.touch,
ul li a:active.contact.touch,
ul li a:visited.contact.touch,
button.menu.contact.touch,
button.menu:focus.contact.touch,
button.menu:active.contact.touch,
button.menu:visited.contact.touch,
button.contact.contact.touch,
button.contact:focus.contact.touch,
button.contact:active.contact.touch,
button.contact:visited.contact.touch,
button.back.contact.touch,
button.back:focus.contact.touch,
button.back:active.contact.touch,
button.back:visited.contact.touch {
  margin-bottom: calc(50px + 3 * clamp(15px, var(--point-size) / 4, 25px));
}
ul li button.active,
ul li button:focus.active,
ul li button:active.active,
ul li button:visited.active,
ul li a.active,
ul li a:focus.active,
ul li a:active.active,
ul li a:visited.active,
button.menu.active,
button.menu:focus.active,
button.menu:active.active,
button.menu:visited.active,
button.contact.active,
button.contact:focus.active,
button.contact:active.active,
button.contact:visited.active,
button.back.active,
button.back:focus.active,
button.back:active.active,
button.back:visited.active {
  text-shadow: none;
}
ul li button.active:before,
ul li button:focus.active:before,
ul li button:active.active:before,
ul li button:visited.active:before,
ul li a.active:before,
ul li a:focus.active:before,
ul li a:active.active:before,
ul li a:visited.active:before,
button.menu.active:before,
button.menu:focus.active:before,
button.menu:active.active:before,
button.menu:visited.active:before,
button.contact.active:before,
button.contact:focus.active:before,
button.contact:active.active:before,
button.contact:visited.active:before,
button.back.active:before,
button.back:focus.active:before,
button.back:active.active:before,
button.back:visited.active:before {
  transform: translate(-50%, 0) scaleY(1);
}
ul li button.active.visibility span.pointson,
ul li button:focus.active.visibility span.pointson,
ul li button:active.active.visibility span.pointson,
ul li button:visited.active.visibility span.pointson,
ul li a.active.visibility span.pointson,
ul li a:focus.active.visibility span.pointson,
ul li a:active.active.visibility span.pointson,
ul li a:visited.active.visibility span.pointson,
button.menu.active.visibility span.pointson,
button.menu:focus.active.visibility span.pointson,
button.menu:active.active.visibility span.pointson,
button.menu:visited.active.visibility span.pointson,
button.contact.active.visibility span.pointson,
button.contact:focus.active.visibility span.pointson,
button.contact:active.active.visibility span.pointson,
button.contact:visited.active.visibility span.pointson,
button.back.active.visibility span.pointson,
button.back:focus.active.visibility span.pointson,
button.back:active.active.visibility span.pointson,
button.back:visited.active.visibility span.pointson {
  display: block;
}
ul li button.active.visibility span.pointsoff,
ul li button:focus.active.visibility span.pointsoff,
ul li button:active.active.visibility span.pointsoff,
ul li button:visited.active.visibility span.pointsoff,
ul li a.active.visibility span.pointsoff,
ul li a:focus.active.visibility span.pointsoff,
ul li a:active.active.visibility span.pointsoff,
ul li a:visited.active.visibility span.pointsoff,
button.menu.active.visibility span.pointsoff,
button.menu:focus.active.visibility span.pointsoff,
button.menu:active.active.visibility span.pointsoff,
button.menu:visited.active.visibility span.pointsoff,
button.contact.active.visibility span.pointsoff,
button.contact:focus.active.visibility span.pointsoff,
button.contact:active.active.visibility span.pointsoff,
button.contact:visited.active.visibility span.pointsoff,
button.back.active.visibility span.pointsoff,
button.back:focus.active.visibility span.pointsoff,
button.back:active.active.visibility span.pointsoff,
button.back:visited.active.visibility span.pointsoff {
  display: none;
}
ul li button.active.status span.statuson,
ul li button:focus.active.status span.statuson,
ul li button:active.active.status span.statuson,
ul li button:visited.active.status span.statuson,
ul li a.active.status span.statuson,
ul li a:focus.active.status span.statuson,
ul li a:active.active.status span.statuson,
ul li a:visited.active.status span.statuson,
button.menu.active.status span.statuson,
button.menu:focus.active.status span.statuson,
button.menu:active.active.status span.statuson,
button.menu:visited.active.status span.statuson,
button.contact.active.status span.statuson,
button.contact:focus.active.status span.statuson,
button.contact:active.active.status span.statuson,
button.contact:visited.active.status span.statuson,
button.back.active.status span.statuson,
button.back:focus.active.status span.statuson,
button.back:active.active.status span.statuson,
button.back:visited.active.status span.statuson {
  display: block;
}
ul li button.active.status span.statusoff,
ul li button:focus.active.status span.statusoff,
ul li button:active.active.status span.statusoff,
ul li button:visited.active.status span.statusoff,
ul li a.active.status span.statusoff,
ul li a:focus.active.status span.statusoff,
ul li a:active.active.status span.statusoff,
ul li a:visited.active.status span.statusoff,
button.menu.active.status span.statusoff,
button.menu:focus.active.status span.statusoff,
button.menu:active.active.status span.statusoff,
button.menu:visited.active.status span.statusoff,
button.contact.active.status span.statusoff,
button.contact:focus.active.status span.statusoff,
button.contact:active.active.status span.statusoff,
button.contact:visited.active.status span.statusoff,
button.back.active.status span.statusoff,
button.back:focus.active.status span.statusoff,
button.back:active.active.status span.statusoff,
button.back:visited.active.status span.statusoff {
  display: none;
}
ul li button.active + button.info,
ul li button:focus.active + button.info,
ul li button:active.active + button.info,
ul li button:visited.active + button.info,
ul li a.active + button.info,
ul li a:focus.active + button.info,
ul li a:active.active + button.info,
ul li a:visited.active + button.info,
button.menu.active + button.info,
button.menu:focus.active + button.info,
button.menu:active.active + button.info,
button.menu:visited.active + button.info,
button.contact.active + button.info,
button.contact:focus.active + button.info,
button.contact:active.active + button.info,
button.contact:visited.active + button.info,
button.back.active + button.info,
button.back:focus.active + button.info,
button.back:active.active + button.info,
button.back:visited.active + button.info {
  display: flex;
}
@media (max-width: 767px) {
  ul li button.back,
  ul li button:focus.back,
  ul li button:active.back,
  ul li button:visited.back,
  ul li a.back,
  ul li a:focus.back,
  ul li a:active.back,
  ul li a:visited.back,
  button.menu.back,
  button.menu:focus.back,
  button.menu:active.back,
  button.menu:visited.back,
  button.contact.back,
  button.contact:focus.back,
  button.contact:active.back,
  button.contact:visited.back,
  button.back.back,
  button.back:focus.back,
  button.back:active.back,
  button.back:visited.back {
    display: none !important;
  }
}

ul li a,
ul li a:focus,
ul li a:active,
ul li a:visited {
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  text-align: left;
  color: var(--bg-colour);
  padding: clamp(10px, var(--point-size) / 4, 20px) clamp(15px, var(--point-size) / 3, 25px);
  background-color: rgba(var(--bg-colour), 0.2);
}

ol {
  color: inherit;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-content: flex-end;
  list-style: none;
  gap: calc(var(--point-size) / 8);
  margin: auto 0;
  margin-left: calc(var(--point-size) / 4);
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}
ol button,
ol button:focus,
ol button:active,
ol button:visited,
ol span {
  color: inherit;
  background-color: transparent;
  font-size: 14px;
  line-height: 20px;
  text-shadow: 0 0 calc(var(--point-size) / 6) rgba(0, 0, 0, 0.8);
}
ol strong {
  font-size: clamp(12px, 1vmin, 16px);
  margin: auto 0;
  color: inherit;
  font-weight: 400;
  padding: 2px 5px;
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
}
ol strong.sold {
  background-color: rgba(var(--sold), 0.75);
}
ol strong.reserved {
  background-color: rgba(var(--reserved), 0.75);
}
ol button,
ol button:focus,
ol button:active,
ol button:visited {
  cursor: pointer;
  padding: 0;
}
ol li {
  color: inherit;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-end;
  margin: auto 0;
  white-space: nowrap;
}
ol li:not(:last-child):after {
  display: inline-flex;
  content: "/";
  margin: auto 0 auto calc(var(--point-size) / 8);
  text-shadow: 0 0 calc(var(--point-size) / 8) rgb(0, 0, 0);
}

nav div.container:has(ol strong.available) button.contact {
  display: flex;
}
@media (max-width: 767px) {
  nav div.container {
    flex-flow: row wrap;
  }
  nav div.container > :not(ol) {
    order: 1;
  }
  nav div.container > ol {
    position: absolute;
    width: 100%;
    order: 0;
    left: 0;
    top: 5px;
    justify-content: center;
    margin: 0;
    padding: 0 calc(var(--point-size) / 2);
  }
}

nav.vertical {
  left: calc(var(--point-size) / 2);
  width: auto;
  height: 100%;
  bottom: 0;
}
nav.vertical div.container {
  height: calc(100% - var(--point-size));
  width: auto;
  flex-flow: column nowrap;
  margin: auto 0;
  box-shadow: none;
}
nav.vertical div.container:before {
  background: linear-gradient(to bottom, rgba(var(--bg-colour), 0.7) 0%, rgba(var(--bg-colour), 0.4) 100%);
}
nav.vertical div.container ol {
  display: none;
}
nav.vertical div.container ul:not(.menu) {
  margin: auto auto 0 auto;
  flex-flow: column nowrap;
}
nav.vertical div.container ul:not(.menu) li ul {
  bottom: 0;
  left: calc(clamp(30px, var(--point-size) / 2, 50px) + 100%);
  right: auto;
  transform: translateX(var(--point-size));
}
nav.vertical div.container ul:not(.menu) li ul.open {
  transform: translateX(0);
}
nav.vertical div.container ul.menu {
  top: 0;
  bottom: auto;
  left: calc(clamp(30px, var(--point-size) / 2, 50px) + 100%);
  right: auto;
  transform: translateX(var(--point-size));
  min-width: 350px;
}
nav.vertical div.container ul.menu.open {
  transform: translateX(0);
}
nav.vertical div.container a.logo,
nav.vertical div.container a.logo:focus,
nav.vertical div.container a.logo:active,
nav.vertical div.container a.logo:visited,
nav.vertical div.container button.menu,
nav.vertical div.container button.menu:focus,
nav.vertical div.container button.menu:active,
nav.vertical div.container button.menu:visited,
nav.vertical div.container button.back,
nav.vertical div.container button.back:focus,
nav.vertical div.container button.back:active,
nav.vertical div.container button.back:visited {
  margin: 0 auto;
}
nav.vertical div.container a.logo svg,
nav.vertical div.container a.logo:focus svg,
nav.vertical div.container a.logo:active svg,
nav.vertical div.container a.logo:visited svg {
  display: none;
}
nav.vertical div.container a.logo svg.icon,
nav.vertical div.container a.logo:focus svg.icon,
nav.vertical div.container a.logo:active svg.icon,
nav.vertical div.container a.logo:visited svg.icon {
  display: block;
}
@media (max-width: 767px) {
  nav.vertical {
    width: 100%;
    height: auto;
    bottom: calc(var(--point-size) / 2);
  }
  nav.vertical div.container {
    height: auto;
    width: calc(100% - var(--point-size));
    flex-flow: row nowrap;
  }
  nav.vertical div.container:before {
    background: linear-gradient(to right, rgba(var(--bg-colour), 0.7) 0%, rgba(var(--bg-colour), 0.4) 100%);
  }
  nav.vertical div.container a.logo,
  nav.vertical div.container a.logo:focus,
  nav.vertical div.container a.logo:active,
  nav.vertical div.container a.logo:visited,
  nav.vertical div.container button.menu,
  nav.vertical div.container button.menu:focus,
  nav.vertical div.container button.menu:active,
  nav.vertical div.container button.menu:visited,
  nav.vertical div.container button.back,
  nav.vertical div.container button.back:focus,
  nav.vertical div.container button.back:active,
  nav.vertical div.container button.back:visited {
    margin: auto 0;
  }
  nav.vertical div.container ul:not(.menu) {
    margin: auto 0 auto auto;
    flex-flow: row nowrap;
  }
  nav.vertical div.container ul:not(.menu) li ul {
    flex-flow: column nowrap;
    bottom: calc(clamp(30px, var(--point-size) / 2, 50px) + 100%);
    right: 0;
    left: auto;
    transform: translateY(calc(-1 * var(--point-size)));
  }
  nav.vertical div.container ul:not(.menu) li ul.open {
    transform: translateY(0);
  }
  nav.vertical div.container ul.menu {
    bottom: auto;
    top: calc(clamp(30px, var(--point-size) / 2, 50px) + 100%);
    right: 0;
    left: auto;
    transform: translateY(calc(-1 * var(--point-size)));
  }
  nav.vertical div.container ul.menu.open {
    transform: translateY(0);
  }
}

p#loading {
  position: fixed;
  left: 50%;
  top: 50%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  background-color: rgba(var(--bg-colour));
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
  padding: clamp(10px, var(--point-size) / 4, 20px) clamp(20px, var(--point-size) / 2, 40px) clamp(10px, var(--point-size) / 4, 20px) clamp(10px, var(--point-size) / 4, 20px);
  margin: 0;
  z-index: 1000;
  transform: translate(-50%, -50%);
  gap: calc(var(--point-size) / 8);
}
p#loading span {
  margin: auto 0;
}
p#loading span.material-symbols-outlined {
  animation: rotate 800ms infinite linear;
}

section.cookies {
  position: fixed;
  right: 50%;
  bottom: 50%;
  z-index: 10000;
  background-color: #FFFFFF;
  width: 100%;
  padding: 30px 30px 0 30px !important;
  color: #313131;
  pointer-events: all;
  max-width: 800px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.4);
  transform: translate(50%, 50%);
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}
section.cookies.alert {
  max-width: 400px;
  bottom: 50%;
  transform: translate(50%, 50%);
}
@media (max-width: 767px) {
  section.cookies {
    padding: 20px;
    width: 100%;
  }
}
section.cookies p:not(.title) {
  position: relative;
  font-weight: 400;
  color: inherit;
  font-size: 14px;
  line-height: 20px;
  margin: auto 0 auto auto;
  width: 100%;
}
section.cookies p:not(.title) a,
section.cookies p:not(.title) a:focus,
section.cookies p:not(.title) a:active,
section.cookies p:not(.title) a:visited,
section.cookies p:not(.title) strong {
  font-weight: 600;
  color: inherit;
}
section.cookies p:not(.title) a,
section.cookies p:not(.title) a:focus,
section.cookies p:not(.title) a:active,
section.cookies p:not(.title) a:visited {
  position: relative;
  transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -webkit-transition-property: opacity;
  font-weight: 600;
  display: inline;
  border: none;
  font-size: 14px;
  line-height: 20px;
  float: none;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
section.cookies p:not(.title) a:hover,
section.cookies p:not(.title) a:focus:hover,
section.cookies p:not(.title) a:active:hover,
section.cookies p:not(.title) a:visited:hover {
  opacity: 0.5;
  border: none;
  background-color: transparent !important;
}
@media (max-width: 767px) {
  section.cookies p:not(.title) {
    font-size: 14px;
    line-height: 20px;
  }
}
section.cookies p.title,
section.cookies h4 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  font-size: 20px;
  line-height: 24px;
  margin: auto 0;
  color: inherit;
  font-weight: 600;
}
section.cookies p.title svg,
section.cookies h4 svg {
  width: 24px;
  height: 24px;
  fill: #313131;
  margin: 0 10px auto 0;
  padding: 2px 0;
}
section.cookies h5 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  font-size: 16px;
  line-height: 30px;
  margin: 0 0 15px 0;
  color: inherit;
  font-weight: 600;
}
section.cookies button,
section.cookies button:focus,
section.cookies button:active,
section.cookies button:visited,
section.cookies a,
section.cookies a:focus,
section.cookies a:active,
section.cookies a:visited {
  transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: background-color, border;
  -moz-transition-property: background-color, border;
  -o-transition-property: background-color, border;
  -webkit-transition-property: background-color, border;
  padding: 0 15px 0 15px;
  margin: 0;
  position: absolute;
  font-weight: 600;
  font-size: 16px;
  line-height: 40px;
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-content: flex-end;
  width: auto;
  text-align: right;
  top: 0;
  right: 0;
  color: #FFFFFF;
  pointer-events: all;
  background-color: #FFFFFF;
}
section.cookies button svg,
section.cookies button:focus svg,
section.cookies button:active svg,
section.cookies button:visited svg,
section.cookies a svg,
section.cookies a:focus svg,
section.cookies a:active svg,
section.cookies a:visited svg {
  transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: fill;
  -moz-transition-property: fill;
  -o-transition-property: fill;
  -webkit-transition-property: fill;
  width: 20px;
  height: 30px;
  fill: #FFFFFF;
  margin: auto 0;
  padding: 2px 0;
}
section.cookies button span,
section.cookies button:focus span,
section.cookies button:active span,
section.cookies button:visited span,
section.cookies a span,
section.cookies a:focus span,
section.cookies a:active span,
section.cookies a:visited span {
  transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: color;
  -moz-transition-property: color;
  -o-transition-property: color;
  -webkit-transition-property: color;
  color: inherit;
  margin: auto 10px;
  font-weight: 600;
  font-size: 12px;
}
@media (hover: hover) {
  section.cookies button:hover,
  section.cookies button:focus:hover,
  section.cookies button:active:hover,
  section.cookies button:visited:hover,
  section.cookies a:hover,
  section.cookies a:focus:hover,
  section.cookies a:active:hover,
  section.cookies a:visited:hover {
    background-color: rgba(49, 49, 49, 0.1) !important;
  }
  section.cookies button:hover.acceptall, section.cookies button:hover.save,
  section.cookies button:focus:hover.acceptall,
  section.cookies button:focus:hover.save,
  section.cookies button:active:hover.acceptall,
  section.cookies button:active:hover.save,
  section.cookies button:visited:hover.acceptall,
  section.cookies button:visited:hover.save,
  section.cookies a:hover.acceptall,
  section.cookies a:hover.save,
  section.cookies a:focus:hover.acceptall,
  section.cookies a:focus:hover.save,
  section.cookies a:active:hover.acceptall,
  section.cookies a:active:hover.save,
  section.cookies a:visited:hover.acceptall,
  section.cookies a:visited:hover.save {
    background-color: rgba(49, 49, 49, 0.1) !important;
  }
}
section.cookies header {
  position: relative;
  color: inherit;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  margin: 0 0 20px 0;
}
section.cookies div.form,
section.cookies form {
  position: relative;
  width: 100%;
  margin: 20px 0 0 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: 0;
  color: inherit;
  background-color: transparent;
}
section.cookies div.form ul,
section.cookies form ul {
  list-style: none;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  color: inherit;
}
section.cookies div.form ul li,
section.cookies form ul li {
  position: relative;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: flex-start;
  color: inherit;
}
section.cookies div.form ul li button,
section.cookies div.form ul li button:focus,
section.cookies div.form ul li button:active,
section.cookies div.form ul li button:visited,
section.cookies form ul li button,
section.cookies form ul li button:focus,
section.cookies form ul li button:active,
section.cookies form ul li button:visited {
  background-color: transparent;
  position: relative;
  width: 100%;
  padding: 0 40px 0 10px;
  text-align: left;
  justify-content: flex-start;
  align-content: flex-start;
  border: none !important;
  border-top: 1px dotted #FFFFFF !important;
  color: inherit;
}
section.cookies div.form ul li button svg,
section.cookies div.form ul li button:focus svg,
section.cookies div.form ul li button:active svg,
section.cookies div.form ul li button:visited svg,
section.cookies form ul li button svg,
section.cookies form ul li button:focus svg,
section.cookies form ul li button:active svg,
section.cookies form ul li button:visited svg {
  margin: auto 10px auto 0;
  fill: #313131;
}
section.cookies div.form ul li button small,
section.cookies div.form ul li button:focus small,
section.cookies div.form ul li button:active small,
section.cookies div.form ul li button:visited small,
section.cookies form ul li button small,
section.cookies form ul li button:focus small,
section.cookies form ul li button:active small,
section.cookies form ul li button:visited small {
  color: inherit;
  font-size: 14px;
  line-height: 16px;
  padding: 0 3px;
  text-align: center;
  margin: auto auto auto 10px;
}
section.cookies div.form ul li button.open svg,
section.cookies div.form ul li button:focus.open svg,
section.cookies div.form ul li button:active.open svg,
section.cookies div.form ul li button:visited.open svg,
section.cookies form ul li button.open svg,
section.cookies form ul li button:focus.open svg,
section.cookies form ul li button:active.open svg,
section.cookies form ul li button:visited.open svg {
  transform: rotate(180deg);
}
section.cookies div.form ul li label,
section.cookies form ul li label {
  color: inherit;
  position: absolute;
  top: 1px;
  right: 0;
  margin: auto 0 auto auto;
}
section.cookies div.form ul li div,
section.cookies form ul li div {
  position: relative;
  width: 100%;
  display: none;
  padding: 20px;
  overflow: auto;
  max-height: 180px;
  color: inherit;
}
section.cookies div.form ul li div.open,
section.cookies form ul li div.open {
  display: block;
}
section.cookies div.form ul li div table,
section.cookies form ul li div table {
  position: relative;
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  border: none;
  background-color: transparent;
  color: inherit;
}
section.cookies div.form ul li div table *,
section.cookies form ul li div table * {
  margin: 0;
  padding: 0;
  text-align: left;
  border: none;
  background-color: transparent;
  font-size: 14px;
  line-height: 24px;
  color: inherit;
  font-weight: 400;
}
section.cookies div.form ul li div table caption,
section.cookies form ul li div table caption {
  margin: 0 0 10px 0;
}
section.cookies div.form ul li div table thead,
section.cookies div.form ul li div table thead *,
section.cookies form ul li div table thead,
section.cookies form ul li div table thead * {
  margin: 0;
  font-weight: 600;
  padding: 5px 0;
  border-bottom: 1px dotted rgba(49, 49, 49, 0.5);
}
section.cookies div.form ul li div table tbody td,
section.cookies form ul li div table tbody td {
  padding-left: 5px;
  padding-right: 5px;
}
section.cookies div.form ul li div table tbody tr:first-child td,
section.cookies form ul li div table tbody tr:first-child td {
  padding: 5px 5px 0 5px;
}
section.cookies div.form ul li div table thead,
section.cookies form ul li div table thead {
  position: sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: -20px;
  z-index: 100;
  background-color: #FFFFFF;
}
section.cookies div.form label,
section.cookies form label {
  position: relative;
  margin: auto 30px auto 0;
  width: auto !important;
  font-size: 16px;
  line-height: 40px;
  padding: 0 0 0 35px;
  cursor: pointer;
  color: inherit;
}
section.cookies div.form label input,
section.cookies form label input {
  transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: background-color, border, background-image, background-position;
  -moz-transition-property: background-color, border, background-image, background-position;
  -o-transition-property: background-color, border, background-image, background-position;
  -webkit-transition-property: background-color, border, background-image, background-position;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 7px;
  left: 0;
  width: 25px;
  height: 25px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid rgba(49, 49, 49, 0.4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath style='fill: %23000000;' d='M382-253.847 168.616-467.231l42.769-42.768L382-339.384l366.615-366.615 42.769 42.768L382-253.847Z'/%3E%3C/svg%3E");
  background-position: center -30px;
  background-repeat: no-repeat;
  background-size: 90%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
section.cookies div.form label input:hover,
section.cookies form label input:hover {
  background-position: center;
}
section.cookies div.form label input:after, section.cookies div.form label input:before,
section.cookies form label input:after,
section.cookies form label input:before {
  display: none !important;
}
section.cookies div.form label input:checked,
section.cookies form label input:checked {
  background-position: center;
  border: 1px solid rgba(49, 49, 49, 0.4);
}
section.cookies div.form label input:disabled,
section.cookies form label input:disabled {
  opacity: 0.5;
}
section.cookies div.footer,
section.cookies footer {
  position: sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: -webkit-sticky;
  bottom: 0;
  background-color: #FFFFFF;
  width: 100%;
  border-top: 1px dashed rgba(49, 49, 49, 0.5);
  margin: 30px 0 0 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-content: flex-start;
  padding: 30px 0;
  color: #313131;
  min-height: 0;
}
section.cookies div.footer button,
section.cookies div.footer button:focus,
section.cookies div.footer button:active,
section.cookies div.footer button:visited,
section.cookies div.footer a,
section.cookies div.footer a:focus,
section.cookies div.footer a:active,
section.cookies div.footer a:visited,
section.cookies footer button,
section.cookies footer button:focus,
section.cookies footer button:active,
section.cookies footer button:visited,
section.cookies footer a,
section.cookies footer a:focus,
section.cookies footer a:active,
section.cookies footer a:visited {
  justify-content: flex-start;
  align-content: flex-start;
  text-align: left;
  padding: 10px 15px;
  margin: 0 0 0 20px;
  position: relative;
  line-height: 16px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}
section.cookies div.footer button svg,
section.cookies div.footer button:focus svg,
section.cookies div.footer button:active svg,
section.cookies div.footer button:visited svg,
section.cookies div.footer a svg,
section.cookies div.footer a:focus svg,
section.cookies div.footer a:active svg,
section.cookies div.footer a:visited svg,
section.cookies footer button svg,
section.cookies footer button:focus svg,
section.cookies footer button:active svg,
section.cookies footer button:visited svg,
section.cookies footer a svg,
section.cookies footer a:focus svg,
section.cookies footer a:active svg,
section.cookies footer a:visited svg {
  fill: #313131;
}
section.cookies div.footer button span,
section.cookies div.footer button:focus span,
section.cookies div.footer button:active span,
section.cookies div.footer button:visited span,
section.cookies div.footer a span,
section.cookies div.footer a:focus span,
section.cookies div.footer a:active span,
section.cookies div.footer a:visited span,
section.cookies footer button span,
section.cookies footer button:focus span,
section.cookies footer button:active span,
section.cookies footer button:visited span,
section.cookies footer a span,
section.cookies footer a:focus span,
section.cookies footer a:active span,
section.cookies footer a:visited span {
  font-size: 12px;
  font-weight: 600;
  color: inherit;
}
section.cookies div.footer button.acceptall, section.cookies div.footer button.save,
section.cookies div.footer button:focus.acceptall,
section.cookies div.footer button:focus.save,
section.cookies div.footer button:active.acceptall,
section.cookies div.footer button:active.save,
section.cookies div.footer button:visited.acceptall,
section.cookies div.footer button:visited.save,
section.cookies div.footer a.acceptall,
section.cookies div.footer a.save,
section.cookies div.footer a:focus.acceptall,
section.cookies div.footer a:focus.save,
section.cookies div.footer a:active.acceptall,
section.cookies div.footer a:active.save,
section.cookies div.footer a:visited.acceptall,
section.cookies div.footer a:visited.save,
section.cookies footer button.acceptall,
section.cookies footer button.save,
section.cookies footer button:focus.acceptall,
section.cookies footer button:focus.save,
section.cookies footer button:active.acceptall,
section.cookies footer button:active.save,
section.cookies footer button:visited.acceptall,
section.cookies footer button:visited.save,
section.cookies footer a.acceptall,
section.cookies footer a.save,
section.cookies footer a:focus.acceptall,
section.cookies footer a:focus.save,
section.cookies footer a:active.acceptall,
section.cookies footer a:active.save,
section.cookies footer a:visited.acceptall,
section.cookies footer a:visited.save {
  color: inherit;
  font-weight: 600;
  background-color: rgba(49, 49, 49, 0.05);
}
section.cookies div.footer button.acceptall svg, section.cookies div.footer button.save svg,
section.cookies div.footer button:focus.acceptall svg,
section.cookies div.footer button:focus.save svg,
section.cookies div.footer button:active.acceptall svg,
section.cookies div.footer button:active.save svg,
section.cookies div.footer button:visited.acceptall svg,
section.cookies div.footer button:visited.save svg,
section.cookies div.footer a.acceptall svg,
section.cookies div.footer a.save svg,
section.cookies div.footer a:focus.acceptall svg,
section.cookies div.footer a:focus.save svg,
section.cookies div.footer a:active.acceptall svg,
section.cookies div.footer a:active.save svg,
section.cookies div.footer a:visited.acceptall svg,
section.cookies div.footer a:visited.save svg,
section.cookies footer button.acceptall svg,
section.cookies footer button.save svg,
section.cookies footer button:focus.acceptall svg,
section.cookies footer button:focus.save svg,
section.cookies footer button:active.acceptall svg,
section.cookies footer button:active.save svg,
section.cookies footer button:visited.acceptall svg,
section.cookies footer button:visited.save svg,
section.cookies footer a.acceptall svg,
section.cookies footer a.save svg,
section.cookies footer a:focus.acceptall svg,
section.cookies footer a:focus.save svg,
section.cookies footer a:active.acceptall svg,
section.cookies footer a:active.save svg,
section.cookies footer a:visited.acceptall svg,
section.cookies footer a:visited.save svg {
  fill: #313131;
}
@media (max-width: 800px) {
  section.cookies div.footer button,
  section.cookies div.footer button:focus,
  section.cookies div.footer button:active,
  section.cookies div.footer button:visited,
  section.cookies div.footer a,
  section.cookies div.footer a:focus,
  section.cookies div.footer a:active,
  section.cookies div.footer a:visited,
  section.cookies footer button,
  section.cookies footer button:focus,
  section.cookies footer button:active,
  section.cookies footer button:visited,
  section.cookies footer a,
  section.cookies footer a:focus,
  section.cookies footer a:active,
  section.cookies footer a:visited {
    justify-content: center;
    align-content: center;
    margin: 20px 0 0 10px;
    width: calc(50% - 10px);
  }
  section.cookies div.footer button:nth-child(odd),
  section.cookies div.footer button:focus:nth-child(odd),
  section.cookies div.footer button:active:nth-child(odd),
  section.cookies div.footer button:visited:nth-child(odd),
  section.cookies div.footer a:nth-child(odd),
  section.cookies div.footer a:focus:nth-child(odd),
  section.cookies div.footer a:active:nth-child(odd),
  section.cookies div.footer a:visited:nth-child(odd),
  section.cookies footer button:nth-child(odd),
  section.cookies footer button:focus:nth-child(odd),
  section.cookies footer button:active:nth-child(odd),
  section.cookies footer button:visited:nth-child(odd),
  section.cookies footer a:nth-child(odd),
  section.cookies footer a:focus:nth-child(odd),
  section.cookies footer a:active:nth-child(odd),
  section.cookies footer a:visited:nth-child(odd) {
    margin: 20px 10px 0 0;
  }
}
section.cookies div.footer a:not(.acceptall),
section.cookies div.footer a:not(.acceptall):focus,
section.cookies div.footer a:not(.acceptall):active,
section.cookies div.footer a:not(.acceptall):visited,
section.cookies footer a:not(.acceptall),
section.cookies footer a:not(.acceptall):focus,
section.cookies footer a:not(.acceptall):active,
section.cookies footer a:not(.acceptall):visited {
  transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -webkit-transition-property: opacity;
  padding: 0;
  margin: auto 30px auto 0;
  position: relative;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  background-color: transparent;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-content: flex-end;
  width: auto;
  text-align: right;
  color: inherit;
  pointer-events: all;
  text-decoration: none;
  border: none;
}
section.cookies div.footer a:not(.acceptall) span,
section.cookies div.footer a:not(.acceptall):focus span,
section.cookies div.footer a:not(.acceptall):active span,
section.cookies div.footer a:not(.acceptall):visited span,
section.cookies footer a:not(.acceptall) span,
section.cookies footer a:not(.acceptall):focus span,
section.cookies footer a:not(.acceptall):active span,
section.cookies footer a:not(.acceptall):visited span {
  color: inherit;
  margin: auto 0;
  font-weight: 600;
  font-size: 14px;
}
section.cookies div.footer a:not(.acceptall):after,
section.cookies div.footer a:not(.acceptall):focus:after,
section.cookies div.footer a:not(.acceptall):active:after,
section.cookies div.footer a:not(.acceptall):visited:after,
section.cookies footer a:not(.acceptall):after,
section.cookies footer a:not(.acceptall):focus:after,
section.cookies footer a:not(.acceptall):active:after,
section.cookies footer a:not(.acceptall):visited:after {
  position: absolute;
  right: -15px;
  width: 1px;
  height: 100%;
  top: 0;
  background-color: #313131;
  content: " ";
  display: block;
}
@media (max-width: 800px) {
  section.cookies div.footer a:not(.acceptall):after,
  section.cookies div.footer a:not(.acceptall):focus:after,
  section.cookies div.footer a:not(.acceptall):active:after,
  section.cookies div.footer a:not(.acceptall):visited:after,
  section.cookies footer a:not(.acceptall):after,
  section.cookies footer a:not(.acceptall):focus:after,
  section.cookies footer a:not(.acceptall):active:after,
  section.cookies footer a:not(.acceptall):visited:after {
    right: -5px;
  }
}
section.cookies div.footer a:not(.acceptall):last-of-type,
section.cookies div.footer a:not(.acceptall):focus:last-of-type,
section.cookies div.footer a:not(.acceptall):active:last-of-type,
section.cookies div.footer a:not(.acceptall):visited:last-of-type,
section.cookies footer a:not(.acceptall):last-of-type,
section.cookies footer a:not(.acceptall):focus:last-of-type,
section.cookies footer a:not(.acceptall):active:last-of-type,
section.cookies footer a:not(.acceptall):visited:last-of-type {
  margin: auto auto auto 0;
  text-align: left;
}
section.cookies div.footer a:not(.acceptall):last-of-type:after,
section.cookies div.footer a:not(.acceptall):focus:last-of-type:after,
section.cookies div.footer a:not(.acceptall):active:last-of-type:after,
section.cookies div.footer a:not(.acceptall):visited:last-of-type:after,
section.cookies footer a:not(.acceptall):last-of-type:after,
section.cookies footer a:not(.acceptall):focus:last-of-type:after,
section.cookies footer a:not(.acceptall):active:last-of-type:after,
section.cookies footer a:not(.acceptall):visited:last-of-type:after {
  display: none;
}
@media (hover: hover) {
  section.cookies div.footer a:not(.acceptall):hover,
  section.cookies div.footer a:not(.acceptall):focus:hover,
  section.cookies div.footer a:not(.acceptall):active:hover,
  section.cookies div.footer a:not(.acceptall):visited:hover,
  section.cookies footer a:not(.acceptall):hover,
  section.cookies footer a:not(.acceptall):focus:hover,
  section.cookies footer a:not(.acceptall):active:hover,
  section.cookies footer a:not(.acceptall):visited:hover {
    background-color: transparent !important;
    opacity: 0.5;
  }
}
@media (max-width: 800px) {
  section.cookies div.footer a:not(.acceptall),
  section.cookies div.footer a:not(.acceptall):focus,
  section.cookies div.footer a:not(.acceptall):active,
  section.cookies div.footer a:not(.acceptall):visited,
  section.cookies footer a:not(.acceptall),
  section.cookies footer a:not(.acceptall):focus,
  section.cookies footer a:not(.acceptall):active,
  section.cookies footer a:not(.acceptall):visited {
    justify-content: center;
    align-content: center;
    margin: 0 0 0 5px !important;
    width: calc(50% - 5px);
  }
  section.cookies div.footer a:not(.acceptall):nth-child(odd),
  section.cookies div.footer a:not(.acceptall):focus:nth-child(odd),
  section.cookies div.footer a:not(.acceptall):active:nth-child(odd),
  section.cookies div.footer a:not(.acceptall):visited:nth-child(odd),
  section.cookies footer a:not(.acceptall):nth-child(odd),
  section.cookies footer a:not(.acceptall):focus:nth-child(odd),
  section.cookies footer a:not(.acceptall):active:nth-child(odd),
  section.cookies footer a:not(.acceptall):visited:nth-child(odd) {
    margin: 0 5px 0 0 !important;
  }
}
@media (max-width: 800px) {
  section.cookies div.footer,
  section.cookies footer {
    flex-flow: row wrap;
  }
}
@media (max-width: 767px) {
  section.cookies div.footer,
  section.cookies footer {
    padding: 20px 0 10px 0;
  }
}
section.cookies.settings {
  display: none;
}

button.cookies:not(.inline),
button.cookies:not(.inline):focus,
button.cookies:not(.inline):active,
button.cookies:not(.inline):visited {
  transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: background-color, color;
  -moz-transition-property: background-color, color;
  -o-transition-property: background-color, color;
  -webkit-transition-property: background-color, color;
  padding: 10px 20px;
  margin: 0 auto 30px auto;
  position: relative;
  float: left;
  font-weight: 400;
  font-size: 16px;
  line-height: 40px;
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  min-width: 60px;
  text-align: right;
  width: calc(100% - 180px);
  color: #FFFFFF;
  pointer-events: all;
  z-index: 90;
  background-color: #313131;
  border-radius: 0 0 20px 20px;
  -webkit-border-radius: 0 0 20px 20px;
  -moz-border-radius: 0 0 20px 20px;
}
button.cookies:not(.inline) svg,
button.cookies:not(.inline):focus svg,
button.cookies:not(.inline):active svg,
button.cookies:not(.inline):visited svg {
  transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: fill;
  -moz-transition-property: fill;
  -o-transition-property: fill;
  -webkit-transition-property: fill;
  width: 16px;
  height: 16px;
  fill: #FFFFFF;
  margin: auto 0;
  padding: 0;
}
button.cookies:not(.inline) span,
button.cookies:not(.inline):focus span,
button.cookies:not(.inline):active span,
button.cookies:not(.inline):visited span {
  font-size: 16px;
  font-weight: 500;
  color: inherit;
  margin: auto 0 auto 10px;
}
@media (hover: hover) {
  button.cookies:not(.inline):hover,
  button.cookies:not(.inline):focus:hover,
  button.cookies:not(.inline):active:hover,
  button.cookies:not(.inline):visited:hover {
    background-color: rgba(49, 49, 49, 0.8);
  }
}

.cookiemsg {
  padding: 30px;
  margin: 0;
  position: relative;
  float: left;
  font-weight: 400;
  font-size: 16px;
  line-height: 40px;
  background-color: rgba(15, 16, 18, 0.5);
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  min-width: 60px;
  text-align: left;
  width: 100%;
  color: #FFFFFF;
  pointer-events: all;
  z-index: 90;
  border-radius: calc(var(--point-size) / 4);
  -moz-border-radius: calc(var(--point-size) / 4);
  -webkit-border-radius: calc(var(--point-size) / 4);
}
.cookiemsg p {
  margin: 0 !important;
  text-align: left !important;
  width: 100%;
}
.cookiemsg p strong, .cookiemsg p em, .cookiemsg p u {
  color: inherit;
}
.cookiemsg p.title,
.cookiemsg h3 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  font-size: 30px !important;
  line-height: 30px !important;
  color: inherit;
  font-weight: 500;
  margin: 0;
  width: 100%;
  padding: 0;
  text-align: left !important;
}
.cookiemsg p.title svg,
.cookiemsg h3 svg {
  width: 30px;
  height: 30px;
  fill: #FFFFFF;
  margin: 5px 10px auto 0;
  padding: 2px 0;
}
.cookiemsg button,
.cookiemsg button:focus,
.cookiemsg button:active,
.cookiemsg button:visited {
  transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: background-color, border;
  -moz-transition-property: background-color, border;
  -o-transition-property: background-color, border;
  -webkit-transition-property: background-color, border;
  padding: 10px 20px;
  position: relative;
  float: right;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  width: auto;
  text-align: right;
  top: 0;
  right: 0;
  color: #FFFFFF;
  pointer-events: all;
  background-color: rgba(255, 255, 255, 0.05);
  border: none;
  margin: 20px 0 0 auto !important;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  text-transform: uppercase;
}
.cookiemsg button svg,
.cookiemsg button:focus svg,
.cookiemsg button:active svg,
.cookiemsg button:visited svg {
  transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: fill;
  -moz-transition-property: fill;
  -o-transition-property: fill;
  -webkit-transition-property: fill;
  width: 20px;
  height: 30px;
  fill: #FFFFFF;
  margin: auto 0;
  padding: 2px 0;
}
.cookiemsg button span,
.cookiemsg button:focus span,
.cookiemsg button:active span,
.cookiemsg button:visited span {
  transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: color;
  -moz-transition-property: color;
  -o-transition-property: color;
  -webkit-transition-property: color;
  color: inherit;
  margin: auto 10px;
  font-weight: 600;
  font-size: 16px;
  line-height: 30px;
}
@media (hover: hover) {
  .cookiemsg button:hover,
  .cookiemsg button:focus:hover,
  .cookiemsg button:active:hover,
  .cookiemsg button:visited:hover {
    color: #313131;
    background-color: #FFFFFF;
  }
  .cookiemsg button:hover svg,
  .cookiemsg button:focus:hover svg,
  .cookiemsg button:active:hover svg,
  .cookiemsg button:visited:hover svg {
    fill: #313131;
  }
}

#slider {
  position: relative;
  width: 100%;
  height: 100svh;
  background-color: var(--slider-bg);
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
#slider * {
  color: white;
}
#slider picture {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 0;
  background-color: var(--slider-bg-bg);
}
#slider picture img {
  width: 100%;
  height: 100svh;
  object-position: center;
  object-fit: cover;
  -o-object-position: center;
  -o-object-fit: cover;
}
#slider picture.prev {
  height: 100%;
}
#slider picture.active {
  z-index: 20;
  height: 100%;
}
#slider picture.preview {
  height: 10%;
  z-index: 50;
}
#slider .bgimgs {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--slider-bg-bg);
  z-index: 0;
}
#slider .bgimgs picture img {
  transition: var(--slider-bg-speed) cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: var(--slider-bg-speed) cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: var(--slider-bg-speed) cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: var(--slider-bg-speed) cubic-bezier(0.42, 0, 0.58, 1);
  transform: scale(1.1);
  opacity: var(--slider-bg-opacity);
  filter: blur(var(--slider-bg-blur));
  object-position: var(--mouse-x) var(--mouse-y);
}
#slider .bgimgs picture.active img {
  transform: scale(1);
}
#slider .bgimgs picture.active {
  transition: var(--slider-bg-speed) cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: var(--slider-bg-speed) cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: var(--slider-bg-speed) cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: var(--slider-bg-speed) cubic-bezier(0.42, 0, 0.58, 1);
}
#slider .bgimgs picture.preview {
  transition: calc(var(--slider-bg-speed) / 2) cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: calc(var(--slider-bg-speed) / 2) cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: calc(var(--slider-bg-speed) / 2) cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: calc(var(--slider-bg-speed) / 2) cubic-bezier(0.42, 0, 0.58, 1);
}
#slider .nav {
  transition: calc(var(--slider-bg-speed) / 2) cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: calc(var(--slider-bg-speed) / 2) cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: calc(var(--slider-bg-speed) / 2) cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: calc(var(--slider-bg-speed) / 2) cubic-bezier(0.42, 0, 0.58, 1);
  z-index: 1;
  position: absolute;
  width: 100%;
  max-width: 850px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-content: center;
  padding: 40px;
}
#slider .nav button,
#slider .nav button:active,
#slider .nav button:focus,
#slider .nav button:visited {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  position: relative;
  width: 80px;
  min-height: 80px;
  background-color: rgba(0, 0, 0, 0.4);
  margin: auto 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  text-decoration: none;
  padding: 0;
  font-size: 18px;
  color: white;
  border-radius: 100%;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  letter-spacing: 1px;
  font-weight: 500;
  box-shadow: 0 0 100px black;
}
#slider .nav button svg,
#slider .nav button:active svg,
#slider .nav button:focus svg,
#slider .nav button:visited svg {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  fill: white;
  margin: auto;
  width: 30px;
  height: 30px;
}
#slider .nav button:hover,
#slider .nav button:active:hover,
#slider .nav button:focus:hover,
#slider .nav button:visited:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
#slider .nav.hide {
  transform: scale(0.98);
}
#slider .content {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  position: relative;
  margin: auto;
  width: 90%;
  max-width: 500px;
  height: 70vh;
  max-height: 600px;
  z-index: 2;
  box-shadow: 0 0 300px black;
  overflow: hidden;
  border-radius: var(--slider-content-radius);
  background-color: var(--slider-content-bg);
}
#slider .content picture img {
  transition: var(--slider-content-speed) cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: var(--slider-content-speed) cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: var(--slider-content-speed) cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: var(--slider-content-speed) cubic-bezier(0.42, 0, 0.58, 1);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -1.5svh) scale(1.2);
  opacity: var(--slider-content-opacity);
  filter: blur(var(--slider-content-blur));
  height: 70svh;
  width: 90svw;
  max-width: 1000px;
}
#slider .content section.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  background-color: transparent;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-content: flex-start;
  padding-bottom: 40px;
  pointer-events: none;
}
#slider .content section.slide section {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  position: relative;
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  padding: 0 30px 0 0;
  opacity: 0;
  transform: translateY(80px) scale(0.95);
  overflow: auto;
  margin: auto auto 0 auto;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  scrollbar-color: white rgba(0, 0, 0, 0.2);
  scrollbar-darkshadow-color: transparent;
  scrollbar-3dlight-color: pink;
  scrollbar-width: thin;
}
#slider .content section.slide section svg {
  position: relative;
  min-height: 60px;
  width: auto;
  margin: 0 auto 20px 0;
  fill: white;
}
#slider .content section.slide section h2 {
  margin: auto 0 0 0;
  font-size: clamp(30px, 9vw, 50px);
  line-height: clamp(35px, 9.2vw, 50px);
  width: 100%;
  letter-spacing: 1px;
  font-weight: 500;
}
#slider .content section.slide section p {
  margin-top: 30px;
  font-size: 18px;
  line-height: 32px;
  width: 100%;
  letter-spacing: 1px;
  font-weight: 200;
}
#slider .content section.slide a,
#slider .content section.slide a:active,
#slider .content section.slide a:focus,
#slider .content section.slide a:visited {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  position: relative;
  width: calc(100% - 80px);
  min-height: 60px;
  background-color: rgba(255, 255, 255, 0.05);
  margin: 20px auto 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-content: flex-start;
  text-decoration: none;
  padding: 10px 20px;
  opacity: 0;
  transform: translateY(100px) scale(0.9);
  font-size: 18px;
  color: white;
  border-radius: 10px;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  letter-spacing: 1px;
  font-weight: 500;
}
#slider .content section.slide a span,
#slider .content section.slide a:active span,
#slider .content section.slide a:focus span,
#slider .content section.slide a:visited span {
  color: inherit;
  margin: auto 0;
  font-size: 18px;
  letter-spacing: 1px;
}
#slider .content section.slide a svg,
#slider .content section.slide a:active svg,
#slider .content section.slide a:focus svg,
#slider .content section.slide a:visited svg {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  fill: white;
  margin: auto 0 auto 20px;
}
#slider .content section.slide a:hover,
#slider .content section.slide a:active:hover,
#slider .content section.slide a:focus:hover,
#slider .content section.slide a:visited:hover {
  color: black;
}
#slider .content section.slide a:hover svg,
#slider .content section.slide a:active:hover svg,
#slider .content section.slide a:focus:hover svg,
#slider .content section.slide a:visited:hover svg {
  fill: black;
}
#slider .content section.slide a:hover,
#slider .content section.slide a:active:hover,
#slider .content section.slide a:focus:hover,
#slider .content section.slide a:visited:hover {
  background-color: white;
}
#slider .content section.slide ul {
  position: relative;
  min-height: 60px;
  list-style: none;
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  padding: 0 40px;
  gap: 5px;
  margin: 0 0 30px 0;
  opacity: 0;
}
#slider .content section.slide ul li {
  margin: 0;
  width: 100%;
}
#slider .content section.slide ul li button,
#slider .content section.slide ul li button:active,
#slider .content section.slide ul li button:focus,
#slider .content section.slide ul li button:visited {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  position: relative;
  float: left;
  width: 100%;
  background-color: transparent;
  height: 40px;
  border: none;
  appearance: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
}
#slider .content section.slide ul li button::before,
#slider .content section.slide ul li button:active::before,
#slider .content section.slide ul li button:focus::before,
#slider .content section.slide ul li button:visited::before {
  transition: 0ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 0ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 0ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 0ms cubic-bezier(0.42, 0, 0.58, 1);
  position: absolute;
  content: " ";
  background-color: white;
  top: 38px;
  height: 2px;
  width: 100%;
  left: 0;
  transform-origin: left top;
  transform: scaleX(0);
}
#slider .content section.slide ul li button small,
#slider .content section.slide ul li button:active small,
#slider .content section.slide ul li button:focus small,
#slider .content section.slide ul li button:visited small {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  position: absolute;
  top: 100%;
  width: 100%;
  white-space: nowrap;
  left: 0;
  text-align: left;
  line-height: 12px;
  font-size: 10px;
  margin: 10px 0 0 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
#slider .content section.slide ul li button:hover,
#slider .content section.slide ul li button:active:hover,
#slider .content section.slide ul li button:focus:hover,
#slider .content section.slide ul li button:visited:hover {
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
}
#slider .content section.slide ul li button:hover:not(.active) small,
#slider .content section.slide ul li button:active:hover:not(.active) small,
#slider .content section.slide ul li button:focus:hover:not(.active) small,
#slider .content section.slide ul li button:visited:hover:not(.active) small {
  transform: translateY(0);
  opacity: 1;
}
#slider .content section.slide ul li button.active,
#slider .content section.slide ul li button:active.active,
#slider .content section.slide ul li button:focus.active,
#slider .content section.slide ul li button:visited.active {
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}
#slider .content section.slide.prev picture {
  height: 100%;
}
#slider .content section.slide.active {
  pointer-events: all;
  z-index: 10;
}
#slider .content section.slide.active ul {
  opacity: 1;
}
#slider .content section.slide.active a,
#slider .content section.slide.active a:active,
#slider .content section.slide.active a:focus,
#slider .content section.slide.active a:visited,
#slider .content section.slide.active section {
  transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  -webkit-transition-delay: 500ms;
  opacity: 1;
  transform: translateY(0);
}
#slider .content section.slide.active a:hover,
#slider .content section.slide.active a:active:hover,
#slider .content section.slide.active a:focus:hover,
#slider .content section.slide.active a:visited:hover,
#slider .content section.slide.active section:hover {
  transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  -webkit-transition-delay: 0ms;
}
#slider .content section.slide.active picture {
  transition: var(--slider-content-speed) cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: var(--slider-content-speed) cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: var(--slider-content-speed) cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: var(--slider-content-speed) cubic-bezier(0.42, 0, 0.58, 1);
  height: 100%;
}
#slider .content section.slide.active picture img {
  transform: translate(-50%, -1.5svh) scale(1.1);
}
#slider .content section.slide.preview {
  z-index: 30;
}
#slider .content section.slide.preview picture {
  transition: calc(var(--slider-content-speed) / 2) cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: calc(var(--slider-content-speed) / 2) cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: calc(var(--slider-content-speed) / 2) cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: calc(var(--slider-content-speed) / 2) cubic-bezier(0.42, 0, 0.58, 1);
  height: 10px;
}
#slider .content section.slide.preview picture img {
  opacity: 1;
}
#slider .content:hover {
  transform: scale(1.05);
}

#tabs {
  position: relative;
  width: 100%;
  height: 100svh;
  background-color: var(--slider-bg);
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
#tabs * {
  color: white;
}
#tabs div[role=tablist] {
  width: calc(100% - 40px);
  max-width: 900px;
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  margin: 0 0 10px 0;
}
#tabs div[role=tablist] button {
  padding: 10px 15px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: var(--slider-content-radius);
}
#tabs div[role=tablist] button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
#tabs div[role=tablist] button[aria-selected=true] {
  background-color: white;
  color: #313131;
}
#tabs div[role=tabpanel] {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  width: calc(100% - 40px);
  max-width: 900px;
  display: flex;
  flex-flow: row wrap;
  gap: 5px;
  padding: 0;
  background-color: white;
  border-radius: var(--slider-content-radius);
  margin: 0;
  overflow: hidden;
  height: 50vh;
  box-shadow: 0 0 300px rgba(0, 0, 0, 0.2);
}
#tabs div[role=tabpanel] * {
  color: #313131;
}
#tabs div[role=tabpanel] p {
  position: relative;
  width: 100%;
  padding: 10px 15px;
}
#tabs div[role=tabpanel].display-none {
  height: 0;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
}

.draggable {
  pointer-events: all;
}

.draggable.grab {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  scroll-snap-type: initial !important;
}

@media (hover: hover) and (pointer: fine) {
  .draggable:hover {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
  }
  .draggable:hover span {
    opacity: 1;
  }
}
.drag * {
  pointer-events: none;
}

* {
  margin: 0;
  color: white;
}

::-moz-selection { /* Code for Firefox */
  background: rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
}

::selection {
  background: rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
}

@-webkit-keyframes ping {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes ping {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes ping {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes ping {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ping {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  15% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(0.8);
    opacity: 1;
  }
  80% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
@-webkit-keyframes rotate {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotate {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-ms-keyframes rotate {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes rotate {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes rotate {
  0% {
    border-radius: calc(var(--point-size));
    -moz-border-radius: calc(var(--point-size));
    -webkit-border-radius: calc(var(--point-size));
    transform: rotate(0deg) scale(0.4);
  }
  60% {
    border-radius: calc(var(--point-size) / 3);
    -moz-border-radius: calc(var(--point-size) / 3);
    -webkit-border-radius: calc(var(--point-size) / 3);
    transform: rotate(315deg) scale(0.6);
  }
  100% {
    border-radius: calc(var(--point-size));
    -moz-border-radius: calc(var(--point-size));
    -webkit-border-radius: calc(var(--point-size));
    transform: rotate(360deg) scale(0.4);
  }
}
html, body {
  margin: 0;
  padding: 0;
  background-color: rgb(var(--bg-colour));
}

img.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -o-object-fit: cover;
  -o-object-position: center;
  filter: blur(100px);
  opacity: 0.1;
}

main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: center;
  padding: 0 0 var(--nav-size) 0;
  padding: var(--point-size);
  overflow: hidden;
}
main section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-flow: column wrap;
  justify-content: center;
  align-content: center;
  filter: drop-shadow(0 0 calc(var(--point-size) * 4) rgba(0, 0, 0, 0.4));
  transform-origin: 0 0;
}
main section.active {
  display: flex;
}
main div {
  user-select: none;
  position: relative;
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
}
main div ul.actions {
  position: absolute;
  flex-flow: row nowrap;
  top: calc(var(--point-size) / 2);
  left: 50%;
  padding: calc(var(--point-size) / 4);
  background-color: rgb(var(--bg-colour));
  border-radius: calc(var(--point-size) / 4);
  -moz-border-radius: calc(var(--point-size) / 4);
  -webkit-border-radius: calc(var(--point-size) / 4);
  transform: translateX(-50%);
  max-width: calc(100% - var(--point-size));
  box-shadow: 0 0 calc(var(--point-size) / 2) rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 calc(var(--point-size) * 1.5) rgba(0, 0, 0, 0.3);
  z-index: 100;
}
main div ul.actions li button,
main div ul.actions li button:focus,
main div ul.actions li button:active,
main div ul.actions li button:visited {
  white-space: nowrap;
  flex-flow: row nowrap;
}
main div ul.actions li button.info,
main div ul.actions li button:focus.info,
main div ul.actions li button:active.info,
main div ul.actions li button:visited.info {
  display: flex !important;
}
main div ul.actions:not(:has(li)) {
  display: none;
}
main div button.point,
main div button.point:focus,
main div button.point:active,
main div button.point:visited {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: background-color, opacity;
  -moz-transition-property: background-color, opacity;
  -o-transition-property: background-color, opacity;
  -webkit-transition-property: background-color, opacity;
  position: absolute;
  width: var(--point-size);
  height: var(--point-size);
  background-color: rgba(var(--bg-point), 0.5);
  background-color: transparent;
  border-radius: var(--point-size);
  -moz-border-radius: var(--point-size);
  -webkit-border-radius: var(--point-size);
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 200;
  cursor: pointer;
}
main div button.point:before, main div button.point:after,
main div button.point:focus:before,
main div button.point:focus:after,
main div button.point:active:before,
main div button.point:active:after,
main div button.point:visited:before,
main div button.point:visited:after {
  z-index: 100;
  position: absolute;
  content: " ";
  display: block;
  border-radius: var(--point-size);
  -moz-border-radius: var(--point-size);
  -webkit-border-radius: var(--point-size);
  box-shadow: 0 0 calc(var(--point-size) / 4) rgba(0, 0, 0, 0.3);
  background-color: white;
}
main div button.point:after,
main div button.point:focus:after,
main div button.point:active:after,
main div button.point:visited:after {
  border-radius: calc(var(--point-size) / 3);
  -moz-border-radius: calc(var(--point-size) / 3);
  -webkit-border-radius: calc(var(--point-size) / 3);
  width: var(--point-size);
  height: var(--point-size);
  left: 0;
  top: 0;
  border: calc(var(--point-size) / 16) solid rgba(255, 255, 255, 0.7);
  -webkit-animation: var(--animate-ping);
  -moz-animation: var(--animate-ping);
  -o-animation: var(--animate-ping);
  animation: var(--animate-ping);
  background-color: transparent;
  z-index: 90;
}
main div button.point span.material-symbols-outlined,
main div button.point:focus span.material-symbols-outlined,
main div button.point:active span.material-symbols-outlined,
main div button.point:visited span.material-symbols-outlined {
  color: white;
  font-size: 19px;
  opacity: 0.5;
}
main div button.point span:not(.material-symbols-outlined),
main div button.point:focus span:not(.material-symbols-outlined),
main div button.point:active span:not(.material-symbols-outlined),
main div button.point:visited span:not(.material-symbols-outlined) {
  transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: bottom, left, right, top;
  -moz-transition-property: bottom, left, right, top;
  -o-transition-property: bottom, left, right, top;
  -webkit-transition-property: bottom, left, right, top;
  position: absolute;
  bottom: 5vmin;
  transform: translateX(-50%);
  left: 50%;
  background-color: rgba(150, 150, 150, 0.8);
  border-radius: calc(var(--point-size) / 4);
  -moz-border-radius: calc(var(--point-size) / 4);
  -webkit-border-radius: calc(var(--point-size) / 4);
  white-space: nowrap;
  font-size: clamp(16px, 1.5vmin, 20px);
  font-weight: 500;
  padding: calc(var(--point-size) / 8) calc(var(--point-size) / 4);
  border: calc(var(--point-size) / 6) solid rgba(255, 255, 255, 0.5);
  color: white;
  min-width: var(--point-size);
  text-shadow: 0 0 calc(var(--point-size) / 2) rgba(0, 0, 0, 0.9);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: calc(var(--point-size) / 8);
  z-index: 100;
}
main div button.point span:not(.material-symbols-outlined) small,
main div button.point:focus span:not(.material-symbols-outlined) small,
main div button.point:active span:not(.material-symbols-outlined) small,
main div button.point:visited span:not(.material-symbols-outlined) small {
  margin: auto 0;
  opacity: 0.6;
  font-weight: 400;
}
main div button.point span:not(.material-symbols-outlined):after,
main div button.point:focus span:not(.material-symbols-outlined):after,
main div button.point:active span:not(.material-symbols-outlined):after,
main div button.point:visited span:not(.material-symbols-outlined):after {
  transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: height, width;
  -moz-transition-property: height, width;
  -o-transition-property: height, width;
  -webkit-transition-property: height, width;
  position: absolute;
  content: " ";
  display: block;
  width: 1px;
  height: calc(5vmin - var(--point-size) / 3);
  background-color: white;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}
main div button.point span:not(.material-symbols-outlined):before,
main div button.point:focus span:not(.material-symbols-outlined):before,
main div button.point:active span:not(.material-symbols-outlined):before,
main div button.point:visited span:not(.material-symbols-outlined):before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--point-size) / 10);
  -moz-border-radius: calc(var(--point-size) / 10);
  -webkit-border-radius: calc(var(--point-size) / 10);
  background: linear-gradient(to right, rgba(20, 20, 20, 0.6) 0%, rgba(20, 20, 20, 0.4) 100%);
  background-color: rgba(var(--bg-colour), 0.7);
}
main div button.point.reserved span:not(.material-symbols-outlined),
main div button.point:focus.reserved span:not(.material-symbols-outlined),
main div button.point:active.reserved span:not(.material-symbols-outlined),
main div button.point:visited.reserved span:not(.material-symbols-outlined) {
  border-color: rgba(var(--reserved), 0.8);
}
main div button.point.sold span:not(.material-symbols-outlined),
main div button.point:focus.sold span:not(.material-symbols-outlined),
main div button.point:active.sold span:not(.material-symbols-outlined),
main div button.point:visited.sold span:not(.material-symbols-outlined) {
  border-color: rgba(var(--sold), 0.8);
}
main div button.point.bottom span:not(.material-symbols-outlined),
main div button.point:focus.bottom span:not(.material-symbols-outlined),
main div button.point:active.bottom span:not(.material-symbols-outlined),
main div button.point:visited.bottom span:not(.material-symbols-outlined) {
  top: 5vmin;
  bottom: auto;
}
main div button.point.bottom span:not(.material-symbols-outlined):after,
main div button.point:focus.bottom span:not(.material-symbols-outlined):after,
main div button.point:active.bottom span:not(.material-symbols-outlined):after,
main div button.point:visited.bottom span:not(.material-symbols-outlined):after {
  top: auto;
  bottom: 100%;
}
main div button.point.right span:not(.material-symbols-outlined),
main div button.point:focus.right span:not(.material-symbols-outlined),
main div button.point:active.right span:not(.material-symbols-outlined),
main div button.point:visited.right span:not(.material-symbols-outlined) {
  bottom: 50%;
  left: 5vmin;
  transform: translateY(50%);
}
main div button.point.right span:not(.material-symbols-outlined):after,
main div button.point:focus.right span:not(.material-symbols-outlined):after,
main div button.point:active.right span:not(.material-symbols-outlined):after,
main div button.point:visited.right span:not(.material-symbols-outlined):after {
  width: calc(5vmin - var(--point-size) / 3);
  height: 1px;
  right: 100%;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
}
main div button.point.left span:not(.material-symbols-outlined),
main div button.point:focus.left span:not(.material-symbols-outlined),
main div button.point:active.left span:not(.material-symbols-outlined),
main div button.point:visited.left span:not(.material-symbols-outlined) {
  bottom: 50%;
  right: 5vmin;
  left: auto;
  transform: translateY(50%);
}
main div button.point.left span:not(.material-symbols-outlined):after,
main div button.point:focus.left span:not(.material-symbols-outlined):after,
main div button.point:active.left span:not(.material-symbols-outlined):after,
main div button.point:visited.left span:not(.material-symbols-outlined):after {
  width: calc(5vmin - var(--point-size) / 3);
  height: 1px;
  left: 100%;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
}
@media (hover: hover) and (pointer: fine) {
  main div button.point:hover,
  main div button.point:focus:hover,
  main div button.point:active:hover,
  main div button.point:visited:hover {
    background-color: rgba(220, 220, 220, 0.5);
    z-index: 200;
  }
}
main div button.point:before,
main div button.point:focus:before,
main div button.point:active:before,
main div button.point:visited:before {
  width: calc(var(--point-size) / 4);
  height: calc(var(--point-size) / 4);
  left: calc(50% - var(--point-size) / 8);
  top: calc(50% - var(--point-size) / 8);
  box-shadow: 0 0 calc(var(--point-size) / 4) rgba(0, 0, 0, 0.9);
  background-color: white;
}
main div img {
  pointer-events: none;
  max-width: 100%;
  max-height: 100%;
  z-index: 0;
}
main div svg {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  fill: rgba(255, 255, 255, 0);
}
main div svg * {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: fill;
  -moz-transition-property: fill;
  -o-transition-property: fill;
  -webkit-transition-property: fill;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
main div svg *.hover, main div svg *.active {
  fill: rgba(255, 255, 255, 0.1);
}
main div svg:has(.active) *:not(.active) {
  fill: rgba(var(--bg-colour), 0.75);
}
main div svg:has(.hover) *:not(.hover) {
  fill: rgba(var(--bg-colour), 0.75);
}
@media (hover: none) {
  main {
    overflow: auto;
  }
}

#gallery,
#help {
  position: fixed;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: flex-start;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding-bottom: var(--nav-size);
}
#gallery > div,
#help > div {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: padding-left;
  -moz-transition-property: padding-left;
  -o-transition-property: padding-left;
  -webkit-transition-property: padding-left;
  position: relative;
  background: rgba(var(--bg-colour), 0.7);
  width: calc(100% - var(--point-size) / 2);
  max-width: clamp(1200px, 60vw, 2500px);
  max-height: clamp(80vh, 80vh, 1200px);
  border-radius: calc(var(--point-size) / 4);
  -moz-border-radius: calc(var(--point-size) / 4);
  -webkit-border-radius: calc(var(--point-size) / 4);
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: 0 calc(var(--point-size) / 2);
  padding: 0 clamp(15px, var(--point-size) / 4, 25px);
  overflow: hidden;
  margin: auto 0;
  box-shadow: 0 0 calc(var(--point-size) * 1.5) rgba(0, 0, 0, 0.3);
}
#gallery > div header,
#help > div header {
  position: relative;
  min-height: 80px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: center;
  color: white;
  padding: 0 70px;
}
#gallery > div header h2,
#help > div header h2 {
  position: relative;
  width: 100%;
  white-space: nowrap;
  margin: 0 auto 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#gallery > div header *,
#help > div header * {
  color: inherit;
  text-shadow: 0 0 calc(var(--point-size) / 4) rgba(0, 0, 0, 0.4);
}
#gallery > div header button.close,
#gallery > div header button.close:focus,
#gallery > div header button.close:active,
#gallery > div header button.close:visited,
#gallery > div header button.menu,
#gallery > div header button.menu:focus,
#gallery > div header button.menu:active,
#gallery > div header button.menu:visited,
#help > div header button.close,
#help > div header button.close:focus,
#help > div header button.close:active,
#help > div header button.close:visited,
#help > div header button.menu,
#help > div header button.menu:focus,
#help > div header button.menu:active,
#help > div header button.menu:visited {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: background-color, color;
  -moz-transition-property: background-color, color;
  -o-transition-property: background-color, color;
  -webkit-transition-property: background-color, color;
  position: absolute;
  width: 50px;
  height: 50px;
  top: calc(var(--point-size) / 3);
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
  background-color: rgba(var(--bg-colour), 0.4);
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  text-shadow: 0 0 calc(var(--point-size) / 8) rgba(0, 0, 0, 0.6);
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: center;
}
#gallery > div header button.close:before,
#gallery > div header button.close:focus:before,
#gallery > div header button.close:active:before,
#gallery > div header button.close:visited:before,
#gallery > div header button.menu:before,
#gallery > div header button.menu:focus:before,
#gallery > div header button.menu:active:before,
#gallery > div header button.menu:visited:before,
#help > div header button.close:before,
#help > div header button.close:focus:before,
#help > div header button.close:active:before,
#help > div header button.close:visited:before,
#help > div header button.menu:before,
#help > div header button.menu:focus:before,
#help > div header button.menu:active:before,
#help > div header button.menu:visited:before {
  display: none;
}
#gallery > div header button.close.menu,
#gallery > div header button.close:focus.menu,
#gallery > div header button.close:active.menu,
#gallery > div header button.close:visited.menu,
#gallery > div header button.menu.menu,
#gallery > div header button.menu:focus.menu,
#gallery > div header button.menu:active.menu,
#gallery > div header button.menu:visited.menu,
#help > div header button.close.menu,
#help > div header button.close:focus.menu,
#help > div header button.close:active.menu,
#help > div header button.close:visited.menu,
#help > div header button.menu.menu,
#help > div header button.menu:focus.menu,
#help > div header button.menu:active.menu,
#help > div header button.menu:visited.menu {
  left: 0;
}
#gallery > div header button.close.close,
#gallery > div header button.close:focus.close,
#gallery > div header button.close:active.close,
#gallery > div header button.close:visited.close,
#gallery > div header button.menu.close,
#gallery > div header button.menu:focus.close,
#gallery > div header button.menu:active.close,
#gallery > div header button.menu:visited.close,
#help > div header button.close.close,
#help > div header button.close:focus.close,
#help > div header button.close:active.close,
#help > div header button.close:visited.close,
#help > div header button.menu.close,
#help > div header button.menu:focus.close,
#help > div header button.menu:active.close,
#help > div header button.menu:visited.close {
  right: 0;
}
@media (hover: hover) and (pointer: fine) {
  #gallery > div header button.close:hover,
  #gallery > div header button.close:focus:hover,
  #gallery > div header button.close:active:hover,
  #gallery > div header button.close:visited:hover,
  #gallery > div header button.menu:hover,
  #gallery > div header button.menu:focus:hover,
  #gallery > div header button.menu:active:hover,
  #gallery > div header button.menu:visited:hover,
  #help > div header button.close:hover,
  #help > div header button.close:focus:hover,
  #help > div header button.close:active:hover,
  #help > div header button.close:visited:hover,
  #help > div header button.menu:hover,
  #help > div header button.menu:focus:hover,
  #help > div header button.menu:active:hover,
  #help > div header button.menu:visited:hover {
    background-color: rgba(255, 255, 255, 0.15);
  }
}
#gallery > div header button.close.active,
#gallery > div header button.close:focus.active,
#gallery > div header button.close:active.active,
#gallery > div header button.close:visited.active,
#gallery > div header button.menu.active,
#gallery > div header button.menu:focus.active,
#gallery > div header button.menu:active.active,
#gallery > div header button.menu:visited.active,
#help > div header button.close.active,
#help > div header button.close:focus.active,
#help > div header button.close:active.active,
#help > div header button.close:visited.active,
#help > div header button.menu.active,
#help > div header button.menu:focus.active,
#help > div header button.menu:active.active,
#help > div header button.menu:visited.active {
  background-color: rgba(255, 255, 255, 0.8);
  color: rgba(var(--bg-colour), 1);
}
#gallery > div header:not(:has(button.menu)),
#help > div header:not(:has(button.menu)) {
  padding-left: 0;
}
#gallery > div header ol,
#help > div header ol {
  margin: 0 auto 0 0;
}
#gallery > div aside,
#help > div aside {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: transform;
  -moz-transition-property: transform;
  -o-transition-property: transform;
  -webkit-transition-property: transform;
  position: absolute;
  height: 100%;
  width: 100%;
  max-width: 250px;
  background: rgba(0, 0, 0, 0.15);
  overflow: auto;
  left: 0;
  top: 0;
  z-index: 200;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  transform: translateX(-100%);
  text-align: left;
}
#gallery > div aside header,
#help > div aside header {
  position: sticky;
  top: 0;
  padding: 0 calc(var(--point-size) / 2) !important;
}
#gallery > div aside div.rooms,
#help > div aside div.rooms {
  padding: calc(var(--point-size) / 2);
  height: 100%;
  overflow: auto;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  scrollbar-color: white rgba(var(--bg-colour), 0.9);
  scrollbar-width: thin;
}
#gallery > div aside button,
#gallery > div aside button:focus,
#gallery > div aside button:active,
#gallery > div aside button:visited,
#help > div aside button,
#help > div aside button:focus,
#help > div aside button:active,
#help > div aside button:visited {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: background-color, color;
  -moz-transition-property: background-color, color;
  -o-transition-property: background-color, color;
  -webkit-transition-property: background-color, color;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: clamp(15px, var(--point-size) / 3, 25px);
  cursor: pointer;
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
  background-color: rgba(var(--bg-colour), 0.2);
  color: white;
  margin-bottom: calc(var(--point-size) / 4);
  text-align: left;
  gap: calc(var(--point-size) / 4);
  transform: translate(0%, 0%) scale(1) !important;
}
#gallery > div aside button span,
#gallery > div aside button:focus span,
#gallery > div aside button:active span,
#gallery > div aside button:visited span,
#help > div aside button span,
#help > div aside button:focus span,
#help > div aside button:active span,
#help > div aside button:visited span {
  color: inherit;
  margin: auto 0;
}
@media (hover: hover) and (pointer: fine) {
  #gallery > div aside button:hover,
  #gallery > div aside button:focus:hover,
  #gallery > div aside button:active:hover,
  #gallery > div aside button:visited:hover,
  #help > div aside button:hover,
  #help > div aside button:focus:hover,
  #help > div aside button:active:hover,
  #help > div aside button:visited:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
}
#gallery > div aside button.active,
#gallery > div aside button:focus.active,
#gallery > div aside button:active.active,
#gallery > div aside button:visited.active,
#help > div aside button.active,
#help > div aside button:focus.active,
#help > div aside button:active.active,
#help > div aside button:visited.active {
  background-color: rgba(255, 255, 255, 0.8);
  color: rgba(var(--bg-colour), 1);
}
#gallery > div aside ul.actions,
#help > div aside ul.actions {
  gap: 5px;
  margin: 0;
  padding: calc(var(--point-size) / 2);
  background: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
  flex-flow: row wrap;
}
#gallery > div aside ul.actions button,
#gallery > div aside ul.actions button:focus,
#gallery > div aside ul.actions button:active,
#gallery > div aside ul.actions button:visited,
#help > div aside ul.actions button,
#help > div aside ul.actions button:focus,
#help > div aside ul.actions button:active,
#help > div aside ul.actions button:visited {
  margin: 0;
  padding: clamp(10px, var(--point-size) / 4, 20px);
}
#gallery > div aside ul.actions button:before,
#gallery > div aside ul.actions button:focus:before,
#gallery > div aside ul.actions button:active:before,
#gallery > div aside ul.actions button:visited:before,
#help > div aside ul.actions button:before,
#help > div aside ul.actions button:focus:before,
#help > div aside ul.actions button:active:before,
#help > div aside ul.actions button:visited:before {
  display: none;
}
#gallery > div aside ul.actions li:has(button.info),
#help > div aside ul.actions li:has(button.info) {
  display: none;
}
#gallery > div aside ul.actions:has(li:first-child button.info),
#help > div aside ul.actions:has(li:first-child button.info) {
  display: none;
}
#gallery > div section,
#help > div section {
  display: flex;
  flex-flow: row nowrap;
  gap: calc(var(--point-size) / 4);
  height: calc(100% - (80px + clamp(15px, var(--point-size) / 4, 25px)));
}
#gallery > div section div,
#help > div section div {
  position: relative;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: center;
  background-color: rgb(var(--bg-colour), 0.8);
}
#gallery > div section div span,
#help > div section div span {
  margin: auto;
  color: white;
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
  background-color: rgba(var(--bg-colour), 0.2);
  padding: calc(var(--point-size) / 2);
}
#gallery > div section div img,
#gallery > div section div a,
#gallery > div section div a:focus,
#gallery > div section div a:active,
#gallery > div section div a:visited,
#help > div section div img,
#help > div section div a,
#help > div section div a:focus,
#help > div section div a:active,
#help > div section div a:visited {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-position: center;
  -o-object-position: center;
  object-fit: scale-down;
  -o-object-fit: scale-down;
}
#gallery > div section div a,
#gallery > div section div a:focus,
#gallery > div section div a:active,
#gallery > div section div a:visited,
#help > div section div a,
#help > div section div a:focus,
#help > div section div a:active,
#help > div section div a:visited {
  transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -webkit-transition-property: opacity;
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
  overflow: hidden;
  -webkit-user-select: none; /* Safari */
  user-select: none;
  opacity: 0;
  pointer-events: none;
}
#gallery > div section div a img,
#gallery > div section div a:focus img,
#gallery > div section div a:active img,
#gallery > div section div a:visited img,
#help > div section div a img,
#help > div section div a:focus img,
#help > div section div a:active img,
#help > div section div a:visited img {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: transform;
  -moz-transition-property: transform;
  -o-transition-property: transform;
  -webkit-transition-property: transform;
  pointer-events: none;
  -webkit-user-select: none; /* Safari */
  user-select: none;
}
#gallery > div section div a.active,
#gallery > div section div a:focus.active,
#gallery > div section div a:active.active,
#gallery > div section div a:visited.active,
#help > div section div a.active,
#help > div section div a:focus.active,
#help > div section div a:active.active,
#help > div section div a:visited.active {
  opacity: 1;
  pointer-events: all;
}
@media (hover: hover) and (pointer: fine) {
  #gallery > div section div a:hover img,
  #gallery > div section div a:focus:hover img,
  #gallery > div section div a:active:hover img,
  #gallery > div section div a:visited:hover img,
  #help > div section div a:hover img,
  #help > div section div a:focus:hover img,
  #help > div section div a:active:hover img,
  #help > div section div a:visited:hover img {
    transform: scale(1.05);
  }
}
#gallery > div section div button:not(.nav),
#gallery > div section div button:not(.nav):focus,
#gallery > div section div button:not(.nav):active,
#gallery > div section div button:not(.nav):visited,
#help > div section div button:not(.nav),
#help > div section div button:not(.nav):focus,
#help > div section div button:not(.nav):active,
#help > div section div button:not(.nav):visited {
  transition: 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 100ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: border;
  -moz-transition-property: border;
  -o-transition-property: border;
  -webkit-transition-property: border;
  position: relative;
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  background-color: transparent;
}
#gallery > div section div button:not(.nav) img,
#gallery > div section div button:not(.nav):focus img,
#gallery > div section div button:not(.nav):active img,
#gallery > div section div button:not(.nav):visited img,
#help > div section div button:not(.nav) img,
#help > div section div button:not(.nav):focus img,
#help > div section div button:not(.nav):active img,
#help > div section div button:not(.nav):visited img {
  transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: transform;
  -moz-transition-property: transform;
  -o-transition-property: transform;
  -webkit-transition-property: transform;
}
@media (max-width: 767px) {
  #gallery > div section div button:not(.nav),
  #gallery > div section div button:not(.nav):focus,
  #gallery > div section div button:not(.nav):active,
  #gallery > div section div button:not(.nav):visited,
  #help > div section div button:not(.nav),
  #help > div section div button:not(.nav):focus,
  #help > div section div button:not(.nav):active,
  #help > div section div button:not(.nav):visited {
    width: auto;
    height: 100%;
    min-width: 25vmin;
  }
}
#gallery > div section div button:not(.nav).active,
#gallery > div section div button:not(.nav):focus.active,
#gallery > div section div button:not(.nav):active.active,
#gallery > div section div button:not(.nav):visited.active,
#help > div section div button:not(.nav).active,
#help > div section div button:not(.nav):focus.active,
#help > div section div button:not(.nav):active.active,
#help > div section div button:not(.nav):visited.active {
  border: calc(var(--point-size) / 8) solid rgb(255, 255, 255);
}
#gallery > div section div button:not(.nav).active:before,
#gallery > div section div button:not(.nav):focus.active:before,
#gallery > div section div button:not(.nav):active.active:before,
#gallery > div section div button:not(.nav):visited.active:before,
#help > div section div button:not(.nav).active:before,
#help > div section div button:not(.nav):focus.active:before,
#help > div section div button:not(.nav):active.active:before,
#help > div section div button:not(.nav):visited.active:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: " ";
  z-index: 10;
  border: calc(var(--point-size) / 8) solid rgba(var(--bg-colour), 0.6);
}
@media (hover: hover) and (pointer: fine) {
  #gallery > div section div button:not(.nav):hover img,
  #gallery > div section div button:not(.nav):focus:hover img,
  #gallery > div section div button:not(.nav):active:hover img,
  #gallery > div section div button:not(.nav):visited:hover img,
  #help > div section div button:not(.nav):hover img,
  #help > div section div button:not(.nav):focus:hover img,
  #help > div section div button:not(.nav):active:hover img,
  #help > div section div button:not(.nav):visited:hover img {
    transform: scale(1.1);
  }
}
#gallery > div section div button.nav,
#gallery > div section div button.nav:focus,
#gallery > div section div button.nav:active,
#gallery > div section div button.nav:visited,
#help > div section div button.nav,
#help > div section div button.nav:focus,
#help > div section div button.nav:active,
#help > div section div button.nav:visited {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: background-color;
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  -webkit-transition-property: background-color;
  position: absolute;
  bottom: calc(var(--point-size) / 2);
  z-index: 100;
  width: 50px;
  height: 50px;
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
  overflow: hidden;
  cursor: pointer;
  background-color: rgba(var(--bg-colour), 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-shadow: 0 0 calc(var(--point-size) / 4) rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-content: center;
}
#gallery > div section div button.nav.prev,
#gallery > div section div button.nav:focus.prev,
#gallery > div section div button.nav:active.prev,
#gallery > div section div button.nav:visited.prev,
#help > div section div button.nav.prev,
#help > div section div button.nav:focus.prev,
#help > div section div button.nav:active.prev,
#help > div section div button.nav:visited.prev {
  right: calc(50px + var(--point-size) / 2);
  margin-right: calc(var(--point-size) / 4);
}
#gallery > div section div button.nav.next,
#gallery > div section div button.nav:focus.next,
#gallery > div section div button.nav:active.next,
#gallery > div section div button.nav:visited.next,
#help > div section div button.nav.next,
#help > div section div button.nav:focus.next,
#help > div section div button.nav:active.next,
#help > div section div button.nav:visited.next {
  right: calc(var(--point-size) / 2);
}
#gallery > div section div button.nav span,
#gallery > div section div button.nav:focus span,
#gallery > div section div button.nav:active span,
#gallery > div section div button.nav:visited span,
#help > div section div button.nav span,
#help > div section div button.nav:focus span,
#help > div section div button.nav:active span,
#help > div section div button.nav:visited span {
  padding: 0;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  background-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  #gallery > div section div button.nav:hover,
  #gallery > div section div button.nav:focus:hover,
  #gallery > div section div button.nav:active:hover,
  #gallery > div section div button.nav:visited:hover,
  #help > div section div button.nav:hover,
  #help > div section div button.nav:focus:hover,
  #help > div section div button.nav:active:hover,
  #help > div section div button.nav:visited:hover {
    background-color: rgba(var(--bg-colour), 0.8);
  }
}
#gallery > div section div.thumbs,
#help > div section div.thumbs {
  width: 15%;
  max-width: 200px;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: flex-start;
  overflow: auto;
  gap: calc(var(--point-size) / 4);
  scrollbar-color: white rgba(var(--bg-colour), 0.9);
  scrollbar-width: thin;
  background-color: transparent;
}
#gallery > div section div.thumbs img,
#help > div section div.thumbs img {
  object-fit: cover;
  -o-object-fit: cover;
}
#gallery > div section div:has(a:nth-of-type(2)) button.nav,
#gallery > div section div:has(a:nth-of-type(2)) button.nav:focus,
#gallery > div section div:has(a:nth-of-type(2)) button.nav:active,
#gallery > div section div:has(a:nth-of-type(2)) button.nav:visited,
#help > div section div:has(a:nth-of-type(2)) button.nav,
#help > div section div:has(a:nth-of-type(2)) button.nav:focus,
#help > div section div:has(a:nth-of-type(2)) button.nav:active,
#help > div section div:has(a:nth-of-type(2)) button.nav:visited {
  display: flex;
}
#gallery > div section div ul,
#help > div section div ul {
  width: 100%;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: calc(var(--point-size) / 2);
}
#gallery > div section div ul li,
#help > div section div ul li {
  width: calc(33.3333333333% - var(--point-size) / 2 * 2 / 3);
  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
  padding-bottom: calc(var(--point-size) / 4);
}
@media (max-width: 900px) {
  #gallery > div section div ul li,
  #help > div section div ul li {
    width: calc(50% - var(--point-size) / 2 * 1 / 2);
  }
}
@media (max-width: 600px) {
  #gallery > div section div ul li,
  #help > div section div ul li {
    width: 100%;
  }
}
#gallery > div section div.text,
#help > div section div.text {
  justify-content: flex-start;
  align-content: flex-start;
  padding: clamp(20px, 4vmin, 40px);
  overflow: auto;
  background-color: rgba(var(--bg-colour), 0.9);
  gap: 30px;
}
#gallery > div section.help,
#help > div section.help {
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: calc(var(--point-size) / 2);
  padding: 70px var(--point-size) 70px 70px;
  background: var(--bg-colour);
  background: rgba(0, 0, 0, 0.25);
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
  scrollbar-color: white rgba(var(--bg-colour), 0.9);
  scrollbar-width: thin;
  overflow: auto;
}
#gallery > div section.help h3, #gallery > div section.help p,
#help > div section.help h3,
#help > div section.help p {
  position: relative;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
@media (max-width: 767px) {
  #gallery > div section.help h3, #gallery > div section.help p,
  #help > div section.help h3,
  #help > div section.help p {
    min-width: 70vw;
  }
}
#gallery > div section.help h3, #gallery > div section.help h4,
#help > div section.help h3,
#help > div section.help h4 {
  padding-top: calc(var(--point-size));
  position: relative;
  float: left;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: calc(var(--point-size) / 4);
  width: 100%;
}
@media (max-width: 767px) {
  #gallery > div section.help h3, #gallery > div section.help h4,
  #help > div section.help h3,
  #help > div section.help h4 {
    min-width: 70vw;
  }
}
#gallery > div section.help h3 span, #gallery > div section.help h4 span,
#help > div section.help h3 span,
#help > div section.help h4 span {
  margin: auto 0;
}
#gallery > div section.help button.point,
#gallery > div section.help button.point:focus,
#gallery > div section.help button.point:active,
#gallery > div section.help button.point:visited,
#help > div section.help button.point,
#help > div section.help button.point:focus,
#help > div section.help button.point:active,
#help > div section.help button.point:visited {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: background-color, opacity;
  -moz-transition-property: background-color, opacity;
  -o-transition-property: background-color, opacity;
  -webkit-transition-property: background-color, opacity;
  position: relative;
  width: var(--point-size);
  height: var(--point-size);
  background-color: transparent;
  border-radius: var(--point-size);
  -moz-border-radius: var(--point-size);
  -webkit-border-radius: var(--point-size);
  z-index: 200;
  cursor: pointer;
  margin: 4vmin 0 0 20px;
  transform: translateY(calc(var(--point-size) / 2));
}
#gallery > div section.help button.point:before, #gallery > div section.help button.point:after,
#gallery > div section.help button.point:focus:before,
#gallery > div section.help button.point:focus:after,
#gallery > div section.help button.point:active:before,
#gallery > div section.help button.point:active:after,
#gallery > div section.help button.point:visited:before,
#gallery > div section.help button.point:visited:after,
#help > div section.help button.point:before,
#help > div section.help button.point:after,
#help > div section.help button.point:focus:before,
#help > div section.help button.point:focus:after,
#help > div section.help button.point:active:before,
#help > div section.help button.point:active:after,
#help > div section.help button.point:visited:before,
#help > div section.help button.point:visited:after {
  z-index: 100;
  position: absolute;
  content: " ";
  display: block;
  border-radius: var(--point-size);
  -moz-border-radius: var(--point-size);
  -webkit-border-radius: var(--point-size);
  box-shadow: 0 0 calc(var(--point-size) / 2) rgba(0, 0, 0, 0.4);
}
#gallery > div section.help button.point:after,
#gallery > div section.help button.point:focus:after,
#gallery > div section.help button.point:active:after,
#gallery > div section.help button.point:visited:after,
#help > div section.help button.point:after,
#help > div section.help button.point:focus:after,
#help > div section.help button.point:active:after,
#help > div section.help button.point:visited:after {
  border-radius: calc(var(--point-size) / 3);
  -moz-border-radius: calc(var(--point-size) / 3);
  -webkit-border-radius: calc(var(--point-size) / 3);
  width: var(--point-size);
  height: var(--point-size);
  left: 0;
  top: 0;
  border: calc(var(--point-size) / 16) solid rgba(255, 255, 255, 0.4);
  -webkit-animation: var(--animate-ping);
  -moz-animation: var(--animate-ping);
  -o-animation: var(--animate-ping);
  animation: var(--animate-ping);
}
#gallery > div section.help button.point span:not(.material-symbols-outlined),
#gallery > div section.help button.point:focus span:not(.material-symbols-outlined),
#gallery > div section.help button.point:active span:not(.material-symbols-outlined),
#gallery > div section.help button.point:visited span:not(.material-symbols-outlined),
#help > div section.help button.point span:not(.material-symbols-outlined),
#help > div section.help button.point:focus span:not(.material-symbols-outlined),
#help > div section.help button.point:active span:not(.material-symbols-outlined),
#help > div section.help button.point:visited span:not(.material-symbols-outlined) {
  transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: bottom, left, right, top;
  -moz-transition-property: bottom, left, right, top;
  -o-transition-property: bottom, left, right, top;
  -webkit-transition-property: bottom, left, right, top;
  position: absolute;
  bottom: 5vmin;
  transform: translateX(-50%);
  left: 50%;
  background-color: rgba(150, 150, 150, 0.2);
  border-radius: calc(var(--point-size) / 4);
  -moz-border-radius: calc(var(--point-size) / 4);
  -webkit-border-radius: calc(var(--point-size) / 4);
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: clamp(16px, 1.5vmin, 20px);
  font-weight: 500;
  padding: calc(var(--point-size) / 8) calc(var(--point-size) / 4);
  border: calc(var(--point-size) / 6) solid rgba(255, 255, 255, 0.5);
  color: white;
  min-width: var(--point-size);
  text-shadow: 0 0 calc(var(--point-size) / 2) rgba(0, 0, 0, 0.9);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: calc(var(--point-size) / 8);
  z-index: 100;
}
#gallery > div section.help button.point span:not(.material-symbols-outlined) small,
#gallery > div section.help button.point:focus span:not(.material-symbols-outlined) small,
#gallery > div section.help button.point:active span:not(.material-symbols-outlined) small,
#gallery > div section.help button.point:visited span:not(.material-symbols-outlined) small,
#help > div section.help button.point span:not(.material-symbols-outlined) small,
#help > div section.help button.point:focus span:not(.material-symbols-outlined) small,
#help > div section.help button.point:active span:not(.material-symbols-outlined) small,
#help > div section.help button.point:visited span:not(.material-symbols-outlined) small {
  margin: auto 0;
  opacity: 0.6;
  font-weight: 400;
}
#gallery > div section.help button.point span:not(.material-symbols-outlined):after,
#gallery > div section.help button.point:focus span:not(.material-symbols-outlined):after,
#gallery > div section.help button.point:active span:not(.material-symbols-outlined):after,
#gallery > div section.help button.point:visited span:not(.material-symbols-outlined):after,
#help > div section.help button.point span:not(.material-symbols-outlined):after,
#help > div section.help button.point:focus span:not(.material-symbols-outlined):after,
#help > div section.help button.point:active span:not(.material-symbols-outlined):after,
#help > div section.help button.point:visited span:not(.material-symbols-outlined):after {
  transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: height, width;
  -moz-transition-property: height, width;
  -o-transition-property: height, width;
  -webkit-transition-property: height, width;
  position: absolute;
  content: " ";
  display: block;
  width: 1px;
  height: calc(5vmin - var(--point-size) / 2);
  background-color: white;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}
#gallery > div section.help button.point span:not(.material-symbols-outlined):before,
#gallery > div section.help button.point:focus span:not(.material-symbols-outlined):before,
#gallery > div section.help button.point:active span:not(.material-symbols-outlined):before,
#gallery > div section.help button.point:visited span:not(.material-symbols-outlined):before,
#help > div section.help button.point span:not(.material-symbols-outlined):before,
#help > div section.help button.point:focus span:not(.material-symbols-outlined):before,
#help > div section.help button.point:active span:not(.material-symbols-outlined):before,
#help > div section.help button.point:visited span:not(.material-symbols-outlined):before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
  background: linear-gradient(to right, rgba(20, 20, 20, 0.6) 0%, rgba(20, 20, 20, 0.4) 100%);
  background-color: rgba(var(--bg-colour), 0.7);
}
@media (hover: hover) and (pointer: fine) {
  #gallery > div section.help button.point:hover,
  #gallery > div section.help button.point:focus:hover,
  #gallery > div section.help button.point:active:hover,
  #gallery > div section.help button.point:visited:hover,
  #help > div section.help button.point:hover,
  #help > div section.help button.point:focus:hover,
  #help > div section.help button.point:active:hover,
  #help > div section.help button.point:visited:hover {
    background-color: rgba(220, 220, 220, 0.5);
    z-index: 200;
  }
  #gallery > div section.help button.point:hover span:not(.material-symbols-outlined),
  #gallery > div section.help button.point:focus:hover span:not(.material-symbols-outlined),
  #gallery > div section.help button.point:active:hover span:not(.material-symbols-outlined),
  #gallery > div section.help button.point:visited:hover span:not(.material-symbols-outlined),
  #help > div section.help button.point:hover span:not(.material-symbols-outlined),
  #help > div section.help button.point:focus:hover span:not(.material-symbols-outlined),
  #help > div section.help button.point:active:hover span:not(.material-symbols-outlined),
  #help > div section.help button.point:visited:hover span:not(.material-symbols-outlined) {
    bottom: 6vmin;
  }
  #gallery > div section.help button.point:hover span:not(.material-symbols-outlined):after,
  #gallery > div section.help button.point:focus:hover span:not(.material-symbols-outlined):after,
  #gallery > div section.help button.point:active:hover span:not(.material-symbols-outlined):after,
  #gallery > div section.help button.point:visited:hover span:not(.material-symbols-outlined):after,
  #help > div section.help button.point:hover span:not(.material-symbols-outlined):after,
  #help > div section.help button.point:focus:hover span:not(.material-symbols-outlined):after,
  #help > div section.help button.point:active:hover span:not(.material-symbols-outlined):after,
  #help > div section.help button.point:visited:hover span:not(.material-symbols-outlined):after {
    height: calc(6vmin - var(--point-size) / 2);
  }
}
#gallery > div section.help button.point:not(:has(span.material-symbols-outlined)):before,
#gallery > div section.help button.point:focus:not(:has(span.material-symbols-outlined)):before,
#gallery > div section.help button.point:active:not(:has(span.material-symbols-outlined)):before,
#gallery > div section.help button.point:visited:not(:has(span.material-symbols-outlined)):before,
#help > div section.help button.point:not(:has(span.material-symbols-outlined)):before,
#help > div section.help button.point:focus:not(:has(span.material-symbols-outlined)):before,
#help > div section.help button.point:active:not(:has(span.material-symbols-outlined)):before,
#help > div section.help button.point:visited:not(:has(span.material-symbols-outlined)):before {
  width: calc(var(--point-size) / 4);
  height: calc(var(--point-size) / 4);
  left: calc(50% - var(--point-size) / 8);
  top: calc(50% - var(--point-size) / 8);
  box-shadow: 0 0 calc(var(--point-size) / 4) rgb(0, 0, 0);
  background-color: white;
}
#gallery > div section.help img,
#help > div section.help img {
  max-width: 100%;
}
@media (max-width: 767px) {
  #gallery > div section.help img,
  #help > div section.help img {
    min-width: 70vw;
  }
}
#gallery > div section.help p,
#help > div section.help p {
  font-size: clamp(16px, 1.5vmin, 20px);
  line-height: clamp(28px, 2vmin, 30px);
}
#gallery > div section.help ol,
#help > div section.help ol {
  width: 100%;
  justify-content: flex-start;
  align-content: flex-start;
  margin: 0;
}
#gallery > div section.help ol li:first-of-type button,
#gallery > div section.help ol li:first-of-type button:focus,
#gallery > div section.help ol li:first-of-type button:active,
#gallery > div section.help ol li:first-of-type button:visited,
#help > div section.help ol li:first-of-type button,
#help > div section.help ol li:first-of-type button:focus,
#help > div section.help ol li:first-of-type button:active,
#help > div section.help ol li:first-of-type button:visited {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  background: rgba(220, 220, 220, 0.05);
  padding: clamp(10px, var(--point-size) / 4, 20px);
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
}
#gallery > div section.help ol li:first-of-type:after,
#help > div section.help ol li:first-of-type:after {
  display: none;
}
#gallery > div section.help ol li:first-of-type,
#help > div section.help ol li:first-of-type {
  margin-right: calc(var(--point-size) / 4);
}
@media (max-width: 767px) {
  #gallery > div section.help ol,
  #help > div section.help ol {
    min-width: 70vw;
  }
}
#gallery > div section:has(div.text),
#help > div section:has(div.text) {
  overflow: auto;
  scrollbar-color: white rgba(var(--bg-colour), 0.5);
  scrollbar-width: thin;
}
@media (max-width: 767px) {
  #gallery > div section,
  #help > div section {
    flex-flow: column nowrap;
  }
  #gallery > div section div,
  #help > div section div {
    height: 100%;
  }
  #gallery > div section div.thumbs,
  #help > div section div.thumbs {
    width: 100%;
    max-width: 100%;
    max-height: 20vmin;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-content: flex-start;
  }
}
#gallery > div.open,
#help > div.open {
  padding-left: calc(250px + clamp(15px, var(--point-size) / 4, 25px));
}
#gallery > div.open aside,
#help > div.open aside {
  transform: translateX(0);
}
#gallery > div:has(form),
#help > div:has(form) {
  max-width: 800px;
}
#gallery > div:has(form) section,
#help > div:has(form) section {
  overflow: auto;
}
#gallery > div form,
#help > div form {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: calc(var(--point-size) / 2);
}
#gallery > div form label,
#help > div form label {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: flex-start;
  margin-bottom: calc(var(--point-size) / 8);
  gap: calc(var(--point-size) / 4);
}
#gallery > div form label small,
#help > div form label small {
  color: rgba(255, 255, 255, 0.6);
  margin-left: auto;
}
#gallery > div form label:has(input),
#help > div form label:has(input) {
  justify-content: flex-start;
  cursor: pointer;
}
#gallery > div form label a,
#gallery > div form label a:focus,
#gallery > div form label a:active,
#gallery > div form label a:visited,
#help > div form label a,
#help > div form label a:focus,
#help > div form label a:active,
#help > div form label a:visited {
  position: relative;
  width: auto;
  height: auto;
  opacity: 1;
  pointer-events: all;
}
#gallery > div form select,
#gallery > div form input,
#help > div form select,
#help > div form input {
  transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition: 400ms cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: background-color;
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  -webkit-transition-property: background-color;
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
  padding: calc(clamp(10px, var(--point-size) / 4, 20px) * 1.5);
  cursor: pointer;
  margin: auto 0;
  background-color: rgba(255, 255, 255, 0.03);
  text-shadow: 0 0 calc(var(--point-size) / 2) rgba(0, 0, 0, 0.6);
  text-decoration: none;
  text-align: left;
  z-index: 300;
  line-height: 20px;
  font-size: 16px;
}
#gallery > div form select:focus,
#gallery > div form input:focus,
#help > div form select:focus,
#help > div form input:focus {
  background-color: rgba(255, 255, 255, 0.05);
}
#gallery > div form select[type=submit],
#gallery > div form input[type=submit],
#help > div form select[type=submit],
#help > div form input[type=submit] {
  margin-left: auto;
  position: sticky;
  bottom: 0;
  background-color: #FFFFFF;
  color: rgb(var(--bg-colour));
  padding: clamp(10px, var(--point-size) / 4, 20px);
  text-shadow: none;
}
#gallery > div form select,
#help > div form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: calc(100% - clamp(10px, var(--point-size) / 4, 20px));
  background-position-y: 50%;
}
#gallery > div form textarea,
#help > div form textarea {
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
  padding: clamp(10px, var(--point-size) / 4, 20px);
  cursor: pointer;
  margin: auto 0;
  background-color: rgba(255, 255, 255, 0.03);
  text-shadow: 0 0 calc(var(--point-size) / 2) rgba(0, 0, 0, 0.6);
  text-decoration: none;
  text-align: left;
  z-index: 300;
  line-height: 20px;
  font-size: 16px;
  resize: none;
  height: 200px;
}
#gallery > div form div:has(:user-invalid) small,
#gallery > div form div:has(:user-valid) small,
#help > div form div:has(:user-invalid) small,
#help > div form div:has(:user-valid) small {
  white-space: nowrap;
}
#gallery > div form div:has(:user-invalid) small:after,
#gallery > div form div:has(:user-valid) small:after,
#help > div form div:has(:user-invalid) small:after,
#help > div form div:has(:user-valid) small:after {
  content: " ";
  position: relative;
  display: inline-block;
  width: calc(var(--point-size) / 4);
  margin-left: calc(var(--point-size) / 4);
  height: calc(var(--point-size) / 4);
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
  border: 1px solid #FFFFFF;
  box-shadow: 0 0 calc(var(--point-size) / 6) rgba(0, 0, 0, 0.8);
}
#gallery > div form div:has(:user-invalid) small:after,
#help > div form div:has(:user-invalid) small:after {
  background-color: rgb(var(--sold));
}
#gallery > div form div:has(:user-valid) small:after,
#help > div form div:has(:user-valid) small:after {
  background-color: rgb(20, 220, 20);
}
#gallery > div:has(div.thumbs),
#help > div:has(div.thumbs) {
  height: 80vh;
}

#help {
  z-index: 200;
}
#help > div {
  background: rgba(var(--bg-colour), 0.95);
}

html:has(nav.vertical) main, body:has(nav.vertical) main {
  padding: var(--point-size) var(--point-size) var(--point-size) var(--nav-size);
}
@media (max-width: 767px) {
  html:has(nav.vertical) main, body:has(nav.vertical) main {
    padding: var(--point-size) var(--point-size) var(--nav-size) var(--point-size);
  }
}
html:has(nav.vertical) #gallery, body:has(nav.vertical) #gallery {
  padding: 0 0 0 var(--nav-size);
}
@media (max-width: 767px) {
  html:has(nav.vertical) #gallery, body:has(nav.vertical) #gallery {
    padding: 0 0 var(--nav-size) 0;
  }
}

#preview {
  position: fixed;
  background-color: rgba(var(--bg-colour), 0.9);
  right: calc(var(--point-size) / 2);
  top: calc(var(--point-size) / 2);
  overflow: hidden;
  width: var(--preview-window-w);
  height: var(--preview-window-h);
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: center;
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
  pointer-events: none;
}
#preview img {
  max-width: 100%;
  max-height: 100%;
  position: relative;
  float: left;
  opacity: 1;
}
#preview div:not(.point) {
  max-width: 100%;
  max-height: 100%;
  width: var(--preview-div-w);
  height: var(--preview-div-h);
  position: relative;
  float: left;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
}
#preview div:not(.point) div.point {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: calc(var(--point-size) / 4);
  -moz-border-radius: calc(var(--point-size) / 4);
  -webkit-border-radius: calc(var(--point-size) / 4);
  background-color: white;
  border: 1px solid black;
  box-shadow: 0 0 2px rgb(0, 0, 0);
}
#preview span {
  border: 2px solid #dc3545;
  position: absolute;
  top: var(--preview-y);
  left: var(--preview-x);
  width: var(--preview-w);
  height: var(--preview-h);
  border-radius: calc(var(--point-size) / 8);
  -moz-border-radius: calc(var(--point-size) / 8);
  -webkit-border-radius: calc(var(--point-size) / 8);
}
#preview span:before {
  content: " ";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 100vmax);
  height: calc(100% + 100vmax);
  border: 50vmax solid rgba(220, 53, 69, 0.3);
  transform: translate(-50%, -50%);
}

#pinch {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9000;
}

body:has(#loading) main {
  pointer-events: none;
  opacity: 0.2;
}