@charset "UTF-8";
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 */
/**
 * Reset CSS styles.
 *
 * Based on Eric Meyer's "Reset CSS 1.0" tool from
 * http://meyerweb.com/eric/tools/css/reset
 */
/* line 9, /app/app/assets/stylesheets/reset.css */
body * {
  box-sizing: border-box;
}

/* line 13, /app/app/assets/stylesheets/reset.css */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
input,
select,
textarea,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
td.menu-disabled,
ul.links,
ul.links.inline,
ul.links li,
.block ul,
div.admin,
tr.even,
tr.odd,
tr.drag,
tbody,
tbody th,
thead th,
.breadcrumb,
.item-list .icon,
.item-list .title,
.item-list ul,
.item-list ul li,
ol.task-list li.active,
.form-item,
tr.odd .form-item,
tr.even .form-item,
.form-item .description,
.form-item label,
.form-item label.option,
.form-checkboxes,
.form-radios,
.form-checkboxes .form-item,
.form-radios .form-item,
.marker,
.form-required,
.more-link,
.more-help-link,
.item-list .pager,
.item-list .pager li,
.pager-current,
.tips,
ul.primary,
ul.primary li,
ul.primary li a,
ul.primary li.active a,
ul.primary li a:hover,
ul.secondary,
ul.secondary li,
ul.secondary a,
ul.secondary a.active,
.resizable-textarea {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

/* Drupal: system-menus.css */
/* line 133, /app/app/assets/stylesheets/reset.css */
ul.links,
ul.links.inline,
ul.links li,
.block ul,
ol,
ul,
.item-list ul,
.item-list ul li {
  list-style: none;
}

/* line 143, /app/app/assets/stylesheets/reset.css */
blockquote,
q {
  quotes: none;
}

/* line 147, /app/app/assets/stylesheets/reset.css */
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

/* Remember to highlight inserts somehow! */
/* line 156, /app/app/assets/stylesheets/reset.css */
ins {
  text-decoration: none;
}

/* line 159, /app/app/assets/stylesheets/reset.css */
del {
  text-decoration: line-through;
}

/* Tables still need 'cellspacing="0"' in the markup. */
/* line 164, /app/app/assets/stylesheets/reset.css */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/**
 * Font reset.
 *
 * Specifically targets form elements which browsers often times give
 * special treatment.
 */
/* line 175, /app/app/assets/stylesheets/reset.css */
input,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* line 180, /app/app/assets/stylesheets/reset.css */
textarea {
  font-size: 1em;
  line-height: 1.538em;
}

/**
 * Markup free clearing.
 *
 * Consider adding your own selectors to this instead of finding ways
 * to sneak the clearfix class into Drupal's markup.
 * From http://perishablepress.com/press/2009/12/06/new-clearfix-hack
 */
/* line 191, /app/app/assets/stylesheets/reset.css */
ul.links:after,
div.admin-panel .body:after,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Exclude inline links from clearfix behavior */
/* line 202, /app/app/assets/stylesheets/reset.css */
ul.inline:after {
  content: "";
  display: none;
  clear: none;
}

/* IE6 */
/* line 208, /app/app/assets/stylesheets/reset.css */
* html .form-item,
* html ul.links,
* html div.admin-panel .body,
* html .clearfix {
  height: 1%;
}

/* IE7 */
/* line 215, /app/app/assets/stylesheets/reset.css */
*:first-child + html .form-item,
*:first-child + html ul.links,
*:first-child + html div.admin-panel .body,
*:first-child + html .clearfix {
  min-height: 1%;
}

/* stylelint-disable order/properties-alphabetical-order */
/* stylelint-enable */
@font-face {
  font-family: "kievit font";
  font-style: normal;
  font-weight: 800;
  src: url("https://d2znry4lg8s0tq.cloudfront.net/ff_kievit_web/KievitWeb-Light.woff") format("woff");
}
@font-face {
  font-family: "milo font";
  font-style: normal;
  font-weight: 800;
  src: url("https://d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.woff") format("woff");
}
@font-face {
  font-family: "nyplicons";
  src: url(/assets/icomoon-2d8fc55d21a092d8a5e52e557db7e6d7d7ca61fce895d3dbb7ebf135c37a6942.eot);
  src: url(/assets/icomoon-2d8fc55d21a092d8a5e52e557db7e6d7d7ca61fce895d3dbb7ebf135c37a6942.eot?#iefix) format("embedded-opentype"), url(/assets/icomoon-3080a4bbcba4393719738ee6c30c435cc6847a6f7318ae2d5632a8fd127b251c.svg#icomoon) format("svg"), url(/assets/icomoon-4860d2aef68d5e26bbd12f1b3769e18ed72e256e945da11699901ebd5e9a6a4e.woff) format("woff"), url(/assets/icomoon-6e42c4ba4288fa2214aa713648d7749509e6aaba11a174532429f32b414a800e.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* -------------------------------------------------------------
  Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library
  By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets

  List of CSS3 Sass Mixins File to be @imported and @included as you need

  The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER
  ENDING css files

  note: All CSS3 Properties are being supported by Safari 5
  more info: http://www.findmebyip.com/litmus/#css3-properties

  Mixins available:
    -   background-gradient     - arguments: Start Color: #3C3C3C, End Color: #999999
    -   background-size         - arguments: Width: 100%, Height: 100%
    -   border-radius           - arguments: Radius: 5px
    -   border-radius-separate  - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px
    -   box                     - arguments: Orientation: horizontal, Pack: center, Align: center
    -   box-rgba                - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C
    -   box-shadow              - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
    -   box-sizing              - arguments: Type: border-box
    -   columns                 - arguments: Count: 3, Gap: 10
    -   double-borders          - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0
    -   flex                    - arguments: Value: 1
    -   flip                    - arguments: ScaleX: -1
    -   font-face               - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf
    -   opacity                 - arguments: Opacity: 0.5
    -   outline radius          - arguments: Radius: 5px
    -   resize                  - arguments: Direction: both
    -   rotate                  - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0
    CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
    -   text-shadow             - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
    -   transform               - arguments: Parameters: null
    -   transition              - arguments: What: all, Length: 1s, Easing: ease-in-out
    -   triple-borders          - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0

------------------------------------------------------------- */
/* BACKGROUND GRADIENT */
/* BACKGROUND SIZE */
/* BORDER RADIUS */
/* BOX */
/* BOX RGBA */
/* BOX SHADOW */
/* BOX SHADOW INSET */
/* BOX SIZING */
/* COLUMNS */
/* DOUBLE BORDERS */
/* FLEX */
/* FLIP */
/* FONT FACE */
/* OPACITY */
/* OUTLINE RADIUS */
/* RESIZE */
/* ROTATE*/
/* TEXT SHADOW */
/* TRANSFORM  */
/* TRANSITION */
/* TRIPLE BORDERS */
@font-face {
  font-family: "kievit font";
  font-style: normal;
  font-weight: 800;
  src: url("https://d2znry4lg8s0tq.cloudfront.net/ff_kievit_web/KievitWeb-Light.woff") format("woff");
}
@font-face {
  font-family: "milo font";
  font-style: normal;
  font-weight: 800;
  src: url("https://d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.woff") format("woff");
}
@keyframes starwars {
  0% {
    background-position: 50% 300%;
  }
  100% {
    background-position: 50% 0%;
  }
}
/* line 16, /app/app/assets/stylesheets/styles.scss */
html, body {
  margin: 0 0 100px;
  padding: 0;
  font-family: "kievit font", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.75em;
  background: #efefef;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 16, /app/app/assets/stylesheets/styles.scss */
  html, body {
    font-size: 24px;
  }
}

/* line 28, /app/app/assets/stylesheets/styles.scss */
a:link {
  color: #900;
  text-decoration: none;
}

/* line 33, /app/app/assets/stylesheets/styles.scss */
a:visited {
  color: #660000;
}

/* line 37, /app/app/assets/stylesheets/styles.scss */
h3 {
  font-family: "milo font", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* line 41, /app/app/assets/stylesheets/styles.scss */
p {
  margin: 0 10px 1em;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 41, /app/app/assets/stylesheets/styles.scss */
  p {
    margin: 0 2em 1em;
  }
}

/* normal site stuff */
/* line 50, /app/app/assets/stylesheets/styles.scss */
#hero {
  background: #000 url(/assets/hero-full-474e05041b17fb0975de3b1da500213abaebbaf3d27b8e97e0f603c94190db21.png) no-repeat 50% 300%;
  height: 300px;
  display: flex;
  align-items: flex-end;
  animation: starwars 3s .2s forwards;
}
/* line 58, /app/app/assets/stylesheets/styles.scss */
#hero h1 {
  margin-bottom: .7em;
  color: #efefef;
  font-size: 2.5em;
  text-shadow: -2px 2px 0px #222;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 58, /app/app/assets/stylesheets/styles.scss */
  #hero h1 {
    width: auto;
    font-size: 1.8em;
    margin-left: 10px;
  }
}

/* line 75, /app/app/assets/stylesheets/styles.scss */
.enter-link {
  display: block;
  font-size: 1.7em;
  padding: 16px 18px 12px;
  margin: 0 auto;
  width: 200px;
  text-align: center;
  border-radius: 60px;
  text-transform: uppercase;
  clear: both;
  transition: all .1s;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 75, /app/app/assets/stylesheets/styles.scss */
  .enter-link {
    width: 300px;
  }
}
/* line 93, /app/app/assets/stylesheets/styles.scss */
.enter-link:link, .enter-link:visited {
  background-color: #900;
  color: #efefef;
}
/* line 98, /app/app/assets/stylesheets/styles.scss */
.enter-link:hover {
  background-color: #222;
  transform: scale(1.2);
}

/* line 105, /app/app/assets/stylesheets/styles.scss */
.wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
/* line 26, /usr/local/bundle/gems/neat-4.0.0/core/neat/mixins/_grid-container.scss */
.wrapper::after {
  clear: both;
  content: "";
  display: block;
}
/* line 108, /app/app/assets/stylesheets/styles.scss */
.wrapper h2 {
  font-size: 2em;
  margin-top: 1em;
  margin-bottom: 1em;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 108, /app/app/assets/stylesheets/styles.scss */
  .wrapper h2 {
    font-size: 1.6em;
    margin-bottom: 0.5em;
  }
}
/* line 121, /app/app/assets/stylesheets/styles.scss */
.wrapper p a {
  border-bottom: 3px solid #efefef;
}
/* line 124, /app/app/assets/stylesheets/styles.scss */
.wrapper p a:hover {
  border-color: #900;
}

/* line 136, /app/app/assets/stylesheets/styles.scss */
#intro p, #samples p, #how-to p, #faq p, #background p {
  max-width: 80ch;
}
/* line 141, /app/app/assets/stylesheets/styles.scss */
#intro p.intro, #samples p.intro, #how-to p.intro, #faq p.intro, #background p.intro {
  font-size: 1.2em;
  line-height: 1.75em;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
}
/* line 150, /app/app/assets/stylesheets/styles.scss */
#intro p.more, #samples p.more, #how-to p.more, #faq p.more, #background p.more {
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 130, /app/app/assets/stylesheets/styles.scss */
  #intro, #samples, #how-to, #faq, #background {
    font-size: 0.8em;
    line-height: 1.5em;
  }
}

