/* impostazioni di default */
* {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

body {overflow-x: hidden; background-color: white;}
html {background-color: white;}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* per i font: font-weight 300 = extralight; 400 = light; 500 = roman; 600 = medium; 700 = bold; 900 = black */

/* padding and border are included in the width and height */

* {
  box-sizing: border-box;
  font-family: "neue-haas-grotesk-display", sans-serif;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

/* [class*="col-"] { 
   float: left; 
   padding: 15px; 
   } */

/* For desktop: - definisco larghezza colonna  */
.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-11 {
  width: 91.66%;
}
.col-12 {
  width: 100%;
}

/* for partners*/

.colp-1 {
  width: 12.5%;
}
.colp-3 {
  width: 37.5%;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones:  sempre larghezza colonna*/

  [class*="col-"] {
    width: 100%;
    flex-direction: row;
  }
}


/* lista in generale */

#container-progetti  {position: relative; margin-top: 20vh;}

img {
  height: 100%
}

.elenco_progetti {
  padding: 0 3%;
  font-family: "neue-haas-grotesk-text", sans-serif;
  font-size: 3.5rem;
  line-height: 4rem;
  font-weight: 600;
  position: relative;
  padding-bottom: 17vh;
}

.nome-progetto {
  height: 60vh;
  padding: 5vh 0;
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex; justify-content: center;
}

.nome-progetto .fill {
  mix-blend-mode: difference;
  z-index: 4;
  opacity: 0;
  height: 40%;
  position: absolute; top: 50%; transform: translateY(-50%);
}


.nome-progetto .co2 {
  height: calc(1.37 * 40%);
}

#container-immagine {
  height: 70vh; width: 70vh;
  position: fixed; top: 50vh; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3; pointer-events: none;
}

#container-immagine :nth-child(n) {
  width: 100%;
  object-fit: cover;
  position: absolute;
  top: 0; left: 0;
  opacity: 0; 
}

/* versione mobile */
@media only screen and (max-width: 600px) {
  .elenco_progetti {
    width: 100%;
    padding-bottom: 25vh;
  }


.nome-progetto {height: 40vh;}

.nome-progetto .fill , .nome-progetto .border {
  height: 15%;
}

.nome-progetto .co2 {
  height: calc(1.37 * 15%)
}

#container-immagine {
  height: 105vw;
  width: 105vw;
}


}