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

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

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



/* ***************** Define the aside containers ***************** */


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

section#pagecontainer aside.box {position: relative;
  height: 100%;
  float: left;
} 

section#pagecontainer aside.btnhome {position: fixed;
  margin-left: -90px;}

section#pagecontainer aside.bridearea {width: 45%;}

section#pagecontainer aside.maintext {width: 52.2%;
  margin-left: 3px;
  background-image: url(../images/lightflower.jpg);
  background-size: 100% 100%;}

/************** Styling the Return Home Button *****************/

section#pagecontainer aside.btnhome div.buttonreturnhome {
    margin-top: 320px;

  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

section#pagecontainer aside.btnhome div.buttonreturnhome:hover { 
  padding: 5px;
  background-color: #D6113C;
}

/************** Styling the Bride Section and *****************/

section#pagecontainer aside.bridearea div#brideimage {
  height: 62%;
  background-image: url("../images/bride.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

section#pagecontainer aside.bridearea div#brideimage h6 {
  font-size: 1.75em;
  font-weight: bold;
  letter-spacing: expanded;
  color: black;
  margin: 0;
  padding: .32em 0px 0px .85em;
}

section#pagecontainer aside.bridearea div#roseimage {
  height: 38%;
  background-image: url("../images/flowerrings.JPG");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

section#pagecontainer aside.bridearea div#roseimage div.overlaytint {
  position: absolute;
  margin-top: 3px;
  width: 100%;
  height: 37.8%;
  background-color: rgba(138,57,7,.2); 
}


section#pagecontainer aside.bridearea div#roseimage div.namesarea {right: 0;
  border-top: 3px solid white;
  height: auto;
  }

/************** Styling the Bride Section - with the buttons over the bride image *****************/

section#pagecontainer aside.bridearea div#brideimage div.btns {
  min-height: 100px;
  height: auto;
  width: 85%;
  border: 5px solid white;
  padding: 10px;
  margin: 0 auto;
  margin-top: 7%;
  text-align: center;
  text-decoration: none; 
}

section#pagecontainer aside.bridearea div#brideimage a {text-decoration: none;}

section#pagecontainer aside.bridearea div#brideimage div.btns:hover {background-color: rgba(227,5,52,.2);}

section#pagecontainer aside.bridearea div#brideimage div.btns div.italic {font-style: italic;
  color: #1E2E33;
  font-weight: bold;
}

section#pagecontainer aside.bridearea div#brideimage div.btns div.titlelarge {font-size: 2em;
  color: white;
  text-shadow: 3px 3px 1px grey;
}

/************** Styling the Main Text Area *****************/


section#pagecontainer aside.maintext div.whitebox {
  width: 98%;
  margin: 0 auto;
  background-color: rgba(255,255,255,.6);}

section#pagecontainer aside.maintext {padding: 0px 15px;}

section#pagecontainer aside.maintext p span#weddingheader {
  font-size: 1em;
  font-weight: bold;  
}

section#pagecontainer aside.maintext p#noshade {margin-top: -5px;}


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


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

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

   /* Update buttons inside the brides image - Wedding Location and Shorehaven Park */
   section#pagecontainer aside.bridearea div#brideimage div.btns {padding: 7px;}
   section#pagecontainer aside.bridearea div#brideimage div.btns div.titlelarge {font-size: 1.7em;}

   /* Reduce width of main text container */
   section#pagecontainer aside.maintext {width: 51.6%;}

    /* Reduce text size inside maintext container */
   section#pagecontainer aside.maintext div.whitebox p, section#pagecontainer aside.maintext div.whitebox ul {font-size: 0.87em;}
   section#pagecontainer aside.maintext p span#weddingheader {font-size: .95em;}

  /* Update the names field */ 
  div.namesarea h3.hidenames {display: none;}
  div.namesarea h3.addnames {display: block; 
    text-align: left;
    line-height: 1.7;
    padding-left: 16px;}

} 

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

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

  /* Reduce width of bridearea container */
  section#pagecontainer aside.bridearea {width: 37.4%;}

  /* Increase width of main text container */
  section#pagecontainer aside.maintext {width: 59%;}

  section#pagecontainer aside.bridearea div#brideimage h6 {
  font-size: 1.5em;
  padding: .32em 0px 0px .55em;}

  section#pagecontainer aside.btnhome div.buttonreturnhome {display: none;}

}

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