/* line 162, /app/app/assets/stylesheets/styles.scss */
#samples .cases {
  display: grid;
  margin: 0 auto;
  width: 90%;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
}
/* line 171, /app/app/assets/stylesheets/styles.scss */
#samples .cases .use-case {
  margin-bottom: 3em;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 171, /app/app/assets/stylesheets/styles.scss */
  #samples .cases .use-case {
    font-size: 0.8em;
    line-height: 1.5em;
  }
}
/* line 182, /app/app/assets/stylesheets/styles.scss */
#samples .cases .use-case img {
  width: 100%;
  border-top: 2px solid white;
}
/* line 187, /app/app/assets/stylesheets/styles.scss */
#samples .cases .use-case a.sample-link {
  display: block;
  font-size: 1.5em;
  padding: 16px 18px 12px;
  margin: 0 auto;
  width: 140px;
  text-align: center;
  border-radius: 60px;
  text-transform: uppercase;
  clear: both;
  transition: all .1s;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 187, /app/app/assets/stylesheets/styles.scss */
  #samples .cases .use-case a.sample-link {
    width: 240px;
  }
}
/* line 205, /app/app/assets/stylesheets/styles.scss */
#samples .cases .use-case a.sample-link:link, #samples .cases .use-case a.sample-link:visited {
  background-color: #900;
  color: #efefef;
}
/* line 210, /app/app/assets/stylesheets/styles.scss */
#samples .cases .use-case a.sample-link:hover {
  background-color: #222;
  transform: scale(1.2);
}

