@import url('https://fonts.googleapis.com/css?family=Lora:400,400i,700|Merriweather&display=swap');

/*************** GLOBAL/COMMON USED CLASSES ****************/
 .wrapper{
  max-width: 1920px;
  width: 100%;
  margin: auto;
  overflow: hidden;
}

/* Universal toggle style used on every page */
#toggle{
  display: none;
}

/* Universal used hero image on every page */
.myheader{
  width: 100%;
  height: auto;
  min-height: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-bottom: 2px solid #feda6a;
}


/* Universal used navigation style on every page */
#navigation nav{
  font-size: 15px;
  list-style-type: none;
  padding: 20px;
  text-align: right;
  margin-top: 10px;
}

#navigation nav ul li a:active{
  color: #feda6a;
}

#navigation nav ul{
  margin-top: 63px;
}

#navigation nav ul li{
  display: inline-block;
  /* padding-left: 10px;
  padding-right: 10px; */
}

#navigation nav ul li a{
  text-decoration: none;
  color: #e7f0f9;
  letter-spacing: 0.5px;
  position: relative;
  padding: 1rem 0;
  margin: 0 3rem;
  clear: right;

}

#navigation nav label{
  margin: 0 40px 0 0;
  font-size: 26px;
  line-height: 70px;
  color: white;
  width: 26px;
  float: right;
  display: none;

}

/***** This h1 code is for both the newsletter section h1 and introduction section h1 elements *****/
h1{
  font-size: 2.308em;
  font-family: 'Lora', serif;
}

/****** Common Button Styling Applied  ******/
.common-btn-styling{
  border: 3px solid #feda6a;
  font-family: 'Merriweather', serif;
  cursor: pointer;
  color: #ffff;
  border-radius: 5px;
  background-color: #393f4d;
  display: inline-block;
  text-decoration: none;

}
/*************** GLOBAL/COMMON USED CLASSES ENDS HERE ****************/

/******************* CSS CODE FOR INDEX HOMEPAGE STARTS HERE*********************/

/* This html code changes the font size and font family of the navigation links and the smooth scrolling
property is enabled when "Learn More" button in the intro section is clicked */
html{
  scroll-behavior: smooth;
  font-size: 0.769em;
  font-family: 'Merriweather', serif;
  /* This small code removes the horizontal scrolling that I previously had */
  overflow-x: hidden;
}

body{
  background-color: #393f4d;
  height: 100%;
}

/************************* HEADER SECTION STARTS HERE *****************************/

/****** This whole section of code is dedicated to the header and nav, which is within the header.
I have applied various styles to the navigation, including before and after hover effects.******/

/*This code is for the hero image, which is displayed on the homepage*/
#header{
  background-image: url('../images/churchill-hero-img.jpg');
  background-size: cover;
}


/* This styling code is for the text that is displayed on the header section */
#header .hero-image-content{
  color: #d4d4dc;
  text-align: center;
  position: relative;
  top: 7%;

}

#header .hero-image-content h1{
  font-size: 50px;
  margin-bottom: 10px;
  line-height: 1.5;
  font-family: 'Lora', serif;
}

#header p{
  font-family: 'Merriweather', serif;
  font-size: 1.538em;
  line-height: 2em;
  padding: 30px;
}

.hero-image-content-button{
  position: relative;
  bottom: 31px;
  text-align: center;
  /* position: relative;
  top: 33px; */
}


/* I have applied styling to the anchor tag, which is applied on the header image button */
a.common-btn-styling{
  font-size: 1.077em;
  text-decoration: none;
  display: inline-block;
  transition: 0.2s ease-in-out;

}

/* This common button styling is for sections where button is applied, except for the newsletter section */
a.common-btn-styling:hover{
  background-color: #d4d4dc;
  text-decoration: underline;
  color: #494949 !important;
  border-radius: 50px;
  border-color: #494949 !important;
  transition: all 0.3s ease 0s;
}



/* This code is for the text highlight that has been set on the header-image heading (h1) */
#header h1 .hero-content-highlight{
  color: #feda6a;
  font-weight: lighter;
}


/********* Header Website Image Logo ************/
/* This code is for the image logo */
.index-logo{
  width: 150px;
  height: 150px;
  float: left;
  position: relative;
  margin: 10px 15px 15px 10px;

}
/*********************** HEADER ENDS HERE ************************/



/******************** NEWSLETTER SECTION STARTS HERE **********************/
#newsletter-section{
  border-top: 2px solid #feda6a;
  border-bottom: 2px solid #feda6a;
  padding: 15px;
  color: #d4d4dc;
  background-color: #393f4d;
  text-align: center;
}

#newsletter-section h1{
  display: inline-block;
  margin-right: 40px;
}

#newsletter-section .form{
  display: inline-block;
  vertical-align: top;
}

/* This common button styling is for the newsletter section */
.common-btn-styling{
  font-size: 1.077em;
  text-decoration: none;
  display: inline-block;
  transition: 0.2s ease-in-out;

}

/* This common button styling is for the newsletter section */
.common-btn-styling:hover{
  background-color: #d4d4dc;
  text-decoration: underline;
}

#newsletter-section input[type="email"]{
  padding: 5px;
  width: 225px;
  border-radius: 5px;

}

/* Newsletter buttion styles applied */
#newsletter-section .newsletter-btn{
  padding: 3px 17px;
  height: 30px;
  margin-left: 5px;

}

#newsletter-section .newsletter-btn:hover{
  color: #393f4d;
  color: #494949 !important;
  border-radius: 50px;
  border-color: #494949 !important;
  transition: all 0.3s ease 0s;
}
/**************** NEWSLETTER SECTION ENDS HERE *******************/


/************** INTRODUCTION SECTION STARTS HERE  *****************/
#intro-section h1{
  color: #d4d4dc;
  text-align: center;
  margin-top: 25px;
  line-height: 1.8em;
}

#intro-section p{
  color: #d4d4dc;
  font-size: 1.154em;
  text-align: center;
  padding-bottom: 14px;
  line-height: 2em;
  letter-spacing: 0.5px;
  padding: 30px;
}

/* This code is for the text highlight that has been set on the introduction heading (h1) */
#intro-section h1 .intro-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}

/* This code is for the text highlight that has been set on the introduction paragraph (p)*/
#intro-section p .intro-text-para-highlight{
  color: #feda6a;
  font-weight: lighter;
}

/****** Introduction Section Button Styles Applied ******/

.intro-btn{
  margin-top: 50px;
  padding: 10px 20px;
}

/* Button Hover Effects */
.intro-btn:hover{
  color: #393f4d;
}
/**************** INTRODUCTION SECTION ENDS HERE ****************/



/**************** CONTENT CARDS SECTION STARTS HERE ***************/
#content-cards .card-image-placement{
  background-image: url('../images/content-cards-background-img.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;

}