section#pagecontainer {height: 1020px;   /* Increase page height */ 
  border-top: 2px solid grey;            /* Remove line underneath navigation */
  }    
}

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

section#pagecontainer {height: 1060px;}   /* Increase page height */

 section#pagecontainer aside.bridearea {width: 38.4%;}  /* Increace width of bridearea container */

 section#pagecontainer aside.maintext {width: 57.5%;}     /* Decrease width of main text container */
}

section#pagecontainer {height: 1150px;
    width: 99.97%;
    margin: 0 auto;}
    

/* ************* DESIGNED FOR IPADS and TABLETS ***************** 768 ideal */ 

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

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

/* Update page container */
section#pagecontainer {border-top: 2px solid white;}  /* Remove Grey border and change to white */ 
section#pagecontainer {height: auto;}     /* Increase page height */ 

/* Create the container to put both the bride image and the rose image into */
section#pagecontainer aside.bridearea {display: block;
  position: relative;
  height: 340px;
  width: 100%;}

/* Remove floating asides of main text and brideimage originally two sections*/
section#pagecontainer aside.box {float: none;}

/* Resize and location for brideimage  + roseimage divs */
section#pagecontainer aside.bridearea div#brideimage, section#pagecontainer aside.bridearea div#roseimage
   {height: 340px;
    width:49.7%;} 

section#pagecontainer aside.bridearea div#brideimage {float: left;}

section#pagecontainer aside.bridearea div#roseimage {float: right;}
    
/* Update names inside this rose image */
div.roseimage {margin:0; padding:0;}
section#pagecontainer aside.bridearea div#roseimage div.namesarea {border-top: none;}
div.namesarea h3.addnames {text-align: center;
     font: 300 2.2em/0.8 'Great Vibes', Helvetica, sans-serif;
    line-height: 1.5;}

section#pagecontainer aside.bridearea div#roseimage div.overlaytint {margin-top: 0;
  width: 49.6%;
  height: 340px;}

/* Updating maintext location */
section#pagecontainer aside.maintext {margin: 0; 
  padding: 9px 9px 3px 9px; 
  width: 97.5%;}

/* Making more visible the background of the main box */
  section#pagecontainer aside.maintext div.whitebox {
  background-color: rgba(255,255,255,.3);}

/* Updated buttons inside brideimage */
section#pagecontainer aside.bridearea div#brideimage div.btns {padding: 5px; min-height: 70px;}
section#pagecontainer aside.bridearea div#brideimage div.btns div.titlelarge {font-size: 1.3em;
  text-shadow: 2px 2px .5px grey;}
section#pagecontainer aside.bridearea div#brideimage div.btns div.italic {font-size: .85em;
 margin-top: -5px;}

}


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

  section#pagecontainer aside.bridearea div#brideimage h6 {
  font-size: 1.2em;
  padding: .22em 0px 0px .55em;}

  section#pagecontainer aside.bridearea div#brideimage div.btns div.italic {font-size: .85em;
  margin-top: -10px;}

  div.namesarea h3.addnames {font: 300 1.6em/0.8 'Great Vibes', Helvetica, sans-serif;
    padding-top: 10%;
    line-height: 1.8;}
}

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

  section#pagecontainer aside.bridearea div#brideimage h6 {font-size: 1em;}
}

/* MEDIA QUERIES BELOW DESIGNED FOR MOBILE PHONE ************ */

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

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

  section#pagecontainer aside.bridearea div#brideimage, section#pagecontainer aside.bridearea div#roseimage 
    {float: none;
      width: 100%;}

    section#pagecontainer aside.bridearea div#roseimage {display: none;}

    section#pagecontainer aside.bridearea div#brideimage h6 {font-size: 1.25em;}

}