/* ==========================================================================

   Util -> Variables

   ========================================================================== */
/* Variables -> Color
   ========================================================================== */
/* Variables -> Typography
   ========================================================================== */
/* Variables -> Breakpoints
   ========================================================= */
/* Variables -> Z-Index
   ========================================================= */
/* Variables -> Layout
   ========================================================================== */
/* Variables -> Easings
   ========================================================================== */
/*----------  Colors  ----------*/
/*----------  Spacing  ----------*/
/*----------  Animation  ----------*/
@media (max-width: 1079px) {
  .content {
    padding: 0;
  }
}

.align-r {
  text-align: right;
}

.align-c {
  text-align: center;
}

.fade-fast-leave-active, .fade-fast-enter-active {
  -webkit-transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.fade-leave-active, .fade-enter-active {
  -webkit-transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.fade-fast-enter-to,
.fade-enter-to {
  opacity: 1;
}

.fade-fast-enter, .fade-fast-leave-to,
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.fade-down-leave-active, .fade-down-enter-active,
.fade-up-leave-active, .fade-up-enter-active,
.fade-left-leave-active, .fade-left-enter-active {
  -webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.fade-left-enter-to,
.fade-down-enter-to,
.fade-up-enter-to {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.fade-left-enter, .fade-left-leave-to {
  opacity: 0;
  -webkit-transform: translate3d(-20px, 0, 0);
          transform: translate3d(-20px, 0, 0);
}

.fade-down-enter, .fade-down-leave-to {
  opacity: 0;
  -webkit-transform: translate3d(0, -20px, 0);
          transform: translate3d(0, -20px, 0);
}

.fade-up-enter, .fade-up-leave-to {
  opacity: 0;
  -webkit-transform: translate3d(0, 20px, 0);
          transform: translate3d(0, 20px, 0);
}

.slide-right-leave-active, .slide-right-enter-active,
.slide-left-leave-active, .slide-left-enter-active {
  -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.slide-right-enter-to,
.slide-left-enter-to {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.slide-left-enter, .slide-left-leave-to {
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}

.slide-right-enter, .slide-right-leave-to {
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}

.select-wrapper {
  position: relative;
  display: inline-block;
  background-color: #393745;
  font-family: "FoundersGroteskWeb-Medium", Helvetica, sans-serif;
  color: #21d279;
  min-width: 200px;
  border: none;
  /* remove arrow on IE*/
}

.select-wrapper select {
  height: 42px;
  font-size: 20px;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  cursor: pointer;
  line-height: 1.5;
  padding: 0 30px 3px 20px;
  border: none;
  color: inherit;
}

@media (min-width: 1200px) {
  .select-wrapper select {
    font-size: 24px;
    padding: 0 20px 3px 20px;
  }
}

.select-wrapper select option {
  color: black;
  font-size: 15px;
}

.select-wrapper select:moz-focus-inner {
  display: none;
  padding: 0;
}

.select-wrapper select::-ms-expand {
  display: none;
}

.label {
  display: block;
  font-size: 16px;
  font-family: "FoundersGroteskWeb-Regular", Helvetica, sans-serif;
  margin-bottom: 5px;
}

@media (min-width: 1200px) {
  .label {
    font-size: 18px;
  }
}

.form-grid {
  margin-left: -20px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin-bottom: -20px;
}

.form-grid__item {
  padding-left: 20px;
  width: 100%;
  margin-bottom: 20px;
}

.form-field {
  position: relative;
  display: block;
  border-bottom: 2px solid;
}

.form-field .form-field__input,
.form-field .form-field__label {
  background: transparent;
  padding-left: 0;
}

.form-field .form-field__input {
  margin: 0;
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.form-field .form-field__label {
  font-size: 0;
  position: absolute;
  left: 0;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.form-field .form-field__error {
  position: absolute;
  top: 100%;
  font-size: 12px;
  margin-top: 4px;
}

.form-required-message,
.form-field__error {
  font-weight: normal;
  font-size: 16px;
  margin-top: 6px;
  color: inherit;
  white-space: nowrap;
}

.form-field .form-field__input,
.form-submit button {
  padding: 15px 0 5px;
}

.form-submit.form-submit {
  position: relative;
}

.form-submit.form-submit button {
  color: #21d279;
  display: inline-block;
  width: auto;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  text-transform: uppercase;
  letter-spacing: .1em;
  -webkit-box-shadow: inset 0 -3px currentColor;
          box-shadow: inset 0 -3px currentColor;
  border-radius: 0;
  -webkit-transition: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

.form-submit.form-submit button:hover, .form-submit.form-submit button:focus {
  -webkit-box-shadow: inset 0 -6px currentColor;
          box-shadow: inset 0 -6px currentColor;
  background: transparent;
}

.modal .form-submit.form-submit button {
  color: #393745;
}

/* EveryAction Form */
#signup-footer .ngp-form {
  max-width: none !important;
}

#signup-footer .ngp-form .at-form .at-fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#signup-footer .ngp-form form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#signup-footer .ngp-form form .at-fieldset {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  min-width: 0 !important;
}

#signup-footer .ngp-form form .at-form-submit {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

.at-form .at-fieldset {
  padding: 0.625rem 0;
}

.at-form .at-inner {
  background-color: transparent !important;
}

.at-form .at-legend {
  display: none;
}

.at-form .at-submit {
  float: none !important;
  width: auto !important;
}

.at-form .at-form-submit {
  text-align: center !important;
}

.at-form .at-fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.at-form .at-title {
  display: none;
}

.at-form .at label {
  color: #393745 !important;
}

.at-form .at-text {
  color: #393745;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-color: #fff;
}

.at-form .at-form-submit .btn-at-primary {
  color: #21d279;
  display: inline-block;
  width: auto;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: .1em;
  -webkit-box-shadow: inset 0 -3px currentColor;
          box-shadow: inset 0 -3px currentColor;
  border-radius: 0;
  -webkit-transition: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);
  padding: 6px 0;
  margin-bottom: 0;
  margin-top: 0;
  font-size: 21px !important;
  font-family: FoundersGroteskWeb-Medium,Helvetica,Arial sans-serif;
}

.at-form .at-form-submit .btn-at-primary:hover {
  -webkit-box-shadow: inset 0 -6px currentColor;
          box-shadow: inset 0 -6px currentColor;
  background-color: transparent;
  color: #21d279;
}

.at-form .at-text input {
  background: transparent !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 2px solid #fff !important;
  color: #fff !important;
  font-family: "FoundersGroteskWeb-Medium", Helvetica, sans-serif !important;
  padding: 15px 0 5px;
  font-size: 21px !important;
  border-radius: 0 !important;
}

.at-form .at-text input:focus {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.at-form .at-text input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #fff !important;
  letter-spacing: .1em;
  opacity: .54 !important;
}

.at-form .at-text input::-ms-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #fff !important;
  letter-spacing: .1em;
  opacity: .54 !important;
}

.at-form .at-text input::placeholder {
  /* Chrome/Opera/Safari */
  color: #fff !important;
  letter-spacing: .1em;
  opacity: .54 !important;
}

.at-form .content {
  color: #fff;
  background-color: transparent !important;
}

.at-row .error {
  color: #fff !important;
}

.modal .FirstName.LastName {
  width: 100%;
}

.modal .FirstName.LastName > label {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 48%;
          flex: 0 0 48%;
  margin: 0 !important;
}

.modal .at-fields {
  -webkit-box-pack: justify !important;
      -ms-flex-pack: justify !important;
          justify-content: space-between !important;
}

@media only screen and (min-width: 1288px) {
  .ngp-form form {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
  }
  .ngp-form .at-form .at-fields {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
  }
}

.button-plain {
  font-family: "FoundersGroteskWeb-Medium", Helvetica, sans-serif;
  border: 0;
  border-radius: 0;
  padding: 0;
  background-color: transparent;
  color: inherit;
  font-size: inherit;
  -webkit-appearance: none;
  cursor: pointer;
  -webkit-transition: color 0.45s cubic-bezier(0.19, 1, 0.22, 1);
  transition: color 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

.button-plain:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.button-plain--primary:hover, .button-plain--primary:focus {
  color: #21d279;
}

.button-ghost {
  color: currentColor;
  display: inline-block;
  width: auto;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  text-transform: uppercase;
  letter-spacing: .1em;
  -webkit-box-shadow: inset 0 -3px currentColor;
          box-shadow: inset 0 -3px currentColor;
  border-radius: 0;
  -webkit-transition: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);
  padding: 0 0 .4em;
}

.button-ghost:hover, .button-ghost:focus {
  -webkit-box-shadow: inset 0 -6px currentColor;
          box-shadow: inset 0 -6px currentColor;
  background: transparent;
}

.button-expand {
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  font-size: 21px;
  cursor: pointer;
}

.button-ctrl {
  outline: none;
  font-family: "Lyon Display Web", Georgia, serif;
  font-size: 32px;
  color: white;
  background: #393745;
  width: 32px;
  height: 32px;
  line-height: 30px;
  padding: 0;
  border: none;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-radius: 100%;
}

@media (min-width: 500px) {
  .button-ctrl {
    width: 42px;
    height: 42px;
    font-size: 40px;
    line-height: 40px;
  }
}

.c-grey {
  color: #707070;
}

.c-white {
  color: white;
}

.mha, .mxa, .mla {
  margin-left: auto;
}

.mha, .mxa {
  margin-right: auto;
}

.mva, .mxa {
  margin-top: auto;
}

.mva, .mxa {
  margin-bottom: auto;
}

.mt0, .mv0, .mx0 {
  margin-top: 0;
}

.mb0, .mv0, .mx0 {
  margin-bottom: 0;
}

.ml0 {
  margin-left: 0;
}

.mr0 {
  margin-right: 0;
}

.pt0, .pv0, .px0 {
  padding-top: 0;
}

.pb0, .pv0, .px0 {
  padding-bottom: 0;
}

.pr0, .ph0, .px0 {
  padding-right: 0;
}

.pl0, .ph0, .px0 {
  padding-left: 0;
}

.mt025, .mv025, .mx025 {
  margin-top: 5px;
}

.mb025, .mv025, .mx025 {
  margin-bottom: 5px;
}

.ml025, .mh025, .mx025 {
  margin-left: 5px;
}

.mr025, .mh025, .mx025 {
  margin-right: 5px;
}

.pt025, .pv025, .px025 {
  padding-top: 5px;
}

.pb025, .pv025, .px025 {
  padding-bottom: 5px;
}

.pl025, .ph025, .px025 {
  padding-left: 5px;
}

.pr025, .ph025, .px025 {
  padding-right: 5px;
}

.mt05, .mv05, .mx05 {
  margin-top: 10px;
}

.mb05, .mv05, .mx05 {
  margin-bottom: 10px;
}

.ml05, .mh05, .mx05 {
  margin-left: 10px;
}

.mr05, .mh05, .mx05 {
  margin-right: 10px;
}

.pt05, .pv05, .px05 {
  padding-top: 10px;
}

.pb05, .pv05, .px05 {
  padding-bottom: 10px;
}

.pl05, .ph05, .px05 {
  padding-left: 10px;
}

.pr05, .ph05, .px05 {
  padding-right: 10px;
}

.mt075, .mv075, .mx075 {
  margin-top: 15px;
}

.mb075, .mv075, .mx075 {
  margin-bottom: 15px;
}

.ml075, .mh075, .mx075 {
  margin-left: 15px;
}

.mr075, .mh075, .mx075 {
  margin-right: 15px;
}

.pt075, .pv075, .px075 {
  padding-top: 15px;
}

.pb075, .pv075, .px075 {
  padding-bottom: 15px;
}

.pl075, .ph075, .px075 {
  padding-left: 15px;
}

.pr075, .ph075, .px075 {
  padding-right: 15px;
}

.mt1, .mv1, .mx1 {
  margin-top: 20px;
}

.mb1, .mv1, .mx1 {
  margin-bottom: 20px;
}

.ml1, .mh1, .mx1 {
  margin-left: 20px;
}

.mr1, .mh1, .mx1 {
  margin-right: 20px;
}

.mbn1 {
  margin-bottom: -20px;
}

.mln1 {
  margin-left: -20px;
}

.mrn1 {
  margin-right: -20px;
}

.mhn1 {
  margin-left: -20px;
  margin-right: -20px;
}

.pt1, .pv1, .px1 {
  padding-top: 20px;
}

.pb1, .pv1, .px1 {
  padding-bottom: 20px;
}

.pl1, .ph1, .px1 {
  padding-left: 20px;
}

.pr1, .ph1, .px1 {
  padding-right: 20px;
}

.mt15, .mv15, .mx15 {
  margin-top: 30px;
}

.mb15, .mv15, .mx15 {
  margin-bottom: 30px;
}

.ml15, .mh15, .mx15 {
  margin-left: 30px;
}

.mr15, .mh15, .mx15 {
  margin-right: 30px;
}

.mln15 {
  margin-left: -30px;
}

.mrn15 {
  margin-right: -30px;
}

.mhn15 {
  margin-left: -30px;
  margin-right: -30px;
}

.pt15, .pv15, .px15 {
  padding-top: 30px;
}

.pb15, .pv15, .px15 {
  padding-bottom: 30px;
}

.pl15, .ph15, .px15 {
  padding-left: 30px;
}

.pr15, .ph15, .px15 {
  padding-right: 30px;
}

.mt2, .mv2, .mx2 {
  margin-top: 40px;
}

.mb2, .mv2, .mx2 {
  margin-bottom: 40px;
}

.ml2, .mh2, .mx2 {
  margin-left: 40px;
}

.mr2, .mh2, .mx2 {
  margin-right: 40px;
}

.mln2 {
  margin-left: -40px;
}

.mrn2 {
  margin-right: -40px;
}

.mhn2 {
  margin-left: -40px;
  margin-right: -40px;
}

.pt2, .pv2, .px2 {
  padding-top: 40px;
}

.pb2, .pv2, .px2 {
  padding-bottom: 40px;
}

.pl2, .ph2, .px2 {
  padding-left: 40px;
}

.pr2, .ph2, .px2 {
  padding-right: 40px;
}

.mt3, .mv3, .mx3 {
  margin-top: 60px;
}

.mb3, .mv3, .mx3 {
  margin-bottom: 60px;
}

.ml3, .mh3, .mx3 {
  margin-left: 60px;
}

.mr3, .mh3, .mx3 {
  margin-right: 60px;
}

@media (--s) {
  .mb0--s {
    margin-bottom: 0;
  }
}

@media (--s) {
  .mb2--s {
    margin-bottom: 40px;
  }
}

@media (--m) {
  .mb2--m {
    margin-bottom: 40px;
  }
}

@media (--l) {
  .mb15--l {
    margin-bottom: 30px;
  }
}

@media (--l) {
  .mb2--l {
    margin-bottom: 40px;
  }
}

@media (--l) {
  .mb3--l {
    margin-bottom: 60px;
  }
}

.sans-regular, .p__text {
  font-family: "FoundersGroteskWeb-Regular", Helvetica, sans-serif;
}

.sans-medium, .form-field .form-field__input,
.form-field .form-field__label, .form-required-message,
.form-field__error {
  font-family: "FoundersGroteskWeb-Medium", Helvetica, sans-serif;
  font-weight: normal;
}

.serif-regular {
  font-family: "Lyon Display Web", Georgia, serif;
  font-weight: normal;
}

.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline:after {
  position: absolute;
  width: 100%;
  bottom: 0;
  content: '';
  display: block;
  border-bottom: 1px solid currentColor;
}

.link-white {
  color: white;
}

.link-white:hover, .link-white:focus {
  color: #21d279;
}

.overflow-hidden {
  overflow: hidden;
}

.bg-cover {
  background-size: cover;
  background-position: center center;
}

.text-white {
  color: white;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.triangle-section {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background-color: white;
}

.triangle-wrapper {
  position: relative;
}

.triangle-section__content .nav,
.triangle-section__content .grid,
.triangle-section__content .mt1 {
  position: relative;
  z-index: 3;
}

.module--flat {
  padding-bottom: 0 !important;
}

.p__text {
  font-size: 16px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .p__text {
    font-size: 21px;
  }
}

.header__text {
  font-size: 36px;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 30px;
}

@media (min-width: 500px) {
  .header__text {
    font-size: 72px;
  }
}

.header__text.header__text--h3 {
  font-size: 22px;
  margin-bottom: 20px;
}

@media (min-width: 500px) {
  .header__text.header__text--h3 {
    font-size: 38px;
  }
}

@media (min-width: 768px) {
  .text-max-width {
    width: 66.66666667%;
  }
}

[v-cloak] {
  visibility: hidden;
}

[v-cloak][hide] {
  display: none;
}

.header__logo--print {
  display: none;
  width: 130px;
  top: 20px;
  position: absolute;
}

@media print {
  .header__logo--print {
    display: block;
  }
}

.index-main-print {
  display: none;
}

@media print {
  #interactive-index header,
  .hide-print,
  .header__logo,
  .index-main-screen,
  .expand-icon,
  .cities-index-hero__header svg,
  .cities-index-hero__arrow,
  .cities-index-hero__triangle,
  .cities-index-hero a,
  .card-hover a,
  .flickity-page-dots,
  #signup-footer,
  .story-content a,
  .cities-index-hero__scores,
  .cities-index-about-block__container a,
  .cities-index-about-block__shape-style-2-1,
  .cities-index-about-block__shape-style-3-1,
  .cities-index-about-block__shape-style-3-2,
  .sticky-root,
  .card-media {
    display: none !important;
  }
  .main-menu {
    border-bottom: 2px solid black !important;
  }
  .naeicon-search.search {
    opacity: 1 !important;
  }
  .header__mobile-menu--trigger-open,
  .cities-index-hero__body,
  #interactive-index .wrapper,
  .city-accordion-row,
  .card-content,
  #success-stories .modal-content,
  .c-white,
  .cities-index-about-block__container,
  .card-values > * {
    background: transparent !important;
    color: black !important;
  }
  .cities-index-hero__body,
  .cities-index-hero__description {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    font-size: 16px !important;
  }
  .index-main-print {
    display: block !important;
  }
  .grid {
    display: block !important;
  }
  .grid-item {
    display: inline-block !important;
    width: 32% !important;
  }
  .city-accordion-legend,
  .card-title {
    display: inline !important;
    page-break-inside: avoid !important;
  }
  .card-score,
  .card-hover,
  .card-values {
    opacity: 1 !important;
    -webkit-transform: none !important;
            transform: none !important;
    display: block !important;
  }
  .card-score .score {
    font-size: 30px !important;
  }
  .card-values > * {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
            justify-content: space-between !important;
  }
  .card-main {
    width: 100%;
    -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
  }
  .card-main h3 {
    margin-bottom: 5px !important;
  }
  .card-main .description,
  .card-values > * {
    font-size: 14px !important;
  }
  .card-wrapper {
    padding: 0 !important;
    page-break-inside: avoid !important;
    min-height: 0 !important;
  }
  .card-content {
    text-align: left !important;
  }
  .h3__serif,
  .h4__sans {
    display: block !important;
  }
  .flickity-viewport {
    height: auto !important;
  }
  .story-image {
    width: 100px !important;
    float: left;
  }
  .story-content {
    overflow: hidden;
  }
  .story,
  .flickity-slider {
    position: relative !important;
    left: 0% !important;
    top: 0 !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
  }
  .story {
    display: none !important;
    padding: 15mm 0 10mm !important;
  }
  .story.is-selected {
    display: block !important;
  }
}

@media (max-width: 1079px) {
  .pnae-cities-index-body .header {
    padding: 20px;
  }
}

@media (max-width: 1079px) {
  .pnae-cities-index-body .header__nav-list {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }
  .pnae-cities-index-body .header__nav-list ul {
    padding-left: 0;
  }
}

@media (max-width: 1079px) {
  .pnae-cities-index-body .header__nav-list-item {
    padding-left: 20px;
    padding-right: 20px;
  }
  .pnae-cities-index-body .header__nav-list-item .header__nav-link {
    font-size: 30px;
    line-height: 1.1;
  }
}

.pnae-cities-index-body .header__mobile-menu--footer {
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 1079px) {
  .pnae-cities-index-body .header__nav-top {
    margin: 0;
  }
}

.pnae-cities-index-body .header__nav-lower {
  display: none;
}

@media (max-width: 1079px) {
  .pnae-cities-index-body .header__nav-lower {
    display: block;
    background-color: #393745;
    margin: 0;
    padding-top: 44px;
  }
}

.pnae-cities-index-body .header__nav-lower .header__nav-link,
.pnae-cities-index-body .header__nav-lower .header__nav-link--active {
  color: white;
}

.pnae-cities-index-body .header__nav-lower .header__nav-link:hover,
.pnae-cities-index-body .header__nav-lower .header__nav-link--active:hover {
  color: #21d279;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(95%, transparent), color-stop(0%, #21d279));
  background-image: linear-gradient(transparent 95%, #21d279 0%);
}

.pnae-cities-index-body .header__nav-lower .header__nav-link.active,
.pnae-cities-index-body .header__nav-lower .header__nav-link--active.active {
  color: #21d279;
}

.pnae-cities-index-body .header__mobile-menu--trigger-close.icon-close, .pnae-cities-index-body .header__mobile-menu--trigger-close.icon-close:hover {
  border: none;
  top: 20px;
  right: 20px;
  height: 24px;
  width: 24px;
}

.pnae-cities-index-body .header__mobile-menu--trigger-close.icon-close:after, .pnae-cities-index-body .header__mobile-menu--trigger-close.icon-close:hover:after {
  top: 0;
}

.pnae-cities-index-body {
  /* Position is set to relative so that the
  email popup form is aligned with the button */
}

.pnae-cities-index-body .sub-nav {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: flex;
      -ms-flex-pack: flex;
          justify-content: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
}

.pnae-cities-index-body .sub-nav .sub-nav__list {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  -webkit-box-flex: 4;
      -ms-flex: 4;
          flex: 4;
  width: auto;
}

.pnae-cities-index-body .sub-nav .sub-nav__share-list {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: auto;
  order: 2;
  padding-top: 30px;
  padding-bottom: 15px;
}

.pnae-cities-index-body .nav__share-list-item {
  position: relative;
}

.pnae-cities-index-body .nav__share-link--twitter {
  background-image: url(../src/assets/share-icon--twitter.svg), none;
}

.pnae-cities-index-body .nav__share-link--twitter:hover {
  background-image: url(../src/assets/share-icon--twitter-hover-white.svg), none;
}

.pnae-cities-index-body .nav__share-link--facebook {
  background-image: url(../src/assets/share-icon--facebook.svg), none;
  margin-left: 7px;
}

.pnae-cities-index-body .nav__share-link--facebook:hover {
  background-image: url(../src/assets/share-icon--facebook-hover-white.svg), none;
}

.pnae-cities-index-body .nav__share-link--print {
  width: 18px;
  height: 18px;
  margin-left: 7px;
  background-image: url(../src/assets/share-icon--print.svg), none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.pnae-cities-index-body .nav__share-link--print:hover {
  background-image: url(../src/assets/share-icon--print-hover-white.svg), none;
}

.pnae-cities-index-body .nav__share-list-item .article-toolbar__share-link--email {
  background-image: url(../src/assets/share-icon--email.svg), none;
  margin-left: 7px;
}

.pnae-cities-index-body .nav__share-list-item .article-toolbar__share-link--email:hover {
  background-image: url(../src/assets/share-icon--email-hover-white.svg), none;
}

.module--sub-nav {
  display: none;
}

@media (min-width: 1080px) {
  .module--sub-nav {
    display: block;
  }
}

.main-menu {
  position: relative;
  z-index: 2;
}

.pnae-cities-index-body {
  /*
    Moves the padding from link to menu item so that hover
    underline is consistent with main nav
  */
}

@media (min-width: 1080px) {
  .pnae-cities-index-body .header {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.pnae-cities-index-body .header__mobile-menu--trigger-open {
  color: white;
}

.pnae-cities-index-body .sub-nav {
  border-top: 2px solid white;
}

.pnae-cities-index-body .sub-nav__list {
  border-top: none;
}

.pnae-cities-index-body .header__link {
  -webkit-transition: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

.pnae-cities-index-body .showSearch + .header__link {
  opacity: 0;
  -webkit-transform: translate3d(-10px, 0, 0);
          transform: translate3d(-10px, 0, 0);
}

.pnae-cities-index-body .header__nav-list-item {
  border-top: 0;
}

.pnae-cities-index-body .header__nav-list-item:nth-child(4) {
  border-color: transparent;
}

.pnae-cities-index-body .header__nav {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.pnae-cities-index-body .header__nav-link,
.pnae-cities-index-body .sub-nav__link,
.pnae-cities-index-body .sub-nav__link--active {
  text-decoration: none;
}

@media (min-width: 1080px) {
  .pnae-cities-index-body .header__nav-link,
  .pnae-cities-index-body .sub-nav__link,
  .pnae-cities-index-body .sub-nav__link--active {
    color: white;
  }
}

@media (min-width: 1080px) {
  .pnae-cities-index-body .header__nav-link.header__nav-link--active, .pnae-cities-index-body .header__nav-link.current-menu-item, .pnae-cities-index-body .header__nav-link.active,
  .pnae-cities-index-body .sub-nav__link.header__nav-link--active,
  .pnae-cities-index-body .sub-nav__link.current-menu-item,
  .pnae-cities-index-body .sub-nav__link.active,
  .pnae-cities-index-body .sub-nav__link--active.header__nav-link--active,
  .pnae-cities-index-body .sub-nav__link--active.current-menu-item,
  .pnae-cities-index-body .sub-nav__link--active.active {
    color: #21d279;
    opacity: 1;
    color: #21d279 !important;
  }
}

@media (min-width: 1080px) {
  .pnae-cities-index-body .header__nav-link:hover,
  .pnae-cities-index-body .sub-nav__link:hover,
  .pnae-cities-index-body .sub-nav__link--active:hover {
    color: #21d279;
    opacity: 1;
    color: #21d279 !important;
  }
}

.pnae-cities-index-body .header__nav-link span,
.pnae-cities-index-body .sub-nav__link span,
.pnae-cities-index-body .sub-nav__link--active span {
  border: none !important;
}

.pnae-cities-index-body .sub-nav__link {
  padding: 0;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .pnae-cities-index-body .sub-nav__list-item {
    padding-top: 30px;
    padding-bottom: 15px;
    padding-right: 24px;
  }
}

.pnae-cities-index-body .header .search {
  opacity: 0.5;
}

.pnae-cities-index-body .header .search:hover {
  opacity: 1;
}

.pnae-cities-index-body .header__nav .search-nav,
.pnae-cities-index-body .header__nav input {
  background: transparent;
  color: #21d279;
}

/*
  used a variable so we can easily change the breakpoint on
  the hero
 */
.cities-index-hero {
  position: relative;
  width: 100%;
  background-color: #393745;
}

.cities-index-hero .module {
  padding-bottom: 0;
}

.cities-index-hero .button-ghost {
  margin-right: 20px;
  margin-bottom: 30px;
}

.cities-index-hero .hero__line-break {
  display: block;
}

@media (min-width: 768px) {
  .cities-index-hero .hero__line-break {
    display: inline-block;
  }
}

.cities-index-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #393745;
  z-index: 1;
  opacity: 0.7;
  mix-blend-mode: multiply;
}

.cities-index-hero__body {
  position: relative;
  padding: 40px 0;
  z-index: 1;
}

@media (min-width: 768px) {
  .cities-index-hero__body {
    padding: 80px 0;
  }
}

.cities-index-hero__body h1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-size: 48px;
  margin-top: 0;
  font-weight: 400;
  margin-bottom: 5px;
}

@media (min-width: 768px) {
  .cities-index-hero__body h1 {
    font-size: 72px;
  }
}

.cities-index-hero__body h1 span,
.cities-index-hero__body h1 svg {
  display: inline-block;
  vertical-align: top;
  line-height: 48px;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .cities-index-hero__body h1 span,
  .cities-index-hero__body h1 svg {
    line-height: 72px;
  }
}

.cities-index-hero__body h1 svg {
  width: 150px;
  height: 36px;
  margin-right: 15px;
}

@media (min-width: 768px) {
  .cities-index-hero__body h1 svg {
    width: 225px;
    height: 55px;
  }
}

.cities-index-hero__logo {
  display: inline-block;
  width: 120px;
  vertical-align: middle;
  margin-right: 20px;
  margin-bottom: 0;
}

.cities-index-hero__description {
  font-size: 21px;
  font-family: "FoundersGroteskWeb-Regular", Helvetica, sans-serif;
}

@media (min-width: 768px) {
  .cities-index-hero__description {
    width: 66.66666667%;
  }
}

.cities-index-hero__arrow {
  position: relative;
  max-width: 20px;
  margin: auto;
  margin-top: 10px;
  z-index: 1;
}

.cities-index-hero__arrow svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .cities-index-hero__arrow {
    display: none;
  }
}

.cities-index-hero__triangle {
  position: absolute;
  right: 0;
  z-index: 0;
  opacity: 0.5;
  width: 100%;
  bottom: 0;
}

@media (min-width: 768px) {
  .cities-index-hero__triangle {
    bottom: auto;
  }
}

.cities-index-hero__triangle svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .cities-index-hero__triangle svg {
    margin-top: -20%;
  }
}

.cities-index-hero__scores,
.cities-index-hero__score {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.cities-index-hero__score {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-right: 5%;
}

.accordion_text a,
.compare_years_link {
  margin-top: 0.4rem;
  display: inline-block;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.26px;
  line-height: 30px;
  color: #21d279;
  font-family: "FoundersGroteskWeb-Medium", Helvetica, sans-serif;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.accordion_text a .toggle-arrow svg {
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.accordion_text.active a .toggle-arrow {
  display: inline-block;
}

.accordion_text.active a .toggle-arrow svg {
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.year p {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16px;
  line-height: 30px;
  font-family: "FoundersGroteskWeb-Regular", Helvetica, sans-serif;
  margin-top: 0;
  margin-bottom: 0;
}

.before-last-scores {
  display: none;
  overflow: hidden;
}

.arrows {
  display: inline-block;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.show {
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  display: inline-block;
  visibility: visible;
  opacity: 1;
}

.year {
  visibility: visible;
  opacity: 1;
  display: block;
}

.year.first-year {
  margin-top: -19px;
}

.cities-index-hero__score-value {
  display: inline-block;
  margin-right: 2px;
}

.arrows {
  font-size: 48px;
  line-height: 1.1;
}

.arrows svg {
  vertical-align: unset;
  height: 30px;
}

.pnae-cities-index-body .module--recent-news:not(#signup-footer) {
  display: none;
}

.pnae-cities-index-body .module--recent-news,
.pnae-cities-index-body footer {
  color: white;
  position: relative;
  z-index: 1;
}

#form-modal .modal-content {
  max-width: 570px;
  background: #21d279;
  color: white;
}

#form-modal .modal-close svg {
  fill: white;
}

@media (min-width: 500px) {
  #form-modal .form-grid__item {
    width: 50%;
  }
}

#form-modal .form-field__input {
  color: white;
}

#form-modal .form-field__input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: white;
  text-transform: uppercase;
  letter-spacing: .1em;
}

#form-modal .form-field__input::-moz-placeholder {
  /* Firefox 19+ */
  color: white;
  text-transform: uppercase;
  letter-spacing: .1em;
}

#form-modal .form-field__input::-ms-input-placeholder {
  /* IE 10+ */
  color: white;
  text-transform: uppercase;
  letter-spacing: .1em;
}

#form-modal .form-field__input::-moz-placeholder {
  /* Firefox 18- */
  color: white;
  text-transform: uppercase;
  letter-spacing: .1em;
}

#form-modal .form-submit,
#form-modal .form-messages {
  padding-left: 20px;
  width: 100%;
}

#form-modal .form-required-message {
  position: absolute;
  white-space: nowrap;
  top: 100%;
  margin-top: 10px;
}

#form-modal .form-submit {
  -ms-flex-item-align: start;
      align-self: flex-start;
  -webkit-transition: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (min-width: 500px) {
  #form-modal .form-submit {
    width: 31%;
  }
}

#form-modal .form-submit.is-hidden {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate3d(0, -30px, 0);
          transform: translate3d(0, -30px, 0);
}

@media (min-width: 500px) {
  #form-modal .form-messages {
    width: 69%;
  }
}

