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

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



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

section.all {position: relative;
  height: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  margin-top: -27px;
}

section.coverarea {
  height: 730px;
  border: 2px solid black; 
}

section.twoboxareas {
  text-align: center;
  line-height: 1.2;
  font-size: 1.4em;
  color: #5C7EED;
  margin: 0 auto;
  font-family: "Lucida Console", Monaco, monospace;
}

/* Styling the Cover area + image + cloud names + date for index.html ****/

section#coverimage {
  background-image: url("../images/background.JPG");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

section.coverarea div.names {position: absolute;
  right: 20%;
  margin-top: 5.2%;
  height: auto;
  width: 35%;
}

section.coverarea div.names h2 {font: 300 90px/0.8 'Great Vibes', Helvetica, sans-serif;
  color: #fff;
  text-align: center;
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1); 
}

section.coverarea div.names h2 span {font-size: .8em;
  color: #fff;
  line-height: 1.3;
}

section.coverarea div.date {
    position: absolute;
    bottom: 1.2%;
    width: auto;
    right: 1.3%;
    text-align: right;
}

section.coverarea div.date h3 {
    font-family: Helvetica;
    font-size: 1.95em;
    padding: 0px 0px 0px 0px;
}

/* Styling the 2 x Buttons in the Cover area for index.html *** */

section#coverimage p.rsvp_area, section#coverimage p.songarea {
  position: absolute;
  height: auto;
  width: auto;
  margin-left: 20%;
  bottom: 5%;
}

section#coverimage p.songarea {margin-left: 35%;}

section#coverimage p#rsvp_homepage a, section#coverimage p#songID a {
  font-size: 2.2em;
  font-family: Helvetica;
  font-weight: bold;
  font-stretch: condensed;
  color: #fff;
  text-align: center;
  padding: .25em .4em;
  border: 4px inset white;
  transition: all 0.5 ease;
  text-decoration: none;
}

section#coverimage p#rsvp_homepage a:hover, section#coverimage p#songID a:hover {
  background-color: white;
  color: #1710E6;
}

/* ****** Ceremony and Reception sections with image ****** */

section#shorehavenimage {background-image: url("../images/shorehaven.jpg");
  height: 1010px;
  background-size: 41% 75%;
}

section#caveimage {background-color: #F0F5F7;
  height: 1100px;
  background-image: url("../images/cavedecorated.JPG");
  background-size: 39% 71%;
}

section#shorehavenimage, section#caveimage {
  background-repeat: no-repeat;
  background-position: center top;
}

/* ****** Ceremony and Reception sections with READ MORE BUTTONS ****** */

section#shorehavenimage p.btnarea, section#caveimage p.btnarea {position: absolute;
  width: 99.6%;
  height: auto;
  margin: 0 auto;
  top: 53%;
}

section#shorehavenimage p.btnarea {top: 54%;}

section#shorehavenimage p#buttoncere a, section#caveimage p#buttonrecep a {
  padding: .25em .45em;
  font-size: 1.5em;
  text-align: center;
  font-family: Helvetica;
  transition: all 0.5 ease;
  text-decoration: none;
  border: 4px inset white;
  z-index: 1;
  color: white;
  text-shadow: 3px 3px 1px grey;
}

section#shorehavenimage p#buttoncere a:hover, section#caveimage p#buttonrecep a:hover{
  background-color: white;
  color: #1710E6;
}

/* ****** Ceremony and Reception sections with TEXT ********* */

section#shorehavenimage div.ceremonytext, section#caveimage div.cavetext {
  position: absolute;
  width: 100%;
  bottom: 0.7%;
}

section#shorehavenimage div.ceremonytext p, section#shorehavenimage div.ceremonytext h4,
section#caveimage div.cavetext p, section#caveimage div.cavetext h4 {position: relative;
  width: 99.9%;
  display: block;
  text-align: center;
  margin: 0 auto;
}

section#shorehavenimage div.ceremonytext h4, section#caveimage div.cavetext h4 {
  font-size: 2em;
  padding-bottom: .6em;
}

section#caveimage div.cavetext p span {font-size: 0.7em; 
  font-style: italic;}


/* ****** Other styling - unique to index.html ****** */

nav {border-bottom: none;}

