/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
  font-family: "Lato", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


.copyright {
	text-align: center;
	color: rgb(138, 137, 145);
}

.header-image {
	margin: 0rem 0rem 2rem 0rem;
}

.header-wrapper {
	padding: 3rem 0rem;
}

.pageheaderlogo {
	text-align: center;
}


/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  padding: 2rem 0 7rem;
  text-align: center;
}


/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero {
  background: url('../images/hero-background.jpg') no-repeat center center;
  background-size: cover;
  color: #fff;
  padding-bottom: 5rem;
}

.hero h1, h2 {
	text-align: center;
}

.hero h1 {
	font-weight: bolder;
}

.hero h2 {
	font-weight: normal;
}


/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.values {
  padding-bottom: 5rem;
  background-color: #439fe0;
  color: #fff;
}
.value-multiplier {
  margin-bottom: .5rem;
  font-weight: bold;
}

.value-description {
  font-weight: normal;
  text-align: left;
}

/* Quote
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.quote {
  padding-bottom: 5rem;
  color: rgb(122, 120, 128);
  font-size: 2rem;
}

.quote .quotation {
	font-size: 3rem;
}

.quote .speaker {
	font-weight: bold;
	color: rgb(85, 84, 89);
}

.quote .position {
}

.quote .organisation {
	font-weight: bold;
	color: rgb(44, 176, 74);
}

/* How
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.how {
  padding-bottom: 5rem;
  background-color: #2cb04a;
  color: #fff;
}


/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.get-help {
  border-bottom: 1px solid #ddd;
}

/* Help Screen
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.help {
  border-bottom: 1px solid #ddd;

}

.help .faq {
	text-align: left;
	color: rgb(81, 81, 81);
}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer {
  padding-bottom: 5rem;
  background-color: rgb(36, 36, 36);
  color: #fff;
}

/* Bigger than 550 */
@media (min-width: 550px) {
  .section {
    padding: 3rem 0 3rem;
  }
  .hero {
    /* padding-bottom: 12rem; */
    text-align: left;
    /* height: 165px; */
  }

  .hero-heading {
    font-size: 2.4rem;
  }
  
  .pageheaderlogo {
	text-align: left;
}

} 

/* Bigger than 750 */
@media (min-width: 750px) {
  .hero {
    /* height: 190px; */
  }
  .hero-heading {
    font-size: 2.6rem;
  }
  .section {
    padding: 3rem 0 3rem;
  }
  .hero {
    /* padding: 16rem 0 14rem; */
  }

}

/* Bigger than 1000 */
@media (min-width: 1000px) {
  .section {
    padding: 3rem 0 3rem;
  }
  .hero {
    /* padding: 22rem 0; */
  }
  .hero-heading {
    font-size: 3.0rem;
  }


}