@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

:root {
  --bg-color: #ffffff;
  --black: #000000;
  --grey: #b3b3b3;

  --marginDesktop: 2vw;
}

@font-face {
  font-family: "Neue Haas Grotesk Text Pro";
  src: url("../data/font/Neue_Haas_Grotesk_Text_Pro.otf") format("opentype");
  font-weight: normal;
}

::-moz-selection {
  color: var(--black);
  background: var(--grey);
}

::selection {
  color: var(--black);
  background: var(--grey);
}

.no-scroll {
  overflow: hidden;
}


* {
  margin: 0;
  padding: 0;
}

html, body {
  overflow-x: hidden;
}

body {
  background-color: var(--bg-color);
  color: var(--black);
  font-family: "Neue Haas Grotesk Text Pro", sans-serif;
  font-weight: normal;
  margin: 0 var(--marginDesktop) var(--marginDesktop) var(--marginDesktop);
}


.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: calc(var(--marginDesktop));
}

h1 {
  font-size: 18px;
  line-height: 23px;
  font-family: "Neue Haas Grotesk Text Pro", sans-serif;
  font-weight: normal;
  text-transform: uppercase;
}

p {
  font-size: 18px;
  line-height: 23px;
  text-wrap: pretty;
}

a {
  text-decoration: none;
  color: var(--black);
  transition: all 0.5s ease;
  cursor: pointer;
}

.mono {
  font-family: "Roboto Mono", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 17px;
  line-height: 22px;
  text-wrap: pretty;
  text-transform: uppercase;
}

.alignRight {
  display: flex;
  justify-content: flex-end;
}

main {
  margin-top: 23vh;
  min-height: calc(calc(var(--vh, 1vh) * 100) - 23vh - var(--marginDesktop));
}

#indexBody * {
  cursor: none;
}

.rot {
  transition: all 0.5s ease;
  cursor: pointer;
}

.rot:hover {
  transform: rotate(-10deg);
  transition: all 0.5s ease;
}

.active-rot {
  transform: rotate(-10deg);

}

/* Header */
header {
  position: sticky;
  top: 0;
  z-index: 901;
  width: 100%;
  padding-top: var(--marginDesktop);
}



.headerLogo {
  grid-column: 1 / span 2;
  width: max-content;
}

.navSelect {
  grid-column: 3 / span 3;
  -webkit-filter: blur(0px);
  filter: blur(0px);
}

.navSelect.blur {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

.menuContainer {
  grid-column: 12 / span 1;
  display: flex;
  justify-content: flex-end;
  z-index: 999;
}

#menuOpenIndex {
  transform: rotate(0deg);
  transition: all 0.5s ease;
}

#menuOpenIndex.active {
  transform: rotate(-10deg);
}



/* Pagination */

.pagination,
.paginationMobile {
  position: fixed;
  bottom: calc(var(--marginDesktop));
  display: flex;
  gap: 1rem;
}

.pagination.singlePage,
.paginationMobile.singlePage {
  display: none !important;
}

.paginationMobile {
  display: none;
  position: fixed;
  bottom: calc(var(--marginDesktop) * 2);
  margin-top: 4rem;
  gap: 1rem;
}

.pagination svg,
.paginationMobile svg {
  height: 1rem;
}

.pagination .npage,
.paginationMobile .npage {
  display: flex;
}

/*Index*/
#headerMenuIndex.open {
  opacity: 1;
}

body#indexBody {
  cursor: none;
}

#menu.open * {
  cursor: auto;
}



#headerMenuIndex {
  opacity: 0;
  transition: opacity 0.5s ease;
  top: calc(var(--marginDesktop) * 2);
  padding-top: var(--marginDesktop);
}

/*About*/
.aboutInfo {
  grid-column: 3 / span 6;
}

.aboutInfo p {
  margin-bottom: 1rem;
}

.aboutContainer {
  margin-top: calc(100vh / 6);
}

.imageAbout-main {
  grid-column: 3 / span 6;
}

.imageAbout-main img {
  width: 100%;
}

.aboutImageContainer:nth-child(odd) .imageAbout {
  grid-column: 8 / span 5;
  order: 2;
}

