@font-face {
  font-family: "Grotesk";
  src: url(./../fonts/NHaasGroteskTXPro-55Rg.eot?8ef6d5a6f9ffada8d5c6fbd2e0edb74b);
  src: url(./../fonts/NHaasGroteskTXPro-55Rg.eot?8ef6d5a6f9ffada8d5c6fbd2e0edb74b) format("embedded-opentype"), url(./../fonts/NHaasGroteskTXPro-55Rg.woff2?c52d1ac504d2cc396a19fa51639e247c) format("woff2"), url(./../fonts/NHaasGroteskTXPro-55Rg.woff?33a51cbab8f2b44294756f3b5fa9bb46) format("woff"), url(./../fonts/NHaasGroteskTXPro-55Rg.ttf?b7804bd46ea07d42ecda5e999282bc4b) format("truetype"), url(./../fonts/NHaasGroteskTXPro-55Rg.svg?cb0e95164372053438f70ef9059a80df) format("svg");
}
@font-face {
  font-family: "Akira";
  src: url(./../fonts/AkiraExpanded-SuperBold.eot?99386215429ae838f503f53f1fe015e9);
  src: url(./../fonts/AkiraExpanded-SuperBold.eot?99386215429ae838f503f53f1fe015e9) format("embedded-opentype"), url(./../fonts/AkiraExpanded-SuperBold.woff2?545bdcd41b3b9afebf4efdff0dad608d) format("woff2"), url(./../fonts/AkiraExpanded-SuperBold.woff?e731d94f9a086bf7445f04568cd574a1) format("woff"), url(./../fonts/AkiraExpanded-SuperBold.ttf?5f5608443685b60643e7951d7d03c96a) format("truetype"), url(./../fonts/AkiraExpanded-SuperBold.svg?5a277133e57b1f829d5d4f68c56e2832) format("svg");
}
@font-face {
  font-family: "Aileron";
  src: url(./../fonts/Aileron-SemiBold.eot?29fa2434e5afaaf8f6287d61137d80b1);
  src: url(./../fonts/Aileron-SemiBold.eot?29fa2434e5afaaf8f6287d61137d80b1) format("embedded-opentype"), url(./../fonts/Aileron-SemiBold.woff2?e931037fcd35bde18ec79d5d9c9c2e05) format("woff2"), url(./../fonts/Aileron-SemiBold.woff?0fdc88f9e73337e3240ba311303f5c45) format("woff"), url(./../fonts/Aileron-SemiBold.ttf?7ea6004348b80ec7e26c813983f72d81) format("truetype"), url(./../fonts/Aileron-SemiBold.svg?a02ae96be669a3be1848af56f235892c) format("svg");
}


