div#slider {
  overflow: hidden;
  margin: auto;
  width: 1200%;/*original code is *50%; before I change it to 1200% to increase the div wrapper and the image size*/
  max-width: 700px;
  max-height: 400px;
}
div#slider div {
  position: relative;
  z-index:0; /*this line of code is mine it is set to work with dropdown menu items very important */
  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%;
  }
}

@media screen and (max-width:900px){
	
	div#slider {
  overflow: hidden;
  margin: auto;
  width: 100%;
  max-width: 200px;/*was 200*/
  max-height: 150px;
}

div#slider div {
  position: relative;
  z-index:0; /*this line of code is mine it is set to work with dropdown menu items very important */
  width: 400%;   /*This line is very important, this makes the image to fill the slider div frame one by one*/
/*This increases the scrolling count*/  
}
div#slider div img {
	display:block;
  width: 25%; 
  float: left;
}	
}