@font-face {
  font-family: myFirstFont;
  src: url(/assets/content/fonts/BananaGrotesk-Regular.woff);
}

@font-face {
  font-family: Nebula-Effervescent;
  src: url(/assets/content/fonts/Nebula-Effervescent.woff);
}

@font-face {
  font-family: Italian-Alien;
  src: url(/assets/content/fonts/Italian-Alien.woff);
}

@font-face {
  font-family: herbus;
  src: url(/assets/content/fonts/HerbusTRIAL-Bold.woff);
}

@font-face {
  font-family: Nirvana-Bold;
  src: url(/assets/content/fonts/Nirvana-Bold.woff);
}

@font-face {
  font-family: Ouroboros-Regular;
  src: url(/assets/content/fonts/Ouroboros-Regular.woff);
}


@font-face {
  font-family: TINY5x3-60;
  src: url(/assets/content/fonts/TINY5x3-60.woff);
}


body {
  /* background-color: white; */
  color: black;
  font-family: myFirstFont;
  font-weight: 300;
  font-size: 1vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.home {
  background-color: black;
}

.transition > * {
  cursor: wait;
  overflow: hidden;
}

.transition-home-club {
  background-color: white;
  transition: .5s ease-in-out;
}

.block-scroll {
  overflow-y: hidden;
}

.block-scroll .home {
  background-color: white;
  transition: background-color 0.3s ease-in-out;
  transition-delay: 1.3s;
}

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

/* INIT */
.lazyload,
.lazyloading {
  opacity: 0;
}

.lazyloaded {
  opacity: 1;
  transition: opacity 500ms;
}

header {
  position: fixed;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  padding: 0.5vw;
  box-sizing: border-box;
  z-index: 1000;
  color: white;
  mix-blend-mode: difference;
  left: 0;
}

header .header-wrapper {
  display: flex;
  flex: 1;
  /* align-items: center; */
}

header .header-wrapper:first-child {
  padding-right: 0.5vw;
  box-sizing: border-box;
}

header .header-wrapper:last-child {
  padding-left: 0.5vw;
  box-sizing: border-box;
}

header .rows-wrapper {
  display: flex;
  flex: 1;
  padding-right: 1vw;
}

header .rows-wrapper .rows:first-child {
  padding-right: 1vw;
}

.video-intro {
  background-color: black;
}

.video-intro video {
  opacity: 1;
  transition:opacity .5s ease-in-out;
}

.hide-intro-video {
  opacity: 0 !important;
}
/* FOOTER */

footer {
  width: 50%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  padding: 0.5vw;
  box-sizing: border-box;
  color: white;
  z-index: 10000;
  mix-blend-mode: difference;
}



.tags-list .rounded-button {
  height: 1vw;
  width: 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border: white 0.08vw solid;
  padding: 0.25vw;
  border-radius: 1vw;
  margin-right: 0vw;
  transition: background-color .25s ease-in-out, color .25s ease-in-out;
}

.tags-list {
      justify-content: center;
      display: flex;
      z-index: 1000;
}

.tags-list  .button:hover {
  background-color: white;
  color: black;
}

.amplitude-shuffle-on {
  background-color: white;
  color: black;
}

.amplitude-shuffle {
  cursor: pointer;
}

.player .tags-list {
  display: flex;
  transform: translateY(0%);
  transition: transform .5s ease-in-out;
}

.transition-home-club .player .tags-list {
  transform: translateY(200%);
}

.tags-list .button {
  height: 1vw;
  display: flex;
  border: white 0.08vw solid;
  padding: 0.25vw;
  border-radius: 0.25vw;
  margin-right: 0.5vw;
  line-height: 1.1;
  transition: background-color .25s ease-in-out, color .25s ease-in-out;
}

.button {
  height: 1vw;
  display: flex;
  border: white 0.08vw solid;
  padding: 0.25vw;
  border-radius: 0.25vw;
  margin-right: 0.5vw;
  line-height: 1.1;
  transition: background-color .25s ease-in-out, color .25s ease-in-out;
  text-transform: uppercase;
}

.tags-list .button:last-child {
  margin-right: 0;
}

.tags-list .button span {
  text-transform: uppercase;
}

.tags-list .shuffle-button {
  border-radius: 1vw !important;
  padding-left: 0.5vw !important;
  padding-right: 0.5vw !important;
}

.tags-list .active {
  background-color: white;
  color: black;
}

/* MAIN */
main {
  box-sizing: border-box;
  width: 100vw;
  overflow: scroll;
  height: 100vh;
  -webkit-box-shadow: 0px 0px 54px -17px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 54px -17px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 54px -17px rgba(0,0,0,0.75);
  background-color: white;
}

.home {
  margin-top: 0;
}
.transition-home-club main {
  background-color: white;
}

.markers-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  vertical-align: middle;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.5vw;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity .5s ease-in-out;
  /* transition-delay: .5s; */
}

.transition-home-club .markers-wrapper {
  opacity: 0;

}