nav a:hover {
  background-color: #0F6DF2;
  color: white;
}


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


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

  /* 2 circular photos and text - Beach + Reception  */
  section.twoboxareas {height: 920px;}
  section#shorehavenimage div.ceremonytext, section#caveimage div.cavetext p {margin-bottom: 0.5%;}

  /* Buttons inside the main cover photo - RSVP and Add photo */
  section#coverimage p#rsvp_homepage a, section#coverimage p#songID a {padding: .2em .35em;}

}

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

  /* Buttons inside the main cover photo - RSVP and Add photo */
  section#coverimage p.rsvp_area, section#coverimage p.songarea {margin-left: 12%;}
  section#coverimage p.songarea {margin-left: 30%;}

  /* Image size of the two circles for the Reception and Ceremony and section height */
  section#shorehavenimage {height: 875px;
        background-size: 43% 72%;}

  section#caveimage {height: 1000px;
    background-size: 43% 68%;}

  /* READ MORE button location over 2 circular images */ 
  section#shorehavenimage p.btnarea {top: 50%;}
  section#caveimage p.btnarea {top: 48%;}


 /* Text location below each circle - Reception and Ceremony */ 
  section.twoboxareas h4 {position: relative; padding-top: 0;}
  section#caveimage div.cavetext p {padding-top: 15px;}
}


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

  /* Names inside the cloud shrink */
     section.coverarea div.names {margin-top: 8%;}
     section.coverarea div.names h2 {font: 300 80px/0.8 'Great Vibes', Helvetica, sans-serif;}
}

@media screen and (max-width: 1310px) { 
   /* Shrink the date 25 February 2017 */
  section.coverarea div.date h3 {font-size: 1.65em;} 
}


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

  /* Buttons inside the main cover photo - RSVP and Add photo */
  section#coverimage p.rsvp_area {margin-bottom: 8.7%; margin-left: 27%;}
  section#coverimage p.songarea {margin-bottom: 1.3%; margin-left: 27%;}
  section#coverimage p#rsvp_homepage a, section#coverimage p#songID a {font-size: 2em;}

  /* Names inside the cloud shrink */
     section.coverarea div.names {margin-top: 11%;}
     section.coverarea div.names h2 {font: 300 70px/0.8 'Great Vibes', Helvetica, sans-serif;}

  /* Shrink the date 25 February 2017 */
     section.coverarea div.date h3 {font-size: 1.35em;} 

  /* Section height and Image size of the two circles for the Reception and Ceremony */
     section#shorehavenimage {height: 740px;
                              background-size: 43% 69%;}

     section#caveimage {height: 840px;
                        background-size: 41% 61%;}

  /* READ MORE button location over 2 circular images */ 
     section#shorehavenimage p.btnarea {top: 46%;}
     section#caveimage p.btnarea {top: 39%;}

  /* Resize READ MORE button */
     section#shorehavenimage p#buttoncere a, section#caveimage p#buttonrecep a {
      padding: .2em;
      font-size: 1.2em;}

}


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

  /* Names inside the cloud shrink */
    section.coverarea div.names {margin-top: 15%;}
    section.coverarea div.names h2 {font: 300 60px/0.8 'Great Vibes', Helvetica, sans-serif;}

  /* Buttons inside the main cover photo - RSVP and Add photo */
  section#coverimage p.rsvp_area {margin-bottom: 10.7%; margin-left: 27%;}
  section#coverimage p.songarea {margin-bottom: 3.3%; margin-left: 27%;}
  section#coverimage p#rsvp_homepage a, section#coverimage p#songID a {font-size: 1.8em;}

  /* Move the date 25 February 2017 */
    section.coverarea div.date {margin: 0;
      padding: 0;
      width: auto; 
      bottom: 0%;
      left: 26.7%;
  }

    section.coverarea div.date h3 {text-align: left; 
      margin-bottom: 1%;
      padding-left: 1.6%;
    }

  /* Section height and Image size of the two circles for the Reception and Ceremony */
     section#shorehavenimage {height: 540px;
                              background-size: 43% 68%;}

     section#caveimage {height: 650px;
                        background-size: 41% 62%;}

  /* READ MORE button location over 2 circular images */ 
     section#shorehavenimage p.btnarea {top: 48%;}
     section#caveimage p.btnarea {top: 44%;}

  /* Resize READ MORE button */
     section#shorehavenimage p#buttoncere a, section#caveimage p#buttonrecep a {
      padding: .15em .25em;
      font-size: 1.1em;
      text-shadow: 3px 3px 1px grey;}

  /* Resize the words Ceremony and Reception headers */
     section#shorehavenimage div.ceremonytext h4, section#caveimage div.cavetext h4 {
     font-size: 1.6em;
     padding-bottom: .3em;}

  /* Resize the text showing the address for the words Ceremony and Reception section */
     section#shorehavenimage div.ceremonytext p, section#caveimage div.cavetext p {font-size: .85em;}

}


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

   section#caveimage {height: 650px;
                        background-size: 41% 59%;}

  /* READ MORE button location over 2 circular images */ 
     section#caveimage p.btnarea {top: 41.5%;}

}

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

  /* Buttons inside the main cover photo - RSVP + add photo */
  section#coverimage p.rsvp_area {margin-bottom: 16%;}
  section#coverimage p.songarea {margin-bottom: 6%;}
  section#coverimage p.rsvp_area, section#coverimage p.songarea {right: 1.7%; 
    text-align: right; 
  }

  /* Names inside the cloud shrink */
    section.coverarea div.names {margin-top: 14%;}
    section.coverarea div.names h2 {font: 300 50px/0.8 'Great Vibes', Helvetica, sans-serif;}
    section.coverarea div.names h2 span {line-height: 2;}

  /* Move the date 25 February 2017 */
    section.coverarea div.date h3 {text-align: right;
     padding-right: 3px;} 

  /* Shrink whole cover image section with the sky and clouds */
     section.coverarea {height: 630px;}


     section#shorehavenimage {height: 620px;
                              background-size: 49% 65%;}

     section#caveimage {height: 730px;
                        background-size: 49% 58%;}

  /* READ MORE button location over 2 circular images */ 
     section#shorehavenimage p.btnarea {top: 47%;}
     section#caveimage p.btnarea {top: 40%;}

  /* Resize the words Ceremony and Reception headers */
     section#shorehavenimage div.ceremonytext h4, section#caveimage div.cavetext h4 {
     font-size: 1.5em;
     padding-bottom: .25em;}

  /* Resize the text showing the address for the words Ceremony and Reception section */
     section#shorehavenimage div.ceremonytext p, section#caveimage div.cavetext p {font-size: .9em;}


}

