/* *********** This pages is stying for just gallery.html ********************/

/* Please refer to navigation.css for the header area, navigation menu, page layout
   and footer styling  ************/

 /* *** This styles the sections for gallery.html *** */



/* ***************** Define the page layout and containers ***************** */

section#pagecontainer {min-height: 1645px;
  width: 99.97%;
  margin: 0 auto;
  border-top: 2px solid grey;
  position: relative;
}

section#pagecontainer div.gallery {min-height: 800px;
  height: auto;
  width: 100%;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

section#formobiles {display: none;}

section#pagecontainer div#galleryimage1 {background-image: url("../images/gallery1.JPG");
  margin-top: 1.5%;}

section#pagecontainer div#galleryimage2 {background-image: url("../images/gallery3.JPG");}



/* **************************** Media Queries **********************************  
Device sizes - max-width
Mobile - 320px
468px
IPAD / Tablet - 768px 
Desktop - 1024px 
*/


@media screen and (max-width: 2000px) {
   
  /* Reduce the screen width so the pictures are not too stretched */
  div#page {max-width: 1000px;}    /

  header.headerarea {height: 120px;}  /* Increase header area size */

  nav {padding: 73px 0 0 0;}   /* Move nav menu below the wedding header */

  nav > ul {padding-left: 0px;}  /* Remove the padding indent */

  footer p {font-size: 0.85em;}  /* Reduce footer text size */ 
  footer {padding: .18em 0 .18em 0px;} /* Reduce footer padding */
  
}

@media screen and (max-width: 1020px) {
   
  section#pagecontainer {min-height: auto;} /* Remove the min-height so this can auto adjust */

  div#page {max-width: 800px;}    /* Reduce screen width */

  section#pagecontainer div.gallery {min-height: 670px;}

  section#pagecontainer div#galleryimage1 {margin-top:none;}

  section#pagecontainer div#galleryimage2 {margin-bottom: 1.5%;}

}

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

    header.headerarea {height: 85px;}  /* Increase header area size */
}

@media screen and (max-width: 800px) {
   
  div#page {max-width: 700px;}    /* Reduce screen width */

  section#pagecontainer div.gallery {min-height: 560px;}

}

@media screen and (max-width: 735px) {
   
  div#page {max-width: 650px;}    /* Reduce screen width */

  section#pagecontainer div.gallery {min-height: 510px;}

}

@media screen and (max-width: 680px) {
   
  div#page {max-width: 650px;}    /* Reduce screen width */

  section#pagecontainer div.gallery {min-height: 510px;}

}

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

  section#pagecontainer div.gallery {min-height: 470px;
    min-width: 560px;}

}

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

   div#page {max-width: 300px;}    /* Reduce screen width */

  section#pagecontainer {display: none;} /* Hide the original photos and section */

  section#formobiles {display: block;
    position: relative; /* Unhide the mobile phone section and add photos */
    height: 1920px; 
    width: 99.97%;
    margin: 0 auto;
    border-top: 2px solid grey;
}

section#formobiles div.gallery {height: 480px;
    width: 100%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: -1;
}

 section#formobiles div#gallerysmallA {background-image: url("../images/gallerysmallA.JPG");}
 
 section#formobiles div#gallerysmallB {background-image: url("../images/gallerysmallB.JPG");}

 section#formobiles div#gallerysmallC {background-image: url("../images/gallerysmallC.JPG");}

 section#formobiles div#gallerysmallD {background-image: url("../images/gallerysmallD.JPG");}




}