.home-page-markers {
  height: 10vmax;
  width: auto;
  transition: transform 1s ease-in-out;
  transition-delay: .5s;
  margin-right: 1vw;
}

.home-page-markers img {
  height: 100%;
  filter: grayscale();
  transition: filter .1s ease-in-out;
}

.home-page-markers:hover img {
  filter: grayscale(0);
}

.markers-wrapper .active .home-page-markers {
  /* transform: translate(-50%, -50%) scale(1); */
  transform-origin: center center;
  mix-blend-mode: initial !important;
  z-index: 10;
  color: white;
}

#home-covervideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  opacity: 1;
  transition: opacity .5s ease-in-out;
}
.transition-home-club #home-covervideo {opacity: 0 !important;}

.home {
  height: 100vh;
}

.club {
  /* padding-bottom: 3vw; */
  /* background-color: #f2f2f2; */
}

/* PLAYER */
.player {
  width: 100vw;
  /* height: 10vh; */
  position: fixed;
  bottom: 0;
  padding: 0.5vw;
  box-sizing: border-box;
  z-index: 1000;
  color: white;
  mix-blend-mode: difference;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.player .track-playlist-section {
  width: 22vw;
  display: flex;
}


.to-hide {
  transform: translateY(0%);
  transition: transform .4s ease-in-out;
}
.player-hide .to-hide {
  transform: translateY(250%);
  mix-blend-mode: normal;
}

.this-is-home #go-back-home {
  background-color: white;
}

#go-back-home {
  background-color: transparent;
}

#go-back-home:hover {
  background-color: white;
  transition: 0 !important;
}

.player-wrapper {
  flex-grow: 1;
  display: flex;
  padding-left: 0.8vw;
  padding-right: 0.8vw;
  box-sizing: border-box;
}

.player .rounded-button {
  height: 1vw;
  width: 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border: white 0.08vw solid;
  padding: 0.25vw;
  border-radius: 1vw;
  margin-right: 0vw;
  line-height: 1.1;
  transition: background-color .25s ease-in-out, color .25s ease-in-out;


}

.player .button {
  height: 1vw;
  display: flex;
  border: white 0.08vw solid;
  padding: 0.25vw;
  border-radius: 0.25vw;
  margin-right: 0.5vw;
  line-height: 1.1;
  transition: background-color .25s ease-in-out, color .25s ease-in-out;


}

.player .button:hover {
  background-color: white;
  color: black;
}

.player .rounded-button:hover {
  background-color: white;
  color: black;
}

.player .button:last-child {
  margin-right: 0;
}

.player .track-nav .button:nth-child(3){
  margin-right: 0;
}

.player .row {
  flex-grow: 1;
  align-items: center;
  flex: 1;
}

.player .row:first-child {
  padding-right: 0.5vw;
  box-sizing: border-box;
}

.player .row:last-child {
  padding-left: 0.5vw;
  box-sizing: border-box;
}