/* Description Content Card */
#content-cards .card-image-placement .cards1{
  display: block;
  background-color: #feda6a;
  border: 4px solid #393f4d;

}

/* History Content Card */
#content-cards .card-image-placement .cards2{
  display: block;
  background-color: #d4d4dc;
  border: 4px solid #feda6a;
}

/* Description Content Card Image */
#content-cards .card-image-placement .cards1 img{
  width: 100%;
}

/* History Content Card Image */
#content-cards .card-image-placement .cards2 img{
  width: 100%;
}

#content-cards ul{
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;

}

#content-cards li{
  margin-bottom: 1em;
  background-color: #d4d4dc;
  color: #1d1e22;
  display: inline-block;
  width: 25%;
  margin: 10px;
  margin-right: 10px;
  margin-top: 50px;
  vertical-align: top;
}

#content-cards .card-info{
  padding: 0.5em;
}

#content-cards .card-info h1{
  color: #393f4d;
  margin-top: 18px;
  text-align: center;
}

#content-cards .card-info p{
   font-size: 0.923em;
   margin-top: 25px;
   text-align: center;
   line-height: 20px;
}

/* Description Content Card Button */
 #desc-btn{
  padding: 8px;
  color: #f4f9fc;
  border-color: #ab8f37;
  transition: 0.5s;
  margin-top: 22px;
  margin-bottom: 20px;
  text-align: center;
}

#desc-btn:hover{
  color: #393f4d;
}

/* History Content Card Button */
 #history-btn{
  padding: 8px;
  color: #f4f9fc;
  border-color: #ab8f37;
  margin-top: 35px;
  transition: 0.5s;
  margin-bottom: 20px;
  text-align: center;

}

 #history-btn:hover{
  color: #393f4d;
}
/************** CONTENT CARD SECTION ENDS HERE ***************/


/**************** ROBIN BOYD SECTION STARTS HERE ********************/
#boyd-info-section{
  background: url('../images/robin-boyd-section-img_old.jpg');
  background-attachment: fixed;
  background-size: cover;
  /* background-position: center; */
  background-repeat: no-repeat;
  width: auto;
}

#boyd-info-section .box1{
  width: 50%;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}


#boyd-info-section .box2{
  text-align: center;
  width: 49.5%;
  display: inline-block;
}

#boyd-info-section h1 .boyd-header-highlight{
  color: #feda6a;
  font-weight: lighter;
}

#boyd-info-section .box2 h1{
  color: #d4d4dc;
}

#boyd-info-section .box2 .boyd-header{
  margin-top: 50px;
}

#boyd-info-section .box2 p{
  color: #d4d4dc;
  font-size: 1.154em;
  text-align: center;
  padding-bottom: 14px;
  line-height: 2em;
  letter-spacing: 0.5px;
  padding: 30px;
  margin: 40px;
  margin-top: 90px;
  }



  #boyd-info-section .box2 .boyd-section-button{
    position: relative;
    bottom: 71px;
  }
/**************** ROBIN BOYD SECTION ENDS HERE ********************/


/***************** FOOTER SECTION STARTS HERE ********************/
/* #footer-section{
  background-color: #393f4d;
  padding: 15px 0;
  border-top: 2px solid #feda6a;
} */

/* I have used a gif as an animation in my footer */
#footer-section{
	background-color: #393f4d;
	box-sizing: border-box;
	width: 100%;
	text-align: left;
  border-top: 2px solid #feda6a;
  padding: 0px 50px 0px 50px;
  background-image:url(https://media0.giphy.com/media/HKHDZ0y08hERi/giphy.gif?cid=790b76115d2c81346b4f58474d1d27fe&rid=giphy.gif);

}



/* This is the left section of the footer */
#footer-section .footer-section-right{
  width: 200px;
  height: 100px;
  display: inline-block;
  width: 33%;
  text-align: center;
  position: relative;
  bottom: 30px;
}


/* This is the center section of the footer */
#footer-section .footer-section-center{

  width: 200px;
  height: 200px;
  display: inline-block;
  width: 33%;
}


#footer-section .footer-section-center .website-footer-links li{
  text-align: center;
	letter-spacing: normal;
	line-height: 1.3em;
  padding: 15px;

}

#footer-section .footer-section-center .website-footer-links{
  position: relative;
  top: 83px;
}

#footer-section .footer-section-center .website-footer-links li a{
  text-decoration: none;
  color: #d4d4dc;
}


/* This is the left section of the footer */
#footer-section .footer-section-left{
  margin-top: 53px;
  width: 200px;
  height: 200px;
  display: inline-block;
  width: 33%;
}

#footer-section  .footer-section-right .footer-copyright-section .copyright{
  color: #d4d4dc;
}

#footer-section h1{
  color: #d4d4dc;
}

#footer-section h1 .footer-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}

#footer-section .footer-section-left h1{
  text-align: center;
}

#footer-section .footer-section-left .footer-text-declaration{
  text-align: center;
  line-height: 2em;
  position: relative;
  top: 25px;
  color: #d4d4dc;
}


/***************** FOOTER SECTION ENDS HERE ********************/

/******************* CSS CODE FOR INDEX HOMEPAGE ENDS HERE*********************/






/************************* CSS CODE FOR DESCRIPTION HOMEPAGE STARTS HERE *************************/

/***************** HEADER SECTION STARTS HERE ************************/
#header-desc{
  background-image: url('../images/description-header-image.jpg');
  background-size: cover;
}

 .index-logo{
  width: 150px;
  height: 150px;
  float: left;
  position: relative;
  margin: 10px 15px 15px 10px;

}


/* This styling code is for the text that is displayed on the header section */
#header-desc .hero-image-content{
  color: #d4d4dc;
  text-align: center;

}

#header-desc .hero-image-content h1{
  font-size: 3.846em;
  margin-bottom: 10px;
  line-height: 1.5;
  font-family: 'Lora', serif;
}

#header-desc p{
  font-family: 'Merriweather', serif;
  font-size: 1.538em;
  line-height: 2em;
  padding: 30px;
}



/* This code is for the text highlight that has been set on the header-image heading (h1) */
#header-desc h1 .hero-content-highlight{
  color: #feda6a;
  font-weight: lighter;
}
/***************** HEADER SECTION ENDS HERE ************************/



/************* DESCRIPTION INTRODUCTION SECTION STARTS HERE *********************/
#description-section h1{
  color: #d4d4dc;
  text-align: center;
  margin-top: 25px;
  line-height: 1.8em;
}

#description-section p{
  color: #d4d4dc;
  font-size: 1.154em;
  text-align: center;
  padding-bottom: 14px;
  line-height: 2em;
  letter-spacing: 0.5px;
  padding: 30px;
}

/* This code is for the text highlight that has been set on the introduction heading (h1) */
#description-section h1 .desc-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}

