/*--------------------------------------------------------------
# BREAKPOINTS
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# BASICS
--------------------------------------------------------------*/
*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  font-size: 14px;
  --color-text: #1E1E1E;
  --color-bg: #fff;
  --color-link: #de6565;
  --color-link-hover: #1E1E1E;
  --color-menu-stroke: #1E1E1E;
  --color-menu-item: #1E1E1E;
  --color-explore: #1E1E1E;
  --font-size-main-title: 2rem;
}

/* MEDIA QUERY */
@media (max-width: 768px) {
  :root {
    font-size: 12px;
  }
}
body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* .cursor {
	display: none;
} */
main {
  width: 100%;
  overflow: hidden;
}

a:hover,
a:focus {
  color: var(--color-link-hover);
  outline: none;
}

/*--------------------------------------------------------------
# PAGE LOADER
--------------------------------------------------------------*/
.js .loading::before {
  content: "";
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
}

.js .loading::after {
  content: "";
  position: fixed;
  z-index: 100000;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.4;
  /* background: var(--color-link); */
  background: var(--color-text);
  animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(0.5, 0.5, 1);
  }
}
/*--------------------------------------------------------------
# FRAME
--------------------------------------------------------------*/
.frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  pointer-events: none;
  text-align: center;
}

.frame__title-wrap {
  position: relative;
  margin: 2rem 5vw 0 5vw;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  gap: var(--font-size-main-title);
  text-align: left;
}

.frame__title {
  font-size: var(--font-size-main-title);
  margin: 0;
}

.frame__title a.backhome {
  color: var(--color-text);
  text-decoration: none;
  text-transform: none;
}

.frame a {
  pointer-events: auto;
  text-transform: lowercase;
}

.frame__tagline {
  margin: 0 !important;
  font-size: calc(var(--font-size-main-title) / 2);
  padding: calc(var(--font-size-main-title) / 2) 0 0 0;
}

.frame__tagline a {
  color: var(--color-menu-item) !important;
  text-decoration: none;
}

.frame__tagline a:hover {
  text-decoration: underline;
}

/* MEDIA QUERY */
@media (max-width: 768px) {
  .frame__title-wrap {
    flex-direction: column;
    gap: 0;
  }
  .frame__tagline {
    padding: 0 0 0 0;
  }
}
/*--------------------------------------------------------------
# ABOUT / CONTACT
--------------------------------------------------------------*/
.about, .contact {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100dvh;
  height: auto;
  background: var(--color-bg);
}

.about__wrap, .contact__wrap {
  margin: 2rem 5vw 0 5vw;
  position: absolute;
  width: 75%;
  bottom: 2rem;
  overflow-y: auto;
  background: var(--color-bg);
  max-height: calc(100dvh - 4rem);
}

.about__wrap p, .contact__wrap p {
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-menu-item);
  text-align: left;
}

.about__wrap p a, .contact__wrap p a {
  color: var(--color-menu-item);
  text-decoration: underline;
}

.about__wrap p a:hover, .contact__wrap p a:hover {
  text-decoration: none;
}

.about__wrap p strong, .contact__wrap p strong {
  font-weight: 600;
}

#about__close, #contact__close {
  position: fixed;
  z-index: 99999999;
  top: 2.5rem;
  right: 5vw;
  border: none;
  background: none;
  cursor: pointer;
}

/* MEDIA QUERY */
/*--------------------------------------------------------------
# PAGE / MENU
--------------------------------------------------------------*/
.page {
  height: auto;
  overflow-y: auto;
}

.menu-wrap {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}

.page--preview ~ .menu-wrap {
  pointer-events: auto;
}

.menu-draggable {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  /* cursor: grab; */
}

.menu-draggable:active {
  cursor: grabbing;
}

.menu {
  display: flex;
  width: 100vw;
  height: 100dvh;
  position: relative;
  justify-content: flex-start;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  counter-reset: menu-number;
  pointer-events: none;
  will-change: transform;
}