/* PLAYER CONTROLS*/
.player .controls {
  display: flex;
  align-items: center;
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

.player-index .controls {
  opacity: 0;
  pointer-events: none;
}

.player-index {
  mix-blend-mode: difference;
}

.player .controls .play-pause {
  display: flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  height: 100%;
  cursor: pointer;
  padding-right: 0.5vw;
  width: 1vw;
}

.player .controls .amplitude-playing {
  margin-top: 0.01vw;
  content: url(/assets/content/icons/pause.svg);
  height: 0.8vw;
  line-height: 0;
}

.player .controls .amplitude-paused {
  margin-top: 0.01vw;
  content: url(/assets/content/icons/play.svg);
  width: 0.8vw;
  height: 0.8vw;
  line-height: 0;
}

.player .controls .progress {
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.player .controls>input, progress {
  position: absolute;
  display: flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
}

.player .controls input {
  z-index: 3 !important;
}

.player .controls .progress progress {
  height: 0.15vw;
  pointer-events: none !important;
  -webkit-appearance: none;
  width: calc(100% - 0.5vw);
}

.player .controls .time {
  width: 2.5vw;
  padding-left: 0.5vw;
}

/* PLAY */
.player .controls .progress .amplitude-song-played-progress::-webkit-progress-bar {
  background: transparent !important;
  z-index: 2;
}

/* PLAY PROGRESS */
.player .controls .progress .amplitude-song-played-progress::-webkit-progress-value {
  background: grey !important;
  z-index: 2;
}

/* BUFFERED */
.player .controls .progress .amplitude-buffered-progress::-webkit-progress-bar {
  background: #b3b3b3 !important;
  z-index: 2;
}

.player .controls .progress .amplitude-buffered-progress::-webkit-progress-value {
  background: #e6e6e6 !important;
  z-index: 1
}

.player .controls .progress input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 1vw;
  width: 1vw;
  border-radius: 1vw;
  background: grey;
  cursor: pointer;
}

/* PLAYER INFOS */
.player .infos {
  display: flex;
}

.player .track-nav {
  display: flex;
  align-items: center;
  vertical-align: middle;
  flex-grow: 1;
  justify-content: flex-end;
  width: 1vw;
  height: 1vw;
}

.player .infos .track-nav .amplitude-nav {
  height: 1vw;
  width: 1vw;
  display: flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
}

.player-index .track-nav .amplitude-nav {
  opacity: 0 !important;
  pointer-events: none;
}

.hidden {
  display: none !important;
}

.player .infos .track-title {
  opacity: 1;
  transition: opacity .5s ease-in-out
}

.player-index .infos .track-title {
  opacity: 0;
  pointer-events: none;
}

.player .infos .track-nav .row-nav {
  cursor: pointer;
}

.player .infos .track-nav .amplitude-next:hover {
  /* margin-right: 50%; */
}

.player .infos .index-wrapper {
  display: flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  height: 100%;
  cursor: pointer;
  box-sizing: border-box;
}

.player .infos .index-wrapper span {
  content: url(/assets/content/icons/index.svg);
  height: 0.8vw;
  line-height: 0;
}

.player-index .infos .index-wrapper span {
  content: url(/assets/content/icons/chapter.svg);
  height: 0.8vw;
  line-height: 0;
}

.club .player {
  transform: translateY(100%);
}

/* INTRO */
.intro-category {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 2vw;
  padding-bottom: 1vw;
  box-sizing: border-box;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
}

.intro-category .row {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-size: 6.4vw;
  text-transform: uppercase;
  margin-bottom: 0.5vw;
  margin-top: 0.5vw;
  border: 1vw solid black;
  border-radius: 33.33vw;
  transform: translateX(0%);
  transition: transform .5s ease-in-out;
  background-color: white;
}

.from-home-page .intro-category .row {
  transform: translateX(101%);
}

.intro-category .row:last-child {
  margin-bottom: 0;
  transition-delay: 0.5s;
}

.intro-category .row:nth-child(2) {
  transition-delay: 0.25s;
}

.intro-category .row:first-child {
  margin-top: 0;
}

/* STYLIZED BY CLUB */
/* BAIA */
.club .baia-del-angeli .row {
  font-family: Nebula-Effervescent;
  font-size: 9vmax;
  background-color: #ead369;
  color: #ce5576;
  border-color: #ce5576;
}

.club .baia-del-angeli .row:hover {
  background-color: #ce5576;
  color: #ead369;
  border-color: #ead369;
}

/* COSMIC */
.club .cosmic-club .row {
  font-family: Italian-Alien;
  font-size: 10vmax;
  background-color: #c5dfff;
  color: #ff904e;
  border-color: #ff904e;
  border-style: dotted;
}

.club .cosmic-club .row a {
  margin-top: -1.5vmax;
}

.club .cosmic-club .row:hover {
  background-color: #ff904e;
  color: #c5dfff;
  border-color: #c5dfff;
}

/* TABU */
.club .tabu-club .row {
  font-family: Totem-Regular;
  font-size: 8vmax;
  background-color: green;
  color: yellow;
  border-color: yellow;
}

.club .tabu-club .row a {
  /* margin-top: 1vmax; */
}

.club .tabu-club .row:hover {
  background-color: yellow;
  color: green;
  border-color: green;
}

/* NEW-YORK */
.club .new-york .row {
  font-family: Nirvana-Bold;
  font-size: 8vmax;
  background-color: coral;
  color: antiquewhite;
  border-color: antiquewhite;
}

.club .new-york .row a {
  /* margin-top: 1vmax; */
}

.club .new-york .row:hover {
  background-color: antiquewhite;
  color: coral;
  border-color: coral;
}

.intro-category .row:nth-child(odd) {}

/* CHAPTER */
.chapters {
  position: absolute;
  top: 0;
  left: 0;
  transition: left .5s ease-in-out;
}

.chapter-leave {
  left:-100%;
  /* transform: top .5s ease-in-out; */
  transition-delay: .25s ease-in-out;
}

.chapter-leave footer {
  display: none;
}

.chapter-enter .close-chapter {
  display: none;
}
.chapter-enter header {
  display: none;
}

.chapter-enter {
  top: 0;
  left: 0;
  animation: slideIn .5s ease-in-out;
}

@-webkit-keyframes slideIn {
  0% {
    left: 100%;
  }

  100% {
    left: 0;
  }
}

.prev .chapter-leave {
  left: 100%;
}

.prev .chapter-enter {
  animation: prevSlideIn .5s ease-in-out;
}

@-webkit-keyframes prevSlideIn {
  0% {
    left: -100%;
  }

  100% {
    left: 0;
  }
}

.playlist-next-transition .chapters{
  top: 0;
  transition: top .5s ease-in-out !important;
}


.playlist-next-transition .chapter-leave {
  top: -100%;
  left: 0;
  transition: top .5s ease-in-out !important;
}
.playlist-next-transition .chapter-enter header {
  display: flex !important;
}

.playlist-next-transition .chapter-enter {
  top: 0;
  left: 0;
  animation: slideTop .5s ease-in-out !important;
}

@-webkit-keyframes slideTop {
  0% {
    top: 100%;
  }

  100% {
    top: 0;
  }
}

.playlist-prev-transition .chapters{
  top: 0;
  transition: top .5s ease-in-out !important;
}


.playlist-prev-transition .chapter-leave {
  top: 100%;
  left: 0;
  transition: top .5s ease-in-out !important;
}
.playlist-prev-transition .chapter-enter header {
  display: flex !important;
}

.playlist-prev-transition .chapter-enter {
  top: 0;
  left: 0;
  animation: slideDown .5s ease-in-out !important;
}

@-webkit-keyframes slideDown {
  0% {
    top: -100%;
  }

  100% {
    top: 0;
  }
}



.close-chapter {
  display: flex;
  height: 1vw;
  width: 1vw;
  z-index: 1000000;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: fixed;
  top: 0.5vw;
  right: 0.5vw;
  mix-blend-mode: difference;
}

.close-chapter img {
  height: 100%;
  width: 100%;
}

/* INDEX */
#index-club-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  background-color: white;
}

