/*
 Theme Name: NEW
 Author:
 */

 :root {
  --padding1: 1em;
  --padding2: 2em;
  --padding3: 3em;
  --backgroundColor: #FFEFF2;
}
*,
*::before,
*::after {
  position: relative;
  box-sizing: border-box;
  outline: 0;
  padding: 0;
  margin: 0;
}
@font-face {
  font-family: 'MainFont';
  src: url('assets/fonts/main.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  }
@font-face {
    font-family: 'MainBold';
    src: url('assets/fonts/mainBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
  }

@font-face {
  font-family: 'MainFont';
  src: url('assets/fonts/italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  }

@font-face {
  font-family: 'SecondaryFont';
  src: url('assets/fonts/bold2.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}
body {
  display: flex;
  background-color: var(--backgroundColor);
  font-size: 1em;
  font-family: 'MainFont', serif;
}

html{overflow-y: scroll;}
body.modal-open{overflow:hidden}
a, button {
  all: unset;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
a:hover{ 
  /* text-decoration: underline; */
}
.sidebar a:hover, .mobile-menu-content a:hover, #about a:hover{
  text-decoration: none;
}
ul {
  list-style: none;
  padding: 0;
}
p {
  /* white-space: pre-line; */
}
.inquire{
  padding-top: 1em;
  font-size: 4em;
}

#back-button {
  display: none;

}




@media (min-width: 769px) {
  p{
    font-size: 1.2em;
  }
}
h1 {
  font-weight: normal;
  text-transform: uppercase;
  font-size: 2.4em;
  margin-bottom: -.2em;
  line-height: 1em;
}
h2 {
  font-size: 2em;
  font-weight: normal;
  font-style: italic;
}
h3, h4 {
  font-family: 'SecondaryFont', sans-serif;
  font-weight: bold;
  font-size: 1em;
  text-transform: uppercase;

}
h5{
  font-weight: normal;
}

strong, b {
  font-family: 'mainFont', sans-serif;
  font-weight: normal;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  padding: 1em;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
section {
  padding-bottom: 4em;
}
.text {
  /* padding: var(--padding1); */
  padding-right: var(--padding1);
  padding-left: var(--padding1);
}
.text h3 {
  padding-bottom: 1em;
}
.main {
  flex-grow: 1;
  padding-top: 64px;
}

/* test*/
.main-artists {
  flex-grow: 1;
  margin-left: 0;
  padding-top: 0;
}

#artists {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  /* margin-top: -64px; */
}

#artists .container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1.5vw;
  line-height: 3vw;
}

/* test*/
@media (min-width: 769px) {
  .main {
    margin-left: 250px;
    padding-top: 2em;
  }
  .text {
    /* width: 80%; */
    max-width: 800px;
    /* padding: 2em 0; */
    padding-right: 0;
    padding-left: 0;
  } 
}
/* sidebar menu */
.logo {
  display: block;
  width: 120px;
}
.disable-link{
  pointer-events: none;
  cursor: default;
}
.menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  font-family: 'SecondaryFont', sans-serif;
  font-weight: bold;
  list-style: none;
}
.menu li {
  margin-bottom: 0px;
}

.menu .footer-group {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.menu .footer-group li:last-child {
  margin-top: 20px;
  margin-bottom: 0;
}

.sidebar .menu li:nth-child(6) {
  padding-top: 96px;
}

.sidebar .menu li:nth-child(9) {
  padding-top: 32px;
}

.menuMain {
  padding-top: 70px;
  padding-bottom: 110px;
}

@media (min-width: 769px) {
  .sidebar .menu li::after,
  button::after {
      content: " *";
      font-weight: bold;
      font-family: "Arial", sans-serif;
      visibility: hidden;
      transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
      opacity: 0;
  }
}

.menu li:hover::after,
button:hover::after {
  visibility: visible;
  opacity: 1;
}

/* inizio mobile menu*/
.menu-icon {
height: auto;
transition: transform 0.3s ease;
}

.menu-icon .line {
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: 50% 50%;
}

.mobile-menu-btn.active .top {
transform: rotate(45deg) translate(2px, 5px);
}

.mobile-menu-btn.active .middle {
opacity: 0;
}

.mobile-menu-btn.active .bottom {
transform: rotate(-45deg) translate(2px, -5px);
}

.mobile-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--backgroundColor);
display: none;
justify-content: center;
align-items: center;
z-index: 999;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}

.mobile-overlay.active {
display: flex;
opacity: 1;
}

.mobile-menu-content {
text-align: center;
max-width: 80%;
font-weight: bold;
}

.mobile-menu-content li {
  font-size: 16px;
  line-height: 30px;
}

.mobile-menu-content li:nth-child(6) {
padding-top: 64px;
}

.mobile-menu-content li:nth-child(8) {
  text-transform:lowercase;
}

.mobile-menu-content li:nth-child(9) {
padding-top: 24px;
}

.mobile-logo {
left: 50%;
transform: translateX(-50%);
width: 100px !important;
}

.mobile-overlay .logo {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
width: 120px !important;
}

.mobileHeader {
  display: none;
  width: 100%;
  background-color: var(--backgroundColor);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  align-items: center;
  justify-content: space-between;
  padding: .5em 1em;
}

@media (max-width: 768px) {
  .mobileHeader {
    display: flex;
  }
}

@media (max-width: 768px) {
  .sidebar .logo {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .main-wrapper {
    margin-left: 0;
  }

  .sidebar {
    display: none;
  }

  .logo {
    display: block;
    width: 120px;
  }

  .mobile-menu-btn {
    top: 12px;
    right: 28px;
  }
  
}

@media (min-width: 769px) {
  .mobile-logo {
    display: none !important;
  }
  .menu {
    padding: 140px 0 0 0;
  }
}


/* fine mobile menu*/

footer {
  padding: 2em 0;
}

.title {
  padding: 0 var(--padding1);
}
.title .card h2 {
  font-size: 1.2em;
  padding-bottom: .1em;
}

@media (min-width: 769px) {
  .title {
    padding: 0;
  }
}

/* .title .card > h3:nth-of-type(1),
.title .card > h3:nth-of-type(2),
.exhibition-current .card > h3:nth-of-type(1),
.exhibition-current .card > h3:nth-of-type(2) {
  display: inline;
} */
.exhibition-current h2 {
  font-size: 1em;
  font-weight: normal;
}

.museum .card > h3:nth-of-type(1),
.museum .card > h3:nth-of-type(2){
  display: inherit;
}



p + h2 {
  font-size: 1.2em;
  text-align: right;
}
.space-2-0 {
  padding: 1em var(--padding1);
}

.space-2 {
  padding: 1em var(--padding1);
}
.container {
  display: grid;
  grid-template-columns: 1fr;
}

.card {
  width: 100%;
  padding-bottom: .5em;
}

.card > h4 {
  padding-bottom: var(--padding1);
}
.card-2 {
  padding: 2em var(--padding1) .5em var(--padding1) ;
}
.card-3 {
  padding: 0 var(--padding1) ;
}
@media (min-width: 769px) {
  .card-2 {
    padding: 0;
  }
}
.card h2 {
  font-size: 1em;
}

.art-fairs .card, #news .card, #about .row, .exhibition-past .card {
  line-height: 1.1em;
  padding-top: 1em;
  padding-bottom: 2em;
}
.art-fairs h2 {
  font-size: 1em;
  margin-top: -.2em;
  padding-bottom: 0;
}
.art-fairs h2, .art-fairs h3 {
  /* display: inline-block; */
  margin: 0;
}

#artists{
  flex: 1;
  display: flex;
  flex-direction: column;
}


#artists .container {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 1vh; 
  overflow-y: hidden;
  max-height: 100vh;
  font-size: .7em;
  line-height: 2.4em;
  text-align: center;
}

#news .card h2 {
  font-style: normal;
}
#news .card h2:first-of-type {
  font-style: italic;
}
#news .card h2:nth-of-type(2) {
  text-transform: uppercase;
}

