body {
  background-color: rgb(56, 175, 77); /* @green */
}

main h1 {
  margin-top: 0;
  margin-bottom: 3rem;
  color: inherit;
}

@media (min-width: 40em) {
  main h1 {
    margin-bottom: 9rem;
  }
}


main strong,
header ul a,
header ul a:hover,
header ul a:active,
header ul a:focus {
  color: white;
}

main a,
main a:hover,
main a:active,
main a:focus {
  color: inherit
}

main a strong {
  color: white;
}


main h1 {
  border-width: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
main a {
  margin-top: 0.375em;
  display: inline-block;
  text-decoration: none;
  color: inherit;
  padding: 0.25em 0.375em 0.125em;
  border: calc(2 / 38 * 38px) solid;

  font-weight: 300; /* @light */

}
main a strong {
  font-weight: 800;
  text-transform: uppercase;
}
main a {
  position: relative;
}
main a strong::before {
  content: " ";
  display: block;
  background-color: rgb(56, 175, 77); /* @green */
  width: calc(36 / 38 * 38px);
  height: calc(4 / 38 * 38px);
  position: absolute;
  left: 50%;
  margin-left: calc(-18 / 38 * 38px);
  top: calc(-3 / 38 * 38px);
}



main h1,
main p, {
  font-size: 1.25em;
  font-size: 1.5em;
  font-weight: 300; /* @light */
  line-height: inherit;
  margin-bottom: 1.5rem;
  text-align: center;
/*  border-bottom: 2px solid;
  display: table;
  margin-left: auto;
  margin-right: auto;*/
}
main p strong {
  font-weight: 600; /* @semibold */
}
@media (min-width: 20em) {
  main h1,
  main p {
    font-size: 1.4em;
  }
}
@media (min-width: 30em) {
  main h1,
  main p {
    font-size: 2.375em;
  }
}


/*main img {
  width: auto;
  height: 3.875rem;
}*/



main {
  text-align: center;
}



.idealists {

}

.pragmatists {

}

.look {

}

q {

}

.courage {

}

.perspective {

}

h1 {

}

main p:first-child {
  margin-bottom: 0;
}
main p + p {
  margin-top: 0;
  margin-bottom: 0;
}

main p span {
  padding-bottom: calc(0 / 38 * 38px);
  border-bottom: calc(2 / 38 * 38px) solid;
/*  padding-top: calc(0 / 38 * 38px);
  border-top: calc(2 / 38 * 38px) solid blue;*/
  display: table;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
main p .good {
  border-bottom-width: 0;
  padding-bottom: 0;
}
main a::before,
main p span::before,
main p span::after {
  margin-left: auto;
  margin-right: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

main .idealists::before {
  content: "";
  display: block;
  width: calc(117 / 38 * 38px);
  height: calc(180 / 38 * 38px);
  height: calc(200 / 38 * 38px);
  background-image: url(/assets/img/home-sun@x2.png);
}
/*
main .idealists::after {
  content: "";
  display: block;
  width: calc(2 / 38 * 38px);
  height: calc(62 / 38 * 38px);
  background-image: url(/assets/img/home-spacer@x2.png);
}

*/
main .pragmatists::before {
  content: "";
  display: block;
  width: calc(2 / 38 * 38px);
  height: calc(62 / 38 * 38px);
  background-image: url(/assets/img/home-spacer@x2.png);
  margin-top: 20px;
}
main .pragmatists::after {
  content: "";
  display: block;
  width: calc(86 / 38 * 38px);
  height: calc(50 / 38 * 38px);
  background-image: url(/assets/img/home-bars@x2.png);
  position: absolute;
  right: 0;
  top: 100%;
  top: calc(100% + 10px);
}
/*
main .pragmatists::after {
  content: "";
  display: block;
  width: calc(31 / 38 * 38px);
  height: calc(63 / 38 * 38px);
  background-image: url(/assets/img/home-arrow-down@x2.png);
}
*/

main .look {
  padding: 0.375em;
  background-image: none;
  border: solid;
  border-width: calc(2 / 38 * 38px);
  border-color: black;
  position: relative;
  /*max-width: 12em;*/
  margin-top: calc(103 / 38 * 38px);
}
main .look::before {
  content: "";
  display: block;
  width: calc(31 / 38 * 38px);
  height: calc(63 / 38 * 38px);
  background-image: url(/assets/img/home-arrow-down@x2.png);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, calc(-20 / 38 * 38px));
}
main .look strong:before {
  content: " ";
  display: block;
  background-color: rgb(56, 175, 77); /* @green */
  width: calc(36 / 38 * 38px);
  height: calc(4 / 38 * 38px);
  position: absolute;
  left: 50%;
  margin-left: calc(-18 / 38 * 38px);
  top: calc(-3 / 38 * 38px);
}
main .look strong:after {
  content: " ";
  display: block;
  background-color: rgb(56, 175, 77); /* @green */
  width: calc(36 / 38 * 38px);
  height: calc(4 / 38 * 38px);
  position: absolute;
  left: 50%;
  margin-left: calc(-18 / 38 * 38px);
  bottom: calc(-3 / 38 * 38px);
}

main .good::before {
  content: "";
  display: block;
  width: calc(2 / 38 * 38px);
  height: calc(62 / 38 * 38px);
  background-image: url(/assets/img/home-spacer@x2.png);
  margin-top: 20px;
  margin-bottom: 20px;
}
main .good {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 20px;
}

/*
main .good q::before {
  content: "“";
  transform: translateX(-100%);
}
main .good q::after {
  content: "”";
  transform: translateX(100%);
}
*/

@media (min-width: 40em) {
  main .good::before {
    transform: translate(0.325em, 0);
  }
  main .good {
    transform: translate(-0.325em, 0);
  }
}

main .good strong {
  display: inline-block;
  background-color: black;
  color: white;
  border-radius: 50%;
  width: 3.375em;
  line-height: 3.375em;
}

@media (max-width: 40em) {
  main .good strong {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

main p:first-child::after {
  content: "";
  display: block;
  width: calc(171 / 38 * 38px);
  height: calc(303 / 38 * 38px); /* (63px + 20px + 139px + 20px + 62px) = 303px */
  background-image: url(/assets/img/home-arrow-down@x2.png),
                    url(/assets/img/home-funnel@x2.png),
                    url(/assets/img/home-spacer@x2.png);
  background-size: calc(  31 / 38 * 38px) calc( 63 / 38 * 38px),
                   calc( 171 / 38 * 38px) calc(139 / 38 * 38px),
                   calc(   2 / 38 * 38px) calc( 62 / 38 * 38px);
  background-position: top, center, bottom;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
}

main .courage::before {
  content: "";
  display: block;
  width: calc(81 / 38 * 38px);
  height: calc(115 / 38 * 38px);
  background-image: url(/assets/img/home-bolt@x2.png);
}
main .perspective::before {
  margin-top: calc(-108px + 62px + 20px);
  margin-top: 20px;
  margin-bottom: 10px;
  content: "";
  display: block;
  height: calc(108 / 38 * 38px);
  background-image: url(/assets/img/home-spacer@x2.png),
                    url(/assets/img/home-telescope@x2.png);
  background-position: bottom, bottom right 1em;
  background-size: calc(  2 / 38 * 38px) calc( 62 / 38 * 38px),
                   calc( 90 / 38 * 38px) calc(108 / 38 * 38px);
}

/*main .perspective::after {
  content: "";
  display: block;
  width: calc(90 / 38 * 38px);
  height: calc(108 / 38 * 38px);
  background-image: url(/assets/img/home-telescope@x2.png);
  position: absolute;
  top: 0;
  right: 0;
}*/

main h1 {
  margin-top: calc(153 / 38 * 38px);
}
main h1 a::before {
  content: "";
  display: block;
  width: calc(31 / 38 * 38px);
  height: calc(123 / 38 * 38px);
  background-image: url(/assets/img/home-arrow-down-long@x2.png);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, calc(-20 / 38 * 38px));
}



.disabled main .idealists {
  margin-bottom: calc(62 / 38 * 38px); /* home-spacer@x2.png, height */
  margin-bottom: calc(102 / 38 * 38px); /* home-spacer@x2.png, height */
}
.disabled main .idealists::after {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, calc(20 / 38 * 38px));
}

.disabled main .pragmatists {
  margin-bottom: calc(63 / 38 * 38px); /* home-arrow-down@x2.png, height */
}
.disabled main .pragmatists::before {
  position: absolute;
  right: 0;
  top: 100%;
  transform: translate(0, calc(10 / 38 * 38px));
}
.disabled main .pragmatists::after {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, calc(10 / 38 * 38px));
}

/*
main .courage {
  max-width: 11.5em;
}

main .perspective {
  max-width: 12.5em;
}*/



@media (max-width: 30em) {
  main p span br {
    display: none;
  }
}
@media (min-width: 70em) {
  main .idealists {
    transform: translateX(calc(-50% - 10px));
  }
  main .idealists::before {
    transform: translateX(calc(50% + 10px));
    margin-right: 0;
  }
  main .pragmatists {
    transform: translateX(calc(50% - 10px));
  }
  main .pragmatists::before {
    transform: translateX(calc(-50% + 10px));
    margin-left: 0;
  }
  main .courage {
    margin-top: -2.25em;
    transform: translateX(calc(-50% - 10px));
    text-align: right;
  }
  main .courage::before {
    transform: translate(-37.5%, 37.5%);
    margin-left: 0;
  }
  main .perspective {
    transform: translateX(calc(50% - 10px));
    text-align: left;
  }
  main .perspective::before {
    margin-top: -0.5em;
    background-position: bottom left 10px, bottom right 1em;
  }
}



/*@media (min-width: 70em) {
  main .idealists {
    margin-left: 0;
    margin-right: calc(50vw - 16.81vmin);
    text-align: right;
  }
  main .idealists::before {
    margin-right: 0;
    transform: translateX(50%);
  }
  main .idealists::after {
    left: auto;
    right: 0;
  }
  main .pragmatists {
    margin-right: 0;
    margin-left: calc(50vw - 16.81vmin);
    text-align: left;
  }
  main .pragmatists::after {
    left: 0;
  }
}*/



/*

<img src="/assets/img/home-sun@x2.png" width="117" height="180" alt="" />

For the **idealists**.

<img src="/assets/img/home-spacer@x2.png" width="2" height="62" alt="" />

For the **pragmatists**.

<img src="/assets/img/home-bars@x2.png" width="86" height="50" alt="" />

<img src="/assets/img/home-arrow-down@x2.png" width="31" height="63" alt="" />

For those **who look at the world** and say,

<img src="/assets/img/home-spacer@x2.png" width="2" height="62" alt="" />

> “That’s not **good** enough.”

<img src="/assets/img/home-arrow-down@x2.png" width="31" height="63" alt="" />

<img src="/assets/img/home-funnel@x2.png" width="171" height="139" alt="" />

<img src="/assets/img/home-spacer@x2.png" width="2" height="62" alt="" />

<img src="/assets/img/home-bolt@x2.png" width="81" height="115" alt="" />

And for those who have the **courage** and **ability** to

<img src="/assets/img/home-spacer@x2.png" width="2" height="62" alt="" />

<img src="/assets/img/home-telescope@x2.png" width="90" height="108" alt="" />

translate that **perspective** into **real\-world innovations**:

<img src="/assets/img/home-arrow-down-long@x2.png" width="31" alt="" />

[the **Goldhirsh Foundation**](/vision/)

*/