#index-club-wrapper > * {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

.transition-home-club #index-club-wrapper > * {
  opacity: 0;
}

#index-club-wrapper > *:nth-child(1) { transition-delay: 0 }
#index-club-wrapper > *:nth-child(2) { transition-delay: .25s }
#index-club-wrapper > *:nth-child(3) { transition-delay: 0.5s }
#index-club-wrapper > *:nth-child(4) { transition-delay: 0.75s } */




/* HAS TO CHANGE FOR EACH CLUB */
#index-club-wrapper #title-wrapper {

}

#index-club-wrapper #title-wrapper .logo {
  position: absolute;
  height: 30%;
  width: auto;
  box-sizing: border-box;
  transform-origin: bottom left;
  transform: rotate(-10deg);
  z-index: 0;
}

#index-club-wrapper #title-wrapper .logo img {
  height: 100%;
}

#index-club-wrapper #narrators {
  font-family: serif;
  font-size: 0.8vw;
  display: flex;
  position: absolute;
  font-family: myFirstFont;
  text-transform: none;
  line-height: 1;
  flex-direction: column;
  width: 20vw;
  height: 7.15vw;
  justify-content: space-between;
}

#index-club-wrapper #narrators .narrator-wrapper {
  display: flex;
  justify-content: space-between;
}

#index-club-wrapper #narrators .col-narrators-name {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#index-club-wrapper #narrators .col-narrators-name li {
  list-style: none;
  line-height: 1.2;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  /* width: 80%; */
  text-align: right;
}


#index-club-wrapper #title-wrapper {
  overflow: hidden;
}
.tana-club #title-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  /* flex-direction: column; */
  font-family: Nebula-Effervescent;
  text-transform: uppercase;
  font-size: 9vw;
  line-height: 0.8;
  background-color: blanchedalmond;
  color: slategrey;
  padding: 0.5vw;
  padding-top: 1vw;
  box-sizing: border-box;
  position: relative;
}

.tana-club #title-wrapper span:first-child {
  width: 100%;
}

.tana-club #narrators {
  right: 0.5vw;
  height: 6.35vw !important;
  width: 21.5vw !important;
}
.tabu-club #title-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  /* flex-direction: column; */
  font-family: Nirvana-Bold;
  text-transform: uppercase;
  font-size: 9vw;
  line-height: 0.8;
  background-color: cornflowerblue;
  color: ivory;
  padding: 0.5vw;
  padding-top: 1vw;
  box-sizing: border-box;
  position: relative;
}

.tabu-club #title-wrapper span:nth-child(2) {
  width: 100%;
}

.tabu-club #narrators {
  right: 0.5vw;
  bottom: 16.7vh;
  height: 5.8vw !important;
  width: 30vw !important;
}


.baia-del-angeli #title-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  /* flex-direction: column; */
  font-family: herbus;
  text-transform: uppercase;
  font-size: 9vw;
  line-height: 0.8;
  background-color: orangered;
  color: maroon;
  padding: 0.5vw;
  padding-top: 1vw;
  box-sizing: border-box;
  position: relative;
}

.baia-del-angeli #title-wrapper span {
  text-align: center;
}

.baia-del-angeli #title-wrapper span:nth-child(4) {
  width: 100%; text-align: left;
}

.baia-del-angeli #narrators {
  right: 0.5vw;
  height: 6.8vw !important;
  width: 20vw !important;
}

.la-melody-mecca #title-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  font-family: Ouroboros-Regular;
  text-transform: uppercase;
  font-size: 4.3vw;
  line-height: 0.8;
  background-color: red;
      color: yellow;
  padding: 0.5vw;
  padding-top: 1.5vw;
  box-sizing: border-box;
  position: relative;
}

.la-melody-mecca #title-wrapper span {
  text-align: center;
}