.img-single {
  width: 100%;
}
.img-80, .img-97{
  width: 100%;
  max-width: 800px;
}

#artworks .card-2{
  padding: 0;
}
/* test begin */
.three-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.card-2 {
  grid-column: 1 / 2;
}

.name-container {
  grid-column: 2 / 4; 
  display: grid;
  grid-template-columns: 1fr 1fr; 
  padding:0 1em;
}

@media (max-width: 768px) {
  .three-cards {
      grid-template-columns: 1fr;
  }

  .card-2, .name-container {
      grid-column: 1 / 2;
  }

  .name-container {
      grid-template-columns: 1fr; 
  }
}
/* test end */
.art-fairs div{
  padding-bottom: .5em;
}

@media (min-width: 999px) {
  
  .art-fairs h2, .art-fairs h3 {
    /* display: inline-block; */
    margin: 0;
  }
}


.artwork-text{
  line-height: 18px;
  padding: 1em;
}
.artwork-text h3 {
  text-transform: inherit;
}

#single-artwork .artwork-text {
  padding-top: 1em;
  line-height: 22px;
} 
@media (min-width: 769px) {
  .img-80{
    /* width: 80%; */
  }
  .img-97{
    width: 97%;
  }
  .hero figure{
    width: 80%;
    margin-top: 1em;
  }

  .space-2-0 {
    padding: 2em 0;
  }
  .space-2 {
    padding: 2em 15%;
  }
  .three-cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .two-cards-equal {
    grid-template-columns: repeat(2, 1fr);
  }
  .card h2 {
    font-size: 1.2em;
    padding-bottom: .1em;
  }
  .artwork-text{
    padding:0;
  }
 
  #artworks .card:first-child  {
    /* padding-right: .5em; */
  }
  #artworks .card:last-child {
    /* padding-left: .5em; */
  }
  #artists .container{
    font-size: 1.8vh;
    line-height: 3.6vh;
  }
  #artist-exhibition .card {
    padding: 1em 0 3em 0;
  }
}


