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

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

 /* *** This styles the sections for drivereception.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: 8%;
  margin-top: 3px;
}

/* This is styling for the text border - the container, header and text ***********/

section#pagecontainer div.carreceparea {position: absolute;
  width: 82%;
  min-height: 335px;
  height: auto;
  margin-left: 8%;
  border: 2px double grey;
  padding: .6em;
  margin-top: -65px;
}

section.beachimage div.carreceparea h5 {font-size: 1.8em;
  color: #4F5557;
  font-weight: bold;
  margin: 0;
}

section#pagecontainer div.carreceparea p {text-align: justify;}


/* **************************** Media Queries **********************************  */

@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 {min-height: 785px;
      height: auto;}

}

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

   /* Increase page height */  
   section#pagecontainer {min-height: 835px;
      height: auto;}
}

@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: 900px;
   	height: auto;}
	
   /* Increase container size for the driving text */
   section#pagecontainer div.carreceparea {position: relative;
	  width: 81%;
	  margin-top: -2.1em;
    min-height: 700px;
    height: auto;}
	
   /* Reduce text size of headers */  
	section#pagecontainer h6 {font-size: 1.8em;}

	section.beachimage div.carreceparea h5 {font-size: 1.5em;}

}

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

  section#pagecontainer div.carreceparea {border: none;}

}

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

  /* Update padding around the text*/
   section#pagecontainer div.carreceparea {padding: .3em;}

  /* Reduce text size */
   section.beachimage div.carreceparea p {font-size: 0.95em;}
}


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

   /* Reduce page height */
   section#pagecontainer {min-height: 990px;
    height: auto;}

  /* Reduce text size of headers */  
	section#pagecontainer h6 {font-size: 1.5em;
      margin-left: 10%;}

	section.beachimage div.carreceparea h5 {font-size: 1.2em;
      margin-top: -14px;}

  /* Remove border from around the text and update padding */
	section#pagecontainer div.carreceparea {border: none;
	padding: .25em .25em .5em;}

  section#pagecontainer div.carreceparea p {line-height: 1;}

}

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

   /* Reduce page height */
   section#pagecontainer {min-height: 1115px;
    height: auto;}

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

	section.beachimage div.carreceparea h5 {font-size: 1em;
    font-stretch: condensed; 
    margin-top: 0px; }

  section.beachimage div.carreceparea p {font-size: 0.9em;}
}