/* This code is for the text highlight that has been set on the introduction paragraph (p)*/
#description-section p .desc-text-para-highlight{
  color: #feda6a;
  font-weight: lighter;
}


/****** MAIN BUILDING SECTION STARTS HERE (PART OF DESCRIPTION) *******/

/* This code sets the background image of the main building section */
#main-building-section{
background-image: url('../images/main-building-section-desc.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}

/**************** Box 1 Content Starts Here************/
#main-building-section .box1{

    width: 50%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}

#main-building-section .box1 p{
  color: #d4d4dc;
  font-size: 1.154em;
  text-align: center;
  padding-bottom: 14px;
  line-height: 2em;
  letter-spacing: 0.5px;
  padding: 20px;
  margin: 40px;
  position: relative;
  bottom: 65px;
}

#main-building-section .box1 img{
  margin-top: 91px;
}
/**************** Box 1 Content Ends Here************/



/**************** Box 2 Content Starts Here************/
#main-building-section .box2{
  text-align: center;
  width: 49.5%;
  display: inline-block;
}

#main-building-section .box2 p{
color: #d4d4dc;
font-size: 1.154em;
text-align: center;
padding-bottom: 14px;
line-height: 2em;
letter-spacing: 0.5px;
padding: 30px;
margin: 40px;
margin-top: 90px;
}

#main-building-section .box2 h1{
  color: #d4d4dc;
  text-align: center;
  position: relative;
  top: 91px;
}

#main-building-section .box2 .main-building-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}
/**************** Box 2 Content Ends Here************/



/****************** NORTH WING SECTION STARTS HERE *****************/
#north-wing-section h1{
  color: #d4d4dc;
  text-align: center;
  margin-top: 25px;
  line-height: 1.8em;
}

#north-wing-section p{
  color: #d4d4dc;
  font-size: 1.154em;
  text-align: center;
  padding-bottom: 14px;
  padding: 30px;
  line-height: 2em;
  letter-spacing: 0.5px;
}

/* This code is for the text highlight that has been set on the introduction heading (h1) */
#north-wing-section h1 .north-wing-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}

#north-wing-section h1 .pool-area-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}
/********* NORTH WING SECTION ENDS HERE ********/


/************* ANALYSIS SECTION STARTS HERE ****************/

#stylistic-analysis-section{
background-image: url('../images/main-building-section-desc.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}

#stylistic-analysis-section .box1{

    width: 50%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}

#stylistic-analysis-section .box1 p{
  color: #d4d4dc;
  font-size: 1.154em;
  text-align: center;
  padding-bottom: 14px;
  line-height: 2em;
  letter-spacing: 0.5px;
  padding: 20px;
  margin: 40px;
  position: relative;
  bottom: 65px;
}

#stylistic-analysis-section .box1 img{
  margin-top: 91px;
}
/**************** Box 1 Content Ends Here************/



/**************** Box 2 Content Starts Here************/
#stylistic-analysis-section .box2{
  text-align: center;
  width: 49.5%;
  display: inline-block;
}

#stylistic-analysis-section .box2 p{
color: #d4d4dc;
font-size: 1.154em;
text-align: center;
padding-bottom: 14px;
line-height: 2em;
letter-spacing: 0.5px;
padding: 30px;
margin: 40px;
margin-top: 90px;
}

#stylistic-analysis-section .box2 h1{
  color: #d4d4dc;
  text-align: center;
  position: relative;
  top: 91px;
}

#stylistic-analysis-section .box2 .analysis-section-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}

/**************** Box 2 Content Ends Here************/

/************************* CSS CODE FOR DESCRIPTION HOMEPAGE ENDS HERE *************************/






/************************* CSS CODE FOR STATEMENT OF SIGNIFICANCE HOMEPAGE STARTS HERE *************************/

/********HEADER SECTION OF STATEMENT OF SIGNIFICANCE  ********/
#header-statement-Of-Sig{
  background-image: url('../images/statement-Of-Sig.jpg');
  background-size: cover;
}

#header-statement-Of-Sig h1 .hero-content-highlight{
    color: #feda6a;
    font-weight: lighter;

}

/* This styling code is for the text that is displayed on the header section */
#header-statement-Of-Sig .hero-image-content{
  color: #d4d4dc;
  text-align: center;

}

#header-statement-Of-Sig .hero-image-content h1{
  font-size: 3.846em;
  margin-bottom: 10px;
  line-height: 1.5;
  font-family: 'Lora', serif;
}

#header-statement-Of-Sig p{
  font-family: 'Merriweather', serif;
  font-size: 20px;
  line-height: 2em;
  padding: 30px;
}



/* This code is for the text highlight that has been set on the header-image heading (h1) */
#navigation h1 .hero-content-highlight{
  color: #feda6a;
  font-weight: lighter;
}


/************ STATEMENT OF SIGIFICANCE IMAGE SECTION ****************/
#statementOfSig-section h1{
  color: #d4d4dc;
  text-align: center;
  margin-top: 25px;
  line-height: 1.8em;
}

#statementOfSig-section p{
  color: #d4d4dc;
  font-size: 15px;
  text-align: center;
  padding-bottom: 14px;
  line-height: 2em;
  letter-spacing: 0.5px;
  padding: 30px;
}

/* This code is for the text highlight that has been set on the introduction heading (h1) */
#statementOfSig-section h1 .statementOfSig-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}

/* This code is for the text highlight that has been set on the introduction paragraph (p)*/
#statementOfSig-section p .statementOfSig-text-para-highlight{
  color: #feda6a;
  font-weight: lighter;
}

/* This is the statement of Significance image section */
#statementOfSig-image-section{
  background-image: url('../images/content-cards-background-img.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/**************** Box 1 Content Starts Here************/
#statementOfSig-image-section .box1{
  width: 50%;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

#statementOfSig-image-section .box1 p{
  color: #d4d4dc;
  font-size: 1.154em;
  text-align: center;
  padding-bottom: 14px;
  line-height: 2em;
  letter-spacing: 0.5px;
  padding: 20px;
  margin: 40px;
  position: relative;
  bottom: 22px;
}

#statementOfSig-image-section .box1 img{
  margin-top: 91px;
}
/**************** Box 1 Content Ends Here************/





/**************** Box 2 Content Starts Here************/
#statementOfSig-image-section .box2{
  text-align: center;
  width: 49.5%;
  display: inline-block;
}

#statementOfSig-image-section .box2 p{
  color: #d4d4dc;
  font-size: 1.154em;
  text-align: center;
  padding-bottom: 14px;
  line-height: 2em;
  letter-spacing: 0.5px;
  padding: 30px;
  margin: 40px;
  margin-top: 90px;
}