.text h2, .text p {
  margin: 0.5em 0;
}
.big-button {
  font-family: 'SecondaryFont', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 80px;
}

/* newsletter begin*/

#newsletter .row {
  padding: 120px 0;
}

.mailchimp-form-container {}

.mc-field-group input {
  width: 100%;
  border: none;
  border-bottom: 4px solid black;
  font-size: 18px;
  font-weight: bold;
  background-color: transparent;
  padding: 8px 0px 4px;
  margin-bottom: 18px;
  outline: none;
  box-sizing: border-box;
  display: block;
  line-height: normal;
  vertical-align: middle;
  -webkit-appearance: none;
  border-radius: 0;
}

.mc-field-group input::placeholder {
  color: black;
  opacity: 1;
}

@media (min-width: 769px) {
  .mc-field-group input {
    font-size: 36px;
  }
}

.mc-field-group input::placeholder {
  color: black;
  text-transform: uppercase;
  margin: 0;
}


#newsletterModal .button, #inquireModal .button {
  font-family: 'SecondaryFont', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 3em;
}
#newsletterModal .container-checkbox{
  font-family: 'SecondaryFont', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1em;
}
#newsletterModal h3:first-of-type {
  padding-bottom: 6em;
}

#newsletterModal h3:last-of-type {
  font-size: .8em;
}

#newsletterModal, #inquireModal h3 {
  padding: 6em 0;
}
#mce-success-response {
  color: green;
  margin-top: 20px;
}

#mce-error-response {
  color: red;
  margin-top: 20px;
}
#newsletter .row {
  padding: 120px 0;
}

.container-checkbox {
  display: block;
  position: relative;
  padding-left: 1.6em;
  cursor: pointer;
  font-size: 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-bottom: 3em;
}

.container-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background-color: #000;
}

.container-checkbox:hover input ~ .checkmark {
  background-color: #2196F3;
}

.container-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.container-checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.container-checkbox .press-text {
  font-size: 1.3em;
  margin-left: 10px;
}

