/*-- SLIDER STEPbySTEP --*/

div#slider {
  overflow: hidden;
  margin: auto;
}
div#slider div {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  font-size: 0;
  animation: 20s slider infinite;
}
div#slider div img {
  width: 20%;
  float: left;
}
@keyframes slider {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
}


/*-- SLIDER DISSOLVENZA INCROCIATA --*/

.slide {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}
.slide > div {
  width: 100%;
  height: 100%;
  background-size: cover;
  position: absolute;
  animation: slide 3s infinite;
  opacity: 0;
}
.slide > div:nth-child(2) {
  animation-delay: 5s;
}
.slide > div:nth-child(3) {
  animation-delay: 10s;
}
.slide > div:nth-child(4) {
  animation-delay: 15s;
}
.slide > div:nth-child(5) {
  animation-delay: 20s;
}

@keyframes slide {
  10% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  40% {
    transform: scale(1.1);
  }
}








@keyframes fade {
  0%   { opacity: 0; }
  11.11%   { opacity: 1; }
  33.33%  { opacity: 1; }
  44.44%  { opacity: 0; }
  100% { opacity: 0; }
}

.fadein { position:relative;  height:100px; width:50%; margin: 0 auto; }
.fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 20s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s;  }
.fadein img:nth-child(2) { animation-delay: 3s;  }
.fadein img:nth-child(3) { animation-delay: 6s;  }
.fadein img:nth-child(4) { animation-delay: 9s;  }
.fadein img:nth-child(5) { animation-delay: 12s;  }
.fadein img:nth-child(6) { animation-delay: 15s;  }
.fadein img:nth-child(7) { animation-delay: 18s;  }
.fadein img:nth-child(8) { animation-delay: 21s;  }
.fadein img:nth-child(9) { animation-delay: 24s;  }
.fadein img:nth-child(10) { animation-delay: 27s;  }
.fadein img:nth-child(11) { animation-delay: 30s;  }
.fadein img:nth-child(12) { animation-delay: 33s;  }
.fadein img:nth-child(13) { animation-delay: 36s;  }
.fadein img:nth-child(14) { animation-delay: 39s;  }
.fadein img:nth-child(15) { animation-delay: 42s;  }
.fadein img:nth-child(16) { animation-delay: 45s;  }
.fadein img:nth-child(17) { animation-delay: 48s;  }
.fadein img:nth-child(18) { animation-delay: 51s;  }
.fadein img:nth-child(19) { animation-delay: 54s;  }
.fadein img:nth-child(20) { animation-delay: 57s;  }
.fadein img:nth-child(21) { animation-delay: 60s;  }
.fadein img:nth-child(22) { animation-delay: 63s;  }
.fadein img:nth-child(23) { animation-delay: 66s;  }
.fadein img:nth-child(24) { animation-delay: 69s;  }
.fadein img:nth-child(25) { animation-delay: 72s;  }
.fadein img:nth-child(26) { animation-delay: 75s;  }
.fadein img:nth-child(27) { animation-delay: 78s;  }
.fadein img:nth-child(28) { animation-delay: 81s;  }
.fadein img:nth-child(29) { animation-delay: 84s;  }
.fadein img:nth-child(30) { animation-delay: 87s;  }
.fadein img:nth-child(31) { animation-delay: 90s;  }
.fadein img:nth-child(32) { animation-delay: 93s;  }

/*-- SLIDESHOW FADE WHITE --*/
* {box-sizing:border-box}

#slidefadewhite .slideShow {display:none}

#slidefadewhite .slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  min-height: 100%;
 }

#slidefadewhite .text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

#slidefadewhite .active {
  background-color: #717171;
}

#slidefadewhite .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

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

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

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}