@font-face {
  font-family: "monument";
  src: url("../fonts/ABCMonumentGrotesk-Regular-Trial.otf") format("opentype");
  font-style: normal;
}

img {
  pointer-events: none !important;
}

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  -moz-user-select: none;
  user-select: none; /* Standard syntax */
}
:root {
  --grid-column: repeat(8, 1fr);
  --s-grid-column: repeat(4, 1fr);
  --grid-gap: 10px;
}

body {
  font-family: "monument", sans-serif;
  font-size: 13px;
  line-height: 115%;
}

body a {
  color: inherit;
  text-decoration: none;
}

main {
  min-height: 100vh;
  min-height: 100svh;
}

.fixed-title {
  position: fixed;
  padding: var(--grid-gap);
  top: 0;
  left: 0;
  z-index: 1000000000000000;
  text-transform: uppercase;
}
header {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: var(--grid-column);
  grid-template-columns: var(--grid-column);
  gap: var(--grid-gap);
  padding: var(--grid-gap);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  z-index: 10000000000000;
}

header .title {
  text-transform: uppercase;
}
header .menu {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2 / 4; /* Start at column 8 and end at column 9 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
}

header a {
  color: lightgray;
}

header a:hover {
  color: black;
}

header .active {
  color: black !important;
}
header .about-nav {
  -ms-grid-column: 8;
  -ms-grid-column-span: 1;
  grid-column: 8 / 9; /* Start at column 8 and end at column 9 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.projects-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: var(--grid-column);
  grid-template-columns: var(--grid-column);
  gap: var(--grid-gap);
  padding: var(--grid-gap);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
}

.projects-wrapper .title-carousel {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2 / 4; /* Start at column 8 and end at column 9 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(100vh - 8rem);
  height: calc(100svh - 8rem);
  width: 100%;
}

.projects-wrapper .image-carousel {
  -ms-grid-column: 4;
  -ms-grid-column-span: 3;
  grid-column: 4 / 7; /* Start at column 8 and end at column 9 */
  height: 100vh;
  height: 100svh; /* Set the height as needed */
  overflow: hidden;
  width: 100%;
}
.projects-wrapper .image-carousel .keen-slider__slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.projects-wrapper .keen-slider__slide img {
  width: auto;
  height: auto;
  max-height: 65vh;
  max-width: 100%;
}


.image-carousel .keen-slider__slide a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.landscape {
  width: 100%;
}


.projects-wrapper .pagination {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2; /* Start at column 8 and end at column 9 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100vh;
  height: 100svh;
}

.image-carousel img {
  width: 100%;
  pointer-events: none;
}

.title-carousel .keen-slider__slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: lightgray;
  height: calc((100vh - 10rem) / 3);
  width: 100%;
}

.title-carousel .keen-slider__slide:hover {
  color: black;
  cursor: pointer;
}

.title-carousel .active {
  color: black;
}

.index-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: var(--grid-column);
  grid-template-columns: var(--grid-column);
  gap: var(--grid-gap);
  padding: var(--grid-gap);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: calc(100vw / 9);
  padding-bottom: calc(100vw / 4.5);

}

.index-wrapper .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
}

.index-wrapper .grid {
  -ms-grid-column: 2;
  -ms-grid-column-span: 7;
  grid-column: 2 / 9; /* Start at column 8 and end at column 9 */
  display: -ms-grid;
  display: grid;
  gap: 7rem;
  -ms-grid-columns: var(--s-grid-column);
  grid-template-columns: var(--s-grid-column);
}
.media-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.media-grid img {
  height: 3rem;
}

.project-wrapper {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  display: block;
}

.carousel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh !important;
  width: 100vw !important;
  overflow: hidden;
}