/* line 232, /app/app/assets/stylesheets/styles.scss */
#faq ul:last-of-type {
  margin-bottom: 1em;
}
/* line 237, /app/app/assets/stylesheets/styles.scss */
#faq ul:last-of-type li {
  list-style: none;
}

/* line 243, /app/app/assets/stylesheets/styles.scss */
.faq-contents {
  margin: 1rem 5rem;
}

/* line 248, /app/app/assets/stylesheets/styles.scss */
#background .figure {
  margin-bottom: 1em;
}
/* line 253, /app/app/assets/stylesheets/styles.scss */
#background img {
  margin-left: 20rem;
  width: 60%;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 253, /app/app/assets/stylesheets/styles.scss */
  #background img {
    margin-left: auto;
    width: 100%;
  }
}
/* line 264, /app/app/assets/stylesheets/styles.scss */
#background .caption {
  position: absolute;
  width: 19rem;
  font-family: "milo font", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: right;
  font-size: .8em;
  line-height: 1.2em;
  border-top: 1px solid white;
  padding-top: 1em;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 264, /app/app/assets/stylesheets/styles.scss */
  #background .caption {
    position: relative;
    margin-bottom: 1rem;
    width: auto;
    padding-right: 1rem;
  }
}
/* line 289, /app/app/assets/stylesheets/styles.scss */
#background blockquote {
  font-family: "milo font", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2em;
  line-height: 1.25em;
  margin-bottom: 1em;
}
/* line 297, /app/app/assets/stylesheets/styles.scss */
#background blockquote:before {
  content: "“";
  font-size: 2em;
  color: #efefef;
  width: .5em;
  display: inline-block;
  margin-left: -.5em;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 289, /app/app/assets/stylesheets/styles.scss */
  #background blockquote {
    font-size: 1em;
  }
}

