html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

@font-face {
  font-family: 'SuisseIntlMono';
  font-weight: 200;
  src: url("../fonts/SuisseIntlMono-Thin-Web/S/SuisseIntlMono-Thin-WebS.woff") format("woff"), url("../fonts/SuisseIntlMono-Thin-Web/S/SuisseIntlMono-Thin-WebS.woff2") format("woff2"), url("../fonts/SuisseIntlMono-Thin-Web/S/SuisseIntlMono-Thin-WebS.ttf") format("truetype"), url("../fonts/SuisseIntlMono-Thin-Web/S/SuisseIntlMono-Thin-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntlMono-Thin-Web/S/SuisseIntlMono-Thin-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntlMono';
  font-weight: 400;
  src: url("../fonts/SuisseIntlMono-Regular-Web/S/SuisseIntlMono-Regular-WebS.woff") format("woff"), url("../fonts/SuisseIntlMono-Regular-Web/S/SuisseIntlMono-Regular-WebS.woff2") format("woff2"), url("../fonts/SuisseIntlMono-Regular-Web/S/SuisseIntlMono-Regular-WebS.ttf") format("truetype"), url("../fonts/SuisseIntlMono-Regular-Web/S/SuisseIntlMono-Regular-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntlMono-Regular-Web/S/SuisseIntlMono-Regular-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntlMono';
  font-weight: 700;
  src: url("../fonts/SuisseIntlMono-Bold-Web/S/SuisseIntlMono-Bold-WebS.woff") format("woff"), url("../fonts/SuisseIntlMono-Bold-Web/S/SuisseIntlMono-Bold-WebS.woff2") format("woff2"), url("../fonts/SuisseIntlMono-Bold-Web/S/SuisseIntlMono-Bold-WebS.ttf") format("truetype"), url("../fonts/SuisseIntlMono-Bold-Web/S/SuisseIntlMono-Bold-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntlMono-Bold-Web/S/SuisseIntlMono-Bold-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 100;
  src: url("../fonts/SuisseIntl-UltraLight-Web/S/SuisseIntl-UltraLight-WebS.woff") format("woff"), url("../fonts/SuisseIntl-UltraLight-Web/S/SuisseIntl-UltraLight-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-UltraLight-Web/S/SuisseIntl-UltraLight-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-UltraLight-Web/S/SuisseIntl-UltraLight-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-UltraLight-Web/S/SuisseIntl-UltraLight-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 100;
  font-style: italic;
  src: url("../fonts/SuisseIntl-UltraLightItalic-Web/S/SuisseIntl-UltraLightItalic-WebS.woff") format("woff"), url("../fonts/SuisseIntl-UltraLightItalic-Web/S/SuisseIntl-UltraLightItalic-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-UltraLightItalic-Web/S/SuisseIntl-UltraLightItalic-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-UltraLightItalic-Web/S/SuisseIntl-UltraLightItalic-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-UltraLightItalic-Web/S/SuisseIntl-UltraLightItalic-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 200;
  src: url("../fonts/SuisseIntl-Thin-Web/S/SuisseIntl-Thin-WebS.woff") format("woff"), url("../fonts/SuisseIntl-Thin-Web/S/SuisseIntl-Thin-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-Thin-Web/S/SuisseIntl-Thin-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-Thin-Web/S/SuisseIntl-Thin-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-Thin-Web/S/SuisseIntl-Thin-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 200;
  font-style: italic;
  src: url("../fonts/SuisseIntl-ThinItalic-Web/S/SuisseIntl-ThinItalic-WebS.woff") format("woff"), url("../fonts/SuisseIntl-ThinItalic-Web/S/SuisseIntl-ThinItalic-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-ThinItalic-Web/S/SuisseIntl-ThinItalic-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-ThinItalic-Web/S/SuisseIntl-ThinItalic-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-ThinItalic-Web/S/SuisseIntl-ThinItalic-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 300;
  src: url("../fonts/SuisseIntl-Light-Web/S/SuisseIntl-Light-WebS.woff") format("woff"), url("../fonts/SuisseIntl-Light-Web/S/SuisseIntl-Light-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-Light-Web/S/SuisseIntl-Light-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-Light-Web/S/SuisseIntl-Light-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-Light-Web/S/SuisseIntl-Light-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 300;
  font-style: italic;
  src: url("../fonts/SuisseIntl-LightItalic-Web/S/SuisseIntl-LightItalic-WebS.woff") format("woff"), url("../fonts/SuisseIntl-LightItalic-Web/S/SuisseIntl-LightItalic-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-LightItalic-Web/S/SuisseIntl-LightItalic-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-LightItalic-Web/S/SuisseIntl-LightItalic-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-LightItalic-Web/S/SuisseIntl-LightItalic-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 400;
  src: url("../fonts/SuisseIntl-Regular-Web/S/SuisseIntl-Regular-WebS.woff") format("woff"), url("../fonts/SuisseIntl-Regular-Web/S/SuisseIntl-Regular-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-Regular-Web/S/SuisseIntl-Regular-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-Regular-Web/S/SuisseIntl-Regular-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-Regular-Web/S/SuisseIntl-Regular-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/SuisseIntl-RegularItalic-Web/S/SuisseIntl-RegularItalic-WebS.woff") format("woff"), url("../fonts/SuisseIntl-RegularItalic-Web/S/SuisseIntl-RegularItalic-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-RegularItalic-Web/S/SuisseIntl-RegularItalic-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-RegularItalic-Web/S/SuisseIntl-RegularItalic-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-RegularItalic-Web/S/SuisseIntl-RegularItalic-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 500;
  src: url("../fonts/SuisseIntl-Book-Web/S/SuisseIntl-Book-WebS.woff") format("woff"), url("../fonts/SuisseIntl-Book-Web/S/SuisseIntl-Book-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-Book-Web/S/SuisseIntl-Book-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-Book-Web/S/SuisseIntl-Book-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-Book-Web/S/SuisseIntl-Book-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 500;
  font-style: italic;
  src: url("../fonts/SuisseIntl-BookItalic-Web/S/SuisseIntl-BookItalic-WebS.woff") format("woff"), url("../fonts/SuisseIntl-BookItalic-Web/S/SuisseIntl-BookItalic-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-BookItalic-Web/S/SuisseIntl-BookItalic-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-BookItalic-Web/S/SuisseIntl-BookItalic-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-BookItalic-Web/S/SuisseIntl-BookItalic-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 600;
  src: url("../fonts/SuisseIntl-Medium-Web/S/SuisseIntl-Medium-WebS.woff") format("woff"), url("../fonts/SuisseIntl-Medium-Web/S/SuisseIntl-Medium-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-Medium-Web/S/SuisseIntl-Medium-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-Medium-Web/S/SuisseIntl-Medium-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-Medium-Web/S/SuisseIntl-Medium-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 600;
  font-style: italic;
  src: url("../fonts/SuisseIntl-MediumItalic-Web/S/SuisseIntl-MediumItalic-WebS.woff") format("woff"), url("../fonts/SuisseIntl-MediumItalic-Web/S/SuisseIntl-MediumItalic-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-MediumItalic-Web/S/SuisseIntl-MediumItalic-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-MediumItalic-Web/S/SuisseIntl-MediumItalic-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-MediumItalic-Web/S/SuisseIntl-MediumItalic-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 700;
  src: url("../fonts/SuisseIntl-Bold-Web/S/SuisseIntl-Bold-WebS.woff") format("woff"), url("../fonts/SuisseIntl-Bold-Web/S/SuisseIntl-Bold-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-Bold-Web/S/SuisseIntl-Bold-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-Bold-Web/S/SuisseIntl-Bold-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-Bold-Web/S/SuisseIntl-Bold-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 700;
  font-style: italic;
  src: url("../fonts/SuisseIntl-BoldItalic-Web/S/SuisseIntl-BoldItalic-WebS.woff") format("woff"), url("../fonts/SuisseIntl-BoldItalic-Web/S/SuisseIntl-BoldItalic-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-BoldItalic-Web/S/SuisseIntl-BoldItalic-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-BoldItalic-Web/S/SuisseIntl-BoldItalic-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-BoldItalic-Web/S/SuisseIntl-BoldItalic-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 900;
  src: url("../fonts/SuisseIntl-Black-Web/S/SuisseIntl-Black-WebS.woff") format("woff"), url("../fonts/SuisseIntl-Black-Web/S/SuisseIntl-Black-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-Black-Web/S/SuisseIntl-Black-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-Black-Web/S/SuisseIntl-Black-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-Black-Web/S/SuisseIntl-Black-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseIntl';
  font-weight: 900;
  font-style: italic;
  src: url("../fonts/SuisseIntl-BlackItalic-Web/S/SuisseIntl-BlackItalic-WebS.woff") format("woff"), url("../fonts/SuisseIntl-BlackItalic-Web/S/SuisseIntl-BlackItalic-WebS.woff2") format("woff2"), url("../fonts/SuisseIntl-BlackItalic-Web/S/SuisseIntl-BlackItalic-WebS.ttf") format("truetype"), url("../fonts/SuisseIntl-BlackItalic-Web/S/SuisseIntl-BlackItalic-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseIntl-BlackItalic-Web/S/SuisseIntl-BlackItalic-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseWorks';
  font-weight: 400;
  src: url("../fonts/SuisseWorks-Regular-Web/S/SuisseWorks-Regular-WebS.woff") format("woff"), url("../fonts/SuisseWorks-Regular-Web/S/SuisseWorks-Regular-WebS.woff2") format("woff2"), url("../fonts/SuisseWorks-Regular-Web/S/SuisseWorks-Regular-WebS.ttf") format("truetype"), url("../fonts/SuisseWorks-Regular-Web/S/SuisseWorks-Regular-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseWorks-Regular-Web/S/SuisseWorks-Regular-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseWorks';
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/SuisseWorks-RegularItalic-Web/S/SuisseWorks-RegularItalic-WebS.woff") format("woff"), url("../fonts/SuisseWorks-RegularItalic-Web/S/SuisseWorks-RegularItalic-WebS.woff2") format("woff2"), url("../fonts/SuisseWorks-RegularItalic-Web/S/SuisseWorks-RegularItalic-WebS.ttf") format("truetype"), url("../fonts/SuisseWorks-RegularItalic-Web/S/SuisseWorks-RegularItalic-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseWorks-RegularItalic-Web/S/SuisseWorks-RegularItalic-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseWorks';
  font-weight: 600;
  src: url("../fonts/SuisseWorks-Medium-Web/S/SuisseWorks-Medium-WebS.woff") format("woff"), url("../fonts/SuisseWorks-Medium-Web/S/SuisseWorks-Medium-WebS.woff2") format("woff2"), url("../fonts/SuisseWorks-Medium-Web/S/SuisseWorks-Medium-WebS.ttf") format("truetype"), url("../fonts/SuisseWorks-Medium-Web/S/SuisseWorks-Medium-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseWorks-Medium-Web/S/SuisseWorks-Medium-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseWorks';
  font-weight: 600;
  font-weight: italic;
  src: url("../fonts/SuisseWorks-MediumItalic-Web/S/SuisseWorks-MediumItalic-WebS.woff") format("woff"), url("../fonts/SuisseWorks-MediumItalic-Web/S/SuisseWorks-MediumItalic-WebS.woff2") format("woff2"), url("../fonts/SuisseWorks-MediumItalic-Web/S/SuisseWorks-MediumItalic-WebS.ttf") format("truetype"), url("../fonts/SuisseWorks-MediumItalic-Web/S/SuisseWorks-MediumItalic-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseWorks-MediumItalic-Web/S/SuisseWorks-MediumItalic-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseWorks';
  font-weight: 700;
  src: url("../fonts/SuisseWorks-Bold-Web/S/SuisseWorks-Bold-WebS.woff") format("woff"), url("../fonts/SuisseWorks-Bold-Web/S/SuisseWorks-Bold-WebS.woff2") format("woff2"), url("../fonts/SuisseWorks-Bold-Web/S/SuisseWorks-Bold-WebS.ttf") format("truetype"), url("../fonts/SuisseWorks-Bold-Web/S/SuisseWorks-Bold-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseWorks-Bold-Web/S/SuisseWorks-Bold-WebS.svg") format("svg"); }

@font-face {
  font-family: 'SuisseWorks';
  font-weight: 700;
  font-style: italic;
  src: url("../fonts/SuisseWorks-BoldItalic-Web/S/SuisseWorks-BoldItalic-WebS.woff") format("woff"), url("../fonts/SuisseWorks-BoldItalic-Web/S/SuisseWorks-BoldItalic-WebS.woff2") format("woff2"), url("../fonts/SuisseWorks-BoldItalic-Web/S/SuisseWorks-BoldItalic-WebS.ttf") format("truetype"), url("../fonts/SuisseWorks-BoldItalic-Web/S/SuisseWorks-BoldItalic-WebS.eot") format("embedded-opentype"), url("../fonts/SuisseWorks-BoldItalic-Web/S/SuisseWorks-BoldItalic-WebS.svg") format("svg"); }

html {
  font-family: "SuisseIntl", "Helvetica Neue", Helvetica, FreeSans, Arial, sans-serif;
  font-size: 112.5%;
  line-height: 1.4; }

a {
  color: inherit;
  text-decoration: none; }

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0; }

/*doc
---
title: Font Names
name: suisse-01-font-names
category: Fonts
---
```html_example
<style>
	.text-font { font-family: 'SuisseIntl', Helvetica, sans-serif; }
</style>

<p class="text-font" style="font-size:200%;">This paragraph is in <strong>Suisse Intl</strong></p>
```
```html_example
<style>
	.display-font { font-family: 'SuisseWorks', Georgia, serif; }
</style>

<p class="display-font" style="font-size:200%;">This paragraph is in <strong>Suisse Works</strong></p>
```
```html_example
<style>
	.mono-font { font-family: 'SuisseIntlMono', monospace; }
</style>

<p class="mono-font" style="font-size:200%;">This paragraph is in <strong>Suisse Intl Mono</strong></p>
```
*/
/*doc
---
title: Built-In Classes
name: suisse-02-built-in-classes
category: Fonts
---
```html_example
<p class="f-suisse-intl" style="font-size:200%;">This paragraph is in <strong>Suisse Intl</strong></p>
```
```html_example
<p class="f-suisse-works" style="font-size:200%;">This paragraph is in <strong>Suisse Works</strong></p>
```
```html_example
<p class="f-suisse-intl-mono" style="font-size:200%;">This paragraph is in <strong>Suisse Intl Mono</strong></p>
```
*/
.f-suisse-intl {
  font-family: "SuisseIntl", "Helvetica Neue", Helvetica, FreeSans, Arial, sans-serif; }

.f-suisse-intl-mono {
  font-family: "SuisseIntlMono", Menlo, "DejaVu Sans Mono", "Courier New", Courier, monospace; }

.f-suisse-works {
  font-family: "SuisseWorks", Georgia, "Times New Roman", Times, serif; }

/*doc
---
title: Better World Logo
name: logo
category: Logos
---
```html_example
<a class="mitbw-logo" href="https://betterworld.mit.edu/">MIT</a>
```
*/
.mitbw-logo, .mitbw-logo--inverse, .mitbw-header__logo {
  display: inline-block;
  width: 144px;
  height: 44px;
  outline: none;
  background-image: url("../img/mitbw-logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-indent: -9999em; }

.mitbw-logo--inverse {
  background-image: url("../img/mitbw-logo--white.png"); }

/*doc
---
title: Button (Pill)
name: button-01-pill
category: Buttons
---
```html_example
<a class="mitbw-button--pill">Hello, World!</a>
```
```html_example
<a class="mitbw-button--pill--red-white">Hello, World!</a>
```
```html_example
<a class="mitbw-button--pill--white-black">Hello, World!</a>
```
*/
.mitbw-button--pill {
  font-size: 15px;
  font-size: 0.8333333333rem;
  display: inline-block;
  padding: 0 1em;
  background-color: #fff;
  color: #191d1f;
  line-height: 2em;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid #191d1f;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
  font-family: "SuisseIntlMono", Menlo, "DejaVu Sans Mono", "Courier New", Courier, monospace;
  border-radius: 999em; }
  .mitbw-button--pill:hover {
    background-color: #191d1f;
    color: #fff;
    border-color: #191d1f; }

.mitbw-button--pill--red-white {
  font-size: 15px;
  font-size: 0.8333333333rem;
  display: inline-block;
  padding: 0 1em;
  background-color: #fff;
  color: #cd202c;
  line-height: 2em;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid #cd202c;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
  font-family: "SuisseIntlMono", Menlo, "DejaVu Sans Mono", "Courier New", Courier, monospace;
  border-radius: 999em; }
  .mitbw-button--pill--red-white:hover {
    background-color: #cd202c;
    color: #fff;
    border-color: #cd202c; }

.mitbw-button--pill--white-black {
  font-size: 15px;
  font-size: 0.8333333333rem;
  display: inline-block;
  padding: 0 1em;
  background-color: #191d1f;
  color: #fff;
  line-height: 2em;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid #191d1f;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
  font-family: "SuisseIntlMono", Menlo, "DejaVu Sans Mono", "Courier New", Courier, monospace;
  border-radius: 999em; }
  .mitbw-button--pill--white-black:hover {
    background-color: #fff;
    color: #191d1f;
    border-color: #191d1f; }

/*doc
---
title: Button (Brick)
name: button-02-brick
category: Buttons
---
```html_example
<a class="mitbw-button--brick">Hello, World!</a>
```
```html_example
<a class="mitbw-button--brick--red-white">Hello, World!</a>
```
*/
.mitbw-button--brick {
  font-size: 15px;
  font-size: 0.8333333333rem;
  display: inline-block;
  padding: 0 1em;
  background-color: #fff;
  color: #191d1f;
  line-height: 2em;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid #191d1f;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
  font-family: "SuisseIntl", "Helvetica Neue", Helvetica, FreeSans, Arial, sans-serif;
  font-weight: 700; }
  .mitbw-button--brick:hover {
    background-color: #191d1f;
    color: #fff;
    border-color: #191d1f; }

.mitbw-button--brick--red-white {
  font-size: 15px;
  font-size: 0.8333333333rem;
  display: inline-block;
  padding: 0 1em;
  background-color: #fff;
  color: #cd202c;
  line-height: 2em;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid #cd202c;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
  font-family: "SuisseIntl", "Helvetica Neue", Helvetica, FreeSans, Arial, sans-serif;
  font-weight: 700; }
  .mitbw-button--brick--red-white:hover {
    background-color: #cd202c;
    color: #fff;
    border-color: #cd202c; }

.mitbw-preheader {
  border-bottom: 2px solid #cecfcb; }
  .mitbw-preheader::after {
    clear: both;
    content: "";
    display: table; }

.mitbw-preheader__title,
.mitbw-preheader__message {
  font-size: 18px;
  font-size: 1rem;
  margin: 0; }

.mitbw-preheader__title {
  float: left; }

.mitbw-preheader__message {
  float: right; }

/*doc
---
title: Header
name: header
category: Header
---
```html_example
<nav class="mitbw-header">

  <a class="mitbw-header__logo" href="https://betterworld.mit.edu/">MIT</a>

  <ul class="mitbw-header-nav">
    <li class="mitbw-header-nav__item--dropdown">
      <a>Hi</a>
      <div class="mitbw-header-nav__mega-content">Mega content goes here</div>
    </li>
    <li class="mitbw-header-nav__item">Hi</li>
    <li class="mitbw-header-nav__item">Hi</li>
  </ul>

  <a class="mitbw-header__button">Log out</a>

</nav>
```
*/
.mitbw-header {
  font-size: 15px;
  font-size: 0.8333333333rem;
  position: relative;
  text-align: center; }

.mitbw-header__button {
  font-size: 15px;
  font-size: 0.8333333333rem;
  display: inline-block;
  padding: 0 1em;
  background-color: #191d1f;
  color: #fff;
  line-height: 2em;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid #191d1f;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
  font-family: "SuisseIntlMono", Menlo, "DejaVu Sans Mono", "Courier New", Courier, monospace;
  border-radius: 999em;
  float: right; }
  .mitbw-header__button:hover {
    background-color: #fff;
    color: #191d1f;
    border-color: #191d1f; }

.mitbw-header__logo {
  float: left; }

/* Flex
   ========================================================================== */
.mitbw-header {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: justify; }

.mitbw-header__nav {
  align-self: center; }

.mitbw-header-nav {
  display: inline-block;
  height: 44px;
  margin: 0;
  padding: 0;
  color: #6c6f70;
  font-family: "SuisseIntlMono", Menlo, "DejaVu Sans Mono", "Courier New", Courier, monospace;
  text-align: center;
  text-transform: uppercase;
  list-style-type: none; }

.mitbw-header-nav li,
.mitbw-header-nav .menu-item,
.mitbw-header-nav__item,
.mitbw-header-nav__item--dropdown {
  display: inline-block;
  margin-right: 2em;
  line-height: 44px; }
  .mitbw-header-nav li:hover,
  .mitbw-header-nav .menu-item:hover,
  .mitbw-header-nav__item:hover,
  .mitbw-header-nav__item--dropdown:hover {
    color: #191d1f; }
  .mitbw-header-nav li:last-child,
  .mitbw-header-nav .menu-item:last-child,
  .mitbw-header-nav__item:last-child,
  .mitbw-header-nav__item--dropdown:last-child {
    margin-right: 0; }

.mitbw-header-nav__item--dropdown:after {
  content: '+'; }

.mitbw-header-nav__item--dropdown:hover:after {
  content: '-'; }

.mitbw-header-nav__mega-content {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100px;
  transition: 0.15s;
  background: #f00;
  opacity: 0;
  visibility: hidden; }
  .mitbw-header-nav__item:hover .mitbw-header-nav__mega-content, .mitbw-header-nav__item--dropdown:hover .mitbw-header-nav__mega-content {
    opacity: 1;
    visibility: visible; }

.mitbw-footer {
  display: block;
  padding: 2.3576515979%;
  padding-top: 2em;
  padding-bottom: 2em;
  background-color: #191d1f;
  color: #cecfcb; }
  .mitbw-footer::after {
    clear: both;
    content: "";
    display: table; }
  .mitbw-footer::after {
    clear: both;
    content: "";
    display: table; }
  .mitbw-footer a {
    color: #fff; }

.mitbw-footer__logo {
  display: inline-block;
  width: 140px;
  height: 31px;
  background: url("../img/mitbw-logo--footer.png") center/cover no-repeat;
  text-indent: -9999em; }

.mitbw-footer-panel {
  margin-bottom: 2.8em; }
  @media (min-width: 600px) {
    .mitbw-footer-panel {
      float: left;
      display: block;
      margin-right: 2.3576515979%;
      width: 23.2317613015%;
      margin-bottom: 0; }
      .mitbw-footer-panel:last-child {
        margin-right: 0; } }

.mitbw-footer-panel__heading {
  font-size: 12.5px;
  font-size: 0.6944444444rem;
  margin-top: 0;
  margin-bottom: 1.4em;
  color: #6c6f70;
  font-family: "SuisseIntlMono", Menlo, "DejaVu Sans Mono", "Courier New", Courier, monospace;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase; }
  @media (min-width: 600px) {
    .mitbw-footer-panel__heading {
      margin-bottom: 1.4em; } }

.mitbw-footer-panel__nav {
  font-size: 15px;
  font-size: 0.8333333333rem;
  margin: 0;
  padding-left: 0;
  list-style-type: none; }

.mitbw-subfooter {
  padding: 1.4rem 0;
  border-top: 2px solid #6c6f70;
  background-color: #191d1f;
  color: #6c6f70;
  font-weight: 700;
  text-align: center; }

.mitbw-hero {
  position: relative;
  height: calc(100vh - 440px);
  height: 40vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }

.mitbw-hero__title {
  position: absolute;
  top: 50%;
  width: 100%;
  margin: 0;
  transform: translateY(-50%);
  color: #fff;
  font-size: 6vmin;
  text-align: center;
  text-shadow: 0 0 1em #000; }

.mitbw-scroll-arrow {
  position: absolute;
  bottom: 65px;
  left: 50%;
  width: 22px;
  height: 90px;
  transform: translateX(-50%);
  z-index: 999;
  text-indent: -9999em;
  background-image: url("../img/button-arrow-down.png");
  background-repeat: no-repeat;
  background-position: top center;
  transition: 0.15s;
  cursor: pointer; }
  .mitbw-scroll-arrow:hover {
    background-position: center 10px; }

.mitbw-two-panel {
  display: block;
  min-height: 400px;
  min-height: 30vw; }
  .mitbw-two-panel::after {
    clear: both;
    content: "";
    display: table; }
  .mitbw-two-panel::after {
    clear: both;
    content: "";
    display: table; }

@media (min-width: 600px) {
  .mitbw-two-panel__text,
  .mitbw-two-panel__image {
    float: left;
    display: block;
    width: 51.178825799%; }
    .mitbw-two-panel__text:last-child,
    .mitbw-two-panel__image:last-child {
      width: 48.821174201%; } }

.mitbw-two-panel__image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }
  .mitbw-two-panel__image img {
    width: 100%;
    height: auto; }

.mitbw-two-panel__text {
  padding: 2em 2.3576515979%; }

.mitbw-two-panel__text-p {
  font-weight: 300; }

.mitbw-two-panel__heading,
.mitbw-two-panel__subheading {
  font-size: 25.92px;
  font-size: 1.44rem;
  margin: 0; }

.mitbw-two-panel__subheading {
  color: #cecfcb; }

.mitbw-two-panel {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  box-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  -o-align-items: stretch;
  align-items: stretch;
  -ms-flex-align: stretch; }
  @media (min-width: 600px) {
    .mitbw-two-panel {
      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
      box-orient: horizontal;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: row;
      -moz-flex-direction: row;
      flex-direction: row;
      -ms-flex-direction: row; } }

.mitbw-two-panel__text,
.mitbw-two-panel__image {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.mitbw-two-panel__text {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  box-ordinal-group: 2;
  -webkit-order: 2;
  -moz-order: 2;
  order: 2;
  -ms-flex-order: 2; }
  @media (min-width: 600px) {
    .mitbw-two-panel__text {
      -webkit-box-ordinal-group: 0;
      -moz-box-ordinal-group: 0;
      box-ordinal-group: 0;
      -webkit-order: 0;
      -moz-order: 0;
      order: 0;
      -ms-flex-order: 0; } }

.mitbw-two-panel__image {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  box-ordinal-group: 1;
  -webkit-order: 1;
  -moz-order: 1;
  order: 1;
  -ms-flex-order: 1;
  min-height: 500px;
  min-height: 50vmin; }
  @media (min-width: 600px) {
    .mitbw-two-panel__image {
      -webkit-box-ordinal-group: 0;
      -moz-box-ordinal-group: 0;
      box-ordinal-group: 0;
      -webkit-order: 0;
      -moz-order: 0;
      order: 0;
      -ms-flex-order: 0;
      min-height: 0; } }