@font-face {
  font-family: Chakrapetch;
  src: url('../fonts/ChakraPetch-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Chakrapetch;
  src: url('../fonts/ChakraPetch-Italic.ttf') format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Chakrapetch;
  src: url('../fonts/ChakraPetch-Light.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Chakrapetch;
  src: url('../fonts/ChakraPetch-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Chakrapetch;
  src: url('../fonts/ChakraPetch-SemiBold.ttf') format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Chakrapetch;
  src: url('../fonts/ChakraPetch-BoldItalic.ttf') format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Chakrapetch;
  src: url('../fonts/ChakraPetch-MediumItalic.ttf') format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Chakrapetch;
  src: url('../fonts/ChakraPetch-LightItalic.ttf') format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Chakrapetch;
  src: url('../fonts/ChakraPetch-Bold.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Chakrapetch;
  src: url('../fonts/ChakraPetch-SemiBoldItalic.ttf') format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-SemiBold.ttf') format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-Bold.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-Light.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --background: #e9eff1;
  --grau: #696977;
  --_font-size---tag: .8rem;
  --black: #15151a;
  --white: #fff;
  --_font-size---copy: 1.15rem;
  --brand-color: #05ffdb;
  --_font-size---h2: 2rem;
  --_font-size---h3: 1.5rem;
  --_font-size---h4: 1.25rem;
}

.w-form-formradioinput--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-width: 4px;
  border-color: #3898ec;
}

a {
  cursor: pointer;
  text-decoration: none;
}

img {
  aspect-ratio: auto;
  object-fit: cover;
  max-width: 100%;
  display: inline-block;
}

.particles-js {
  display: none;
}

.page-wrapper {
  background-image: none;
  background-repeat: repeat;
  background-size: auto;
  background-attachment: scroll;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  height: 100svh;
  display: flex;
  position: relative;
  overflow: clip;
}

.page-wrapper.tree {
  width: 100vw;
  height: 100vh;
  display: block;
  position: relative;
  overflow: hidden;
}

.body {
  background-color: var(--background);
}

.body.skilltree-body {
  background-color: var(--background);
  background-image: radial-gradient(circle farthest-corner at 50% 50%, #fff0, var(--background)), url('../images/pattern-block.svg');
  background-position: 0 0, 50%;
  background-size: auto, 3%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.home_header {
  grid-column-gap: 4vh;
  grid-row-gap: 4vh;
  flex-flow: column;
  width: 100%;
  padding: 3%;
  display: flex;
}

.big-home-logo {
  width: 100%;
}

.fullscreen {
  display: none;
}

.code_wrap {
  pointer-events: none;
  display: none;
}

.publisher_wrap {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.tag {
  color: var(--grau);
  font-family: Geistmono, Arial, sans-serif;
  font-size: var(--_font-size---tag);
  text-align: left;
  text-transform: uppercase;
  flex: none;
  font-weight: 500;
  line-height: 120%;
}

.tag.is-black {
  color: var(--black);
}

.tag.is-white, .tag.white {
  color: var(--white);
}

.image {
  height: 100%;
}

.home_footer {
  grid-column-gap: 3vh;
  grid-row-gap: 3vh;
  flex-flow: column;
  flex: 1;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 3%;
  display: flex;
}

.home_cta_wrap {
  -webkit-backdrop-filter: blur(.25rem);
  backdrop-filter: blur(.25rem);
  background-color: #05ffdb80;
  padding: 3%;
}

.home_cta_wrap.cyber-shape-card {
  grid-column-gap: 5vh;
  grid-row-gap: 5vh;
  flex-flow: column;
  display: flex;
}

.home_cta_infos {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.home_entry_link {
  color: var(--black);
  letter-spacing: .02em;
  text-transform: uppercase;
  border-top: 1px solid #00000040;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 3vh;
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 100%;
  text-decoration: none;
  display: flex;
}

.button_arrow {
  height: var(--_font-size---tag);
  font-size: var(--_font-size---tag);
}

.footer {
  z-index: 6;
  grid-column-gap: 3vh;
  grid-row-gap: 3vh;
  flex-flow: column;
  flex: none;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  padding: 0% 3% 3%;
  position: relative;
}

.button {
  color: var(--black);
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: var(--_font-size---copy);
  letter-spacing: .02em;
  text-transform: uppercase;
  background-color: #05ffdb80;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.5%;
  font-weight: 600;
  line-height: 100%;
  text-decoration: none;
  display: flex;
}

.button.cyber-shape-button {
  -webkit-backdrop-filter: blur(.25rem);
  backdrop-filter: blur(.25rem);
  cursor: pointer;
  display: flex;
}

.button.cyber-shape-button.popup {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
}

.button.cyber-shape-button.popup.neustart-primary {
  min-width: 15rem;
}

.button.cyber-shape-button.popup.cancel {
  background-color: var(--grau);
  color: var(--white);
}

.button.cyber-shape-button.sdg {
  background-color: #3705ff40;
}

.button.cyber-shape-button.sdg-select {
  background-color: #3305ff40;
  justify-content: center;
  align-items: center;
  padding-top: 3%;
  padding-bottom: 3%;
}

.button.cyber-shape-button.ar {
  background-color: var(--brand-color);
  padding: 1.5rem;
}

.header {
  grid-column-gap: 3vh;
  grid-row-gap: 3vh;
  flex-flow: row;
  flex: none;
  width: 100%;
  padding: 0% 3%;
  display: flex;
}

.header.skilltree {
  z-index: 999;
  position: fixed;
  inset: 0% 0% auto;
}

.main {
  z-index: 5;
  grid-column-gap: 8vw;
  grid-row-gap: 8vw;
  flex-flow: column;
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 2svw 3%;
  overflow: hidden;
}

.main.tree {
  justify-content: flex-start;
  align-items: center;
  padding: 0%;
  display: flex;
  position: relative;
  overflow: visible;
}

.header_logo {
  width: auto;
  height: 2rem;
}

.header_infos {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: row;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.header_shape {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  -webkit-backdrop-filter: blur(.25rem);
  backdrop-filter: blur(.25rem);
  background-color: #ffffff80;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.5% 2%;
  display: grid;
}

.counter_wrap {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.counter-normal {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--black);
  border-radius: .25rem;
  flex: none;
  justify-content: space-between;
  align-items: center;
  padding: .5rem .75rem;
  display: flex;
}

.header_datenpunkt {
  height: 1rem;
  max-height: 100%;
}

.map_tool_icon {
  color: var(--black);
}

.reset-warning-button {
  color: var(--black);
  cursor: pointer;
  background-color: #0000000f;
  border: 1px solid #0000001f;
  border-radius: .25rem;
  padding: .6rem;
  line-height: 100%;
}

.center-box {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.tag_wrap {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.h2 {
  color: var(--black);
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: var(--_font-size---h2);
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  line-height: 120%;
}

.h2.animation_headline {
  text-align: center;
  max-width: 24ch;
}

.h2.headline-pop-up {
  text-align: center;
  max-width: 20ch;
}

.h2.outro, .h2.center {
  text-align: center;
}

.h2.maxw_ch {
  max-width: 14ch;
}

.button-input {
  color: var(--black);
  letter-spacing: .02em;
  text-transform: uppercase;
  background-color: #05ffdb80;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.5%;
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 100%;
  text-decoration: none;
  display: flex;
}

.button-input.cyber-shape-button {
  -webkit-backdrop-filter: blur(.25rem);
  backdrop-filter: blur(.25rem);
  width: auto;
  padding: 1rem;
}

.button-input.cyber-shape-button:active {
  background-color: #ffffff80;
}

.input {
  color: var(--black);
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: var(--_font-size---copy);
  text-align: left;
  background-color: #ffffff80;
  border: 1px solid #0000001f;
  border-radius: .25rem;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  padding: 1.2rem;
  font-weight: 500;
  line-height: 100%;
  display: flex;
}

.input:focus {
  border-color: var(--brand-color);
}

.input.hidden {
  display: none;
}

.username-form {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.username {
  color: var(--grau);
  text-align: left;
  text-transform: uppercase;
  font-family: Geistmono, Arial, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  line-height: 120%;
}

.username.is-black {
  color: var(--black);
}

.username.is-white {
  color: var(--white);
}

.counter-nr {
  color: var(--white);
  text-align: left;
  text-transform: uppercase;
  font-family: Geistmono, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 120%;
}

.counter-nr.is-black {
  color: var(--black);
}

.counter-nr.is-white {
  color: var(--white);
}

.counter-nr-sdg {
  color: var(--white);
  text-align: left;
  text-transform: uppercase;
  font-family: Geistmono, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 120%;
}

.counter-nr-sdg.is-black {
  color: var(--black);
}

.counter-nr-sdg.is-white {
  color: var(--white);
}

.error-msg, .success-msg {
  background-color: #fff0;
  width: 0;
  height: 0;
}

.header_col-copy {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: center;
  align-items: center;
  display: flex;
}

.header_logo_wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.header_name {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: center;
  align-items: center;
  display: flex;
}

.left-column {
  grid-column-gap: 2svw;
  grid-row-gap: 2svw;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  display: flex;
  overflow: scroll;
}

.content-grid-center {
  grid-column-gap: 3vh;
  grid-row-gap: 3vh;
  flex-flow: column;
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 3%;
  display: grid;
  position: relative;
}

.right-column {
  grid-column-gap: 2svw;
  grid-row-gap: 2svw;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  display: flex;
  overflow: scroll;
}

.copy {
  color: var(--black);
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: var(--_font-size---copy);
  letter-spacing: -.015em;
  font-weight: 500;
  line-height: 150%;
}

.copy.secondary {
  color: var(--grau);
}

.copy.secondary.center {
  text-align: center;
}

.copy.secondary.scaledown {
  transform: none;
}

.copy.maxw_ch48 {
  max-width: 48ch;
}

.copy.white {
  color: var(--white);
}

.copy.outro {
  text-align: center;
  max-width: 72ch;
}

.copy.outro.v2 {
  text-align: left;
  max-width: none;
}

.copy.center {
  text-align: center;
}

.split-layout {
  grid-column-gap: 10vw;
  grid-row-gap: 10vw;
  flex-flow: row;
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  display: flex;
  position: relative;
}

.input_wrap {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.h3 {
  color: var(--black);
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: var(--_font-size---h3);
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  line-height: 125%;
}

.h3.white {
  color: var(--white);
}

.username-formblock {
  width: 100%;
}

.username-formblock.hidden {
  display: none;
}

.inner_section {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: scroll;
}

.inner_section.panel {
  background-color: #ffffff80;
  padding: 2svw;
}

.inner_section.panel.cyber-shape-card {
  -webkit-backdrop-filter: blur(.25rem);
  backdrop-filter: blur(.25rem);
  position: relative;
}

.inner_section.panel.cyber-shape-card.code-panel {
  height: auto;
  padding-top: 3%;
  padding-bottom: 3%;
  overflow: clip;
}

.inner_section.panel.cyber-shape-card.image {
  padding: 0%;
}

.inner_section.panel.cyber-shape-card.headline {
  flex: none;
  height: auto;
}

.inner_section.panel.cyber-shape-card.headline.sdg {
  background-color: var(--background);
}

.inner_section.panel.cyber-shape-card.sdg {
  background-color: #fff0;
  padding: 0;
}

.inner_section.panel.cyber-shape-card.outro {
  justify-content: center;
  align-items: center;
}

.inner_section.sdg {
  padding: 1%;
}

.inner_section.sdg.button {
  height: auto;
}

.inner_section.sdg.button_holdersdg {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex: none;
  height: auto;
  margin-top: 2svw;
  padding-top: 0%;
  padding-bottom: 0%;
  position: absolute;
  inset: auto 0% 0%;
  overflow: hidden;
}

.font-size-formblock {
  width: 100%;
}

.font-size-form {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.radio-button {
  background-color: var(--white);
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0;
  margin-left: 0;
  margin-right: .75rem;
}

.radio-button.w--redirected-checked {
  background-color: var(--brand-color);
  border: 3px solid #0000001f;
}

.font-size-selector-1 {
  color: var(--black);
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 125%;
}

.font-size-function {
  display: none;
}

.font-size-selector-2 {
  color: var(--black);
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 125%;
}

.font-size-selector-3 {
  color: var(--black);
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 125%;
}

.tag-headline-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.tag-headline-wrap.center {
  justify-content: center;
  align-items: center;
  width: auto;
}

.tag-headline-wrap.outro {
  justify-content: center;
  align-items: center;
}

.tag-headline-wrap.code {
  text-align: left;
  height: 100%;
}

.tag-headline-wrap.video-text {
  width: 100%;
  max-width: 38ch;
}

.headline-copy-wrap {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.headline-copy-wrap.outro {
  justify-content: center;
  align-items: center;
}

.content {
  grid-column-gap: 2svw;
  grid-row-gap: 2svw;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: 100%;
  display: grid;
  overflow: hidden;
}

.div-block {
  z-index: 7;
  -webkit-backdrop-filter: blur(.25rem);
  backdrop-filter: blur(.25rem);
  background-image: linear-gradient(#ffffffbf, #eaf3f600);
  height: 7%;
  position: fixed;
  inset: 0% 0% auto;
}

.secondary {
  color: var(--grau);
}

.data1 {
  color: #fff0;
  background-image: url('../images/normal-datenpunkt.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.data2 {
  color: #fff0;
  background-image: url('../images/meta-datenpunkt.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.username-welcome, .code-script {
  display: none;
}

.input_sleeve {
  width: 100%;
}

.zoom_outer {
  z-index: 10;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: absolute;
  inset: 0% auto auto 0%;
  overflow: hidden;
}

.skilltree-placeholder-test {
  object-fit: contain;
  width: 100%;
  height: 100%;
  margin: 8%;
  display: none;
}

.zoom_inner {
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  position: absolute;
  inset: 0% auto auto 0%;
}

.div-block-2 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.resetzoom {
  z-index: 99;
  -webkit-backdrop-filter: blur(.5rem);
  backdrop-filter: blur(.5rem);
  color: var(--black);
  background-color: #ffffffbf;
  border: 1px solid #0000001f;
  border-radius: .25rem;
  width: 3rem;
  height: 3rem;
  padding: .6rem;
  line-height: 100%;
  position: static;
  inset: 12% auto auto 3%;
}

.restart_icon {
  color: var(--black);
  width: 1rem;
  height: 1rem;
}

.fullscreen-animation {
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  overflow: scroll;
}

.reward_video {
  aspect-ratio: 1;
  flex: none;
  width: 100%;
  height: auto;
}

.reward_video.cyber-shape-video {
  aspect-ratio: 1;
  background-color: var(--black);
  object-fit: cover;
  background-image: url('../images/Bildschirmfoto-2025-03-12-um-14.43.53.webp');
  background-position: 50%;
  background-size: cover;
  max-width: 30%;
  padding-bottom: 0;
}

.reward_video.cyber-shape-video.hidden {
  display: none;
}

.reward_video.cyber-shape-video.iframe {
  position: relative;
}

.video_headline_wrap {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.bg-video-fade {
  background-color: #15151aa8;
}

.bg-video-fade.cyber-shape-video {
  background-color: #15151a40;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  padding: 5%;
  display: flex;
}

.reward_card {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  -webkit-backdrop-filter: blur(.5rem);
  backdrop-filter: blur(.5rem);
  background-color: #ffffff80;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 80%;
  height: auto;
  padding: 2%;
  display: flex;
}

.reward_card.cyber-shape-card {
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.headline_text_wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.flexbox_sbt_100 {
  grid-column-gap: 4vw;
  grid-row-gap: 4vw;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.reload_reward_video, .counter-nr-script {
  display: none;
}

.counter-nr-content {
  color: var(--white);
  text-align: left;
  text-transform: uppercase;
  font-family: Geistmono, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 120%;
}

.counter-nr-content.is-black {
  color: var(--black);
}

.counter-nr-content.is-white {
  color: var(--white);
}

.code-embed {
  width: 100%;
  height: 100%;
}

.pop-up-overlay {
  z-index: 9999;
  background-color: #15151abf;
  justify-content: center;
  align-items: center;
  width: 100dvw;
  height: 100dvh;
  padding: 3%;
  display: none;
  position: absolute;
  inset: 0%;
}

.pop-up-overlay.restart {
  z-index: 999;
  pointer-events: auto;
  display: none;
}

.pop-up-overlay.intro-tree {
  display: none;
}

.popup-card {
  background-color: var(--white);
  -webkit-backdrop-filter: blur(.5rem);
  backdrop-filter: blur(.5rem);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.skilltree-grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  padding: 8%;
  display: grid;
}

.stskill {
  aspect-ratio: 1;
  cursor: pointer;
  width: 400px;
  height: 400px;
  position: relative;
}

.st-card-active {
  z-index: 5;
  opacity: 0;
  position: absolute;
  inset: 0%;
}

.st-card-inactive {
  width: 100%;
  height: 100%;
  position: relative;
}

.stline, .startpunkt {
  aspect-ratio: 1;
  width: 400px;
  height: 400px;
  position: relative;
}

.st-card-background {
  z-index: -2;
  width: 200%;
  max-width: 200%;
  height: 200%;
  display: block;
  position: absolute;
  inset: 0%;
  overflow: visible;
  transform: translate(-25%, -25%);
}

.skill-script, .zoom-script {
  display: none;
}

.fixed-ui {
  z-index: 999;
  pointer-events: auto;
  position: fixed;
  inset: 0% 0% auto;
}

.ui-tools_wrap {
  z-index: 5;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 1% 3% 0%;
  display: flex;
  position: relative;
  overflow: visible;
}

.ui-tools_wrap.tree {
  justify-content: flex-start;
  align-items: center;
  padding: 0%;
  display: flex;
}

.ui-tools_wrap.footer {
  padding-top: 0%;
  padding-left: 0%;
  padding-right: 0%;
}

.st-card-base {
  position: relative;
  overflow: visible;
}

.st-sdg {
  aspect-ratio: 1;
  cursor: pointer;
  width: 400px;
  height: 400px;
  position: relative;
}

.st-card-locked-overlay {
  z-index: 5;
  opacity: 1;
  position: absolute;
  inset: 0%;
}

.button-script {
  display: none;
}

.zoom-container {
  touch-action: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.zoom-content {
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: absolute;
}

.zoom-page-wrapper {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.zoom-page-wrapper.archive {
  display: none;
}

.skilltree-container {
  position: fixed;
  inset: 0%;
  overflow: hidden;
}

.zoom-in, .zoom-out {
  z-index: 99;
  -webkit-backdrop-filter: blur(.5rem);
  backdrop-filter: blur(.5rem);
  color: var(--black);
  background-color: #ffffffbf;
  border: 1px solid #0000001f;
  border-radius: .25rem;
  width: 3rem;
  height: 3rem;
  padding: .6rem;
  line-height: 100%;
  position: static;
  inset: 12% auto auto 3%;
}

.reset-view {
  z-index: 99;
  -webkit-backdrop-filter: blur(.5rem);
  backdrop-filter: blur(.5rem);
  color: var(--black);
  background-color: #ffffffbf;
  border: 1px solid #0000001f;
  border-radius: .25rem;
  width: 3rem;
  height: 3rem;
  padding: .6rem;
  line-height: 100%;
  display: block;
  position: static;
  inset: 12% auto auto 3%;
}

.skilltree-viewport {
  z-index: 996;
  touch-action: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.skilltree-canvas {
  transform-origin: 0 0;
  will-change: transform;
  position: absolute;
}

.temp-wip-style {
  display: none;
}

.testpage-image, .testpage-image.cyber-shape-video {
  width: 100%;
  height: 100%;
}

.testpage_lightbox {
  filter: saturate(25%);
  width: 100%;
  height: 100%;
}

.testpage_lightbox.sat100 {
  filter: saturate();
}

.testpage_lightbox.sat100.ar {
  min-width: 30%;
  max-width: 18.75rem;
}

.utopia-card {
  aspect-ratio: 1;
  width: 1200px;
  height: 1200px;
  position: relative;
}

.waypoint {
  aspect-ratio: 1;
  width: 400px;
  height: 400px;
  position: relative;
}

.st-card-clicked {
  z-index: 5;
  opacity: 0;
  position: absolute;
  inset: 0%;
}

.st-utopia-small {
  aspect-ratio: 1;
  cursor: pointer;
  width: 400px;
  height: 400px;
  position: relative;
}

.st-card-bg-inactive {
  z-index: -1;
  aspect-ratio: 1;
  width: 180%;
  height: 180%;
  position: absolute;
  inset: 0%;
  overflow: visible;
  transform: translate(0, -22%);
}

.st-card-bg-active {
  z-index: -1;
  aspect-ratio: 1;
  opacity: 0;
  width: 180%;
  height: 180%;
  position: absolute;
  inset: 0%;
  overflow: visible;
  transform: translate(0, -22%);
}

.test-points, .reset-skilltree {
  z-index: 99;
  -webkit-backdrop-filter: blur(.5rem);
  backdrop-filter: blur(.5rem);
  color: var(--black);
  background-color: #ffffffbf;
  border: 1px solid #0000001f;
  border-radius: .25rem;
  width: 3rem;
  height: 3rem;
  padding: .6rem;
  line-height: 100%;
  position: static;
  inset: 12% auto auto 3%;
}

.temp-wip-script {
  display: none;
}

.reveal_animation {
  background-color: var(--background);
  -webkit-backdrop-filter: blur(.5rem);
  backdrop-filter: blur(.5rem);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.reveal_animation.cyber-shape-card {
  z-index: 10;
  background-color: #dee4e6;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 5%;
  display: flex;
}

.vimeo-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
}

.vimeo-video.cyber-shape-video {
  z-index: 4;
}

.reward_animation_wrap {
  aspect-ratio: 1;
  background-color: var(--black);
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 30%;
  height: auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

.reward_animation_wrap.cyber-shape-video {
  aspect-ratio: 1;
  object-fit: cover;
}

.reward_animation_wrap.cyber-shape-video.hidden {
  display: none;
}

.reward_animation_wrap.cyber-shape-video.iframe {
  position: relative;
}

.datapoint {
  object-fit: contain;
  width: 100%;
  height: 50%;
  position: absolute;
}

.points-plus-img, .bg-animation-circle, .bg-animation-circle2 {
  width: 20%;
  position: absolute;
}

.section-resource {
  color: #28135a;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
}

.emoji-rain-btn {
  grid-column-gap: .125em;
  grid-row-gap: .125em;
  cursor: pointer;
  background-color: #fff;
  border-radius: 10em;
  align-items: center;
  padding: .5em .75em .5em 1em;
  font-size: 2.5em;
  font-weight: 700;
  transition-property: all;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(.45, .422, .269, 1.702);
  display: flex;
  transform: scale(1)rotate(.001deg);
}

.emoji-rain-btn:hover {
  transform: scale(1.05)rotate(.001deg);
}

.emoji-rain-btn-img {
  width: 1.5em;
}

.emoji-rain-btn-img.is--rotated {
  transform: rotate(180deg);
}

.single-rain-emoji-image-4 {
  background-image: url('../images/Ökolo-Utopie-Card-Active.svg');
  background-position: 50%;
  background-size: contain;
  width: 100%;
  padding-top: 100%;
}

.single-rain-emoji-image-3 {
  background-image: url('../images/Ökono-Utopie-Card-Active.svg');
  background-position: 50%;
  background-size: contain;
  width: 100%;
  padding-top: 100%;
}

.btn-wrap {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-flow: column;
  align-items: center;
  display: flex;
}

.emoji-rain-container {
  z-index: 150;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  position: fixed;
  inset: 0%;
  overflow: hidden;
}

.single-rain-emoji-image-fire {
  background-image: url('../images/meta-datenpunkt.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  padding-top: 100%;
}

.single-rain-emoji-image-2 {
  background-image: url('../images/Soziale-Utopie-Card-Active.svg');
  background-position: 50%;
  background-size: contain;
  width: 100%;
  padding-top: 100%;
}

.single-rain-emoji {
  will-change: transform;
  width: max(200px, 15vw);
  position: absolute;
}

.single-rain-emoji.hidden {
  opacity: 0;
}

.single-rain-emoji-image-fire-2 {
  background-image: url('../images/icon-3d-fire.png');
  background-position: 50%;
  background-size: cover;
  width: 100%;
  padding-top: 100%;
}

.single-rain-emoji-image-love-2 {
  background-image: url('../images/icon-3d-love.png');
  background-position: 50%;
  background-size: cover;
  width: 100%;
  padding-top: 100%;
}

.st-popup-message {
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 1%;
  padding-left: 3%;
  padding-right: 3%;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.message {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  -webkit-backdrop-filter: blur(.5rem);
  backdrop-filter: blur(.5rem);
  background-color: #ffffffbf;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.25% 1%;
  display: flex;
  position: absolute;
}

.message.firstmessage {
  display: flex;
}

.info-icon {
  color: var(--brand-color);
  object-fit: contain;
  width: 2vw;
  height: 2vw;
  line-height: 100%;
}

.info-text {
  color: var(--black);
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: var(--_font-size---copy);
  letter-spacing: -.015em;
  max-width: 80svw;
  font-weight: 500;
  line-height: 150%;
}

.info-text.secondary {
  color: var(--grau);
}

.info-text.secondary.center {
  text-align: center;
}

.info-text.maxw_ch48 {
  max-width: 48ch;
}

.info-text.white {
  color: var(--white);
}

.messages-script, .skill-script-core {
  display: none;
}

.lightbox-zoom-icon {
  z-index: 99;
  -webkit-backdrop-filter: blur(.5rem);
  backdrop-filter: blur(.5rem);
  pointer-events: none;
  color: var(--black);
  background-color: #05ffdb40;
  border: 1px solid #0000001f;
  border-radius: .25rem;
  width: 3rem;
  height: 3rem;
  padding: .6rem;
  line-height: 100%;
}

.lightbox-zoom-icon-wrap {
  z-index: 5;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.close {
  color: var(--grau);
  cursor: pointer;
  transition: color .2s cubic-bezier(.445, .05, .55, .95);
}

.close:hover {
  color: var(--brand-color);
}

.rich-text-block {
  font-family: Chakrapetch, Arial, sans-serif;
}

.message-copy {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  -webkit-backdrop-filter: blur(.5rem);
  backdrop-filter: blur(.5rem);
  background-color: #ffffffbf;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.25% 1%;
  display: flex;
  position: absolute;
}

.message-copy.firstmessage {
  display: flex;
}

.welcomemessage {
  z-index: 151;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  -webkit-backdrop-filter: blur(.5rem);
  backdrop-filter: blur(.5rem);
  background-color: #ffffffbf;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.25% 1%;
  display: flex;
  position: absolute;
  transform: translate(150%);
}

.welcomemessage.firstmessage {
  display: flex;
}

.sdgmessage {
  z-index: 151;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  background-color: var(--black);
  -webkit-backdrop-filter: blur(.5rem);
  backdrop-filter: blur(.5rem);
  justify-content: flex-start;
  align-items: center;
  padding: 1%;
  display: flex;
  position: absolute;
  transform: translate(150%);
}

.sdgmessage.firstmessage {
  display: flex;
}

.fixed-footer {
  z-index: 998;
  pointer-events: auto;
  position: fixed;
  inset: auto 0% 0%;
  transform: none;
}

.feedback-rain-script {
  display: none;
}

.headline-scroll-wrap {
  grid-column-gap: 4svw;
  grid-row-gap: 4svw;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.sdg-button-text_wrap {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.image-2 {
  background-color: var(--white);
  border-radius: .2em;
  width: 1.5rem;
  height: 1.5rem;
  padding: .15em;
}

.pop-up-overlay-sdg {
  z-index: 9999;
  opacity: 0;
  background-color: #15151abf;
  justify-content: center;
  align-items: center;
  padding: 3%;
  display: none;
  position: absolute;
  inset: 0%;
}

.sdg-main {
  z-index: 5;
  grid-column-gap: 8vw;
  grid-row-gap: 8vw;
  background-color: var(--background);
  flex-flow: column;
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 3%;
  overflow: hidden;
}

.sdg-main.tree {
  justify-content: flex-start;
  align-items: center;
  padding: 0%;
  display: flex;
  position: relative;
  overflow: visible;
}

.content-sdg {
  grid-column-gap: 0svw;
  grid-row-gap: 0svw;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.sdg-headline-grid_wrap {
  grid-column-gap: 2svw;
  grid-row-gap: 2svw;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.sdg-grid {
  grid-column-gap: 1svw;
  grid-row-gap: 1svw;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: 100%;
  display: grid;
}

.sdg-skill {
  flex-flow: column;
  display: flex;
}

.sdg-skill.cyber-shape-card {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: var(--white);
  position: relative;
  overflow: hidden;
}

.sdg-skill-button {
  justify-content: center;
  align-items: center;
  padding: 6%;
  display: flex;
}

.sdg-read-icon {
  z-index: 5;
  pointer-events: none;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 6.5%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.read-more-icon {
  z-index: 99;
  background-color: var(--brand-color);
  -webkit-backdrop-filter: blur(.5rem);
  backdrop-filter: blur(.5rem);
  pointer-events: none;
  color: var(--black);
  border: 1px solid #0000001f;
  border-radius: .25rem;
  width: 2rem;
  height: 2rem;
  padding: .375rem;
  line-height: 100%;
}

.sdg-lightbox {
  width: 100%;
  height: 100%;
}

.sdg-cover {
  filter: saturate(15%);
  width: 100%;
  height: 100%;
}

.sdg-cover.cyber-shape-video {
  width: 100%;
  height: 100%;
}

.button-text {
  grid-column-gap: .375em;
  grid-row-gap: .375em;
  color: var(--black);
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: var(--_font-size---copy);
  letter-spacing: .02em;
  text-transform: uppercase;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1.5%;
  font-weight: 600;
  line-height: 100%;
  text-decoration: none;
  display: flex;
}

.button-text.cyber-shape-button {
  -webkit-backdrop-filter: blur(.25rem);
  backdrop-filter: blur(.25rem);
  cursor: pointer;
}

.button-text.cyber-shape-button.popup {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  padding: 1rem;
}

.button-text.cyber-shape-button.sdg {
  background-color: #3705ff40;
}

.button-text.cyber-shape-button.sdg-select {
  background-color: #3305ff40;
  justify-content: center;
  align-items: center;
  padding-top: 3%;
  padding-bottom: 3%;
}

.select_icon_wrap {
  width: var(--_font-size---h3);
  height: var(--_font-size---h3);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.select_icon {
  flex: none;
  width: 100%;
  height: 100%;
}

.select_icon.check {
  z-index: 5;
  opacity: 0;
  position: absolute;
}

.single-rain-emoji-image-love-3 {
  background-image: url('../images/icon-3d-love.png');
  background-position: 50%;
  background-size: cover;
  width: 100%;
  padding-top: 100%;
}

.select_icon_check {
  opacity: 0;
  flex: none;
  width: 100%;
  height: 100%;
  position: absolute;
}

.select_icon_check.check {
  z-index: 5;
  opacity: 0;
  position: absolute;
}

.sdg-skill-script {
  display: none;
}

.code-box {
  border: 1px solid var(--grau);
  background-color: var(--background);
  border-radius: .5rem;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 3%;
  display: flex;
}

.code {
  color: var(--black);
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: var(--_font-size---h2);
  text-align: center;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  line-height: 120%;
}

.code.animation_headline {
  text-align: center;
  max-width: 24ch;
}

.code.headline-pop-up {
  text-align: center;
  max-width: 20ch;
}

.end-button {
  color: var(--black);
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: var(--_font-size---copy);
  letter-spacing: .02em;
  text-transform: uppercase;
  background-color: #05ffdb80;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.5%;
  font-weight: 600;
  line-height: 100%;
  text-decoration: none;
  display: flex;
}

.end-button.cyber-shape-button {
  -webkit-backdrop-filter: blur(.25rem);
  backdrop-filter: blur(.25rem);
  color: var(--background);
  cursor: pointer;
  background-color: #0d0d0dbf;
  display: flex;
}

.end-button.cyber-shape-button.popup {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  padding: 1rem;
}

.end-button.cyber-shape-button.sdg {
  background-color: #3705ff40;
}

.end-button.cyber-shape-button.sdg-select {
  background-color: #3305ff40;
  justify-content: center;
  align-items: center;
  padding-top: 3%;
  padding-bottom: 3%;
}

.gamecodeloadbutton {
  color: var(--black);
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: var(--_font-size---copy);
  letter-spacing: .02em;
  text-transform: uppercase;
  background-color: #05ffdb80;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: .75em;
  font-weight: 600;
  line-height: 100%;
  text-decoration: none;
  display: flex;
}

.gamecodeloadbutton.cyber-shape-button {
  -webkit-backdrop-filter: blur(.25rem);
  backdrop-filter: blur(.25rem);
  cursor: pointer;
  display: flex;
}

.gamecodeloadbutton.cyber-shape-button.popup {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  padding: 1rem;
}

.gamecodeloadbutton.cyber-shape-button.sdg {
  background-color: #3705ff40;
}

.gamecodeloadbutton.cyber-shape-button.sdg-select {
  background-color: #3305ff40;
  justify-content: center;
  align-items: center;
  padding-top: 3%;
  padding-bottom: 3%;
}

.end-layout {
  grid-column-gap: 2svw;
  grid-row-gap: 2svw;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  display: flex;
}

.admin-layout {
  grid-column-gap: 2svw;
  grid-row-gap: 2svw;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.admin-button {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  color: var(--black);
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: var(--_font-size---copy);
  letter-spacing: .02em;
  text-transform: uppercase;
  background-color: #05ffdb80;
  justify-content: space-between;
  align-items: center;
  width: auto;
  padding: 2em;
  font-weight: 600;
  line-height: 100%;
  text-decoration: none;
  display: flex;
}

.admin-button.cyber-shape-button {
  -webkit-backdrop-filter: blur(.25rem);
  backdrop-filter: blur(.25rem);
  cursor: pointer;
  display: flex;
}

.admin-button.cyber-shape-button.popup {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  padding: 1rem;
}

.admin-button.cyber-shape-button.sdg {
  background-color: #3705ff40;
}

.admin-button.cyber-shape-button.sdg-select {
  background-color: #3305ff40;
  justify-content: center;
  align-items: center;
  padding-top: 3%;
  padding-bottom: 3%;
}

.ar-embed {
  width: 100%;
  height: 500px;
  display: none;
}

.complete-script-v2 {
  display: none;
}

.ar-card {
  grid-column-gap: 5%;
  grid-row-gap: 5%;
  background-color: var(--black);
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 5%;
  display: flex;
}

.ar-card_text {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.image-3 {
  aspect-ratio: 1;
  max-width: 8rem;
}

.video-lightbox {
  filter: saturate(25%);
  width: 100%;
  height: 100%;
}

.lightbox_img_wrap {
  background-color: var(--background);
  width: 100%;
  position: relative;
}

.umap-layout {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 3%;
  display: flex;
}

.umap-layout.center {
  justify-content: center;
  align-items: center;
  width: auto;
}

.umap-layout.outro {
  justify-content: center;
  align-items: center;
}

.umap-layout.code {
  text-align: left;
  height: 100%;
}

.umap-layout.umap-intro {
  justify-content: flex-start;
  align-items: center;
}

.button_wrap_restart {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.tag-image-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.copy-2 {
  color: #15151a;
  letter-spacing: -.015em;
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 150%;
}

.copy-2.white {
  color: #fff;
}

.ar-card-2 {
  grid-column-gap: 5%;
  grid-row-gap: 5%;
  background-color: #15151a;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 5%;
  display: flex;
}

.button_arrow-2 {
  height: .8rem;
  font-size: .8rem;
}

.image-4 {
  aspect-ratio: 1;
  max-width: 8rem;
}

.button-2 {
  color: #15151a;
  letter-spacing: .02em;
  text-transform: uppercase;
  background-color: #05ffdb80;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.5%;
  font-family: Chakrapetch, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 100%;
  text-decoration: none;
  display: flex;
}

.button-2.cyber-shape-button {
  -webkit-backdrop-filter: blur(.25rem);
  backdrop-filter: blur(.25rem);
  cursor: pointer;
  display: flex;
}

.button-2.cyber-shape-button.ar {
  background-color: #05ffdb;
  padding: 1.5rem;
}

.text_video_split {
  grid-column-gap: 5dvw;
  grid-row-gap: 5dvw;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  display: flex;
}

.video_wrap {
  width: 100%;
  height: 100%;
}

.video_wrap.cyber-shape-video {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video_script {
  display: none;
}

.vimeo-lightbox__pause {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.vimeo-lightbox__timeline {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  height: 1.5em;
  display: flex;
  position: relative;
}

.vimeo-lightbox__loading-svg {
  color: #05ffdb00;
  width: 6em;
}

.vimeo-lightbox__player {
  pointer-events: auto;
  color: #efeeec;
  isolation: isolate;
  background-color: #131313;
  border-radius: 1em;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.vimeo-lightbox__dark {
  opacity: .5;
  pointer-events: none;
  background-color: #131313;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  position: absolute;
}

.vimeo-lightbox__volume-up-svg {
  width: 100%;
  position: absolute;
}

.vimeo-lightbox__btn {
  -webkit-backdrop-filter: blur(1em);
  backdrop-filter: blur(1em);
  background-color: #64646433;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 6em;
  height: 6em;
  transition: opacity .3s linear;
  display: flex;
  position: relative;
}

.vimeo-lightbox__volume-mute-svg, .vimeo-lightbox__fullscreen-scale-svg {
  width: 100%;
  position: absolute;
}

.vimeo-lightbox__duration-span {
  text-align: center;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  display: block;
}

.vimeo-lightbox__interface-bottom {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.vimeo-lightbox__play {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.vimeo-lightbox__timeline-input {
  pointer-events: auto;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-color: #0000;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.vimeo-lightbox__calc-wrap {
  width: 100%;
  position: relative;
}

.vimeo-lightbox {
  z-index: 300;
  opacity: 1;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  padding: 5vw;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.vimeo-lightbox__iframe {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
}

.vimeo-lightbox__timeline-progress {
  vertical-align: top;
  -webkit-appearance: none;
  appearance: none;
  height: var(--progress-height);
  border-radius: var(--timeline-rounded-corners);
  color: var(--progress-fill-bg);
  background-color: #0000;
  border: none;
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  overflow: hidden;
}

.vimeo-lightbox__interface {
  pointer-events: none;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: min(2em, 4vw);
  transition-property: opacity;
  transition-duration: .3s;
  transition-timing-function: linear;
  display: flex;
  position: absolute;
}

.vimeo-lightbox__close {
  z-index: 600;
  pointer-events: auto;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  display: flex;
  position: absolute;
  top: 2.5vw;
  right: 2.5vw;
}

.vimeo-lightbox__fullscreen-shrink-svg {
  width: 100%;
  position: absolute;
}

.vimeo-lightbox__placeholder {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  display: block;
  position: absolute;
}

.vimeo-lightbox__bg {
  pointer-events: auto;
  background-color: #131313;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.vimeo-lightbox__calc {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.vimeo-lightbox__close-bar {
  background-color: currentColor;
  width: 1em;
  height: .125em;
  position: absolute;
  transform: rotate(-45deg);
}

.vimeo-lightbox__close-bar.is--duplicate {
  transform: rotate(45deg);
}

.vimeo-lightbox__btn-play-svg {
  width: 40%;
}

.vimeo-lightbox__btn-pause-svg {
  width: 50%;
}

.vimeo-lightbox__loading {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  display: none;
  position: absolute;
}

.vimeo-lightbox__mute {
  cursor: pointer;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  position: relative;
}

.vimeo-lightbox__fullscreen {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  position: relative;
}

.vimeo-lightbox__before {
  padding-top: 62.5%;
}

.vimeo-lightbox__duration {
  flex-shrink: 0;
  width: 2.25em;
}

.placeholder_con {
  pointer-events: auto;
  cursor: pointer;
  width: 100%;
  height: auto;
  position: relative;
}

.placeholder_img {
  width: 100%;
}

.placeholder_play_icon {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.play_icon_wrap {
  -webkit-backdrop-filter: blur(.5rem);
  backdrop-filter: blur(.5rem);
  background-color: #00000059;
  border-radius: 100svw;
  justify-content: center;
  align-items: center;
  width: 6svw;
  height: 6svw;
  display: flex;
}

.play_icon_wrap.light {
  background-color: #ffffff40;
}

.play_icon {
  width: 4svw;
  height: 4svw;
}

.vimeo-lightbox__loading-svg-2 {
  color: #ff4c24;
  width: 6em;
}

.vimeo-lightbox-2 {
  z-index: 300;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  padding: 5vw;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.vimeo-lightbox__loading-2 {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  display: flex;
  position: absolute;
}

.vimeo-player__loading-svg {
  width: 9em;
}

.vimeo-player__loading {
  pointer-events: none;
  color: #00adef00;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  display: flex;
  position: absolute;
}

.vimeo-player__pause {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.vimeo-player__btn-pause-svg {
  width: 50%;
}

.vimeo-player__btn {
  -webkit-backdrop-filter: blur(1em);
  backdrop-filter: blur(1em);
  background-color: #64646433;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 9em;
  height: 9em;
  transition: opacity .3s linear;
  display: flex;
  position: relative;
}

.vimeo-player__play {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.vimeo-player__iframe {
  aspect-ratio: 16 / 9;
  pointer-events: none;
  width: 100%;
  height: 100%;
  padding-top: 56.25%;
  padding-bottom: 0;
  padding-right: 0;
  position: absolute;
}

.vimeo-player__before {
  padding-top: 62.5%;
}

.vimeo-player__placeholder {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  display: block;
  position: absolute;
}

.vimeo-player {
  aspect-ratio: 16 / 9;
  pointer-events: auto;
  color: #efeeec;
  isolation: isolate;
  background-color: #131313;
  justify-content: center;
  align-items: center;
  width: min(60em, 100vw - 1.5em);
  min-width: 100%;
  max-width: 100%;
  height: auto;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translateX(0);
}

.vimeo-player.cyber-shape-video {
  aspect-ratio: 16 / 9;
}

.vimeo-player__dark {
  opacity: .5;
  pointer-events: none;
  background-color: #131313;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  position: absolute;
}

.vimeo-player__btn-play-svg {
  width: 40%;
}

.vimeo-player-2 {
  pointer-events: auto;
  color: #efeeec;
  isolation: isolate;
  background-color: #131313;
  border-radius: 1em;
  justify-content: center;
  align-items: center;
  width: min(60em, 100vw - 1.5em);
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translateX(0);
}

.video-custom {
  aspect-ratio: 16 / 9;
  width: 100%;
  padding-bottom: 0;
  padding-right: 0;
}

.vimeo-player__loading-2 {
  pointer-events: none;
  color: #00adef;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  display: flex;
  position: absolute;
}

.vimeo-player__iframe-2 {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
}

.vimeo-player__placeholder-2 {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  display: block;
  position: absolute;
}

.video_outro_overlay_wrap {
  width: 100%;
  position: relative;
}

.div-block-3 {
  z-index: 5;
  background-color: var(--background);
  width: 100%;
  height: 100%;
  position: absolute;
}

.video_overlay {
  z-index: 5;
  background-color: var(--background);
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.video_outro_logo {
  width: 100%;
  max-width: 30rem;
  padding: 5%;
}

.vimeo-overlay-script {
  display: none;
}

.ar-card-new {
  grid-column-gap: 5%;
  grid-row-gap: 5%;
  background-color: #15151a;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 5%;
  display: flex;
}

.qr-code {
  aspect-ratio: 1;
  max-width: 8rem;
}

@media screen and (max-width: 991px) {
  .footer {
    height: 8svh;
  }

  .button.cyber-shape-button {
    padding: 2.5%;
  }

  .header {
    height: 8svh;
  }

  .main {
    height: 84svh;
  }

  .header_shape {
    padding: 3%;
  }

  .button-input.cyber-shape-button {
    padding: 1rem;
  }

  .left-column {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    width: 100%;
    height: auto;
  }

  .left-column.gameload {
    flex: none;
  }

  .right-column {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    width: 100%;
  }

  .copy.secondary.scaledown {
    transform: scale(.8);
  }

  .split-layout {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    flex-flow: column;
  }

  .inner_section.panel {
    padding: 3svw;
  }

  .tag-headline-wrap {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .content {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: column;
    grid-template-columns: 1fr;
    display: flex;
  }

  .fullscreen-animation {
    flex: none;
    width: 100%;
    height: 100%;
  }

  .reward_video.cyber-shape-video {
    max-width: 100%;
  }

  .video_headline_wrap, .reward_card {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .reward_card.cyber-shape-card {
    grid-column-gap: 5vw;
    grid-row-gap: 5vw;
    flex-flow: column;
    max-width: 26rem;
    padding: 4%;
  }

  .ui-tools_wrap {
    height: 84svh;
    padding-top: 1%;
    padding-bottom: 5%;
  }

  .reveal_animation.cyber-shape-card {
    z-index: 10;
  }

  .reward_animation_wrap.cyber-shape-video {
    max-width: 100%;
  }

  .lightbox-zoom-icon-wrap {
    z-index: 5;
  }

  .headline-scroll-wrap {
    grid-column-gap: 6svw;
    grid-row-gap: 6svw;
  }

  .sdg-main {
    height: 84svh;
    padding-top: 5%;
    padding-bottom: 5%;
  }

  .content-sdg {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: column;
    grid-template-columns: 1fr;
    display: flex;
  }

  .sdg-read-icon {
    z-index: 5;
  }

  .button-text.cyber-shape-button, .end-button.cyber-shape-button, .gamecodeloadbutton.cyber-shape-button, .admin-button.cyber-shape-button {
    padding: 2.5%;
  }

  .umap-layout {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .button-2.cyber-shape-button {
    padding: 2.5%;
  }
}

@media screen and (max-width: 767px) {
  .ui-tools_wrap {
    padding-top: 3%;
  }
}

#w-node-_700db64b-8d4f-969e-9f15-99f413a1f89f-8de88947 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-b36a851a-8649-88ae-0122-d0c285686f29-8de88947 {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-_3e10281e-945d-2251-f3fe-f0d978c10e45-78c10e3e {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-d180d50e-031d-e7e1-7147-6f17175b89b5-55b2f867 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-d180d50e-031d-e7e1-7147-6f17175b89cc-55b2f867 {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-_015645e8-b7c0-9fd7-616e-96a059aeea3d-99d3f0b5 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_015645e8-b7c0-9fd7-616e-96a059aeea4c-99d3f0b5 {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec64633e-4fcc53eb {
  grid-area: 1 / 6 / 2 / 7;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646340-4fcc53eb {
  grid-area: 1 / 7 / 2 / 8;
}

#w-node-c8ebc4e5-2f15-1eec-9bc5-a3464ac51912-4fcc53eb {
  grid-area: 16 / 1 / 17 / 2;
}

#w-node-_8cc722bd-0367-dc09-5add-045b60990507-4fcc53eb {
  grid-area: 16 / 13 / 17 / 14;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646342-4fcc53eb {
  grid-area: 1 / 8 / 2 / 9;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646344-4fcc53eb {
  grid-area: 2 / 6 / 3 / 7;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646347-4fcc53eb {
  grid-area: 1 / 3 / 2 / 4;
}

#w-node-_47ba0dc0-2536-1e2b-c442-92f228263873-4fcc53eb {
  grid-area: 8 / 5 / 9 / 6;
}

#w-node-_05e42dff-0063-1a76-3792-2db60e6d8dc4-4fcc53eb {
  grid-area: 8 / 9 / 9 / 10;
}

#w-node-d4096b09-0ade-d930-a053-bd37fb20a3fd-4fcc53eb {
  grid-area: 6 / 7 / 7 / 8;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec64634a-4fcc53eb {
  grid-area: 8 / 1 / 9 / 2;
}

#w-node-_9c4950ac-6a3e-8671-7e9d-783edac3d8a8-4fcc53eb {
  grid-area: 12 / 7 / 13 / 8;
}

#w-node-_330b0c72-58c9-7b07-ebba-1b6de91c66b3-4fcc53eb {
  grid-area: 8 / 13 / 9 / 14;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec64634f-4fcc53eb {
  grid-area: 1 / 11 / 2 / 12;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646352-4fcc53eb {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-c9e3e81d-6f80-5f2c-ce4a-1e8728cabb2e-4fcc53eb {
  grid-area: 10 / 1 / 11 / 2;
}

#w-node-_3afd288c-e901-9345-26dc-f31e68e9fdf9-4fcc53eb {
  grid-area: 10 / 13 / 11 / 14;
}

#w-node-_0350e149-28b6-8f7d-7c95-12ccbace27a6-4fcc53eb {
  grid-area: 12 / 5 / 13 / 6;
}

#w-node-d8cabceb-6ef3-2530-4612-080e3980f2a6-4fcc53eb {
  grid-area: 12 / 9 / 13 / 10;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646355-4fcc53eb {
  grid-area: 1 / 13 / 2 / 14;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646358-4fcc53eb {
  grid-area: 2 / 7 / 3 / 8;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec64635c-4fcc53eb {
  grid-area: 2 / 8 / 3 / 9;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec64635f-4fcc53eb {
  grid-area: 3 / 7 / 4 / 8;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646366-4fcc53eb {
  grid-area: 4 / 4 / 5 / 5;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646369-4fcc53eb {
  grid-area: 4 / 6 / 5 / 7;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec64636c-4fcc53eb {
  grid-area: 4 / 8 / 5 / 9;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec64636f-4fcc53eb {
  grid-area: 4 / 9 / 5 / 10;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646372-4fcc53eb {
  grid-area: 3 / 4 / 4 / 5;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646375-4fcc53eb {
  grid-area: 3 / 10 / 4 / 11;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646378-4fcc53eb {
  grid-area: 2 / 4 / 3 / 5;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec64637b-4fcc53eb {
  grid-area: 2 / 1 / 3 / 2;
}

#w-node-_6ebb854b-8e91-447f-74cd-eb04bfe79845-4fcc53eb {
  grid-area: 2 / 13 / 3 / 14;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec64637e-4fcc53eb {
  grid-area: 3 / 1 / 4 / 2;
}

#w-node-ed7484ef-edce-483e-8214-7684255588ec-4fcc53eb {
  grid-area: 3 / 13 / 4 / 14;
}

#w-node-_46239983-f751-3097-70ae-c6db9628897a-4fcc53eb {
  grid-area: 4 / 13 / 5 / 14;
}

#w-node-f8513773-dc1c-5aa9-3e33-65fa44561aed-4fcc53eb {
  grid-area: 6 / 13 / 7 / 14;
}

#w-node-b93a429f-c280-6b27-b3b7-831ff7cf5263-4fcc53eb {
  grid-area: 5 / 13 / 6 / 14;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646381-4fcc53eb {
  grid-area: 4 / 1 / 5 / 2;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646384-4fcc53eb {
  grid-area: 5 / 1 / 6 / 2;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646387-4fcc53eb {
  grid-area: 6 / 1 / 7 / 2;
}

#w-node-_7aabaef2-2f34-b439-218c-142626afb923-4fcc53eb {
  grid-area: 7 / 3 / 8 / 4;
}

#w-node-_3f48e189-a887-1ffd-5caa-9d66d8870724-4fcc53eb {
  grid-area: 7 / 11 / 8 / 12;
}

#w-node-_06754cb9-8efa-ec61-0553-e8db9bc43e50-4fcc53eb {
  grid-area: 9 / 5 / 10 / 6;
}

#w-node-_033cc403-4bc2-35c0-a4e8-699a12482d26-4fcc53eb {
  grid-area: 9 / 9 / 10 / 10;
}

#w-node-ba51fc6d-04d4-0a32-19c8-56b71bad3c5a-4fcc53eb {
  grid-area: 10 / 5 / 11 / 6;
}

#w-node-be353fa0-3b5c-927e-ff93-fc8548a7c5a2-4fcc53eb {
  grid-area: 10 / 9 / 11 / 10;
}

#w-node-_46fbd159-64f9-41a1-a9c2-259b31ffb720-4fcc53eb {
  grid-area: 14 / 9 / 15 / 10;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec64638a-4fcc53eb {
  grid-area: 7 / 1 / 8 / 2;
}

#w-node-_0dad86b0-0b49-8832-6424-13b53fb9d5e4-4fcc53eb {
  grid-area: 11 / 7 / 12 / 8;
}

#w-node-d80ab40d-484d-18bf-a081-e886d2bccd62-4fcc53eb {
  grid-area: 13 / 11 / 14 / 12;
}

#w-node-b369dd69-76f1-1628-0c48-d9f1f854c584-4fcc53eb {
  grid-area: 12 / 11 / 13 / 12;
}

#w-node-_77e1f2ce-3eb0-4caa-6009-4b35d4c1423d-4fcc53eb {
  grid-area: 6 / 3 / 7 / 4;
}

#w-node-bb9e05be-52fc-8f9c-ff0e-be1b4afdfae1-4fcc53eb {
  grid-area: 6 / 11 / 7 / 12;
}

#w-node-_54772b7e-040b-562f-61d2-905862af5e9a-4fcc53eb {
  grid-area: 12 / 12 / 13 / 13;
}

#w-node-b8235797-bd3f-8813-a63a-b6bfef69d973-4fcc53eb {
  grid-area: 15 / 9 / 16 / 10;
}

#w-node-_8236f589-960c-014f-2519-7bba87c800d3-4fcc53eb {
  grid-area: 7 / 13 / 8 / 14;
}

#w-node-_27614397-b1bf-b0c1-4f1a-391a46bd60d7-4fcc53eb {
  grid-area: 8 / 2 / 9 / 3;
}

#w-node-_3a3a7f3f-81f7-3330-9660-9d2ebc54702c-4fcc53eb {
  grid-area: 8 / 10 / 9 / 11;
}

#w-node-_376b47dc-c4f1-43cf-27f4-d17385d68ed0-4fcc53eb {
  grid-area: 8 / 4 / 9 / 5;
}

#w-node-ac5fdb2d-7e46-d44d-2a92-f5823ce99682-4fcc53eb {
  grid-area: 8 / 12 / 9 / 13;
}

#w-node-_8d8d978e-bd4b-34e9-8186-2d636a0a25c4-4fcc53eb {
  grid-area: 7 / 6 / 10 / 9;
}

#w-node-c0960d9c-83b4-e697-9cb6-bfb9b7bf88c6-4fcc53eb {
  grid-area: 8 / 3 / 9 / 4;
}

#w-node-_4975f7d9-36b7-2044-a2d0-c8e834118147-4fcc53eb {
  grid-area: 8 / 11 / 9 / 12;
}

#w-node-_69a81003-3552-bd43-2e4e-5198fc770ff3-4fcc53eb {
  grid-area: 10 / 7 / 11 / 8;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec64638d-4fcc53eb {
  grid-area: 2 / 10 / 3 / 11;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646390-4fcc53eb {
  grid-area: 1 / 4 / 2 / 5;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646393-4fcc53eb {
  grid-area: 1 / 10 / 2 / 11;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646396-4fcc53eb {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_21883097-e8c7-7ff9-7247-ed1d9d656d7e-4fcc53eb {
  grid-area: 16 / 2 / 17 / 3;
}

#w-node-_17670092-b9e7-d498-3db9-5c8b4ecc2718-4fcc53eb {
  grid-area: 14 / 2 / 15 / 3;
}

#w-node-_9d403eda-47b1-dd5d-7232-7ee51b024436-4fcc53eb {
  grid-area: 16 / 12 / 17 / 13;
}

#w-node-_1de0fb12-43b0-e6b9-6c84-f40dffb95735-4fcc53eb {
  grid-area: 16 / 10 / 17 / 11;
}

#w-node-_9a83252f-4ebb-f7fa-15ff-2a93b519bc6b-4fcc53eb {
  grid-area: 14 / 4 / 15 / 5;
}

#w-node-_1ff710fe-06de-4477-d06f-9700e0cdc298-4fcc53eb {
  grid-area: 12 / 6 / 13 / 7;
}

#w-node-_94ae48d5-e327-3a51-4998-0ac63ed18502-4fcc53eb {
  grid-area: 12 / 8 / 13 / 9;
}

#w-node-_21b6b30e-250b-f084-e972-96cafae43912-4fcc53eb {
  grid-area: 15 / 1 / 16 / 2;
}

#w-node-c712bbbf-e294-0a96-0171-a25479b20d3d-4fcc53eb {
  grid-area: 15 / 3 / 16 / 4;
}

#w-node-_6f1ca0ba-b3b2-5177-51e3-15dff8aa6f7e-4fcc53eb {
  grid-area: 15 / 13 / 16 / 14;
}

#w-node-a06e563e-7191-97b7-d51f-ab6bcc001311-4fcc53eb {
  grid-area: 15 / 11 / 16 / 12;
}

#w-node-_9e51e6f5-0714-dd9d-0909-3be8f8206845-4fcc53eb {
  grid-area: 13 / 13 / 14 / 14;
}

#w-node-_452fc1e0-c184-2ab8-335c-e1a21f5d5eee-4fcc53eb {
  grid-area: 11 / 13 / 12 / 14;
}

#w-node-_385f4080-b0c6-3fbb-a940-fd110364c0aa-4fcc53eb {
  grid-area: 9 / 13 / 10 / 14;
}

#w-node-bf87c761-5992-f57e-285d-1b109ba96098-4fcc53eb {
  grid-area: 13 / 1 / 14 / 2;
}

#w-node-_8484fc5f-e1f8-a666-d264-31ee881ff471-4fcc53eb {
  grid-area: 13 / 5 / 14 / 6;
}

#w-node-e882ef61-8289-2909-eb91-01325a8a5d86-4fcc53eb {
  grid-area: 13 / 9 / 14 / 10;
}

#w-node-_7a45a6c4-1a57-178d-3659-403d6ec8275f-4fcc53eb {
  grid-area: 11 / 1 / 12 / 2;
}

#w-node-_0befe894-0b10-ab99-3cc2-fd1ac3031fc7-4fcc53eb {
  grid-area: 9 / 1 / 10 / 2;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec646399-4fcc53eb {
  grid-area: 1 / 12 / 2 / 13;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec64639c-4fcc53eb {
  grid-area: 4 / 5 / 5 / 6;
}

#w-node-befe7020-4fd7-6f7e-3a4c-1eff3ec030c4-4fcc53eb {
  grid-area: 6 / 4 / 7 / 5;
}

#w-node-_14f3515d-da59-d323-2c55-452c9599ca0b-4fcc53eb {
  grid-area: 6 / 5 / 7 / 6;
}

#w-node-_7ba17ab4-f3c3-1d5e-2512-ecfbd7769b89-4fcc53eb {
  grid-area: 6 / 9 / 7 / 10;
}

#w-node-a38607a1-376c-b76b-f267-d5c7aef871f7-4fcc53eb {
  grid-area: 6 / 10 / 7 / 11;
}

#w-node-fae7e013-374f-2f3f-4d0e-8307f324ed52-4fcc53eb {
  grid-area: 10 / 6 / 11 / 7;
}

#w-node-_2ec1f03e-5767-d4c7-2a49-64c5d5e2d75e-4fcc53eb {
  grid-area: 10 / 8 / 11 / 9;
}

#w-node-_136a81d9-5e82-ffe1-4039-8713d6c50f90-4fcc53eb {
  grid-area: 6 / 6 / 7 / 7;
}

#w-node-e880f6cd-3e95-ad83-99ce-d0943e3b51ab-4fcc53eb {
  grid-area: 6 / 8 / 7 / 9;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec64639f-4fcc53eb {
  grid-area: 4 / 7 / 5 / 8;
}

#w-node-_51fc106a-0f92-aec1-7bf1-10899606fa35-4fcc53eb {
  grid-area: 14 / 1 / 15 / 2;
}

#w-node-b95af809-07cb-6af2-e4f3-73e3cb7fa2d2-4fcc53eb {
  grid-area: 12 / 1 / 13 / 2;
}

#w-node-_5ff2bc96-8264-64f9-62e7-8b24039226dd-4fcc53eb {
  grid-area: 16 / 3 / 17 / 4;
}

#w-node-_2c94f921-5329-ba12-a3bb-a5149562dd1f-4fcc53eb {
  grid-area: 14 / 3 / 15 / 4;
}

#w-node-_0ef1f08f-1d6a-c449-470c-ca169a0484bc-4fcc53eb {
  grid-area: 14 / 5 / 15 / 6;
}

#w-node-_6215c822-0ad6-53fb-c663-98dc8a1cc024-4fcc53eb {
  grid-area: 16 / 9 / 17 / 10;
}

#w-node-aa2fa36e-1b76-8f40-2c10-7af58581c167-4fcc53eb {
  grid-area: 16 / 11 / 17 / 12;
}

#w-node-_8f93fd07-4516-79ef-f5a7-df24244b4eeb-4fcc53eb {
  grid-area: 14 / 11 / 15 / 12;
}

#w-node-dc6d80ea-8c84-ed4d-8d27-94e046bbc672-4fcc53eb {
  grid-area: 14 / 13 / 15 / 14;
}

#w-node-fd3b2563-3e43-8c82-62de-035ede6551a5-4fcc53eb {
  grid-area: 12 / 13 / 13 / 14;
}

#w-node-f3e66b32-2b71-dd4b-b2e8-25f9ec6463a2-4fcc53eb {
  grid-area: 4 / 10 / 5 / 11;
}

#w-node-b36a851a-8649-88ae-0122-d0c285686f22-a8a5c5a9 {
  grid-area: span 1 / span 10 / span 1 / span 10;
}

#w-node-_8dec48bc-a6f8-10e2-a124-edede0b2e0c5-cde8a513 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_8dec48bc-a6f8-10e2-a124-edede0b2e0d1-cde8a513 {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-f8a382ee-eaa1-96e3-73d7-a5a5351b2557-78ba282b {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-f8a382ee-eaa1-96e3-73d7-a5a5351b2568-78ba282b {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-_53884b88-bb40-fb82-4f63-be53a8b7bbf7-403aed91 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_53884b88-bb40-fb82-4f63-be53a8b7bc08-403aed91 {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-_3f1907af-5de7-540c-c1c2-7ba50cf991ad-075d1080 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_3f1907af-5de7-540c-c1c2-7ba50cf991be-075d1080 {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-f62619d0-ce0d-f4f8-11c5-b000c01ec185-c763c01b {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-f62619d0-ce0d-f4f8-11c5-b000c01ec196-c763c01b {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-f7b4377a-589b-919e-9409-151e6e4b1d3a-33e7c4c7 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-f7b4377a-589b-919e-9409-151e6e4b1d4b-33e7c4c7 {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-cbd31790-54d0-d71f-e94b-1f9fa58422cf-b6ba0e36 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-cbd31790-54d0-d71f-e94b-1f9fa58422e0-b6ba0e36 {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-bd311be2-6e72-3d5c-4176-4052d1e87392-9974352e {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-bd311be2-6e72-3d5c-4176-4052d1e8739c-9974352e {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-d180d50e-031d-e7e1-7147-6f17175b89b5-9c84a52e {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-d180d50e-031d-e7e1-7147-6f17175b89cc-9c84a52e {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

@media screen and (max-width: 991px) {
  #w-node-_700db64b-8d4f-969e-9f15-99f413a1f89f-8de88947, #w-node-b36a851a-8649-88ae-0122-d0c285686f29-8de88947, #w-node-d180d50e-031d-e7e1-7147-6f17175b89b5-55b2f867, #w-node-d180d50e-031d-e7e1-7147-6f17175b89cc-55b2f867, #w-node-_015645e8-b7c0-9fd7-616e-96a059aeea3d-99d3f0b5, #w-node-_015645e8-b7c0-9fd7-616e-96a059aeea4c-99d3f0b5, #w-node-b36a851a-8649-88ae-0122-d0c285686f22-a8a5c5a9, #w-node-_8dec48bc-a6f8-10e2-a124-edede0b2e0c5-cde8a513, #w-node-_8dec48bc-a6f8-10e2-a124-edede0b2e0d1-cde8a513, #w-node-f8a382ee-eaa1-96e3-73d7-a5a5351b2557-78ba282b, #w-node-f8a382ee-eaa1-96e3-73d7-a5a5351b2568-78ba282b, #w-node-_53884b88-bb40-fb82-4f63-be53a8b7bbf7-403aed91, #w-node-_53884b88-bb40-fb82-4f63-be53a8b7bc08-403aed91, #w-node-_3f1907af-5de7-540c-c1c2-7ba50cf991ad-075d1080, #w-node-_3f1907af-5de7-540c-c1c2-7ba50cf991be-075d1080, #w-node-f62619d0-ce0d-f4f8-11c5-b000c01ec185-c763c01b, #w-node-f62619d0-ce0d-f4f8-11c5-b000c01ec196-c763c01b, #w-node-f7b4377a-589b-919e-9409-151e6e4b1d3a-33e7c4c7, #w-node-f7b4377a-589b-919e-9409-151e6e4b1d4b-33e7c4c7, #w-node-cbd31790-54d0-d71f-e94b-1f9fa58422cf-b6ba0e36, #w-node-cbd31790-54d0-d71f-e94b-1f9fa58422e0-b6ba0e36, #w-node-bd311be2-6e72-3d5c-4176-4052d1e87392-9974352e, #w-node-bd311be2-6e72-3d5c-4176-4052d1e8739c-9974352e, #w-node-d180d50e-031d-e7e1-7147-6f17175b89b5-9c84a52e, #w-node-d180d50e-031d-e7e1-7147-6f17175b89cc-9c84a52e {
    grid-column: span 1 / span 1;
  }
}


@font-face {
  font-family: 'Chakrapetch';
  src: url('../fonts/ChakraPetch-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakrapetch';
  src: url('../fonts/ChakraPetch-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Chakrapetch';
  src: url('../fonts/ChakraPetch-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakrapetch';
  src: url('../fonts/ChakraPetch-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakrapetch';
  src: url('../fonts/ChakraPetch-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakrapetch';
  src: url('../fonts/ChakraPetch-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Chakrapetch';
  src: url('../fonts/ChakraPetch-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Chakrapetch';
  src: url('../fonts/ChakraPetch-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Chakrapetch';
  src: url('../fonts/ChakraPetch-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakrapetch';
  src: url('../fonts/ChakraPetch-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}