@media screen and (max-width: 790px) {
 
  /* Reduce height of coverarea (sky image)  */  
    section.coverarea {height: 540px;}

  /* Names inside the cloud shrink */
    section#coverimage div.names {margin-top: 15%;}
    section.coverarea div.names h2 {font: 300 35px/0.8 'Great Vibes', Helvetica, sans-serif;}
    section.coverarea div.date {bottom: 1%;}
    section.coverarea div.date h3 {font-size: 1.1em;} 
    section#coverimage p.rsvp_area {margin-bottom: 20%;}
    section#coverimage p#rsvp_homepage a, section#coverimage p#songID a {font-size: 1.5em;}

  /* Circular image sizes */ 
    section#shorehavenimage {background-size: 55% 64%;}
    section#caveimage {background-size: 55% 57%;}

 /* READ MORE button location over 2 circular images */ 
    section#shorehavenimage p.btnarea {top: 43%;}
    section#caveimage p.btnarea {top: 36%;}

 /* Resize READ MORE button */
     section#shorehavenimage p#buttoncere a, section#caveimage p#buttonrecep a {
      padding: .3em;
      font-size: 1em;
      text-shadow: 2px 2px 1px grey;}

}

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

  /* Names inside the cloud shrink */
    section.coverarea div.names {left-margin: 55%; margin-top: 19%;}
    section.coverarea div.names h2 {font: 300 36px/0.8 'Great Vibes', Helvetica, sans-serif;}

    section.coverarea div.date {bottom: 0%;}

  /* Text shrink for RSVP and ADD SONG buttons */
     section#coverimage p#rsvp_homepage a, section#coverimage p#songID a {font-size: 1.3em;}

 /* Section height and Image size of the two circles for the Reception and Ceremony */
     section#shorehavenimage {height: 495px;
                              background-size: 57% 65%;}

     section#caveimage {height: 620px;
                        background-size: 55% 55%;
    }

  /* READ MORE button location over 2 circular images */ 
     section#shorehavenimage p.btnarea {top: 45%;}
     section#caveimage p.btnarea {top: 37.5%;}

  /* Resize READ MORE button */
     section#shorehavenimage p#buttoncere a, section#caveimage p#buttonrecep a {
      padding: .15em;
      font-size: .9em;}

  /* Shink whole cover image section with the sky and clouds */
     section.coverarea {height: 530px;}

}