.la-melody-mecca #narrators {
  right: 0;
  bottom: 0;
  padding: 0.5vw;
  box-sizing: border-box;
  height: 6.8vw !important;
  width: 100% !important;
}

.cosmic-club #title-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  font-family: Italian-Alien;
  text-transform: uppercase;
  font-size: 9vw;
  line-height: 0.7;
  background-color:  saddlebrown;
  color: slategrey;
  padding: 0.5vw;
  padding-top: 1.5vw;
  box-sizing: border-box;
  position: relative;
}

.cosmic-club #title-wrapper span {
}
.cosmic-club #title-wrapper span:first-child {
width:100%;
}


.cosmic-club #narrators {
  right: 0;
  bottom: 0;
  padding: 0.5vw;
  box-sizing: border-box;
  min-height: 6.8vw !important;
  height: auto !important;
  width: 50% !important;
  mix-blend-mode: color-dodge;
}


.new-york #title-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  font-family: TINY5x3-60;
  text-transform: uppercase;
  font-size: 12.2vw;
  font-feature-settings: 'ss03';
  line-height: 0.6;
  background-color: violet;
  color: revert;
  padding: 0.5vw;
  padding-top: 3vw;
  box-sizing: border-box;
  position: relative;
}

.new-york #narrators {
  right: 0;
  bottom: 0.5vw;
  padding: 0.5vw;
  box-sizing: border-box;
  height: 6.8vw !important;
  width: 50% !important;
}



/* SECTION LOOP */
#index-club-wrapper section {
  height: 50vh;
  width: 50vw;
  user-select: none;
  position: relative;
  background-color: white;
}


.url-wrapper:nth-child(odd):last-child section{
  width: 100vw !important;
  height: 100vh !important;
}

.url-wrapper:nth-child(odd):last-child section .section-content figure{
  height: 100vh !important;
}

.url-wrapper:nth-child(odd):last-child section .section-content figure video{
  height: 100vmax !important;
}
.section-infos {
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  mix-blend-mode: difference;
  width: 100%;
  display: flex;
  padding: 0.5vw;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity .25s ease-in-out;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hide {
  opacity: 0;
}

/* INDEX IMAGE LAYOUT */
.imagelayouts {
  height: 100%;
  padding: 0.5vw;
  box-sizing: border-box;
  background-color: #f2f2f2;
}


.imagelayouts figure {}

/* INDEX IMAGE LAYOUT ONE */
#index-club-wrapper .imagecontent .layout-one {
  display: flex;
  align-items: flex-start;
  background-color: white;
}

#index-club-wrapper .imagecontent .layout-one figure {
  position: relative;
  flex-grow: 1;
  height: 100%;
  padding: 0.5vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

#index-club-wrapper .imagecontent .layout-one figure:first-child {
  position: relative;
  flex-grow: 1;
  height: 100%;
  padding: 0.5vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
}

#index-club-wrapper .imagecontent .layout-one figure img {
  max-height: 70%;
  max-width: 100%;
}

/* IMAGE LAYOUT TWO */
#index-club-wrapper .imagecontent .layout-two {
  display: flex;
  align-items: flex-start;
  /* flex-wrap: wrap; */
}

#index-club-wrapper .imagecontent .layout-two figure {
  position: relative;
  flex-grow: 1;
  height: 100%;
  padding: 0.5vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

#index-club-wrapper .imagecontent .layout-two figure img {
  max-height: 100%;
  max-width: 90%;
}

/* IMAGE LAYOUT THREE */
#index-club-wrapper .imagecontent .layout-three {
  display: flex;
  align-items: flex-start;
  padding: 0;
  background-color: black;
  /* flex-wrap: wrap; */
}

#index-club-wrapper .imagecontent .layout-three figure {
  position: relative;
  flex-grow: 1;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  display: none;
}

#index-club-wrapper .imagecontent .layout-three figure:first-child {
  display: flex;
  justify-content: flex-end;
  padding-right: 1vw;
  box-sizing: border-box;
}

#index-club-wrapper .imagecontent .layout-three figure:nth-child(2) {
  display: flex;
  justify-content: flex-start;
  padding-left: 1vw;
}

#index-club-wrapper .imagecontent .layout-three figure img {
  max-height: 70%;
  max-width: calc(100% - 1vw);
}

/* IMAGE LAYOUT FOUR */
#index-club-wrapper .imagecontent .layout-four figure {
  display: none;
}

/* IMAGE LAYOUT FIVE */
#index-club-wrapper .imagecontent .layout-five {
  display: flex;
  align-items: flex-start;
  padding: 0;
  /* background-color: red; */
  /* flex-wrap: wrap; */
}

#index-club-wrapper .imagecontent .layout-five figure {
  position: relative;
  flex-grow: 1;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  display: none;
  overflow: hidden;
}

#index-club-wrapper .imagecontent .layout-five figure:first-child {
  display: flex;
  justify-content: flex-end;
  /* padding-right: 1vw; */
  box-sizing: border-box;
}