#form-modal .form-success {
  position: absolute;
  bottom: 40px;
  left: 20px;
}

@media (min-width: 500px) {
  #form-modal .form-success {
    bottom: 20px;
  }
}

#signup-footer .form-field__input {
  color: white;
}

@media (min-width: 1080px) {
  #signup-footer .form-grid__item {
    width: 22%;
  }
  #signup-footer .form-grid__item.form-submit {
    width: 12%;
  }
  #signup-footer .form-grid__item.form-messages {
    width: 100%;
  }
}

@media (min-width: 1080px) {
  #signup-footer .form-required-message {
    position: absolute;
    top: 100%;
  }
}

@media (min-width: 1590px) {
  #success-stories .modal {
    padding-left: 60px;
  }
}

#success-stories .modal-content {
  background: rgba(57, 55, 69, 0.97);
  color: white;
}

@media (min-width: 500px) {
  #success-stories .modal-content {
    width: 100%;
    max-width: 1480px;
    margin-left: 0;
  }
}

#success-stories .modal-close svg {
  fill: white;
}

.slider-wrapper {
  position: relative;
  background: white;
}

.slider-wrapper .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
}

#interactive-index {
  position: relative;
  z-index: 0;
  min-height: 720px;
}

.landing-index {
  position: relative;
  background: white;
  z-index: 2;
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (min-width: 768px) {
  .landing-index {
    background: transparent;
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.landing-index__p {
  margin-bottom: 30px;
}

#city-listing {
  min-height: 720px;
}

.cities-index-about-blocks {
  overflow: hidden;
  position: relative;
}

.cities-index-about-block {
  position: relative;
}

@media (min-width: 1200px) {
  .cities-index-about-block {
    padding-top: 50px;
  }
}

.cities-index-about-block a:not(.button-ghost) {
  position: relative;
  display: inline-block;
}

.cities-index-about-block a:not(.button-ghost):after {
  position: absolute;
  width: 100%;
  bottom: 0;
  content: '';
  display: block;
  border-bottom: 1px solid #21d279;
}

.cities-index-about-block img {
  max-width: 100%;
  height: auto;
  margin: 20px auto;
}

.cities-index-about-block p:first-child img {
  margin-top: 0;
}

@media (min-width: 768px) {
  .cities-index-about-block .alignright {
    float: right;
    max-width: 50%;
    margin-left: 20px;
    margin-bottom: 20px;
  }
}

@media (min-width: 768px) {
  .cities-index-about-block .alignleft {
    float: left;
    max-width: 50%;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}

.cities-index-about-block__wrapper {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.cities-index-about-block--style-1 .cities-index-about-block__container {
  background-color: #393745;
  color: white;
  padding: 30px;
  margin-left: -20px;
  margin-right: -20px;
}

@media (min-width: 1200px) {
  .cities-index-about-block--style-1 .cities-index-about-block__container {
    padding: 50px;
    margin-left: -50px;
    margin-right: -50px;
  }
}

.cities-index-about-grid {
  margin-left: -20px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 960px;
}

.cities-index-about-grid__item {
  padding-left: 20px;
  width: 100%;
}

@media (min-width: 500px) {
  .cities-index-about-grid__item {
    width: 50%;
  }
}

.cities-index-about-block__shape-style-2-1,
.cities-index-about-block__shape-style-3-1,
.cities-index-about-block__shape-style-3-2 {
  position: absolute;
  z-index: 0;
}

.cities-index-about-block__shape-style-2-1 svg,
.cities-index-about-block__shape-style-3-1 svg,
.cities-index-about-block__shape-style-3-2 svg {
  width: 100%;
  height: 100%;
}

.cities-index-about-block__shape-style-2-1:after,
.cities-index-about-block__shape-style-3-1:after,
.cities-index-about-block__shape-style-3-2:after {
  content: '';
  padding-bottom: 100%;
}

.cities-index-about-block__shape-style-2-1,
.cities-index-about-block__shape-style-3-2 {
  bottom: 0;
  left: 0;
  width: 120%;
  opacity: 0.5;
}

.compare-page {
  position: relative;
  font-family: "FoundersGroteskWeb-Regular", Helvetica, sans-serif;
}

.compare-content {
  position: relative;
  z-index: 2;
}

.comparison-module {
  position: relative;
  z-index: 2;
  padding-top: 50px;
  padding-bottom: 50px;
  background: #e8eeee;
}

@media (min-width: 500px) {
  .comparison-module {
    background: transparent;
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

.comparison-module p {
  margin-bottom: 30px;
}

.comparison-module .button-plain {
  margin-top: 20px;
}

@media (min-width: 768px) {
  .comparison-module .button-plain {
    margin-top: 0;
  }
}

.comparison-module--bottom {
  padding-top: 0;
}

.compare-module__triangle {
  position: absolute;
  left: 0;
  opacity: 0.5;
  width: 87%;
  top: 0;
  display: none;
}

@media (min-width: 768px) {
  .compare-module__triangle {
    width: 68%;
    bottom: auto;
    display: block;
  }
}

.compare-module__triangle svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .compare-module__triangle svg {
    margin-top: -25%;
  }
}