/***
set the width and height to match your images
**/
body {background-color: #f4eee1;}
#slideshow {
 position:relative;
 z-index:-1;
}

#slideshow IMG {
 position:absolute;
 top:0;
 left:0;
 z-index:8;
 /* opacity:0.0;*/
}

#slideshow IMG.active {
 z-index:10;
 opacity:1.0;
}

#slideshow IMG.last-active {
 z-index:9;
}

#slideshow img {
 /* Set rules to fill background */
 min-height: 700px;
 min-width: 100%;

 /* Set up proportionate scaling */
 width: 100%;
 height: auto;

 /* Set up positioning */
 position: fixed;
 top: 0;
 left: 0;
}


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

#slideshow img {
 /* Set rules to fill background */
 min-height: 700px;
 min-width: 1024px;

 /* Set up proportionate scaling */
 width: 100%;
 height: auto;

 /* Set up positioning */
 position: fixed;
 top: 0;
 left: 0;
}


 #slider-code .overview li {
  float: left;
  margin: 0 2px;
  padding: 2px;
 }
 #slider-code .viewport {
  width: 275px
 }
 #slider2 img {
  max-height: 70px;
  max-width: 100%;
  width: 500px;
  margin-bottom: 10px;
 }
 #slider4 img {
  max-height: 270px;
  max-width: 270px;
  height:270px;
  width: 270px;
  margin-bottom: 10px;
 }
 .border-color-brown {
  max-width: 270px;
  max-height: 270px;
 }
}