html,body{
  width:100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-size:16px;
  padding-top:1rem;

}
@font-face {
    font-family: 'Garamond';
    src: url('font/Garamond.woff2') format('woff2'),
        url('font/Garamond.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Garamond';
    src: url('font/Garamond-Italic.woff2') format('woff2'),
        url('font/Garamond-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Garamond';
    src: url('font/Garamond-Bold.woff2') format('woff2'),
        url('font/Garamond-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

*{
  font-family: 'Garamond';
}
/**/
.bold{
  font-weight: bold;
}

p,h2{
  margin-bottom:0;
}
h2{
  margin-top:.5rem;
  margin-bottom: .5rem;
}
.center-vertical{
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-s{
  font-size: 1.1rem;
}
p{
  font-size:1.24rem;
}
.text-m{
  font-size:1.4rem;
}
.text-l{
  font-size: 1.8rem;
}
h1{
  font-size:2.4rem;
}
.text-green{
  color:#9cb9a3;
}
.text-gray{
  color:#1a1a1a;
}
.bg-green{
  background-color:#9cb9a3;
}
.bg-gray{
  background-color:#e6e6e6;
}
    /* styles.css */
    .hero {
      height: 80vh;
      width: 100%;
      position: relative;
      text-align: center;
      transition: height 0.5s ease;
    }
    .hero.shrink {
        height: 30vh; /* Adjust as needed */
      }
    .flickity-button{
      display: none;
    }
    .gallery-cell {
  width: 66%;
  /*height: 200px;*/
  margin-right: 10px;
  /*background: #8C8;*/
  counter-increment: gallery-cell;
  transition: height 0.5s ease;
  height:35vh;
  margin-top:2.5vh;
  margin-bottom:2.5vh;
}
.gallery-cell img{
    width:auto;
    height: 100%;
  }

.gallery-cell.is-selected{
  height:40vh;
    margin-top:0vh;
    margin-bottom:0vh;
}

.gallery-cell.small {
  height:15vh;
  margin-top:2.5vh;
  margin-bottom:2.5vh;
}
.gallery-cell.small.is-selected{
  height:20vh;
    margin-top:0vh;
    margin-bottom:0vh;
}
.gallery-cell.small img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;  
}
.border-left{
  border-left:1px solid #ffffff;
}
.border-right{
  border-right:1px solid #ffffff;  
}

#cerchioHeader{
  width: 210px;  
  height: 180px;  
  /*left: calc(50vw - 75px);  
  top: -75px;*/
}


#separatore-img-location{
  width:100%;
  height:24vh;
}

.img-cutted{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.inthemiddle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* in case you're not using Tailwind or Bootstrap */
  margin: 0;
}

 .palette {
            display: flex;
        }
        .color {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin:auto;
        }


         .copy-btn {
            background-color: transparent;
            color: white;
            padding: 4px;
            border: 1px solid white;
            cursor: pointer;
            border-radius: 50%;
            display: flex;
            align-items: center;
            margin-left:6px;
        }
section{
  padding:0 20%;
}

    /* Mobile fix for image sections */
    @media (max-width: 500px) {
section{
  padding:0;
}
      #location-section .row {
        flex-direction: column !important;
      }
    .flickity-page-dots{
      display:none;
    }
    /* styles.css */
      .hero {
        height: 30vh;
      }
      #cerchioHeader{
       /* width: 75vw;  
        height: 75vw;  
        left: 12.5vw;  
        top: -20vh;*/
      }
    }  
#video, #imgLogo {
  transition: opacity 1s ease;
}

#video {
  opacity: 1;
  z-index: 1;
}

#imgLogo {
  opacity: 0;
  z-index: 2;
}


#video, #imgLogo {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 1s ease;
}