:root {
  --default-spacing: 20px;
  --double-spacing: calc(var(--default-spacing) * 2);
  --half-spacing: calc(var(--default-spacing) / 2);
  --background-color: #FFF;
  --default-color: #222;
  --secondary-background-color: #D9D9D94D;
  --header-height: 60px;
  --default-transition-speed: .5s;
  --site-width: 990px;
}

/* ***** */
/* RESET, TO BE COMPLETED */
/* ***** */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  outline: none;
}

body {
  font-size: 16px;
}

p {
  font-family: "Open Sans", sans-serif;
  font-variation-settings: "wdth" 100;
}

ul, li {
  list-style: none;
}

a, a:visited, a:hover {
  /* important for safari */
  color: var(--default-color) !important;
  text-decoration: none;
}

h1 {
  font-size: 30px;
  font-weight: 700;
  padding: 0 var(--default-spacing);
  margin-top: var(--double-spacing);
  text-transform: uppercase;
}

h3, h3 * {
  font-size: 22px;
  font-weight: 700;
  line-height: 38px;
}

h2 {
  font-size: 30px;
  font-weight: 700;
}

h4 {
  font-size: 19px;
  font-weight: 600;
  line-height: 29px;
}

strong, b {
  font-weight: 700;
}

i {
  font-style: oblique;
}

@media (min-width: 600px) {
  h1 {
    padding: 0;
    font-size: 36px;
  }
}

/* ******************* */
/* HELPERS AND GENERAL */
/* ******************* */
#logo img {
  height: 15px;
}

/* */
main {
  min-height: 100vh;
  padding-top: var(--header-height);
  overflow-x: hidden;
}

.hidden {
  display: none !important;
}


/* CTA / links */
.button {
  border: 1px solid var(--default-color);
  background: transparent;
  padding: 10px;
  font-weight: 600;
  font-size: 16px;
  text-transform: capitalize;
  display: block;
  margin: var(--default-spacing) auto;
  width: max-content;
  cursor: pointer;
}

/* read more for long texts */
.more-p {
  display: flex;
  flex-direction: column;
}
.more-p p {
  transition: max-height 1s;
  overflow: hidden;
}
.more-p p:nth-child(n+2) {
  max-height: 0;
}

.more-p.all-p p {
  max-height: 100%;
}

.more-p .button {
  opacity: 1;
  transition: opacity .5s;
}

.more-p.all-p .button {
  opacity: 0;
  cursor: default;
}

/* filters */
.filters {
  margin: var(--default-spacing);
}

.filters button {
  border: 1px solid var(--default-color);
  border-radius: 200px;
  padding: 2px 18px;
  background-color: var(--background-color);
  margin: 0 var(--half-spacing) var(--half-spacing) 0; 
  font-size: 16px;
  cursor: pointer;
}

.filters button.active {
  background-color: var(--default-color);
  color: var(--background-color);
}

@media (min-width: 600px) {
  #logo img {
    height: 19px;
  }
  .filters {
    margin-left: 0;
  }
}

/* carousel */
.carousel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  align-items: stretch;
  scrollbar-color: transparent transparent;
}

.carousel article {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* forms */
ul.errorlist {
  border: 1px solid darkred;
  color: darkred;
  border-radius: 5px;
  padding: 5px;
}


/* ****** */
/* HEADER */
/* ****** */
body > header {
  position: fixed;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: var(--default-spacing);
  width: 100%;
  background-color: var(--background-color);
  box-shadow: 0 2px 4px 0px rgba(150, 150, 150, .5);
}

body > header #main-nav > ul {
  position: fixed;
  z-index: 10;
  left: 100vw;
  width: 100vw;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
  background-color: var(--background-color);
  transition: left 1s;
}

body > header #main-nav ul .active {
  font-weight: 700;
}

body > header #main-nav ul.language {
  display: flex;
  gap: 10px;
  text-transform: uppercase;
}

body > header #main-nav.visible ul {
  left: 0;
}


body > header #mobile-toggler img {
  height: 18px;
  width: auto;
  cursor: pointer;
}

@media (min-width:600px) {
  body > header {
    padding-left: calc(calc(100vw - var(--site-width)) / 2);
    padding-right: calc(calc(100vw - var(--site-width)) / 2);
  }
  body > header #mobile-toggler {
    display: none;
  }

  body > header #main-nav > ul {
    position: initial;
    width: auto;
    height: auto;
    flex-direction: row;
    gap: var(--double-spacing);
  }
}