#statementOfSig-image-section .box2 h1{
  color: #d4d4dc;
  text-align: center;
  position: relative;
  top: 91px;
}

#statementOfSig-image-section .box2 .analysis-section-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}

#statementOfSig-image-section .box2 img{
  position: relative;
  margin-top: 37px;
  bottom: 20px;
}
/************************* CSS CODE FOR STATEMENT OF SIGNIFICANCE HOMEPAGE ENDS HERE *************************/







/************************* CSS CODE FOR HISTORY HOMEPAGE STARTS HERE *************************/

/****************** HEADER SECTION **************/
#header-history{
  background-image: url('../images/history-header-image.jpg');
  background-size: cover;
}

/* This styling code is for the text that is displayed on the header section */
#header-history .hero-image-content{
  color: #d4d4dc;
  text-align: center;

}

#header-history .hero-image-content h1{
  font-size: 3.846em;
  margin-bottom: 10px;
  line-height: 1.5;
  font-family: 'Lora', serif;
}

#header-history p{
  font-family: 'Merriweather', serif;
  font-size: 1.538em;
  line-height: 2em;
  padding: 30px;
}




/* This code is for the text highlight that has been set on the header-image heading (h1) */
#header-history h1 .hero-content-highlight{
  color: #feda6a;
  font-weight: lighter;
}


/************ HISTORY IMAGE SECTION ****************/
#history-section h1{
  color: #d4d4dc;
  text-align: center;
  margin-top: 25px;
  line-height: 1.8em;
}

#history-section p{
  color: #d4d4dc;
  font-size: 1.154em;
  text-align: center;
  padding-bottom: 14px;
  line-height: 2em;
  letter-spacing: 0.5px;
  padding: 30px;
}

/* This code is for the text highlight that has been set on the introduction heading (h1) */
#history-section h1 .history-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}

/* This code is for the text highlight that has been set on the introduction paragraph (p)*/
#history-section p .history-text-para-highlight{
  color: #feda6a;
  font-weight: lighter;
}


#history-image-section{
  background-image: url('../images/main-building-section-desc.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/**************** Box 1 Content Starts Here************/
#history-image-section .box1{
  width: 50%;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

#history-image-section .box1 p{
  color: #d4d4dc;
  font-size: 1.154em;
  text-align: center;
  padding-bottom: 14px;
  line-height: 2em;
  letter-spacing: 0.5px;
  padding: 20px;
  margin: 40px;
  position: relative;
  bottom: 28px;
}

#history-image-section .box1 img{
  margin-top: 91px;
}
/**************** Box 1 Content Ends Here************/





/**************** Box 2 Content Starts Here************/
#history-image-section .box2{
  text-align: center;
  width: 49.5%;
  display: inline-block;
}

#history-image-section .box2 p{
  color: #d4d4dc;
  font-size: 15px;
  text-align: center;
  padding-bottom: 14px;
  line-height: 2em;
  letter-spacing: 0.5px;
  padding: 30px;
  margin: 40px;
  margin-top: 90px;
}

#history-image-section .box2 h1{
  color: #d4d4dc;
  text-align: center;
  position: relative;
  top: 91px;
}

#history-image-section .box2 .history-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}






/************************* CSS CODE FOR ROBIN BOYD HOMEPAGE STARTS HERE *************************/
/****************** HEADER SECTION **************/
#header-boyd{
  background-image: url('../images/boyd-header-img.jpg');
  background-size: cover;
}

/* This styling code is for the text that is displayed on the header section */
#header-boyd .hero-image-content{
  color: #d4d4dc;
  text-align: center;

}

#header-boyd .hero-image-content h1{
  font-size: 3.846em;
  margin-bottom: 10px;
  line-height: 1.5;
  font-family: 'Lora', serif;
}

#header-boyd p{
  font-family: 'Merriweather', serif;
  font-size: 1.538em;
  line-height: 2em;
  padding: 30px;
}



/* This code is for the text highlight that has been set on the header-image heading (h1) */
#header-boyd h1 .hero-content-highlight{
  color: #feda6a;
  font-weight: lighter;
}


/************ HISTORY IMAGE SECTION ****************/
#boyd-section h1{
  color: #d4d4dc;
  text-align: center;
  margin-top: 25px;
  line-height: 1.8em;
}

#boyd-section p{
  color: #d4d4dc;
  font-size: 1.154em;
  text-align: center;
  padding-bottom: 14px;
  line-height: 2em;
  letter-spacing: 0.5px;
  padding: 30px;
}

/* This code is for the text highlight that has been set on the introduction heading (h1) */
#boyd-section h1 .history-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}

/* This code is for the text highlight that has been set on the introduction paragraph (p)*/
#boyd-section p .history-text-para-highlight{
  color: #feda6a;
  font-weight: lighter;
}


#boyd-image-section{
  background-image: url('../images/content-cards-background-img.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/**************** Box 1 Content Starts Here************/
#boyd-image-section .box1{
  width: 50%;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

#boyd-image-section .box1 p{
  color: #d4d4dc;
  font-size: 1.154em;
  text-align: center;
  padding-bottom: 14px;
  line-height: 2em;
  letter-spacing: 0.5px;
  padding: 20px;
  margin: 40px;
  position: relative;
  bottom: 28px;
}

#boyd-image-section .box1 img{
  margin-top: 91px;
}
/**************** Box 1 Content Ends Here************/



/**************** Box 2 Content Starts Here************/
#boyd-image-section .box2{
  text-align: center;
  width: 49.5%;
  display: inline-block;
}

#boyd-image-section .box2 p{
  color: #d4d4dc;
  font-size: 15px;
  text-align: center;
  padding-bottom: 14px;
  line-height: 2em;
  letter-spacing: 0.5px;
  padding: 30px;
  margin: 40px;
  margin-top: 90px;
}

#boyd-image-section .box2 h1{
  color: #d4d4dc;
  text-align: center;
  position: relative;
  top: 91px;
}

#boyd-image-section .box2 .history-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}

#boyd-image-section .box2 img{
  position: relative;

}


#boyd-text-section h1{
  color: #d4d4dc;
  text-align: center;
  margin-top: 25px;
  line-height: 1.8em;
}

#boyd-text-section p{
  color: #d4d4dc;
  font-size: 1.154em;
  text-align: center;
  padding-bottom: 14px;
  padding: 30px;
  line-height: 2em;
  letter-spacing: 0.5px;
}

/* This code is for the text highlight that has been set on the introduction heading (h1) */
#boyd-text-section h1 .Boyd-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}

#boyd-text-section h1 .pool-area-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}

#boyd-text-section ul{
  text-align: center;
  line-height: 2.5em;
  color: #d4d4dc;
  list-style: decimal-leading-zero;
}

/* BOYD IMAGE SECTION */
#boyd-section-box-2{
background-image: url('../images/main-building-section-desc.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}

#boyd-section-box-2 .box1{
    text-align: center;
    width: 50%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}