/* line 317, /app/app/assets/stylesheets/styles.scss */
.main-nav {
  display: flex;
}
/* line 321, /app/app/assets/stylesheets/styles.scss */
.main-nav li {
  border-radius: 0 0 6px 6px;
  text-align: center;
  width: 10rem;
  margin-left: 0.5rem;
}
/* line 340, /app/app/assets/stylesheets/styles.scss */
.main-nav li.samples {
  background-color: #8fcf8d;
  margin-left: auto;
}
/* line 345, /app/app/assets/stylesheets/styles.scss */
.main-nav li.faq {
  background-color: #7aadd8;
}
/* line 349, /app/app/assets/stylesheets/styles.scss */
.main-nav li.background {
  background-color: #ffb368;
  margin-right: auto;
}
/* line 354, /app/app/assets/stylesheets/styles.scss */
.main-nav li a {
  color: #222;
  display: block;
  padding: 8px 12px 4px;
  text-transform: uppercase;
}

/* line 364, /app/app/assets/stylesheets/styles.scss */
.wrap-sample, .wrap-how, .wrap-faq, .wrap-background {
  margin: 1em 0 5em;
  padding: 0 0 2em;
}
/* line 369, /app/app/assets/stylesheets/styles.scss */
.wrap-sample {
  background-color: #8fcf8d;
}
/* line 373, /app/app/assets/stylesheets/styles.scss */
.wrap-how {
  background-color: #7aadd8;
}
/* line 377, /app/app/assets/stylesheets/styles.scss */
.wrap-faq {
  background-color: #7aadd8;
}
/* line 381, /app/app/assets/stylesheets/styles.scss */
.wrap-background {
  background-color: #ffb368;
}

/* line 386, /app/app/assets/stylesheets/styles.scss */
header {
  background-color: #222;
  height: 50px;
  color: #a2a2a2;
  padding: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top: 2px solid #ed1c24;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 386, /app/app/assets/stylesheets/styles.scss */
  header {
    font-size: 12px;
  }
}
/* line 400, /app/app/assets/stylesheets/styles.scss */
header a:link, header a:visited, header a:hover {
  color: #efefef;
}

/* line 405, /app/app/assets/stylesheets/styles.scss */
#nypl {
  content: attr(data-icon);
  content: "";
  font-family: "nyplicons";
  display: inline-block;
  width: auto;
  height: auto;
  vertical-align: baseline;
  background: none;
  margin-top: 0;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-transform: none;
  line-height: 1;
  font-weight: normal;
  font-variant: normal;
  font-size: 30px;
  color: #efefef;
  margin-right: 10px;
}