/* ****** */
/* FOOTER */
/* ****** */
body > footer {
  /* revert */
  background-color: var(--default-color);
  color: var(--background-color);
  padding: var(--default-spacing);
  font-size: 14px;
}

body > footer #logo img {
  filter: invert(1);
}

body > footer section {
  padding: 1em 0;
}

body > footer p {
  margin-bottom: 1em;
}

body > footer a, body > footer a:visited, body > footer a:hover {
  color: var(--background-color);
  text-decoration: underline;
}

body > footer #newsletter-toggler a {
  cursor: pointer;
}

body > footer form {
  height: 0;
  overflow: hidden;
  transition: height var(--default-transition-speed);
}

body > footer form.visible {
  height: 130px;
  overflow: hidden;
}

body > footer form input[type=email] {
  padding: var(--default-spacing);
  width: 100%;
  border-radius: 11px;
  border: 1px solid #BDBDBD;
  background-color: transparent;
  color: var(--background-color);
}

body > footer .button {
  margin-left: 0;
  border-color: var(--background-color);
  color: var(--background-color);
}

@media (min-width:600px) {
  body > footer {
    padding-left: calc(calc(100vw - var(--site-width)) / 2);
    padding-right: calc(calc(100vw - var(--site-width)) / 2);
    display: flex;
    justify-content: space-between;
    gap: var(--double-spacing);
  }
  body > footer section:nth-child(n+2) {
    flex-grow: 2;
  }
}

/* social networks */
body > footer nav ul {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 30px 0 10px 0;
  font-size: 12px;
}

@media (min-width:600px) {
  body > footer nav ul {
    justify-content: flex-start;
    padding: 0;
  }
}

/* GDPR consent banner */
.gdpr-banner {
  position: fixed;
  bottom: 0;
  right: 0;
  width: min(100vw,500px);
  z-index: var(--overall-z);
  padding: 30px;
  display: flex;
  justify-content: space-between;
  background-color: var(--background-color);
  border: solid 1px var(--secondary-background-color);
  flex-wrap: wrap;
  align-items: flex-end;
}

.gdpr-message {
  padding: 15px 0;
}

.gdpr-control {
  display: contents;
}

.gdpr-control .label, .gdpr-control a {
  height: 2.5rem;
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid var(--secondary-background-color);
  padding: 10px;
  background-color: var(--background-color);
  background-repeat: no-repeat;
  background-position: 50%;
  cursor: pointer;
  align-items: center;
}

/* ********* */
/* HOME PAGE */
/* ********* */
/* carousel */
.news.carousel {
  width: 100vw;
  height: calc(100vh - var(--header-height));
  position: relative;
}

#news-bullets {
  display: none;
}

#vh-scroller {
  position: absolute;
  bottom: 20px;
  /* centering absolute element */
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

.news.carousel figure {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
}

.news.carousel figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news.carousel figure figcaption {
  position: absolute;
  /* centering absolute element */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 60px);
  bottom: 80px;
  background-color: var(--background-color);
  padding: 0 var(--default-spacing);
  text-align: center;
}

.news.carousel figcaption p {
  padding: 1em 0;
}

.news.carousel figcaption hr {
  border-bottom: 1px solid var(--default-color);
  width: 60px;
  margin: auto;
}

.news.carousel figcaption p:first-child {
  font-weight: 700;
}

.news.carousel figcaption p:nth-child(2n + 3) {
  font-style: italic;
}

.news.carousel figcaption p:nth-child(n + 4) {
  font-weight: 600;
  font-style: normal;
}

@media (min-width: 600px) {
  main > .current, main > .artists {
    padding-left: calc(calc(100vw - var(--site-width)) / 2);
    padding-right: calc(calc(100vw - var(--site-width)) / 2);
  }

  .news.carousel figure figcaption {
    max-width: var(--site-width);
    display: flex;
    justify-content: space-between;
  }

  .news.carousel figure figcaption div {
    display: flex;
    align-items: center;
  }
  
  .news.carousel figure figcaption hr {
    margin: var(--default-spacing);
    width: unset;
    height: 1.5em;
  }
  .news.carousel figure figcaption .button {
    margin: var(--half-spacing) 0;
    justify-self: flex-end;
  }

  #news-bullets {
    display: flex;
    gap: 10px;
    align-items: center;
    position: absolute;
    bottom: 55px;
    /* centering absolute element */
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    color: var(--background-color);
  }
  
  #news-bullets span {
    display: inline-block;
    box-sizing: content-box;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--background-color);
  }
  
  #news-bullets span.active {
    background: transparent;
    border: 1px solid var(--background-color);
  }

  .current h3 {
    margin-bottom: var(--double-spacing);
  }
}