@media screen and (max-width: 600px) {
  /* Reduce height of coverarea (sky image)  */  
    section.coverarea {height: 460px;}

    section.coverarea div.names {margin-top: 25%;}
}

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

  /* Shink whole cover image section with the sky and clouds */
     section.coverarea {height: 480px;}


  /* Names inside the cloud shrink */
    section.coverarea div.names {margin-top: 14%;}
    section.coverarea div.names h2 {font: 300 50px/0.8 'Great Vibes', Helvetica, sans-serif;}
    section.coverarea div.names h2 span {line-height: 2;}

  /* Move the date 25 February 2017 */
    section.coverarea div.date h3 {text-align: right;
     padding-right: 3px;} 


  /* Reduce height of coverarea (sky image)  */  
    section.coverarea {height: 380px;}

  /* Names inside the cloud shrink */
    section.coverarea div.names {margin-top: 28%;}
    section.coverarea div.names h2 {font: 300 28px/0.8 'Great Vibes', Helvetica, sans-serif;}

  /* Resize the words Ceremony and Reception headers */
     section#shorehavenimage div.ceremonytext h4, section#caveimage div.cavetext h4 {
     font-size: 1.2em;
     padding-bottom: .15em;}

  /* Resize the text showing the address for the words Ceremony and Reception section */
     section#shorehavenimage div.ceremonytext p, section#caveimage div.cavetext p {font-size: .8em;}

 /* Section height and Image size of the two circles for the Reception and Ceremony */
     section#shorehavenimage {height: 430px;
                              background-size: 57% 59%;}

     section#caveimage {height: 545px;
                        background-size: 56% 49.7%;}

  /* READ MORE button location over 2 circular images */ 
     section#shorehavenimage p.btnarea {top: 38.7%;}
     section#caveimage p.btnarea {top: 33.5%;}
}


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

  /* Shink whole cover image section with the sky and clouds */
     section.coverarea {height: 340px;}

  /* Names inside the cloud shrink */
     section.coverarea div.names {margin-top: 18%;} 
     section.coverarea div.names h2 {font: 300 24px/0.8 'Great Vibes', Helvetica, sans-serif;}

  /* Shrink date and buttons inside the cloud image */
     section.coverarea div.date h3 {font-size: .9em;} 
     section#coverimage p#rsvp_homepage a, section#coverimage p#songID a {font-size: 1em;}

  /* READ MORE button location over 2 circular images */ 
     section#shorehavenimage p.btnarea {top: 41%;}
     section#caveimage p.btnarea {top: 32%;}

  /* Resize READ MORE button */
     section#shorehavenimage p#buttoncere a, section#caveimage p#buttonrecep a {
      padding: .1em;
      font-size: .72em;
      text-shadow: none;}

  /* Resize the words Ceremony and Reception headers */
     section#shorehavenimage div.ceremonytext h4, section#caveimage div.cavetext h4 {
     font-size: 1.1em;
     padding-bottom: .15em;}

  /* Resize the text showing the address for the words Ceremony and Reception section */
     section#shorehavenimage div.ceremonytext p, section#caveimage div.cavetext p {font-size: .75em;}

  /* Resize the small text below Reception address */
     section#caveimage div.cavetext p span {font-size: 0.6em;}
}   


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

  /* Shink whole cover image section with the sky and clouds */
     section.coverarea {height: 300px;
      min-height: 300px;}

  /* Names inside the cloud shrink */
     section.coverarea div.names h2 {font: 300 20px/0.8 'Great Vibes', Helvetica, sans-serif; padding-top: 12%;}

  /* Buttons inside the main cover photo - RSVP + add photo */
  section#coverimage p.rsvp_area {margin-bottom: 75px;}
  section#coverimage p.songarea {margin-bottom: 25px;}

  section#shorehavenimage {background-size: 75% 58%;}
  section#caveimage {height: 540px;
    background-size: 70% 48%;}
}

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

  /* Shrink the date 25 February 2017 */
  
  section.coverarea div.date {
    position: static;
    margin-top: 275px;
    background-color: white; 
    z-index: 1; 
}
    
  section.coverarea div.date h3 {font-size: .8em;
    text-align: center;} 

  /* Image size of each circle image - Caves and Shorehaven*/
  section#shorehavenimage {height: 380px;background-size: 80% 62%;}
  section#caveimage {height: 500px;
    background-size: 82% 48%;}

  /* Resize the text showing the address for the words Ceremony and Reception section */
     section#shorehavenimage div.ceremonytext p, section#caveimage div.cavetext p {font-size: .68em;}

  /* Text shrink for RSVP and ADD SONG buttons */
     section#coverimage p#rsvp_homepage a, section#coverimage p#songID a {font-size: .85em;}

}

@media screen and (max-width: 320px) {
  /* Hide the names inside the cloud in the coverimage */
     section.coverarea div.names h2 {display: none;}

  /* Section height minimise of reception section */
     section#caveimage {height: 460px;}

  /* Resize the words Ceremony and Reception headers */
     section#shorehavenimage div.ceremonytext h4, section#caveimage div.cavetext h4 {
     font-size: .9em;
     padding-bottom: .05em;}

  /* Resize the text showing the address for the words Ceremony and Reception section */
     section#shorehavenimage div.ceremonytext p, section#caveimage div.cavetext p {font-size: .6em;}

  /* Resize the small text below Reception address */
     section#caveimage div.cavetext p span {font-size: 0.55em;}

}