/* newsletter end*/

/* cta begin */
.cta-menu {
  text-transform: uppercase;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 0 auto;
}
.cta-menu h3 {
  justify-self: center;
}
.cta-menu h3:first-child {
  justify-self: start;
}
.cta-menu h3:last-child {
  justify-self: end;
}
/* cta end */

/* modal begin */
.modal-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--backgroundColor);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}
.modal-fullscreen.active {
  opacity: 1;
  visibility: visible;
}
.modal-fullscreen h4 {
  padding-bottom: 40px;
}

#newsletterModal h4 {
  padding: 60px 0;
}

.modal-fullscreen.active {
  opacity: 1;
  visibility: visible;
  z-index: 1003;
}

/* */
.mobile-menu-btn,
.mobile-overlay {
    /* position: fixed; */
    transition: opacity 0.3s ease;
}

.mobile-menu-btn.active,
.mobile-overlay.active {
    transform: translateX(0); /* Usa transform invece di left o right */
}


/* Hide mobile header when modal is active */
.modal-fullscreen.active ~ .mobileHeader,
.mobile-overlay.active ~ .mobileHeader {
  display: none;
}

/* Disable mobile menu button when modal is active */
.modal-fullscreen.active ~ .mobile-menu-btn,
.mobile-overlay.active ~ .mobile-menu-btn {
  pointer-events: none;
  opacity: 0.5;
}

/* Ensure the main content is not visible when modal is active */
.modal-fullscreen.active ~ .main-wrapper,
.mobile-overlay.active ~ .main-wrapper {
  display: none;
}

.modal-content-wrapper {
  width: 80%;
  max-width: 1000px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 0;
  right: 18px;
  font-size: 48px;
  cursor: pointer;
}
.modal-inquire {
  font-weight: bold;
  text-align: right;
  margin-top: 20px;
  cursor: pointer;
}
textarea {
  width: 100%;
  border: 4px solid black;
  margin-top: 20px;
  padding: 10px;
  margin-bottom: 20px;
  font-family: 'SecondaryFont', sans-serif;
  font-size: 16px;
  color: black;
  resize: vertical;
  background-color: transparent;
  border-radius: 0;
}
/* modal end */


/* zoom image begin */

#installation-shots .row.two-cards-equal .card:first-child, #installation-shots .row.two-cards-equal .card:last-child,
#artworks .row.two-cards-equal .card:first-child, #artworks .row.two-cards-equal .card:last-child {
  padding: 0;
}

#artworks .row {
  padding-bottom: 2em;
}

#artworks p{
  padding: 1em 0;
  width:95%
}

#artworks h2 {
  /* font-family: 'SecondaryFont', sans-serif; */
  font-size: 16px;
  /* text-transform: uppercase; */
  font-style: italic;
}

#artworks h3 {
  font-family: 'SecondaryFont', sans-serif;
  font-size: 14px;
  text-transform: none;
  font-style: inherit;
}


.cropped-image {
  width: 100%;
}

@media (min-width:1080px) {
  .cropped-image {
    object-fit: cover;
    height: auto;
    aspect-ratio: 4/3;
  }
}
@media (min-width:769px){
  .two-cards-unequal {
    grid-template-columns: 1fr 2fr;
  }
}

@media (min-width: 769px) and (max-width: 1080px) {
  .card-3{
    padding:0;
  }
}
.row, .row0, .rowb1, .row0101, .row0111, .row0121,.row0131 {
  display: grid;
}

.rowb1 {
  padding-bottom: .5em;
}
.rowb1 a{
  font-size: 0;
}
.row0{
  padding:0;
}
.row1{
  padding: 1em;
}
.row0101 {
  padding: 0 1em 0 1em;
}
.row0131{
  padding: 0 1em 3em 1em;
}
.row0111 {
  padding: 1em 1em;
}
.row0121 {
  padding: 0 1em 2em 1em;
}
.row0141 {
  padding: 0 1em 4em 1em;
}
.row0414 {
  font-size: 1.2em;
  padding: 0 1em 1em 1em;
}