#boyd-section-box-2 .box1 p{
  color: #d4d4dc;
  font-size: 1.154em;
  text-align: center;
  padding-bottom: 14px;
  line-height: 2em;
  letter-spacing: 0.5px;
  padding: 20px;
  margin: 40px;
  position: relative;
  bottom: 19px;
}

#boyd-section-box-2 .box1 img{
  margin-top: 91px;
}
/**************** Box 1 Content Ends Here************/



/**************** Box 2 Content Starts Here************/
#boyd-section-box-2 .box2{
  text-align: center;
  width: 49.5%;
  display: inline-block;
}

#boyd-section-box-2 .box2 p{
color: #d4d4dc;
font-size: 1.154em;
text-align: center;
padding-bottom: 14px;
line-height: 2em;
letter-spacing: 0.5px;
padding: 30px;
margin: 40px;
margin-top: 90px;
}

#boyd-section-box-2 .box2 h1{
  color: #d4d4dc;
  text-align: center;
  position: relative;
  top: 91px;
}

#boyd-section-box-2 .box2 .analysis-section-text-highlight{
  color: #feda6a;
  font-weight: lighter;
}

#boyd-section-box-2 .box2 img{
  position: relative;
}


/************************ Navigation Hover Effects  **********************/
/* This code gives "hover" style to the navigation links. It centers them in the center, gives them padding
and the navigation links get displayed as flex */

/* This code is for the "before" hover effects */
#navigation nav ul li a::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #feda6a;
  left: 0;
  transform: scaleX(0);
}

/* This code is for the "after" hover effects */
#navigation nav ul li a::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #feda6a;
  left: 0;
  transform: scaleX(0);
}



/* This code is for the before hover effects. In this code, the transform-origin and transition property add
 simply animations on hover to the navigation links.  */
#navigation nav ul li a::before{
  top: 0;
  transform-origin: left;
  transition: all 0.5s;

}

/* This code is for the after hover effects. The transform-origin property allows me to change the position
of the yellow hover effect below the links to the left and the transition allows the hover effect to move smoothly
from left to right */
#navigation nav ul li a::after{
  bottom: 0;
  transform-origin: left;
  transition: all 0.5s;
}

/* This code is for the before hover effects. The transform property is the main animation property that
allows the hover effect to occur. Without the transform property, the hover effect would not appear */
#navigation nav ul li a:hover::before{
  transform: scaleX(1);
}

/* Comments same as above */
#navigation nav ul li a:hover::after{
  transform: scaleX(1);

}



/*********** MEDIA QUERY FOR IPHONE 6, 7, 8 PLUS ******************* */

@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) { /* STYLES GO HERE */
  /* For IPhone 6,7,8 Plus: */

  /* Universal navigation style used in mobile responsiveness */
  #navigation nav ul li{
    display: inline-block;
    border-bottom: 1px solid #8e8b8b;
  }

  #navigation nav{

    padding: 0px;
    margin-top: 30px;

  }

  #navigation nav ul li a{
    display: block;
    margin: 0;
  }

  /* These blocks of code will disable the hover effects on mobile responsiveness */
  #navigation nav ul li a::before{
  display:none;
  }
  #navigation nav ul li a::after{
  display:none;
  }
  #navigation nav ul li a::before{
  display:none;

  }
  #navigation nav ul li a::after{
    display:none;
  }
  #navigation nav ul li a:hover::before{
    display:none;
  }

  /* Comments same as above */
  #navigation nav ul li a:hover::after{
    display:none;

  }



  /****** INDEX PAGE STARTS HERE ********/

  #header{
    background: url(../images/churchill-hero-img-iphone-version.png);
    background-size: cover;
    height: auto;
    min-height: 100%;
    background-position: center;
  }

  .index-logo{
    width: 150px;
    height: 150px;
    position: relative;
    bottom: 30px;
    text-align: left;
  }

  #newsletter-section{
    padding-top: 22px;
    text-align: center;
  }

  #newsletter-section .form{
    padding-top: 17px;
  }


  #content-cards li {
    width: 80%;
  }

  #boyd-info-section .box2{
    text-align: center;
    display: inline-block;
    width: 100%;
  }

  #boyd-info-section .box1 img{
    position: relative;
    top: 50px;
    text-align: center;
    margin-left: 20px;
  }

  #boyd-info-section .box2 p{
    position: relative;
    bottom: 50px;
  }

  #boyd-info-section h1 .boyd-header-highlight{
    color: #feda6a;
    font-weight: lighter;
  }

  #boyd-info-section .boyd-section-button{
    text-align: center;
    position: relative;
    bottom: 110px;
  }
  /****** INDEX PAGE ENDS HERE ********/




  /******** FOOTER SECTION STARTS HERE ********/

  #footer-section .footer-section-left,
  #footer-section .footer-section-center,
	#footer-section .footer-section-right{
		display: block;
		width: 100%;
		text-align: center;
	}

  #footer-section h1 .footer-text-highlight{
    line-height: 1.5em;
  }

	#footer-section .footer-section-center li{
		/* margin-left: 0; */
	}

  #footer-section .footer-section-center .website-footer-links{
    position: relative;
    top: 0px;
    margin: 0 auto;
  }
  /******** FOOTER SECTION ENDS HERE ********/




  /******** DESCRIPTION PAGE STARTS HERE *********/
  #header-desc{
    background: url(../images/description-header-image-mobile-version.jpg);
    background-size: cover;
    height: auto;
    min-height: 100%;
    background-position: center;

  }

  #header-history{
    background: url(../images/history-header-image-mobile-version.jpg);
    background-size: cover;
    height: auto;
    min-height: 100%;
    background-position: center;

  }

  #header-statement-Of-Sig{
    background: url(../images/statement-Of-Sig-mobile-version.jpg);
    background-size: cover;
    height: auto;
    min-height: 100%;
    background-position: center;

  }

  #header-boyd{
    background: url(../images/boyd-header-img-mobile-version.jpg);
    background-size: cover;
    height: auto;
    min-height: 100%;
    background-position: center;

  }


  #content-cards .card-image-placement{
    height: auto;
    min-height: 100%;
    background: url(../images/main-building-section-desc-mobile-version.jpg);
    background-position: center;
  }

  #boyd-info-section{
    height: auto;
    min-height: 100%;
    background: url(../images/robin-boyd-section-img-mobile-version.png);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;

  }

  /* Description Page */
  #main-building-section{
    height: auto;
    min-height: 100%;
    background: url(../images/content-cards-background-img-mobile-version.jpg);
    background-position: center;
  }

  /* desc footer */
  #footer-section .production-declaration p{
    display: block;
    line-height: 1.5em;
    text-align: center;
    color: #d4d4dc;
    padding: 20px;
  }

  #footer-section .copyright{
    margin: 0 auto;
    width: 40%;
    font-family: 'Merriweather', serif;
  }

  #footer-section .copyright p{
    display: block;
    line-height: 1.5em;
    text-align: center;
    color: #d4d4dc;
    margin: 25px;
  }

  #stylistic-analysis-section{
    height: auto;
    min-height: 100%;
    background: url(../images/content-cards-background-img-mobile-version.jpg);
    background-position: center;


  }

  #history-image-section{
    height: auto;
    min-height: 100%;
    /* background: url(../images/main-building-section-desc-mobile-version.jpg); */
    background-position: center;
  }

  #statementOfSig-image-section{
    height: auto;
    min-height: 100%;
    /* background: url(../images/content-cards-background-img-mobile-version.jpg); */
    background-position: center;

  }

  #boyd-image-section{
    height: auto;
    min-height: 100%;
    /* background: url(../images/content-cards-background-img-mobile-version.jpg); */
    background-position: center;

  }

  #boyd-section-box-2{
    height: auto;
    min-height: 100%;
    /* background: url(../images/main-building-section-desc-mobile-version.jpg); */
    background-position: center;
  }