.menu__item {
  position: relative;
  text-align: center;
  margin: 0 10vw 0 0;
  --counter-opacity: 0;
  color: var(--color-menu-item);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.page--preview ~ .menu-wrap .menu__item {
  --counter-opacity: 1;
}

.menu__item::before {
  counter-increment: menu-number;
  content: counter(menu-number, decimal-leading-zero);
  position: absolute;
  top: 0;
  right: 100%;
  opacity: var(--counter-opacity);
  transition: opacity 0.3s;
}

.menu__item--current {
  color: var(--color-menu-item);
}

.menu__item-link {
  color: var(--color-menu-item);
  font-weight: 500;
  font-size: 12vw;
  display: flex;
  line-height: 1.2;
}

.menu__item-explore {
  font-size: 1rem;
  cursor: pointer;
  margin: 0.5rem 0 0 0;
  display: inline-block;
  color: var(--color-explore);
  text-decoration: underline;
  opacity: 0;
  padding: 0.5rem 0.5rem 0;
  will-change: transform;
}

.menu__item-explore:hover,
.menu__item-explore:focus {
  text-decoration: none;
}

.page--preview ~ .menu-wrap .menu__item--current .menu__item-explore {
  pointer-events: auto;
}

.letter {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.letter__inner {
  display: block;
  will-change: transform;
}

.letter__inner--stroke {
  position: absolute;
  left: 100%;
  top: 0;
  /* -webkit-text-stroke: 1px var(--color-menu-stroke);
  text-stroke: 1px var(--color-menu-stroke); */
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.5);
  -webkit-text-fill-color: var(--color-bg);
  text-fill-color: var(--color-bg);
  color: var(--color-bg);
  /* -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  color: transparent; */
  /* -webkit-text-fill-color: aqua;
  text-fill-color: aqua;
  color: aqua; */
  /* -webkit-text-fill-color: var(--color-menu-stroke);
  text-fill-color: var(--color-menu-stroke);
  color: var(--color-menu-stroke); */
}

.menu__item--current .letter__inner {
  transform: translate3d(-100%, 0, 0);
}

/*--------------------------------------------------------------
# GRID
--------------------------------------------------------------*/
.grid-wrap {
  display: grid;
  margin: 0 auto;
  grid-template-columns: 100%;
  position: relative;
  padding: 0rem 5vw;
  grid-template-rows: 7rem 1fr 7rem;
  min-height: 100dvh;
}

.gridback {
  position: fixed;
  top: 2.5rem;
  right: 5vw;
  align-self: center;
  grid-area: 1/1/2/2;
  justify-self: right;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  color: #fff;
  opacity: 0;
  cursor: pointer;
}

.gridback:hover {
  color: var(--color-link-hover);
}

.gridback:focus {
  outline: none;
}

.grid {
  grid-area: 2/1/3/2;
  --gridgap: 1vw;
  --gridwidth: 100%;
  display: grid;
  width: var(--gridwidth);
  grid-gap: var(--gridgap);
  align-content: start;
  justify-content: center;
}

.grid__item-wrap {
  position: relative;
  will-change: transform;
}

.grid__item::after {
  content: "";
  background: rgb(255, 255, 255);
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: opacity;
}

.page--preview .grid__item::after {
  opacity: 0.4; /* Opacity over the preview pictures */
}

.grid__item {
  opacity: 0;
  position: relative;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  will-change: transform;
}

.page--preview {
  position: relative;
  overflow: hidden;
  height: 100dvh;
  pointer-events: none;
}

.grid--layout-custom10 {
  display: grid;
  --grid-total-width: 90vw;
  --grid-column-amount: 10;
  --grid-gap-amount: calc( var(--grid-column-amount) - 1);
  --grid-gap-size: 2vw;
  --grid-segment-size: calc( ( var(--grid-total-width) - ( var(--grid-gap-amount) * var(--grid-gap-size) ) ) / var(--grid-column-amount) );
  grid-template-columns: repeat(10, var(--grid-segment-size));
  grid-auto-rows: var(--grid-segment-size);
  -moz-column-gap: var(--grid-gap-size);
       column-gap: var(--grid-gap-size);
  row-gap: var(--grid-gap-size);
}

.grid--layout-custom20 {
  display: grid;
  --grid-total-width: 90vw;
  --grid-column-amount: 20;
  --grid-gap-amount: calc( var(--grid-column-amount) - 1);
  --grid-gap-size: 2vw;
  --grid-segment-size: calc( ( var(--grid-total-width) - ( var(--grid-gap-amount) * var(--grid-gap-size) ) ) / var(--grid-column-amount) );
  grid-template-columns: repeat(20, var(--grid-segment-size));
  grid-auto-rows: var(--grid-segment-size);
  -moz-column-gap: var(--grid-gap-size);
       column-gap: var(--grid-gap-size);
  row-gap: var(--grid-gap-size);
}

.grid__item-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.5s linear, opacity 0.5s;
}

