/* *********** This styles 3 pages accommodation.html and accommodationinformation.html 
   Additionally - please refer to:
       accommodation.css for styling unique to accommodation.html 
       accominfo.css for styling unique to accommodationinformation.html 
       accomstayover.css for styling unique to accommodationstayover.html
*/


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


/* This template styles 3 pages accommodation.html and accommodationinformation.html and accommodationstayover.html*/




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

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

section.beachimage {
  background-image: url("../images/beach.JPG");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

section#pagecontainer h6 {
  font-size: 2.2em;
  font-weight: bold;
  letter-spacing: expanded;
  color: black;
  margin-left: 10%;
  margin-top: 3px;
  margin-bottom: 0;
  padding-bottom: .8em;
}

section#pagecontainer aside.box {position: relative;
	height: 545px;
	width: 37%;
	border: 2px double grey;
}

section#pagecontainer aside.leftside {float: left;
	margin-left: 8.5%;
	padding: .6em;}

section#pagecontainer aside.rightside {float: right;
	margin-right: 10%;}





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


@media screen and (max-width: 1900px) {
   
  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: 1400px) {
   
   /* Reduce screen width */
   div#page {max-width: 1000px;}

   /* Reduce page height */
   section#pagecontainer {height: 700px;}

  /* Reduce text size of headers */  
  section#pagecontainer h6 {font-size: 2em;
    padding-bottom: 30px;}

}


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

   /* Reduce header height with navigation at the bottom of the page */
   header.headerarea {height: 87px;} 

   /* Reduce page height */
   section#pagecontainer {min-height: 600px;
   	height: auto;}
	
   /* Reduce text size of headers */  
	section#pagecontainer h6 {font-size: 1.8em;}

}

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

}

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

  /* Reduce text size of headers */  
	section#pagecontainer h6 {font-size: 1.3em;}

}


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

  /* Reduce text size headers and main body text */  
	section#pagecontainer h6 {font-size: 1.3em;}

}