/* hamburger navigation menu starts here */
    #navigation nav, #navigation nav ul li {
      float: none;
      text-align: center;
      width: 100%;
  }


   #navigation nav label{
     display: block;
     text-align: center;
     cursor: pointer;
     margin-left: 35px;
   }

   #navigation nav label:nth-child(even){
     color: yellow;
   }

   /* #navigation nav ul li a{
     display: block;
     margin: 0;
   } */


  #footer-section ul{
    width: 48%;
    text-align: center;
    margin-top: 8px;
  }



  #footer-section h1{
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  #footer-section  .footer-section-right .footer-copyright-section .copyright{
    position: relative;
    top: 60px;
    line-height: 1.5em;
    width: 100%;
  }

  #main-building-section .box2{
    position: relative;
    bottom: 50px;
    text-align: center;
    display: inline-block;
    width: 100%;
  }

  #main-building-section .box1{
    text-align: center;
    display: inline-block;
    width: 100%;
  }

  #stylistic-analysis-section .box1{
    width: 100%;
  }

  #stylistic-analysis-section .box2{
    position: relative;
    bottom: 52px;
    text-align: center;
    display: inline-block;
    width: 100%;
  }

  #history-image-section .box1 {
    width: 100%;
  }

  #history-image-section .box2{
    position: relative;
    bottom: 50px;
    text-align: center;
    display: inline-block;
    width: 100%;
  }

    #statementOfSig-image-section .box1{
      text-align: center;
      display: inline-block;
      width: 100%;
    }


    #statementOfSig-image-section .box2{
      position: relative;
      bottom: 50px;
      text-align: center;
      display: inline-block;
      width: 100%;
    }

    #boyd-image-section .box1{
      text-align: center;
      display: inline-block;
      width: 100%;
    }

    #boyd-image-section .box2{
      position: relative;
      bottom: 50px;
      text-align: center;
      display: inline-block;
      width: 100%;
    }

    #boyd-section-box-2 .box1{
      text-align: center;
      display: inline-block;
      width: 100%;
    }

    #boyd-section-box-2 .box2{
      position: relative;
      bottom: 50px;
      text-align: center;
      display: inline-block;
      width: 100%;
    }

    #toggle + .bmenu {
      display: none;
    }
    #toggle:checked + .bmenu {
      display: block;
    }

    label{
            display: block;
            cursor: pointer;
        }
}



/* MEDIA QUERY FOR IPHONE 6, 6s, 7, 8 */

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px){



      /* Universal navigation style used in mobile responsiveness */
      #navigation nav ul li{
        display: inline-block;
        border-bottom: 1px solid #8e8b8b;
      }

      #navigation nav{

        padding: 0px;
        margin-top: 30px;

      }

      #navigation nav ul li a{
        display: block;
        margin: 0;
      }

      /* These blocks of code will disable the hover effects on mobile responsiveness */
      #navigation nav ul li a::before{
      display:none;
      }
      #navigation nav ul li a::after{
      display:none;
      }
      #navigation nav ul li a::before{
      display:none;

      }
      #navigation nav ul li a::after{
        display:none;
      }
      #navigation nav ul li a:hover::before{
        display:none;
      }

      /* Comments same as above */
      #navigation nav ul li a:hover::after{
        display:none;

      }



    /* hamburger navigation menu starts here */
        #navigation nav, #navigation nav ul li {
          float: none;
          text-align: center;
          width: 100%;
      }


       #navigation nav label{
         display: block;
         text-align: center;
         cursor: pointer;
         margin-left: 35px;
       }

       #navigation nav label:nth-child(even){
         color: yellow;
       }

       #toggle + .bmenu {
         display: none;
       }
       #toggle:checked + .bmenu {
         display: block;
       }

       label{
               display: block;
               cursor: pointer;
           }
    /* HAMBURGER MENU ENDS HERE */





  /* INDEX PAGE HERE */
  #header .hero-image-content h1{
    padding: 10px;
  }

  .index-logo{
    width: 150px;
    height: 150px;
    position: relative;
    bottom: 30px;
    text-align: left;
  }

  #header p{
    margin: 20px;
  }

  #newsletter-section h1{
    padding: 12px;
  }

  #newsletter-section .newsletter-btn{
    padding: 0px;
  }



  #content-cards li{
    width: 80%;
  }

  #boyd-info-section .box1 img{

  }

  #boyd-info-section .box2 .boyd-header{
    margin-top: 0px;
  }

  #boyd-info-section .box2{
    width: 100%;
  }

  #boyd-info-section .box2 p{
    position: relative;
    bottom: 50px;
    color: #d4d4dc;
    font-size: 1.154em;
    text-align: center;
    padding-bottom: 14px;
    line-height: 2em;
    letter-spacing: 0.5px;
    padding: 30px;
    margin: 40px;
    margin-top: 50px;
  }

  #boyd-info-section .box2 .boyd-section-button{
    position: relative;
    bottom: 104px;
  }
  /* INDEX PAGE FINISHES HERE */



  /* FOOTER PAGE STARTS HERE */
  #footer-section .footer-section-left, #footer-section .footer-section-center, #footer-section .footer-section-right{
    display: block;
    width: 100%;
    text-align: center;
  }

  #footer-section .footer-section-center .website-footer-links{
    position: relative;
    top: 0px;
    margin: 0 auto;
  }

  #footer-section .footer-section-right .footer-copyright-section .copyright{
    position: relative;
    top: 60px;
    line-height: 1.5em;
    width: 100%;
  }
  /* FOOTER PAGE FINISHES HERE  */





  /* DESCRIPTION PAGE HERE */
  #main-building-section .box2{
    width: 100%;
    position: relative;
    bottom: 50px;
  }

  #main-building-section .box1{
    width: 100%;
  }

  #stylistic-analysis-section .box2{
    width: 100%;
    position: relative;
    bottom: 40px;
  }

  #stylistic-analysis-section .box1{
    width: 100%;
  }
  /* DESCRIPTION PAGE FINISHES HERE */



  /* STATEMENT OF SIGIFICANCE PAGE HERE */
  #statementOfSig-image-section .box1{
    width: 100%;
  }

  #statementOfSig-image-section .box2{
    width: 100%;
  }

  #statementOfSig-image-section .box2 img{
    position: relative;
    bottom: 40px;
  }
  /* STATEMENT OF SIGIFICANCE PAGE FINISHES HERE */



  /* HISTORY PAGE HERE */
  #history-image-section .box1{
    width: 100%;
  }

  #history-image-section .box2{
    width: 100%;
  }

  #history-image-section .box2{
    position: relative;
    bottom: 40px;
  }
  /* HISTORY PAGE FINISHES HERE */



  /* ROBIN BOYD PAGE HERE */
  #boyd-image-section .box1{
    width: 100%;
  }

  #boyd-image-section .box2{
    width: 100%;
  }

  #boyd-image-section .box2{
    position: relative;
    bottom: 40px;
  }

  #boyd-section-box-2 .box1{
    width: 100%;
  }

  #boyd-section-box-2 .box2{
    width: 100%;
    position: relative;
    bottom: 40px;
  }


}

