@charset "UTF-8";
/*
    humanitiesforall.org
    Author: Visual Dialogue
    URL:    http://visualdialogue.com
    Created: Fall 2017
*/
/* Imports
-------------------------------------------------- */
/* Reset
 * from Kirby @ https://github.com/getkirby/starterkit/blob/master/assets/css/main.css
-------------------------------------------------- */
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

* {
  outline: none;
}

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

a {
  outline: none;
}

a[href^=tel] {
  border: none;
}

img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

li {
  list-style-type: none;
}

input {
  border-radius: 0;
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.iframe-wrapper iframe {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
}

@-moz-document url-prefix() {
  fieldset {
    display: table-cell;
  }
}
html {
  font-size: 10px;
}

button {
  border-radius: 0;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat;
}

/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: white;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}
[dir=rtl] .slick-prev {
  left: auto;
  right: -25px;
}
.slick-prev:before {
  content: "←";
}
[dir=rtl] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}
[dir=rtl] .slick-next {
  left: -25px;
  right: auto;
}
.slick-next:before {
  content: "→";
}
[dir=rtl] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  color: black;
  opacity: 0.75;
}

/*!
 * ImageSet - responsive, lazy-loading images for Kirby CMS
 * 
 * @copyright (c) 2016 Fabian Michael <https://fabianmichael.de>
 * @link https://github.com/fabianmichael/kirby-imageset
 *
 */
/* -----  ImageSet Component  ----------------------------------------------- */
.imageset {
  /* Fixes a glitch in Firefox, where (in rare cases) a
     black border appears for no abvious reason at the
     left side of an imageset. */
  overflow: hidden;
  /* Improve rendering speed in supported browsers. */
  contain: content;
}

/* ·····  ImageSet with Ratio-Placeholder  ·································· */
.imageset.-ratio {
  display: block;
  /* Remove bottom margin (borrowed from Inuit CSS) */
  width: 100%;
  position: relative;
  /* Create a new stacking context for this imageset.
     See comments below to learn about why this
     is important. */
  z-index: 0;
}

.imageset.-ratio .imageset-element {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  /* Override issues introduced by common rules
     for responsive images,
     e.g. `img { max-width: 100%; height: auto; }` */
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  zoom: 1;
}

.imageset.-ratio .imageset-ratio-fill {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: -1;
  /* Setting the width of the placeholder element and
     adding `overflow: hidden` prevents rendering bugs
     in IE 11. */
  width: 100%;
}

.js .imageset.-ratio.-lazyload .imageset-element {
  /* The actual image is kept behind the placeholder.
     Rather than fading in the image, the placeholder is
     faded out instead. This prevents the image layer to
     switch from hardware-accelerated rendering during the
     animation to CPU rendering after the animation has
     ended, because this can cause rendering issues in
     WebKit- and Blink-based (and possibly any other)
     browsers. */
  z-index: 1;
  backface-visibility: hidden;
}
@media screen {
  .js .imageset.-ratio.-lazyload .imageset-element {
    transition: opacity 0.5s;
  }
}

.js .imageset.-alpha.-lazyload .imageset-element {
  /* Images with transparency require a different fading
     technique, as the placeholder would shine through,
     after the final image was loaded. */
  opacity: 0;
  will-change: opacity;
}
@media screen {
  .js .imageset.-alpha.-lazyload .imageset-element {
    transition: opacity 0.5s;
  }
}

.js .imageset.-lazyload.is-loaded .imageset-element {
  opacity: 1;
  will-change: auto;
}

.imageset-placeholder {
  display: block;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  max-width: none !important;
  max-height: none !important;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  backface-visibility: hidden;
}

.js .imageset.-lazyload .imageset-placeholder {
  /* Placeholder will be placed on top of the actual
     image element. This will only be applied, when
     JavaScript is enabled. */
  /* Visibility of placeholder is changed to hidden after
     the transition. */
  /* The actual placeholder is in front of the actual
     image, so we don’t have to fade in the image, which
     would lead to artifacts in WebKit- and Blink-based
     browsers. */
  z-index: 2;
  /* Prevent user interaction like accidently saving the
     placeholder via tap/right-click */
  pointer-events: none;
  /* Background color is needed to avoid `image-rendering`
     property beeing ignored when layer is rendered on
     the GPU during animation
     Tested in: Chrome 49, Safari 9.1 */
  background-color: #efefef;
}
@media screen {
  .js .imageset.-lazyload .imageset-placeholder {
    transition: opacity 0.5s 0.05s, visibility 0s 0.8s;
  }
}

.js .imageset.-alpha .imageset-placeholder {
  visibility: visible;
}
@media screen {
  .js .imageset.-alpha .imageset-placeholder {
    transition: opacity 0.5s 0.05s, visibility 0s 0.8s;
  }
}

.js .imageset.-alpha:not(.-placeholder\:color) .imageset-placeholder {
  background-color: transparent;
}

.imageset.-placeholder\:mosaic .imageset-placeholder {
  /* autoprefixer: off */
  /* Mosaic placeholders should render crisp! */
  -ms-interpolation-mode: nearest-neighbor;
  /* IE 10, 11 */
  image-rendering: -moz-crisp-edges;
  /* Firefox */
  image-rendering: -o-crisp-edges;
  /* Opera */
  image-rendering: -webkit-optimize-contrast;
  /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  /* Safari 10+ */
  image-rendering: pixelated;
  /* Opera 26+, Chrome */
}

.js .imageset.is-loaded:not(.has-error) .imageset-placeholder {
  /* After image is loaded, the placeholder will fade out
     and then change visibility to allow mouse interation
     with the loaded image in browsers, where the
     `pointer-events` property is not supported. */
  opacity: 0;
  visibility: hidden;
}

/* ·····  NoScript Fallback  ················································ */
.imageset.-ratio .imageset-fallback {
  /* autoprefixer: off */
  position: absolute;
  z-index: 5;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-interpolation-mode: bicubic;
}