/* line 412, /app/app/assets/stylesheets/styles.scss */
#footer {
  margin: 20em 0 0 0;
  text-align: center;
  font-size: 0.8em;
  line-height: 1.4em;
  color: #a2a2a2;
}
@media screen and (max-width: 800px) {
  /* line 428, /app/app/assets/stylesheets/styles.scss */
  #footer p {
    width: auto;
  }
}
/* line 434, /app/app/assets/stylesheets/styles.scss */
#footer .nypl {
  color: #222;
  display: block;
  margin: 0 auto;
  width: 200px;
}
/* line 441, /app/app/assets/stylesheets/styles.scss */
#footer .icon-icon_lion {
  color: #222;
  display: block;
}
/* line 445, /app/app/assets/stylesheets/styles.scss */
#footer .icon-icon_lion:before {
  content: attr(data-icon);
  content: "N";
  font-family: "nyplicons";
  display: inline-block;
  width: auto;
  height: auto;
  vertical-align: baseline;
  background: none;
  margin-top: 0;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-transform: none;
  line-height: 1;
  font-weight: normal;
  font-variant: normal;
  display: block;
  font-size: 30px;
  margin-bottom: 5px;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 412, /app/app/assets/stylesheets/styles.scss */
  #footer {
    font-size: 0.5em;
  }
}

/* line 458, /app/app/assets/stylesheets/styles.scss */
#feedback {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 11111;
  background: white;
  width: 300px;
  right: -301px;
  font-size: 16px;
  border: 1px solid #eee;
  border-right: none;
  transition: all .2s ease-out;
}
@media print {
  /* line 458, /app/app/assets/stylesheets/styles.scss */
  #feedback {
    display: none;
  }
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 458, /app/app/assets/stylesheets/styles.scss */
  #feedback {
    border-color: #222;
    position: fixed;
    width: 100%;
    right: auto;
    bottom: -357px;
  }
}
/* line 483, /app/app/assets/stylesheets/styles.scss */
#feedback.preload {
  right: -500px;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 483, /app/app/assets/stylesheets/styles.scss */
  #feedback.preload {
    right: auto;
    bottom: -310px;
  }
}
/* line 494, /app/app/assets/stylesheets/styles.scss */
#feedback.open {
  right: 0;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 494, /app/app/assets/stylesheets/styles.scss */
  #feedback.open {
    right: auto;
    bottom: 0;
  }
}
/* line 503, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-toggle {
  position: absolute;
  right: 300px;
  bottom: 0px;
  background-color: #eee;
  color: #efefef;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 503, /app/app/assets/stylesheets/styles.scss */
  #feedback #feedback-toggle {
    position: static;
    width: 100%;
    text-align: center;
  }
}
/* line 517, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-toggle a {
  display: none;
  padding: 10px 30px;
}
/* line 522, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-toggle a.visible {
  display: block;
}
/* line 529, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-toggle a.close {
  white-space: nowrap;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 517, /app/app/assets/stylesheets/styles.scss */
  #feedback #feedback-toggle a {
    padding: 3px;
  }
}
/* line 546, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-form {
  margin: 10px;
}
/* line 552, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-form h2 {
  font-size: 20px;
  margin: 0;
}
/* line 557, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-form ul {
  margin-bottom: 5px;
}
/* line 560, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-form ul li {
  display: inline-block;
  margin-right: 10px;
}
/* line 566, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-form .button {
  padding: 0 20px;
  margin: 10px 20px;
  display: inline-block;
  background-color: #900;
  color: #efefef;
}
/* line 575, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-form input.textfield {
  font-size: 1em;
  font-family: "kievit font", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border: 1px solid #eee;
  padding: 10px;
  margin: 5px 0;
  width: 258px;
  display: inline-block;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 575, /app/app/assets/stylesheets/styles.scss */
  #feedback #feedback-form input.textfield {
    width: 100%;
  }
}
/* line 589, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-form textarea {
  font-size: 1em;
  resize: none;
  padding: 10px 10px 0 10px;
  width: 258px;
  height: 90px;
  border: 1px solid #eee;
  border-bottom: none;
  margin-bottom: 0;
  font-family: "kievit font", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 589, /app/app/assets/stylesheets/styles.scss */
  #feedback #feedback-form textarea {
    width: 100%;
  }
}
/* line 604, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-form textarea.error {
  color: #900;
}
/* line 609, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-form #feedback-counter {
  color: #a2a2a2;
  text-align: right;
  padding: 0 10px 10px 10px;
  width: 258px;
  border: 1px solid #eee;
  border-top: none;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 609, /app/app/assets/stylesheets/styles.scss */
  #feedback #feedback-form #feedback-counter {
    width: 100%;
    margin-top: -5px;
  }
}
/* line 623, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-form .controls {
  text-align: right;
}
/* line 628, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-wait {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.75);
  color: #efefef;
  text-align: center;
  line-height: 260px;
}
/* line 646, /app/app/assets/stylesheets/styles.scss */
#feedback #feedback-thanks {
  height: 100px;
  margin-top: 10px;
}
/* line 651, /app/app/assets/stylesheets/styles.scss */
#feedback .step2 {
  display: none;
}