/* MEDIA QUERY FOR ANDROID PHONES */

@media only screen and (min-width: 320px) and (max-width: 479px){

  /* Universal navigation style used in mobile responsiveness */
  #navigation nav ul li{
    display: inline-block;
    border-bottom: 1px solid #8e8b8b;
  }

  #navigation nav{

    padding: 0px;
    margin-top: 30px;

  }

  #navigation nav ul li a{
    display: block;
    margin: 0;
  }

  /* These blocks of code will disable the hover effects on mobile responsiveness */
  #navigation nav ul li a::before{
  display:none;
  }
  #navigation nav ul li a::after{
  display:none;
  }
  #navigation nav ul li a::before{
  display:none;

  }
  #navigation nav ul li a::after{
    display:none;
  }
  #navigation nav ul li a:hover::before{
    display:none;
  }

  /* Comments same as above */
  #navigation nav ul li a:hover::after{
    display:none;

  }



/* hamburger navigation menu starts here */
    #navigation nav, #navigation nav ul li {
      float: none;
      text-align: center;
      width: 100%;
  }


   #navigation nav label{
     display: block;
     text-align: center;
     cursor: pointer;
     margin-left: 35px;
   }

   #navigation nav label:nth-child(even){
     color: yellow;
   }

   #toggle + .bmenu {
     display: none;
   }
   #toggle:checked + .bmenu {
     display: block;
   }

   label{
           display: block;
           cursor: pointer;
       }
/* HAMBURGER MENU ENDS HERE */


/* INDEX PAGE STARTS HERE */

  #boyd-info-section{
    background-position: center;
  }
  #newsletter-section h1{
    padding: 12px;
  }

  #newsletter-section .form{
    padding-top: 17px;
  }

  #newsletter-section input[type="email"]{
    padding: 5px;
    width: 225px;
    border-radius: 5px;
  }

  #newsletter-section .newsletter-btn{
    margin: 20px;
  }

  #content-cards li{
    width: 80%;
  }

  #boyd-info-section .box2{
    width: 100%;
  }

  #footer-section .footer-section-left,
  #footer-section .footer-section-center,
  #footer-section .footer-section-right{
    display: block;
    width: 100%;
    text-align: center;
  }

  #footer-section .footer-section-center .website-footer-links li{
    text-align: center;
    letter-spacing: normal;
    line-height: 1.3em;
    padding: 15px;
  }

  #footer-section .footer-section-center .website-footer-links{
    position: relative;
    top: 0px;
    margin: 0 auto;
  }

  #footer-section .footer-section-right .footer-copyright-section .copyright{
    position: relative;
    top: 60px;
    line-height: 1.5em;
    width: 100%;
  }
  /* INDEX PAGE ENDS HERE */




  /* DESCRIPTION PAGE STARTS HERE */
  #main-building-section .box1{
    width: 100%;
  }

  .index-logo{
    position: relative;
    bottom: 30px;
  }

  #main-building-section .box2{
    position: relative;
    bottom: 50px;
    width: 100%;
  }

  #stylistic-analysis-section .box1{
    width: 100%;
  }

  #stylistic-analysis-section .box2{
    position: relative;
    bottom: 50px;
    width: 100%;
  }
  /* DESCRIPTION PAGE ENDS HERE */


  /* STATEMENT OF SIGIFICANCE PAGE STARTS HERE */
  #statementOfSig-section h1{
    padding: 10px;
  }

  #statementOfSig-image-section .box1{
    width: 100%;
  }

  #statementOfSig-image-section .box2{
    position: relative;
    bottom: 50px;
    width: 100%;
  }
  /* STATEMENT OF SIGIFICANCE PAGE ENDS HERE */


  /* HISTORY PAGE STARTS HERE */

  #history-image-section .box1{
    width: 100%;
  }

  #history-image-section .box2{
    position: relative;
    bottom: 50px;
    width: 100%;
  }
  /* HISTORY PAGE ENDS HERE */


  /* ROBIN BOYD PAGE STARTS HERE */
  #boyd-image-section .box1{
    width: 100%;
  }

  #boyd-image-section .box2{
    position: relative;
    bottom: 50px;
    width: 100%;
  }

  #boyd-section-box-2 .box1{
    width: 100%;
  }

  #boyd-section-box-2 .box2{
    position: relative;
    bottom: 50px;
    width: 100%;
  }
  /* ROBIN BOYD PAGE ENDS HERE */

}


  /* MEDIA QUERY FOR TABLET DEVICE */
  @media only screen and (max-width: 760px){

    /* Universal navigation style used in mobile responsiveness */
    #navigation nav ul li{
      display: inline-block;
      border-bottom: 1px solid #8e8b8b;
    }

    #navigation nav{

      padding: 0px;
      margin-top: 30px;

    }

    #navigation nav ul li a{
      display: block;
      margin: 0;
    }

    /* These blocks of code will disable the hover effects on mobile responsiveness */
    #navigation nav ul li a::before{
    display:none;
    }
    #navigation nav ul li a::after{
    display:none;
    }
    #navigation nav ul li a::before{
    display:none;

    }
    #navigation nav ul li a::after{
      display:none;
    }
    #navigation nav ul li a:hover::before{
      display:none;
    }

    /* Comments same as above */
    #navigation nav ul li a:hover::after{
      display:none;

    }



  /* hamburger navigation menu starts here */
      #navigation nav, #navigation nav ul li {
        float: none;
        text-align: center;
        width: 100%;
    }


     #navigation nav label{
       display: block;
       text-align: center;
       cursor: pointer;
       margin-left: 35px;
     }

     #navigation nav label:nth-child(even){
       color: yellow;
     }

     #toggle + .bmenu {
       display: none;
     }
     #toggle:checked + .bmenu {
       display: block;
     }

     label{
             display: block;
             cursor: pointer;
         }
  /* HAMBURGER MENU ENDS HERE */


  /* INDEX PAGE STARTS HERE */

    .index-logo{
      position: relative;
      bottom: 30px;
    }

    #newsletter-section .form{
      margin-top: 15px;
    }

    #content-cards li{
      width: 80%;
    }

    #footer-section .footer-section-right{
      line-height: 1.5em;
    }
  }






