:root {
    --light: #f7f0eb;
    --accent: #d1ab86;
    --dark: #38332c;
  }

body {
    margin: 0;
    padding: 0;
    background-image: none;
    background-color: var(--light);
}


/* Hero section */
.heroSection {
  height: 35%;
  background-image: url(../images/fluteColour.jpg);
  background-size: cover;
  background-position: center center;
  border-bottom: 3px var(--dark) solid;

  display: flex;
  align-items: flex-end;
}

.heroText {
  margin: 0 0 1% 3%;
  font-size: 3.2rem;
  font-weight: 100;
  color: var(--light)
}


/* About page content */
.titleAcrossLine {
  width: 100%;
  margin: 0;
  padding: 0;
}

.aboutTitle {
  font-weight: 200;
  font-size: 2.5rem;
  margin: 0 0 5% 20%;
}


/* Fancy title line */
.aboutTitle {
  line-height: 0;
}

.aboutTitle span {
  display: inline-block;
  position: relative;  
}

.aboutTitle span:before,
.aboutTitle span:after {
  content: "";
  position: absolute;
  border-bottom: 1px solid var(--dark);
  top: 0;
}

.aboutTitle span:before {
  right: 100%;
  margin-right: 8%;
  width: 50%;
}

.aboutTitle span:after {
  left: 100%;
  margin-left: 8%;
  width: 150%;
}


/* Rest of about section */
.aboutSection {
  padding: 5% 5% 3% 5%;
  max-width: 100%;
}

.aboutContent {
  display: flex;
  align-items: flex-start;
}

.aboutPhoto {
  margin: .5% 20% 0 5%;
  max-width: 25%;
  border: 1px solid var(--dark);
}

.aboutText {
  font-size: .9rem;
  margin-left: 20%;
}

.aboutSubheads {
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 3% 0;
  padding: 0;
}

.aboutBodyText {
  margin: 0;
  font-size: 16px;
}


/* Media querries */
@media screen and (max-width: 1300px) {  
  .aboutTitle span:before {
      right: 100%;
      margin-right: 8%;
      width: 40%;
  }
  
  .aboutTitle span:after {
      left: 100%;
      margin-left: 8%;
      width: 100%;
  }
}


@media screen and (max-width: 1050px) {  
  .aboutTitle span:before {
      right: 100%;
      margin-right: 8%;
      width: 40%;
  }
  
  .aboutTitle span:after {
      left: 100%;
      margin-left: 8%;
      width: 80%;
  }

  .aboutSectionTwo {
    width: 205%;
  }
}


@media screen and (max-width: 930px) {  
  .aboutTitle span:before {
      display: none;
  }
  
  .aboutTitle span:after {
      display: none;
  }

  .aboutSection {
    padding: 5% 0 5% 0;
  }

  .aboutPhoto {
    max-width: 30%;
  }

}


@media screen and (max-width: 820px) {  
  .aboutContent {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .aboutSection {
    padding: 5% 0 5% 0;
  }

  .aboutPhoto {
    margin: 0 0 5% 20%;
    max-width: 45%;
  }

  .aboutSubheads {
    margin: 0 0 1% 0;
  }
  
  .aboutSectionTwo {
    width: 100%;
  }

  .aboutText {
    font-size: .9rem;
    margin: 0 15% 0 20%;
  }
}


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

  .aboutTitle {
    margin-top: 5%;
    margin-bottom: 6%;
  }
}

@media screen and (max-width: 500px) {  
  .heroText {
    font-size: 2.8rem;
  }

  .aboutTitle {
    font-size: 2rem;
  }
}