/* line 658, /app/app/assets/stylesheets/styles.scss */
main {
  margin: 2rem;
}

/* line 662, /app/app/assets/stylesheets/styles.scss */
section {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 1rem;
  margin: 0 0 2rem 0;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 662, /app/app/assets/stylesheets/styles.scss */
  section {
    grid-template-columns: 1fr;
  }
}
/* line 672, /app/app/assets/stylesheets/styles.scss */
section p {
  max-width: 40rem;
}
/* line 676, /app/app/assets/stylesheets/styles.scss */
section figure {
  margin: 0;
  grid-column: 1 / 2;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 676, /app/app/assets/stylesheets/styles.scss */
  section figure {
    grid-column: 1;
  }
}
/* line 685, /app/app/assets/stylesheets/styles.scss */
section figcaption {
  font-size: 0.7rem;
  line-height: 1.5;
}
/* line 690, /app/app/assets/stylesheets/styles.scss */
section h3 {
  grid-column: 1 / 2;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 690, /app/app/assets/stylesheets/styles.scss */
  section h3 {
    grid-column: 1;
  }
}
/* line 698, /app/app/assets/stylesheets/styles.scss */
section .bio, section ul, section .locations {
  grid-column: 2 / 7;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 698, /app/app/assets/stylesheets/styles.scss */
  section .bio, section ul, section .locations {
    grid-column: 1;
  }
}

/* line 707, /app/app/assets/stylesheets/styles.scss */
.constituent-image {
  display: block;
  width: 100%;
  max-width: 20rem;
  filter: grayscale(1);
}

/* line 714, /app/app/assets/stylesheets/styles.scss */
.locations {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 714, /app/app/assets/stylesheets/styles.scss */
  .locations {
    grid-template-columns: 1fr;
  }
}
/* line 727, /app/app/assets/stylesheets/styles.scss */
.locations h4 {
  font-family: "milo font", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.25;
}
/* line 732, /app/app/assets/stylesheets/styles.scss */
.locations p {
  line-height: 1.25;
  grid-column: 1 / 7;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 732, /app/app/assets/stylesheets/styles.scss */
  .locations p {
    grid-column: 1;
  }
}
/* line 741, /app/app/assets/stylesheets/styles.scss */
.locations .map {
  background-color: #eee;
}
/* line 744, /app/app/assets/stylesheets/styles.scss */
.locations .map img {
  width: 100%;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 744, /app/app/assets/stylesheets/styles.scss */
  .locations .map img {
    max-width: 200px;
  }
}

/* line 754, /app/app/assets/stylesheets/styles.scss */
.pic_id {
  display: inline-block;
  width: 5rem;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 754, /app/app/assets/stylesheets/styles.scss */
  .pic_id {
    width: 4rem;
  }
}

/* line 763, /app/app/assets/stylesheets/styles.scss */
.constituent_list {
  grid-column: 1 / 7;
  margin: 2rem 0 0 0;
}

/* line 768, /app/app/assets/stylesheets/styles.scss */
.alpha_list {
  margin: 2rem 0 0 0;
}
/* line 771, /app/app/assets/stylesheets/styles.scss */
.alpha_list li {
  margin-bottom: 1rem;
}

/* line 776, /app/app/assets/stylesheets/styles.scss */
.pagination {
  display: flex;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  /* line 776, /app/app/assets/stylesheets/styles.scss */
  .pagination {
    display: block;
  }
  /* line 782, /app/app/assets/stylesheets/styles.scss */
  .pagination li {
    display: inline-block;
  }
}
/* line 787, /app/app/assets/stylesheets/styles.scss */
.pagination::before {
  content: 'Page: ';
  display: inline-block;
  margin: 0 0.5rem 0 0;
}
/* line 793, /app/app/assets/stylesheets/styles.scss */
.pagination.letter::before {
  content: 'Letter: ';
  display: inline-block;
  margin: 0 0.5rem 0 0;
}
/* line 800, /app/app/assets/stylesheets/styles.scss */
.pagination li::after {
  content: '|';
  display: inline-block;
  margin: 0 0.5rem;
}
/* line 806, /app/app/assets/stylesheets/styles.scss */
.pagination li:last-child::after {
  display: none;
}