* {
   box-sizing: border-box;
}

body {
   /* BEHIND THUMBS */
   margin: 0;
   background-image: url(https://theremotedoctor.co.uk/bike-gallery/background.png);
   background-attachment: fixed;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 0.875em;
   font-weight: bold;
   text-align: center;
}
.container > div:nth-of-type(1) {
  /* BEHIND MAIN 640 x 480 image */
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-image: url(https://theremotedoctor.co.uk/bike-gallery/background.png);
  background-attachment: fixed;
}


h1{

   margin: 0;
   padding: 0.5em 0 0.5em;
   font-size: 1.5em;
   text-align: center;
   color: #000000;
   text-shadow: 0.5px 1px #FF0000;
}
/* MAIN 640 x 480 IMAGE */
.mySlides img {
   width: 98%;
   border: 1px solid #FF0000;
   box-shadow: 4px 4px 8px #000;
}
/* THUMBNAL IMAGES */
img{
   display: block;
   width: 95%;
   max-width: 45.7em;
   height: auto;
   margin: auto;
   border: 1px solid #FF0000;
   box-shadow: 4px 4px 8px #000000;;
}

#pandn {
   position: absolute;
   z-index: 999; 
   left:50%;
   transform:  translate( -50%, -0.7em );
   width: 100%;
   max-width: 45.7em;
}
/* HIDE THE IMAGES BY DEFAULT */
.mySlides {
   display: none;

}
/* ADD A POINTER WHEN HOVERING OVER THE THUMBNAIL IMAGES */
.demo {
   cursor: pointer;
}
/* NEXT & PREVIOUS BUTTONS */
.prev,
.next {
   position: absolute;
   top: 40%;
   padding: 0.75em;
   margin-top: -2.5em;
   font-size: 1.3em;
   font-weight: bold;
   color: #FF0000;
   cursor: pointer;
   user-select: none;
  -webkit-user-select: none;
}

/* POSITION THE "NEXT BUTTON" TO THE RIGHT */
.next {
   right: 1.25%;
}
/* POSITION THE "PREVIOUS BUTTON" TO THE LEFT */
.prev {
   left: 1.25%;
}

/* ON HOVER ADD A BACKGROUND COLOR*/
.prev:hover,.prev:active,
.next:hover,.next:active {
  background-color: #FFFFFF;
}


/* CONTAINER FOR IMAGES TEXT */
.caption-container {
  padding: 0.2em 1em;
  background-color: #000000;
  color: #FF0000;
  text-align: center;
}

.row{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

#plain {
    border: none;
    box-shadow:none;   
}

/* SIX COLUMNS SIDE BY SIDE & SPACE BETWEEN EACH IMAGE ROW */
.column {
   width: 16.66%;
   margin-bottom: 0.8em; 
}

/* FOOTER TEXT MESSAGE */
.footer {
   display: block;
   width: 100%;
   max-width: 23.7em;
   height: auto;
   margin: auto;
   border: 0.5px solid #FF0000;
   background-color:#FFFFFF;
   color: #000000;
   text-align: center;
   font-size: 1.1em;
   box-shadow: 4px 4px 8px #000;
   text-shadow: 0.5px 1px #FF0000;
}
/* TEXT COLOR FOR PART THAT WAS SUPPLIED */
.description {
   color: #FF0000;
   margin: 0;
   padding: 0.5em 0 0.75em;
   font-size: 1.1em;
   text-align: center;
   text-shadow: 0.5px 1px #000000;
}

/* MEDIA QUERY LANDSCAPE IPHONE 6 PLUS*/
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
  
.mySlides img {
   display: block;
   width: 70%;
   max-width:640px;
   height: 250px;
   margin: auto;
   border: 1px solid #FF0000;
   box-shadow: 4px 4px 8px #000;
}