.aboutImageContainer:nth-child(even) .imageAbout {
  grid-column: 3 / span 5;
  order: 1;
}

.aboutImageContainer:nth-child(odd) .imageAbout_description {
  grid-column: 3 / span 3;
  display: flex;
  align-items: flex-end;
  order: 1;
}

.aboutImageContainer:nth-child(even) .imageAbout_description {
  grid-column: 10 / span 3;
  display: flex;
  align-items: flex-end;
  order: 2;
}

.imageAbout img {
  width: 100%;
}

/**/
.html5-video-player a {
  display: none !important;
}

/*Contact*/
.contactInfo {
  grid-column: 3 / span 5;
}

.socialMedia {
  grid-column: 9 / span 2;
}

.socialMedia h1 {
  width: max-content;
}

/*Menu*/
.menuSelectHeader {
  transform: rotate(0deg);
  transition: rotate ease 800ms;
}

.navSelect {
  opacity: 1;
  transition: opacity 0.5s ease;
}

#menu.open .navSelect {
  transition: opacity 0.5s ease;
  opacity: 0;
}


#menu.open .menuSelectHeader {
  transform: rotate(-10deg);
}

#menu {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100vw - var(--marginDesktop) * 2);
  height: calc(calc(var(--vh, 1vh) * 100) - var(--marginDesktop) * 2);
  margin: var(--marginDesktop);
  pointer-events: none;
}

#menu.open {
  pointer-events: all;
  z-index: 900;
}

.menuBackground {
  transition: opacity ease 800ms, visibility ease 800ms;
  background: rgba(232, 232, 237, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  visibility: hidden;
  position: fixed;
  opacity: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 900;
}

#menu.open .menuBackground {
  visibility: visible;
  opacity: 1;
}

.menuContent {
  position: relative;
  width: 100%;

  top: 50%;
  transform: translate(0, -50%);
  z-index: 901;
}

.menuHeader {
  grid-column: 3 / span 3;
  display: flex;
  flex-direction: column;
  gap: calc(var(--marginDesktop) * 2);
  visibility: visible;
  opacity: 1;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease;
}

#menu.open .menuHeader {
  visibility: visible;
  opacity: 1;
}

.menuHeader h1 {
  width: max-content;
  cursor: pointer !important;
}

.language {
  position: absolute;
  display: flex;
  gap: calc(var(--marginDesktop) / 4);
  bottom: 0;
  right: 0;
  z-index: 901;
  opacity: 0;
  transition: opacity ease 800ms;
}

.language h1:hover {
  cursor: pointer !important;
}

#menu.open .language {
  opacity: 1;
}

/*Agenda*/
.agendaFilters {
  gap: 2rem;
  display: flex;
  flex-direction: column;
}

.archive {
  cursor: pointer;
  color: var(--black);
  transition: color 0.5s ease;
  margin-bottom: 0.5rem;
}

.archive:hover {
  color: var(--grey);
}

.archiveCategory,
.filterCategory {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 1s ease;
}

.filterCategory.open,
.archiveCategory.open {
  max-height: 1080px;
  margin-bottom: 3rem;
}

.category {
  cursor: pointer;
  color: var(--black);
  transition: color 0.5s ease;
  margin-bottom: 0.5rem;
}

.categoryDisco {
  color: black !important;
}

.category:hover {
  color: var(--grey);
}


.agendaFilters h1 {
  width: max-content;
  transition: all 0.5s ease;
}

.agendaFilters h1.selected {
  transform: rotate(-10deg);
}


.agendaFilters p.selected {
  color: var(--grey);
}




.filterSelected {
  transform: rotate(-10deg);
  transition: all 0.5s ease;
}

.agendaItems {
  margin-top: calc(15px + 0.390625vw);
}

#mainAgenda .agendaItems:hover {
  color: var(--black) !important;
  cursor: auto;
}

.next svg,
.previous svg {
  cursor: pointer;
  stroke-width: 1px;
  stroke: var(--black);
  transition: stroke 0.5s ease;
}

.next svg:hover,
.previous svg:hover {
  stroke: var(--grey);
}

