/* BACKGROUND IMAGES */

html {
  color:#eee;
  font-size: 20px;
  font-family: "Open Sans", Helvetica, sans-serif; 
}

/* fix the body to be full screen */
body {
  height:100%; /* top and bottom fixed to 0 would accomplish the samething, BUT since height percentage is dependent on the parent elements height, I'm using height:100% here to cascade down in order to allow the section and section:before to be designated as height:100%. */
  margin:0;
  position:absolute; /* body just be absolute to expand height and width */
  width:100%;
}

.fbg {
	background-attachment: fixed;
	background-position: 50% top;
	background-size: cover;
  &:before {
    content:'';
    display: inline-block;
/*    height:100%;  */
    width:0px;
    vertical-align: middle;
    opacity: 0.5;
  } 
}

.section {  
  background: cover;
/*  height:100%;*/
  position:relative;  
  text-align:center;
  width:100%;

}


/* Use "background-color" and not just "background" else your other backgound attribute such as "size", "position", and "attachment" will be reset to default.*/
#one {background-color:#8f415b;	background-image:url('balance-110850_960_720.jpg');  color: #fff;}
#two {background-color:#8f415b;}
#three {background-color:#8f415b; background-image:url('zen-5533531_1280.jpg');  color: #333;}
#four {background-color:#8f415b;}
#five {background-color:#8f415b; background-image:url('drop-of-water-4531474_1280.jpg');  color: #333;}
#six {background-color:#8f415b;}
#seven {background-color:#8f415b; background-image:url('groyne-7917596_1280.jpg');  color: #333;}

/* Images are free for use under the Pixabay content license.  Thanks to the respective authors.
https://pixabay.com/photos/groyne-baltic-sea-stones-outdoors-7917596/

Maybe:
https://pixabay.com/photos/water-drop-toilet-nature-gout-4531474/

*/

.section h1 {
  font-size: 50px;
  text-align:center;
  opacity: 1;
}

.section p {
  font-size: 20px;
  width: 60%;
  text-align:center;
  margin: auto;
  opacity: 1;
}

.privacy {  
  background: cover;
  position:relative;  
  text-align:left;
  width:100%;
}

.privacy h1 {
  text-align:center;
  font-size: 40px;
}

.privacy h2 {
  text-align:left;
  font-size: 30px;
  margin: 10px 10px 0;
}

.privacy p {
  text-align:left;
  font-size: 20px;
  margin: 20px 20px 0;
}

.privacy a {
  color: #eee;
}

/* END OF BACKGROUND IMAGES */

/* TESTIMONIALS */

#quotes {
  height:400px;
  background-color: #8f415b;
}

#quotescol {

  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #8f415b;
  color: #1a1a1a;
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 15px;
}

#content {
  width: 50%;
  max-width: 400px;		/* Width of quote box */
/*  margin: 25vh auto;	/* Push to centre of page */
  flex: 1;
}

.testimonial blockquote {
  margin: 10px 10px 0;	/* 10px is whitespace around quote; 0px keeps arrow touching. */
  background: #efefef;
  padding: 20px 60px;	/* Space for quotes */
  position: relative;
  border: none;
  border-radius: 8px;
  font-style: italic;
}

.testimonial blockquote:before,
.testimonial blockquote:after {
  content: "\201C";
  position: absolute;
  font-size: 80px;
  line-height: 1;
  color: #757f9a;
  font-style: normal;
}

.testimonial blockquote:before {
  top: 0;
  left: 10px;
}

.testimonial blockquote:after {
  content: "\201D";
  right: 10px;			/* Push close quote to edge */
  bottom: -0.5em;		/* Push close quote lower */
}

.testimonial .callout {		/* Callout arrow */
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #efefef;
  margin: 0 0 0 60px;	/* 60px is position in from left */
}

.testimonial p {
  margin: 8px 0 0 20px;
  text-align: left;
  color: #fff;
}

/* END OF TESTIMONIALS */

/* HEADER */

#header {
  height:100px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #8f415b;
  color: #1a1a1a;
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 15px;
}

#headertitle {
  width: 50%;
  
  color: #fafafa;
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 50px
}

#headercontent {
  color: #fafafa;
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 30px
}

/* END OF HEADER */

/* FOOTER */

#footer {
  height:50px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #a45a73;
  color: #1a1a1a;
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 15px;
  font-variant: small-caps;
  
  float: left;
}

#footercontent{
  width: 50%;
}


/* END OF FOOTER */


/* BUTTON */
.button {
  background-color: #6b2939;
  border: none;
  color: #fcfcf4;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 12px;
  cursor: pointer;
  border-radius: 50px;
  float: right;
}

.button:hover {
  background-color: #944a63;
}