/* current exhibition */
.current {
  padding: var(--default-spacing);
}

.current img {
  width: 100%;
  padding: var(--default-spacing) 0;
}

.current em {
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  display: inline-block;
  margin: var(--default-spacing) 0;
}

.current .button {
  margin-top: var(--double-spacing);
}

@media (min-width: 600px) {
  .current {
    padding-top: var(--double-spacing);
  }
  .current figure {
    display: flex;
    gap: var(--double-spacing);
  }
  .current figure img {
    flex: 45% 0 0;
  }

  .current figcaption {
    padding: var(--default-spacing) 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .current figcaption .button {
    margin-left: 0;
  }
}

/* list of artists */
.artists {
  padding: var(--default-spacing) 0;
  background-color: var(--secondary-background-color);
}

.artists h3 {
  padding: 0 var(--default-spacing);
  display: flex;
  justify-content: space-between;
}

.artists > div {
  transition: max-height var(--default-transition-speed);
  max-height: 400px;
  overflow-y: hidden;
}
.artists .carousel {
  gap: var(--half-spacing);
  margin-top: var(--default-spacing);
}

.artists article:first-child, .artists article:last-child {
  max-width: 10px;
}

.artists article {
  max-width: 136px;
}

.artists article img {
  width: 136px;
  aspect-ratio: 136/180;
  object-fit: cover;
  filter: grayscale(1);
}

.artists article p {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 0px 5px;
}

.artists nav {
  display: none;
}

.artists h3 button {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
  transform: rotate(-180deg);
  height: 38px;
  padding: 4px 0px;
  transition: transform var(--default-transition-speed);
}

.artists.closed h3 button {
  transform: rotate(0deg);
}

@media (min-width:600px) {
  .artists {
    padding-bottom: var(--double-spacing);
  }
  .artists h3 {
    margin-top: var(--double-spacing);
    padding: 0;
    font-size: 30px;
  }
  .artists .carousel {
    gap: calc(35% - 271px);
    width: calc(100% - 90px);
    margin: var(--double-spacing) auto;
  }
  .artists article {
    max-width: 271px;
  }
  .artists article:first-child, .artists article:last-child {
    display: none;
  }	       
  .artists article img {
    width: 271px;
    aspect-ratio: 1;
  }
  .artists > div {
    max-height: 500px;
    position: relative;
  }

  .artists nav {
    position: absolute;
    width: 100%;
    top: 39%;
    display: flex;
    justify-content: space-between;
  }

  .artists nav button {
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid var(--background-color);
    background: none;
    width: 30px;
    height: 30px;
    filter: invert(1);
    transform: rotate(90deg);
  }
  
  .artists nav button:last-child {
    transform: rotate(-90deg);
  }

  .artists nav button img {
    width: 15px;
  }
  
}

/* ***** */
/* ABOUT */
/* ***** */
.about main h1, .about main figcaption, .about main form {
  padding: var(--default-spacing);
}

.about main h1 {
  font-weight: 700;
}
  
.about main h2 {
  font-weight: 700;
  font-size: 22px;
  margin: var(--default-spacing) 0;
}

.about main figure img {
  width: 100%;
  height: auto;
  margin: var(--default-spacing) 0;
}

.about main form {
  background-color: var(--secondary-background-color);
}

.about main form p {
  margin-bottom: var(--half-spacing);
}

.about main form p img {
  float: left;
  clear: left;
  margin-right: var(--half-spacing);
}

.about main form fieldset {
  border: none;
}

.about main form input[type=text],
.about main form input[type=email],
.about main form textarea {
  padding: var(--default-spacing);
  width: 100%;
  border-radius: 11px;
  border: 1px solid #BDBDBD;
}

.about main .button {
  color: var(--background-color);
  background-color: var(--default-color);
}

@media (min-width:600px) {
  .about main section, .about main form, .about main h1 {
    padding-left: calc(calc(100vw - var(--site-width)) / 2);
    padding-right: calc(calc(100vw - var(--site-width)) / 2);
  }
  .about main figure, .about main form {
    display: flex;
    gap: var(--default-spacing);
    align-items: flex-start;
  }
  .about main section figure img, .about main form div:first-child {
    flex: 45% 0 0;
  }
  
  .about main h1 {
    font-size: 36px;
    margin-top: var(--default-spacing);
  }
  .about main h2 {
    font-size: 30;
  }

  .about form img {
    aspect-ratio: 5/4;
    object-fit: cover;
    object-position: top center;
  }
}


/* *********** */
/* ARTIST LIST */
/* *********** */
.list-artists h1 {
  font-size: 30px;
  font-weight: 700;
  padding: 0 var(--default-spacing);
  margin-top: var(--double-spacing);
}

.list-artists #display-toggler button {
  border: none;
  cursor: pointer;
  padding: 0 0 0 10px;
}

