html, body, {height:100%;}

* { margin: 0 auto 0 auto; } 


/* -------------------------------------------------------STYLE PER GLI SLIDE SHOW --*/

.slideshow-container {
  position: relative;              /* per i bottoni prev und next */
  margin:0;
  padding:0;
  width: 100%;
  height:100%;
  box-sizing: border-box;
}

.mySlides { }                 /* serve nello lo script, non cancellare! */             

.centrata {
   max-width:100%;
   max-height:100%;
   position:absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);
   border-bottom:10px solid #000;
}

.fade {                                           /* queste servono per l'effetto sfumatura  */      
  animation-name: fade;
  animation-duration: 0.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


/* Next & previous buttons */

.prev, .next {
  cursor: pointer;
  position:absolute;
  top:55%;
  width:auto;
  padding: 8px 10px;
  margin-top: -50px;

  color: white;
  font-weight: bold;
  font-size: 24px;
  transition: 0.6s ease;
  border-radius:5px 0 0 5px;
  user-select: none;
  -webkit-user-select: none;
}

.next {right:0; border-radius:0 5px 5px 0;}

.prev:hover, .next:hover {
  background-color: #fff;opacity:.9; color:#000;
}

@media only screen and (max-height: 200px) { 
   .prev, .next {top:50%; margin-top:0;}
}

/* -------------------------------------------------------- DIDASCALIE  */

.number {
  font:bold 12px Arial;
  color: #fff;
  background:black;
  padding: 8px;
  position: absolute;
  bottom: 5px;
  right:0;
  z-index:4;
  border-radius:20px 0 0 20px;
}

.text {
  position:absolute;
  box-sizing:border-box;
  top:0;
  width:100%;
  text-align:center;
  padding:2px 5px 5px 5px;
  font:14px Arial; 
  color:#fff;
  background:black;
  border:0px solid white;  
  z-index:2;
}