<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}

body {  background-image: linear-gradient(to right,#F5F5DC, #F5F5DC);  margin: 0;  font-family: "Nunito", sans-serif;  }

.mySlides {display: none; }

.img {vertical-align: middle; height:420px;  width:100%;}

/* Slideshow container */

.slideshow-container {
  width:100%;   margin: auto; position: relative;}

/* Caption text */
.text { background:#3D2B1F; font-size:medium;  padding:15px;  position: absolute;  bottom: 0%;  width: 98%;  text-align:left;  opacity: .7; margin-left:1%;  border-top: 2px solid #FFB200;  color:white; font-weight: bold;}
/* The dots/bullets/indicators */

.dot { height:5px;  width: 5px;  margin-bottom:2px;
  background-color: #FFB200;  border-radius: 50%;  display: inline-block;  transition: background-color 0.6s ease;}

.active {  background-color:#008000; margin-top: 10px; }

/* Fading animation */
.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}
}
@media only screen and (max-width: 800px) {
  .img {vertical-align: middle; height:220px;}

}
</style>
</head>
<body>
<div class="slideshow-container">

 <div class='mySlides fade'>
 <img src="images/img-2.jpeg" class="img" />
 </div>



 <div class='mySlides fade'>
 <img src="images/img-5.jpg" class="img" />
 </div>


</div>
<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span>
  </div>


<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 4000); // Change image every 2 seconds
}
</script>

</body>
</html> 