.list-artists #display-toggler button.active {
  background-color: var(--background-color);
  color: var(--default-color);
  font-weight: 700;
}

.list-artists main section {
  display: flex;
  flex-wrap: wrap;
  gap: var(--half-spacing);
  justify-content: center;
}

.list-artists main article {
  max-width: 136px;
  margin-bottom: var(--default-spacing);
}

.list-artists main article img {
  width: 136px;
  aspect-ratio: 136/180;
  object-fit: cover;
  filter: grayscale(1);
}

.list-artists main article p {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 0px 5px;
}

.list-artists .list article {
  flex: 60% 0 0;
  margin-bottom: 0;
  max-width: unset;
}

.list-artists .list article a:first-child {
  display: none;
}
.list-artists .list article p {
  text-align: left;
  font-size: 16px;
}

@media (min-width:600px) {
  .list-artists main {
    padding-left: calc(calc(100vw - var(--site-width)) / 2);
    padding-right: calc(calc(100vw - var(--site-width)) / 2);
  }
  .list-artists main h1 {
    padding-left: 0;
    margin-bottom: var(--double-spacing);
  }
  .list-artists main section {
    justify-content: space-between;
    gap: var(--double-spacing);
    margin-bottom: var(--double-spacing);
  }
  .list-artists main article {
    max-width: unset;
    flex: 30% 0 0;
  }
  .list-artists main article img {
    width: 100%;
    aspect-ratio: 1;
  }
  .list-artists main article p {
    font-size: 18px;
  }

  .list-artists .list article p {
    font-size: 22px;
  }

  .list-artists .list {
    display: block;
    column-count: 2;
    line-height: 2.5em;
  }
}

/* ********** */
/* ONE ARTIST */
/* ********** */
.one-artist h1 {
  font-weight: 700;
  font-size: 36px;
  padding: var(--default-spacing) 0;
}

.one-artist main section {
  padding: var(--default-spacing);
}

.one-artist main section img {
  width: 100%;
  height: auto;
  margin-bottom: var(--default-spacing);
  filter: grayscale(1);
}

.one-artist main section h2 {
  font-size: 22px;
  margin-bottom: var(--default-spacing);
}

.one-artist .artists h3 button {
  display: block;
}

.one-artist .artists.closed > div {
  max-height: 0;
}

@media (min-width:600px) {
  .one-artist main section, .one-artist .artists {
    padding-left: calc(calc(100vw - var(--site-width)) / 2);
    padding-right: calc(calc(100vw - var(--site-width)) / 2);
  }
  .one-artist main section.prez {
    display: flex;
    flex-wrap: wrap;
    gap: var(--double-spacing);
  }
  .one-artist main .prez h1 {
    flex: 100%;
  }
  .one-artist main .prez > div:nth-child(2) {
    flex: 40%;
  }
  .one-artist main .prez > div:last-child {
    flex: 55%;
  }
  .one-artist main section h2 {
    font-size: 30px;
  }
}

.banner {
  position: relative;
  height: 90px;
}
.banner h1 {
  color: var(--background-color);
  position: absolute;
  bottom: 0;
}
.banner img {
  width: 100%;
  height: 90px;
  object-fit: cover;
}

@media (min-width:600px) {
  .banner, .banner img {
    height: 120px;
  }
  .banner h1 {
    padding-left: calc(calc(100vw - var(--site-width)) / 2);
    padding-right: calc(calc(100vw - var(--site-width)) / 2);
  }
}

/* ********** */
/* EXHIB LIST */
/* ********** */
.list-exhibitions h1 {
  margin: var(--default-spacing) 0;
  font-size: 36px;
  font-weight: 700;
}

.list-exhibitions main figure {
  position: relative;
  margin-bottom: var(--default-spacing);
}

.list-exhibitions main figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.14;
  object-fit: cover;
}

