/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* general */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
  animation: fadeInAnimation ease 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

figure {
  display: flex;
  justify-content: center;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.bodyfixed {
  position: fixed;
}

.hidden,
.fade-in {
  opacity: 0;
  -webkit-transition: opacity 350ms ease-out;
  -moz-transition: opacity 350ms ease-out;
  -o-transition: opacity 350ms ease-out;
  transition: opacity 350ms ease-out;
}

.appear {
  opacity: 1;
  -webkit-transition: opacity 350ms ease-in;
  -moz-transition: opacity 350ms ease-in;
  -o-transition: opacity 350ms ease-in;
  transition: opacity 350ms ease-in;
}



picture img {
  width: 100%;
  height: 100%
}

/* .body__hidden {
  opacity: 0;
  transition: opacity 300ms ease-out;
} */

.hide_desktop {
  display: none;
}

.title__mobile {
  display: none;
}

.menu__color {
  color: white;
}

.menu__color:hover {
  color: white;
}

footer {
  padding: 300px 0px 20px 20px;
  display: flex;
  gap: 20px;
  color: black;
}

.findex {
  position: absolute;
  bottom: 0px;
}

.block {
  max-width: 100vw;
  margin: 110px 0 130px 0;
  position: relative;
  padding: 20px 0;
  /* border: 1px solid red; */
}

[data-template="work"] article:first-of-type .block {
  margin: 20px 0 130px 0;
}

.block-type-text {
  margin: 2rem 0 0 20px;
  padding: 0;
}
.block-type-slider {
  /* height: 90vh; */
  width: 100vw;
  overflow: hidden;
  height: 90vh;
}

/* .block:first-child {
margin-top: 70px;
} */

.main--section {
  position: relative;
  padding-top: 10px;
  /* padding-right: var(--main--margin); */
  /* top: 80px; */
  background-color: white;
  min-height: var(--full-height);
}

.main--margin {
  padding-left: var(--main--margin);
}

.framing-full {
  width: 100vw
}

body[data-template="work"] a.framing-full {
  margin-left: -20px;
}

.framing-medium {
  width: 70vw;
  object-fit: contain;
}

.framing-small {
  width: calc(((100vw / 2)) - (var(--main--gap) / 2));
  justify-content: center;
  display: flex;
}

.framing-tiny {
  width: 30vw;
}

/* .align-center {
  display: flex;
  justify-content: center;
  width: var(--body--width);
} */

.image__portrait {
  width: auto;
  max-height: 80vh;
  height: auto;
}

.align-left {
  display: flex;
  justify-content: flex-start;
  margin-left: var(--main--margin);
}

.align-right {
  display: flex;
  justify-content: flex-end;
  margin-right: var(--main--margin);
}

.align-justify {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  padding: 0 20px;
  gap: 20px
}

.align-center {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  width: var(--body--width);
  padding: 0 20px;
  align-items: center;
}

.align-center.gap {
  gap: 20px;
}

.align-tiny {
  display: flex;
  justify-content: center;
  padding: 0 20px;
  gap: 20px
}

.gallery--picture {
  width: calc(((var(--body--width) / 2)) - (var(--main--gap) / 2));
}

.video__width {
  width: 100%;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* arrow on sorting button */

/* * .asc, .desc {
  color: var(--second--type--color);
}

* .desc::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 10px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 5px solid #C2C2C2;
}

* .asc::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 10px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 5px solid #C2C2C2;
} */


/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* header */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.header {
  display: flex;
  position: fixed;
  top: 0px;
  width: 100%;
  height: var(--nav--height);
  padding: 0px var(--main--margin);
  padding-right: 30px;
  align-items: center;
  justify-content: flex-end;
  color: white;
  mix-blend-mode: difference;
  z-index: 4;
}


/* .projects_nav nav {
  background-color: var(--main--color);
}

.header ul {
  margin: 0px 20px 0px 0px;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.header li a {
  display: block;
  padding: 10px 0px 10px 26px;
  text-decoration: none;
}

/* .header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
} */

/* .header .logo {
  display: block;
  text-decoration: none;
}

.arquitects {
  left: var(--align--arch);
  position: absolute;
  } */

/* menu */

/* .header .menu {
  position: absolute;
  display: flex;
  right: 0px;
  top: 65px;
  max-height: 0;
  opacity: 0;
  width: calc(100% - var(--main--margin));
  justify-content: end;
  background-color: var(--main--color);
  transition: max-height 200ms ease-out, opacity 200ms ease-out;
} */

/* menu icon */

/* .header .menu-icon {
  cursor: pointer;
  display: inline-block;
  position: relative;
  user-select: none;

}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 1px;
  position: relative;
  transition: background 200ms ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all 100ms ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 6px;
}

.header .menu-icon .navicon:after {
  top: -6px;
} */

/* menu btn */
/* 
.header .menu-btn {
  display: none;
}

.header .menu-btn:checked~.menu {
  max-height: 240px;
  opacity: 1;
}

.header .menu-btn:checked~.menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked~.menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked~.menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
  top: 0;
} */

/* DESKTOP 48em = 768px */



.header ul {
  margin: 0;
}

/* .header li {
    float: left;
  } */

.header li a {
  padding: 0px 0px;
  margin-left: 30px;
  /* color: var(--second--type--color); */
}

.header .menu {
  position: static;
  /* clear: none;
    float: right; */
  max-height: none;
  opacity: 1;
  width: fit-content;
  justify-content: end;
  background-color: transparent;
}

.header .menu-icon {
  display: none;
}

.menu {
  display: flex;
  justify-content: flex-end;

}

/* .page__active_projects_Home {
  color: var(--second--type--color) !important
  }

  .page__active_projects_Home:hover {
  color: var(--main--type-color) !important
  }

  .page__active_studio_Home:hover {
  color: var(--main--type-color) !important
  } */



/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* WORK */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.title--position {
  /* padding: 15px 0 50px 0; */
  padding-bottom: 50px;
}

.bottom--space {
  padding-bottom: 90px;
}

.padding--caption {
  padding-top: 20px;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* INDEX */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.index--image--position {
  position: fixed;
  right: 20px;
  top: var(--main--alignment);
  transition: opacity 250ms ease-out;
  /* opacity: 0; */
  display: none;
}

a:hover .index--image--position {
  transition: opacity 250ms ease-in;
  /* opacity: 1; */
  display: block;
}

.index--image {
  display: flex;
  object-fit: contain;
  object-position: right top;
  max-width: 40vw;
  height: 60vh;
}

.content--alignment {
  /* position: absolute; */
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--main--alignment) - 10px);
  width: calc(var(--body--width) - (var(--main--margin) * 2));
}

.index_a {
  width: fit-content;
  display: flex;
}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* PROJECT */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.project__header {
  display: flex;
  position: sticky;
  top: 0;
  padding-top: 10px;
  margin-left: 20px;
  color: white;
  mix-blend-mode: difference;
  z-index: 2;
}
.project__name {
  min-width: 50ch;
  margin-right: 20px;
}

.project__data_margin {
  margin-top: 2rem;
}

.project__description {
  max-width: 45ch;
}

.first__article:first-child {
  margin-top: 2rem;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* INFORMATION */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.information__text {
  max-width: 77ch;
  padding-bottom: 3rem;
}

.sec__container {
  padding-top: 10px;
  padding-left: var(--main--margin);
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* CONTACTS */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.contacts--image--position {
  position: absolute;
  top: 78px;
  right: 20px;
}

.contacts--image {
  height: 70vh;
  max-width: 45vw;
  width: auto;
}

.contacts--align {
  padding-top: 8px;
}

/* Vimeo responsive container */
.vimeo-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  width: 100%;
}

.vimeo-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* Allow clicks to pass through to parent link when Vimeo is inside an anchor */
a .vimeo-container {
  pointer-events: none !important;
  cursor: pointer !important;
}

a .vimeo-container iframe {
  pointer-events: none !important;
  cursor: pointer !important;
}

/* Make the anchor itself clickable */
a:has(.vimeo-container) {
  cursor: pointer !important;
  display: block !important;
}