@supports ((-o-object-fit: cover) or (object-fit: cover)) {
  .imageset.-ratio .imageset-fallback {
    min-width: none;
    min-height: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.no-js .imageset .imageset-element {
  display: none;
}

/* ·····  Error Handling  ··················································· */
.js .imageset .imageset-error {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.js .imageset .imageset-error {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M15%2C10.2803438%20L12.7537186%2C11.7778647%20L9.75371856%2C9.77786474%20L6.75371856%2C11.7778647%20L3.75371856%2C9.77786474%20L1%2C11.6136771%20L1%2C7.19820434e-15%20L15%2C9.76996262e-15%20L15%2C10.2803438%20Z%20M15%2C12.0831194%20L15%2C16%20L1%2C16%20L1%2C13.4164528%20L3.75371856%2C11.5806404%20L6.75371856%2C13.5806404%20L9.75371856%2C11.5806404%20L12.7537186%2C13.5806404%20L15%2C12.0831194%20Z%20M10%2C2.22044605e-15%20L15%2C5%20L15%2C3.44509285e-15%20L10%2C2.22044605e-15%20Z%20M13%2C6%20L9%2C2%20L9%2C6%20L13%2C6%20Z%22/%3E%0A%3C/svg%3E%0A") no-repeat 10px 10px, rgba(255, 255, 255, 0.75);
  border: 1px solid #888;
  padding: 36px 10px 10px;
  box-sizing: border-box;
}

.no-js .imageset:not(.-alpha) .imageset-fallback:-moz-broken {
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px solid #888;
  padding: 10px;
  box-sizing: border-box;
}

.js .imageset .imageset-error,
.no-js .imageset .imageset-fallback {
  font-size: 12px !important;
  line-height: 20px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-feature-settings: normal !important;
  color: #000 !important;
  text-shadow: none !important;
}

.js .imageset .imageset-error {
  overflow: hidden !important;
}

.js .imageset.has-error .imageset-error {
  opacity: 1;
}

.js .imageset.-lazyload.has-error .imageset-element {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.js .imageset.has-placeholder-error .imageset-placeholder {
  visibility: hidden;
  transition: none;
}

/* ·····  Opera Mini Fixes  ················································· */
.operamini .imageset-placeholder {
  display: none;
}

.operamini .imageset.-multiple-ratios .imageset-element {
  /* autoprefixer: off */
  -o-object-fit: cover;
  object-fit: cover;
}

@keyframes mdc-checkbox-unchecked-checked-checkmark-path {
  0%, 50% {
    stroke-dashoffset: 29.7833385;
  }
  50% {
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes mdc-checkbox-unchecked-indeterminate-mixedmark {
  0%, 68.2% {
    transform: scaleX(0);
  }
  68.2% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes mdc-checkbox-checked-unchecked-checkmark-path {
  from {
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    opacity: 1;
    stroke-dashoffset: 0;
  }
  to {
    opacity: 0;
    stroke-dashoffset: -29.7833385;
  }
}
@keyframes mdc-checkbox-checked-indeterminate-checkmark {
  from {
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transform: rotate(0deg);
    opacity: 1;
  }
  to {
    transform: rotate(45deg);
    opacity: 0;
  }
}
@keyframes mdc-checkbox-indeterminate-checked-checkmark {
  from {
    animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    transform: rotate(360deg);
    opacity: 1;
  }
}
@keyframes mdc-checkbox-checked-indeterminate-mixedmark {
  from {
    animation-timing-function: mdc-animation-deceleration-curve-timing-function;
    transform: rotate(-45deg);
    opacity: 0;
  }
  to {
    transform: rotate(0deg);
    opacity: 1;
  }
}
@keyframes mdc-checkbox-indeterminate-checked-mixedmark {
  from {
    animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
    transform: rotate(0deg);
    opacity: 1;
  }
  to {
    transform: rotate(315deg);
    opacity: 0;
  }
}
@keyframes mdc-checkbox-indeterminate-unchecked-mixedmark {
  0% {
    animation-timing-function: linear;
    transform: scaleX(1);
    opacity: 1;
  }
  32.8%, 100% {
    transform: scaleX(0);
    opacity: 0;
  }
}
.mdc-checkbox {
  display: inline-block;
  position: relative;
  flex: 0 0 18px;
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 11px;
  line-height: 0;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: bottom;
}

.mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
  border-color: rgba(0, 0, 0, 0.54);
  background-color: transparent;
}

.mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,
.mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
  border-color: #018786;
  /* @alternate */
  border-color: var(--mdc-theme-secondary, #018786);
  background-color: #018786;
  /* @alternate */
  background-color: var(--mdc-theme-secondary, #018786);
}

@keyframes mdc-checkbox-fade-in-background-0 {
  0% {
    border-color: rgba(0, 0, 0, 0.54);
    background-color: transparent;
  }
  50% {
    border-color: #018786;
    /* @alternate */
    border-color: var(--mdc-theme-secondary, #018786);
    background-color: #018786;
    /* @alternate */
    background-color: var(--mdc-theme-secondary, #018786);
  }
}
@keyframes mdc-checkbox-fade-out-background-0 {
  0%, 80% {
    border-color: #018786;
    /* @alternate */
    border-color: var(--mdc-theme-secondary, #018786);
    background-color: #018786;
    /* @alternate */
    background-color: var(--mdc-theme-secondary, #018786);
  }
  100% {
    border-color: rgba(0, 0, 0, 0.54);
    background-color: transparent;
  }
}
.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
  animation-name: mdc-checkbox-fade-in-background-0;
}
.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
  animation-name: mdc-checkbox-fade-out-background-0;
}

.mdc-checkbox__checkmark {
  color: #fff;
}

.mdc-checkbox__mixedmark {
  border-color: #fff;
}

.mdc-checkbox__background::before {
  background-color: #018786;
}
@supports not (-ms-ime-align: auto) {
  .mdc-checkbox__background::before {
    /* @alternate */
    background-color: var(--mdc-theme-secondary, #018786);
  }
}

.mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
  border-color: rgba(0, 0, 0, 0.26);
}

.mdc-checkbox__native-control[disabled]:checked ~ .mdc-checkbox__background,
.mdc-checkbox__native-control[disabled]:indeterminate ~ .mdc-checkbox__background {
  border-color: transparent;
  background-color: rgba(0, 0, 0, 0.26);
}

@media screen and (-ms-high-contrast: active) {
  .mdc-checkbox__mixedmark {
    margin: 0 1px;
  }
}
.mdc-checkbox--disabled {
  cursor: default;
  pointer-events: none;
}

.mdc-checkbox__background {
  /* @noflip */
  left: 11px;
  /* @noflip */
  right: initial;
  display: inline-flex;
  position: absolute;
  top: 11px;
  bottom: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 45%;
  height: 45%;
  border: 2px solid currentColor;
  border-radius: 2px;
  background-color: transparent;
  pointer-events: none;
  will-change: background-color, border-color;
  transition: background-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
}
.mdc-checkbox[dir=rtl] .mdc-checkbox__background, [dir=rtl] .mdc-checkbox .mdc-checkbox__background {
  /* @noflip */
  left: initial;
  /* @noflip */
  right: 11px;
}

.mdc-checkbox__checkmark {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
}
.mdc-checkbox--upgraded .mdc-checkbox__checkmark {
  opacity: 1;
}

.mdc-checkbox__checkmark-path {
  transition: stroke-dashoffset 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
  stroke: currentColor;
  stroke-width: 3.12px;
  stroke-dashoffset: 29.7833385;
  stroke-dasharray: 29.7833385;
}

.mdc-checkbox__mixedmark {
  width: 100%;
  height: 0;
  transform: scaleX(0) rotate(0deg);
  border-width: 1px;
  border-style: solid;
  opacity: 0;
  transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
}

.mdc-checkbox--upgraded .mdc-checkbox__background,
.mdc-checkbox--upgraded .mdc-checkbox__checkmark,
.mdc-checkbox--upgraded .mdc-checkbox__checkmark-path,
.mdc-checkbox--upgraded .mdc-checkbox__mixedmark {
  transition: none !important;
}

.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__background, .mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__background, .mdc-checkbox--anim-checked-unchecked .mdc-checkbox__background, .mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__background {
  animation-duration: 180ms;
  animation-timing-function: linear;
}
.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__checkmark-path {
  animation: mdc-checkbox-unchecked-checked-checkmark-path 180ms linear 0s;
  transition: none;
}
.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__mixedmark {
  animation: mdc-checkbox-unchecked-indeterminate-mixedmark 90ms linear 0s;
  transition: none;
}
.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__checkmark-path {
  animation: mdc-checkbox-checked-unchecked-checkmark-path 90ms linear 0s;
  transition: none;
}
.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__checkmark {
  animation: mdc-checkbox-checked-indeterminate-checkmark 90ms linear 0s;
  transition: none;
}
.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__mixedmark {
  animation: mdc-checkbox-checked-indeterminate-mixedmark 90ms linear 0s;
  transition: none;
}
.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__checkmark {
  animation: mdc-checkbox-indeterminate-checked-checkmark 500ms linear 0s;
  transition: none;
}
.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__mixedmark {
  animation: mdc-checkbox-indeterminate-checked-mixedmark 500ms linear 0s;
  transition: none;
}
.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__mixedmark {
  animation: mdc-checkbox-indeterminate-unchecked-mixedmark 300ms linear 0s;
  transition: none;
}

.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,
.mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
  transition: border-color 90ms 0ms cubic-bezier(0, 0, 0.2, 1), background-color 90ms 0ms cubic-bezier(0, 0, 0.2, 1);
}
.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background .mdc-checkbox__checkmark-path,
.mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background .mdc-checkbox__checkmark-path {
  stroke-dashoffset: 0;
}

.mdc-checkbox__background::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0, 0);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  content: "";
  will-change: opacity, transform;
  transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
}

.mdc-checkbox__native-control:focus ~ .mdc-checkbox__background::before {
  transform: scale(2.75, 2.75);
  opacity: 0.12;
  transition: opacity 80ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 80ms 0ms cubic-bezier(0, 0, 0.2, 1);
}

.mdc-checkbox__native-control {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: inherit;
}
.mdc-checkbox__native-control:disabled {
  cursor: default;
  pointer-events: none;
}

.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background .mdc-checkbox__checkmark {
  transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
  opacity: 1;
}
.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background .mdc-checkbox__mixedmark {
  transform: scaleX(1) rotate(-45deg);
}

.mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background .mdc-checkbox__checkmark {
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
}
.mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background .mdc-checkbox__mixedmark {
  transform: scaleX(1) rotate(0deg);
  opacity: 1;
}

@keyframes mdc-ripple-fg-radius-in {
  from {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  }
  to {
    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  }
}
@keyframes mdc-ripple-fg-opacity-in {
  from {
    animation-timing-function: linear;
    opacity: 0;
  }
  to {
    opacity: var(--mdc-ripple-fg-opacity, 0);
  }
}
@keyframes mdc-ripple-fg-opacity-out {
  from {
    animation-timing-function: linear;
    opacity: var(--mdc-ripple-fg-opacity, 0);
  }
  to {
    opacity: 0;
  }
}
.mdc-ripple-surface--test-edge-var-bug {
  --mdc-ripple-surface-test-edge-var: 1px solid #000;
  visibility: hidden;
}
.mdc-ripple-surface--test-edge-var-bug::before {
  border: var(--mdc-ripple-surface-test-edge-var);
}

.mdc-checkbox {
  --mdc-ripple-fg-size: 0;
  --mdc-ripple-left: 0;
  --mdc-ripple-top: 0;
  --mdc-ripple-fg-scale: 1;
  --mdc-ripple-fg-translate-end: 0;
  --mdc-ripple-fg-translate-start: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.mdc-checkbox::before, .mdc-checkbox::after {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  content: "";
}
.mdc-checkbox::before {
  transition: opacity 15ms linear, background-color 15ms linear;
  z-index: 1;
}
.mdc-checkbox.mdc-ripple-upgraded::before {
  transform: scale(var(--mdc-ripple-fg-scale, 1));
}
.mdc-checkbox.mdc-ripple-upgraded::after {
  top: 0;
  /* @noflip */
  left: 0;
  transform: scale(0);
  transform-origin: center center;
}
.mdc-checkbox.mdc-ripple-upgraded--unbounded::after {
  top: var(--mdc-ripple-top, 0);
  /* @noflip */
  left: var(--mdc-ripple-left, 0);
}
.mdc-checkbox.mdc-ripple-upgraded--foreground-activation::after {
  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
}
.mdc-checkbox.mdc-ripple-upgraded--foreground-deactivation::after {
  animation: mdc-ripple-fg-opacity-out 150ms;
  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
}
.mdc-checkbox::before, .mdc-checkbox::after {
  background-color: #018786;
}
@supports not (-ms-ime-align: auto) {
  .mdc-checkbox::before, .mdc-checkbox::after {
    /* @alternate */
    background-color: var(--mdc-theme-secondary, #018786);
  }
}
.mdc-checkbox:hover::before {
  opacity: 0.04;
}
.mdc-checkbox:not(.mdc-ripple-upgraded):focus::before, .mdc-checkbox.mdc-ripple-upgraded--background-focused::before {
  transition-duration: 75ms;
  opacity: 0.12;
}
.mdc-checkbox:not(.mdc-ripple-upgraded)::after {
  transition: opacity 150ms linear;
}
.mdc-checkbox:not(.mdc-ripple-upgraded):active::after {
  transition-duration: 75ms;
  opacity: 0.12;
}
.mdc-checkbox.mdc-ripple-upgraded {
  --mdc-ripple-fg-opacity: 0.12;
}
.mdc-checkbox::before, .mdc-checkbox::after {
  top: calc(50% - 50%);
  /* @noflip */
  left: calc(50% - 50%);
  width: 100%;
  height: 100%;
}
.mdc-checkbox.mdc-ripple-upgraded::before, .mdc-checkbox.mdc-ripple-upgraded::after {
  top: var(--mdc-ripple-top, calc(50% - 50%));
  /* @noflip */
  left: var(--mdc-ripple-left, calc(50% - 50%));
  width: var(--mdc-ripple-fg-size, 100%);
  height: var(--mdc-ripple-fg-size, 100%);
}
.mdc-checkbox.mdc-ripple-upgraded::after {
  width: var(--mdc-ripple-fg-size, 100%);
  height: var(--mdc-ripple-fg-size, 100%);
}

.mdc-ripple-upgraded--background-focused .mdc-checkbox__background::before {
  content: none;
}

.mdc-dialog,
.mdc-dialog__scrim {
  position: fixed;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.mdc-dialog {
  display: none;
  z-index: 7;
}
.mdc-dialog .mdc-dialog__surface {
  background-color: #fff;
  /* @alternate */
  background-color: var(--mdc-theme-surface, #fff);
}
.mdc-dialog .mdc-dialog__scrim {
  background-color: rgba(0, 0, 0, 0.32);
}
.mdc-dialog .mdc-dialog__title {
  color: rgba(0, 0, 0, 0.87);
}
.mdc-dialog .mdc-dialog__content {
  color: rgba(0, 0, 0, 0.6);
}
.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title, .mdc-dialog.mdc-dialog--scrollable .mdc-dialog__actions {
  border-color: rgba(0, 0, 0, 0.12);
}
.mdc-dialog .mdc-dialog__surface {
  min-width: 280px;
}
@media (max-width: 592px) {
  .mdc-dialog .mdc-dialog__surface {
    max-width: calc(100vw - 32px);
  }
}
@media (min-width: 592px) {
  .mdc-dialog .mdc-dialog__surface {
    max-width: 560px;
  }
}
.mdc-dialog .mdc-dialog__surface {
  max-height: calc(100vh - 32px);
}
.mdc-dialog .mdc-dialog__surface {
  border-radius: 4px;
}

.mdc-dialog__scrim {
  opacity: 0;
  z-index: -1;
}

.mdc-dialog__container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  box-sizing: border-box;
  transform: scale(0.8);
  opacity: 0;
}

.mdc-dialog__surface {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
}
.mdc-dialog[dir=rtl] .mdc-dialog__surface, [dir=rtl] .mdc-dialog .mdc-dialog__surface {
  text-align: right;
}

.mdc-dialog__title {
  display: block;
  margin-top: 0;
  /* @alternate */
  line-height: normal;
  font-family: Roboto, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 1.25rem;
  line-height: 2rem;
  font-weight: 500;
  letter-spacing: 0.0125em;
  text-decoration: inherit;
  text-transform: inherit;
  display: block;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0 24px 9px;
  border-bottom: 1px solid transparent;
}
.mdc-dialog__title::before {
  display: inline-block;
  width: 0;
  height: 40px;
  content: "";
  vertical-align: 0;
}
.mdc-dialog[dir=rtl] .mdc-dialog__title, [dir=rtl] .mdc-dialog .mdc-dialog__title {
  text-align: right;
}

.mdc-dialog--scrollable .mdc-dialog__title {
  padding-bottom: 15px;
}

.mdc-dialog__content {
  font-family: Roboto, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.03125em;
  text-decoration: inherit;
  text-transform: inherit;
  flex-grow: 1;
  box-sizing: border-box;
  margin: 0;
  padding: 20px 24px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.mdc-dialog__content > :first-child {
  margin-top: 0;
}
.mdc-dialog__content > :last-child {
  margin-bottom: 0;
}

.mdc-dialog__title + .mdc-dialog__content {
  padding-top: 0;
}

.mdc-dialog--scrollable .mdc-dialog__content {
  padding-top: 8px;
  padding-bottom: 8px;
}

.mdc-dialog__content .mdc-list:first-child:last-child {
  padding: 6px 0 0;
}

.mdc-dialog--scrollable .mdc-dialog__content .mdc-list:first-child:last-child {
  padding: 0;
}

.mdc-dialog__actions {
  display: flex;
  position: relative;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  min-height: 52px;
  margin: 0;
  padding: 8px;
  border-top: 1px solid transparent;
}
.mdc-dialog--stacked .mdc-dialog__actions {
  flex-direction: column;
  align-items: flex-end;
}

.mdc-dialog__button {
  /* @noflip */
  margin-left: 8px;
  /* @noflip */
  margin-right: 0;
  max-width: 100%;
  text-align: right;
}
[dir=rtl] .mdc-dialog__button, .mdc-dialog__button[dir=rtl] {
  /* @noflip */
  margin-left: 0;
  /* @noflip */
  margin-right: 8px;
}
.mdc-dialog__button:first-child {
  /* @noflip */
  margin-left: 0;
  /* @noflip */
  margin-right: 0;
}
[dir=rtl] .mdc-dialog__button:first-child, .mdc-dialog__button:first-child[dir=rtl] {
  /* @noflip */
  margin-left: 0;
  /* @noflip */
  margin-right: 0;
}
.mdc-dialog[dir=rtl] .mdc-dialog__button, [dir=rtl] .mdc-dialog .mdc-dialog__button {
  text-align: left;
}

.mdc-dialog--stacked .mdc-dialog__button:not(:first-child) {
  margin-top: 12px;
}

.mdc-dialog--open,
.mdc-dialog--opening,
.mdc-dialog--closing {
  display: flex;
}

.mdc-dialog--opening .mdc-dialog__scrim {
  transition: opacity 150ms linear;
}
.mdc-dialog--opening .mdc-dialog__container {
  transition: opacity 75ms linear, transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
}

.mdc-dialog--closing .mdc-dialog__scrim,
.mdc-dialog--closing .mdc-dialog__container {
  transition: opacity 75ms linear;
}
.mdc-dialog--closing .mdc-dialog__container {
  transform: scale(1);
}

.mdc-dialog--open .mdc-dialog__scrim {
  opacity: 1;
}
.mdc-dialog--open .mdc-dialog__container {
  transform: scale(1);
  opacity: 1;
}

.mdc-dialog-scroll-lock {
  overflow: hidden;
}

/*


  __|              |
 |     _ \   __ \   __|   __|
 __|  (   |  |   |  |   \__ \
_|   \___/  _|  _| \__| ____/


*/
/*
    Dimensions for easier responsive styling
*/
/* Gutters
-------------------------------------------------- */
/* Sizes
-------------------------------------------------- */
/* Margins
-------------------------------------------------- */
/* Breakpoints
* mainly from http://callmenick.com/post/maintainable-responsive-web-design-with-sass    
* usage: 
    @include break(0, sm) { // break 
    @include break(sm) { // use this for min width declarations
    @include break(sm, lg) { // use this for min and max-width declarations
-------------------------------------------------- */
.col-* {
  box-sizing: border-box;
  -moz-flex-grow: 0;
  flex-grow: 0;
  flex-shrink: 0;
}

.wrapper {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
}

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}

.row {
  box-sizing: border-box;
  display: -moz-flex;
  display: flex;
  -moz-flex: 0 1 auto;
  flex: 0 1 auto;
  -moz-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}
@media (min-width: 48em) {
  .row {
    margin-right: -1.4285714286%;
    margin-left: -1.4285714286%;
  }
}

.row-7 {
  margin-right: -2.9166666667px;
  margin-left: -2.9166666667px;
}

.row.reverse {
  -moz-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.col.reverse {
  -moz-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.col-xs {
  padding-right: 5px;
  padding-left: 5px;
  flex-basis: auto;
}

.col-xs-1 {
  padding-right: 5px;
  padding-left: 5px;
  flex-basis: 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-xs-2 {
  padding-right: 5px;
  padding-left: 5px;
  flex-basis: 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-xs-3 {
  padding-right: 5px;
  padding-left: 5px;
  flex-basis: 25%;
  max-width: 25%;
}

.col-xs-4 {
  padding-right: 5px;
  padding-left: 5px;
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-xs-5 {
  padding-right: 5px;
  padding-left: 5px;
  flex-basis: 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-xs-6 {
  padding-right: 5px;
  padding-left: 5px;
  flex-basis: 50%;
  max-width: 50%;
}

.col-xs-7 {
  padding-right: 5px;
  padding-left: 5px;
  flex-basis: 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-xs-8 {
  padding-right: 5px;
  padding-left: 5px;
  flex-basis: 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-xs-9 {
  padding-right: 5px;
  padding-left: 5px;
  flex-basis: 75%;
  max-width: 75%;
}

.col-xs-10 {
  padding-right: 5px;
  padding-left: 5px;
  flex-basis: 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-xs-11 {
  padding-right: 5px;
  padding-left: 5px;
  flex-basis: 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-xs-12 {
  padding-right: 5px;
  padding-left: 5px;
  flex-basis: 100%;
  max-width: 100%;
}

.col-xs-offset-1 {
  padding-right: 5px;
  padding-left: 5px;
  margin-left: 8.3333333333%;
}

.col-xs-offset-2 {
  padding-right: 5px;
  padding-left: 5px;
  margin-left: 16.6666666667%;
}

.col-xs-offset-3 {
  padding-right: 5px;
  padding-left: 5px;
  margin-left: 25%;
}

.col-xs-offset-4 {
  padding-right: 5px;
  padding-left: 5px;
  margin-left: 33.3333333333%;
}

.col-xs-offset-5 {
  padding-right: 5px;
  padding-left: 5px;
  margin-left: 41.6666666667%;
}

.col-xs-offset-6 {
  padding-right: 5px;
  padding-left: 5px;
  margin-left: 50%;
}

.col-xs-offset-7 {
  padding-right: 5px;
  padding-left: 5px;
  margin-left: 58.3333333333%;
}

.col-xs-offset-8 {
  padding-right: 5px;
  padding-left: 5px;
  margin-left: 66.6666666667%;
}

.col-xs-offset-9 {
  padding-right: 5px;
  padding-left: 5px;
  margin-left: 75%;
}

.col-xs-offset-10 {
  padding-right: 5px;
  padding-left: 5px;
  margin-left: 83.3333333333%;
}

.col-xs-offset-11 {
  padding-right: 5px;
  padding-left: 5px;
  margin-left: 91.6666666667%;
}

.col-xs-offset-12 {
  padding-right: 5px;
  padding-left: 5px;
  margin-left: 100%;
}

.col-xs-1-7 {
  padding-right: 2.9166666667px;
  padding-left: 2.9166666667px;
  flex-basis: 14.2857142857%;
  max-width: 14.2857142857%;
}

.col-xs-2-7 {
  padding-right: 2.9166666667px;
  padding-left: 2.9166666667px;
  flex-basis: 28.5714285714%;
  max-width: 28.5714285714%;
}

.col-xs-3-7 {
  padding-right: 2.9166666667px;
  padding-left: 2.9166666667px;
  flex-basis: 42.8571428571%;
  max-width: 42.8571428571%;
}

.col-xs-4-7 {
  padding-right: 2.9166666667px;
  padding-left: 2.9166666667px;
  flex-basis: 57.1428571429%;
  max-width: 57.1428571429%;
}

.col-xs-5-7 {
  padding-right: 2.9166666667px;
  padding-left: 2.9166666667px;
  flex-basis: 71.4285714286%;
  max-width: 71.4285714286%;
}

.col-xs-6-7 {
  padding-right: 2.9166666667px;
  padding-left: 2.9166666667px;
  flex-basis: 85.7142857143%;
  max-width: 85.7142857143%;
}

.col-xs-7-7 {
  padding-right: 2.9166666667px;
  padding-left: 2.9166666667px;
  flex-basis: 100%;
  max-width: 100%;
}

.col-xs-offset-1-7 {
  padding-right: 2.9166666667px;
  padding-left: 2.9166666667px;
  margin-left: 14.2857142857%;
}

.col-xs-offset-2-7 {
  padding-right: 2.9166666667px;
  padding-left: 2.9166666667px;
  margin-left: 28.5714285714%;
}

.col-xs-offset-3-7 {
  padding-right: 2.9166666667px;
  padding-left: 2.9166666667px;
  margin-left: 42.8571428571%;
}

.col-xs-offset-4-7 {
  padding-right: 2.9166666667px;
  padding-left: 2.9166666667px;
  margin-left: 57.1428571429%;
}

.col-xs-offset-5-7 {
  padding-right: 2.9166666667px;
  padding-left: 2.9166666667px;
  margin-left: 71.4285714286%;
}

.col-xs-offset-6-7 {
  padding-right: 2.9166666667px;
  padding-left: 2.9166666667px;
  margin-left: 85.7142857143%;
}

.col-xs-offset-7-7 {
  padding-right: 2.9166666667px;
  padding-left: 2.9166666667px;
  margin-left: 100%;
}

.col-xs {
  -moz-flex-grow: 1;
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
}

.start-xs {
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  text-align: start;
}

.center-xs {
  -moz-justify-content: center;
  justify-content: center;
  text-align: center;
}

.end-xs {
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  text-align: end;
}

.top-xs {
  -moz-align-items: flex-start;
  align-items: flex-start;
}

.middle-xs {
  -moz-align-items: center;
  align-items: center;
}

.bottom-xs {
  -moz-align-items: flex-end;
  align-items: flex-end;
}

.around-xs {
  -moz-justify-content: space-around;
  justify-content: space-around;
}

.between-xs {
  -moz-justify-content: space-between;
  justify-content: space-between;
}

.first-xs {
  order: -1;
}

.last-xs {
  order: 1;
}

@media only screen and (min-width: 48em) {
  .container {
    width: 46rem;
  }

  .row-sm-7 {
    margin-right: -2.5%;
    margin-left: -2.5%;
  }

  .col-sm {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: auto;
  }

  .col-sm-1 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-sm-2 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-sm-3 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-sm-5 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-sm-6 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-sm-8 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-sm-9 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-sm-11 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-sm-12 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-sm-offset-1 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 8.3333333333%;
  }

  .col-sm-offset-2 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 16.6666666667%;
  }

  .col-sm-offset-3 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 25%;
  }

  .col-sm-offset-4 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 33.3333333333%;
  }

  .col-sm-offset-5 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 41.6666666667%;
  }

  .col-sm-offset-6 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 50%;
  }

  .col-sm-offset-7 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 58.3333333333%;
  }

  .col-sm-offset-8 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 66.6666666667%;
  }

  .col-sm-offset-9 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 75%;
  }

  .col-sm-offset-10 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 83.3333333333%;
  }

  .col-sm-offset-11 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 91.6666666667%;
  }

  .col-sm-offset-12 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 100%;
  }

  .col-sm-1-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 14.2857142857%;
    max-width: 14.2857142857%;
  }

  .col-sm-2-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 28.5714285714%;
    max-width: 28.5714285714%;
  }

  .col-sm-3-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 42.8571428571%;
    max-width: 42.8571428571%;
  }

  .col-sm-4-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 57.1428571429%;
    max-width: 57.1428571429%;
  }

  .col-sm-5-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 71.4285714286%;
    max-width: 71.4285714286%;
  }

  .col-sm-6-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 85.7142857143%;
    max-width: 85.7142857143%;
  }

  .col-sm-7-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-sm-offset-1-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 14.2857142857%;
  }

  .col-sm-offset-1-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 9.2857142857%;
  }

  .col-sm-offset-2-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 28.5714285714%;
  }

  .col-sm-offset-2-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 23.5714285714%;
  }

  .col-sm-offset-3-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 42.8571428571%;
  }

  .col-sm-offset-3-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 37.8571428571%;
  }

  .col-sm-offset-4-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 57.1428571429%;
  }

  .col-sm-offset-4-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 52.1428571429%;
  }

  .col-sm-offset-5-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 71.4285714286%;
  }

  .col-sm-offset-5-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 66.4285714286%;
  }

  .col-sm-offset-6-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 85.7142857143%;
  }

  .col-sm-offset-6-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 80.7142857143%;
  }

  .col-sm-offset-7-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 100%;
  }

  .col-sm-offset-7-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 95%;
  }

  .col-sm {
    -moz-flex-grow: 1;
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .start-sm {
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    text-align: start;
  }

  .center-sm {
    -moz-justify-content: center;
    justify-content: center;
    text-align: center;
  }

  .end-sm {
    -moz-justify-content: flex-end;
    justify-content: flex-end;
    text-align: end;
  }

  .top-sm {
    -moz-align-items: flex-start;
    align-items: flex-start;
  }

  .middle-sm {
    -moz-align-items: center;
    align-items: center;
  }

  .bottom-sm {
    -moz-align-items: flex-end;
    align-items: flex-end;
  }

  .around-sm {
    -moz-justify-content: space-around;
    justify-content: space-around;
  }

  .between-sm {
    -moz-justify-content: space-between;
    justify-content: space-between;
  }

  .first-sm {
    order: -1;
  }

  .last-sm {
    order: 1;
  }
}
@media only screen and (min-width: 62em) {
  .container {
    width: 61rem;
  }

  .row-md-7 {
    margin-right: -2.5%;
    margin-left: -2.5%;
  }

  .col-md {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: auto;
  }

  .col-md-1 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-md-2 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-md-3 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-md-4 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-md-5 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-md-6 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-md-7 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-md-8 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-md-9 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-md-10 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-md-11 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-md-12 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-md-offset-1 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 8.3333333333%;
  }

  .col-md-offset-2 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 16.6666666667%;
  }

  .col-md-offset-3 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 25%;
  }

  .col-md-offset-4 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 33.3333333333%;
  }

  .col-md-offset-5 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 41.6666666667%;
  }

  .col-md-offset-6 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 50%;
  }

  .col-md-offset-7 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 58.3333333333%;
  }

  .col-md-offset-8 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 66.6666666667%;
  }

  .col-md-offset-9 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 75%;
  }

  .col-md-offset-10 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 83.3333333333%;
  }

  .col-md-offset-11 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 91.6666666667%;
  }

  .col-md-offset-12 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 100%;
  }

  .col-md-1-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 14.2857142857%;
    max-width: 14.2857142857%;
  }

  .col-md-2-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 28.5714285714%;
    max-width: 28.5714285714%;
  }

  .col-md-3-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 42.8571428571%;
    max-width: 42.8571428571%;
  }

  .col-md-4-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 57.1428571429%;
    max-width: 57.1428571429%;
  }

  .col-md-5-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 71.4285714286%;
    max-width: 71.4285714286%;
  }

  .col-md-6-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 85.7142857143%;
    max-width: 85.7142857143%;
  }

  .col-md-7-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-md-offset-1-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 14.2857142857%;
  }

  .col-md-offset-1-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 9.2857142857%;
  }

  .col-md-offset-2-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 28.5714285714%;
  }

  .col-md-offset-2-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 23.5714285714%;
  }

  .col-md-offset-3-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 42.8571428571%;
  }

  .col-md-offset-3-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 37.8571428571%;
  }

  .col-md-offset-4-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 57.1428571429%;
  }

  .col-md-offset-4-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 52.1428571429%;
  }

  .col-md-offset-5-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 71.4285714286%;
  }

  .col-md-offset-5-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 66.4285714286%;
  }

  .col-md-offset-6-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 85.7142857143%;
  }

  .col-md-offset-6-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 80.7142857143%;
  }

  .col-md-offset-7-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 100%;
  }

  .col-md-offset-7-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 95%;
  }

  .col-md {
    -moz-flex-grow: 1;
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .start-md {
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    text-align: start;
  }

  .center-md {
    -moz-justify-content: center;
    justify-content: center;
    text-align: center;
  }

  .end-md {
    -moz-justify-content: flex-end;
    justify-content: flex-end;
    text-align: end;
  }

  .top-md {
    -moz-align-items: flex-start;
    align-items: flex-start;
  }

  .middle-md {
    -moz-align-items: center;
    align-items: center;
  }

  .bottom-md {
    -moz-align-items: flex-end;
    align-items: flex-end;
  }

  .around-md {
    -moz-justify-content: space-around;
    justify-content: space-around;
  }

  .between-md {
    -moz-justify-content: space-between;
    justify-content: space-between;
  }

  .first-md {
    order: -1;
  }

  .last-md {
    order: 1;
  }
}
@media only screen and (min-width: 75em) {
  .container {
    width: 71rem;
  }

  .row-lg-7 {
    margin-right: -2.5%;
    margin-left: -2.5%;
  }

  .col-lg {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: auto;
  }

  .col-lg-1 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-lg-2 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-lg-3 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-lg-5 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-lg-6 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-lg-8 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-lg-9 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-lg-11 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-lg-12 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-lg-offset-1 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 8.3333333333%;
  }

  .col-lg-offset-2 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 16.6666666667%;
  }

  .col-lg-offset-3 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 25%;
  }

  .col-lg-offset-4 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 33.3333333333%;
  }

  .col-lg-offset-5 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 41.6666666667%;
  }

  .col-lg-offset-6 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 50%;
  }

  .col-lg-offset-7 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 58.3333333333%;
  }

  .col-lg-offset-8 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 66.6666666667%;
  }

  .col-lg-offset-9 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 75%;
  }

  .col-lg-offset-10 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 83.3333333333%;
  }

  .col-lg-offset-11 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 91.6666666667%;
  }

  .col-lg-offset-12 {
    padding-right: 1.4285714286%;
    padding-left: 1.4285714286%;
    margin-left: 100%;
  }

  .col-lg-1-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 14.2857142857%;
    max-width: 14.2857142857%;
  }

  .col-lg-2-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 28.5714285714%;
    max-width: 28.5714285714%;
  }

  .col-lg-3-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 42.8571428571%;
    max-width: 42.8571428571%;
  }

  .col-lg-4-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 57.1428571429%;
    max-width: 57.1428571429%;
  }

  .col-lg-5-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 71.4285714286%;
    max-width: 71.4285714286%;
  }

  .col-lg-6-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 85.7142857143%;
    max-width: 85.7142857143%;
  }

  .col-lg-7-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-lg-offset-1-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 14.2857142857%;
  }

  .col-lg-offset-1-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 9.2857142857%;
  }

  .col-lg-offset-2-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 28.5714285714%;
  }

  .col-lg-offset-2-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 23.5714285714%;
  }

  .col-lg-offset-3-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 42.8571428571%;
  }

  .col-lg-offset-3-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 37.8571428571%;
  }

  .col-lg-offset-4-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 57.1428571429%;
  }

  .col-lg-offset-4-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 52.1428571429%;
  }

  .col-lg-offset-5-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 71.4285714286%;
  }

  .col-lg-offset-5-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 66.4285714286%;
  }

  .col-lg-offset-6-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 85.7142857143%;
  }

  .col-lg-offset-6-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 80.7142857143%;
  }

  .col-lg-offset-7-7 {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 100%;
  }

  .col-lg-offset-7-7-gutter {
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-left: 95%;
  }

  .col-lg {
    -moz-flex-grow: 1;
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .start-lg {
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    text-align: start;
  }

  .center-lg {
    -moz-justify-content: center;
    justify-content: center;
    text-align: center;
  }

  .end-lg {
    -moz-justify-content: flex-end;
    justify-content: flex-end;
    text-align: end;
  }

  .top-lg {
    -moz-align-items: flex-start;
    align-items: flex-start;
  }

  .middle-lg {
    -moz-align-items: center;
    align-items: center;
  }

  .bottom-lg {
    -moz-align-items: flex-end;
    align-items: flex-end;
  }

  .around-lg {
    -moz-justify-content: space-around;
    justify-content: space-around;
  }

  .between-lg {
    -moz-justify-content: space-between;
    justify-content: space-between;
  }

  .first-lg {
    order: -1;
  }

  .last-lg {
    order: 1;
  }
}
/*


      ___|         |
     |       _ \   |   _ \    __|  __|
     |      (   |  |  (   |  |   \__ \
    \____| \___/  _| \___/  _|   ____/



*/
/* Grays
-------------------------------------------------- */
/* Old site colors
-------------------------------------------------- */
/* General
-------------------------------------------------- */
/* Social media
-------------------------------------------------- */
/* Color Application
-------------------------------------------------- */
.light-copy a {
  color: #ecebd5;
}

