* {
    margin: 0;
    padding: 0;
}

#slideshow {
    overflow: hidden;
    max-height: 800px; /* Fluid design - allows images to scale depending on browser size but never go over a certain amount */
}

/* Makes images responsive/fluid */
#slideshow img {
    max-width: 100%;
    position: relative; /* Declared position allows for location changes */
    top: -100px; /* Moves the image closer to the top of the page */
}

/* Clearing the floats */
#slideshow:after {
    content: "";
    display: table;
    clear: both;
}

/* Hides images to not be shown */
#slideshow img {
    float: left;
    margin: 0 -100% 0 0;
}



/* Media Queries */
/* Device = Desktops. Screen = 1281px to higher resolution desktops */
/*@media (min-width: 1281px) {
}*/

/* Device = Laptops, Desktops. Screen = B/w 1025px to 1280px */
 @media (min-width: 1025px) and (max-width: 1280px) {
     #slideshow {
         max-height: 650px; /* Fluid design - allows images to scale depending on browser size but never go over a certain amount */
     }
     
     /* Makes images responsive/fluid */
     #slideshow img {
        top: 0px; /* Moves the image closer to the top of the page */
     }
}

/* Device = Tablets, Ipads (portrait). Screen = B/w 768px to 1024px */
 @media (min-width: 768px) and (max-width: 1024px) {
     #slideshow {
         max-height: 650px; /* Fluid design - allows images to scale depending on browser size but never go over a certain amount */
     }

     /* Makes images responsive/fluid */
     #slideshow img {
         top: 0px; /* Moves the image closer to the top of the page */
     }
}

/* Device = Tablets, Ipads (landscape). Screen = B/w 768px to 1024px */
 @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
     #slideshow {
         max-height: 650px; /* Fluid design - allows images to scale depending on browser size but never go over a certain amount */
     }

     /* Makes images responsive/fluid */
     #slideshow img {
         top: 0px; /* Moves the image closer to the top of the page */
     }
}

/* Device = Low Resolution Tablets, Mobiles (Landscape). Screen = B/w 481px to 767px */
 @media (min-width: 481px) and (max-width: 767px) {
     #slideshow {
         max-height: 650px; /* Fluid design - allows images to scale depending on browser size but never go over a certain amount */
     }

     /* Makes images responsive/fluid */
     #slideshow img {
         top: 0px; /* Moves the image closer to the top of the page */
     }
}

/* Device = Most of the Smartphones Mobiles (Portrait). Screen = B/w 320px to 479px */
 @media (min-width: 320px) and (max-width: 480px) {
     #slideshow {
         max-height: 650px; /* Fluid design - allows images to scale depending on browser size but never go over a certain amount */
     }

     /* Makes images responsive/fluid */
     #slideshow img {
         top: 0px; /* Moves the image closer to the top of the page */
     }
}