.dateAgenda {
  grid-column: 1 / span 2;
}

.projectAgenda {
  grid-column: 1 / span 4;
}

.locationAgenda {
  grid-column: 5 / span 3;
}

.categoryAgenda {
  grid-column: 10 / span 1;
}

.groupAgenda {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: calc(var(--marginDesktop));
  grid-column: 3 / span 7;
}

/*Selected Work*/
aside {
  grid-column: 1 / span 2;
}

.agendaMain {
  grid-column: 3 / span 10;
}

.agenda {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: calc(var(--marginDesktop));
}

.agendaItems {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: calc(var(--marginDesktop));
}

.details {
  margin-bottom: 1rem;
}



.content h1 {
  margin-bottom: 1rem;
}

.projectWork {
  grid-column: 1 / span 5;
}

.categoryWork {
  grid-column: 6 / span 3;
}

.durationWork {
  grid-column: 9 / span 1;
}

.yearWork {
  grid-column: 10 / span 1;
}

.gapGrid {
  grid-column: 1 / span 11;
}

.workMain {
  grid-column: 3 / span 6;
}

.workDescription {
  grid-column: 10 / span 3;
  height: fit-content;
}

.workDescription .content {
  max-height: calc(var(--vh, 1vh) * 70);
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s ease;
}

.workDescription.open .content,
.workDescription.small .content {
  max-height: calc(var(--vh, 1vh) * 1000);
}

.workDescription .blockRead {
  background-image: linear-gradient(0deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0) 100%);
  min-height: 20vh;
  bottom: 0;
  width: 100%;
  position: absolute;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.workDescription.open .blockRead,
.workDescription.small .blockRead {
  opacity: 0;
}

.workDescription .readMore {
  margin-top: 2rem;
}

.workDescription .readMore::after {
  content: "Read More";
}

.workDescription.open .readMore::after {
  content: "Close";
}

.workDescription.small .readMore {
  display: none;
}

.headerIndex {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: calc(100vw - var(--marginDesktop) * 2);
  row-gap: 0.5rem;
}

.mainImage img {
  width: 100%;
  margin-top: calc(100vh / 6);
}

.mainImageMobile {
  display: none;
}

.imageWork,
.videoWork {
  grid-column: 8 / span 5;
  margin-top: calc(100vh / 12);
}

.videoWork {
  position: relative;
  padding-bottom: 66.66%;
  /* HD */
}

.videoWork iframe {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.imageWork:nth-child(even),
.videoWork:nth-child(even) {
  grid-column: 8 / span 5;
  margin-top: calc(100vh / 12);
}

.imageWork:nth-child(odd),
.videoWork:nth-child(odd) {
  grid-column: 3 / span 6;
  margin-top: calc(100vh / 12);
}

.imageWork img {
  width: 100%;
}

.fixedWork {
  grid-column: 1 / span 2;
  position: fixed;
}

.fixedAudio {
  grid-column: 1 / span 2;
  position: fixed;
  width: calc((100vw - var(--marginDesktop) * 2) / 12 * 2 - (var(--marginDesktop) / 2));
  bottom: var(--marginDesktop);
  display: flex;
  justify-content: space-between;
  z-index: 2;
}

.fixedAudio h1 {
  width: max-content;
}

#playButton {
  cursor: pointer;
}

.creditPhotoWork {
  grid-column: 11 / span 2;
  display: flex;
  justify-content: flex-end;
  margin-top: calc(15px + 0.390625vw);
  align-items: flex-end;
}