#index-club-wrapper .imagecontent .layout-five figure:nth-child(2) {
  display: flex;
  justify-content: flex-start;
  /* padding-left: 1vw; */
}

#index-club-wrapper .imagecontent .layout-five figure img {
  max-height: 70%;
  max-width: 100%;
}

/* IMAGE LAYOUT SIX */
#index-club-wrapper .imagecontent .layout-six {
  display: flex;
  align-items: flex-start;
  padding: 0;
  /* background-color: red; */
  /* flex-wrap: wrap; */
}

#index-club-wrapper .imagecontent .layout-six figure {
  position: relative;
  flex-grow: 1;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  display: none;
  overflow: hidden;
}

#index-club-wrapper .imagecontent .layout-six figure:first-child {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 2vw;
  box-sizing: border-box;
}

#index-club-wrapper .imagecontent .layout-six figure:nth-child(2) {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  /* padding-left: 1vw; */
}

#index-club-wrapper .imagecontent .layout-six figure img {
  max-height: 100%;
  max-width: 100%;
}

#index-club-wrapper .imagecontent .layout-six figure:first-child img {
  max-width: 50%;
}

#index-club-wrapper .imagecontent .layout-seven {}

#index-club-wrapper .imagecontent .layout-eight {}

#index-club-wrapper .imagecontent .layout-nine {}

#index-club-wrapper .imagecontent .layout-ten {}

/* video */
/* LAYOUT ONE */
#index-club-wrapper .videocontent .layout-one figure {
  overflow: hidden;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#index-club-wrapper .videocontent .layout-one figure video {
  height: 50vmax;
}

/* LAYOUT ONE */
#index-club-wrapper .videocontent .layout-two figure {
  overflow: hidden;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

#index-club-wrapper .videocontent .layout-two figure video {
  height: 70%;
  max-width: calc(100% - 2vw);
}

/* CHAPTER */

.chapter-wrapper .chapter-title {
  height: 100vh;
  width: 100vw;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  text-transform: uppercase;
  font-size: 10vw;
  mix-blend-mode: difference;
  color: white;
  animation: fadein 4s ease-in-out;
  text-align: center;
  pointer-events: none;
}

#subtitles-wrapper {
  position: fixed;
  bottom: 3.5vw;
  width: 100vw;
  font-size: 2vw;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 5vw;
  box-sizing: border-box;
  padding-bottom: 0;
  padding-top: 0;
  color: white;
  mix-blend-mode: difference;
  text-align: center;
}

.chapter-wrapper .random-archives {
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 999;
}

.chapter-wrapper .hidden-array {
  position: relative;
  height: 100vh;
  width: 100vw;
}

.chapter-wrapper .random-archives img {
  max-width: 50vw;
  max-height: 50vh;
  position: absolute;
  mix-blend-mode: hard-light;
  top: 0;
  left: 0;
}

.draggable {
  opacity: 1;
  transition: opacity .25s ease-in-out;
}

.draggable:hover {
  cursor: move !important;

}

.drag-hide {
  opacity: 0;
}

.chapter-wrapper video {
  filter: blur(0);
  transition: filter .5s ease-in-out;
}

.pause .chapter-wrapper video {
  filter: blur(10px);
}


.chapter-wrapper img {
  filter: blur(0);
  transition: filter .5s ease-in-out;
}


