/*INIZIO GRAFICA GENERALE*/
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.centrato{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.centrato-verticale{
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
.centrato-orizzontale{
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
.altezza-minima-schermo{
  min-height: 100vh;
}
.titolo-h2{
  color: #00bb2d;
  font-weight: bold;
}
.titolo-h5{
  font-weight: bold;
}
.testo-p{
  padding: 20px 0;
}
.puntatore{
  cursor: pointer;
}
.statistiche-top{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
}
.card:hover .statistiche-top{
  visibility: visible;
}
.card img{
  height: 300px;
  object-fit: cover;
}
/*FINE GRAFICA GENERALE*/
/*INIZIO GRAFICA NAVIGAZIONE*/
.navigation{
  position: absolute;
  top: 0;
  right: 0;
  margin:  30px;
  background-color: rgba(0,0,0, 0.5);
  border: 2px solid white;
  border-radius: 4px;
  padding: 15px;
}
.navigation:hover { border: 3px solid #00bb2d; }
#login{
  text-align: center;
  display: block;
}
.navigation > span img{
  width: 2vh;
  height: 2vh;
  display: inline-block;
}
.navigation > span > span{
  color: white;
  font-weight: bold;
  padding-left: 10px;
  display: inline-block;
}
/*FINE GRAFICA NAVIGAZIONE*/
/*INIZIO GRAFICA HEADER*/
header{
  position: fixed;
  z-index: 1000;
  height: auto;
}
header nav{
  box-shadow: 0 0 5px #888;
}
/*FINE GRAFICA HEADER*/
/*INIZIO GRAFICA HERO*/
#hero, #hero-background {
  width: 100%;
}
#hero-background {
  height: calc(100vh + 1rem);
  position: relative;
}
#hero-background img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
  position: fixed;
  z-index: -2;
}
#hero-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#hero-content img{
  width: 15%;
  min-width: 100px;
  max-width: 150px;
  height: auto;
}
@media screen and (max-width: 575.98px) {
#hero-content{
  flex-direction: column;
}
}
/*FINE GRAFICA HERO*/
/*INIZIO GRAFICA DEI PULSANTI DI CONDIVISIONE SUI SOCIAL*/
#socialSharing{
	width: 100%;
	padding: 15px 0 180px 0;
	position: relative;
	display: block;
  text-align: center;
}

div#socialSharing a span.fa-lg {
	border-radius: 50%;
	margin: 20px;
	color: #FFFFFF;
}
div#socialSharing a span.fa-lg i {
	font-style: normal;
}

div#socialSharing a span#facebook {
	position: relative;
	background-color: #3b5998;
}

div#socialSharing a span#facebook:hover {
	background-color: #133783;
}

div#socialSharing a span#instagram {
	position: relative;
	background-color: #125688;
}

div#socialSharing a span#instagram:hover {
	background-color: #133783;
}

div#socialSharing a span#google {
	position: relative;
	background-color: #dd4b39;
}

div#socialSharing a span#google:hover {
	background-color: red;
}
/*FINE GRAFICA DEI PULSANTI DI CONDIVISIONE SUI SOCIAL*/
/*INIZIO GRAFICA FORM CONTATTI*/
#contatti{
  text-align: center;
  display: block;
}
#contatti h2{
  color: #00bb2d;
  font-weight: bold;
}
#contatti .contatti-campo{
  width: 100%;
  display: block;
  margin: 20px;
}
#contatti .contatti-campo .contatti-nome-campo{
  margin-right: 15px;
  display: inline-block;
}
.contatti-campo input[type=text], .contatti-campo input[type=number], .contatti-campo input[type=email], textarea{
  width: 40vw;
  max-width: 300px;
  height: 3vh;
  display: inline-block;
  color: #00bb2d;
  border: 2px solid #00bb2d;
  border-radius: 5px;
}
#prefisso{
  max-width: 50px;
}
#email{
  max-width: 400px;
}
#messaggio{
  width: 80%;
  height: 15vh;
  max-width: 500px;
  margin-top: 20px;
}
#contatti input[type=submit] {
  width: 250px;
  text-align: center;
  background-color: #00bb2d;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 8px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  box-shadow: 1px 2px 4px rgb(0 0 0 / 50%);
}
#contatti input[type=submit]:hover{
  background-color: #009F28;
}
.erroreContatti{
  display: block;
  color: red;
  background-color: rgb(255,0,0,0.3);
  width: 100%;
  max-width: 600px;
  border-radius: 5px;
  position: relative;
  text-align: center;
  border: 3px solid red;
  box-shadow: 1px 2px 4px rgb(0 0 0 / 50%);
  margin: 20px 0px;
  padding: 20px;
}
/*FINE GRAFICA FORM CONTATTI*/