.carousel > * {

  display: grid;
  grid-template-columns: var(--grid-column);
  gap: var(--grid-gap);
  padding: calc(var(--grid-gap));
  padding-top: calc(var(--grid-gap) * 3);
  padding-bottom: calc(var(--grid-gap) * 3);

  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.carousel .image-wrapper {
  width: 100%;
  grid-column: 2 / 8;
  display: flex;
  align-items: center; /* Start at column 8 and end at column 9 */
  justify-content: center;
  height: calc(100vh - (var(--grid-gap) * 6.5));

}

.carousel .image-wrapper img {
  height: 100% !important;
  width: 100%  !important;
  object-fit: contain;
}

.project-wrapper .pagination {
  position: fixed;
  bottom: calc(var(--grid-gap));
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.about-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: var(--grid-column);
  grid-template-columns: var(--grid-column);
  gap: var(--grid-gap);
  padding: var(--grid-gap);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  height: 100vh;
  height: 100svh;
}

.about-wrapper .desc-about {
  -ms-grid-column: 2;
  -ms-grid-column-span: 4;
  grid-column: 2 / 6; /* Start at column 8 and end at column 9 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-grid-row-align: center;
  align-self: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.about-wrapper .contact-about {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  gap: var(--grid-gap);
  -ms-grid-column: 8;
  -ms-grid-column-span: 1;
  grid-column: 8 / 9; /* Start at column 8 and end at column 9 */
}

.credit-footer {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: var(--grid-column);
  grid-template-columns: var(--grid-column);
  gap: var(--grid-gap);
  padding: var(--grid-gap);
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: lightgray;
}

.transition-container {
  background: white;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform 0.2s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: transform 0.2s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 0.2s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 0.2s cubic-bezier(0.77, 0, 0.175, 1),
    -webkit-transform 0.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.transitionning {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.transition-fixed .transition-container {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  height: 100svh;
}

.transitionning-out {
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}

.index-menu {
  position: sticky;
  top: 0;
  background-color: white;
}

.title-carousel .keen-slider__slide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.title-carousel .text-wrapper {
  display: flex;
  gap: 0.25rem;
}
.title-carousel .text-wrapper span:first-child:after {
  content: ',';
}


.fake-title {
  display: none;
}


@media (max-width: 1200px) {
  .index-wrapper .grid {
    grid-template-columns:repeat(3, 1fr);;
  }

  .title-carousel .text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0rem;
    margin-top: 0.8rem;
  }

  .title-carousel .text-wrapper span:first-child:after {
    content: '';
  }
  
  

 
}

@media (min-width: 700px) and (max-width: 1095px) {
  header .title {
    width: max-content;
  }

  .projects-wrapper .pagination {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .projects-wrapper .pagination > span {
    flex: 1;
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    align-items: center;
  }

  .fake-title {
    display: flex;
    text-transform: uppercase;
    height: 0rem;
    opacity: 0;
  }

  .fake-title span {
    width: max-content;
  }
}


@media (max-width: 700px) {
  body {
    font-size: 13.6px;
  }
  header .menu {
    -ms-grid-column: 4;
    -ms-grid-column-span: 5;
    grid-column: 4 / 9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.5rem;
    -webkit-box-pack: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
  }

  header .title {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / 4;
  }

  .projects-wrapper .title-carousel {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1/4;
  }

  .projects-wrapper .pagination {
    position: fixed;
    bottom: 0;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding-bottom: 10px;
    box-sizing: border-box;
  }
  

  .projects-wrapper .image-carousel {
    -ms-grid-column: 4;
    -ms-grid-column-span: 5;
    grid-column: 4 / 9;
  }
  .carousel {
    height: 100svh !important;
    width: 100vw !important;
  }
  .carousel > * img {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain;
  }
  .project-menu .menu {
    grid-column: 1/8;
    z-index: 1000;
    justify-content: flex-start;
  }

  .project-menu .title {
    display: none;
  }

  .index-wrapper .grid {
    grid-column: 1/9;
  }

  .index-wrapper .grid {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
    box-sizing: border-box;
  }

  .fixed-title {
    z-index: 100;
    display: none;
  }

  header .title {
    opacity: 1 !important;
  }

  .media-grid img {
    height: 5rem;
  }

  .about-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .credit-footer {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
  }

  .about-nav a {
    padding: 1rem;
    margin-top: -1rem;
    margin-right: -1rem;
  }

  .carousel .image-wrapper {
    width: 100%;
    grid-column: 1 / 9;
  }

  .title-carousel .text-wrapper span:first-child:after {
    content: ',';
  }
  
}