a.grid__trigger-link:hover .grid__item-overlay {
  visibility: visible;
  opacity: 0.75;
  transition: visibility 0.5s linear, opacity 0.5s;
}

a.grid__trigger-link,
a.grid__trigger-link:hover {
  color: var(--color-menu-item);
}

.grid__item-overlay p {
  position: absolute;
  bottom: 1rem;
  left: 1.5rem;
  padding-right: 1.5rem;
}

@media (max-width: 768px) {
  a.grid__trigger-link:hover .grid__item-overlay {
    visibility: hidden;
  }
}
/*--------------------------------------------------------------
# FSLIGHTBOX PRO
--------------------------------------------------------------*/
.fslightbox-container {
  background: var(--color-bg) !important;
}

.fslightbox-caption {
  position: fixed !important;
  z-index: 1 !important;
  width: 100% !important;
  background: none !important;
  transform: none !important;
  font-family: "Inter", sans-serif;
}

.fslightbox-caption-active {
  z-index: 1 !important;
}

.fslightbox-caption-inner {
  position: fixed;
  /* top: 9.5em;
  left: 0; */
  bottom: 2rem !important;
  left: 0 !important;
  line-height: 0.5em !important;
  color: var(--color-menu-item) !important;
  text-align: left !important;
  padding: 0 2rem !important;
  background: var(--color-bg) !important;
}

.fslightbox-caption-inner p {
  font-size: 1rem !important;
  font-weight: 300;
  line-height: 1.25rem;
}

.fslightbox-caption-inner p strong {
  font-weight: 600;
  padding-right: 2rem;
}

.fslightbox-caption-inner p a {
  color: var(--color-menu-item) !important;
  padding-left: 2rem;
}

.fslightbox-transform-transition {
  transform: scale(0.9) !important;
}

.fslightbox-slide-btn-container-previous {
  padding-left: 0 !important;
  width: 50%;
  height: 100vh;
}

.fslightbox-slide-btn-container-next {
  padding-right: 0 !important;
  width: 50%;
  height: 100vh;
}

.fslightbox-slide-btn {
  background: var(--color-bg) !important;
}

.fslightbox-svg-path {
  fill: var(--color-menu-item) !important;
}

.fslightbox-toolbar {
  background: var(--color-bg) !important;
}

.fslightbox-slide-number-container {
  color: var(--color-menu-item) !important;
  top: 0 !important;
  left: 0 !important;
  background: var(--color-bg) !important;
  padding: 1rem 4rem !important;
  z-index: 999 !important;
}

.fslightbox-slash {
  background: var(--color-menu-item) !important;
}

.fslightbox-toolbar {
  /* display: none !important; */
}

.fslightbox-slide-btn-container-next .fslightbox-slide-btn {
  position: absolute;
  right: 0;
}

.fslightbox-caption-active {
  z-index: 999 !important;
}

.fslightbox-toolbar {
  z-index: 999 !important;
}

.fslightbox-toolbar-button[title=Thumbnails],
.fslightbox-toolbar-button[title^="Zoom In"],
.fslightbox-toolbar-button[title^="Zoom Out"],
.fslightbox-toolbar-button[title^="Turn on slideshow"],
.fslightbox-toolbar-button[title^="Enter fullscreen"] {
  visibility: hidden;
  display: none;
}

.fslightbox-toolbar-button[title=Close] {
  visibility: visible;
}

/*--------------------------------------------------------------
# SCREEN SIZE INSPECTOR
--------------------------------------------------------------*/
#screen-size-inspector_box {
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  padding: 10px 20px;
  font-family: sans-serif;
  font-size: 1rem;
  color: #FFFFFF;
  z-index: 999999;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: none;
}

/* MEDIA QUERY *//*# sourceMappingURL=style.css.map */