main{
  width: 100%;
  overflow: hidden;
}

img{
  width: 100%;
}
p b{
  color: #938057;
  font-weight: normal;
}
p{
  font-size: 3vh;
  line-height: 5vh;
  text-align: justify;
  letter-spacing: 1px;
}
.paragraph{
  width: 90%;
  margin: 0 auto;
}


button{
  border-radius: 10rem;
  font-size: 3vh;
  border: 1px solid #938057;
  padding: 1vh 3vh;
}
button.small{
  padding: 0.25em 1em;
  font-size: 3vh;
}
button img{
  height: 2vh;
  top: -0.25vh;
}
button.float-left img{
  margin-right: 1vh;
}
button.float-right img{
  margin-left: 1vh;
}


.sectionHead{
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.sectionHead .overlay{
  background: rgba(0,0,0,0.3);
  width: 100%;
  height: 100%;
  position: relative;
}
.sectionHead .description{
  position: absolute;
  width: 50%;
  top: 50%;
  text-align: center;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sectionHead p{
  font-size: 4.5vh;
  line-height: 6vh;
  text-align: center;
  font-family: Optima;
}
.scrollDown{
  text-align: center;
  position: absolute;
  bottom: 10vh;
  width: 100%;
}
.scrollDown .scrollDownIcon{
  margin-top: 1vh;
  width: auto;
  height: 4vh;
  position: relative;
}
.scrollDown h4{
  font-family: Baskerville;
  font-weight: normal;
  font-size: 2vh;
}



.bodyContainer{
  width: 100%;
  margin: 0 auto;
  padding: 20px 0 40px;
  line-height: 2rem;
}
.blackParagraph{
  width: 80%;
  margin: 0 auto;
  padding: 50px 0 50px;
}
.blackParagraph p.quote{
  font-size: 2.2rem;
  font-family: Baskerville Italic;
  color: #938057;
  width: 60%;
  margin: 0 auto;
  text-align: center;
  line-height: 3rem;
}

.buttonContainer{
  margin-top: 20px;
  padding: 0 2rem;
  overflow: hidden;
}




.section1{
}
.section1 .paragraph{
  padding: 1rem 10% 1rem 2rem;
  margin: 0 auto;
  position: relative;
}
.section1 .paragraph p{
  font-family: Baskerville Italic;
  font-size: 3.5vh;
  line-height: 6vh;
  text-align: left;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 70%;
  letter-spacing: 2px;
}
.section1 .image{
  padding: 1rem 0;
}

.section2{
  margin-bottom: 2rem;
}
.section2 p{
  text-align: center;
}
.section2 .image{
  width: 90%;
  margin: 0 auto;
}

.section3{
  padding-left: 5%;
}
.section3 .row{
  padding-left: 5%;
}
.section3 .paragraph{
  position: relative;
}
.section3 .pContainer{
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 90%;
}
.section3 .image{
  padding: 1rem 0;
}

.section4{
  position: relative;
  width: 90%;
  margin: 0 auto;
}
.section4 .quote{
  position: absolute;
  max-width: 90%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.section4 .paragraph{
  padding: 0 2% 0 5%;
  position: absolute;
  bottom: 10px;
  width: 40%;
}
.section4 h2{
  font-family: Baskerville;
  font-style: italic;
  font-size: 5vh;
  line-height: 5vh;
  letter-spacing: 1px;
}
.section4 .paragraph p{
  text-align: justify;
}


.section6{
  width: 90%;
  margin: 50px auto 0;
  overflow: unset;
}
.section6 .description{
  width: 40%;
  float: left;
  padding: 5vh 2.5% 0 5%;
}
.section6 .description p{
}
.section6 .description p.header{
  font-size: 1.8rem;
  font-family: Baskerville Italic;
  text-align: center;
  line-height: 2.5rem;
}
.section6 .leftImage{
  width: 60%;
  padding: 0 2.5%;
  float: left;
  position: relative;
  top: -12.5vh;
}
.section6 .buttonContainer{
  margin-top: 80px;
  padding: 0;
}


/* MOBILE BREAKDOWN*/
@media (min-width: 0px) and (max-width: 767px) and (orientation: portrait), (orientation: portrait){

  .bodyContainer{
    width: 100%;
    padding-top: 20px;
  }

  .sectionHead .description {
    width: 90%;
  }

  .section2 p{
    text-align: justify;
  }
  .section2 .image{
    width: 100%;
  }

  .section3{
    padding-left: 0;
  }

  .section4{
    width: 100%;
  }

  .section6{
    margin: 0 auto;
    width: 100%;
  }
  .section6 .leftImage{
    width: 100%;
    padding: 0;
    float: none;
    top: 0;
  }
  .section6 .description{
    width: 100%;
    float: none;
    padding: 0;
  }

  /* FONTSIZE */
  p{
    font-size: 1.25rem;
    line-height: 2rem;
  }
  .sectionHead p{
    font-size: 2rem;
    line-height: 2.5rem;
  }


  button{
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
  }
  button.small{
    padding: 0.1rem 1.25rem;
    font-size: 1rem;
  }
  button img{
    height: 0.5rem;
    top: -0.15rem;
  }
  button.float-left img{
    margin-right: 10px;
  }
  button.float-right img{
    margin-left: 10px;
  }
}

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {

}

/* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {

}

/* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {

}

/* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}

/*  ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px*/
@media (min-width: 481px) and (max-width: 767px) {

}

/*  ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px */
@media (min-width: 320px) and (max-width: 480px) {

}