/* Helper classes
-------------------------------------------------- */
.black {
  color: #000;
}

/* Light Palette
-------------------------------------------------- */
/* project randomization
-------------------------------------------------- */
/* Dark Palette
-------------------------------------------------- */
/* Project Combinations
-------------------------------------------------- */
.color-1 {
  background-color: #eb7a77;
  fill: #eb7a77;
}

.featured-project a.high.hover-color-1 .light,
.featured-project .high.hover-color-1 .light {
  background-color: #eb7a77;
}
.featured-project a.high.hover-color-1 .light:hover,
.featured-project .high.hover-color-1 .light:hover {
  background-color: #b3b3b3;
}

.project:not(.featured-project) a.high.hover-color-1:hover .light,
.related-project:not(.featured-project) a.high.hover-color-1:hover .light {
  background-color: transparent;
  border-bottom-color: #eb7a77;
  box-shadow: inset 0 -4px 0 #eb7a77;
}

.hover-color-1 .mdc-dialog__header {
  background-color: #eb7a77;
}

.sidebar-map-1 circle {
  fill: #eb7a77;
}

.project-banner-color-1 {
  background-color: #eb7a77;
}

.color-2 {
  background-color: #fb966e;
  fill: #fb966e;
}

.featured-project a.high.hover-color-2 .light,
.featured-project .high.hover-color-2 .light {
  background-color: #fb966e;
}
.featured-project a.high.hover-color-2 .light:hover,
.featured-project .high.hover-color-2 .light:hover {
  background-color: #b3b3b3;
}

.project:not(.featured-project) a.high.hover-color-2:hover .light,
.related-project:not(.featured-project) a.high.hover-color-2:hover .light {
  background-color: transparent;
  border-bottom-color: #fb966e;
  box-shadow: inset 0 -4px 0 #fb966e;
}

.hover-color-2 .mdc-dialog__header {
  background-color: #fb966e;
}

.sidebar-map-2 circle {
  fill: #fb966e;
}

.project-banner-color-2 {
  background-color: #fb966e;
}

.color-3 {
  background-color: #ffadbc;
  fill: #ffadbc;
}

.featured-project a.high.hover-color-3 .light,
.featured-project .high.hover-color-3 .light {
  background-color: #ffadbc;
}
.featured-project a.high.hover-color-3 .light:hover,
.featured-project .high.hover-color-3 .light:hover {
  background-color: #b3b3b3;
}

.project:not(.featured-project) a.high.hover-color-3:hover .light,
.related-project:not(.featured-project) a.high.hover-color-3:hover .light {
  background-color: transparent;
  border-bottom-color: #ffadbc;
  box-shadow: inset 0 -4px 0 #ffadbc;
}

.hover-color-3 .mdc-dialog__header {
  background-color: #ffadbc;
}

.sidebar-map-3 circle {
  fill: #ffadbc;
}

.project-banner-color-3 {
  background-color: #ffadbc;
}

.color-4 {
  background-color: #d9d0e0;
  fill: #d9d0e0;
}

.featured-project a.high.hover-color-4 .light,
.featured-project .high.hover-color-4 .light {
  background-color: #d9d0e0;
}
.featured-project a.high.hover-color-4 .light:hover,
.featured-project .high.hover-color-4 .light:hover {
  background-color: #b3b3b3;
}

.project:not(.featured-project) a.high.hover-color-4:hover .light,
.related-project:not(.featured-project) a.high.hover-color-4:hover .light {
  background-color: transparent;
  border-bottom-color: #d9d0e0;
  box-shadow: inset 0 -4px 0 #d9d0e0;
}

.hover-color-4 .mdc-dialog__header {
  background-color: #d9d0e0;
}

.sidebar-map-4 circle {
  fill: #d9d0e0;
}

.project-banner-color-4 {
  background-color: #d9d0e0;
}

.color-5 {
  background-color: #bec8d9;
  fill: #bec8d9;
}

.featured-project a.high.hover-color-5 .light,
.featured-project .high.hover-color-5 .light {
  background-color: #bec8d9;
}
.featured-project a.high.hover-color-5 .light:hover,
.featured-project .high.hover-color-5 .light:hover {
  background-color: #b3b3b3;
}

.project:not(.featured-project) a.high.hover-color-5:hover .light,
.related-project:not(.featured-project) a.high.hover-color-5:hover .light {
  background-color: transparent;
  border-bottom-color: #bec8d9;
  box-shadow: inset 0 -4px 0 #bec8d9;
}

.hover-color-5 .mdc-dialog__header {
  background-color: #bec8d9;
}

.sidebar-map-5 circle {
  fill: #bec8d9;
}

.project-banner-color-5 {
  background-color: #bec8d9;
}

.color-6 {
  background-color: #eaf0ce;
  fill: #eaf0ce;
}

.featured-project a.high.hover-color-6 .light,
.featured-project .high.hover-color-6 .light {
  background-color: #eaf0ce;
}
.featured-project a.high.hover-color-6 .light:hover,
.featured-project .high.hover-color-6 .light:hover {
  background-color: #b3b3b3;
}

