@charset "UTF-8";/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html,
body {
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-size: 1.6rem;
  height: 100%;
  overflow: hidden;
  font-family: "source-sans-3-latin-400-normal";
}
html {
  font-size: 62.5%;
}
.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
  text-transform: none;
}
a[class],
button[class] {
  font-family: "source-sans-3-latin-600-normal" !important;
}
* {
  box-sizing: border-box;
}@font-face {
  font-family: "geologica-latin-800-normal";
  src: url("/gamification/build/fonts/geologica-latin-800-normal-4WmRc75O.woff2") format("woff2"), url("/gamification/build/fonts/geologica-latin-800-normal-syoK-H4Q.woff") format("woff");
  font-weight: 800;
}
@font-face {
  font-family: "geologica-latin-600-normal";
  src: url("/gamification/build/fonts/geologica-latin-600-normal-CRd38TRc.woff2") format("woff2"), url("/gamification/build/fonts/geologica-latin-600-normal-CgJV1eGI.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "leckerli-one-latin-400-normal";
  src: url("/gamification/build/fonts/leckerli-one-latin-400-normal-DmKhK9SU.woff2") format("woff2"), url("/gamification/build/fonts/leckerli-one-latin-400-normal-DmJwCGdG.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "source-sans-3-latin-400-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-400-normal-CWExqDl9.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-400-normal-S5MsD0GB.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "source-sans-3-latin-600-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-600-normal-C9Agc4O9.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-600-normal-K9hBQwnb.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "source-sans-3-latin-700-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-700-normal-DKezV3YD.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-700-normal-DTntTtfE.woff") format("woff");
  font-weight: 700;
}
.Loading {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.App {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  transition: background-color 1s ease;
  will-change: background-color;
  z-index: 0;
}
.App--FadeIn {
  opacity: 0;
  animation: fade-in 1.25s 0s normal forwards ease;
}
.App--Green {
  background-color: #106939;
}
.App--Green.App--Light {
  background-color: #E9EEEB;
}
.App--Orange {
  background-color: #E37222;
}
.App--Orange.App--Light {
  background-color: #FCF1E9;
}
.App--Blue {
  background-color: #00194B;
}
.App--Blue.App--Light {
  background-color: #E5E8ED;
}
.App--Purple {
  background-color: #3B005E;
}
.App--Purple.App--Light {
  background-color: #EBE5EF;
}
.App--Petroleum {
  background-color: #006589;
}
.App--Petroleum.App--Light {
  background-color: #ECF8FC;
}
.App--Neutral {
  background-color: #006589;
}
.App--Neutral.App--Light {
  background-color: #F6F9FA;
}
.App--Red {
  background-color: #710049;
}
.App--Red.App--Light {
  background-color: #EFE3EB;
}
.App__Modal {
  width: 100vw;
  height: 0;
  background-color: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background-color 0.5s ease;
}
.App__Modal--Show {
  width: 100vw;
  height: 100vh;
  z-index: 3;
  top: 0;
  left: 0;
  position: fixed;
  pointer-events: all;
  background-color: rgba(0, 0, 0, 0.5);
}
.App__InnerModal {
  padding: 32px 16px 16px 16px;
  width: 100%;
  max-height: 100%;
  margin: 0 auto;
  z-index: 1;
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
  will-change: transform, opacity;
}
.App__Modal--Show .App__InnerModal {
  opacity: 1;
}
@media (min-width: 768px) {
  .App__Modal--Show .App__InnerModal {
    max-width: 800px;
  }
}
@media (min-width: 768px) {
  .App__InnerModal {
    max-width: 800px;
    padding: 92px 16px 16px 16px;
  }
}
.App__MenuRow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.App__MenuLogo {
  display: none;
}
@media (min-width: 768px) {
  .App__MenuLogo {
    object-fit: contain;
    display: block;
    width: 100%;
    max-width: 224px;
    opacity: 1;
    transition: opacity 0.5s ease;
  }
  .App--Light .App__MenuLogo {
    opacity: 0;
  }
}
.App__Menu {
  position: absolute;
  width: 100%;
  top: 0;
  padding: 12px 16px;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateY(-80px);
  opacity: 0;
  animation: load-menu-animation 2s 1.5s normal forwards ease;
  transition: background-color 1s ease;
}
.App--Green .App__Menu {
  background-color: #106939;
}
.App--Green .App__Menu--Bordered {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.App--Orange .App__Menu {
  background-color: #E37222;
}
.App--Orange .App__Menu--Bordered {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.App--Blue .App__Menu {
  background-color: #00194B;
}
.App--Blue .App__Menu--Bordered {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.App--Purple .App__Menu {
  background-color: #3B005E;
}
.App--Purple .App__Menu--Bordered {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.App--Petroleum .App__Menu {
  background-color: #006589;
}
.App--Petroleum .App__Menu--Bordered {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.App--Neutral .App__Menu {
  background-color: #006589;
}
.App--Neutral .App__Menu--Bordered {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.App--Red .App__Menu {
  background-color: #710049;
}
.App--Red .App__Menu--Bordered {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.App--Light.App--Green .App__Menu {
  background-color: #E9EEEB;
}
.App--Light.App--Orange .App__Menu {
  background-color: #FCF1E9;
}
.App--Light.App--Blue .App__Menu {
  background-color: #E5E8ED;
}
.App--Light.App--Purple .App__Menu {
  background-color: #EBE5EF;
}
.App--Light.App--Petroleum .App__Menu {
  background-color: #ECF8FC;
}
.App--Light.App--Neutral .App__Menu {
  background-color: #F6F9FA;
}
.App--Light.App--Red .App__Menu {
  background-color: #EFE3EB;
}
@media (min-width: 768px) {
  .App__Menu {
    padding: 32px 40px;
  }
}
.App__ProgressBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
}
@media (min-width: 768px) {
  .App__ProgressBar {
    height: 4px;
  }
}
.App--Green .App__ProgressBar {
  background-color: rgba(16, 105, 57, 0.075);
}
.App--Orange .App__ProgressBar {
  background-color: rgba(227, 114, 34, 0.075);
}
.App--Blue .App__ProgressBar {
  background-color: rgba(0, 25, 75, 0.075);
}
.App--Purple .App__ProgressBar {
  background-color: rgba(59, 0, 94, 0.075);
}
.App--Petroleum .App__ProgressBar {
  background-color: rgba(0, 101, 137, 0.075);
}
.App--Neutral .App__ProgressBar {
  background-color: rgba(0, 101, 137, 0.075);
}
.App--Red .App__ProgressBar {
  background-color: rgba(113, 0, 73, 0.075);
}
.App__ProgressBar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: var(--progress-width);
  display: inline-block;
  will-change: width;
  transition: width 0.5s ease;
}
.App--Green .App__ProgressBar::after {
  background-color: #106939;
}
.App--Orange .App__ProgressBar::after {
  background-color: #E37222;
}
.App--Blue .App__ProgressBar::after {
  background-color: #00194B;
}
.App--Purple .App__ProgressBar::after {
  background-color: #3B005E;
}
.App--Petroleum .App__ProgressBar::after {
  background-color: #006589;
}
.App--Neutral .App__ProgressBar::after {
  background-color: #006589;
}
.App--Red .App__ProgressBar::after {
  background-color: #710049;
}
@media (min-width: 768px) {
  .App__ProgressBar::after {
    height: 4px;
  }
}
.App__Logo {
  position: absolute;
  top: 8px;
  transform: translate(-50%, 0) scale(1);
  width: 100%;
  opacity: 0;
  transition: top 1s ease, transform 1s ease, opacity 0.75s ease;
  will-change: top, transform;
  z-index: 1;
}
@media (min-width: 768px) {
  .App__Logo {
    width: auto;
    opacity: 1;
    left: 50%;
    transform: translate(-50%, 0) scale(1);
  }
}
.App__Logo--Small {
  display: none;
}
@media (min-width: 768px) {
  .App__Logo--Small {
    display: block;
    transform: translate(-50%, 0) scale(0.5);
  }
}
.App__Container--Welcome .App__Logo {
  z-index: 0;
  left: 50%;
  top: 112px;
  opacity: 0;
  animation: logo-load-screen-animation 2.5s 1s normal forwards ease;
}
@media (min-width: 768px) {
  .App__Container--Welcome .App__Logo {
    top: 164px;
  }
}
.App__Screen {
  display: none;
  opacity: 0;
  pointer-events: none;
  max-height: calc(100vh - 64px);
}
@media (min-width: 768px) {
  .App__Screen {
    display: none;
  }
}
@media (min-width: 768px) {
  .App__Screen--SlideFromRight {
    transform: translate(50%, 0);
    opacity: 0;
    animation: slide-screen-from-right-animation 0.5s normal forwards ease;
  }
}
@media (min-width: 768px) {
  .App__Screen--SlideFromLeft {
    transform: translate(-50%, 0);
    opacity: 0;
    animation: slide-screen-from-left-animation 0.5s normal forwards ease;
  }
}
.App__Screen--Active {
  width: auto;
  height: auto;
  display: inline;
  pointer-events: initial;
  transition: opacity 1s ease, transform 0.5s ease;
  will-change: opacity, transform;
  opacity: 1;
}
@media (min-width: 768px) {
  .App__Screen--Active {
    display: block;
    transform: translate(0, 0);
  }
}
.App__Container--Welcome .App__Screen--Active {
  opacity: 0;
  display: block;
  transform: translateY(56px);
  animation: load-screen-animation 2.5s 1s normal forwards ease;
}
@media (min-width: 768px) {
  .App__Screen {
    max-height: calc(100vh - 105px);
  }
}
.App__Illustration {
  position: absolute;
  mix-blend-mode: luminosity;
  opacity: 1;
  transition: opacity 1s ease;
  will-change: opacity;
  z-index: -1;
}
.App--Light .App__Illustration {
  opacity: 0.1;
}
.App--Final .App__Illustration {
  display: none;
}
@media (min-width: 768px) {
  .App--Final .App__Illustration {
    display: none;
  }
}
.App__Illustration--TopRight {
  display: none;
}
.App__Illustration--TopLeft {
  display: none;
}
.App__Illustration--BottomRight {
  display: none;
}
.App__Illustration--BottomLeft {
  display: none;
}
.App__Illustration--FinalBottomRight {
  display: none;
}
.App__Illustration--FinalBottomLeft {
  display: none;
}
.App__Illustration--TopRight.App__Illustration--Bus {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--TopRight.App__Illustration--Bus {
    display: block;
    animation: bus-load-top-right-animation 2.5s 1s normal forwards ease;
    right: 5%;
    top: 25%;
  }
}
.App--Final .App__Illustration--TopRight.App__Illustration--Bus {
  display: none;
}
.App__Illustration--TopLeft.App__Illustration--Bus {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--TopLeft.App__Illustration--Bus {
    display: block;
    animation: bus-load-top-left-animation 2.5s 1s normal forwards ease;
    left: 5%;
    top: 15%;
  }
}
.App--Final .App__Illustration--TopLeft.App__Illustration--Bus {
  display: none;
}
.App__Illustration--BottomRight.App__Illustration--Bus {
  right: 0;
  bottom: 0;
  animation: bus-load-bottom-right-animation--mobile 2.5s 1s normal forwards ease;
  transform-origin: right 100%;
  transform: scale(1);
  opacity: 1;
  display: block;
}
.App--Start .App__Illustration--BottomRight.App__Illustration--Bus {
  opacity: 1;
}
.App--Light .App__Illustration--BottomRight.App__Illustration--Bus {
  opacity: 0;
}
@media (min-width: 768px) {
  .App__Illustration--BottomRight.App__Illustration--Bus {
    animation: bus-load-bottom-right-animation--desktop 2.5s 1s normal forwards ease;
    transform: scale(1.25);
    opacity: 1;
    right: 0;
    bottom: 0;
  }
  .App--Light .App__Illustration--BottomRight.App__Illustration--Bus {
    opacity: 0.1;
  }
}
.App--Final .App__Illustration--BottomRight.App__Illustration--Bus {
  display: none;
}
.App__Illustration--BottomLeft.App__Illustration--Bus {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--BottomLeft.App__Illustration--Bus {
    animation: bus-load-bottom-left-animation 2.5s 1s normal forwards ease;
    display: block;
    transform: scale(1);
    left: 0%;
    bottom: 10%;
  }
}
.App--Final .App__Illustration--BottomLeft.App__Illustration--Bus {
  display: none;
}
.App__Illustration--FinalBottomRight.App__Illustration--Bus {
  right: 0;
  bottom: 0;
  animation: bus-load-final-bottom-right-animation 2.5s 0s normal forwards ease;
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--FinalBottomRight.App__Illustration--Bus {
    display: none;
    bottom: -5%;
    right: -5%;
  }
  .App--Final .App__Illustration--FinalBottomRight.App__Illustration--Bus {
    display: block;
  }
}
.App__Illustration--FinalBottomLeft.App__Illustration--Bus {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--FinalBottomLeft.App__Illustration--Bus {
    animation: bus-load-final-bottom-left-animation 2.5s 0s normal forwards ease;
    display: none;
    bottom: -5%;
    left: -5%;
  }
  .App--Final .App__Illustration--FinalBottomLeft.App__Illustration--Bus {
    display: block;
  }
}
.App__Illustration--TopRight.App__Illustration--Neutral {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--TopRight.App__Illustration--Neutral {
    display: block;
    animation: neutral-load-top-right-animation 2.5s 1s normal forwards ease;
    right: 5%;
    top: 45%;
  }
}
.App--Final .App__Illustration--TopRight.App__Illustration--Neutral {
  display: none;
}
.App__Illustration--TopLeft.App__Illustration--Neutral {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--TopLeft.App__Illustration--Neutral {
    display: block;
    animation: neutral-load-top-left-animation 2.5s 1s normal forwards ease;
    left: 5%;
    top: 15%;
  }
}
.App--Final .App__Illustration--TopLeft.App__Illustration--Neutral {
  display: none;
}
.App__Illustration--BottomRight.App__Illustration--Neutral {
  right: 0;
  bottom: 0;
  display: none;
  animation: neutral-load-bottom-right-animation--mobile 2.5s 1s normal forwards ease;
  transform-origin: right 100%;
  transform: scale(1);
  opacity: 1;
}
.App--Start .App__Illustration--BottomRight.App__Illustration--Neutral {
  opacity: 1;
}
.App--Light .App__Illustration--BottomRight.App__Illustration--Neutral {
  opacity: 0;
}
@media (min-width: 768px) {
  .App__Illustration--BottomRight.App__Illustration--Neutral {
    animation: neutral-load-bottom-right-animation--desktop 2.5s 1s normal forwards ease;
    display: block;
    transform: scale(1.25);
    opacity: 1;
    right: 0;
    bottom: 0;
  }
  .App--Light .App__Illustration--BottomRight.App__Illustration--Neutral {
    opacity: 0.1;
  }
}
.App--Final .App__Illustration--BottomRight.App__Illustration--Neutral {
  display: none;
}
.App__Illustration--BottomLeft.App__Illustration--Neutral {
  animation: neutral-load-bottom-left-animation 2.5s 1s normal forwards ease;
  display: block;
  transform: scale(1.25);
  left: -5%;
  bottom: 0%;
  transform-origin: 0 100%;
}
.App--Final .App__Illustration--BottomLeft.App__Illustration--Neutral {
  display: none;
}
.App__Illustration--FinalBottomRight.App__Illustration--Neutral {
  right: 0;
  bottom: 0;
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--FinalBottomRight.App__Illustration--Neutral {
    animation: neutral-load-final-bottom-right-animation 2.5s 0s normal forwards ease;
    opacity: 0;
    display: none;
    bottom: 0px;
    right: 0px;
  }
  .App--Final .App__Illustration--FinalBottomRight.App__Illustration--Neutral {
    display: block;
  }
}
.App__Illustration--FinalBottomLeft.App__Illustration--Neutral {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--FinalBottomLeft.App__Illustration--Neutral {
    animation: neutral-load-final-bottom-left-animation 2.5s 0s normal forwards ease;
    opacity: 0;
    display: none;
    bottom: -24px;
    left: -24px;
  }
  .App--Final .App__Illustration--FinalBottomLeft.App__Illustration--Neutral {
    display: block;
  }
}
.App__Illustration--TopRight.App__Illustration--Logistics {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--TopRight.App__Illustration--Logistics {
    display: block;
    animation: logistics-load-top-right-animation 2.5s 1s normal forwards ease;
    right: -3%;
    top: 35%;
  }
}
.App--Final .App__Illustration--TopRight.App__Illustration--Logistics {
  display: none;
}
.App__Illustration--TopLeft.App__Illustration--Logistics {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--TopLeft.App__Illustration--Logistics {
    display: block;
    animation: logistics-load-top-left-animation 2.5s 1s normal forwards ease;
    left: -7%;
    top: 15%;
  }
}
.App--Final .App__Illustration--TopLeft.App__Illustration--Logistics {
  display: none;
}
.App__Illustration--BottomRight.App__Illustration--Logistics {
  display: none;
}
.App--Start .App__Illustration--BottomRight.App__Illustration--Logistics {
  opacity: 1;
}
.App--Light .App__Illustration--BottomRight.App__Illustration--Logistics {
  opacity: 0;
}
@media (min-width: 768px) {
  .App__Illustration--BottomRight.App__Illustration--Logistics {
    display: block;
    animation: logistics-load-bottom-right-animation--desktop 2.5s 1s normal forwards ease;
    transform: scale(1.15);
    opacity: 1;
    right: -200px;
    bottom: -50px;
  }
  .App--Light .App__Illustration--BottomRight.App__Illustration--Logistics {
    opacity: 0.1;
  }
}
.App--Final .App__Illustration--BottomRight.App__Illustration--Logistics {
  display: none;
}
.App__Illustration--BottomLeft.App__Illustration--Logistics {
  display: block;
  animation: logistics-load-bottom-left-animation--mobile 2.5s 1s normal forwards ease;
  scale: 0.75;
  transform-origin: bottom left;
  left: -500px;
  bottom: 0;
}
@media (min-width: 768px) {
  .App__Illustration--BottomLeft.App__Illustration--Logistics {
    animation: logistics-load-bottom-left-animation 3.5s 1s normal forwards ease;
    left: -500px;
    bottom: 0;
  }
}
.App--Final .App__Illustration--BottomLeft.App__Illustration--Logistics {
  display: none;
}
.App__Illustration--FinalBottomRight.App__Illustration--Logistics {
  right: 0;
  bottom: 0;
  animation: logistics-load-final-bottom-right-animation 2.5s 0s normal forwards ease;
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--FinalBottomRight.App__Illustration--Logistics {
    display: none;
    bottom: -32px;
    right: -32px;
  }
  .App--Final .App__Illustration--FinalBottomRight.App__Illustration--Logistics {
    display: block;
  }
}
.App__Illustration--FinalBottomLeft.App__Illustration--Logistics {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--FinalBottomLeft.App__Illustration--Logistics {
    animation: logistics-load-final-bottom-left-animation 2.5s 0s normal forwards ease;
    display: none;
    bottom: -32px;
    left: -300px;
  }
  .App--Final .App__Illustration--FinalBottomLeft.App__Illustration--Logistics {
    display: block;
  }
}
.App__Illustration--TopRight.App__Illustration--Fly {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--TopRight.App__Illustration--Fly {
    display: block;
    animation: fly-load-top-right-animation 2.5s 1s normal forwards ease;
    right: -175px;
    top: 35%;
  }
}
.App--Final .App__Illustration--TopRight.App__Illustration--Fly {
  display: none;
}
.App__Illustration--TopLeft.App__Illustration--Fly {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--TopLeft.App__Illustration--Fly {
    display: block;
    animation: fly-load-top-left-animation 2.5s 1s normal forwards ease;
    left: -150px;
    top: 18%;
  }
}
.App--Final .App__Illustration--TopLeft.App__Illustration--Fly {
  display: none;
}
.App__Illustration--BottomRight.App__Illustration--Fly {
  display: none;
}
.App--Start .App__Illustration--BottomRight.App__Illustration--Fly {
  opacity: 1;
}
.App--Light .App__Illustration--BottomRight.App__Illustration--Fly {
  opacity: 0;
}
@media (min-width: 768px) {
  .App__Illustration--BottomRight.App__Illustration--Fly {
    display: block;
    animation: fly-load-bottom-right-animation--desktop 2.5s 1s normal forwards ease;
    transform: scale(1.15);
    opacity: 1;
    right: -50px;
    bottom: 0;
  }
  .App--Light .App__Illustration--BottomRight.App__Illustration--Fly {
    opacity: 0.1;
  }
}
.App--Final .App__Illustration--BottomRight.App__Illustration--Fly {
  display: none;
}
.App__Illustration--BottomLeft.App__Illustration--Fly {
  display: block;
  animation: fly-load-bottom-left-animation--mobile 3.5s 1s normal forwards ease;
  scale: 0.75;
  transform-origin: bottom left;
  transform: rotate(-8deg);
  left: -300px;
  bottom: 0px;
}
.App--Light .App__Illustration--BottomLeft.App__Illustration--Fly {
  opacity: 0;
}
@media (min-width: 768px) {
  .App__Illustration--BottomLeft.App__Illustration--Fly {
    scale: 1;
    animation: fly-load-bottom-left-animation 4.5s 1s normal forwards ease;
  }
  .App--Light .App__Illustration--BottomLeft.App__Illustration--Fly {
    opacity: 0.1;
  }
}
.App--Final .App__Illustration--BottomLeft.App__Illustration--Fly {
  display: none;
}
.App__Illustration--BottomLeftExtra.App__Illustration--Fly {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--BottomLeftExtra.App__Illustration--Fly {
    display: block;
    left: -50px;
    bottom: -100px;
    animation: fly-load-bottom-left-animation-extra 4.5s 1s normal forwards ease;
  }
}
.App--Light .App__Illustration--BottomLeftExtra.App__Illustration--Fly {
  opacity: 0.1;
}
.App--Final .App__Illustration--BottomLeftExtra.App__Illustration--Fly {
  display: none;
}
.App__Illustration--FinalBottomRight.App__Illustration--Fly {
  right: 0;
  bottom: 0;
  animation: fly-load-final-bottom-right-animation 2.5s 0s normal forwards ease;
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--FinalBottomRight.App__Illustration--Fly {
    display: none;
    bottom: -32px;
    right: -432px;
  }
  .App--Final .App__Illustration--FinalBottomRight.App__Illustration--Fly {
    display: block;
  }
}
.App__Illustration--FinalBottomLeft.App__Illustration--Fly {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--FinalBottomLeft.App__Illustration--Fly {
    animation: fly-load-final-bottom-left-animation 2.5s 0s normal forwards ease;
    display: none;
    bottom: -32px;
    left: -82px;
  }
  .App--Final .App__Illustration--FinalBottomLeft.App__Illustration--Fly {
    display: block;
  }
}
.App__Illustration--TopRight.App__Illustration--Shipping {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--TopRight.App__Illustration--Shipping {
    display: block;
    animation: fly-load-top-right-animation 2.5s 1s normal forwards ease;
    right: -175px;
    top: 35%;
  }
}
.App--Final .App__Illustration--TopRight.App__Illustration--Shipping {
  display: none;
}
.App__Illustration--TopLeft.App__Illustration--Shipping {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--TopLeft.App__Illustration--Shipping {
    display: block;
    animation: fly-load-top-left-animation 2.5s 1s normal forwards ease;
    left: -150px;
    top: 18%;
  }
}
.App--Final .App__Illustration--TopLeft.App__Illustration--Shipping {
  display: none;
}
.App__Illustration--BottomRight.App__Illustration--Shipping {
  display: none;
}
.App--Start .App__Illustration--BottomRight.App__Illustration--Shipping {
  opacity: 1;
}
.App--Light .App__Illustration--BottomRight.App__Illustration--Shipping {
  opacity: 0;
}
@media (min-width: 768px) {
  .App__Illustration--BottomRight.App__Illustration--Shipping {
    display: block;
    animation: shipping-load-bottom-right-animation--desktop 2.5s 1s normal forwards ease;
    opacity: 1;
    right: -50px;
    bottom: 0;
  }
  .App--Light .App__Illustration--BottomRight.App__Illustration--Shipping {
    opacity: 0.1;
  }
}
.App--Final .App__Illustration--BottomRight.App__Illustration--Shipping {
  display: none;
}
.App__Illustration--BottomLeft.App__Illustration--Shipping {
  display: block;
  animation: shipping-load-bottom-left-animation--mobile 3.5s 1s normal forwards ease-out;
  scale: 0.75;
  transform-origin: bottom left;
  left: -300px;
  bottom: -15px;
}
.App--Light .App__Illustration--BottomLeft.App__Illustration--Shipping {
  opacity: 0;
}
@media (min-width: 768px) {
  .App__Illustration--BottomLeft.App__Illustration--Shipping {
    scale: 1;
    left: -300px;
    bottom: 0;
    animation: shipping-load-bottom-left-animation 4.5s 1s normal forwards ease-out;
  }
  .App--Light .App__Illustration--BottomLeft.App__Illustration--Shipping {
    opacity: 0.1;
  }
}
.App--Final .App__Illustration--BottomLeft.App__Illustration--Shipping {
  display: none;
}
.App__Illustration--BottomLeftExtra.App__Illustration--Shipping {
  display: block;
  left: 0;
  bottom: 0;
  animation: shipping-load-bottom-left-animation-extra--mobile 3.5s 1s normal forwards ease;
}
@media (min-width: 768px) {
  .App__Illustration--BottomLeftExtra.App__Illustration--Shipping {
    left: -50px;
    bottom: -15px;
    animation: shipping-load-bottom-left-animation-extra 4.5s 1s normal forwards ease;
  }
}
.App--Light .App__Illustration--BottomLeftExtra.App__Illustration--Shipping {
  opacity: 0;
}
@media (min-width: 768px) {
  .App--Light .App__Illustration--BottomLeftExtra.App__Illustration--Shipping {
    opacity: 0.1;
  }
}
.App--Final .App__Illustration--BottomLeftExtra.App__Illustration--Shipping {
  display: none;
}
.App__Illustration--FinalBottomRight.App__Illustration--Shipping {
  right: 0;
  bottom: 0;
  animation: shipping-load-final-bottom-right-animation 2.5s 0s normal forwards ease;
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--FinalBottomRight.App__Illustration--Shipping {
    display: none;
    right: -40px;
    bottom: -250px;
  }
  .App--Final .App__Illustration--FinalBottomRight.App__Illustration--Shipping {
    display: block;
  }
}
.App__Illustration--FinalBottomLeft.App__Illustration--Shipping {
  display: none;
}
@media (min-width: 768px) {
  .App__Illustration--FinalBottomLeft.App__Illustration--Shipping {
    animation: shipping-load-final-bottom-left-animation 2.5s 0s normal forwards ease;
    display: none;
    bottom: -32px;
    left: -104px;
  }
  .App--Final .App__Illustration--FinalBottomLeft.App__Illustration--Shipping {
    display: block;
  }
}
.App__Curve {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -2;
  height: 25%;
  -webkit-mask: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 1441 366"><path d="m105 619 1844-4S1561 69 1268 10C974-48 892 161 684 161c-130 0-192-50-321-85a646 646 0 0 0-342 4c-106 28-150 128-257 161 0 0 2 249 126 323 94 55 215 55 215 55Z" /></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  transition: opacity 0.5s ease;
  will-change: opacity;
  opacity: 1;
  animation: load-curve-animation 2.5s 1s normal forwards ease;
  transform: scale(2);
  opacity: 1;
}
@media (min-width: 768px) {
  .App__Curve {
    height: 50%;
  }
}
.App--Final .App__Curve {
  opacity: 0 !important;
}
.App--Light .App__Curve {
  opacity: 0;
}
.App--Green .App__Curve {
  background: rgb(17.6859504132, 116.0640495868, 63.0061983471);
}
.App--Orange .App__Curve {
  background: rgb(228.4337349398, 121.2198795181, 45.3162650602);
}
.App--Blue .App__Curve {
  background: rgb(0, 29.25, 87.75);
}
.App--Purple .App__Curve {
  background: rgb(67.0026595745, 0, 106.75);
}
.App--Petroleum .App__Curve {
  background: rgb(0, 110.3996350365, 149.75);
}
.App--Neutral .App__Curve {
  background: #000000;
  opacity: 0.3;
}
.App--Light.App--Neutral .App__Curve {
  opacity: 0;
}
.App--Red .App__Curve {
  background: rgb(125.75, 0, 81.2367256637);
}
@media (min-width: 768px) {
  .App--Light .App__Curve {
    opacity: 0.05;
  }
}
.App__Curve--Fly {
  -webkit-mask: url('data:image/svg+xml;utf8,<svg width="2184" height="370" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M807.74 107.5a136.24 136.24 0 0 0-72.42-20.47c-20.29 0-40.4 4.22-59.77 12.04C639.68 38.8 573.75 0 492.03 0 365.11 0 243.57 93.55 203.2 215.72 113.27 215.9 27.22 282.94 0 369.98h310.8c-7.75 18.41-10.01 39.52-5.5 61.96 1.2 5.8 2.82 11.49 4.77 17.1v-.1h56.96c-.72 2.65-1.4 5.32-2.03 8h579.1c.08.37.18.73.27 1.1v-.09H1768a216.93 216.93 0 0 0-18.03-46h428.9v.08c1.42-4.66 2.59-9.4 3.46-14.2 10.44-59.52-29.14-107.82-88.36-107.82-15.32 0-30.48 3.23-44.7 9.07-17.59-71.58-79.25-121.78-161.4-121.78-11.94 0-23.8 1.1-35.5 3.15-29.69-68.03-96.53-113.42-181.83-113.42-68.66 0-135.63 29.39-187.09 76.32-32.81-20.55-69.15-32.32-106.06-32.32-34.61 0-65.66 10.36-91.42 28.61-72.84-64.44-172.35-105.6-274.58-105.6-83.98 0-154.99 27.79-203.65 73.45Z" fill="%23127640"/></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  transform: scale(1.15);
  left: -20%;
  width: 140%;
  bottom: -100px;
  animation: load-fly-curve-animation 2.5s 1s normal forwards ease;
}
.App--Light .App__Curve--Fly {
  opacity: 0;
}
@media (min-width: 768px) {
  .App__Curve--Fly {
    height: 33%;
  }
}
.App__Curve--Shipping {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg width='1580' height='329' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M0 140s7-22 53-53c45-30 158-73 263-50 105 24 179 50 284 42 106-8 178-67 314-77 135-10 245 27 350 43 109 16 195 22 316-5v289H0V140Z' fill='%230073BF'/></svg>") no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  transform: scale(1.15);
  bottom: -100px;
  animation: load-fly-curve-animation 2.5s 1s normal forwards ease;
}
.App--Light .App__Curve--Shipping {
  opacity: 0;
}
@media (min-width: 768px) {
  .App__Curve--Shipping {
    height: 33%;
  }
}
.App__Screens {
  position: absolute;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 64px - 72px);
  top: 64px;
  padding: 32px 16px 16px 16px;
}
.App__Container--Welcome .App__Screens {
  padding-top: 140px;
  height: calc(100vh - 64px);
  max-height: calc(100vh - 64px);
}
@media (min-width: 768px) {
  .App__Container--Welcome .App__Screens {
    padding-top: 172px;
  }
}
.App--Final .App__Screens {
  height: calc(100vh - 64px);
  max-height: calc(100vh - 64px);
}
@media (min-width: 768px) {
  .App--Final .App__Screens {
    height: calc(100vh - 105px);
    max-height: calc(100vh - 105px);
  }
}
@media (min-width: 768px) {
  .App__Screens {
    height: calc(100vh - 105px);
    max-height: calc(100vh - 105px);
    top: 105px;
    padding: 56px 16px 32px 16px;
  }
}
@keyframes slide-screen-from-right-animation {
  0% {
    transform: translate(50%, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0%, 0);
    opacity: 1;
  }
}
@keyframes slide-screen-from-left-animation {
  0% {
    transform: translate(-50%, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0%, 0);
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes load-menu-animation {
  0% {
    opacity: 0;
    transform: translateY(-80px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes load-fly-curve-animation {
  0% {
    bottom: -100px;
    transform: scale(1.15);
  }
  100% {
    bottom: 0;
    transform: scale(1);
  }
}
@keyframes load-curve-animation {
  0% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes logo-load-screen-animation {
  0% {
    opacity: 0;
    transform: translate(-50%, 56px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes load-screen-animation {
  0% {
    opacity: 0;
    transform: translateY(56px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bus-load-final-bottom-right-animation {
  0% {
    bottom: -5%;
    right: -5%;
  }
  100% {
    bottom: 0%;
    right: 0%;
  }
}
@keyframes bus-load-final-bottom-left-animation {
  0% {
    bottom: -5%;
    left: -5%;
  }
  100% {
    left: 0%;
    bottom: 0%;
  }
}
@keyframes bus-load-bottom-right-animation--mobile {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.65);
  }
}
@keyframes bus-load-bottom-left-animation {
  0% {
    left: 0%;
    bottom: 10%;
    transform: scale(1);
  }
  100% {
    bottom: 5%;
    left: -5%;
    transform: scale(0.75);
  }
}
@keyframes bus-load-bottom-right-animation--desktop {
  0% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bus-load-top-left-animation {
  0% {
    left: 5%;
  }
  100% {
    left: -5%;
  }
}
@keyframes bus-load-top-right-animation {
  0% {
    right: 5%;
  }
  100% {
    right: 0%;
  }
}
@keyframes neutral-load-final-bottom-right-animation {
  0% {
    opacity: 0;
    bottom: 0px;
    right: 0px;
  }
  100% {
    opacity: 0.6;
    bottom: -32px;
    right: -32px;
  }
}
@keyframes neutral-load-final-bottom-left-animation {
  0% {
    opacity: 0;
    bottom: -24px;
    left: -24px;
  }
  100% {
    opacity: 0.6;
    left: -80px;
    bottom: -72px;
  }
}
@keyframes neutral-load-bottom-right-animation--mobile {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.65);
  }
}
@keyframes neutral-load-bottom-left-animation {
  0% {
    transform: scale(1.25);
    left: -5%;
    bottom: 0%;
  }
  100% {
    bottom: 0%;
    left: 0%;
    transform: scale(0.75);
  }
}
@keyframes neutral-load-bottom-right-animation--desktop {
  0% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes neutral-load-top-left-animation {
  0% {
    left: 5%;
  }
  100% {
    left: -5%;
  }
}
@keyframes neutral-load-top-right-animation {
  0% {
    top: 45%;
    right: 5%;
  }
  100% {
    top: 45%;
    right: 0%;
  }
}
@keyframes logistics-load-final-bottom-right-animation {
  0% {
    opacity: 0;
    bottom: -32px;
    right: -32px;
  }
  100% {
    opacity: 0.6;
    bottom: 0;
    right: 0;
  }
}
@keyframes logistics-load-final-bottom-left-animation {
  0% {
    opacity: 0;
    bottom: -32px;
    left: -300px;
  }
  100% {
    opacity: 0.6;
    bottom: 0;
    left: -230px;
  }
}
@keyframes logistics-load-bottom-left-animation--mobile {
  0% {
    left: -500px;
  }
  100% {
    left: -250px;
  }
}
@keyframes logistics-load-bottom-left-animation {
  0% {
    left: -500px;
  }
  100% {
    left: -200px;
  }
}
@keyframes logistics-load-bottom-right-animation--desktop {
  0% {
    transform: scale(1.15);
    right: -200px;
    bottom: -50px;
  }
  100% {
    transform: scale(1);
    right: -65px;
    bottom: 0;
  }
}
@keyframes logistics-load-top-left-animation {
  0% {
    left: -7%;
  }
  100% {
    left: -1%;
  }
}
@keyframes logistics-load-top-right-animation {
  0% {
    right: -3%;
  }
  100% {
    right: -1%;
  }
}
@keyframes fly-load-final-bottom-right-animation {
  0% {
    opacity: 0;
    bottom: -32px;
    right: -432px;
  }
  100% {
    opacity: 0.6;
    bottom: 0;
    right: -400px;
  }
}
@keyframes fly-load-final-bottom-left-animation {
  0% {
    opacity: 0;
    bottom: -32px;
    left: -150px;
  }
  100% {
    opacity: 0.6;
    bottom: 0px;
    left: -100px;
  }
}
@keyframes fly-load-bottom-left-animation--mobile {
  0% {
    transform: rotate(-8deg);
    left: -300px;
    bottom: 0;
  }
  100% {
    transform: rotate(0deg);
    left: -75px;
    bottom: 75px;
  }
}
@keyframes fly-load-bottom-left-animation {
  0% {
    transform: rotate(-8deg);
    left: -300px;
    bottom: 0;
  }
  100% {
    transform: rotate(0deg);
    left: -100px;
    bottom: 115px;
  }
}
@keyframes fly-load-bottom-right-animation--desktop {
  0% {
    transform: scale(1.15);
    right: -50px;
    bottom: 0;
  }
  100% {
    transform: scale(1);
    right: 0;
    bottom: 0;
  }
}
@keyframes fly-load-bottom-left-animation-extra {
  0% {
    left: -50px;
    bottom: -100px;
  }
  100% {
    left: 0;
    bottom: 0;
  }
}
@keyframes fly-load-top-left-animation {
  0% {
    left: -150px;
  }
  100% {
    left: 25px;
  }
}
@keyframes fly-load-top-right-animation {
  0% {
    right: -175px;
  }
  100% {
    right: -25px;
  }
}
@keyframes shipping-load-final-bottom-right-animation {
  0% {
    opacity: 0;
    right: -40px;
    bottom: -250px;
  }
  100% {
    opacity: 0.6;
    right: -20px;
    bottom: -230px;
  }
}
@keyframes shipping-load-final-bottom-left-animation {
  0% {
    opacity: 0;
    bottom: -32px;
    left: -104px;
  }
  100% {
    opacity: 0.6;
    left: -72px;
    bottom: 0;
  }
}
@keyframes shipping-load-bottom-left-animation--mobile {
  0% {
    left: -300px;
    bottom: 0;
  }
  25% {
    bottom: -15px;
  }
  50% {
    bottom: 0;
  }
  75% {
    bottom: -15px;
  }
  100% {
    left: -50px;
    bottom: 0;
  }
}
@keyframes shipping-load-bottom-left-animation {
  0% {
    left: -300px;
    bottom: 0;
  }
  25% {
    bottom: -15px;
  }
  50% {
    bottom: 0;
  }
  75% {
    bottom: -15px;
  }
  100% {
    left: -100px;
    bottom: 0;
  }
}
@keyframes shipping-load-bottom-right-animation--desktop {
  0% {
    right: -50px;
    bottom: 0;
  }
  100% {
    right: 0;
    bottom: 0;
  }
}
@keyframes shipping-load-bottom-left-animation-extra--mobile {
  0% {
    bottom: -25px;
  }
  25% {
    bottom: 0;
  }
  50% {
    bottom: -25px;
  }
  75% {
    bottom: 0;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes shipping-load-bottom-left-animation-extra {
  0% {
    transform: rotate(2deg);
    left: -50px;
    bottom: -15px;
  }
  25% {
    transform: rotate(2deg);
    bottom: -5px;
  }
  50% {
    transform: rotate(-2deg);
    bottom: -15px;
  }
  100% {
    transform: rotate(0deg);
    left: 0;
    bottom: 0px;
  }
}
@keyframes shipping-load-top-left-animation {
  0% {
    left: -150px;
  }
  100% {
    left: 25px;
  }
}
@keyframes shipping-load-top-right-animation {
  0% {
    right: -175px;
  }
  100% {
    right: -25px;
  }
}@font-face {
  font-family: "geologica-latin-800-normal";
  src: url("/gamification/build/fonts/geologica-latin-800-normal-4WmRc75O.woff2") format("woff2"), url("/gamification/build/fonts/geologica-latin-800-normal-syoK-H4Q.woff") format("woff");
  font-weight: 800;
}
@font-face {
  font-family: "geologica-latin-600-normal";
  src: url("/gamification/build/fonts/geologica-latin-600-normal-CRd38TRc.woff2") format("woff2"), url("/gamification/build/fonts/geologica-latin-600-normal-CgJV1eGI.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "leckerli-one-latin-400-normal";
  src: url("/gamification/build/fonts/leckerli-one-latin-400-normal-DmKhK9SU.woff2") format("woff2"), url("/gamification/build/fonts/leckerli-one-latin-400-normal-DmJwCGdG.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "source-sans-3-latin-400-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-400-normal-CWExqDl9.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-400-normal-S5MsD0GB.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "source-sans-3-latin-600-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-600-normal-C9Agc4O9.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-600-normal-K9hBQwnb.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "source-sans-3-latin-700-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-700-normal-DKezV3YD.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-700-normal-DTntTtfE.woff") format("woff");
  font-weight: 700;
}
.Logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
}
.Logo--SmallLeft {
  align-items: flex-start;
  justify-content: flex-start;
}
.Logo__FirstLine {
  position: relative;
  font-size: 2.7rem;
  text-transform: uppercase;
  font-family: "geologica-latin-800-normal";
  text-shadow: -2px -2px 0 #000000, 0 -2px 0 #000000, 2px -2px 0 #000000, 2px 0 0 #000000, 2px 2px 0 #000000, 0 2px 0 #000000, -2px 2px 0 #000000, -2px 0 0 #000000;
}
.Logo__FirstLine:before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: -4px;
}
.Logo__FirstLine:after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: -4px;
  font-family: "geologica-latin-800-normal";
  background: linear-gradient(#e37222 33%, #ebe5ef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.Logo--Orange .Logo__FirstLine:after {
  /* Some strange bug that requires these attributes to be declared again... */
  background: -webkit-linear-gradient(#3DB7E4 33%, #ECF8FC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
@media (min-width: 768px) {
  .Logo__FirstLine {
    font-size: 3.8rem;
  }
}
.Logo__SecondLine {
  position: relative;
  margin-top: -12px;
  font-size: 2.7rem;
  text-transform: lowercase;
  font-family: "leckerli-one-latin-400-normal";
  text-shadow: -1px -1px 0 #000000, 0 -1px 0 #000000, 1px -1px 0 #000000, 1px 0 0 #000000, 1px 1px 0 #000000, 0 1px 0 #000000, -1px 1px 0 #000000, -1px 0 0 #000000;
}
.Logo__SecondLine:before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: -4px;
}
.Logo__SecondLine:after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: -4px;
  font-family: "leckerli-one-latin-400-normal";
  background: linear-gradient(#e37222 33%, #ebe5ef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.Logo--Orange .Logo__SecondLine:after {
  /* Some strange bug that requires these attributes to be declared again... */
  background: -webkit-linear-gradient(#3DB7E4 33%, #ECF8FC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
@media (min-width: 768px) {
  .Logo__SecondLine {
    margin-top: -18px;
    font-size: 3.8rem;
  }
}@font-face {
  font-family: "geologica-latin-800-normal";
  src: url("/gamification/build/fonts/geologica-latin-800-normal-4WmRc75O.woff2") format("woff2"), url("/gamification/build/fonts/geologica-latin-800-normal-syoK-H4Q.woff") format("woff");
  font-weight: 800;
}
@font-face {
  font-family: "geologica-latin-600-normal";
  src: url("/gamification/build/fonts/geologica-latin-600-normal-CRd38TRc.woff2") format("woff2"), url("/gamification/build/fonts/geologica-latin-600-normal-CgJV1eGI.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "leckerli-one-latin-400-normal";
  src: url("/gamification/build/fonts/leckerli-one-latin-400-normal-DmKhK9SU.woff2") format("woff2"), url("/gamification/build/fonts/leckerli-one-latin-400-normal-DmJwCGdG.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "source-sans-3-latin-400-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-400-normal-CWExqDl9.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-400-normal-S5MsD0GB.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "source-sans-3-latin-600-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-600-normal-C9Agc4O9.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-600-normal-K9hBQwnb.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "source-sans-3-latin-700-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-700-normal-DKezV3YD.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-700-normal-DTntTtfE.woff") format("woff");
  font-weight: 700;
}
.Loader {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.Loader:after {
  content: "";
  width: 50px;
  height: 5px;
  z-index: -1;
  position: absolute;
  top: calc(50% - 3px);
  left: 12px;
  background: #006589;
}
.Loader div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #006589;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.Loader div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.Loader div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.Loader div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.Loader div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
@font-face {
  font-family: "geologica-latin-800-normal";
  src: url("/gamification/build/fonts/geologica-latin-800-normal-4WmRc75O.woff2") format("woff2"), url("/gamification/build/fonts/geologica-latin-800-normal-syoK-H4Q.woff") format("woff");
  font-weight: 800;
}
@font-face {
  font-family: "geologica-latin-600-normal";
  src: url("/gamification/build/fonts/geologica-latin-600-normal-CRd38TRc.woff2") format("woff2"), url("/gamification/build/fonts/geologica-latin-600-normal-CgJV1eGI.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "leckerli-one-latin-400-normal";
  src: url("/gamification/build/fonts/leckerli-one-latin-400-normal-DmKhK9SU.woff2") format("woff2"), url("/gamification/build/fonts/leckerli-one-latin-400-normal-DmJwCGdG.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "source-sans-3-latin-400-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-400-normal-CWExqDl9.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-400-normal-S5MsD0GB.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "source-sans-3-latin-600-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-600-normal-C9Agc4O9.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-600-normal-K9hBQwnb.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "source-sans-3-latin-700-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-700-normal-DKezV3YD.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-700-normal-DTntTtfE.woff") format("woff");
  font-weight: 700;
}
.CampaignLink {
  flex-shrink: 0;
  display: inline-block;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border 0.25s ease, color 0.25s ease;
  color: #ffffff !important;
  border: 1px solid transparent;
  font-family: "source-sans-3-latin-600-normal" !important;
  font-size: 1.4rem;
  line-height: 1;
  padding: 12px 16px;
  border-radius: 100px;
  letter-spacing: 0.2px;
  text-decoration: none;
  text-transform: uppercase;
  /* TODO: Cookie-script styling is overriding colors – therefor the importants */
}
.CampaignLink--Green {
  background-color: #189350;
}
@media (hover: hover) {
  .CampaignLink--Green:hover {
    background-color: #ffffff;
    color: #106939 !important;
  }
}
.CampaignLink--Orange {
  background-color: #FBA162;
}
@media (hover: hover) {
  .CampaignLink--Orange:hover {
    background-color: #ffffff;
    color: #E37222 !important;
  }
}
.CampaignLink--Blue {
  background-color: #2B73C9;
}
@media (hover: hover) {
  .CampaignLink--Blue:hover {
    background-color: #ffffff;
    color: #00194B !important;
  }
}
.CampaignLink--Purple {
  background-color: #AE75CE;
}
@media (hover: hover) {
  .CampaignLink--Purple:hover {
    background-color: #ffffff;
    color: #3B005E !important;
  }
}
.CampaignLink--Petroleum {
  background-color: #3DB7E4;
}
@media (hover: hover) {
  .CampaignLink--Petroleum:hover {
    background-color: #ffffff;
    color: #006589 !important;
  }
}
.CampaignLink--Neutral {
  background-color: #ffffff;
  color: #006589 !important;
}
@media (hover: hover) {
  .CampaignLink--Neutral:hover {
    background-color: #ffffff;
    color: #006589;
  }
}
.CampaignLink--Red {
  background-color: #AA3E84;
}
@media (hover: hover) {
  .CampaignLink--Red:hover {
    background-color: #ffffff;
    color: #710049 !important;
  }
}
.CampaignLink--Green.CampaignLink--Light {
  border: 1px solid #106939;
  color: #106939 !important;
  background-color: transparent;
}
@media (hover: hover) {
  .CampaignLink--Green.CampaignLink--Light:hover {
    background-color: #106939;
    color: #ffffff !important;
  }
}
.CampaignLink--Orange.CampaignLink--Light {
  border: 1px solid #E37222;
  color: #E37222 !important;
  background-color: transparent;
}
@media (hover: hover) {
  .CampaignLink--Orange.CampaignLink--Light:hover {
    background-color: #E37222;
    color: #ffffff !important;
  }
}
.CampaignLink--Blue.CampaignLink--Light {
  border: 1px solid #00194B;
  color: #00194B !important;
  background-color: transparent;
}
@media (hover: hover) {
  .CampaignLink--Blue.CampaignLink--Light:hover {
    background-color: #00194B;
    color: #ffffff !important;
  }
}
.CampaignLink--Purple.CampaignLink--Light {
  border: 1px solid #3B005E;
  color: #3B005E !important;
  background-color: transparent;
}
@media (hover: hover) {
  .CampaignLink--Purple.CampaignLink--Light:hover {
    background-color: #3B005E;
    color: #ffffff !important;
  }
}
.CampaignLink--Petroleum.CampaignLink--Light {
  border: 1px solid #006589;
  color: #006589 !important;
  background-color: transparent;
}
@media (hover: hover) {
  .CampaignLink--Petroleum.CampaignLink--Light:hover {
    background-color: #006589;
    color: #ffffff !important;
  }
}
.CampaignLink--Neutral.CampaignLink--Light {
  border: 1px solid #006589;
  color: #006589 !important;
  background-color: #ffffff;
}
@media (hover: hover) {
  .CampaignLink--Neutral.CampaignLink--Light:hover {
    background-color: #006589;
    color: #ffffff !important;
  }
}
.CampaignLink--Red.CampaignLink--Light {
  border: 1px solid #710049;
  color: #710049 !important;
  background-color: transparent;
}
@media (hover: hover) {
  .CampaignLink--Red.CampaignLink--Light:hover {
    background-color: #710049;
    color: #ffffff !important;
  }
}@font-face {
  font-family: "geologica-latin-800-normal";
  src: url("/gamification/build/fonts/geologica-latin-800-normal-4WmRc75O.woff2") format("woff2"), url("/gamification/build/fonts/geologica-latin-800-normal-syoK-H4Q.woff") format("woff");
  font-weight: 800;
}
@font-face {
  font-family: "geologica-latin-600-normal";
  src: url("/gamification/build/fonts/geologica-latin-600-normal-CRd38TRc.woff2") format("woff2"), url("/gamification/build/fonts/geologica-latin-600-normal-CgJV1eGI.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "leckerli-one-latin-400-normal";
  src: url("/gamification/build/fonts/leckerli-one-latin-400-normal-DmKhK9SU.woff2") format("woff2"), url("/gamification/build/fonts/leckerli-one-latin-400-normal-DmJwCGdG.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "source-sans-3-latin-400-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-400-normal-CWExqDl9.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-400-normal-S5MsD0GB.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "source-sans-3-latin-600-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-600-normal-C9Agc4O9.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-600-normal-K9hBQwnb.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "source-sans-3-latin-700-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-700-normal-DKezV3YD.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-700-normal-DTntTtfE.woff") format("woff");
  font-weight: 700;
}
.ShareButton__Text {
  display: none;
}
@media (min-width: 768px) {
  .ShareButton__Text {
    display: block;
  }
}
.ShareButton__Button {
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border 0.25s ease, color 0.25s ease;
  color: #ffffff;
  font-family: "source-sans-3-latin-600-normal";
  font-size: 1.4rem;
  line-height: 1;
  border-radius: 100px;
  letter-spacing: 0.2px;
  text-decoration: none;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .ShareButton__Button {
    padding: 4px 4px 4px 16px;
  }
}
.ShareButton__Button--Expanded {
  padding: 0 0 0 16px;
}
@media (min-width: 768px) {
  .ShareButton__Button--Expanded {
    padding: 4px 4px 4px 16px;
  }
}
.ShareButton__Button--Green {
  background-color: #189350;
}
@media (hover: hover) {
  .ShareButton__Button--Green:hover {
    background-color: #ffffff;
    color: #106939;
  }
}
.ShareButton__Button--Orange {
  background-color: #FBA162;
}
@media (hover: hover) {
  .ShareButton__Button--Orange:hover {
    background-color: #ffffff;
    color: #E37222;
  }
}
.ShareButton__Button--Blue {
  background-color: #2B73C9;
}
@media (hover: hover) {
  .ShareButton__Button--Blue:hover {
    background-color: #ffffff;
    color: #00194B;
  }
}
.ShareButton__Button--Purple {
  background-color: #AE75CE;
}
@media (hover: hover) {
  .ShareButton__Button--Purple:hover {
    background-color: #ffffff;
    color: #3B005E;
  }
}
.ShareButton__Button--Petroleum {
  background-color: #3DB7E4;
}
@media (hover: hover) {
  .ShareButton__Button--Petroleum:hover {
    background-color: #ffffff;
    color: #006589;
  }
}
.ShareButton__Button--Neutral {
  background-color: #ffffff;
  color: #006589;
}
@media (hover: hover) {
  .ShareButton__Button--Neutral:hover {
    background-color: #ffffff;
    color: #006589;
  }
}
.ShareButton__Button--Red {
  background-color: #AA3E84;
}
@media (hover: hover) {
  .ShareButton__Button--Red:hover {
    background-color: #ffffff;
    color: #710049;
  }
}
.ShareButton__Button--Green.ShareButton__Button--Light {
  border: 1px solid #106939;
  color: #106939;
  background-color: transparent;
}
@media (hover: hover) {
  .ShareButton__Button--Green.ShareButton__Button--Light:hover {
    background-color: #106939;
    color: #ffffff;
  }
}
.ShareButton__Button--Orange.ShareButton__Button--Light {
  border: 1px solid #E37222;
  color: #E37222;
  background-color: transparent;
}
@media (hover: hover) {
  .ShareButton__Button--Orange.ShareButton__Button--Light:hover {
    background-color: #E37222;
    color: #ffffff;
  }
}
.ShareButton__Button--Blue.ShareButton__Button--Light {
  border: 1px solid #00194B;
  color: #00194B;
  background-color: transparent;
}
@media (hover: hover) {
  .ShareButton__Button--Blue.ShareButton__Button--Light:hover {
    background-color: #00194B;
    color: #ffffff;
  }
}
.ShareButton__Button--Purple.ShareButton__Button--Light {
  border: 1px solid #3B005E;
  color: #3B005E;
  background-color: transparent;
}
@media (hover: hover) {
  .ShareButton__Button--Purple.ShareButton__Button--Light:hover {
    background-color: #3B005E;
    color: #ffffff;
  }
}
.ShareButton__Button--Petroleum.ShareButton__Button--Light {
  border: 1px solid #006589;
  color: #006589;
  background-color: transparent;
}
@media (hover: hover) {
  .ShareButton__Button--Petroleum.ShareButton__Button--Light:hover {
    background-color: #006589;
    color: #ffffff;
  }
}
.ShareButton__Button--Neutral.ShareButton__Button--Light {
  border: 1px solid #006589;
  color: #006589;
  background-color: #ffffff;
}
@media (hover: hover) {
  .ShareButton__Button--Neutral.ShareButton__Button--Light:hover {
    background-color: #006589;
    color: #ffffff;
  }
}
.ShareButton__Button--Red.ShareButton__Button--Light {
  border: 1px solid #710049;
  color: #710049;
  background-color: transparent;
}
@media (hover: hover) {
  .ShareButton__Button--Red.ShareButton__Button--Light:hover {
    background-color: #710049;
    color: #ffffff;
  }
}
.ShareButton__Circle {
  cursor: pointer;
  margin-left: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px;
  transition: background-color 0.25s ease;
  border: none;
}
.ShareButton__Circle--Expanded {
  margin-left: 12px;
}
@media (min-width: 768px) {
  .ShareButton__Circle {
    margin-left: 12px;
    padding: 7px;
  }
}
.ShareButton__Circle svg path {
  transition: fill 0.25s ease;
}
.ShareButton__Circle--Green {
  background-color: #E9EEEB;
}
.ShareButton__Circle--Green svg path {
  fill: #189350;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Circle--Green {
    background-color: #106939;
  }
  .ShareButton__Button:hover .ShareButton__Circle--Green svg path {
    fill: #ffffff;
  }
}
.ShareButton__Circle--Orange {
  background-color: #FCF1E9;
}
.ShareButton__Circle--Orange svg path {
  fill: #FBA162;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Circle--Orange {
    background-color: #E37222;
  }
  .ShareButton__Button:hover .ShareButton__Circle--Orange svg path {
    fill: #ffffff;
  }
}
.ShareButton__Circle--Blue {
  background-color: #E5E8ED;
}
.ShareButton__Circle--Blue svg path {
  fill: #2B73C9;
}
@media (hover: hover) {
  .ShareButton__Circle--Blue {
    background-color: #00194B;
  }
  .ShareButton__Circle--Blue svg path {
    fill: #ffffff;
  }
}
.ShareButton__Circle--Purple {
  background-color: #EBE5EF;
}
.ShareButton__Circle--Purple svg path {
  fill: #AE75CE;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Circle--Purple {
    background-color: #3B005E;
  }
  .ShareButton__Button:hover .ShareButton__Circle--Purple svg path {
    fill: #ffffff;
  }
}
.ShareButton__Circle--Petroleum {
  background-color: #ECF8FC;
}
.ShareButton__Circle--Petroleum svg path {
  fill: #3DB7E4;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Circle--Petroleum {
    background-color: #006589;
  }
  .ShareButton__Button:hover .ShareButton__Circle--Petroleum svg path {
    fill: #ffffff;
  }
}
.ShareButton__Circle--Neutral {
  background-color: #ECF8FC;
}
.ShareButton__Circle--Neutral svg path {
  fill: #006589;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Circle--Neutral {
    background-color: #006589;
  }
  .ShareButton__Button:hover .ShareButton__Circle--Neutral svg path {
    fill: #ffffff;
  }
}
.ShareButton__Circle--Red {
  background-color: #EFE3EB;
}
.ShareButton__Circle--Red svg path {
  fill: #AA3E84;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Circle--Red {
    background-color: #710049;
  }
  .ShareButton__Button:hover .ShareButton__Circle--Red svg path {
    fill: #ffffff;
  }
}
.ShareButton__Circle--Green.ShareButton__Circle--Light {
  background-color: rgba(24, 147, 80, 0.2);
}
.ShareButton__Circle--Green.ShareButton__Circle--Light svg path {
  fill: #106939;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Circle--Green.ShareButton__Circle--Light {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
.ShareButton__Circle--Orange.ShareButton__Circle--Light {
  background-color: rgba(251, 161, 98, 0.2);
}
.ShareButton__Circle--Orange.ShareButton__Circle--Light svg path {
  fill: #E37222;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Circle--Orange.ShareButton__Circle--Light {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
.ShareButton__Circle--Blue.ShareButton__Circle--Light {
  background-color: rgba(43, 115, 201, 0.2);
}
.ShareButton__Circle--Blue.ShareButton__Circle--Light svg path {
  fill: #00194B;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Circle--Blue.ShareButton__Circle--Light {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
.ShareButton__Circle--Purple.ShareButton__Circle--Light {
  background-color: rgba(174, 117, 206, 0.2);
}
.ShareButton__Circle--Purple.ShareButton__Circle--Light svg path {
  fill: #3B005E;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Circle--Purple.ShareButton__Circle--Light {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
.ShareButton__Circle--Petroleum.ShareButton__Circle--Light {
  background-color: rgba(61, 183, 228, 0.2);
}
.ShareButton__Circle--Petroleum.ShareButton__Circle--Light svg path {
  fill: #006589;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Circle--Petroleum.ShareButton__Circle--Light {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
.ShareButton__Circle--Neutral.ShareButton__Circle--Light {
  background-color: rgba(61, 183, 228, 0.2);
}
.ShareButton__Circle--Neutral.ShareButton__Circle--Light svg path {
  fill: #006589;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Circle--Neutral.ShareButton__Circle--Light {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
.ShareButton__Circle--Red.ShareButton__Circle--Light {
  background-color: rgba(170, 62, 132, 0.2);
}
.ShareButton__Circle--Red.ShareButton__Circle--Light svg path {
  fill: #710049;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Circle--Red.ShareButton__Circle--Light {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
.ShareButton__Options {
  display: flex;
  gap: 12px;
  color: #ffffff;
  transition: color 0.25s ease;
}
@media (min-width: 768px) {
  .ShareButton__Options {
    gap: 16px;
  }
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Options--Green {
    color: #106939;
  }
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Options--Orange {
    color: #E37222;
  }
}
@media (hover: hover) {
  .ShareButton__Options--Blue {
    color: #00194B;
  }
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Options--Purple {
    color: #3B005E;
  }
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Options--Petroleum {
    color: #006589;
  }
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Options--Neutral {
    color: #006589;
  }
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Options--Red {
    color: #710049;
  }
}
.ShareButton__Options--Green.ShareButton__Options--Light {
  color: #106939;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Options--Green.ShareButton__Options--Light {
    color: #ffffff;
  }
}
.ShareButton__Options--Orange.ShareButton__Options--Light {
  color: #E37222;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Options--Orange.ShareButton__Options--Light {
    color: #ffffff;
  }
}
.ShareButton__Options--Blue.ShareButton__Options--Light {
  color: #00194B;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Options--Blue.ShareButton__Options--Light {
    color: #ffffff;
  }
}
.ShareButton__Options--Purple.ShareButton__Options--Light {
  color: #3B005E;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Options--Purple.ShareButton__Options--Light {
    color: #ffffff;
  }
}
.ShareButton__Options--Petroleum.ShareButton__Options--Light {
  color: #006589;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Options--Petroleum.ShareButton__Options--Light {
    color: #ffffff;
  }
}
.ShareButton__Options--Neutral.ShareButton__Options--Light {
  color: #006589;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Options--Neutral.ShareButton__Options--Light {
    color: #ffffff;
  }
}
.ShareButton__Options--Red.ShareButton__Options--Light {
  color: #710049;
}
@media (hover: hover) {
  .ShareButton__Button:hover .ShareButton__Options--Red.ShareButton__Options--Light {
    color: #ffffff;
  }
}
.ShareButton__Option {
  cursor: pointer;
  display: inline-block;
  color: inherit;
  border: none;
  padding: 0;
  background-color: transparent;
  font-size: 1.6rem;
  line-height: 1;
}@font-face {
  font-family: "geologica-latin-800-normal";
  src: url("/gamification/build/fonts/geologica-latin-800-normal-4WmRc75O.woff2") format("woff2"), url("/gamification/build/fonts/geologica-latin-800-normal-syoK-H4Q.woff") format("woff");
  font-weight: 800;
}
@font-face {
  font-family: "geologica-latin-600-normal";
  src: url("/gamification/build/fonts/geologica-latin-600-normal-CRd38TRc.woff2") format("woff2"), url("/gamification/build/fonts/geologica-latin-600-normal-CgJV1eGI.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "leckerli-one-latin-400-normal";
  src: url("/gamification/build/fonts/leckerli-one-latin-400-normal-DmKhK9SU.woff2") format("woff2"), url("/gamification/build/fonts/leckerli-one-latin-400-normal-DmJwCGdG.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "source-sans-3-latin-400-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-400-normal-CWExqDl9.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-400-normal-S5MsD0GB.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "source-sans-3-latin-600-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-600-normal-C9Agc4O9.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-600-normal-K9hBQwnb.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "source-sans-3-latin-700-normal";
  src: url("/gamification/build/fonts/source-sans-3-latin-700-normal-DKezV3YD.woff2") format("woff2"), url("/gamification/build/fonts/source-sans-3-latin-700-normal-DTntTtfE.woff") format("woff");
  font-weight: 700;
}
._ResultModal_1pbfc_31 {
  border-radius: 10px;
  color: #000000;
  overflow: hidden;
}
._ResultModal--Show_1pbfc_36 {
  display: block;
}
._ResultModal--Green_1pbfc_39 {
  background-color: #E9EEEB;
  border: 1px solid #106939;
}
._ResultModal--Orange_1pbfc_43 {
  background-color: #FCF1E9;
  border: 1px solid #E37222;
}
._ResultModal--Blue_1pbfc_47 {
  background-color: #E5E8ED;
  border: 1px solid #00194B;
}
._ResultModal--Purple_1pbfc_51 {
  background-color: #EBE5EF;
  border: 1px solid #3B005E;
}
._ResultModal--Petroleum_1pbfc_55 {
  background-color: #ECF8FC;
  border: 1px solid #006589;
}
._ResultModal--Neutral_1pbfc_59 {
  background-color: #F4F4F4;
  border: 1px solid #CBCDCD;
}
._ResultModal--Red_1pbfc_63 {
  background-color: #EFE3EB;
  border: 1px solid #710049;
}
._ResultModal__TitleRow_1pbfc_67 {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 768px) {
  ._ResultModal__TitleRow_1pbfc_67 {
    padding: 16px 32px;
  }
}
._ResultModal__Title_1pbfc_67 {
  font-family: "geologica-latin-600-normal";
  font-size: 2rem;
  line-height: 1.33;
}
._ResultModal__Close_1pbfc_83 {
  cursor: pointer;
  font-size: 1.8rem;
  background-color: #ffffff;
  border-radius: 50%;
  flex-shrink: 0;
  padding: 0;
  border: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
  will-change: background-color, color;
}
._ResultModal--Green_1pbfc_39 ._ResultModal__Close_1pbfc_83 {
  color: #106939;
}
._ResultModal--Orange_1pbfc_43 ._ResultModal__Close_1pbfc_83 {
  color: #E37222;
}
._ResultModal--Blue_1pbfc_47 ._ResultModal__Close_1pbfc_83 {
  color: #00194B;
}
._ResultModal--Purple_1pbfc_51 ._ResultModal__Close_1pbfc_83 {
  color: #3B005E;
}
._ResultModal--Petroleum_1pbfc_55 ._ResultModal__Close_1pbfc_83 {
  color: #006589;
}
._ResultModal--Neutral_1pbfc_59 ._ResultModal__Close_1pbfc_83 i {
  background: linear-gradient(95deg, #E37222, #710049, #E37222, #710049);
  background-size: 200% 200%;
  background-position: center right 50%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  will-change: background-position;
  transition: background-position 0.25s ease;
  height: fit-content;
}
._ResultModal--Red_1pbfc_63 ._ResultModal__Close_1pbfc_83 {
  color: #710049;
}
@media (hover: hover) {
  ._ResultModal--Green_1pbfc_39 ._ResultModal__Close_1pbfc_83:hover {
    background-color: #106939;
    color: #ffffff;
  }
  ._ResultModal--Orange_1pbfc_43 ._ResultModal__Close_1pbfc_83:hover {
    background-color: #E37222;
    color: #ffffff;
  }
  ._ResultModal--Blue_1pbfc_47 ._ResultModal__Close_1pbfc_83:hover {
    background-color: #00194B;
    color: #ffffff;
  }
  ._ResultModal--Purple_1pbfc_51 ._ResultModal__Close_1pbfc_83:hover {
    background-color: #3B005E;
    color: #ffffff;
  }
  ._ResultModal--Petroleum_1pbfc_55 ._ResultModal__Close_1pbfc_83:hover {
    background-color: #006589;
    color: #ffffff;
  }
  ._ResultModal--Neutral_1pbfc_59 ._ResultModal__Close_1pbfc_83:hover {
    background-color: #006589;
  }
  ._ResultModal--Neutral_1pbfc_59 ._ResultModal__Close_1pbfc_83:hover i {
    -webkit-text-fill-color: #ffffff;
    -moz-text-fill-color: #ffffff;
    color: #ffffff;
  }
  ._ResultModal--Red_1pbfc_63 ._ResultModal__Close_1pbfc_83:hover {
    background-color: #710049;
    color: #ffffff;
  }
}
._ResultModal__ResultItem_1pbfc_163 {
  padding: 8px 16px;
}
@media (min-width: 768px) {
  ._ResultModal__ResultItem_1pbfc_163 {
    padding: 8px 32px;
  }
}
._ResultModal--Green_1pbfc_39 ._ResultModal__ResultItem_1pbfc_163 {
  background-color: rgba(16, 105, 57, 0.05);
}
._ResultModal--Orange_1pbfc_43 ._ResultModal__ResultItem_1pbfc_163 {
  background-color: rgba(227, 114, 34, 0.05);
}
._ResultModal--Blue_1pbfc_47 ._ResultModal__ResultItem_1pbfc_163 {
  background-color: rgba(0, 25, 75, 0.05);
}
._ResultModal--Purple_1pbfc_51 ._ResultModal__ResultItem_1pbfc_163 {
  background-color: rgba(59, 0, 94, 0.05);
}
._ResultModal--Petroleum_1pbfc_55 ._ResultModal__ResultItem_1pbfc_163 {
  background-color: rgba(0, 101, 137, 0.05);
}
._ResultModal--Neutral_1pbfc_59 ._ResultModal__ResultItem_1pbfc_163 {
  background-color: #ffffff;
}
._ResultModal--Red_1pbfc_63 ._ResultModal__ResultItem_1pbfc_163 {
  background-color: rgba(113, 0, 73, 0.05);
}
._ResultModal--Green_1pbfc_39 ._ResultModal__ResultItem_1pbfc_163:nth-child(odd) {
  background-color: rgba(16, 105, 57, 0.1);
}
._ResultModal--Orange_1pbfc_43 ._ResultModal__ResultItem_1pbfc_163:nth-child(odd) {
  background-color: rgba(227, 114, 34, 0.1);
}
._ResultModal--Blue_1pbfc_47 ._ResultModal__ResultItem_1pbfc_163:nth-child(odd) {
  background-color: rgba(0, 25, 75, 0.1);
}
._ResultModal--Purple_1pbfc_51 ._ResultModal__ResultItem_1pbfc_163:nth-child(odd) {
  background-color: rgba(59, 0, 94, 0.1);
}
._ResultModal--Petroleum_1pbfc_55 ._ResultModal__ResultItem_1pbfc_163:nth-child(odd) {
  background-color: rgba(0, 101, 137, 0.1);
}
._ResultModal--Neutral_1pbfc_59 ._ResultModal__ResultItem_1pbfc_163:nth-child(odd) {
  background-color: #F6F9FA;
}
._ResultModal--Red_1pbfc_63 ._ResultModal__ResultItem_1pbfc_163:nth-child(odd) {
  background-color: rgba(113, 0, 73, 0.1);
}
._ResultModal__ResultItem_1pbfc_163:last-of-type {
  padding: 8px 16px 12px 16px;
}
@media (min-width: 768px) {
  ._ResultModal__ResultItem_1pbfc_163:last-of-type {
    padding: 8px 32px 16px 32px;
  }
}
._ResultModal__Question_1pbfc_221 {
  display: flex;
}
._ResultModal__Answers_1pbfc_224, ._ResultModal__Answer_1pbfc_224, ._ResultModal__Correct_1pbfc_224 {
  display: block;
  flex-shrink: 0;
  font-family: "source-sans-3-latin-600-normal";
}
._ResultModal__Answers_1pbfc_224 span, ._ResultModal__Answer_1pbfc_224 span, ._ResultModal__Correct_1pbfc_224 span {
  flex-shrink: 0;
}
._ResultModal--Green_1pbfc_39 ._ResultModal__Answers_1pbfc_224, ._ResultModal--Green_1pbfc_39 ._ResultModal__Answer_1pbfc_224, ._ResultModal--Green_1pbfc_39 ._ResultModal__Correct_1pbfc_224 {
  color: #106939;
}
._ResultModal--Orange_1pbfc_43 ._ResultModal__Answers_1pbfc_224, ._ResultModal--Orange_1pbfc_43 ._ResultModal__Answer_1pbfc_224, ._ResultModal--Orange_1pbfc_43 ._ResultModal__Correct_1pbfc_224 {
  color: #E37222;
}
._ResultModal--Blue_1pbfc_47 ._ResultModal__Answers_1pbfc_224, ._ResultModal--Blue_1pbfc_47 ._ResultModal__Answer_1pbfc_224, ._ResultModal--Blue_1pbfc_47 ._ResultModal__Correct_1pbfc_224 {
  color: #00194B;
}
._ResultModal--Purple_1pbfc_51 ._ResultModal__Answers_1pbfc_224, ._ResultModal--Purple_1pbfc_51 ._ResultModal__Answer_1pbfc_224, ._ResultModal--Purple_1pbfc_51 ._ResultModal__Correct_1pbfc_224 {
  color: #3B005E;
}
._ResultModal--Petroleum_1pbfc_55 ._ResultModal__Answers_1pbfc_224, ._ResultModal--Petroleum_1pbfc_55 ._ResultModal__Answer_1pbfc_224, ._ResultModal--Petroleum_1pbfc_55 ._ResultModal__Correct_1pbfc_224 {
  color: #006589;
}
._ResultModal--Neutral_1pbfc_59 ._ResultModal__Answers_1pbfc_224, ._ResultModal--Neutral_1pbfc_59 ._ResultModal__Answer_1pbfc_224, ._ResultModal--Neutral_1pbfc_59 ._ResultModal__Correct_1pbfc_224 {
  color: #006589;
}
._ResultModal--Red_1pbfc_63 ._ResultModal__Answers_1pbfc_224, ._ResultModal--Red_1pbfc_63 ._ResultModal__Answer_1pbfc_224, ._ResultModal--Red_1pbfc_63 ._ResultModal__Correct_1pbfc_224 {
  color: #710049;
}
._ResultModal__Correct_1pbfc_224 {
  margin-top: 8px;
}
._ResultModal__QuestionCount_1pbfc_256 {
  font-size: 1.8rem;
  font-family: "source-sans-3-latin-700-normal";
  line-height: 1.15;
  margin-right: 8px;
}
._ResultModal--Green_1pbfc_39 ._ResultModal__QuestionCount_1pbfc_256 {
  color: #106939;
}
._ResultModal--Orange_1pbfc_43 ._ResultModal__QuestionCount_1pbfc_256 {
  color: #E37222;
}
._ResultModal--Blue_1pbfc_47 ._ResultModal__QuestionCount_1pbfc_256 {
  color: #00194B;
}
._ResultModal--Purple_1pbfc_51 ._ResultModal__QuestionCount_1pbfc_256 {
  color: #3B005E;
}
._ResultModal--Petroleum_1pbfc_55 ._ResultModal__QuestionCount_1pbfc_256 {
  color: #006589;
}
._ResultModal--Neutral_1pbfc_59 ._ResultModal__QuestionCount_1pbfc_256 {
  color: #006589;
}
._ResultModal--Red_1pbfc_63 ._ResultModal__QuestionCount_1pbfc_256 {
  color: #710049;
}
@media (min-width: 768px) {
  ._ResultModal__QuestionCount_1pbfc_256 {
    margin-right: 16px;
  }
}
._ResultModal__QuestionTitle_1pbfc_288 {
  font-size: 1.6rem;
  font-family: "source-sans-3-latin-400-normal";
  line-height: 1.33;
  margin-bottom: 4px;
}
._ResultModal__ResultList_1pbfc_294 {
  max-height: calc(100vh - 96px);
  overflow: auto;
}
@media (min-width: 768px) {
  ._ResultModal__ResultList_1pbfc_294 {
    max-height: calc(100vh - 160px);
  }
}
._ResultModal__CorrectsWrapper_1pbfc_303, ._ResultModal__AnswerWrapper_1pbfc_303 {
  display: flex;
  align-items: end;
}
._ResultModal__CorrectsWrapper_1pbfc_303 {
  margin-top: 4px;
}
._ResultModal__Answers_1pbfc_224 {
  margin-left: 4px;
}
._ResultModal__AnswerImage_1pbfc_313 {
  width: 83px;
  height: 47px;
  border-radius: 4px;
  object-fit: cover;
  margin-right: 8px;
}.ErrorBoundary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.ErrorBoundary__Container {
  max-width: 600px;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  padding: 3rem 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.ErrorBoundary__Title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
}
.ErrorBoundary__Message {
  font-size: 1.125rem;
  margin: 0 0 2rem 0;
  opacity: 0.9;
}
.ErrorBoundary__Button {
  background: white;
  color: #667eea;
  border: none;
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ErrorBoundary__Button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.ErrorBoundary__Button:active {
  transform: translateY(0);
}
.ErrorBoundary__Details {
  margin-top: 2rem;
  text-align: left;
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 0.5rem;
}
.ErrorBoundary__Details summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 1rem;
  user-select: none;
}
.ErrorBoundary__Details summary:hover {
  opacity: 0.8;
}
.ErrorBoundary__Stack {
  margin: 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.25rem;
  overflow-x: auto;
  font-size: 0.875rem;
  font-family: "Courier New", Courier, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}