.pause .chapter-wrapper img {
  filter: blur(10px);
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.chapter-wrapper .videocontent{
  overflow: hidden;
  height: 100vh;
}

.chapter-wrapper .videocontent video {
    height: 100%;
    width: 177.77777778vh; /* 100 * 16 / 9 */
    min-width: 100%;
    min-height: 56.25vw; /* 100 * 9 / 16 */
}


.chapter-wrapper .videocontent .layout-one figure video {
  height: 100vmax;
}


.tana-club .chapter-wrapper .chapter-title span {
  font-family: Nebula-Effervescent !important;
}
.tabu-club .chapter-wrapper .chapter-title span {
  font-family: Nirvana-Bold !important;
}
.baia-del-angeli .chapter-wrapper .chapter-title span {
  font-family: herbus !important;
}
.new-york .chapter-wrapper .chapter-title span {
  font-family: TINY5x3-60 !important;
}
.la-melody-mecca .chapter-wrapper .chapter-title span{
  font-family: Ouroboros-Regular !important;
}
.cosmic-club .chapter-wrapper .chapter-title span {
  font-family: Italian-Alien !important;
}

/* VIDEOO */
.chapter-wrapper .videocontent .layout-two figure {
  overflow: hidden;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

.chapter-wrapper .videocontent .layout-two figure video {
  height: 70%;
  max-width: calc(100% - 2vw);
}
/* IMAGE LAYOUT CHAPTER */
/* LAYOUT ONE */
.chapter-wrapper .imagecontent .layout-one {
  display: flex;
  width: 100vw;
  flex-wrap: wrap;
}

.chapter-wrapper .imagecontent .layout-one .figure-wrapper {
  display: flex;
  width: 100vw;
}

.chapter-wrapper .imagecontent .layout-one .figure-wrapper:nth-child(odd) figure:nth-child(1){
  align-self: flex-end;
  width: 50vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chapter-wrapper .imagecontent .layout-one .figure-wrapper:nth-child(odd) figure:nth-child(1) img{
  height: 50%;
}

.chapter-wrapper .imagecontent .layout-one .figure-wrapper:nth-child(odd) figure:nth-child(2){
  align-self: flex-end;
  width: 50vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.chapter-wrapper .imagecontent .layout-one .figure-wrapper:nth-child(odd) figure:nth-child(2) img{
  height: auto;
  min-height: 100%;
  max-width: 100%;
}

.chapter-wrapper .imagecontent .layout-one .figure-wrapper:nth-child(even) figure:nth-child(2){
  align-self: flex-end;
  width: 50vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chapter-wrapper .imagecontent .layout-one .figure-wrapper:nth-child(even) figure:nth-child(2) img{
  height: 50%;
}

.chapter-wrapper .imagecontent .layout-one .figure-wrapper:nth-child(even) figure:nth-child(1){
  align-self: flex-end;
  width: 50vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.chapter-wrapper .imagecontent .layout-one .figure-wrapper:nth-child(even) figure:nth-child(1) img{
  height: auto;
  min-height: 100%;
  max-width: 100%;
}

/* LAYOUT TWO */

.chapter-wrapper .imagecontent .layout-two {
 display: flex;
 width: 100vw;
 flex-wrap: wrap;
 line-height: 0;

}
.chapter-wrapper .imagecontent .layout-two figure {
 padding: 0;
 margin: 0;
}

.chapter-wrapper .imagecontent .layout-two figure {
 width: 100vw;
}

.chapter-wrapper .imagecontent .layout-two figure img {
 width: 100%;
}

/* LAYOUT THREE */

.chapter-wrapper .imagecontent .layout-three {
  display: flex;
  width: 100vw;
  white-space: nowrap;
  overflow: scroll;
}

.chapter-wrapper .imagecontent .layout-three figure {
  height: 100vh;
}

.chapter-wrapper .imagecontent .layout-three figure img {
  height: 100%;
}

/* LAYOUT FOUR */

.chapter-wrapper .imagecontent .layout-four figure {
  width: 50vw;
  height: 100vh;
  display: flex;
}

.chapter-wrapper .imagecontent .layout-four figure:nth-child(odd){
  justify-content: flex-end;
  align-items: center;
}

.chapter-wrapper .imagecontent .layout-four figure:nth-child(even){
  justify-content: flex-start;
  align-items: center;
}

.chapter-wrapper .imagecontent .layout-four figure img {
  max-width:70%;
  max-height: 70%;
}

/* LAYOUT FIVE */

.chapter-wrapper .imagecontent .layout-five figure {
  width: 50vw;
  height: 100vh;
  display: flex;
}

.chapter-wrapper .imagecontent .layout-five figure:nth-child(odd){
  justify-content: flex-end;
  align-items: center;
}

.chapter-wrapper .imagecontent .layout-five figure:nth-child(even){
  justify-content: flex-start;
  align-items: center;
}

.chapter-wrapper .imagecontent .layout-five figure img {
  max-width:70%;
  max-height: 70%;
}

.chapter-wrapper .imagecontent .layout-five figure:nth-child(odd):last-child{
  justify-content: center;
  align-items: center;
  width: 100vw;
}

/* LAYOUT SIX */

.chapter-wrapper .imagecontent .layout-six {
  display: flex;
  width: 100vw;
  flex-wrap: wrap;
}

.chapter-wrapper .imagecontent .layout-six figure {
  width: 25vw;
  height: 100vh;
  display: flex;
  padding: 2vw;
  box-sizing: border-box;
}

.chapter-wrapper .imagecontent .layout-six figure:nth-child(odd){
  justify-content: flex-start;
  align-items: flex-start;
}

.chapter-wrapper .imagecontent .layout-six figure:nth-child(even){
  justify-content: center;
  align-items: flex-end;
}

.chapter-wrapper .imagecontent .layout-six figure img {
  max-width:70%;
  max-height: 70%;
}

/* LAYOUT SEVEN */

.chapter-wrapper .imagecontent .layout-seven figure {
  width: 25vw;
  height: 50vh;
  padding: 1vw;
  display: flex;
  box-sizing: border-box;
}

.chapter-wrapper .imagecontent .layout-seven figure:nth-child(odd){
  justify-content: center;
  align-items: center;
}

.chapter-wrapper .imagecontent .layout-seven figure:nth-child(even){
  justify-content: center;
  align-items: center;
}

.chapter-wrapper .imagecontent .layout-seven figure img {
  max-width:70%;
  max-height: 70%;
}

/* LAYOUT EIGHT */

.chapter-wrapper .imagecontent .layout-eight {
  display: flex;
  width: 100vw;
  flex-wrap: wrap;
}

.chapter-wrapper .imagecontent .layout-eight figure {
  display: flex;
}

.chapter-wrapper .imagecontent .layout-eight figure{
  width: 50vw;
}

.chapter-wrapper .imagecontent .layout-eight figure img{
  max-height: 100%;
  max-width: 100%;
}

.chapter-wrapper .imagecontent .layout-eight figure:last-child {
  width: 100vw;
}

/* LAYOUT NINE */
.chapter-wrapper .imagecontent .layout-nine {
  display: flex;
  width: 100vw;
  flex-wrap: wrap;
}

.chapter-wrapper .imagecontent .layout-nine figure {
  display: flex;
}

.chapter-wrapper .imagecontent .layout-nine figure{
  width: 25vw;
}

.chapter-wrapper .imagecontent .layout-nine figure img{
  max-height: 100%;
  max-width: 100%;
}
/* LAYOUT TEN */
.chapter-wrapper .imagecontent .layout-ten {
  display: flex;
  width: 100vw;
  flex-wrap: wrap;
}

.chapter-wrapper .imagecontent .layout-ten figure {
  display: flex;
}

.chapter-wrapper .imagecontent .layout-ten figure{
  width: 25vw;
}

.chapter-wrapper .imagecontent .layout-ten figure img{
  max-height: 100%;
  max-width: 100%;
}


/* ABOUT */
.about {
  background-color: #f2f2f2;
  height: 100vh;
  position: sticky;
  top:0;
      line-height: 1.1;
}
.col-wrapper {
  display: flex;
}

.col-wrapper .col {
  flex: 1;
  font-size: 2vw;
  padding: 0.5vw;
  box-sizing: border-box;
  hyphens: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 2.5vw;
  /* overflow: scroll;
  height: 100vh; */
}

.col-wrapper .tableau {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-top: 1vw;
  color: grey;
}

.col-wrapper .tableau .tb-col {
  flex: 100%;
  font-size: 1vw;
  display: flex;
  justify-content: space-between;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.15;
}
.col-wrapper .tableau .tb-col:hover {
  color:black;
}

.list-index {
  padding-bottom: 1vw;
  font-size: 1vw;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.list-index:first-child {
  margin-top: 1vw;
}

.list-index .list-wrapper {
      /* padding-top: 0.5vw; */
      display: flex;
      justify-content: space-between;
      color: grey;
}

.list-index .list-wrapper:hover {
  color: black;
}

.list-index > span {
  margin-bottom: 0.25vw !important;
}

.list-index:last-child {
  padding-bottom: 0;
}


.list-index .title{
  display: flex;
  width: 50%;
  padding-right: 0.5vw;
}

.list-index .small-infos-wrapper {
  display: flex;
  font-size: 1vw;
  flex: 1;
  padding-left: 0.5vw;
  /* font-size: 0.7vw; */
}

.list-index .small-infos-wrapper .infos {
  display: flex;
  flex: 1;
}

.list-index .small-infos-wrapper .infos span{
}



.list-index .small-infos-wrapper .infos span:first-child{
  padding-right: 0.5vw;
}


.list-index .small-infos-wrapper .infos:first-child {
padding-right: 0.5vw;
}
.list-index .small-infos-wrapper .infos:last-child {
padding-left: 0.5vw;
}

.list-index .images-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-top: 0.5vw;
}

.list-index .images-wrapper .figure{
/* flex: 1; */
margin: 1vw;
margin-left: 0;
margin-top: 0;
display: flex;
justify-content: center;
align-items: center;
vertical-align: middle;
}

.list-index .images-wrapper .video video{
/* flex: 1; */
width: 12.5vw;
flex: 0;
}

@media only screen and (max-width: 600px) {
  body {
    font-size: 2vw;
  }

  .player .button {
    height: 2.2vw !important;
  }

  .player .infos .track-nav .amplitude-nav {
    width: 2.2vw !important;
  }

  .player-wrapper {
    display: flex;
    flex-direction: column;
  }

  .player-wrapper div:nth-child(3){
    order: 1;
  }

  /* .player-wrapper div:nth-child(2){
    order: 2;
  } */

  .player .track-playlist-section {
    width: 100%;
    display: flex;
  }

  .player {
    padding-bottom: 1.5vw;
  }

  .player .controls .time {
      width: auto !important;
      padding-left: 0.5vw;
  }

  .player .rounded-button {
    width: 2.2vw !important;
    height:  2.2vw !important;
    border-radius: 2.2vw;
  }

  .col-wrapper {
    flex-direction: column;
  }

  .col-wrapper .col {
    font-size: 3vw;
  }
  .col-wrapper .about {
    min-height: 50vh;
    position: relative;
  }
  .col-wrapper .col:nth-child(1){
    order: 1;
  }
  .list-index {
    font-size: 2.2vw;
  }

  .small-infos-wrapper {
    font-size: 2.2vw !important;
  }
  .col-wrapper .tableau .tb-col {
    font-size: 2.2vw;
  }
}