.project:not(.featured-project) a.high.hover-color-6:hover .light,
.related-project:not(.featured-project) a.high.hover-color-6:hover .light {
  background-color: transparent;
  border-bottom-color: #eaf0ce;
  box-shadow: inset 0 -4px 0 #eaf0ce;
}

.hover-color-6 .mdc-dialog__header {
  background-color: #eaf0ce;
}

.sidebar-map-6 circle {
  fill: #eaf0ce;
}

.project-banner-color-6 {
  background-color: #eaf0ce;
}

.color-7 {
  background-color: #b3c9b0;
  fill: #b3c9b0;
}

.featured-project a.high.hover-color-7 .light,
.featured-project .high.hover-color-7 .light {
  background-color: #b3c9b0;
}
.featured-project a.high.hover-color-7 .light:hover,
.featured-project .high.hover-color-7 .light:hover {
  background-color: #b3b3b3;
}

.project:not(.featured-project) a.high.hover-color-7:hover .light,
.related-project:not(.featured-project) a.high.hover-color-7:hover .light {
  background-color: transparent;
  border-bottom-color: #b3c9b0;
  box-shadow: inset 0 -4px 0 #b3c9b0;
}

.hover-color-7 .mdc-dialog__header {
  background-color: #b3c9b0;
}

.sidebar-map-7 circle {
  fill: #b3c9b0;
}

.project-banner-color-7 {
  background-color: #b3c9b0;
}

.color-8 {
  background-color: #97c9c6;
  fill: #97c9c6;
}

.featured-project a.high.hover-color-8 .light,
.featured-project .high.hover-color-8 .light {
  background-color: #97c9c6;
}
.featured-project a.high.hover-color-8 .light:hover,
.featured-project .high.hover-color-8 .light:hover {
  background-color: #b3b3b3;
}

.project:not(.featured-project) a.high.hover-color-8:hover .light,
.related-project:not(.featured-project) a.high.hover-color-8:hover .light {
  background-color: transparent;
  border-bottom-color: #97c9c6;
  box-shadow: inset 0 -4px 0 #97c9c6;
}

.hover-color-8 .mdc-dialog__header {
  background-color: #97c9c6;
}

.sidebar-map-8 circle {
  fill: #97c9c6;
}

.project-banner-color-8 {
  background-color: #97c9c6;
}

.color-9 {
  background-color: #8b9cd2;
  fill: #8b9cd2;
}

.featured-project a.high.hover-color-9 .light,
.featured-project .high.hover-color-9 .light {
  background-color: #8b9cd2;
}
.featured-project a.high.hover-color-9 .light:hover,
.featured-project .high.hover-color-9 .light:hover {
  background-color: #b3b3b3;
}

.project:not(.featured-project) a.high.hover-color-9:hover .light,
.related-project:not(.featured-project) a.high.hover-color-9:hover .light {
  background-color: transparent;
  border-bottom-color: #8b9cd2;
  box-shadow: inset 0 -4px 0 #8b9cd2;
}

.hover-color-9 .mdc-dialog__header {
  background-color: #8b9cd2;
}

.sidebar-map-9 circle {
  fill: #8b9cd2;
}

.project-banner-color-9 {
  background-color: #8b9cd2;
}

.color-10 {
  background-color: #f3d45c;
  fill: #f3d45c;
}

.featured-project a.high.hover-color-10 .light,
.featured-project .high.hover-color-10 .light {
  background-color: #f3d45c;
}
.featured-project a.high.hover-color-10 .light:hover,
.featured-project .high.hover-color-10 .light:hover {
  background-color: #b3b3b3;
}

.project:not(.featured-project) a.high.hover-color-10:hover .light,
.related-project:not(.featured-project) a.high.hover-color-10:hover .light {
  background-color: transparent;
  border-bottom-color: #f3d45c;
  box-shadow: inset 0 -4px 0 #f3d45c;
}

.hover-color-10 .mdc-dialog__header {
  background-color: #f3d45c;
}

.sidebar-map-10 circle {
  fill: #f3d45c;
}

.project-banner-color-10 {
  background-color: #f3d45c;
}

.color-11 {
  background-color: #f7f2af;
  fill: #f7f2af;
}

.featured-project a.high.hover-color-11 .light,
.featured-project .high.hover-color-11 .light {
  background-color: #f7f2af;
}
.featured-project a.high.hover-color-11 .light:hover,
.featured-project .high.hover-color-11 .light:hover {
  background-color: #b3b3b3;
}

.project:not(.featured-project) a.high.hover-color-11:hover .light,
.related-project:not(.featured-project) a.high.hover-color-11:hover .light {
  background-color: transparent;
  border-bottom-color: #f7f2af;
  box-shadow: inset 0 -4px 0 #f7f2af;
}

.hover-color-11 .mdc-dialog__header {
  background-color: #f7f2af;
}

.sidebar-map-11 circle {
  fill: #f7f2af;
}

.project-banner-color-11 {
  background-color: #f7f2af;
}

.color-12 {
  background-color: #ffcfa8;
  fill: #ffcfa8;
}

.featured-project a.high.hover-color-12 .light,
.featured-project .high.hover-color-12 .light {
  background-color: #ffcfa8;
}
.featured-project a.high.hover-color-12 .light:hover,
.featured-project .high.hover-color-12 .light:hover {
  background-color: #b3b3b3;
}

.project:not(.featured-project) a.high.hover-color-12:hover .light,
.related-project:not(.featured-project) a.high.hover-color-12:hover .light {
  background-color: transparent;
  border-bottom-color: #ffcfa8;
  box-shadow: inset 0 -4px 0 #ffcfa8;
}

.hover-color-12 .mdc-dialog__header {
  background-color: #ffcfa8;
}

.sidebar-map-12 circle {
  fill: #ffcfa8;
}

.project-banner-color-12 {
  background-color: #ffcfa8;
}

