.bordoNeroCapsule{
  border-top: 5px solid black;
  padding-top: 30px;
}

.aScomparsa{
  /* width: 100vw; */
  width: 100%;
  min-height: calc(var(--vh, 1vh) * 100);
  /* height: 100vh; */
  background-color: rgba(0, 0, 0, 0.8);
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
}
.aScomparsa .contenuto{
  width: 60vw;
  height: auto;
  background-color: white;
  color: black;
  position: relative;
  padding: 20px;
  padding-bottom: 0px;
}

.aScomparsa .contenuto .text p{
  width: 95%;
  border-bottom: 5px solid black;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}
.aScomparsa .contenuto .listaCapsule{
  display: flex;
  justify-content: center;
}
.aScomparsa .contenuto .listaCapsule ul{
  list-style: none;
  padding-left: 0;
}
.aScomparsa .contenuto .listaCapsule span{
  font-family: "proximaBold";
}
.aScomparsa .contenuto .immagineCapsula{
  width: 100%;
  text-align: center;
}
.aScomparsa .contenuto .immagineCapsula img{
  width: 120px;
  margin-bottom: 1rem;
}

.aScomparsa .contenuto .chiudi{
  width: 30px;
  position: absolute;
  top: 20px;
  right: 20px;
}
.aScomparsa .contenuto .chiudi img{
  width: 100%;
}

/* interazione utente da mobile */
.riquadroMobile{
  margin-top: 1rem;
}
.riquadroMobile .immagineCapsula{
  text-align: center;
}
.riquadroMobile .immagineCapsula img{
  width: 120px;
  margin-bottom: 1rem;
}
.riquadroMobile .listaCapsule ul{
  list-style: none;
  padding-left: 0;
}

/* /////////////////////////////////////////////////////////////////
//////////////////////////  capsule /////////////////////////
/////////////////////////////////////////////////////////////////// */

#capsule {
  min-height: calc(100vh - 80px);
  display: flex;
  /* align-items: center; */
  font-family: "proximaBold";
  position: relative;
  margin-top: 80px;
}
#capsule .text{
  width: 100%;
}
#capsule .titolo {
  margin-bottom: 1rem;
}
#capsule .titolo h1{
  font-size: 45px;
}
#capsule .titolo p{
  font-size: 20px;
}
#capsule .titolo span{
  font-family: "proximaRegular";
  font-size: 16px;
}
#capsule .servizi{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  /* height: 50vh; */
}

#capsule a{
  width: calc(100% / 2 - 10px);
  border: 7px solid black;
  padding: 20px;
  height: 200px;
  margin: 10px 0;
  color: black;
  position: relative;
  text-decoration: none;
}
#capsule .servizio{
  width: calc(100% / 2 - 10px);
  border: 7px solid black;
  padding: 20px;
  height: 150px;
  margin: 10px 0;
  color: black;
  position: relative;
  text-decoration: none;
}
#capsule .servizio img{
  position: absolute;
  width: 33px;
  height: 33px;
  bottom: 15px;
  right: 15px;
}
#capsule .servizio.bio{
  background:linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url("../imgs/germoglioBio.jpeg");
  background-size: cover;
  background-position: 20% 65%;
  color: white;
  margin-left: 25%;
}
#capsule .servizio.tierraWellness{
  background:linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url("../imgs/capsule/tierraWellness.jpg");
  background-size: cover;
  background-position: 20% 80%;
  color: white;
}
/* /////////////////////////////////////////////////////////////////
//////////////////////////  MEDIA QUERIES /////////////////////////
/////////////////////////////////////////////////////////////////// */

@media all and (max-width: 575px){
  .nascostoDaMobile{
    display: none;
  }
  /* capsule */
  #capsule .servizi{
    flex-direction: column;
  }

  #capsule a{
    width: 100%;
    height: 115px;
    padding: 20px;
    color: black;
  }
  #capsule .servizio{
    width: 100%;
    height: 140px;
    padding: 20px;
    color: black;
  }
  #capsule .servizio.tierraWellness{
    margin-bottom: 50px;
  }
  #capsule .riquadroMobile.mobiletierraWellness{
    margin-bottom: 50px;
  }
}

@media all and (min-width: 576px) and (max-width: 767px) {
  .nascostoDaMobile{
    display: none;
  }
  /* capsule */
  #capsule .text{
    width: 100%;
  }
  #capsule .servizi{
    flex-direction: column;
  }
  #capsule a{
    width: 100%;
    height: 115px;
    padding: 20px;
    color: black;
  }
  #capsule .servizio{
    width: 100%;
    height: 115px;
    padding: 20px;
    color: black;
  }
  #capsule .servizio.tierraWellness{
    margin-bottom: 50px;
  }
  #capsule .riquadroMobile.mobiletierraWellness{
    margin-bottom: 50px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media all and (min-width: 768px) and (max-width: 991px) {
  .nascostoDaDesktop{
    display: none;
  }
  .aScomparsa .contenuto{
    width: 85vw;
    height: auto;
    background-color: white;
    color: black;
    position: relative;
    padding: 20px;
    padding-bottom: 0px;
  }
}

/* Large devices (desktops, 992px and up) */
@media all and (min-width: 992px) and (max-width: 1200px) {
  .nascostoDaDesktop{
    display: none;
  }
  .aScomparsa .contenuto{
    width: 90vw;
    height: auto;
    background-color: white;
    color: black;
    position: relative;
    padding: 20px;
    padding-bottom: 0px;
  }
}
/* Large devices (desktops, 992px and up) */
@media all and (min-width: 1201px) {
  .nascostoDaDesktop{
    display: none;
  }

}