/* VIER */
@font-face {
  font-family: "Grotesk Medium";
  src: url(./../fonts/NeueHaasDisplay-Mediu.eot?09887c94ffc1675d447503477874fb10);
  src: url(./../fonts/NeueHaasDisplay-Mediu.eot?09887c94ffc1675d447503477874fb10) format("embedded-opentype"), url(./../fonts/NeueHaasDisplay-Mediu.woff2?fdb018c45d9bba5e4d769abeecc04f83) format("woff2"), url(./../fonts/NeueHaasDisplay-Mediu.woff?0bd6a4738598aa6796fe0d856851b00a) format("woff"), url(./../fonts/NeueHaasDisplay-Mediu.ttf?83d7dcff1e932b4547470764038b8333) format("truetype"), url(./../fonts/NeueHaasDisplay-Mediu.svg?f03aa6e7a7b6b67473b3d5a1de67fbb8) format("svg");
}
:root {
  --body1: 2.68em;
  --body2: 3.75em;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

html {
  background-color: black;
}

body {
  padding: var(--body1) var(--body2);
  color: white;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

#viewport {
  position: fixed;
  width: calc(100vw - ( 2 * var(--body2)));
}

.webgl {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  outline: none;
}

.scene-main {
  position: absolute;
  top: calc(var(--body1)*-1);
  left: calc(var(--body2)*-1);
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

.item-hidden {
  visibility: hidden;
  width: 0;
  height: 0;
}

.trans_black, .trans_white {
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  position: fixed;
}

.trans_black {
  z-index: 901;
  background-color: black;
}
.trans_black.enter {
  height: 100%;
  -webkit-animation: 1s cubic-bezier(0.83, 0, 0.17, 1) 0.3s forwards enter;
          animation: 1s cubic-bezier(0.83, 0, 0.17, 1) 0.3s forwards enter;
}
.trans_black.leave {
  top: 0;
  height: 0;
  -webkit-animation: 1s cubic-bezier(0.83, 0, 0.17, 1) 0.15s forwards leave;
          animation: 1s cubic-bezier(0.83, 0, 0.17, 1) 0.15s forwards leave;
}

.trans_white {
  z-index: 900;
  background-color: white;
}
.trans_white.enter {
  height: 100%;
  -webkit-animation: 1s cubic-bezier(0.83, 0, 0.17, 1) 0.45s forwards enter;
          animation: 1s cubic-bezier(0.83, 0, 0.17, 1) 0.45s forwards enter;
}
.trans_white.leave {
  top: 0;
  height: 0;
  -webkit-animation: 1s cubic-bezier(0.83, 0, 0.17, 1) forwards leave;
          animation: 1s cubic-bezier(0.83, 0, 0.17, 1) forwards leave;
}

@-webkit-keyframes leave {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

@keyframes leave {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}
@-webkit-keyframes enter {
  from {
    height: 100%;
  }
  to {
    height: 0;
  }
}
@keyframes enter {
  from {
    height: 100%;
  }
  to {
    height: 0;
  }
}
.loading-screen {
  visibility: hidden;
  width: 0;
  height: 0;
}

nav {
  position: fixed;
  width: calc(100vw - (var(--body2) * 2));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 5;
  mix-blend-mode: difference;
}
nav .navbar {
  overflow: hidden;
  position: relative;
  z-index: 5;
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
}
nav .navbar .menu-buttons {
  visibility: hidden;
  width: 0;
  height: 0;
}
nav .navbar .links-left {
  transform: translateY(80%);
  transition: transform 2s cubic-bezier(0.83, 0, 0.17, 1) 1s;
  display: flex;
}
nav .navbar .links-left .links-menu {
  display: flex;
}
nav .navbar .links-left .links-menu a {
  margin-right: 12.25vw;
  text-decoration: none;
  display: flex;
  position: relative;
  width: 4em;
  height: 1.72em;
}
nav .navbar .links-left .links-menu a:hover .corners-nav {
  opacity: 1;
}
nav .navbar .links-left .links-menu a:nth-child(1) {
  width: 4.5em;
}
nav .navbar .links-left .links-menu a:nth-child(1) .flex-center {
  width: 4.5em;
}
nav .navbar .links-left .links-menu a:nth-child(3) {
  margin-right: 0;
  width: 6.23em;
}
nav .navbar .links-left .links-menu a:nth-child(3) .flex-center {
  width: 6.23em;
}
nav .navbar .links-left .links-menu .flex-center {
  width: 4em;
  height: 1.72em;
  display: flex;
  justify-content: center;
  align-items: center;
}
nav .navbar .links-left .links-menu .corners-nav {
  height: 1.72em;
  position: absolute;
  top: 0;
  opacity: 0;
  transition: 0.45s opacity ease-in-out;
}
nav .navbar .links-left .links-menu .corners-nav #Ligne_42 {
  width: 0;
}
nav .navbar .links-right {
  transform: translateY(80%);
  transition: transform 2s cubic-bezier(0.83, 0, 0.17, 1) 1s;
  display: flex;
}
nav .navbar .links-right .cart {
  cursor: pointer;
}
nav .navbar .links-right .alert-success {
  margin: 0.25em 0.75em 0 0;
  overflow: hidden;
}
nav .navbar .links-right a {
  text-decoration: none;
  display: flex;
  position: relative;
  width: 5.7em;
  height: 1.72em;
}
nav .navbar .links-right a:hover .corners-nav {
  opacity: 1;
}
nav .navbar .links-right .flex-center {
  width: 5.5em;
  height: 1.72em;
  display: flex;
  justify-content: center;
  align-items: center;
}
nav .navbar .links-right .corners-nav {
  height: 1.72em;
  position: absolute;
  top: 0;
  opacity: 0;
  transition: 0.45s opacity ease-in-out;
}
nav .navbar .links-left.ended,
nav .navbar .links-right.ended {
  transform: translateY(0%);
}
nav .navbar #message, nav .navbar #count, nav .navbar #message, nav .navbar .char, nav .navbar .word {
  overflow: hidden;
}
nav .nav-menu {
  transition: all 1.25s cubic-bezier(0.83, 0, 0.17, 1) 0.05s;
  background-color: white;
  visibility: hidden;
  width: 0;
  height: 0;
  z-index: -2;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  top: 0;
}
nav a, nav p {
  font: 1em "Aileron";
  text-decoration: none;
  color: white;
}

.cart-small-device {
  visibility: hidden;
  width: 0;
  height: 0;
}

.big-text {
  width: 100%;
  display: flex;
  justify-content: center;
}
.big-text p {
  font-family: "Akira";
  font-size: calc(100vw/8);
  line-height: 0.75;
}
.big-text p:nth-child(3) {
  text-align: right;
}
.big-text svg {
  overflow: hidden;
}
.big-text svg text {
  font-family: "Akira";
  transform: translateY(102%);
}

.big-text.ended svg text {
  -webkit-animation: 2s cubic-bezier(0.83, 0, 0.17, 1) 1.2s forwards slidetext;
          animation: 2s cubic-bezier(0.83, 0, 0.17, 1) 1.2s forwards slidetext;
}

@-webkit-keyframes slidetext {
  from {
    transform: translateY(102%);
  }
  to {
    transform: translateY(0%);
  }
}

@keyframes slidetext {
  from {
    transform: translateY(102%);
  }
  to {
    transform: translateY(0%);
  }
}
.flex-column {
  display: flex;
  flex-direction: column;
}

.hidden {
  visibility: hidden;
  width: 0;
  height: 0;
}

.title {
  font: 2.5em "Akira";
}

.text {
  font: 0.8125em "Grotesk";
}

.link {
  text-decoration: underline;
}

.price {
  border: 1px solid white;
  padding: 0 0.2em 0 0.2em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.25em;
}

.ligne {
  width: 100%;
  height: 1px;
  background-color: black;
}

.button {
  padding: 0.56em 0.75em 0.56em 0.75em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: white;
  color: black;
  font: 0.93em "Grotesk Medium";
  text-decoration: none;
  border: none;
}

footer {
  margin: 10em 0 0 0;
  font: 0.8125em "Grotesk";
  height: 10em;
}
footer a {
  text-decoration: none;
  color: white;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
footer .firstblock {
  display: flex;
  flex-direction: column;
}
footer .secondblock {
  display: flex;
  justify-content: space-between;
}
footer .secondblock p {
  width: 20em;
}
footer .secondblock :nth-child(2) {
  text-align: center;
}
footer .secondblock :nth-child(3) {
  text-align: right;
  font-size: 0.9em;
}

/**
 * Breakpoints for responside design.
 */
/* Desktop, large size */
/* Desktop, medium size */
/* Desktop, small size */
/* Tablet portrait/landscape */
@media only screen and (max-width: 1024px) {
  :root {
    --body1: 1.125em;
    --body2: 1.875em;
  }

.scene-main{
	top:0;
left:0;
}

  #viewport {
    position: static;
  }

  footer {
    height: auto;
  }

  .big-text {
    justify-content: flex-end;
    height: calc(100vh - var(--body1));
  }
}
/* Tablet portrait */
/* Tablet landscape */
/* Small tablet */
@media only screen and (max-width: 767px) {
  :root {
    --body1: 0.93em;
    --body2: 0.93em;
  }

  html {
    font-size: 0.8em;
  }

  nav {
    mix-blend-mode: unset;
  }
  nav .navbar {
    mix-blend-mode: difference;
  }
  nav .navbar .menu-buttons {
    overflow: hidden;
    visibility: visible;
    width: auto;
    height: 1.2em;
    cursor: pointer;
  }
  nav .navbar .menu-buttons .item-hidden {
    visibility: hidden;
    width: 0;
    height: 0;
  }
  nav .navbar .menu-buttons .menu-button {
    transition: transform 1.25s cubic-bezier(0.83, 0, 0.17, 1);
    transform: translateY(200%);
  }
  nav .navbar .menu-buttons .close-button {
    transition: transform 1.25s cubic-bezier(0.83, 0, 0.17, 1);
    transform: translateY(-200%);
  }
  nav .navbar .menu-buttons .menu-button.show {
    transform: translateY(0);
  }
  nav .navbar .menu-buttons .close-button.show {
    transform: translateY(-100%);
  }
  nav .navbar .links-menu {
    visibility: hidden;
    width: 0;
    height: 0;
  }
  nav .navbar .links-right a {
    width: auto;
  }
  nav .navbar .links-right .alert-success {
    margin: 0 0.75em 0 0;
  }
  nav .navbar .links-right .corners-nav,
nav .navbar .links-right .flex-center {
    visibility: hidden;
    width: 0;
    height: 0;
  }
  nav .navbar .links-left, nav .navbar .links-right {
    transform: translateY(87%);
  }
  nav .menu-visible {
    visibility: visible;
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  nav .nav-menu {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: calc(var(--body2)*-1);
    top: calc(var(--body1)*-1);
    padding: var(--body1) var(--body2);
    justify-content: flex-end;
    z-index: 2;
    display: flex;
    flex-direction: column;
  }
  nav .nav-menu a {
    color: black;
    font-size: 4em;
  }

  .cart-small-device {
    visibility: visible;
    width: auto;
    height: auto;
  }
}
/* Phone */
/* Phone landscape */
/* Phone portrait */
/* Small height */
/* Small phone */
/* Extra Small phone */
*,
*:before,
*:after {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input,
input:before,
input:after {
  -webkit-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
}