/**********
* thick underline
* inspired by links on medium.com
**********/
.project:not(.featured-project) a.high:hover .light {
  border-bottom-width: 3px;
  border-bottom-style: solid;
  transition: background 0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.color-white {
  background-color: white;
  fill: white;
}

/* Susy
-------------------------------------------------- */
/* Fonts
* mainly from https://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/
-------------------------------------------------- */
/* General
-------------------------------------------------- */
p,
.project-inner ul,
.project-inner ol {
  margin-bottom: 1rem;
}
@media (min-width: 48em) {
  p,
.project-inner ul,
.project-inner ol {
    margin-bottom: 2rem;
  }
}

.project-inner h2 {
  margin-top: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  line-height: 1;
}
@media (min-width: 48em) {
  .project-inner h2 {
    margin-top: 3rem;
  }
}
@media (min-width: 48em) {
  .project-inner h2 {
    margin-bottom: 1rem;
  }
}
.project-inner ol {
  margin-left: 1.5rem;
  margin-left: 2rem;
}
@media (min-width: 48em) {
  .project-inner ol {
    margin-left: 3rem;
  }
}

/* Type helper classes
-------------------------------------------------- */
.logo {
  font-size: 2.5rem;
  font-family: "adobe-garamond-pro", Georgia, Cambria, Times, "Times New Roman", serif;
  line-height: 1;
}
@media screen and (min-width: 48em) {
  .logo {
    font-size: 3.1rem;
  }
}
@media screen and (min-width: 72em) {
  .logo {
    font-size: 3.1rem;
  }
}
@media screen and (min-width: 92.5em) {
  .logo {
    font-size: 3.1rem;
  }
}

.project-banner-title {
  font-size: 3rem;
  font-family: "Cormorant Garamond", "adobe-garamond-pro", Georgia, Cambria, Times, "Times New Roman", serif;
  line-height: 1;
}
@media screen and (min-width: 48em) {
  .project-banner-title {
    font-size: 7rem;
  }
}
@media screen and (min-width: 72em) {
  .project-banner-title {
    font-size: 7.2vw;
  }
}
@media screen and (min-width: 92.5em) {
  .project-banner-title {
    font-size: 10.3rem;
  }
}

.hero-slide {
  font-size: 2.5rem;
  font-family: "adobe-garamond-pro", Georgia, Cambria, Times, "Times New Roman", serif;
  line-height: 1;
}
@media screen and (min-width: 48em) {
  .hero-slide {
    font-size: 5rem;
  }
}
@media screen and (min-width: 72em) {
  .hero-slide {
    font-size: 3.6vw;
  }
}
@media screen and (min-width: 92.5em) {
  .hero-slide {
    font-size: 6.4rem;
  }
}

.mdc-dialog__header__title, .project-pull-quote {
  font-size: 2.2rem;
  font-family: "adobe-garamond-pro", Georgia, Cambria, Times, "Times New Roman", serif;
  line-height: 1;
}
@media screen and (min-width: 48em) {
  .mdc-dialog__header__title, .project-pull-quote {
    font-size: 2.2rem;
  }
}
@media screen and (min-width: 72em) {
  .mdc-dialog__header__title, .project-pull-quote {
    font-size: 3rem;
  }
}
@media screen and (min-width: 92.5em) {
  .mdc-dialog__header__title, .project-pull-quote {
    font-size: 3.4rem;
  }
}

.alt-project .title,
.project .title {
  font-size: 2rem;
  font-family: "adobe-garamond-pro", Georgia, Cambria, Times, "Times New Roman", serif;
  line-height: 1.04;
}
@media screen and (min-width: 48em) {
  .alt-project .title,
.project .title {
    font-size: 2vw;
  }
}
@media screen and (min-width: 72em) {
  .alt-project .title,
.project .title {
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 92.5em) {
  .alt-project .title,
.project .title {
    font-size: 2.8rem;
  }
}

.intro-text {
  font-size: 2.2rem;
  font-family: "adobe-garamond-pro", Georgia, Cambria, Times, "Times New Roman", serif;
  line-height: 1.3;
}
@media screen and (min-width: 48em) {
  .intro-text {
    font-size: 2.2rem;
  }
}
@media screen and (min-width: 72em) {
  .intro-text {
    font-size: 3rem;
  }
}
@media screen and (min-width: 92.5em) {
  .intro-text {
    font-size: 3.4rem;
  }
}

.related-project-title, .project-inner {
  font-size: 2rem;
  font-family: "adobe-garamond-pro", Georgia, Cambria, Times, "Times New Roman", serif;
  line-height: 1.25;
}
@media screen and (min-width: 48em) {
  .related-project-title, .project-inner {
    font-size: 1.8vw;
  }
}
@media screen and (min-width: 72em) {
  .related-project-title, .project-inner {
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 92.5em) {
  .related-project-title, .project-inner {
    font-size: 2.4rem;
  }
}

/* Sans
-------------------------------------------------- */
.blog-banner-title, .blog-page .hero-author,
.essay-page .hero-author,
.about-page .hero-author, .projects-intro .title {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 2.8rem;
  line-height: 1;
}
@media screen and (min-width: 48em) {
  .blog-banner-title, .blog-page .hero-author,
.essay-page .hero-author,
.about-page .hero-author, .projects-intro .title {
    font-size: 3.6rem;
  }
}
@media screen and (min-width: 72em) {
  .blog-banner-title, .blog-page .hero-author,
.essay-page .hero-author,
.about-page .hero-author, .projects-intro .title {
    font-size: 4.2rem;
  }
}
@media screen and (min-width: 92.5em) {
  .blog-banner-title, .blog-page .hero-author,
.essay-page .hero-author,
.about-page .hero-author, .projects-intro .title {
    font-size: 4.6rem;
  }
}

.feature-title, .slide-button-text, .menu-item-title {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 2.4rem;
  line-height: 1;
}
@media screen and (min-width: 48em) {
  .feature-title, .slide-button-text, .menu-item-title {
    font-size: 2.6rem;
  }
}
@media screen and (min-width: 72em) {
  .feature-title, .slide-button-text, .menu-item-title {
    font-size: 3rem;
  }
}
@media screen and (min-width: 92.5em) {
  .feature-title, .slide-button-text, .menu-item-title {
    font-size: 3.4rem;
  }
}

.other-features .feature-title {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 2rem;
  line-height: 1;
}
@media screen and (min-width: 48em) {
  .other-features .feature-title {
    font-size: 2rem;
  }
}
@media screen and (min-width: 72em) {
  .other-features .feature-title {
    font-size: 2.6rem;
  }
}
@media screen and (min-width: 92.5em) {
  .other-features .feature-title {
    font-size: 2.6rem;
  }
}

.project-sidebar-content, .blog-banner-meta, .feature-byline, .feature-text {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 1;
}
@media screen and (min-width: 48em) {
  .project-sidebar-content, .blog-banner-meta, .feature-byline, .feature-text {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 72em) {
  .project-sidebar-content, .blog-banner-meta, .feature-byline, .feature-text {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 92.5em) {
  .project-sidebar-content, .blog-banner-meta, .feature-byline, .feature-text {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 100em) {
  .project-sidebar-content, .blog-banner-meta, .feature-byline, .feature-text {
    font-size: 2rem;
  }
}

.project-institution, .projects-intro .sub-title, .clear-feature-filters-button,
.clear-filters-button, .project-filter-title, .projects-filter-title, .projects-filter label, .menu-item-child, .search-field, .nav-share-text {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 1.4rem;
  line-height: 1;
}
@media screen and (min-width: 48em) {
  .project-institution, .projects-intro .sub-title, .clear-feature-filters-button,
.clear-filters-button, .project-filter-title, .projects-filter-title, .projects-filter label, .menu-item-child, .search-field, .nav-share-text {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 72em) {
  .project-institution, .projects-intro .sub-title, .clear-feature-filters-button,
.clear-filters-button, .project-filter-title, .projects-filter-title, .projects-filter label, .menu-item-child, .search-field, .nav-share-text {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 92.5em) {
  .project-institution, .projects-intro .sub-title, .clear-feature-filters-button,
.clear-filters-button, .project-filter-title, .projects-filter-title, .projects-filter label, .menu-item-child, .search-field, .nav-share-text {
    font-size: 1.6rem;
  }
}

.related-project-institution, .menu-address {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 1.2rem;
}
@media screen and (min-width: 48em) {
  .related-project-institution, .menu-address {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 72em) {
  .related-project-institution, .menu-address {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 92.5em) {
  .related-project-institution, .menu-address {
    font-size: 1.4rem;
  }
}

.project-mainimagecaption, figcaption {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 1.4rem;
  line-height: 1.36;
}
@media screen and (min-width: 48em) {
  .project-mainimagecaption, figcaption {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 72em) {
  .project-mainimagecaption, figcaption {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 92.5em) {
  .project-mainimagecaption, figcaption {
    font-size: 1.4rem;
  }
}

/* Mono
-------------------------------------------------- */
/* Accessibility, from https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/
--------------------------

/* Buttons
-------------------------------------------------*/
.button {
  font-family: "Inconsolata", monospace;
  font-size: 1.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  padding: 2rem 3rem;
  display: inline-block;
  color: #333333;
  line-height: 1.2;
  margin-top: 1rem;
}
@media screen and (min-width: 48em) {
  .button {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 72em) {
  .button {
    font-size: 2rem;
  }
}
@media screen and (min-width: 92.5em) {
  .button {
    font-size: 2.2rem;
  }
}
@media (min-width: 48em) {
  .button {
    margin-top: 2rem;
  }
}
.button:hover {
  background-color: #bec8d9;
}

/* BELOW IS FROM NEHFORALL.ORG GENERAL.SCSS *USED TO BE IMPORTED
-------------------------- */
/*
$susy: ( columns: susy-repeat(12), // gutters: 40px/80px, // as percentage
gutter-position: after, column-width: 8rem, // max width for columns
gutters: 4rem/8rem, // as percentage
global-box-sizing: border-box, );

/*
-------------------------------------------------*/
.anchor-link {
  display: block;
  position: relative;
  top: -5rem;
  visibility: hidden;
}
@media (min-width: 48em) {
  .anchor-link {
    top: -12rem;
  }
}
@media (min-width: 92.5em) {
  .anchor-link {
    top: -14rem;
  }
}

.project-article figure, .project-article .video, .project-article .audio-wrapper {
  margin-bottom: 2rem;
}
@media (min-width: 48em) {
  .project-article figure, .project-article .video, .project-article .audio-wrapper {
    margin-bottom: 4rem;
  }
}
.project-article .video iframe {
  width: 100%;
}
.project-article .video-inner {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}
.project-article .video-inner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.project-article .audio-wrapper {
  margin-top: 1rem;
}
@media (min-width: 48em) {
  .project-article .audio-wrapper {
    margin-top: 2rem;
  }
}
.project-article .audio-title {
  background-color: black;
  display: inline-block;
  color: white;
  padding: 0.5rem 1rem;
  font-family: "Inconsolata", monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
@media screen and (min-width: 48em) {
  .project-article .audio-title {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 72em) {
  .project-article .audio-title {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 92.5em) {
  .project-article .audio-title {
    font-size: 1.4rem;
  }
}
@media (min-width: 48em) {
  .project-article .audio-title {
    letter-spacing: 2px;
  }
}
.project-article .audio {
  width: 100%;
}
.project-article .audio a {
  border: none;
}

.project-pull-quote {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.2;
  font-weight: 700;
}
@media (min-width: 48em) {
  .project-pull-quote {
    margin-top: 4rem;
  }
}
@media (min-width: 48em) {
  .project-pull-quote {
    margin-bottom: 4rem;
  }
}

.pull-quote-attribution {
  margin-top: 0.5rem;
  font-family: "Inconsolata", monospace;
  font-size: 1.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: right;
}
@media (min-width: 48em) {
  .pull-quote-attribution {
    margin-top: 1rem;
  }
}
@media screen and (min-width: 48em) {
  .pull-quote-attribution {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 72em) {
  .pull-quote-attribution {
    font-size: 2rem;
  }
}
@media screen and (min-width: 92.5em) {
  .pull-quote-attribution {
    font-size: 2.2rem;
  }
}

/* Project page
-------------------------------------------------- */
.project-mainimagecaption, figcaption {
  text-align: left;
  grid-area: sidebar;
  margin-top: 0.5rem;
}
@media (min-width: 48em) {
  .project-mainimagecaption, figcaption {
    margin-top: 1rem;
  }
}

figcaption p {
  margin: 0;
}

.project-mainimagecaption {
  margin-bottom: 1rem;
}
@media (min-width: 48em) {
  .project-mainimagecaption {
    margin-bottom: 2rem;
  }
}

.project-sidebar-title {
  font-family: "Inconsolata", monospace;
  font-size: 1.4rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
}
@media screen and (min-width: 48em) {
  .project-sidebar-title {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 72em) {
  .project-sidebar-title {
    font-size: 1.7rem;
  }
}
@media screen and (min-width: 92.5em) {
  .project-sidebar-title {
    font-size: 1.7rem;
  }
}

.project-sidebar-content {
  overflow-wrap: break-word;
}
.project-sidebar-content a:hover {
  color: #eb7a77;
}

.sidebar-map path,
.national-svg svg {
  fill: none;
  stroke: black;
  stroke-opacity: 0.1;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 100%;
  height: 100%;
}
@media (min-width: 48em) {
  .sidebar-map path,
.national-svg svg {
    stroke-width: 2;
  }
}

.project-header-sidebar svg {
  pointer-events: auto;
}
.project-header-sidebar .background {
  fill: none;
  pointer-events: all;
}
.project-header-sidebar .feature {
  fill: #ccc;
  cursor: pointer;
}
.project-header-sidebar .feature.active {
  fill: #eb7a77;
}
.project-header-sidebar .mesh {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Projects
-------------------------------------------------- */
label.is-inactive {
  color: #cccccc;
}

/*
* CSS for printing
* from https://getflywheel.com/layout/how-to-style-your-website-for-print-with-css/
*/
/* Print
-------------------------------------------------- */
.print-only-wordmark {
  display: none !important;
}

@media print {
  html html, html body, body html, body body {
    height: 99%;
  }

  body {
    color: #000;
    background: #fff;
    font-family: Georgia, Cambria, Times, "Times New Roman", serif;
    font-size: 10px !important;
  }

  header,
aside,
footer {
    display: none;
    height: 0;
  }

  article a[href^=http]:after {
    content: " <" attr(href) "> ";
  }

  ol,
ul {
    page-break-inside: avoid;
  }

  h1,
h2,
h3,
h4,
h5,
h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  img {
    page-break-inside: avoid;
    page-break-after: avoid;
    max-width: 100% !important;
  }

  blockquote,
table,
pre {
    page-break-inside: avoid;
  }

  ul,
ol,
dl {
    page-break-before: avoid;
  }

  body,
article {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  @page {
    margin: 2cm;
    max-height: 100%;
  }
  section.project-banner-section {
    padding-top: 0;
    height: initial !important;
  }

  .project-banner-title {
    position: static !important;
    color: black !important;
    font-size: 60px !important;
  }

  .print-only-wordmark {
    display: block !important;
  }

  .video {
    display: none;
  }

  .related-projects-list {
    -moz-column-count: 2;
         column-count: 2;
    -moz-column-gap: 4rem;
         column-gap: 4rem;
  }

  .related-project {
    display: inline-block;
  }

  .hero-text {
    font-size: 50px;
  }

  .textFitted, .hero-author {
    padding-left: 10px !important;
  }

  div.project-sidebar, div.project-sidebar-related-projects, div.project-sidebar-footnotes, #project-sidebar {
    page-break-inside: avoid !important;
  }

  #project-sidebar {
    max-height: 100%;
  }

  h2.related-projects-title {
    margin-bottom: 20px;
    page-break-after: avoid;
  }

  h2.footnotes-title {
    page-break-after: avoid !important;
  }

  ol.footnotes-list, ul.related-projects-list {
    page-break-inside: avoid !important;
    page-break-before: avoid !important;
  }

  .project, .project.is-hidden {
    display: block !important;
  }

  #view-all-projects-button {
    display: none;
  }

  .hero-nha-logo {
    width: 250px;
  }

  figure.size-project {
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  section.project-content {
    max-height: 100%;
  }

  section#projects-section {
    page-break-inside: avoid;
    height: 0 !important;
    display: none;
  }
}
/* Mixins
-------------------------------------------------- */
/* smaller, better bullets
-------------------------------------------------*/
.vertically-align-grandparent {
  display: table;
  width: 100%;
  height: 100%;
}

.vertically-align-uncle {
  display: table-row;
}

.vertically-align-parent {
  position: relative;
  transform-style: preserve-3d;
  display: table-cell;
  width: 100%;
  height: 100%;
}

.vertically-align {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Horizontal Align
 -------------------------------------------------- */
/* Clear left for correct alignment of cards in rows
-------------------------------------------------- */
/*
* Font Awesome by Dave Gandy - http://fontawesome.io
* Entypo pictograms by Daniel Bruce — www.entypo.com
*/
/* Icons
-------------------------------------------------- */
svg {
  pointer-events: none;
}

a svg {
  pointer-events: auto;
}

[class^=svg-]:before, [class*=" svg-"]:before {
  vertical-align: middle;
}

/* Fontastic
-------------------------------------------------- */
/* Links
-------------------------------------------------- */
.anchor-link {
  display: block;
  position: relative;
  visibility: hidden;
}
@media (min-width: ) {
  .anchor-link {
    top: -28vw;
  }
}
@media (min-width: ) {
  .anchor-link {
    top: -10vw;
  }
}
@media (min-width: ) {
  .anchor-link {
    top: -17rem;
  }
}

.first-anchor-link {
  top: -20rem;
}

@media (min-width: 48em) {
  a.high, .high, .video {
    transition: background 0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
    cursor: pointer;
  }
  a.high:hover .light, .high:hover .light, .video:hover .light {
    background: #eb7a77;
  }
}

.light .er {
  position: relative;
}

/* Utilities
-------------------------------------------------- */
/* The Clearfix™: A classic …, from Kirby */
.cf::after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

.vertically-center-children {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

/* General
-------------------------------------------------- */
body {
  color: #262626;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  counter-reset: footnotecounter;
}
body.is-frozen {
  overflow: hidden;
}

.page-inner {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  position: relative;
  padding: 0 1rem;
}
@media (min-width: 48em) {
  .page-inner {
    padding: 0 2rem;
  }
}

section {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 48em) {
  section {
    padding-top: 6.1538461538rem;
  }
}
@media (min-width: 92.5em) {
  section {
    padding-top: 8rem;
  }
}
@media (min-width: 48em) {
  section {
    padding-bottom: 6.1538461538rem;
  }
}
@media (min-width: 92.5em) {
  section {
    padding-bottom: 8rem;
  }
}

.section-anchor {
  display: block;
  position: absolute;
  visibility: hidden;
  top: -48px;
}
@media (min-width: 48em) {
  .section-anchor {
    top: -70px;
  }
}
@media (min-width: 72em) {
  .section-anchor {
    top: -82px;
  }
}

/* Header
-------------------------------------------------- */
.page-header-wrapper {
  position: fixed;
  z-index: 11;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  transition: background-color 0.2s ease-in;
}
.filter-is-open .page-header-wrapper, .menu-is-open .page-header-wrapper, .share-is-open .page-header-wrapper, .visible-header .page-header-wrapper {
  background-color: white;
  box-shadow: 0px 10px 41px -8px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: 0px 10px 41px -8px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0px 10px 41px -8px rgba(0, 0, 0, 0.16);
}
@media (min-width: 72em) {
  .filter-is-open .page-header-wrapper, .menu-is-open .page-header-wrapper, .share-is-open .page-header-wrapper, .visible-header .page-header-wrapper {
    box-shadow: 0px 10px 41px -8px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 0px 10px 41px -8px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 10px 41px -8px rgba(0, 0, 0, 0.08);
  }
}

.page-header {
  display: flex;
}
@media (max-width: 48em) {
  .filter-is-open .page-header, .menu-is-open .page-header {
    padding: 0 0 0 1rem;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .filter-is-open .page-header, .menu-is-open .page-header {
    padding: 0 0 0 1rem;
  }
}
@media (min-width: 48em) {
  .page-header {
    height: 7rem;
  }
}
@media (min-width: 92.5em) {
  .page-header {
    height: 8.2rem;
  }
}

/* Logo
-------------------------------------------------- */
.logo {
  display: none;
  padding-top: 0.6756756757%;
  padding-left: 2.7027027027%;
}
.filter-is-open .logo, .visible-header .logo {
  display: flex;
  align-items: center;
}
@media (max-width: 48em) {
  .filter-is-open .logo, .menu-is-open .logo {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    width: 0;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .filter-is-open .logo, .menu-is-open .logo {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    width: 0;
  }
}
.logo:hover {
  color: #b3b3b3;
}

.logo-icon {
  display: block;
  width: 10rem;
  height: 4.2rem;
}
@media (min-width: 48em) {
  .logo-icon {
    width: 12rem;
    height: 5rem;
  }
}
@media (min-width: 92.5em) {
  .logo-icon {
    width: 25rem;
    height: 6.2rem;
  }
}
.logo-icon:hover {
  fill: #b3b3b3;
}

.one-line-logo-icon {
  width: 15rem;
  height: 4.2rem;
}
@media (min-width: 48em) {
  .one-line-logo-icon {
    width: 20rem;
    height: 5rem;
  }
}
@media (min-width: 92.5em) {
  .one-line-logo-icon {
    width: 30rem;
    height: 6.2rem;
  }
}

/* Nav
-------------------------------------------------- */
.nav {
  margin-left: auto;
  display: flex;
  padding-right: 2.7027027027%;
}
.nav svg {
  fill: #999999;
}
.filter-is-open .nav, .menu-is-open .nav {
  padding: 0;
}
.nav .menu-link svg,
.nav .share-link svg {
  height: 4.5rem;
  width: 4.5rem;
}
@media (min-width: 48em) {
  .nav .menu-link svg,
.nav .share-link svg {
    height: 6rem;
    width: 6rem;
    padding: 1.5rem;
  }
}
@media (max-width: 48em) {
  .nav .share-link svg {
    padding: 1rem;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .nav .share-link svg {
    padding: 1rem;
  }
}
@media (max-width: 48em) {
  .nav .menu-link svg {
    padding: 0.5rem 0.8rem 0.8rem;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .nav .menu-link svg {
    padding: 0.5rem 0.8rem 0.8rem;
  }
}
.nav .share-wrapper {
  display: flex;
  align-items: center;
}
.menu-is-open .nav .share-wrapper {
  order: 1;
}
@media (max-width: 48em) {
  .filter-is-open .nav .share-wrapper, .menu-is-open .nav .share-wrapper {
    display: none;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .filter-is-open .nav .share-wrapper, .menu-is-open .nav .share-wrapper {
    display: none;
  }
}
.nav .share-reveal {
  display: none;
}
@media (min-width: 48em) {
  .share-is-open .nav .share-reveal {
    display: flex;
    align-items: center;
  }
}
.nav .share-reveal svg {
  height: 3.5rem;
  width: 3.5rem;
}
.share-is-open .nav .share-link {
  display: none;
}
.nav .share-close-link {
  display: inline-block;
  padding-right: 1rem;
}
.nav .menu-reveal {
  display: none;
}
.menu-is-open .nav .menu-reveal {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.nav .menu-reveal:hover svg {
  fill: #b3b3b3;
}
.nav .menu-close-link {
  position: relative;
  z-index: 2;
  padding-right: 2rem;
}
.nav .menu-close-link svg {
  height: 3.5rem;
  width: 3.5rem;
}
.nav .search-close-link-wrapper {
  display: none;
  flex: 0 0 auto;
  padding-left: 0.85rem;
}
@media (min-width: 48em) {
  .nav .search-close-link-wrapper {
    padding-left: 1.3076923077rem;
  }
}
@media (min-width: 92.5em) {
  .nav .search-close-link-wrapper {
    padding-left: 1.7rem;
  }
}
.filter-is-open .nav .search-close-link-wrapper {
  display: flex;
  padding-left: 1rem;
}
.nav .search-close-link,
.nav .search-link {
  display: flex;
  align-items: center;
}
.nav .search-close-link svg,
.nav .search-link svg {
  height: 2.8rem;
  width: 2.8rem;
}
@media (min-width: 48em) {
  .nav .search-close-link svg,
.nav .search-link svg {
    height: 3.2rem;
    width: 3.2rem;
  }
}
.nav a:hover svg {
  fill: black;
}

.nav-share-text {
  padding-right: 1rem;
}

.share-reveal-wrapper-mobile {
  display: none;
}
@media (max-width: 48em) {
  .share-is-open .share-reveal-wrapper-mobile {
    display: flex;
    justify-content: flex-end;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .share-is-open .share-reveal-wrapper-mobile {
    display: flex;
    justify-content: flex-end;
  }
}
.share-is-open .share-reveal-wrapper-mobile .share-reveal {
  display: flex;
  align-items: center;
}
.share-reveal-wrapper-mobile .share-reveal svg {
  height: 3.5rem;
  width: 3.5rem;
}

.share-icon {
  display: inline-block;
  padding: 1rem;
}
@media (min-width: 48em) {
  .share-icon {
    padding: 1rem 1.5rem;
  }
}
.share-icon svg {
  fill: #333333;
}
.share-icon:hover svg {
  fill: #b3b3b3;
}

.search-filter-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 4.5rem;
  transition: width 0.3s ease-out;
}
@media (max-width: 48em) {
  .search-filter-wrapper {
    padding-right: 1.5rem;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .search-filter-wrapper {
    padding-right: 1.5rem;
  }
}
@media (min-width: 48em) {
  .search-filter-wrapper {
    width: 6rem;
  }
}
.filter-is-open .search-filter-wrapper {
  background-color: whitesmoke;
  flex-direction: column;
  justify-content: center;
  width: 75vw;
}
@media (max-width: 48em) {
  .filter-is-open .search-filter-wrapper {
    padding-right: 0;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .filter-is-open .search-filter-wrapper {
    padding-right: 0;
  }
}
@media (min-width: 48em) {
  .filter-is-open .search-filter-wrapper {
    width: 25vw;
  }
}
@media (min-width: 92.5em) {
  .filter-is-open .search-filter-wrapper {
    width: 25vw;
  }
}
@media (min-width: 100em) {
  .filter-is-open .search-filter-wrapper {
    width: 20vw;
  }
}
.menu-is-open .search-filter-wrapper {
  order: 2;
}
@media (max-width: 48em) {
  .menu-is-open .search-filter-wrapper {
    display: none;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .menu-is-open .search-filter-wrapper {
    display: none;
  }
}

.exact-search-checkbox-wrapper {
  margin-bottom: 2rem;
  font-style: italic;
  text-transform: lowercase;
}
@media (min-width: 48em) {
  .exact-search-checkbox-wrapper {
    margin-bottom: 4rem;
  }
}

.filter-is-open .projects-filter,
.filter-is-open .search-filter-wrapper-inner {
  padding-right: 1.5rem;
  padding-left: 1.35rem;
}
@media (min-width: 48em) {
  .filter-is-open .projects-filter,
.filter-is-open .search-filter-wrapper-inner {
    padding-right: 2.3076923077rem;
  }
}
@media (min-width: 92.5em) {
  .filter-is-open .projects-filter,
.filter-is-open .search-filter-wrapper-inner {
    padding-right: 3rem;
  }
}
@media (min-width: 48em) {
  .filter-is-open .projects-filter,
.filter-is-open .search-filter-wrapper-inner {
    padding-left: 2.0769230769rem;
  }
}
@media (min-width: 92.5em) {
  .filter-is-open .projects-filter,
.filter-is-open .search-filter-wrapper-inner {
    padding-left: 2.7rem;
  }
}

.search-filter-wrapper-inner {
  padding: 0 1rem;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  flex: 1;
}
.filter-is-open .search-filter-wrapper-inner {
  background-color: whitesmoke;
  box-shadow: 0px 10px 41px -8px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: 0px 10px 41px -8px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0px 10px 41px -8px rgba(0, 0, 0, 0.16);
}
@media (min-width: 72em) {
  .filter-is-open .search-filter-wrapper-inner {
    box-shadow: 0px 10px 41px -8px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 0px 10px 41px -8px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 10px 41px -8px rgba(0, 0, 0, 0.08);
  }
}
@media (max-width: 48em) {
  .filter-is-open .search-filter-wrapper-inner {
    padding-top: 1.5rem;
    padding-bottom: 1.4rem;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .filter-is-open .search-filter-wrapper-inner {
    padding-top: 1.5rem;
    padding-bottom: 1.4rem;
  }
}

.search-field-border {
  display: flex;
  flex: 1;
}
.filter-is-open .search-field-border {
  border: 1px solid #e6e6e6;
  min-width: 2.5rem;
}

.search-form {
  display: none;
  background-color: whitesmoke;
}
.filter-is-open .search-form {
  display: flex;
  width: 100%;
  transition: width 2s ease-in;
}

.search-field {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border-radius: 0;
  background-color: whitesmoke;
  width: 100%;
}

.menu-area-wrapper {
  position: relative;
  z-index: 11;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.menu-is-open .menu-area-wrapper {
  background-color: #262626;
  order: 3;
  width: 75vw;
}
@media (max-width: 48em) {
  .menu-is-open .menu-area-wrapper {
    padding-top: 1rem;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .menu-is-open .menu-area-wrapper {
    padding-top: 1rem;
  }
}
@media (min-width: 48em) {
  .menu-is-open .menu-area-wrapper {
    width: 25vw;
  }
}
@media (min-width: 92.5em) {
  .menu-is-open .menu-area-wrapper {
    width: 25vw;
  }
}
@media (min-width: 100em) {
  .menu-is-open .menu-area-wrapper {
    width: 20vw;
  }
}

.menu-area-wrapper-inner {
  display: flex;
  width: 100%;
  height: 100%;
}
.menu-is-open .menu-area-wrapper-inner svg {
  fill: white;
}

.menu-link {
  display: flex;
  align-items: center;
}
.menu-is-open .menu-link {
  display: none;
}
@media (max-width: 48em) {
  .filter-is-open .menu-link {
    display: none;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .filter-is-open .menu-link {
    display: none;
  }
}

.menu {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  color: white;
  width: 100%;
}
.menu-is-open .menu {
  background-color: #262626;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: scroll;
  padding: 10vh 2rem 0;
}
@media (min-width: 48em) {
  .menu-is-open .menu {
    padding: 10vh 2rem 0;
  }
}
@media (min-width: 92.5em) {
  .menu-is-open .menu {
    padding: 10vh 2rem 0;
  }
}

.menu-footer {
  margin-top: auto;
}

.menu-item {
  margin-bottom: 0.85rem;
  border-bottom: 1px solid #999999;
}
@media (min-width: 48em) {
  .menu-item {
    margin-bottom: 1.7rem;
  }
}

.menu-item-title {
  display: block;
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-transform: capitalize;
}
@media (min-width: 48em) {
  .menu-item-title {
    margin-bottom: 1.5rem;
  }
}

.menu a:hover {
  color: #b3b3b3;
}

.menu-item-child {
  font-weight: 500;
  margin-bottom: 1rem;
}
@media (min-width: 48em) {
  .menu-item-child {
    margin-bottom: 2rem;
  }
}
.menu-item-child a:hover {
  color: #b3b3b3;
}

.nha-logo-wrapper {
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}
@media (min-width: 48em) {
  .nha-logo-wrapper {
    margin-top: 2rem;
  }
}
@media (min-width: 48em) {
  .nha-logo-wrapper {
    margin-bottom: 1.5rem;
  }
}

.menu-address {
  margin-bottom: 0.5rem;
  font-weight: normal;
  font-style: normal;
  line-height: 2;
}
@media (min-width: 48em) {
  .menu-address {
    margin-bottom: 1rem;
  }
}

.menu-social-icons .share-icon,
.project-sidebar-social-icons .share-icon {
  display: inline-block;
  padding: 0;
}
.menu-social-icons a:hover svg,
.project-sidebar-social-icons a:hover svg {
  fill: #b3b3b3;
}

.menu-social-icons {
  margin-left: -2rem;
}
.menu-social-icons svg {
  fill: white;
  padding: 1.5rem;
  height: 7rem;
  width: 7rem;
}

.project-sidebar-social-icons {
  display: flex;
  align-items: center;
}

.about-page .project-sidebar-social-sharing, .resources-page .project-sidebar-social-sharing {
  display: none;
}

.project-sidebar-item.project-sidebar-social-sharing {
  padding-bottom: 0.5rem;
}
.project-sidebar-item.project-sidebar-social-sharing svg {
  padding: 0 0.5rem;
  fill: #262626;
  height: 4rem;
  width: 4rem;
  margin-left: -1rem;
}
.project-sidebar-item.project-sidebar-social-sharing .share-icon {
  margin-right: 1rem;
}

/* Home
-------------------------------------------------- */
.svg-clipped {
  width: 100%;
  clip-path: url("#svgPath");
}

h2 {
  line-height: 0.8;
}

#svgPath,
defs {
  width: 100%;
  display: block;
}

/* textfit.js */
.hero-text {
  font-family: "Cormorant Garamond", "adobe-garamond-pro", Georgia, Cambria, Times, "Times New Roman", serif;
  font-weight: 700;
  display: table !important;
  width: 100vw;
  height: 60vh;
  overflow: hidden;
  font-size: 0;
  line-height: 1;
  text-indent: -5.5%;
  text-indent: -4%;
  position: relative;
}
@media (min-width: 48em) {
  .hero-text {
    height: 100vh;
    padding-top: 70px;
  }
}
.hero-text.no-indent {
  text-indent: initial;
}
.hero-text.letter-spacing {
  letter-spacing: -0.3vw;
}
.hero-text.hero-gradient {
  color: #f2f2f2;
  text-indent: initial;
}
.hero-text.hero-text-prep-spacing-and-display {
  display: block !important;
}
.hero-text.hero-text-prep-spacing-and-display .textFitted {
  display: inline-block !important;
}
.hero-text .textFitted {
  /* Color fallback */
  position: relative;
  color: white;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  display: table-cell !important;
  vertical-align: middle;
  /* Background */
  /* Text Background (black zone) */
}
.hero-text .textFitted:after, .hero-text .textFitted:before {
  position: absolute;
  content: "";
  width: 100%;
}
.hero-text .textFitted:before {
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: inherit;
}
.hero-text .textFitted:after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: white;
}

.bg-image span {
  display: block !important;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

.hero-text-prep-spacing-and-display,
.textFitted {
  padding-top: 6rem;
  padding-bottom: 6%;
  padding-left: 5.5%;
}
@media (min-width: 48em) {
  .hero-text-prep-spacing-and-display,
.textFitted {
    padding-top: 0;
    padding-left: 5.5%;
    padding-right: 12%;
  }
}

/* svg bg clip */
/*
      Based from this article from Divya Manian -
      http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html
    */
/* Main
    -------------------------------------------------- */
@media (min-width: 48em) {
  .grid {
    display: flex;
    height: 100%;
    display: grid;
    -ms-grid-columns: 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr;
    grid-template-columns: repeat(12, 1fr);
    padding: 0 2.7%;
  }
}

main {
  flex: none;
  padding-bottom: 2.7027027027%;
}

/* Hero Section
-------------------------------------------------- */
.home-section,
.home-test-section {
  position: relative;
  padding: 0;
}

.hero-slider li:first-child {
  display: block;
}

.hero-slide {
  position: relative;
}
.home-page .hero-slide {
  display: none;
}
.home-page .slick-initialized .hero-slide {
  display: block;
}

.slide-text,
.slide-text-guide {
  line-height: 1;
  padding-top: 4rem;
  padding-bottom: 6rem;
  text-indent: -4%;
  position: relative;
}
@media (min-width: 48em) {
  .slide-text,
.slide-text-guide {
    padding-top: 6.1538461538rem;
  }
}
@media (min-width: 92.5em) {
  .slide-text,
.slide-text-guide {
    padding-top: 8rem;
  }
}
@media (min-width: 48em) {
  .slide-text,
.slide-text-guide {
    padding-bottom: 9.2307692308rem;
  }
}
@media (min-width: 92.5em) {
  .slide-text,
.slide-text-guide {
    padding-bottom: 12rem;
  }
}
.slide-text.letter-spacing,
.slide-text-guide.letter-spacing {
  letter-spacing: -0.3vw;
}
.slide-text.hero-gradient,
.slide-text-guide.hero-gradient {
  color: #f2f2f2;
  text-indent: initial;
}
.hero-slide-2 .slide-text,
.hero-slide-2 .slide-text-guide {
  text-indent: initial;
}
.hero-slide-finale .slide-text {
  padding: 15vh 0 0;
}
.hero-slide-finale .slide-text.vertically-centered {
  padding-left: 2%;
}
.hero-slide-finale .textFitted:after {
  background: linear-gradient(270deg, #97c9c6, #8b9cd2);
}

.slide-image,
.slide-text {
  position: relative;
  height: 60vh;
}
@media (min-width: 48em) {
  .slide-image,
.slide-text {
    height: 100vh;
    padding-top: 70px;
    width: 100vw;
  }
}

.slide-text-guide {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.slide-button {
  color: white;
  background-color: black;
  left: 5.5%;
  padding-right: 1rem;
  padding-left: 1rem;
}
@media (min-width: 48em) {
  .slide-button {
    padding-right: 1.5384615385rem;
  }
}
@media (min-width: 92.5em) {
  .slide-button {
    padding-right: 2rem;
  }
}
@media (min-width: 48em) {
  .slide-button {
    padding-left: 1.5384615385rem;
  }
}
@media (min-width: 92.5em) {
  .slide-button {
    padding-left: 2rem;
  }
}
@media (max-width: 48em) {
  .slide-button {
    padding: 2rem 1.5rem;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .slide-button {
    padding: 2rem 1.5rem;
  }
}
.slide-button svg {
  fill: white;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.5rem;
}
.slide-button:hover {
  background-color: #b3b3b3;
}

.slide-button-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.slide-button-text {
  font-weight: 700;
}

@media (min-width: 48em) {
  .hero-nha-logo,
.slide-button {
    position: absolute;
    bottom: 4%;
  }
}

@media (min-width: 48em) {
  .hero-nha-logo img,
.slide-button {
    height: 4vw;
  }
}
@media (min-width: 92.5em) {
  .hero-nha-logo img,
.slide-button {
    height: 65px;
  }
}

.hero-nha-logo {
  padding: 1.5rem;
}
@media (min-width: 48em) {
  .hero-nha-logo {
    padding: 0;
    right: 4%;
  }
}
.hero-nha-logo img {
  width: auto;
}

.slide-image {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 5s ease-in;
}
.full-image .slide-image {
  transition: opacity 2s ease-in;
  opacity: 1;
}

/* Arrows */
@media (max-width: 48em) {
  .slick-slider .slick-arrow {
    display: none !important;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .slick-slider .slick-arrow {
    display: none !important;
  }
}
.slick-arrow-wrapper {
  width: 15%;
  height: 100%;
  height: 85%;
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.slick-arrow-wrapper:hover {
  opacity: 1;
}
.slick-arrow-wrapper:hover svg {
  fill: #b3b3b3;
}
.slick-arrow-wrapper svg {
  position: absolute;
  top: 50%;
  transform: translateY(-2rem);
  pointer-events: auto;
  width: 4rem;
  height: 4rem;
  fill: #999999;
}
@media (min-width: 48em) {
  .slick-arrow-wrapper svg {
    width: 6rem;
    height: 6rem;
  }
}
@media (min-width: 92.5em) {
  .slick-arrow-wrapper svg {
    width: 8rem;
    height: 8rem;
  }
}
.slick-arrow-wrapper .svg-slick-prev {
  left: 0;
}
.slick-arrow-wrapper .svg-slick-next {
  right: 0;
}

.slick-arrow-prev-wrapper {
  left: 0;
}
.slick-arrow-prev-wrapper svg {
  margin-right: auto;
}

.slick-arrow-next-wrapper {
  right: 0;
}
.slick-arrow-next-wrapper svg {
  margin-left: auto;
}

/* Clip text element */
.clip-text {
  position: relative;
  display: inline-block;
  /* Color fallback */
  color: white;
}
.clip-text.backgroundcliptext {
  color: white;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

.clip-text:after,
.clip-text:before {
  position: absolute;
  content: "";
}

/* Background */
.clip-text:before {
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: inherit;
}

/* Text Background (black zone) */
.clip-text:after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: white;
}

/*
    better hero gradient for performance
    from https://dockyard.com/blog/2017/10/17/animating-background-gradients-pwa
    */
.hero-gradient {
  padding-right: 0;
}
.hero-gradient .textFitted {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: initial;
  text-fill-color: initial;
}
.hero-gradient:before {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2400%;
  display: block;
  /*animation: bg-move 3s infinite;*/
}

.hero-gradient-bg {
  opacity: 1;
  position: absolute;
  z-index: -1;
  width: 2400%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  will-change: background-position;
  background: linear-gradient(270deg, #f3d45c, #eb7a77, #8b9cd2);
  background-size: 400% 400%;
  animation: Pinto 10s ease infinite;
}

@keyframes Pinto {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes Rainbow {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: translate3d(-95%, 0, 0);
  }
}
#granim-canvas {
  opacity: 1;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* Intro Section
-------------------------------------------------- */
.intro-section {
  padding-top: 6rem;
}
@media (min-width: 48em) {
  .intro-section {
    padding-top: 9.2307692308rem;
  }
}
@media (min-width: 92.5em) {
  .intro-section {
    padding-top: 12rem;
  }
}
.intro-section .intro-text {
  max-width: 86rem;
  padding: 0 1.5rem;
}
@media (min-width: 48em) {
  .intro-section .intro-text {
    padding: 0;
  }
}
@media (min-width: 92.5em) {
  .intro-section .intro-text {
    max-width: 100rem;
  }
}

.intro-wrapper {
  text-align: center;
}

.intro-text {
  max-width: 108rem;
  margin: 0 auto;
  margin-bottom: 2rem;
}
@media (min-width: 48em) {
  .intro-text {
    margin-bottom: 4rem;
  }
}

.intro-button {
  border: none;
  color: white;
  background-color: black;
}

/* Features Section
-------------------------------------------------- */
.features {
  padding: 0 1rem;
}
@media (min-width: 48em) {
  .features {
    display: flex;
    padding: 0;
    flex-direction: row;
  }
}

.feature {
  margin-bottom: 1.3888888889%;
}
@media (min-width: 48em) {
  .feature {
    margin-bottom: 0;
  }
}

.feature-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 1.3513513514% 2.7027027027%;
}
@media (min-width: 48em) {
  .feature-inner {
    padding: 0 5.5555555556% 5.5555555556%;
  }
}
@media (min-width: 48em) {
  .essay-features .feature-inner {
    padding: 0 4.1666666667% 4.1666666667%;
  }
}
.blog-page .feature-inner, .resources-page .feature-inner {
  padding: 0 1.3513513514% 5.4054054054%;
}
@media (min-width: 48em) {
  .blog-page .feature-inner, .resources-page .feature-inner {
    padding: 0 5.5555555556% 11.1111111111%;
  }
}

.feature-image-link {
  flex-grow: 0;
  min-height: 1px;
}

.essay-features {
  flex-wrap: wrap;
  padding: 0 1.3513513514%;
}
.essay-features li {
  flex: 0 0 33.3333333333%;
}
.blog-page .essay-features li {
  flex: 0 0 25%;
}

.other-features {
  flex-wrap: wrap;
  padding: 0 1.3513513514%;
  margin-bottom: 1rem;
}
@media (min-width: 48em) {
  .other-features {
    margin-bottom: 2rem;
  }
}
.other-features li {
  flex: 0 0 25%;
}

.blog-feature,
.interview-feature {
  flex: 0 0 21.6216216216%;
}

.feature-tag {
  font-family: "Inconsolata", monospace;
  font-size: 1.4rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: gray;
  font-weight: 600;
  margin-bottom: 0.7692307692%;
}
@media screen and (min-width: 48em) {
  .feature-tag {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 72em) {
  .feature-tag {
    font-size: 1.7rem;
  }
}
@media screen and (min-width: 92.5em) {
  .feature-tag {
    font-size: 1.7rem;
  }
}

.feature-title {
  font-weight: 600;
}
.essay-features .feature-title-wrapper {
  margin-bottom: 1.2820512821%;
}

.feature-copy {
  background-color: #ededed;
  flex: 1 0 auto;
}

.feature-copy-inner {
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
}
@media (min-width: 48em) {
  .feature-copy-inner {
    padding-top: 1.5384615385rem;
  }
}
@media (min-width: 92.5em) {
  .feature-copy-inner {
    padding-top: 2rem;
  }
}
@media (min-width: 48em) {
  .feature-copy-inner {
    padding-right: 1.5384615385rem;
  }
}
@media (min-width: 92.5em) {
  .feature-copy-inner {
    padding-right: 2rem;
  }
}
@media (min-width: 48em) {
  .feature-copy-inner {
    padding-bottom: 1.5384615385rem;
  }
}
@media (min-width: 92.5em) {
  .feature-copy-inner {
    padding-bottom: 2rem;
  }
}
@media (min-width: 48em) {
  .feature-copy-inner {
    padding-left: 1.5384615385rem;
  }
}
@media (min-width: 92.5em) {
  .feature-copy-inner {
    padding-left: 2rem;
  }
}

.feature-text {
  line-height: 1.2;
  color: #262626;
  display: inline;
}

.feature-byline {
  margin-top: 0.25rem;
  color: gray;
}
@media (min-width: 48em) {
  .feature-byline {
    margin-top: 0.5rem;
  }
}

.see-more-features-wrapper {
  padding: 0 2.7027027027%;
}

.see-more-features {
  display: inline;
  font-family: "Inconsolata", monospace;
  font-size: 1.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: gray;
}
@media screen and (min-width: 48em) {
  .see-more-features {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 72em) {
  .see-more-features {
    font-size: 2rem;
  }
}
@media screen and (min-width: 92.5em) {
  .see-more-features {
    font-size: 2.2rem;
  }
}

/* Projects Section
-------------------------------------------------- */
.projects-section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  padding: 0 2.7027027027%;
}
@media (min-width: 48em) {
  .projects-section {
    padding-left: 2.7027027027%;
    padding-right: 0;
    flex-direction: row;
  }
}

.projects-filter-wrapper {
  width: 0 !important;
  transition: width 0.3s ease-out;
  overflow: hidden;
}
.filter-is-open .projects-filter-wrapper {
  width: inherit !important;
  overflow: visible;
}
.projects-filter {
  background-color: whitesmoke;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  width: 0;
  padding-right: 0;
  overflow: hidden;
  padding-bottom: 0;
}
.filter-is-open .projects-filter {
  padding-top: 5rem;
  padding-top: 6.5rem;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
}
@media (min-width: 48em) {
  .filter-is-open .projects-filter {
    padding-top: 7.6923076923rem;
  }
}
@media (min-width: 92.5em) {
  .filter-is-open .projects-filter {
    padding-top: 10rem;
  }
}
.projects-filter > div:last-of-type {
  border-bottom: none;
  padding-bottom: 0rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 48em) {
  .projects-filter > div:last-of-type {
    padding-bottom: 0rem;
  }
}
@media (min-width: 92.5em) {
  .projects-filter > div:last-of-type {
    padding-bottom: 0rem;
  }
}
@media (min-width: 48em) {
  .projects-filter > div:last-of-type {
    margin-bottom: 1rem;
  }
}
.projects-filter.stop-footer {
  padding-bottom: 252px;
}

.projects-filter-title {
  text-transform: uppercase;
  font-weight: 600;
}

.project-filter-title-wrapper {
  display: flex;
  cursor: pointer;
}
.project-filter-title-wrapper:hover {
  color: #b3b3b3;
}

.project-filter-title {
  font-weight: 600;
  flex-grow: 1;
}

.project-filter-arrow-wrapper {
  margin-left: auto;
  margin-top: -0.5rem;
  margin-right: -0.5rem;
}
.project-filter-arrow-wrapper:hover svg {
  fill: #b3b3b3;
}

.svg-icon-project-filter-reveal {
  display: block;
  pointer-events: initial;
  padding: 0.5rem;
  width: 3rem;
  height: 3rem;
}
.projects-type-filter.is-open .svg-icon-project-filter-reveal {
  transform: rotate(180deg);
}

.project-filter-checkbox-wrapper {
  display: none;
  margin-top: 0.55rem;
}
@media (min-width: 48em) {
  .project-filter-checkbox-wrapper {
    margin-top: 1.1rem;
  }
}
.projects-type-filter.is-open .project-filter-checkbox-wrapper {
  display: block;
}

.project-filter-checkbox {
  cursor: pointer;
}
.project-filter-checkbox .mdc-form-field {
  align-items: initial;
  vertical-align: initial;
}
.project-filter-checkbox label {
  cursor: pointer;
  line-height: 1.3;
  padding-top: 1rem;
}
.project-filter-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
  border-color: #262626;
  background-color: #f2f2f2;
}
.project-filter-checkbox .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,
.project-filter-checkbox .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
  border-color: transparent;
  background-color: #eb7a77;
}
@keyframes mdc-checkbox-fade-in-background-1 {
  0% {
    border-color: #262626;
    background-color: #f2f2f2;
  }
  50% {
    border-color: transparent;
    background-color: #eb7a77;
  }
}
@keyframes mdc-checkbox-fade-out-background-1 {
  0%, 80% {
    border-color: transparent;
    background-color: #eb7a77;
  }
  100% {
    border-color: #262626;
    background-color: #f2f2f2;
  }
}
.project-filter-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .project-filter-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
  animation-name: mdc-checkbox-fade-in-background-1;
}
.project-filter-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .project-filter-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
  animation-name: mdc-checkbox-fade-out-background-1;
}
.project-filter-checkbox .mdc-checkbox {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
}
.project-filter-checkbox .mdc-checkbox__background {
  border-width: 1px;
}
.project-filter-checkbox .mdc-checkbox .mdc-checkbox__background::before {
  background-color: transparent;
  display: none;
}
.project-filter-checkbox .mdc-checkbox::after,
.project-filter-checkbox .mdc-checkbox::before {
  display: none;
}

.main-project-filter label {
  font-weight: 700 !important;
  margin-bottom: 0.75rem;
}
@media (min-width: 48em) {
  .main-project-filter label {
    margin-bottom: 1.5rem;
  }
}

.projects-type-filter {
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
  flex: 0 0 auto;
  border-bottom: 1px solid #999999;
}
@media (min-width: 48em) {
  .projects-type-filter {
    padding-bottom: 0.9230769231rem;
  }
}
@media (min-width: 92.5em) {
  .projects-type-filter {
    padding-bottom: 1.2rem;
  }
}
@media (min-width: 48em) {
  .projects-type-filter {
    margin-bottom: 1.8rem;
  }
}

.project-filter-select-wrapper {
  display: block;
  flex-grow: 1;
  margin-top: 0;
}

.clear-feature-filters-button,
.clear-filters-button {
  letter-spacing: 1px;
  padding: 0;
  color: #eb7a77;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: auto;
  text-align: left;
  cursor: pointer;
}
.clear-feature-filters-button:hover,
.clear-filters-button:hover {
  color: #b3b3b3;
}

.clear-filters-button {
  background-color: whitesmoke;
  padding-top: 1.2rem;
  padding-bottom: 2rem;
  border-top: 1px solid #999999;
}
@media (min-width: 48em) {
  .clear-filters-button {
    padding-top: 1.8461538462rem;
  }
}
@media (min-width: 92.5em) {
  .clear-filters-button {
    padding-top: 2.4rem;
  }
}
@media (min-width: 48em) {
  .clear-filters-button {
    padding-bottom: 3.0769230769rem;
  }
}
@media (min-width: 92.5em) {
  .clear-filters-button {
    padding-bottom: 4rem;
  }
}

.clear-feature-filters-button {
  float: right;
  margin-right: 1.3888888889%;
}

.thumbnail-dialog-surface {
  max-height: 95vh;
  overflow: scroll;
}
@media (min-width: 48em) {
  .thumbnail-dialog-surface {
    overflow: auto;
    max-width: 78.3783783784%;
  }
}
@media (min-width: 92.5em) {
  .thumbnail-dialog-surface {
    max-width: 54.0540540541%;
  }
}

.dialog-content {
  color: #262626;
}
@media (min-width: 48em) {
  .dialog-content {
    -moz-column-count: 2;
         column-count: 2;
    -moz-column-gap: 4rem;
         column-gap: 4rem;
  }
}
.dialog-content .project-sidebar-item {
  -moz-column-break-inside: avoid;
  -o-column-break-inside: avoid;
  -ms-column-break-inside: avoid;
  column-break-inside: avoid;
  break-inside: avoid;
}

.mdc-dialog--open .mdc-dialog__backdrop {
  opacity: 1;
}

.mdc-dialog {
  z-index: 11;
}

.mdc-dialog__header {
  flex-shrink: 0;
  padding-top: 0.25rem;
  padding-right: 4.5rem;
  padding-bottom: 1rem;
}
@media (min-width: 48em) {
  .mdc-dialog__header {
    padding-top: 0.3846153846rem;
  }
}
@media (min-width: 92.5em) {
  .mdc-dialog__header {
    padding-top: 0.5rem;
  }
}
@media (min-width: 48em) {
  .mdc-dialog__header {
    padding-right: 6.9230769231rem;
  }
}
@media (min-width: 92.5em) {
  .mdc-dialog__header {
    padding-right: 9rem;
  }
}
@media (min-width: 48em) {
  .mdc-dialog__header {
    padding-bottom: 1.5384615385rem;
  }
}
@media (min-width: 92.5em) {
  .mdc-dialog__header {
    padding-bottom: 2rem;
  }
}
@media (max-width: 48em) {
  .mdc-dialog__header {
    display: block;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .mdc-dialog__header {
    display: block;
  }
}

.mdc-dialog__header__title {
  font-weight: 700;
  border: none;
  padding-bottom: 0 !important;
}

.mdc-dialog__container {
  max-width: 50% !important;
  position: relative;
}
@media (max-width: 48em) {
  .mdc-dialog__container {
    max-height: 95vh;
    max-width: calc(100% - 5.5555555556%) !important;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .mdc-dialog__container {
    max-height: 95vh;
    max-width: calc(100% - 5.5555555556%) !important;
  }
}

.mdc-dialog__surface {
  max-width: 100% !important;
}

.dialog-close {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  padding: 2rem;
}
.dialog-close svg {
  fill: #262626;
  width: 3rem;
  height: 3rem;
}
.dialog-close:hover svg {
  fill: #b3b3b3;
}

.share-facebook-link.share-icon svg {
  fill: #1877f2;
}

.share-twitter-link.share-icon svg {
  fill: #1da1f2;
}

@media (max-width: 48em) {
  .share-copy-clipboard {
    display: none !important;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .share-copy-clipboard {
    display: none !important;
  }
}

/* Projects
-------------------------------------------------- */
.projects-wrapper {
  padding-top: 4rem;
  width: 100%;
}
@media (min-width: 48em) {
  .projects-wrapper {
    padding-top: 6.1538461538rem;
  }
}
@media (min-width: 92.5em) {
  .projects-wrapper {
    padding-top: 8rem;
  }
}
@media (min-width: 48em) {
  .filter-is-open .projects-wrapper {
    width: 75%;
  }
}
@media (min-width: 100em) {
  .filter-is-open .projects-wrapper {
    width: 80%;
  }
}
.projects-wrapper.limited-height {
  position: relative;
  max-height: 152vh;
  overflow: hidden;
}
@media (min-width: 92.5em) {
  .projects-wrapper.limited-height {
    max-height: 150vh;
  }
}
.projects-wrapper.limited-height:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 80%;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(0deg, white 0, rgba(255, 255, 255, 0.001) 100%);
}
.projects-wrapper.limited-height:before {
  pointer-events: none;
  top: 120vh;
}

.projects-intro .title {
  padding-bottom: 0.5rem;
}
@media (min-width: 48em) {
  .projects-intro .title {
    padding-bottom: 0.7692307692rem;
  }
}
@media (min-width: 92.5em) {
  .projects-intro .title {
    padding-bottom: 1rem;
  }
}
.projects-intro .sub-title {
  padding-bottom: 1.5rem;
}
@media (min-width: 48em) {
  .projects-intro .sub-title {
    padding-bottom: 2.3076923077rem;
  }
}
@media (min-width: 92.5em) {
  .projects-intro .sub-title {
    padding-bottom: 3rem;
  }
}

.projects {
  -moz-column-count: 2;
       column-count: 2;
}
@media (min-width: 48em) {
  .projects {
    -moz-column-count: 3;
         column-count: 3;
  }
}
@media (min-width: 92.5em) {
  .projects {
    -moz-column-count: 4;
         column-count: 4;
  }
  .filter-is-open .projects {
    -moz-column-count: 3;
         column-count: 3;
  }
}
@media (min-width: 100em) {
  .projects {
    -moz-column-count: 5;
         column-count: 5;
  }
  .filter-is-open .projects {
    -moz-column-count: 4;
         column-count: 4;
  }
}
.projects a {
  color: #262626;
}

.profile-projects {
  padding-bottom: 2rem;
}
@media (min-width: 48em) {
  .profile-projects {
    padding-bottom: 3.0769230769rem;
  }
}
@media (min-width: 92.5em) {
  .profile-projects {
    padding-bottom: 4rem;
  }
}

.thumbnail-projects {
  padding-bottom: 4rem;
}
@media (min-width: 48em) {
  .thumbnail-projects {
    padding-bottom: 6.1538461538rem;
  }
}
@media (min-width: 92.5em) {
  .thumbnail-projects {
    padding-bottom: 8rem;
  }
}

.view-all-projects-button {
  display: none;
  background-color: #eb7a77;
}
.limited-height ~ .view-all-projects-button {
  display: inline-block;
}
@media (min-width: 48em) {
  .limited-height ~ .view-all-projects-button {
    position: absolute;
    z-index: 10;
    left: 2.7%;
    bottom: 0;
  }
}

.intro-button,
.view-all-projects-button {
  color: white !important;
}

.alt-project,
.project {
  padding-top: 2px;
  padding-right: 3rem;
  padding-right: 0;
  padding-bottom: 1rem;
  /* Chrome, Safari */
  page-break-inside: avoid;
  /* Theoretically FF 20+ */
  -moz-column-break-inside: avoid;
       break-inside: avoid-column;
  /* IE 11 */
  display: table;
  /* Actually FF 20+ */
}
@media (min-width: 48em) {
  .alt-project,
.project {
    padding-right: 4.6153846154rem;
  }
}
@media (min-width: 92.5em) {
  .alt-project,
.project {
    padding-right: 6rem;
  }
}
@media (min-width: 48em) {
  .alt-project,
.project {
    padding-bottom: 1.5384615385rem;
  }
}
@media (min-width: 92.5em) {
  .alt-project,
.project {
    padding-bottom: 2rem;
  }
}
.alt-project .title,
.project .title {
  line-height: 1.2;
  display: block;
  margin-bottom: 0.1rem;
}
@media (min-width: 48em) {
  .alt-project .title,
.project .title {
    margin-bottom: 0.2rem;
  }
}
.alt-project.no-results,
.project.no-results {
  display: none;
}
.mixitup-container-failed ~ .mixitup-container-failed .alt-project.no-results,
.mixitup-container-failed ~ .mixitup-container-failed .project.no-results {
  display: table !important;
}

.project-institution {
  color: gray;
  line-height: 1.3;
}

.project-filter-checkbox {
  margin-top: -0.5rem;
  margin-left: -1rem;
}
@media (max-width: 48em) {
  .project-filter-checkbox {
    font-size: 1.4rem;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .project-filter-checkbox {
    font-size: 1.4rem;
  }
}

/* Essay Page
-------------------------------------------------- */
.blog-page .hero-text-prep-spacing-and-display,
.essay-page .hero-text-prep-spacing-and-display,
.about-page .hero-text-prep-spacing-and-display {
  padding-bottom: 0 !important;
}
.blog-page .textFitted,
.essay-page .textFitted,
.about-page .textFitted {
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: white;
  text-fill-color: white;
  padding-bottom: 0 !important;
}
@media (max-width: 48em) {
  .blog-page .textFitted,
.essay-page .textFitted,
.about-page .textFitted {
    padding-top: 0;
    font-size: 48px !important;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .blog-page .textFitted,
.essay-page .textFitted,
.about-page .textFitted {
    padding-top: 0;
    font-size: 48px !important;
  }
}
.blog-page .hero-slide,
.essay-page .hero-slide,
.about-page .hero-slide {
  background: linear-gradient(270deg, #8b9cd2, #97c9c6);
  height: initial;
}
@media (max-width: 48em) {
  .blog-page .hero-slide,
.essay-page .hero-slide,
.about-page .hero-slide {
    padding-bottom: 4rem;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .blog-page .hero-slide,
.essay-page .hero-slide,
.about-page .hero-slide {
    padding-bottom: 4rem;
  }
}
@media (min-width: 48em) {
  .blog-page .hero-slide,
.essay-page .hero-slide,
.about-page .hero-slide {
    height: 100%;
  }
}
@media (max-width: 48em) {
  .blog-page .project-banner-section,
.essay-page .project-banner-section,
.about-page .project-banner-section {
    height: initial;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .blog-page .project-banner-section,
.essay-page .project-banner-section,
.about-page .project-banner-section {
    height: initial;
  }
}
.blog-page .project-banner-section-short,
.essay-page .project-banner-section-short,
.about-page .project-banner-section-short {
  background-color: white;
}
@media (max-width: 48em) {
  .blog-page .project-banner-section-short .hero-slide,
.essay-page .project-banner-section-short .hero-slide,
.about-page .project-banner-section-short .hero-slide {
    padding-bottom: 0;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .blog-page .project-banner-section-short .hero-slide,
.essay-page .project-banner-section-short .hero-slide,
.about-page .project-banner-section-short .hero-slide {
    padding-bottom: 0;
  }
}
.blog-page .hero-text,
.essay-page .hero-text,
.about-page .hero-text {
  height: 35vh;
  text-indent: 0;
  padding-top: 4rem;
}
@media (min-width: 48em) {
  .blog-page .hero-text,
.essay-page .hero-text,
.about-page .hero-text {
    padding-top: 0;
    height: 75vh;
  }
}
.blog-page .hero-author,
.essay-page .hero-author,
.about-page .hero-author {
  padding-left: 6%;
  padding-right: 8%;
  color: white;
}
@media (max-width: 48em) {
  .blog-page .hero-author,
.essay-page .hero-author,
.about-page .hero-author {
    padding-top: 2rem;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .blog-page .hero-author,
.essay-page .hero-author,
.about-page .hero-author {
    padding-top: 2rem;
  }
}
@media (min-width: 48em) {
  .blog-page .hero-author,
.essay-page .hero-author,
.about-page .hero-author {
    padding-bottom: 2.7027027027%;
  }
}
/* Features Page
-------------------------------------------------- */
.blog-page .blog-page-title,
.resources-page .blog-page-title,
.about-page .blog-page-title {
  padding: 2.7027027027%;
}
.blog-page .project-content,
.resources-page .project-content,
.about-page .project-content {
  padding-bottom: 0;
  border: none;
}

/* Interview Page
-------------------------------------------------- */
.interview-page .project-sidebar-item {
  border: none;
}

.interview-sidebar-title {
  font-weight: 700;
}

.interview-sidebar-title-wrapper {
  padding-bottom: 0 !important;
}

.interview-sidebar-content-wrapper {
  padding-top: 0 !important;
}

.interview-closing-text {
  margin-top: 9.0909090909%;
  font-style: italic;
  color: gray;
}

/* Blog Pages
---------------------------------------------------------------------- */
.blog-banner-section {
  padding: 48px 0 0;
}
@media (min-width: 48em) {
  .blog-banner-section {
    padding-top: 70px;
  }
}

.blog-banner-title {
  font-weight: 600;
  letter-spacing: -1px;
  padding-bottom: 1rem;
}
@media (min-width: 48em) {
  .blog-banner-title {
    padding-bottom: 1.5384615385rem;
  }
}
@media (min-width: 92.5em) {
  .blog-banner-title {
    padding-bottom: 2rem;
  }
}
@media (min-width: 48em) {
  .blog-banner-title {
    line-height: 1;
  }
}

.blog-banner-meta {
  display: flex;
  padding-bottom: 2rem;
}
@media (min-width: 48em) {
  .blog-banner-meta {
    padding-bottom: 3.0769230769rem;
  }
}
@media (min-width: 92.5em) {
  .blog-banner-meta {
    padding-bottom: 4rem;
  }
}

.blog-banner-author {
  font-weight: 700;
}

.blog-banner-date {
  color: gray;
}

.blog-mainimage {
  padding-bottom: 1rem;
}
@media (min-width: 48em) {
  .blog-mainimage {
    padding-bottom: 1.5384615385rem;
  }
}
@media (min-width: 92.5em) {
  .blog-mainimage {
    padding-bottom: 2rem;
  }
}

.blog-figcaption {
  margin-top: 2.5%;
}
@media (max-width: 48em) {
  .blog-figcaption {
    font-size: 12px;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .blog-figcaption {
    font-size: 12px;
  }
}
@media (min-width: 48em) {
  .blog-figcaption {
    margin-top: 1.25%;
  }
}

/* Search Page
---------------------------------------------------------------------- */
.csv-uploader-page .projects-section,
.search-page .projects-section {
  margin-top: 70px;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

/* Project Page
-------------------------------------------------- */
.project-banner-section {
  padding-bottom: 0;
  padding-top: 48px;
}
@media (min-width: 48em) {
  .project-banner-section {
    padding-top: 70px;
  }
}
@media (min-width: 48em) {
  .project-banner-section {
    padding-top: 70px;
  }
}
@media (min-width: 92.5em) {
  .project-banner-section {
    padding-top: 82px;
  }
}

.project-banner-picture-wrapper:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 80%;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(0deg, black 0, rgba(0, 0, 0, 0.001) 100%);
}
.project-banner-picture-wrapper:before {
  z-index: 0;
  top: 35.375%;
}

.project-banner-section-short {
  height: auto;
  background-color: black;
}
.project-banner-section-short .project-banner-title {
  position: static;
  padding-top: 2rem;
  padding-bottom: 2rem;
  color: #262626;
}
@media (min-width: 48em) {
  .project-banner-section-short .project-banner-title {
    padding-top: 3.0769230769rem;
  }
}
@media (min-width: 92.5em) {
  .project-banner-section-short .project-banner-title {
    padding-top: 4rem;
  }
}
@media (min-width: 48em) {
  .project-banner-section-short .project-banner-title {
    padding-bottom: 3.0769230769rem;
  }
}
@media (min-width: 92.5em) {
  .project-banner-section-short .project-banner-title {
    padding-bottom: 4rem;
  }
}

.project-banner-image {
  background-size: cover;
  height: 100%;
  background-position: center;
  position: relative;
}
.project-banner-image:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 80%;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(0deg, black 0, rgba(0, 0, 0, 0.001) 100%);
}
.project-banner-image:before {
  z-index: 0;
  top: 35.375%;
}

.project-banner-title {
  font-weight: 600;
  letter-spacing: -1px;
  color: white;
  position: absolute;
  bottom: 2rem;
  left: 1rem;
}
@media (min-width: 48em) {
  .project-banner-title {
    line-height: 0.923;
    bottom: 4rem;
    left: 4rem;
  }
}

@media (max-width: 48em) {
  .project-content {
    padding-top: 2rem;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .project-content {
    padding-top: 2rem;
  }
}

.blog-section,
.project-content {
  border-bottom: 1px solid #262626;
}

.project-article a,
.footnotes-container a {
  border-bottom: 1px solid #eb7a77;
  box-shadow: inset 0 -4px 0 #eb7a77;
  transition: background 0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
}
.project-article a:hover,
.footnotes-container a:hover {
  border-bottom: 1px solid #b3b3b3;
  box-shadow: inset 0 -4px 0 #b3b3b3;
}

.feature-text,
.see-more-features {
  border-bottom: 3px solid transparent;
}
.feature-text:hover,
.see-more-features:hover {
  border-bottom: 3px solid #eb7a77;
  box-shadow: inset 0 -2px 0 #eb7a77;
}

.feature-title {
  color: #262626;
}
.feature-title:hover {
  border-bottom: 1px solid #eb7a77;
  box-shadow: inset 0 -5px 0 #eb7a77;
}

.project-article .video {
  padding: 0;
}

.intro-text figure,
.project-inner figure {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 48em) {
  .intro-text figure,
.project-inner figure {
    margin-top: 4rem;
  }
}
@media (min-width: 48em) {
  .intro-text figure,
.project-inner figure {
    margin-bottom: 3rem;
  }
}
.intro-text ul li,
.project-inner ul li {
  margin-left: 0.65rem;
}
@media (min-width: 48em) {
  .intro-text ul li,
.project-inner ul li {
    margin-left: 1.3rem;
  }
}
.intro-text ul li:before,
.project-inner ul li:before {
  content: "•";
  font-size: 1rem;
  position: relative;
  top: -0.2rem;
  margin-right: 4px;
  margin-left: -6px;
}
@media (min-width: 48em) {
  .intro-text ul li:before,
.project-inner ul li:before {
    font-size: 1.4rem;
    top: -0.3rem;
    margin-right: 5px;
    margin-left: -13px;
  }
}
.intro-text ol li,
.project-inner ol li {
  list-style-type: decimal;
  margin-bottom: 0.5rem;
}
@media (min-width: 48em) {
  .intro-text ol li,
.project-inner ol li {
    margin-bottom: 1rem;
  }
}

.project-sidebar {
  display: flex;
  flex-direction: column;
}

.project-sidebar-info div:first-child {
  padding-top: 0 !important;
}

.project-sidebar-title {
  font-family: "Inconsolata", monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
  font-weight: 500 !important;
}
@media screen and (min-width: 48em) {
  .project-sidebar-title {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 72em) {
  .project-sidebar-title {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 92.5em) {
  .project-sidebar-title {
    font-size: 1.4rem;
  }
}
@media (min-width: 48em) {
  .project-sidebar-title {
    letter-spacing: 2px;
  }
}
@media (min-width: 48em) {
  .project-sidebar-title {
    margin-bottom: 1rem;
  }
}

.project-sidebar-content {
  line-height: 1.222222;
}

.project-sidebar-item {
  padding-top: 0.9rem;
  padding-top: 1.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.8rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #999999;
}
@media (min-width: 48em) {
  .project-sidebar-item {
    padding-top: 1.3846153846rem;
  }
}
@media (min-width: 92.5em) {
  .project-sidebar-item {
    padding-top: 1.8rem;
  }
}
@media (min-width: 48em) {
  .project-sidebar-item {
    padding-right: 1.1538461538rem;
  }
}
@media (min-width: 92.5em) {
  .project-sidebar-item {
    padding-right: 1.5rem;
  }
}
@media (min-width: 48em) {
  .project-sidebar-item {
    padding-bottom: 1.2307692308rem;
  }
}
@media (min-width: 92.5em) {
  .project-sidebar-item {
    padding-bottom: 1.6rem;
  }
}

.project-sidebar-press a,
.project-sidebar-website a {
  text-decoration: underline;
}

.sidebar-map {
  height: 250px;
  margin-top: 1rem;
}
@media (min-width: 48em) {
  .sidebar-map {
    margin-top: 2rem;
  }
}
.sidebar-map.national-svg {
  margin-top: 0;
  height: 16vw;
}
.sidebar-map.national-svg svg {
  height: 16vw;
}

.project-sidebar-list li {
  display: inline;
}
.project-sidebar-list li:not(:last-child):after {
  content: ", ";
}

.project-sidebar-list-semicolon li {
  display: inline;
}
.project-sidebar-list-semicolon li:not(:last-child):after {
  content: "; ";
}

.interview-sidebar,
.project-sidebar-related-projects {
  margin-top: 6rem;
}
@media (min-width: 48em) {
  .interview-sidebar,
.project-sidebar-related-projects {
    margin-top: 12rem;
  }
}

.related-project {
  margin-bottom: 1.5rem;
}
@media (min-width: 48em) {
  .related-project {
    margin-bottom: 3rem;
  }
}

.related-projects-title {
  font-family: "Inconsolata", monospace;
  font-size: 1.4rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: gray;
  line-height: 1;
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 48em) {
  .related-projects-title {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 72em) {
  .related-projects-title {
    font-size: 1.7rem;
  }
}
@media screen and (min-width: 92.5em) {
  .related-projects-title {
    font-size: 1.7rem;
  }
}
@media (min-width: 48em) {
  .related-projects-title {
    margin-bottom: 3rem;
  }
}

.related-project-image {
  margin-bottom: 0.75rem;
}
@media (min-width: 48em) {
  .related-project-image {
    margin-bottom: 1.5rem;
  }
}

.related-project-title {
  margin-bottom: 0.25rem;
  line-height: 1.04;
}
@media (min-width: 48em) {
  .related-project-title {
    margin-bottom: 0.5rem;
  }
}

.project-sidebar-feedback {
  border: none;
  padding-right: 0;
}
.mdc-dialog .project-sidebar-feedback {
  padding-bottom: 0;
}

.project-sidebar-feedback-button-wrapper {
  padding: 1rem 0;
}
.mdc-dialog .project-sidebar-feedback-button-wrapper {
  padding-bottom: 0;
}

.project-sidebar-feedback-button {
  display: inline-block;
  border: 1px solid #999999;
  padding: 1rem;
}
.project-sidebar-feedback-button:hover {
  color: white;
  background-color: #eb7a77;
  border-color: #eb7a77;
}
@media (max-width: 48em) {
  .project-sidebar-feedback-button {
    text-align: center;
  }
}
@media (min-width: ) and (max-width: 48em) {
  .project-sidebar-feedback-button {
    text-align: center;
  }
}
.mdc-dialog .project-sidebar-feedback-button {
  margin-bottom: 0;
}

/* Helpers at end of cascade
-------------------------------------------------- */
/* Helpers
-------------------------------------------------*/
.is-hidden {
  display: none;
}

.is-hidden-important {
  display: none !important;
}

.is-visible {
  display: block !important;
}

.invisible {
  visibility: hidden;
}

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  height: 0;
}

@media (min-width: 48em) {
  .mobile-only {
    display: none;
  }
}

.no-mobile {
  display: none;
}
@media (min-width: 48em) {
  .no-mobile {
    display: inline-block;
  }
}

.no-mobile-block {
  display: none !important;
}
@media (min-width: 48em) {
  .no-mobile-block {
    display: block !important;
  }
}

@media (min-width: 92.5em) {
  .tablet-only {
    display: none;
  }
}

.no-tablet-block {
  display: none;
}
@media (min-width: 92.5em) {
  .no-tablet-block {
    display: block;
  }
}

.is-frozen {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
}