/***************** For IPad Mini and IPad Air ----------- ************/

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */
  /* For IPad Mini and IPad Air ************/



    /* Universal navigation style used in mobile responsiveness */
    #navigation nav ul li{
      display: inline-block;
      border-bottom: 1px solid #8e8b8b;
    }

    #navigation nav{

      padding: 0px;
      margin-top: 30px;

    }

    #navigation nav ul li a{
      display: block;
      margin: 0;
    }

    /* These blocks of code will disable the hover effects on mobile responsiveness */
    #navigation nav ul li a::before{
    display:none;
    }
    #navigation nav ul li a::after{
    display:none;
    }
    #navigation nav ul li a::before{
    display:none;

    }
    #navigation nav ul li a::after{
      display:none;
    }
    #navigation nav ul li a:hover::before{
      display:none;
    }

    /* Comments same as above */
    #navigation nav ul li a:hover::after{
      display:none;

    }




  /* hamburger navigation menu starts here */
      #navigation nav, #navigation nav ul li {
        float: none;
        text-align: center;
        width: 100%;
    }


     #navigation nav label{
       display: block;
       text-align: center;
       cursor: pointer;
       margin-left: 35px;
     }

     #navigation nav label:nth-child(even){
       color: yellow;
     }

     #toggle + .bmenu {
       display: none;
     }
     #toggle:checked + .bmenu {
       display: block;
     }

     label{
             display: block;
             cursor: pointer;
         }
  /* HAMBURGER MENU ENDS HERE */


/* INDEX PAGE */
    #header{
    height: auto;
    min-height: 100%;
    background: url(../images/churchill-hero-img-iphone-version.png);
    background-attachment: fixed;
  }

  #header p{
    padding: 30px;
  }

  #newsletter-section .form{
    margin-top: 15px;
  }

  #content-cards li{
    width: 35%;
  }

  #footer-section ul{
    width: 50%;
    /* margin: 0 auto;
    text-align: center; */
  }

  #footer-section h1{
    margin: 0 auto;
    text-align: center;
  }


  #content-cards .card-image-placement{
    height: auto;
    min-height: 100%;
    background: url(../images/main-building-section-desc-mobile-version.jpg);
    background-position: center;
    background-attachment: fixed;
  }

  #boyd-info-section{
    height: auto;
    min-height: 100%;
    background: url(../images/robin-boyd-section-img-mobile-version.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
  }
/* INDEX PAGE FINISHES HERE*/


/* FOOTER PAGE STARTS HERE */

#footer-section .footer-section-center .website-footer-links{
  margin: 0 auto;
}

#footer-section .footer-section-right{
  line-height: 1.5em;
  position: relative;
  bottom: 50px;
}




/* DESCRIPTION PAGE HERE*/
    #header-desc{
      width: 100%;
      height: auto;
      min-height: 100%;
      background-size: cover;
      background: url(../images/description-header-image.jpg);
      border-bottom: 2px solid #feda6a;
  }

    #header-desc p{
      padding: 30px;
    }

    #main-building-section .box1 img{
      margin-left: 45px;
    }

    #main-building-section .box2 p{
      color: #d4d4dc;
      font-size: 1.154em;
      text-align: center;
      padding-bottom: 14px;
      line-height: 2em;
      letter-spacing: 0.5px;
      margin-top: 90px;
      padding: 20px;
    }

    #main-building-section .box1 p{
      margin-top: 40px;
    }

    #stylistic-analysis-section .box1 img{
      margin-left: 45px;
    }

    #stylistic-analysis-section .box2 p{
      margin: 20px;
      margin-top: 90px;
    }

    #stylistic-analysis-section .box1 p{
      margin: 20px;
    }

    #main-building-section{
      background: url(../images/main-building-section-desc-mobile-version.jpg);
      background-size: cover;
      background-position: center;
      height: auto;

    }
    /* DESCRIPTION PAGE FINISHES HERE*/






    /* HISTORY PAGE HERE*/
    #header-history{
      width: 100%;
      height: auto;
      min-height: 100%;
      background-size: cover;
      background: url(../images/history-header-image.jpg);
      border-bottom: 2px solid #feda6a;
    }

    #header-history p{
      padding: 30px;
    }

    #history-image-section .box1 img{
      margin-left: 45px;
    }
    /* HISTORY PAGE FINISHES HERE*/




    /* STATEMENT OF SIGNIFICANCE PAGE HERE*/
    #header-statement-Of-Sig{
      width: 100%;
      height: auto;
      min-height: 100%;
      background-size: cover;
      background: url(../images/statement-Of-Sig.jpg);
      border-bottom: 2px solid #feda6a;
    }

    #header-statement-Of-Sig p{
      padding: 30px;
    }


    #statementOfSig-image-section .box1 img{
      margin-left: 45px;
    }
    /* STATEMENT OF SIGNIFICANCE PAGE FINISHES HERE*/




    /* ROBIN BOYD PAGE HERE*/
    #header-boyd{
      width: 100%;
      height: auto;
      min-height: 100%;
      background-size: cover;
      background: url(../images/boyd-header-img.jpg);
      border-bottom: 2px solid #feda6a;
    }

    #header-boyd p{
      padding: 30px;
    }

    #boyd-image-section .box1 img{
      margin-left: 45px;
    }

    #boyd-section-box-2 .box1 img{
      margin-left: 45px;
    }

}


/* ----------- Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen
  and (device-width: 600px)
  and (device-height: 960px)
  and (-webkit-min-device-pixel-ratio: 1.331)
  and (-webkit-max-device-pixel-ratio: 1.332) {

    /* INDEX PAGE HERE */
    #boyd-info-section .box1 img{
      margin-left: 115px;
    }
    /* INDEX PAGE FINISHES HERE */



    /* STATEMENT OF SIGIFICANCE PAGE HERE */
    #header-statement-Of-Sig .hero-image-content h1{
      padding: 15px;
    }

}