.list-exhibitions main figcaption {
  position: absolute;
  /* centering absolute element */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 60px);
  background-color: var(--background-color);
  padding: var(--default-spacing);
  padding-bottom: 0;
  text-align: center;
}

.list-exhibitions main figcaption h2 {
  font-weight: 600;
  font-size: 18px;
  line-height: 110%;
}
.list-exhibitions main figcaption h3 {
  font-weight: 600;
  font-size: 14px;
  line-height: 110%;
}
.list-exhibitions main figcaption p {
  font-weight: 400;
  font-style: italic;  
  font-size: 15px;
  line-height: 100%;
}

@media (min-width:600px) {
  .list-exhibitions main section {
    margin-bottom: var(--double-spacing);
    padding: 0;
  }
  .list-exhibitions main section, .list-exhibitions .filters, .list-exhibitions h1 {
    padding-left: calc(calc(100vw - var(--site-width)) / 2);
    padding-right: calc(calc(100vw - var(--site-width)) / 2);
  }

  .list-exhibitions main figure {
    margin-bottom: var(--double-spacing);
  }
  
  .list-exhibitions main figure img {
    aspect-ratio: 2.8;
  }
  .list-exhibitions main figcaption {
    width: calc(30%);
  }
}

/* ********** */
/* EXHIB PAGE */
/* ********** */
.one-exhibition h1 {
  margin: var(--default-spacing) 0;
  font-size: 36px;
  font-weight: 700;
  text-transform: none;
}

.one-exhibition h2 {
  padding: var(--default-spacing);
}

.one-exhibition main section {
  padding: var(--default-spacing);
  padding-top: 0;
}

.one-exhibition main section.desc {
  margin-top: var(--default-spacing);
}

.one-exhibition .details p {
  padding: var(--half-spacing) 0;
  font-size: 14px;
}

.one-exhibition .details p:first-child {
  font-size: 18px;
  font-weight: 700;
  line-height: 23px;
}

.one-exhibition .details img {
  float: left;
  clear: left;
  margin-right: var(--half-spacing);
}

.one-exhibition .details .button {
  margin-left: 0;
}

@media (min-width:600px) {
  .one-exhibition main section {
    margin-bottom: var(--double-spacing);
    padding: 0;
  }
  .one-exhibition main section.desc, .one-exhibition h2, .one-exhibition .filters {
    padding-left: calc(calc(100vw - var(--site-width)) / 2);
    padding-right: calc(calc(100vw - var(--site-width)) / 2);
  }
  .one-exhibition h2 {
    margin: var(--default-spacing) 0;
  }
  
  .one-exhibition main section.desc {
    display: flex;
    gap: var(--double-spacing);
    margin-top: var(--double-spacing);
  }
  .one-exhibition main section.desc .details {
    flex: 40% 0 0;
    padding-left: var(--double-spacing);
    border-left: 1px solid var(--default-color);
  }
  .one-exhibition h1 {
    margin-top: 0;
  }
}

/* ****** */
/* VIDEOS */
/* ****** */
.list-videos main figure {
  margin-bottom: var(--double-spacing);
}

.list-videos main figure div {
  position: relative;
}
.list-videos main figure div nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.list-videos main figure div > img {
  width: 100%;
  height: auto;
  aspect-ratio: 87/49;
  object-fit: cover;  
}

.list-videos main figcaption {
  padding: 0 var(--default-spacing);
}

.list-videos main figcaption h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 25px;
}

.list-videos main figure div iframe {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s;
}

.list-videos main figure div img {
  opacity: 1;
  transition: opacity 1s;
}

.list-videos main figcaption span {
  display: inline-block;
  border: 1px solid var(--default-color);
  border-radius: 200px;
  padding: 2px 18px;
  background-color: var(--background-color);
  margin: var(--half-spacing) 0;
  font-size: 16px;
  cursor: pointer;
}

.list-videos div.playing iframe {
  opacity: 1;
  pointer-events: all;
}

@media (min-width:600px) {
  .list-videos main {
    padding-left: calc(calc(100vw - var(--site-width)) / 2);
    padding-right: calc(calc(100vw - var(--site-width)) / 2);
  }
  .list-videos main section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .list-videos main figure {
    flex: 45% 0 0;
  }
  .list-videos main figcaption {
    padding: 0;
  }
  .list-videos main section > div {
    flex: 100% 0 0;
  }
}

/* ****** */
/* COOKIES */
/* ****** */