@charset "UTF-8";
/*!
 * Copyright 2023 Fruitcake W+P AG, Worb
 * https://fruitcake.ch
 *
 * Uses modern CSS reset
 * https://github.com/hankchizljaw/modern-css-reset

 * Uses slick carousel
 * https://github.com/kenwheeler/slick
 */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Global Resets */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

*, *::before, *::after {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

button, textarea, input, select, a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
}

i {
  font-style: unset;
}

b {
  font-weight: unset;
}

a {
  text-decoration: none;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Roots */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --black: #000000;
  --white: #ffffff;
  --orange: #FFA700;
  --blu: 23px;
  --blur: calc(var(--blu) * 0.05);
  --ani: 0.5s;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Typography */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Minion Pro // Cond */
@font-face {
  font-family: "Minion Pro";
  src: url("fonts/MinionPro-Cn.otf") format("opentype"), url("fonts/MinionPro-Cn.woff2") format("woff2"), url("fonts/MinionPro-Cn.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "Minion Pro";
  src: url("fonts/MinionPro-CnIt.otf") format("opentype"), url("fonts/MinionPro-CnIt.woff2") format("woff2"), url("fonts/MinionPro-CnIt.woff") format("woff");
  font-style: italic;
  font-weight: normal;
}
:root {
  --minion: "Minion Pro", TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
  --p-lh: calc(var(--blu) * 2);
  --p-fs: calc(var(--p-lh) * 1) ;
}

*, *::before, *::after,
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
p, .p {
  font-family: var(--minion);
  font-weight: normal;
  font-style: normal;
  font-size: var(--p-fs);
  line-height: var(--p-lh);
  letter-spacing: 0.01em;
}

h1, .h1 {
  text-transform: uppercase;
}

a, .a {
  font-style: italic;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: letter-spacing ease-in-out var(--ani);
}
a *, .a * {
  transition: letter-spacing ease-in-out var(--ani);
}

.no_ita a, .no_ita .a, .no_itaa, .no_ita.a {
  font-style: normal;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Navigation */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
body.right {
  cursor: e-resize !important;
}
body.right .project_container.active {
  cursor: e-resize !important;
}
body.left {
  cursor: w-resize !important;
}
body.left .project_container.active {
  cursor: w-resize !important;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  padding: calc(var(--blu) * 0.5);
  padding-top: calc(var(--blu) * 0.35);
  max-height: calc(var(--vh) * 100);
  overflow: scroll;
  z-index: 200;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
nav::-webkit-scrollbar {
  display: none;
}
nav .index_container {
  transition-property: opacity, filter;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}
nav .index_container.init {
  display: none;
}
nav .index_container.closed {
  filter: blur(var(--blur));
  opacity: 0;
}
nav .index_container.open {
  filter: blur(0);
  opacity: 1;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Main */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
main {
  padding: calc(var(--blu) * 0.5);
  padding-top: calc(var(--blu) * 3);
}
main .slider_container .project_container {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(var(--vw) * 100);
  height: calc(var(--vh) * 100);
  transition-property: transform;
  transition-timing-function: ease-in-out;
  transition-duration: var(--ani);
  overflow: hidden;
}
main .slider_container .project_container .project_text {
  position: fixed;
  bottom: 0;
  right: 0;
  text-align: right;
  max-height: calc(var(--vh) * 100);
  padding: calc(var(--blu) * 0.5);
  margin-bottom: calc(0px - var(--blu) * 0.54);
  filter: blur(0);
  transform: translateY(0);
  transition-property: transform, filter;
  transition-timing-function: ease-in-out;
  transition-duration: var(--ani);
}
main .slider_container .project_container .project_text .details {
  max-height: 0;
  filter: blur(var(--blur));
  opacity: 0;
  overflow: hidden;
  transition-property: max-height, filter, opacity;
  transition-timing-function: ease-in-out;
  transition-duration: var(--ani);
}
main .slider_container .project_container .project_text.open {
  margin-bottom: unset;
  overflow: scroll;
}
main .slider_container .project_container .project_text.open .details {
  max-height: calc(var(--blu) * 4);
  filter: blur(0);
  opacity: 1;
}
main .slider_container .project_container .project_text.empty {
  pointer-events: none;
}
main .slider_container .project_container img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: calc(var(--blu) * 0.5);
  object-fit: contain;
  filter: blur(0);
  transition-property: transform, filter, opacity;
  transition-timing-function: ease-in-out;
  transition-duration: calc(var(--ani) * 0.5);
}
main .slider_container .project_container img:not(.active, .next, .prev) {
  display: none;
}
main .slider_container .project_container img.next {
  transform: translateX(100%);
}
main .slider_container .project_container img.prev {
  transform: translateX(-100%);
}
main .slider_container .project_container:not(.active, .next, .prev) {
  display: none;
}
main .slider_container .project_container.next {
  transform: translateY(100%);
}
main .slider_container .project_container.prev {
  transform: translateY(-100%);
}
main .slider_container .project_container.trans .project_text {
  display: none;
}
main .slider_container.hide .project_container .project_text:not(.open) {
  transform: translateY(100%);
}
main .slider_container.blur .project_container .project_text:not(.open) {
  filter: blur(var(--blur));
}
main .slider_container.blur .project_container img.active {
  filter: blur(calc(var(--blu) * 0.8));
  transform: scale(110%);
  opacity: 0.9;
}

@media all and (max-width: 35em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 1 / Mobile / XS / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: XS_Mobile;
    --blu: 18px ;
  }
}
@media all and (min-width: 35em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 2 / Tablet / S / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: S_Tablet;
    --blu: 23px ;
  }
  main .slider_container.blur .project_container img.active {
    transform: scale(105%);
  }
}
@media all and (min-width: 55em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 3 / Laptop and Tablet / M / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: M_Tablet_Laptop;
    --blu: 25px ;
  }
  a:hover, a:hover *, .a:hover, .a:hover * {
    letter-spacing: 0.015em;
  }
  a:hover.home_btn, a:hover *.home_btn, .a:hover.home_btn, .a:hover *.home_btn {
    letter-spacing: 1em;
    transition-duration: calc(var(var(--ani)) * 1.5);
  }
  nav .index_container {
    max-width: calc(var(--blu) * 30);
  }
  main .slider_container .project_container .project_text {
    top: 0;
    bottom: unset;
    max-width: calc(var(--vw) * 80);
    margin-bottom: unset;
    margin-top: calc(0px - var(--blu) * 0.16);
  }
  main .slider_container .project_container .project_text .details {
    max-width: calc(var(--blu) * 30);
    float: right;
  }
  main .slider_container.hide .project_container .project_text:not(.open) {
    transform: translateY(-100%);
  }
}
@media all and (min-width: 75em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 4 / Laptop / L / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: L_Laptop_Desktop;
    --blu: 27px ;
  }
}
@media all and (min-width: 120em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 5 / Desktop / XL / */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: XL_Desktop;
    --blu: 29px ;
  }
}

/*# sourceMappingURL=main-compiled.css.map */