@media (min-width: 769px) {
  .row0{
    padding: 0;
  }
  .row0101 {
    padding: 1em 0;
  }
  .row0111 {
    padding: 1em 0;
  }
  .row0121 {
    padding: 0 0 2em 0;
  }
  .row0414 {
    padding: 0 5em 1em 5em;
  }
  .cta-menu{
    margin-left: 0;
    padding-left: 0;  
    padding-top: 3em;
    /* width: 80%; */
    max-width: 800px;
  }
  .row {
    padding-bottom: 2em;
  }

  #installation-shots .row.two-cards-equal .card:first-child, #installation-shots .row.two-cards-equal .card:last-child,
  #artworks .row.two-cards-equal .card:first-child, #artworks .row.two-cards-equal .card:last-child, #artwork .card {
    padding-right: .8em;
    text-align: left;
  }
  .two-cards-equal{
    /* max-width: 80%; */
  }
}
.sidebar {
  transition: opacity 0.3s ease-in-out;
}
.sidebar.hidden {
  opacity: 0;
}
.zoom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.zoom.active {
  opacity: 1;
  
}
.no-click {
  pointer-events: none;
}

.zoom img {
  position: absolute;
  max-width: none;
  transition: transform 0.3s linear;
  width: 3600px;
}
/* zoom image end */

body.newsletterModal {
  overflow: hidden;
}

.modal-fullscreen.active ~ .main {
  display: none;
}

@media (min-width: 769px) {
  .two-cards-equal {
    grid-template-columns: repeat(2, 1fr)
  }
  #exhibition .card, .art-fairs .card, #news .card {
    padding-right: .8em;
  }

}

.card-container {
  display: grid;
  gap: 10px;
  /* padding-bottom: 4em; */
}
.with-text {
  row-gap: 2em;
}

#single-artwork h2{
  /* font-family: 'SecondaryFont', sans-serif; */
  font-size: 18px;
  /* padding-bottom: .1em; */
  /* text-transform: uppercase; */
  /* font-style: normal; */
}

/* new grid card container */

@media (max-width: 768px) {
  .card-container {
      grid-template-columns: 1fr;
      padding: 0 1em;
  }
}
@media (min-width: 769px){
  .card-container{
    /* max-width: 80% */
  }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .card-container {
      grid-template-columns: 1fr ;
  }
}

@media (min-width: 1024px) and (max-width: 1460px) {
  .card-container {
      grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1461px) {
  .card-container {
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-columns: 1fr 1fr;
  }
}

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

/* TEST */
@media (min-width: 1024px) {
  body {
      display: flex;
      justify-content: center;
      min-height: 100vh;
  }

  .container-wrapper {
      display: flex;
      width: 1030px; /* 230 + 800 */
      margin: 0 auto;
  }

  .sidebar {
      width: 230px;
      height: 100vh;
      padding: 2em 1em;
      display: flex;
      flex-direction: column;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
  }

  .main {
      width: 800px;
      padding: 2em;
      margin-left: 0; /* Rimosso il margin-left */
  }

  /* Footer fissato in basso */
  .sidebar .menu {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
  }

  .footer-group {
      margin-top: auto;
      padding-top: 2em;
  }

  /* Centratura perfetta con spazi vuoti laterali */
  body::before,
  body::after {
      content: '';
      flex: 1;
      min-width: calc((100% - 1030px)/2);
  }
}

#footer {
  text-align: right;
  padding-top: 8em;
  padding-right: 1em;
}


.inline-block {
  display: inline-block;
}
.inline-block {
  display: inline-block;
}

/* test slider begin */
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.slider * {
    box-sizing: border-box;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    /* padding: 15px; */
}

.slide-link {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

.dot {
    cursor: pointer;
    height: 24px;
    width: 24px;
    margin: 0 12px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot-active, .dot:hover {
    background-color: #717171;
}

@media (max-width: 768px) {
    .slider .artwork-text {
        display: none;
    }
}

/* test slider end */