.grid .agendaItems:hover .itemImage img {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.itemImage img {
  transition: opacity 0.5s ease;

  width: 100%;
  opacity: 0;
}

.itemImage {
  position: absolute;
  transform-origin: center;
  transform: translate(0, -50%);
  pointer-events: none;
}

.itemImage img {
  grid-column: 3 / span 3;
  width: 100%;
}

.gridInside {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: calc(var(--marginDesktop) / 2);
}

/*Discography*/
.discographyImage {
  position: absolute;
  width: calc((100vw - var(--marginDesktop) * 2) / 12 * 3 - (var(--marginDesktop)));
}

.discographyImage img {
  width: 100%;
}

.projectDiscography {
  grid-column: 1 / span 4;
}

.typeDiscography {
  grid-column: 5 / span 2;
}

.categoryDiscography {
  grid-column: 7 / span 2;
}

.publisherDiscography {
  grid-column: 9 / span 1;
}

.yearDiscography {
  grid-column: 10 / span 1;
}

.discographyMain {
  grid-column: 3 / span 4;
}

.track {
  margin-bottom: calc(15px + 0.390625vw);
}

.discoTitle {
  margin-bottom: calc((15px + 0.390625vw) * 2);
}

.listen,
.shop {
  width: 50%;
}

.listen_shop {
  margin-top: 1rem;
  grid-column: 3 / span 2;
  display: flex;
}

.workTitle {
  margin-top: 1rem;
}

.workTitle+.work {
  margin-top: 2rem;
}

.imageDisco {
  position: fixed;
  z-index: -1;
  bottom: var(--marginDesktop);
  right: var(--marginDesktop);
}

.imageDisco img {
  grid-column: 9 / span 4;
  width: 100%;
}

.agendaItems {
  color: var(--black);
  transition: color 0.5s ease;
}

.agendaItems:hover {
  color: var(--grey);
  cursor: pointer;
}

@media only screen and (max-width: 700px) {
  body {
    margin: calc(var(--marginDesktop) * 2);
  }

  h1 {
    font-size: 16px;
    line-height: 21px;
    font-family: "Neue Haas Grotesk Text Pro", sans-serif;
    font-weight: normal;
    text-transform: uppercase;
  }

  p {
    font-size: 16px;
    line-height: 21px;
  }

  main {
    margin-top: 5rem;
  }

  .mainContent {
    overflow: hidden;
  }

  main .generalMain.grid {
    margin-bottom: 4rem;
  }

  #menu {
    width: calc(100vw - var(--marginDesktop) * 4);
    margin: calc(var(--marginDesktop) * 2);
  }

  .pagination {
    display: none;
  }

  .pagination.all {
    margin-top: 2rem;
    position: initial;
  }

  .paginationMobile,
  .pagination.all {
    display: flex;
  }

  /* Header */

  header {
    top: calc(var(--marginDesktop) * 2);
    width: calc(100vw - var(--marginDesktop) * 4);
  }

  .menuHeader {
    gap: calc(var(--marginDesktop) * 4);
    grid-column: 1 / span 12;
  }

  .headerIndex {
    width: calc(100vw - var(--marginDesktop) * 4);
    grid-template-columns: auto;
  }

  .headerLogo {
    grid-column: 1 / span 5;
  }

  .navSelect {
    display: none;
  }

  .menuContainer {
    grid-column: 10 / span 3;
    display: flex;
    justify-content: flex-end;
  }

  .language {
    bottom: calc(var(--marginDesktop) * 2);
    right: calc(var(--marginDesktop));
  }

  #composer {
    order: 3;
  }

  /*Agenda*/
  aside {
    grid-column: 1 / span 12;
  }

  .agendaFilters {
    gap: 1rem;
    position: initial;
    grid-column: 1 / span 8;
    margin-bottom: 3rem;
  }

  .agendaMain {
    grid-column: 1 / span 12;
  }

  .agendaItems {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: calc(var(--marginDesktop));
  }

  .agenda {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: calc(var(--marginDesktop));
  }

  .agendaFilters h1 {
    width: max-content;
  }

  .dateAgenda {
    grid-column: 1 / span 3;
  }

  .projectAgenda {
    grid-column: 1 / span 9;
  }

  .locationAgenda {
    grid-column: 1 / span 9;
  }

  .agenda .locationAgenda {
    display: none;
  }

  .categoryAgenda {
    display: none;
  }

  .groupAgenda {
    grid-template-columns: repeat(9, 1fr);
    grid-column: 4 / span 9;
  }

  .gapGrid {
    display: none;
  }

  /*Discography*/
  .projectDiscography {
    grid-column: 1 / span 7;
  }

  .typeDiscography {
    display: none;
  }

  .categoryDiscography {
    display: none;
  }

  .itemImage {
    display: none;
  }

  .publisherDiscography {
    grid-column: 8 / span 3;
  }

  .yearDiscography {
    grid-column: 11 / span 2;
  }

  /*Selected work*/
  .projectWork {
    grid-column: 1 / span 6;
  }

  .categoryWork {
    grid-column: 7 / span 4;
  }

  .durationWork {
    display: none;
  }

  .yearWork {
    grid-column: 11 / span 2;
  }

  /*selected work single*/
  .fixedWork {
    grid-column: 1 / span 12;
    margin-bottom: 3rem;
    position: initial;
  }

  .fixedWork h1 {
    width: max-content;
  }

  .fixedAudio {
    position: fixed;
    width: calc(100vw);
    bottom: 0;
    left: 0;
    transform-origin: center;
    background-color: var(--bg-color);
    background: rgba(232, 232, 237, 0.4);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(8px);
  }

  .fixedAudio h1 {
    padding: calc(var(--marginDesktop) * 1.5);
  }

  .workMain {
    grid-column: 1 / span 12;
  }

  .workDescription {
    grid-column: 1 / span 12;
    margin-top: 4rem;
  }

  .mainImage {
    display: none;
  }

  .mainImageMobile {
    display: block;
    margin-top: 8vh;
  }

  .mainImageMobile {
    grid-column: 1 / span 12;
  }

  .mainImageMobile img {
    width: 100%;
  }

  .imageWork:nth-child(even),
  .videoWork:nth-child(even) {
    grid-column: 4 / span 9;
  }

  .imageWork:nth-child(odd),
  .videoWork:nth-child(odd) {
    grid-column: 1 / span 12;
  }

  .creditPhotoWork {
    grid-column: 1 / span 12;
    justify-content: flex-start;
  }

  /*Discography single*/
  .discographyMain {
    grid-column: 1 / span 12;
  }

  .listen_shop {
    margin-top: 2rem;
    grid-column: 1 / span 6;
    display: flex;
  }


  .imageDisco {
    grid-column: 1 / span 12;
    position: initial;
    z-index: -1;
  }

  .imageDisco img {
    grid-column: 1 / span 12;
    margin-top: 4vh;
  }

  /*about*/
  .aboutInfo {
    grid-column: 1 / span 12;
  }

  .aboutContainer {
    margin-top: 8vh;
  }

  .imageAbout-main {
    grid-column: 1 / span 12;
  }

  .imageAbout-main img {
    width: 100%;
  }

  .gapAbout {
    display: none;
  }

  .imageAbout_description {
    grid-column: 1 / span 12;
    margin-bottom: 4vh;
  }

  .aboutImageContainer:nth-child(odd) .imageAbout {
    grid-column: 4 / span 9;
  }

  .aboutImageContainer:nth-child(even) .imageAbout {
    grid-column: 1 / span 9;
    order: 2;
  }

  .imageAbout_description {
    grid-column: 1 / span 12;
  }

  .aboutImageContainer:nth-child(even) .imageAbout_description {
    grid-column: 1 / span 12;
    order: 1;
  }

  .aboutImageContainer:nth-child(odd) .imageAbout_description {
    grid-column: 1 / span 12;
  }

  /*contact*/
  .contactInfo {
    grid-column: 1 / span 12;
  }

  .socialMedia {
    margin-top: calc((17px + 0.390625vw) * 2);
    grid-column: 1 / span 12;
  }
}

#cursor svg {
  height: 0.8rem;
  width: auto;
}

#cursor h1 {
  font-size: 16px;
}

#cursor {
  position: fixed;
  pointer-events: none;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  pointer-events: none;
}

#cursor.activeCursor {
  display: none;
}

#indexBody main {
  min-height: auto;
  margin: 0;
}

#indexBody .headerIndex * {
  pointer-events: all;
}

#indexBody .menuContainer {
  display: block;
  width: auto;
  margin-left: auto;
}

#world {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: all;
  z-index: -1;
}

.items {
  transition: opacity 650ms ease;
}

.items.hidden {
  opacity: 0;
}

.cmplz-cookiebanner-container * {
  cursor: default !important;
  font-size: 14px;
}