.tooltip {cursor: pointer; display: inline-block;}

.tooltip > div {
  background: rgb(47,47,47);
  display: inline-block;
  font-size: 12px;
  color: #00BDD6;
  margin-left: -357px;
  min-height:20px;
  padding: 15px;
  position: absolute;
  opacity: 0;
  visibility: hidden;

   /* border-radius */
  border-radius: 15px; /* W3C */

   /* box-shadow */
  -moz-box-shadow: 0 0 10px gray; /* Firefox */
  -webkit-box-shadow: 0 0 10px gray; /* Safari e Chrome */
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); /* IE */
  box-shadow: 0 0 10px gray; /* W3C */

 /* Transizione */
 -moz-transition: all 0.4s ease-in-out; /* Firefox */
  -webkit-transition: all 0.4s ease-in-out; /* Safari e Chrome */
  -o-transition: all 0.4s ease-in-out; /* Opera */
  transition: all 0.4s ease-in-out; /* W3C */
}

.tooltip:hover > div {
  margin-top: 30px;
  opacity: 1;
  visibility: visible;
  /* Transizione */
  -moz-transition: all 0.4s ease-in-out; /* Firefox */
  -webkit-transition: all 0.4s ease-in-out; /* Safari e Chrome */
  -o-transition: all 0.4s ease-in-out;  /* Opera */
  transition: all 0.4s ease-in-out; /* W3C */
}


/* ------------------------------------------------------------- */
/* ----- Index.html - Tablet Orizzontale (da 972 a 1024px) ----- */
/* ------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 1200px) {

.tooltip > div {display: none;}

}

/* ------------------------------------------------------------------------ */
/* ----- Index.html - Mobile Landscape (orizzontale) (da 767 a 480px) ----- */
/* ------------------------------------------------------------------------ */

@media only screen and (min-width: 480px) and (max-width: 767px) {

.tooltip > div {display: none;}

}

/* --------------------------------------------------------------------- */
/* ----- Index.html - Mobile Portrait (verticale) (da 479 a 280px) ----- */
/* --------------------------------------------------------------------- */

@media only screen and (min-width: 280px) and (max-width: 479px) {

.tooltip > div {display: none;}

}