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

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

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



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

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

div#pagecontainer h6 {position:absolute;
  font-size: 2.2em;
  font-weight: bold;
  letter-spacing: expanded;
  color: black;
  margin-left: 10%;
  margin-top: 5px;
}

div#pagecontainer section#maincontentarea, div#pagecontainer section#bridalgroup {position: relative;}

div#pagecontainer section#maincontentarea {height: 847px;
  width: 100%;}

div#pagecontainer section#bridalgroup {height: 255px;
  background-color: #BBBEBF;
  padding: 1.5em;
  border: 2px solid #910305;
  width: 94%;
}

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

/* *********** Styling top section - aside boxes 1 and 2 *********** */

div#pagecontainer section#maincontentarea aside.halves {width: 38.5%;
  height: 76%;
  padding: 0px .5em .35em .5em;
  margin-top: 8.3%;
  border: 2px solid grey;
  position: relative;
  float: left;
  margin-left: 1.5em;
 }

div#pagecontainer section#maincontentarea aside.left {margin-left: 8%;}

div#pagecontainer section#maincontentarea aside.halves p {text-align: justify;}

div#pagecontainer section#maincontentarea aside.halves p span.question {font-size: 1.1em;
	font-weight: bold;
	color: #606466;
}

div#pagecontainer section#maincontentarea aside.right div.suppliers {line-height: 2.15;
	font-size: .9em;
	padding: .5em .5em .6em .5em;
	width: 96%;
	background-color: rgba(151, 154, 156, 0.3);}


/* *********** Styling second section on the bridal party **************  */

div#pagecontainer section#bridalgroup {position: relative;
	border: 2px solid #910305;
	width: 97.4%;
    padding: .5em;
    bottom: 0;
    margin: 1em 0 1em .2em;
}

div#pagecontainer section#bridalgroup h5 {position:absolute;
  font-size: 1.7em;
  font-weight: bold;
  letter-spacing: expanded;
  color: black;
  right: .5em;
  margin-top: 3px;
}

div#pagecontainer section#bridalgroup aside.group {width: 31.5%;
    height: 79%;
    padding: 0px .5em .1em .5em;
    margin-top: 2%;
    border: 2px solid grey;
    position: relative;
    float: left;
    margin-left: 1.5em;
 }

 div#pagecontainer section#bridalgroup div#mc {
 	position: absolute;
 	display: inline-block;
 	background-color: rgba(145,3,5,.5);
 	width: 25%;
 	height: 50%;
 	right: 0;
 	margin-top: 5%;
 }

div#pagecontainer section#bridalgroup div#mc p {margin: 0;
	padding: 0.8em;}

div#pagecontainer section#bridalgroup aside.group ul li {line-height: .6;}

div#pagecontainer section#bridalgroup aside.group p span.question,
div#pagecontainer section#bridalgroup div#mc p span.question {font-size: 1.1em;
	font-weight: bold;}

div#pagecontainer section#bridalgroup div#mc p span.question {color: #C9C5C5;}

div#pagecontainer section#bridalgroup div#mc p {margin-top: .25em;}

/* *********************** Footer Styling ************************** */

/* Update footer to match reduced section width for the bridal party */
footer {width: 99.3%;
	background-color: white;}

footer p {font-size: 0.8em;
	color: grey;}



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

@media screen and (max-width: 1400px) {
   
    /* Reduce screen width */
    div#page {max-width: 1000px;}
	
   /* Increase page container height due to smaller width */
	div#pagecontainer {height: 1228px;}

   /* Reduce header size - FAQs */
   div#pagecontainer h6 {font-size: 1.9em;
   	    margin-left: 9.2%;}

    /* Increase page + aside height of first section with beach image and shoes */
	div#pagecontainer section#maincontentarea {height: 930px;}

	div#pagecontainer section#maincontentarea aside.halves {height: 79%;
	  margin-top: 9.3%;}

    /* Reduce line height of suppliers list */
	div#pagecontainer section#maincontentarea aside.right div.suppliers {line-height: 1.85;}

 	div#pagecontainer section#bridalgroup div#mc {height: 55%; 
 		padding-right: 0.1em;
 		line-height: 1;}

}

