html,
button,
input,
select,
textarea,
.pure-g [class*="pure-u"] {
  font-family: Lato, sans-serif;
}
div.markdown a {
  text-decoration: none;
}
div.markdown em {
  font-style: italic;
}
div.markdown strong {
  font-weight: 400;
}
body {
  background-color: #f3f3f4;
  color: #333;
}
#colophon {
  padding: 0.5rem 5%;
  background-color: black;
  font-weight: 300;
  color: #999;
  text-align: center;
}
#colophon > p {
  margin: 0;
}
#colophon-copyright {
  font-size: 0.5rem;
}
#colophon-license {
  font-size: 0.5rem;
}
#colophon-license > a {
  text-decoration: none;
  color: #ccc;
}
#colophon-license > a:hover {
  color: white;
}
#colophon-attribution {
  font-size: 0.5rem;
}
#colophon-attribution-cross {
  color: white;
}
#colophon-attribution-heart {
  color: red;
}
#colophon-attribution > a {
  font-weight: 400;
  text-decoration: none;
  color: #ccc;
}
#colophon-attribution > a:hover {
  color: white;
}
#hero {
  background-color: #222;
  color: white;
  background-image: radial-gradient(ellipse at center top 80%, #666, #000);
  font-weight: 300;
  text-align: center;
}
#hero > h1 {
  margin: 0;
  padding-top: 2rem;
  font-size: 1.5rem;
  font-weight: 300;
  color: #ccc;
}
#hero > h2 {
  position: relative;
  top: -0.5rem;
  margin: 0;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: -0.1rem;
}
#hero > h3 {
  margin: 0;
  padding-top: 1rem;
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: -0.1rem;
}
#hero > h4 {
  margin: 0;
  padding: 0.5rem 10% 0 10%;
  font-size: 1.25rem;
  font-weight: 300;
  color: #ccc;
}
#slideshow {
  position: relative;
  top: -1rem;
  margin: 0 auto;
  width: 80%;
}
div.slideshow-slide {
  display: none;
}
div.slideshow-slide > img {
  position: relative;
  top: 4rem;
  display: block;
  width: 100%;
  border-radius: 9px;
  box-shadow: -2px 2px 7px #222;
}
div.slideshow-effect {
  animation-name: slideshow-effect;
  animation-duration: 1s;
}
@keyframes slideshow-effect {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@media screen and (min-width: 64rem) {
  #hero > h4 {
    padding: 0.5rem 15% 0 15%;
  }
  #slideshow {
    width: 100%;
    max-width: 800px;
  }
}
#whatis {
  padding: 6rem 10% 0 10%;
}
#whatis > h1 {
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: -0.1rem;
  text-align: center;
}
#whatis > div > p {
  margin: 0 0 1rem 0;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.75rem;
}
#whatis > div:first-of-type > p {
  font-size: 1.25rem;
  line-height: 2rem;
}
#whatis > div a {
  text-decoration: none;
  color: #288;
}
#whatis > div a:hover {
  color: #4aa;
}
#whatis-links {
  margin-top: 2rem;
  text-align: center;
  line-height: 2rem;
}
#whatis-links > span {
  display: block;
}
#whatis-links > span > a {
  font-size: 1.15rem;
  font-weight: 300;
  text-decoration: none;
  color: #288;
}
#whatis-links > span > a:hover {
  color: #033;
}
#whatis-links > span:last-of-type {
  margin-top: 0.5rem;
}
#whatis-links > span:last-of-type > a {
  padding: 0.25rem 0.5rem;
  font-weight: 300;
  border: 1px solid #288;
  border-radius: 7px;
  color: #288;
}
#whatis-links > span:last-of-type > a:hover {
  background-color: #288;
  color: white;
}
@media screen and (min-width: 48rem) {
  #whatis-links > span {
    display: inline;
    white-space: nowrap;
    margin-right: 1rem;
  }
  #whatis-links > span:last-of-type {
    margin: 0;
  }
}
@media screen and (min-width: 64rem) {
  #whatis {
    padding: 6rem 20% 0 20%;
  }
}
#howitworks {
  padding: 5rem 10% 0 10%;
}
#howitworks > h1 {
  margin: 0 0 3rem 0;
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: -0.1rem;
  text-align: center;
}
div.howitworks-box {
  position: relative;
  box-sizing: border-box;
  margin-bottom: 2.5rem;
  padding: 2rem 5%;
  border: 1px solid #ddd;
  border-radius: 9px;
  box-shadow: -5px 5px 9px #999;
  background-color: white;
}
div.howitworks-box:last-child {
  margin-bottom: 0;
}
h1.howitworks-title {
  margin: 0 0 1rem 0;
  font-size: 1.75rem;
  font-weight: 400;
  text-align: center;
}
div.howitworks-text {
  font-weight: 300;
}
div.howitworks-text > p {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
}
div.howitworks-text > p:first-child {
  font-size: 1.25rem;
  line-height: 2rem;
}
div.howitworks-text a {
  font-weight: 400;
  color: #288;
}
div.howitworks-text a:hover {
  color: #033;
}
div.howitworks-icon {
  position: absolute;
  top: -1rem;
  left: -1rem;
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
  border-radius: 50%;
  box-shadow: -1px 1px 5px #999;
  background-color: #288;
  color: white;
  font-size: 1.75rem;
  font-weight: 300;
  text-align: center;
}
div.howitworks-icon > span {
  vertical-align: baseline;
}
@media screen and (min-width: 64rem) {
  div.howitworks-box {
    padding: 2rem 10%;
  }
}
#howtodonate {
  padding: 5rem 10%;
  margin-top: 6rem;
  background-color: #288;
  color: white;
}
#howtodonate > h1 {
  margin: 0 0 2rem 0;
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: -0.1rem;
  text-align: center;
}
div.howtodonate-item {
  box-sizing: border-box;
  padding-bottom: 1rem;
}
div.howtodonate-icon {
  font-size: 5rem;
  text-align: center;
  text-shadow: 0 0 5px #6c6;
  color: #9f9;
}
h1.howtodonate-title {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: 400;
  text-align: center;
}
div.howtodonate-text {
  padding: 0 0.25rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.75);
}
div.howtodonate-text > h1 {
  margin: 0.75rem 0 0.25rem;
  font-weight: 400;
  font-size: 1rem;
  color: white;
}
div.howtodonate-text > p {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
}
div.howtodonate-text > p:first-child {
  font-size: 1.15rem;
  line-height: 1.75rem;
}
div.howtodonate-text > blockquote {
  margin-left: 3rem;
}
div.howtodonate-text > blockquote:first-of-type {
  margin: 1.5rem 0;
  text-align: center;
}
div.howtodonate-text > blockquote > p {
  margin: 0;
}
div.howtodonate-text > blockquote > p > a {
  border: 1px solid #ff9;
  border-radius: 7px;
  padding: 0.3rem 0.45rem;
  font-size: 1.1rem;
  font-weight: 300;
  color: #ff9;
}
div.howtodonate-text > blockquote > p > a:hover {
  background-color: #ff9;
  color: #288;
}
div.howtodonate-text a {
  font-weight: 400;
  color: #ff9;
}
div.howtodonate-text a:hover {
  color: #cc6;
}
div.howtodonate-text strong {
  color: white;
}
#howtodonate-legal {
  margin-top: 3rem;
  padding: 2rem 10%;
  font-weight: 300;
  font-size: 1.15rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 9px;
}
#howtodonate-legal > p {
  margin: 0 0 0.5rem 0;
  line-height: 1.5rem;
}
#howtodonate-legal strong {
  font-weight: 400;
  color: white;
}
#donorbenefits {
  padding: 5rem 10%;
  background-color: #606;
  color: white;
}
#donorbenefits > h1 {
  margin: 0 0 2rem 0;
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: -0.1rem;
  text-align: center;
}
#donorbenefits-grid {
  margin-top: 2rem;
  padding: 5%;
  background-color: #707;
  border: 1px solid #505;
  border-radius: 11px;
}
div.donorbenefits-item {
  box-sizing: border-box;
  padding-bottom: 1rem;
}
div.donorbenefits-icon {
  font-size: 5rem;
  text-align: center;
  text-shadow: 0 0 5px #c9c;
  color: #fcf;
}
h1.donorbenefits-title {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: 400;
  text-align: center;
}
div.donorbenefits-text {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.75);
}
div.donorbenefits-text > p {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
}
div.donorbenefits-text > p:first-child {
  font-size: 1.15rem;
  line-height: 1.75rem;
}
div.donorbenefits-text a {
  font-weight: 400;
  color: #fcf;
}
div.donorbenefits-text a:hover {
  color: #c6c;
}
div.donorbenefits-text strong {
  color: white;
}
@media screen and (min-width: 48rem) {
  div.donorbenefits-item:nth-child(odd) {
    padding-right: 2.5%;
  }
  div.donorbenefits-item:nth-child(even) {
    padding-left: 2.5%;
  }
}
#aboutus {
  padding: 6rem 10% 0 10%;
}
#aboutus > h1 {
  margin: 0 0 2rem 0;
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: -0.1rem;
  text-align: center;
}
#aboutus-text {
  font-weight: 300;
}
#aboutus-text > p {
  margin: 0 0 0.5rem 0;
  font-size: 1.15rem;
  line-height: 1.75rem;
}
#aboutus-text > p:first-child {
  font-size: 1.25rem;
  line-height: 2rem;
}
#aboutus-text > p > a {
  font-weight: 400;
  text-decoration: none;
  color: #288;
}
#aboutus-text > p > a:hover {
  color: #4aa;
}
#board {
  margin-top: 3rem;
  padding: 0 10% 6rem 10%;
}
#board > h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.05rem;
  text-align: center;
}
#board > h2 {
  margin: 0 0 1rem 0;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.1rem;
  text-align: center;
}
#board-grid-secondary {
  padding: 2rem 10% 0 10%;
}
div.board-item {
  box-sizing: border-box;
  margin-top: 2rem;
  text-align: center;
}
div.board-list-item {
  margin-top: 0.5rem;
  text-align: center;
}
img.board-image {
  display: block;
  margin: 0 auto;
  width: 150px;
  height: 150px;
  box-shadow: -5px 5px 10px #666;
  border-radius: 9px;
}
div.board-item > i {
  width: 150px;
  height: 150px;
  font-size: 120px;
  color: #eee;
  text-shadow: 0 0 3px #999;
}
div.board-name {
  margin-top: 0.75rem;
  font-weight: 400;
  font-size: 1.15rem;
}
div.board-role {
  margin: 0 0 0.25rem 0;
  font-weight: 300;
  font-size: 1rem;
  font-style: italic;
}
@media screen and (min-width: 80rem) {
  img.board-image {
    width: 200px;
    height: 200px;
  }
  div.board-item > i {
    width: 200px;
    height: 200px;
    font-size: 160px;
  }
}
#contact {
  padding: 0 10% 6rem 10%;
  text-align: center;
}
#contact-list {
  position: relative;
  margin: 0;
  padding: 2rem 5%;
  border: 1px solid #ddd;
  border-radius: 9px;
  box-shadow: -5px 5px 9px #999;
  background-color: white;
}
#contact-icon {
  position: absolute;
  top: -1rem;
  left: -1rem;
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
  border-radius: 50%;
  box-shadow: -1px 1px 5px #999;
  background-color: #288;
  color: white;
  font-size: 1.75rem;
  font-weight: 300;
  text-align: center;
}
#contact-icon > span {
  vertical-align: baseline;
}
#contact-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 400;
}
dt.contact-type {
  margin-top: 2rem;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.05rem;
}
dd.contact-value {
  margin: 0.5rem 0 0 0;
  font-size: 1.15rem;
  font-weight: 300;
}
dd.contact-value > a {
  text-decoration: none;
  color: #288;
}
dd.contact-value > a:hover {
  color: #033;
}