@media screen and (max-width: 1035px) {
   
    /* Reduce screen width */
    div#page {max-width: 800px;}
	
   /* Increase page container height due to smaller width */
   div#pagecontainer {height: 1250px;}

   /* Reduce header + text sizes */
   div#pagecontainer h6 {font-size: 1.7em;}
   
   div#pagecontainer section#maincontentarea aside.halves p span.question,
   div#pagecontainer section#bridalgroup aside.group p span.question,
   div#pagecontainer section#bridalgroup div#mc p span.question {font-size: 1em;}

   div#pagecontainer section#maincontentarea aside.halves p, 
   div#pagecontainer section#bridalgroup div#mc p {font-size: .9em;}

    /* Increase page height of first section with beach image and shoes */
	div#pagecontainer section#maincontentarea {height: 930px;}

	/* Update the asides of first section with beach image and shoes */
	div#pagecontainer section#maincontentarea aside.halves {height: 80%;
	  margin-top: 11.3%;}

	div#pagecontainer section#maincontentarea aside.left {width: 36.7%;} 

	div#pagecontainer section#maincontentarea aside.right {margin-left: 1em;
	   width: 38.3%;}

    /* Reduce line height of suppliers list */
	div#pagecontainer section#maincontentarea aside.right div.suppliers {line-height: 1.65;
	   width: 93%;}

	/* Realign settings for the section labelled "Bridalgroup" */
	div#pagecontainer section#bridalgroup {margin-left: 0;
	   height: 277px;
	   padding-left: 0;
	   width: 98.35%;
	}

	/* Increase aside heights of the bridal party */
	div#pagecontainer section#bridalgroup aside.group {height: 89%;
		margin-left: 1em;}

	/* Update the bullet points for the bridal party */
	div#pagecontainer section#bridalgroup aside.group ul li {
		font-size: .9em;
		line-height: 1.2;}

	/* Move down the red box about who is the MC */
	div#pagecontainer section#bridalgroup div#mc {margin-top: 8%;}
}

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

	/* Realign the section labelled "Bridalgroup" */
	div#pagecontainer section#bridalgroup {width: 98.1%;}
}

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

    /* Reduce screen width */
    div#page {max-width: 600px;}
	
   /* Increase page container height due to smaller width */
   div#pagecontainer {height: 1380px;}

    /* Increase page height of first section with beach image and shoes */
	div#pagecontainer section#maincontentarea {height: 1050px;}

	/* Update the asides of first section with beach image and shoes */
	div#pagecontainer section#maincontentarea aside.halves {height: 80%;
	  margin-top: 14.3%;
	  border: none;
	  padding: none;
	  margin-left: .85em;
	}

    /* Update the asides of first section with beach image and shoes */
	div#pagecontainer section#maincontentarea aside.left {margin-left: 1.6em;
	  width: 41%;}

	div#pagecontainer section#maincontentarea aside.right {width: 39%;}

    /* Reduce line height of suppliers list */
	div#pagecontainer section#maincontentarea aside.right div.suppliers {line-height: 1.48;
	   width: 95%;}

   /* Reduce header sizes and update styling */
    div#pagecontainer h6, 
	div#pagecontainer section#bridalgroup h5 {font-size: 1.4em;}

	div#pagecontainer section#bridalgroup h5 {right: 3px;}

	/* Reduce width but increase height of the red MC box and font alignment */
	div#pagecontainer section#bridalgroup div#mc {width: 22%;
		height: 65%;}

	div#pagecontainer section#bridalgroup div#mc p {text-align: center;}

	/* Update the bullet points for the bridal party */
	div#pagecontainer section#bridalgroup aside.group ul {margin: 0;
     padding-left: 1em;}

	/* Realign settings for the section labelled "Bridalgroup" */
	div#pagecontainer section#bridalgroup {height: 297px;
	   width: 97.35%;
	}

	/* Increase aside heights of the bridal party */
	div#pagecontainer section#bridalgroup aside.group {height: 92%;
		margin-left: 1em;}
	
}

@media screen and (max-width: 620px) { /* Designed for mobiles */

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

   /* Reduce header height */
    header.headerarea {height:60px;}
	
   /* Increase page container height due to smaller width */
   div#pagecontainer {height: 2292px;}

    /* Increase page height of first section with beach image and shoes */
	div#pagecontainer section#maincontentarea {height: 1580px;
		position: relative;
		background-color: #0A0EF7;
		color: white;}

    div#pagecontainer section.beachimage {background: none;
    	background-color: }

	/* Update the asides of first section with beach image and shoes */
	div#pagecontainer section#maincontentarea aside.halves {
	  float: none;
      width: 87%;
	  background-color: rgba(161,161,166,.3);
	  margin-left: .37em;}

	div#pagecontainer section#maincontentarea aside.left {margin-top: 18.3%;
	  height: 815px;
	  position: relative;
	  padding-top: .5em;}

	div#pagecontainer section#maincontentarea aside.right {margin-top: -18px;
	  height: 730px;}

	/* Realign settings for the section labelled "Bridalgroup" */
	div#pagecontainer section#bridalgroup {height: 685px;
	   width: 95.2%;
	   position: relative;
	   margin-top: 0;
	}	

	/* Amend the aside containers of the bridal party */
	div#pagecontainer section#bridalgroup aside.group {float: none;
		height: 275px;
		width: 81%;
		margin-left: 1em;}

	/* Amend the red box to be beneath the aside containers of the bridal party */
	div#pagecontainer section#bridalgroup div#mc {
	 	position: relative;
	 	display: block;
	    width: 103%;
	 	height: 114px;
	 	bottom: .5em;}

	/* Update header + text sizes and update font styling */

	div#pagecontainer section#bridalgroup h5 {display: none;}

	div#pagecontainer h6 {font-size: 1.2em; 
		display: block;
		margin-left: 1%;
		margin-top: -30px;}

	div#pagecontainer section#maincontentarea aside.halves p span.question,
	div#pagecontainer section#bridalgroup aside.group p span.question,
	div#pagecontainer section#bridalgroup div#mc p span.question {font-size: 1.1em;
	   color: white;
	   text-shadow: 1px 1px .5px rgba(145,3,5,.5); 
	}

	div#pagecontainer section#maincontentarea aside.halves p, 
	div#pagecontainer section#bridalgroup div#mc p {font-size: .9em;}

}