@charset "UTF-8";
/*doc
---
title: Color Scheme
name: colors
category: basics
---
Within Indigo, we use a combination of the Bootstrap color scheme and the following brand colors:


$navy:          #1c2345;
$cerulean:      #009CDE;
$black:         #000000;
$pewter:        #666666;

$sky:           #70B2E3;
$grass:         #9BCB58;
$kiwi:          #C0E391;
$tangerine:     #FBB261;
$fuschia:       #E50061;
$steel:         #ACAEB0;

$cloud:         #BFE6FB;
$lime:          #E5EEAE;
$manila:        #FFE8AE;
$platnum:       #ECEDF0;
$silver:        #C9CDD4;

*/
/*doc
---
title: Color Scheme - New Branding
name: colors-new
category: basics
---

ActBlue's branding uses a three-tiered color scheme.

### Primary:

CERULEAN: #009CDE
DUSK: #3B4A91
MIDNIGHT: #1C2345
GREYSCALE: #666666

### Secondary:

SKY: #70B2E3
GRASS: #9BCB58
KIWI: #C0E391
TANGERINE: #FBB261
FUSCHIA: #E50061
STEEL: #ACAEB0

### Tertiary:

CLOUD: #BFE6FB
LIME: #E5EEAE
MANILA: #FFE8AE
PLATINUM: #ECEDF0
SILVER: #C9CDD4

*/
/*doc
---
title: Color Scheme - Color/Concept Associations
name: colors-associations
category: basics
---

Specific ActBlue features may be persistently associated with a given color.

ActBlue Express: TANGERINE

*/
.bg-alt {
  background-color: #F0F0F0; }

a.bg-alt:hover,
a.bg-alt:focus {
  background-color: #d7d7d7; }

.bg-warning {
  background-color: #fcf8e3; }

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5; }

.bg-info {
  background-color: #d9edf7; }

a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee; }

.table {
  width: 100%;
  margin-bottom: 21px; }
  .table th,
  .table td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table th {
    font-weight: bold; }
  .table thead th {
    vertical-align: bottom; }
  .table caption + thead tr:first-child th,
  .table caption + thead tr:first-child td,
  .table colgroup + thead tr:first-child th,
  .table colgroup + thead tr:first-child td,
  .table thead:first-child tr:first-child th,
  .table thead:first-child tr:first-child td {
    border-top: 0; }
  .table tbody + tbody {
    border-top: 2px solid #ddd; }
  .table .number {
    text-align: right; }
  .table .table {
    background-color: #fff; }

.table-condensed {
  width: 100%;
  margin-bottom: 21px; }
  .table-condensed th,
  .table-condensed td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table-condensed th {
    font-weight: bold; }
  .table-condensed thead th {
    vertical-align: bottom; }
  .table-condensed caption + thead tr:first-child th,
  .table-condensed caption + thead tr:first-child td,
  .table-condensed colgroup + thead tr:first-child th,
  .table-condensed colgroup + thead tr:first-child td,
  .table-condensed thead:first-child tr:first-child th,
  .table-condensed thead:first-child tr:first-child td {
    border-top: 0; }
  .table-condensed tbody + tbody {
    border-top: 2px solid #ddd; }
  .table-condensed .number {
    text-align: right; }
  .table-condensed th,
  .table-condensed td {
    padding: 4px 5px; }
  .table-condensed th {
    color: #666;
    font-weight: 400;
    border-bottom: 2px solid #CCC; }

/*doc
---
title: Grid System - Old Style
name: bootstrap-grid
category: grid
---
The "old" Indigo branding uses the Bootstrap grid, generally with Bootstrap classes in markup.
*/
/*doc
---
title: Grid System - New Style
name: nouveau-grid
category: grid
---

The "new" Indigo branding uses the Bootstrap grid. Where feasible, use of the SCSS mixins `bootstrap-span` and `bootstrap-offset` is preferred over putting Bootstrap classes in markup.

If the Bootstrap grid does not cooperate nicely with a given design, it may be the design's fault. Mike is generally happy to work with ATS to resolve these issues.

*/
/*doc
---
title: Color Scheme
name: colors
category: basics
---
Within Indigo, we use a combination of the Bootstrap color scheme and the following brand colors:


$navy:          #1c2345;
$cerulean:      #009CDE;
$black:         #000000;
$pewter:        #666666;

$sky:           #70B2E3;
$grass:         #9BCB58;
$kiwi:          #C0E391;
$tangerine:     #FBB261;
$fuschia:       #E50061;
$steel:         #ACAEB0;

$cloud:         #BFE6FB;
$lime:          #E5EEAE;
$manila:        #FFE8AE;
$platnum:       #ECEDF0;
$silver:        #C9CDD4;

*/
/*doc
---
title: Color Scheme - New Branding
name: colors-new
category: basics
---

ActBlue's branding uses a three-tiered color scheme.

### Primary:

CERULEAN: #009CDE
DUSK: #3B4A91
MIDNIGHT: #1C2345
GREYSCALE: #666666

### Secondary:

SKY: #70B2E3
GRASS: #9BCB58
KIWI: #C0E391
TANGERINE: #FBB261
FUSCHIA: #E50061
STEEL: #ACAEB0

### Tertiary:

CLOUD: #BFE6FB
LIME: #E5EEAE
MANILA: #FFE8AE
PLATINUM: #ECEDF0
SILVER: #C9CDD4

*/
/*doc
---
title: Color Scheme - Color/Concept Associations
name: colors-associations
category: basics
---

Specific ActBlue features may be persistently associated with a given color.

ActBlue Express: TANGERINE

*/
.bg-alt {
  background-color: #F0F0F0; }

a.bg-alt:hover,
a.bg-alt:focus {
  background-color: #d7d7d7; }

.bg-warning {
  background-color: #fcf8e3; }

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5; }

.bg-info {
  background-color: #d9edf7; }

a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee; }

.table {
  width: 100%;
  margin-bottom: 21px; }
  .table th,
  .table td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table th {
    font-weight: bold; }
  .table thead th {
    vertical-align: bottom; }
  .table caption + thead tr:first-child th,
  .table caption + thead tr:first-child td,
  .table colgroup + thead tr:first-child th,
  .table colgroup + thead tr:first-child td,
  .table thead:first-child tr:first-child th,
  .table thead:first-child tr:first-child td {
    border-top: 0; }
  .table tbody + tbody {
    border-top: 2px solid #ddd; }
  .table .number {
    text-align: right; }
  .table .table {
    background-color: #fff; }

.table-condensed {
  width: 100%;
  margin-bottom: 21px; }
  .table-condensed th,
  .table-condensed td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table-condensed th {
    font-weight: bold; }
  .table-condensed thead th {
    vertical-align: bottom; }
  .table-condensed caption + thead tr:first-child th,
  .table-condensed caption + thead tr:first-child td,
  .table-condensed colgroup + thead tr:first-child th,
  .table-condensed colgroup + thead tr:first-child td,
  .table-condensed thead:first-child tr:first-child th,
  .table-condensed thead:first-child tr:first-child td {
    border-top: 0; }
  .table-condensed tbody + tbody {
    border-top: 2px solid #ddd; }
  .table-condensed .number {
    text-align: right; }
  .table-condensed th,
  .table-condensed td {
    padding: 4px 5px; }
  .table-condensed th {
    color: #666;
    font-weight: 400;
    border-bottom: 2px solid #CCC; }

/*doc
---
title: Grid System - Old Style
name: bootstrap-grid
category: grid
---
The "old" Indigo branding uses the Bootstrap grid, generally with Bootstrap classes in markup.
*/
/*doc
---
title: Grid System - New Style
name: nouveau-grid
category: grid
---

The "new" Indigo branding uses the Bootstrap grid. Where feasible, use of the SCSS mixins `bootstrap-span` and `bootstrap-offset` is preferred over putting Bootstrap classes in markup.

If the Bootstrap grid does not cooperate nicely with a given design, it may be the design's fault. Mike is generally happy to work with ATS to resolve these issues.

*/
/*doc
---
title: Color Scheme
name: colors
category: basics
---
Within Indigo, we use a combination of the Bootstrap color scheme and the following brand colors:


$navy:          #1c2345;
$cerulean:      #009CDE;
$black:         #000000;
$pewter:        #666666;

$sky:           #70B2E3;
$grass:         #9BCB58;
$kiwi:          #C0E391;
$tangerine:     #FBB261;
$fuschia:       #E50061;
$steel:         #ACAEB0;

$cloud:         #BFE6FB;
$lime:          #E5EEAE;
$manila:        #FFE8AE;
$platnum:       #ECEDF0;
$silver:        #C9CDD4;

*/
/*doc
---
title: Color Scheme - New Branding
name: colors-new
category: basics
---

ActBlue's branding uses a three-tiered color scheme.

### Primary:

CERULEAN: #009CDE
DUSK: #3B4A91
MIDNIGHT: #1C2345
GREYSCALE: #666666

### Secondary:

SKY: #70B2E3
GRASS: #9BCB58
KIWI: #C0E391
TANGERINE: #FBB261
FUSCHIA: #E50061
STEEL: #ACAEB0

### Tertiary:

CLOUD: #BFE6FB
LIME: #E5EEAE
MANILA: #FFE8AE
PLATINUM: #ECEDF0
SILVER: #C9CDD4

*/
/*doc
---
title: Color Scheme - Color/Concept Associations
name: colors-associations
category: basics
---

Specific ActBlue features may be persistently associated with a given color.

ActBlue Express: TANGERINE

*/
.bg-alt {
  background-color: #F0F0F0; }

a.bg-alt:hover,
a.bg-alt:focus {
  background-color: #d7d7d7; }

.bg-warning {
  background-color: #fcf8e3; }

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5; }

.bg-info {
  background-color: #d9edf7; }

a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee; }

.table {
  width: 100%;
  margin-bottom: 21px; }
  .table th,
  .table td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table th {
    font-weight: bold; }
  .table thead th {
    vertical-align: bottom; }
  .table caption + thead tr:first-child th,
  .table caption + thead tr:first-child td,
  .table colgroup + thead tr:first-child th,
  .table colgroup + thead tr:first-child td,
  .table thead:first-child tr:first-child th,
  .table thead:first-child tr:first-child td {
    border-top: 0; }
  .table tbody + tbody {
    border-top: 2px solid #ddd; }
  .table .number {
    text-align: right; }
  .table .table {
    background-color: #fff; }

.table-condensed {
  width: 100%;
  margin-bottom: 21px; }
  .table-condensed th,
  .table-condensed td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table-condensed th {
    font-weight: bold; }
  .table-condensed thead th {
    vertical-align: bottom; }
  .table-condensed caption + thead tr:first-child th,
  .table-condensed caption + thead tr:first-child td,
  .table-condensed colgroup + thead tr:first-child th,
  .table-condensed colgroup + thead tr:first-child td,
  .table-condensed thead:first-child tr:first-child th,
  .table-condensed thead:first-child tr:first-child td {
    border-top: 0; }
  .table-condensed tbody + tbody {
    border-top: 2px solid #ddd; }
  .table-condensed .number {
    text-align: right; }
  .table-condensed th,
  .table-condensed td {
    padding: 4px 5px; }
  .table-condensed th {
    color: #666;
    font-weight: 400;
    border-bottom: 2px solid #CCC; }

/*doc
---
title: Grid System - Old Style
name: bootstrap-grid
category: grid
---
The "old" Indigo branding uses the Bootstrap grid, generally with Bootstrap classes in markup.
*/
/*doc
---
title: Grid System - New Style
name: nouveau-grid
category: grid
---

The "new" Indigo branding uses the Bootstrap grid. Where feasible, use of the SCSS mixins `bootstrap-span` and `bootstrap-offset` is preferred over putting Bootstrap classes in markup.

If the Bootstrap grid does not cooperate nicely with a given design, it may be the design's fault. Mike is generally happy to work with ATS to resolve these issues.

*/
/*doc
---
title: Color Scheme
name: colors
category: basics
---
Within Indigo, we use a combination of the Bootstrap color scheme and the following brand colors:


$navy:          #1c2345;
$cerulean:      #009CDE;
$black:         #000000;
$pewter:        #666666;

$sky:           #70B2E3;
$grass:         #9BCB58;
$kiwi:          #C0E391;
$tangerine:     #FBB261;
$fuschia:       #E50061;
$steel:         #ACAEB0;

$cloud:         #BFE6FB;
$lime:          #E5EEAE;
$manila:        #FFE8AE;
$platnum:       #ECEDF0;
$silver:        #C9CDD4;

*/
/*doc
---
title: Color Scheme - New Branding
name: colors-new
category: basics
---

ActBlue's branding uses a three-tiered color scheme.

### Primary:

CERULEAN: #009CDE
DUSK: #3B4A91
MIDNIGHT: #1C2345
GREYSCALE: #666666

### Secondary:

SKY: #70B2E3
GRASS: #9BCB58
KIWI: #C0E391
TANGERINE: #FBB261
FUSCHIA: #E50061
STEEL: #ACAEB0

### Tertiary:

CLOUD: #BFE6FB
LIME: #E5EEAE
MANILA: #FFE8AE
PLATINUM: #ECEDF0
SILVER: #C9CDD4

*/
/*doc
---
title: Color Scheme - Color/Concept Associations
name: colors-associations
category: basics
---

Specific ActBlue features may be persistently associated with a given color.

ActBlue Express: TANGERINE

*/
.bg-alt {
  background-color: #F0F0F0; }

a.bg-alt:hover,
a.bg-alt:focus {
  background-color: #d7d7d7; }

.bg-warning {
  background-color: #fcf8e3; }

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5; }

.bg-info {
  background-color: #d9edf7; }

a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee; }

.table {
  width: 100%;
  margin-bottom: 21px; }
  .table th,
  .table td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table th {
    font-weight: bold; }
  .table thead th {
    vertical-align: bottom; }
  .table caption + thead tr:first-child th,
  .table caption + thead tr:first-child td,
  .table colgroup + thead tr:first-child th,
  .table colgroup + thead tr:first-child td,
  .table thead:first-child tr:first-child th,
  .table thead:first-child tr:first-child td {
    border-top: 0; }
  .table tbody + tbody {
    border-top: 2px solid #ddd; }
  .table .number {
    text-align: right; }
  .table .table {
    background-color: #fff; }

.table-condensed {
  width: 100%;
  margin-bottom: 21px; }
  .table-condensed th,
  .table-condensed td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table-condensed th {
    font-weight: bold; }
  .table-condensed thead th {
    vertical-align: bottom; }
  .table-condensed caption + thead tr:first-child th,
  .table-condensed caption + thead tr:first-child td,
  .table-condensed colgroup + thead tr:first-child th,
  .table-condensed colgroup + thead tr:first-child td,
  .table-condensed thead:first-child tr:first-child th,
  .table-condensed thead:first-child tr:first-child td {
    border-top: 0; }
  .table-condensed tbody + tbody {
    border-top: 2px solid #ddd; }
  .table-condensed .number {
    text-align: right; }
  .table-condensed th,
  .table-condensed td {
    padding: 4px 5px; }
  .table-condensed th {
    color: #666;
    font-weight: 400;
    border-bottom: 2px solid #CCC; }

/*doc
---
title: Grid System - Old Style
name: bootstrap-grid
category: grid
---
The "old" Indigo branding uses the Bootstrap grid, generally with Bootstrap classes in markup.
*/
/*doc
---
title: Grid System - New Style
name: nouveau-grid
category: grid
---

The "new" Indigo branding uses the Bootstrap grid. Where feasible, use of the SCSS mixins `bootstrap-span` and `bootstrap-offset` is preferred over putting Bootstrap classes in markup.

If the Bootstrap grid does not cooperate nicely with a given design, it may be the design's fault. Mike is generally happy to work with ATS to resolve these issues.

*/
/*========================================
=               TYPOGRAHPY               =
========================================*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: "Roboto Slab", serif;
  font-weight: 300;
  letter-spacing: -0.01em; }

h1 {
  font-size: 46px; }

h2 {
  font-size: 31.5px; }

a, a:link {
  color: #fff;
  text-decoration: none; }
  a:hover, a:focus, a:link:hover, a:link:focus {
    color: #BFE6FB; }

p a:visited {
  color: #ddd; }

p {
  font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
  font-size: 20px;
  font-weight: 400; }

.actions {
  font-size: 1.2em;
  color: #fff;
  text-align: center; }
  .actions a.btn {
    color: #fff; }
  .actions .or {
    padding: 0 1em; }

/*========================================
=                 LAYOUT                 =
========================================*/
header.main,
footer,
#site-wrapper,
#contentArea {
  margin: 0pt auto;
  max-width: 1582px;
  width: 100%; }

body.homepage #contentArea,
body.interior #contentArea {
  padding: 0px; }

#contentArea .container-fluid {
  margin: 0em auto;
  max-width: 980px; }

#site-wrapper {
  overflow: hidden;
  background: #fff; }

body > section {
  padding-bottom: 5em; }

section {
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat; }

.btn-large {
  min-width: 200px; }

.triangle-down {
  border-top: 25px solid #eff3f6;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  margin-left: -25px;
  position: absolute;
  top: 0px;
  left: 50%;
  width: 0;
  height: 0; }

/*========================================
=                 HEADER                 =
========================================*/
/**
 * The header is sticky in the marketing section...
 */
header.main {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 2;
  min-height: 76px; }

body {
  padding-top: 77px; }

/**
 * ...except not sticky when logged in...
 * (because of admin menu as well as general annoyance)
 */
body.logged-in {
  padding-top: 0; }
  body.logged-in header.main {
    height: auto;
    position: relative; }

/**
 * ...and not sticky at smaller screen sizes
 */
@media (max-width: 979px) {
  header.main {
    height: auto;
    position: relative; }

  body {
    padding-top: 0px; } }
/*========================================
=              TOP SECTION               =
========================================*/
section#top {
  color: #fff;
  padding: 120px 0px 90px;
  text-align: center; }
  section#top h1 {
    color: #fff;
    font-size: 52px;
    font-weight: 700; }
  section#top .btn-large {
    min-width: 125px; }
  section#top h1 + .btn {
    margin-top: 1em; }
  section#top p {
    color: #fff;
    font-size: 16px; }
    section#top p em {
      font-family: "Montserrat", "Trebuchet MS", Tahoma, Arial, sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.3em;
      text-transform: uppercase; }
  section#top hr {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    margin: 0em auto 1.5em;
    width: 7em; }

/*========================================
=                 SUBNAV                 =
========================================*/
section.subnav {
  background-color: #fff;
  border-bottom: 1px solid #dae0e8;
  width: 100%;
  z-index: 2; }
  section.subnav.fixed {
    position: fixed;
    top: 77px; }
    body.logged-in section.subnav.fixed {
      top: 0px; }

nav.subnav {
  font-family: "Montserrat", "Trebuchet MS", Tahoma, Arial, sans-serif;
  font-size: 13.02px;
  font-weight: 400;
  padding: 23px 0px;
  text-align: center; }
  nav.subnav ul {
    list-style-type: none; }
    nav.subnav ul li {
      display: inline-block;
      margin: 0px 20px; }
      nav.subnav ul li a, nav.subnav ul li a:link, nav.subnav ul li a:visited, nav.subnav ul li a:active {
        color: #50657a;
        font-size: 13px;
        letter-spacing: 0.06em;
        text-transform: uppercase; }
        nav.subnav ul li a:hover, nav.subnav ul li a:focus, nav.subnav ul li a:link:hover, nav.subnav ul li a:link:focus, nav.subnav ul li a:visited:hover, nav.subnav ul li a:visited:focus, nav.subnav ul li a:active:hover, nav.subnav ul li a:active:focus {
          color: #1c2345; }

/*====================================
=               IMAGES               =
=====================================*/
.round-rect-backed-image {
  border-radius: 5pt;
  background-color: #eff3f6; }

/*========================================
=               BIG NUMBER               =
========================================*/
#theBigNumber {
  background-color: #009CDE;
  color: #fff;
  font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
  font-size: 68px;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 110%;
  padding: 0.1em 0.5em;
  position: absolute;
  top: 0px;
  right: 0px;
  text-align: center;
  white-space: nowrap; }
  #theBigNumber p {
    color: #fff;
    font-family: "Montserrat", "Trebuchet MS", Tahoma, Arial, sans-serif;
    font-size: 13.02px !important;
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: .3em 0;
    text-align: center;
    text-transform: uppercase; }

.ie7 #theBigNumber p {
  margin: .5em 0; }

/*========================================
=            CONVERSION RATES            =
========================================*/
#conversion-rates {
  background-color: #009CDE;
  color: #fff;
  padding: 85px 0px 85px;
  text-align: center; }
  #conversion-rates h2 {
    color: #fff; }
  #conversion-rates .btn-large {
    width: 400px; }

/*========================================
=           RESPONSIVE STYLES            =
========================================*/
@media (max-width: 767px) {
  h2 {
    font-size: 40px;
    line-height: 115%; }

  section.subnav {
    padding-left: 0px;
    padding-right: 0px; }

  .btn-large {
    min-width: 150px; }

  header.main {
    width: auto; }

  #content-wrapper {
    padding: 0px;
    position: relative; }

  nav.subnav ul li {
    display: block;
    margin: 0px; }

  section {
    background-image: none !important; }

  section,
  section.container-fluid {
    padding-left: 40px;
    padding-right: 40px;
    text-align: center; }

  section#top {
    padding-top: 85px; }

  #theBigNumber {
    padding: 0.1em 0px;
    width: 100%; }

  #conversion-rates .btn-large {
    max-width: 70%; }

  .round-rect-backed-image {
    padding-left: 0px !important;
    padding-right: 0px !important;
    width: 100% !important; }
    .round-rect-backed-image img {
      height: 100%; } }
/* ==|== print styles ======================================================= */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important; }

  a, a:visited {
    text-decoration: underline; }

  a[href]:after {
    content: " (" attr(href) ")"; }

  abbr[title]:after {
    content: " (" attr(title) ")"; }

  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
    content: ""; }

  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  thead {
    display: table-header-group; }

  tr, img {
    page-break-inside: avoid; }

  img {
    max-width: 100% !important; }

  @page {
    margin: 0.5cm; }
  p, h2, h3 {
    orphans: 3;
    widows: 3; }

  h2, h3 {
    page-break-after: avoid; } }
/*doc
---
title: Color Scheme
name: colors
category: basics
---
Within Indigo, we use a combination of the Bootstrap color scheme and the following brand colors:


$navy:          #1c2345;
$cerulean:      #009CDE;
$black:         #000000;
$pewter:        #666666;

$sky:           #70B2E3;
$grass:         #9BCB58;
$kiwi:          #C0E391;
$tangerine:     #FBB261;
$fuschia:       #E50061;
$steel:         #ACAEB0;

$cloud:         #BFE6FB;
$lime:          #E5EEAE;
$manila:        #FFE8AE;
$platnum:       #ECEDF0;
$silver:        #C9CDD4;

*/
/*doc
---
title: Color Scheme - New Branding
name: colors-new
category: basics
---

ActBlue's branding uses a three-tiered color scheme.

### Primary:

CERULEAN: #009CDE
DUSK: #3B4A91
MIDNIGHT: #1C2345
GREYSCALE: #666666

### Secondary:

SKY: #70B2E3
GRASS: #9BCB58
KIWI: #C0E391
TANGERINE: #FBB261
FUSCHIA: #E50061
STEEL: #ACAEB0

### Tertiary:

CLOUD: #BFE6FB
LIME: #E5EEAE
MANILA: #FFE8AE
PLATINUM: #ECEDF0
SILVER: #C9CDD4

*/
/*doc
---
title: Color Scheme - Color/Concept Associations
name: colors-associations
category: basics
---

Specific ActBlue features may be persistently associated with a given color.

ActBlue Express: TANGERINE

*/
.bg-alt {
  background-color: #F0F0F0; }

a.bg-alt:hover,
a.bg-alt:focus {
  background-color: #d7d7d7; }

.bg-warning {
  background-color: #fcf8e3; }

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5; }

.bg-info {
  background-color: #d9edf7; }

a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee; }

.table {
  width: 100%;
  margin-bottom: 21px; }
  .table th,
  .table td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table th {
    font-weight: bold; }
  .table thead th {
    vertical-align: bottom; }
  .table caption + thead tr:first-child th,
  .table caption + thead tr:first-child td,
  .table colgroup + thead tr:first-child th,
  .table colgroup + thead tr:first-child td,
  .table thead:first-child tr:first-child th,
  .table thead:first-child tr:first-child td {
    border-top: 0; }
  .table tbody + tbody {
    border-top: 2px solid #ddd; }
  .table .number {
    text-align: right; }
  .table .table {
    background-color: #fff; }

.table-condensed {
  width: 100%;
  margin-bottom: 21px; }
  .table-condensed th,
  .table-condensed td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table-condensed th {
    font-weight: bold; }
  .table-condensed thead th {
    vertical-align: bottom; }
  .table-condensed caption + thead tr:first-child th,
  .table-condensed caption + thead tr:first-child td,
  .table-condensed colgroup + thead tr:first-child th,
  .table-condensed colgroup + thead tr:first-child td,
  .table-condensed thead:first-child tr:first-child th,
  .table-condensed thead:first-child tr:first-child td {
    border-top: 0; }
  .table-condensed tbody + tbody {
    border-top: 2px solid #ddd; }
  .table-condensed .number {
    text-align: right; }
  .table-condensed th,
  .table-condensed td {
    padding: 4px 5px; }
  .table-condensed th {
    color: #666;
    font-weight: 400;
    border-bottom: 2px solid #CCC; }

/*doc
---
title: Grid System - Old Style
name: bootstrap-grid
category: grid
---
The "old" Indigo branding uses the Bootstrap grid, generally with Bootstrap classes in markup.
*/
/*doc
---
title: Grid System - New Style
name: nouveau-grid
category: grid
---

The "new" Indigo branding uses the Bootstrap grid. Where feasible, use of the SCSS mixins `bootstrap-span` and `bootstrap-offset` is preferred over putting Bootstrap classes in markup.

If the Bootstrap grid does not cooperate nicely with a given design, it may be the design's fault. Mike is generally happy to work with ATS to resolve these issues.

*/
/*doc
---
title: Color Scheme
name: colors
category: basics
---
Within Indigo, we use a combination of the Bootstrap color scheme and the following brand colors:


$navy:          #1c2345;
$cerulean:      #009CDE;
$black:         #000000;
$pewter:        #666666;

$sky:           #70B2E3;
$grass:         #9BCB58;
$kiwi:          #C0E391;
$tangerine:     #FBB261;
$fuschia:       #E50061;
$steel:         #ACAEB0;

$cloud:         #BFE6FB;
$lime:          #E5EEAE;
$manila:        #FFE8AE;
$platnum:       #ECEDF0;
$silver:        #C9CDD4;

*/
/*doc
---
title: Color Scheme - New Branding
name: colors-new
category: basics
---

ActBlue's branding uses a three-tiered color scheme.

### Primary:

CERULEAN: #009CDE
DUSK: #3B4A91
MIDNIGHT: #1C2345
GREYSCALE: #666666

### Secondary:

SKY: #70B2E3
GRASS: #9BCB58
KIWI: #C0E391
TANGERINE: #FBB261
FUSCHIA: #E50061
STEEL: #ACAEB0

### Tertiary:

CLOUD: #BFE6FB
LIME: #E5EEAE
MANILA: #FFE8AE
PLATINUM: #ECEDF0
SILVER: #C9CDD4

*/
/*doc
---
title: Color Scheme - Color/Concept Associations
name: colors-associations
category: basics
---

Specific ActBlue features may be persistently associated with a given color.

ActBlue Express: TANGERINE

*/
.bg-alt {
  background-color: #F0F0F0; }

a.bg-alt:hover,
a.bg-alt:focus {
  background-color: #d7d7d7; }

.bg-warning {
  background-color: #fcf8e3; }

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5; }

.bg-info {
  background-color: #d9edf7; }

a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee; }

.table {
  width: 100%;
  margin-bottom: 21px; }
  .table th,
  .table td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table th {
    font-weight: bold; }
  .table thead th {
    vertical-align: bottom; }
  .table caption + thead tr:first-child th,
  .table caption + thead tr:first-child td,
  .table colgroup + thead tr:first-child th,
  .table colgroup + thead tr:first-child td,
  .table thead:first-child tr:first-child th,
  .table thead:first-child tr:first-child td {
    border-top: 0; }
  .table tbody + tbody {
    border-top: 2px solid #ddd; }
  .table .number {
    text-align: right; }
  .table .table {
    background-color: #fff; }

.table-condensed {
  width: 100%;
  margin-bottom: 21px; }
  .table-condensed th,
  .table-condensed td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table-condensed th {
    font-weight: bold; }
  .table-condensed thead th {
    vertical-align: bottom; }
  .table-condensed caption + thead tr:first-child th,
  .table-condensed caption + thead tr:first-child td,
  .table-condensed colgroup + thead tr:first-child th,
  .table-condensed colgroup + thead tr:first-child td,
  .table-condensed thead:first-child tr:first-child th,
  .table-condensed thead:first-child tr:first-child td {
    border-top: 0; }
  .table-condensed tbody + tbody {
    border-top: 2px solid #ddd; }
  .table-condensed .number {
    text-align: right; }
  .table-condensed th,
  .table-condensed td {
    padding: 4px 5px; }
  .table-condensed th {
    color: #666;
    font-weight: 400;
    border-bottom: 2px solid #CCC; }

/*doc
---
title: Grid System - Old Style
name: bootstrap-grid
category: grid
---
The "old" Indigo branding uses the Bootstrap grid, generally with Bootstrap classes in markup.
*/
/*doc
---
title: Grid System - New Style
name: nouveau-grid
category: grid
---

The "new" Indigo branding uses the Bootstrap grid. Where feasible, use of the SCSS mixins `bootstrap-span` and `bootstrap-offset` is preferred over putting Bootstrap classes in markup.

If the Bootstrap grid does not cooperate nicely with a given design, it may be the design's fault. Mike is generally happy to work with ATS to resolve these issues.

*/
body.home h3 {
  font-family: "Montserrat", "Trebuchet MS", Tahoma, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase; }
body.home section {
  background-size: cover; }
body.home section#home-top {
  background: url("/assets/layout/home/top-background-a036685242f6faf31f5c0d3b39b713da686da8bb81bbcb28306c02ce9426340c.jpg") no-repeat #009CDE;
  background-size: cover;
  padding-top: 250px;
  padding-bottom: 200px;
  position: relative; }
  body.home section#home-top h2 {
    color: #fff;
    font-size: 54px;
    line-height: 126%; }
    body.home section#home-top h2 em {
      font-family: "abril-text", sans-serif;
      font-style: italic;
      font-weight: 400; }
  body.home section#home-top .actions {
    display: inline-block;
    text-align: center;
    white-space: nowrap; }
    body.home section#home-top .actions p {
      font-size: 14px;
      letter-spacing: -0.01em;
      margin-top: 1.5em; }
body.home section#meet-express-lane {
  background: url("/assets/layout/home/meet-express-lane-background-9f88a03ec9a85076cdceb77f90986ea8dddb8664fbe73d5a27723a04326868a2.png") no-repeat #fff;
  background-position-x: center;
  color: #8495a7;
  padding-top: 90px;
  padding-bottom: 150px; }
  body.home section#meet-express-lane h2 {
    color: #2a415e;
    font-size: 46px;
    margin-bottom: 1.5em; }
  body.home section#meet-express-lane h3 {
    color: #50657a; }
  body.home section#meet-express-lane hr {
    border-top: 2px solid #a7b2bc;
    margin-top: 0em;
    width: 7em; }
  body.home section#meet-express-lane img.logo {
    width: 180px; }
  body.home section#meet-express-lane p {
    font-size: 16px; }
    body.home section#meet-express-lane p strong {
      color: #50657a;
      font-size: 17px; }
body.home section#why-better {
  background-color: #009CDE;
  padding-top: 80px;
  padding-bottom: 90px; }
  body.home section#why-better h2 {
    color: #fff;
    font-size: 40px;
    text-align: center; }
  body.home section#why-better h3 {
    color: #fff;
    text-align: center; }
  body.home section#why-better h4 {
    color: #ccebfe;
    font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-align: center; }
  body.home section#why-better hr {
    border-top: 1px solid #80ceef;
    border-bottom: 1px solid #80ceef;
    margin: 0px auto 20px;
    text-align: center;
    width: 7em; }
  body.home section#why-better .features {
    margin-top: 3em; }
    body.home section#why-better .features .span6 {
      display: table;
      height: 149px; }
      body.home section#why-better .features .span6 p {
        display: table-cell;
        vertical-align: middle; }
    body.home section#why-better .features .round-rect-backed-image {
      background-color: #0189d1;
      height: 95px;
      padding: 24px 27px;
      text-align: center;
      width: 121px; }
    body.home section#why-better .features img, body.home section#why-better .features p {
      color: #fff;
      display: inline-block;
      font-size: 15px;
      line-height: 147%; }
    body.home section#why-better .features img {
      height: 95px; }
    body.home section#why-better .features p {
      padding-left: 5px; }
  body.home section#why-better .features + .features .span6 .row-fluid {
    border-bottom: 0px; }
  body.home section#why-better .btn {
    display: block;
    margin: 3em auto 0em;
    width: 200px; }
body.home section#recent-activity {
  background-color: #eff3f6;
  text-align: center; }
  body.home section#recent-activity img.logo {
    margin-top: 34px;
    margin-bottom: 8px;
    width: 108px; }
  body.home section#recent-activity h3 {
    color: #2a415e;
    margin-top: 0px;
    margin-bottom: 23px;
    text-align: center; }
  body.home section#recent-activity hr {
    border-top: 1px solid #b1baca;
    border-bottom: 1px solid #b1baca;
    margin: 0px auto 27px;
    text-align: center;
    width: 7em; }
body.home section#map {
  background-color: #fff;
  position: relative;
  text-align: center; }
  body.home section#map .triangle-down {
    border-top-color: #eff3f6; }
  body.home section#map div#map-carousel {
    margin: 43px 0px; }
    body.home section#map div#map-carousel .carousel-inner {
      min-height: 500px; }
    body.home section#map div#map-carousel .item.spinner {
      background-position: center;
      width: 100%;
      height: 100%; }
    body.home section#map div#map-carousel ol.contributions,
    body.home section#map div#map-carousel ol.states {
      list-style-type: none;
      margin-left: 0px;
      width: 306px; }
      body.home section#map div#map-carousel ol.contributions li,
      body.home section#map div#map-carousel ol.states li {
        background-color: #f8a021;
        color: #576679;
        font-size: 15px;
        padding: 25px;
        position: relative;
        text-align: left; }
        body.home section#map div#map-carousel ol.contributions li.first,
        body.home section#map div#map-carousel ol.states li.first {
          border-top-left-radius: 2pt;
          border-top-right-radius: 2pt;
          color: #fff;
          position: relative; }
          body.home section#map div#map-carousel ol.contributions li.first .triangle-left,
          body.home section#map div#map-carousel ol.states li.first .triangle-left {
            border-right: 13px solid #f8a021;
            border-top: 13px solid transparent;
            border-bottom: 13px solid transparent;
            margin-top: -13px;
            margin-left: -13px;
            position: absolute;
            top: 50%;
            left: 0%;
            width: 0;
            height: 0; }
        body.home section#map div#map-carousel ol.contributions li.second,
        body.home section#map div#map-carousel ol.states li.second {
          background-color: #fbd295; }
        body.home section#map div#map-carousel ol.contributions li.third,
        body.home section#map div#map-carousel ol.states li.third {
          background-color: #ffefd7;
          border-bottom-right-radius: 2pt;
          border-bottom-left-radius: 2pt; }
        body.home section#map div#map-carousel ol.contributions li .image,
        body.home section#map div#map-carousel ol.states li .image {
          display: inline-block;
          margin-right: 15px; }
        body.home section#map div#map-carousel ol.contributions li .image,
        body.home section#map div#map-carousel ol.contributions li .image img,
        body.home section#map div#map-carousel ol.contributions li .image img.photo,
        body.home section#map div#map-carousel ol.states li .image,
        body.home section#map div#map-carousel ol.states li .image img,
        body.home section#map div#map-carousel ol.states li .image img.photo {
          background: transparent;
          border: 0px;
          max-width: 63px;
          padding: 0px; }
        body.home section#map div#map-carousel ol.contributions li .details,
        body.home section#map div#map-carousel ol.states li .details {
          display: inline-block;
          max-width: 170px;
          vertical-align: middle; }
        body.home section#map div#map-carousel ol.contributions li .donor span,
        body.home section#map div#map-carousel ol.states li .donor span {
          font-style: italic;
          font-weight: 500; }
        body.home section#map div#map-carousel ol.contributions li ul,
        body.home section#map div#map-carousel ol.states li ul {
          margin-left: 0px; }
          body.home section#map div#map-carousel ol.contributions li ul li,
          body.home section#map div#map-carousel ol.states li ul li {
            color: #fff;
            font-size: 18px;
            list-style: none;
            padding: 0px; }
        body.home section#map div#map-carousel ol.contributions li .recipient,
        body.home section#map div#map-carousel ol.states li .recipient {
          font-weight: 700; }
    body.home section#map div#map-carousel ol.states li {
      font-size: 20px;
      padding-top: 18px;
      padding-bottom: 18px; }
      body.home section#map div#map-carousel ol.states li.second {
        background-color: #faba5b; }
      body.home section#map div#map-carousel ol.states li.third {
        background-color: #fccc85; }
      body.home section#map div#map-carousel ol.states li.fourth {
        background-color: #f8deb7; }
      body.home section#map div#map-carousel ol.states li.fifth {
        background-color: #ffefd7; }
      body.home section#map div#map-carousel ol.states li .name,
      body.home section#map div#map-carousel ol.states li .rate {
        display: inline-block; }
      body.home section#map div#map-carousel ol.states li .name {
        font-weight: 700; }
      body.home section#map div#map-carousel ol.states li .rate {
        float: right; }
  body.home section#map .carousel-indicators {
    position: relative;
    right: auto;
    text-align: center;
    top: auto;
    z-index: 1; }
    body.home section#map .carousel-indicators li {
      background-color: #dcdfe3;
      display: inline-block;
      float: none; }
      body.home section#map .carousel-indicators li.active {
        background-color: #758090; }
  body.home section#map h4 {
    color: #2a415e;
    font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.05em;
    margin-bottom: 0.5em; }
    body.home section#map h4#last-100 {
      font-size: 24px; }
  body.home section#map .map .background {
    fill: none;
    pointer-events: all; }
  body.home section#map .map #states {
    fill: #dae0e8;
    stroke: #fff;
    stroke-width: 1.5px; }
    body.home section#map .map #states .third {
      fill: #ffefd7; }
    body.home section#map .map #states .second {
      fill: #fbd295; }
    body.home section#map .map #states .first {
      fill: #f8a021; }
    body.home section#map .map #states .fifthOfFive {
      fill: #ffefd7; }
    body.home section#map .map #states .fourthOfFive {
      fill: #f8deb7; }
    body.home section#map .map #states .thirdOfFive {
      fill: #fccc85; }
    body.home section#map .map #states .secondOfFive {
      fill: #faba5b; }
    body.home section#map .map #states .firstOfFive {
      fill: #f8a021; }
  body.home section#map .map circle {
    fill: #FBB261;
    fill-opacity: .8;
    stroke: #fff; }
body.home section#tools-in-action {
  background: url("/assets/layout/home/tools-in-action-background-a5489bb43ee6f524628bf019267f3de1cc794deb3ea7677f2d0bee7ee9817b90.png") no-repeat #009CDE;
  background-position-x: center;
  padding-top: 85px;
  padding-bottom: 99px; }
  body.home section#tools-in-action h2 {
    color: #fff;
    font-size: 46px;
    line-height: 126%;
    margin-bottom: 0.5em; }
  body.home section#tools-in-action h3 {
    color: #fff; }
  body.home section#tools-in-action p {
    color: #cbeafd;
    font-size: 16px;
    line-height: 162.5%; }
    body.home section#tools-in-action p strong {
      color: #fff;
      font-size: 17px; }
    body.home section#tools-in-action p.note {
      color: #fff;
      font-size: 14px; }
    body.home section#tools-in-action p .btn-large {
      margin: 2.5em 0em 0.75em; }
  body.home section#tools-in-action hr {
    border-top: 1px solid #80ceef;
    border-bottom: 1px solid #80ceef;
    margin-bottom: 20px;
    width: 7em; }
body.home section#grassroots {
  background-color: #fff;
  padding-top: 50px;
  padding-bottom: 40px; }
  body.home section#grassroots h2 {
    color: #2a415e;
    font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 152%;
    text-align: center; }
  body.home section#grassroots h3 {
    color: #50657a;
    text-align: center; }
  body.home section#grassroots p {
    margin-top: 2.5em;
    text-align: center; }
  body.home section#grassroots hr {
    border-top: 1px solid #b9c0ce;
    border-bottom: 1px solid #b9c0ce;
    margin: 0px auto 20px;
    text-align: center;
    width: 7em; }
body.home section#grassroots-photo {
  background: url("/assets/layout/home/grassroots-background-7136e8c4bd3eac5bc7124aef51ec534779d2b2cb74ba77e63533eb57afce4436.jpg") no-repeat #009CDE;
  background-position: center;
  min-height: 543px;
  padding-top: 155px;
  position: relative; }
  body.home section#grassroots-photo .triangle-down {
    border-top-color: #fff; }
  body.home section#grassroots-photo .carousel-inner {
    min-height: 400px; }
  body.home section#grassroots-photo blockquote {
    border-radius: 5pt;
    background: rgba(0, 0, 0, 0.5);
    border: 0px;
    color: #fff;
    font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 130%;
    margin: 0px;
    max-width: 890px;
    opacity: 130;
    padding: 0.85em; }
  body.home section#grassroots-photo blockquote + .triangle-down {
    border-top-color: rgba(0, 0, 0, 0.5);
    left: 50px;
    position: relative; }
  body.home section#grassroots-photo .source {
    padding-bottom: 5px; }
    body.home section#grassroots-photo .source .logo {
      border-radius: 31px;
      background: #f1f3f6;
      display: inline-block;
      height: 62px;
      left: 50px;
      line-height: 62px;
      margin-right: 1em;
      position: relative;
      top: 5px;
      text-align: center;
      width: 62px; }
      body.home section#grassroots-photo .source .logo img {
        vertical-align: middle; }
    body.home section#grassroots-photo .source .name {
      color: #fff;
      display: inline-block;
      font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 133%;
      position: relative;
      left: 50px;
      top: 5px; }
  body.home section#grassroots-photo .carousel-indicators {
    margin-top: 75px;
    position: relative;
    right: auto;
    text-align: center;
    top: auto;
    z-index: 1; }
    body.home section#grassroots-photo .carousel-indicators li {
      display: inline-block;
      float: none; }
body.home .arrow-down {
  border-radius: 6px 6px 0px 0px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  display: block;
  font-size: 2.5em;
  height: 40px;
  left: 50%;
  margin-left: -25px;
  position: absolute;
  text-align: center;
  width: 50px; }
body.home .arrow-down.bottom {
  bottom: 0px;
  line-height: 38px; }
body.home .arrow-down img {
  width: 20px; }

@media (max-width: 767px) {
  body.home #theBigNumber {
    display: none; }
  body.home section#home-top {
    padding-top: 85px;
    padding-bottom: 101px; }
    body.home section#home-top h2 {
      font-size: 42px; }
  body.home section#why-better .btn {
    max-width: 150px; }
  body.home section#why-better .features .span6 {
    display: block;
    height: auto; }
    body.home section#why-better .features .span6 p {
      display: block;
      vertical-align: baseline; }
  body.home section#map div#map-carousel .carousel-inner {
    min-height: 0px; }
  body.home section#meet-express-lane {
    padding-bottom: 96px; }
    body.home section#meet-express-lane h3 {
      text-align: center; }
    body.home section#meet-express-lane hr {
      margin: 0px auto 20px;
      text-align: center; }
  body.home section#tools-in-action h3 {
    text-align: center; }
  body.home section#tools-in-action hr {
    margin: 0px auto 20px;
    text-align: center; }
  body.home section#grassroots-photo .carousel-inner {
    min-height: 0px; }
  body.home section#grassroots-photo blockquote {
    font-size: 22px;
    position: static; }
  body.home section#grassroots-photo .source .logo {
    position: static; }
  body.home section#grassroots-photo .source .name {
    position: static; } }
/*doc
---
title: Color Scheme
name: colors
category: basics
---
Within Indigo, we use a combination of the Bootstrap color scheme and the following brand colors:


$navy:          #1c2345;
$cerulean:      #009CDE;
$black:         #000000;
$pewter:        #666666;

$sky:           #70B2E3;
$grass:         #9BCB58;
$kiwi:          #C0E391;
$tangerine:     #FBB261;
$fuschia:       #E50061;
$steel:         #ACAEB0;

$cloud:         #BFE6FB;
$lime:          #E5EEAE;
$manila:        #FFE8AE;
$platnum:       #ECEDF0;
$silver:        #C9CDD4;

*/
/*doc
---
title: Color Scheme - New Branding
name: colors-new
category: basics
---

ActBlue's branding uses a three-tiered color scheme.

### Primary:

CERULEAN: #009CDE
DUSK: #3B4A91
MIDNIGHT: #1C2345
GREYSCALE: #666666

### Secondary:

SKY: #70B2E3
GRASS: #9BCB58
KIWI: #C0E391
TANGERINE: #FBB261
FUSCHIA: #E50061
STEEL: #ACAEB0

### Tertiary:

CLOUD: #BFE6FB
LIME: #E5EEAE
MANILA: #FFE8AE
PLATINUM: #ECEDF0
SILVER: #C9CDD4

*/
/*doc
---
title: Color Scheme - Color/Concept Associations
name: colors-associations
category: basics
---

Specific ActBlue features may be persistently associated with a given color.

ActBlue Express: TANGERINE

*/
.bg-alt {
  background-color: #F0F0F0; }

a.bg-alt:hover,
a.bg-alt:focus {
  background-color: #d7d7d7; }

.bg-warning {
  background-color: #fcf8e3; }

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5; }

.bg-info {
  background-color: #d9edf7; }

a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee; }

.table {
  width: 100%;
  margin-bottom: 21px; }
  .table th,
  .table td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table th {
    font-weight: bold; }
  .table thead th {
    vertical-align: bottom; }
  .table caption + thead tr:first-child th,
  .table caption + thead tr:first-child td,
  .table colgroup + thead tr:first-child th,
  .table colgroup + thead tr:first-child td,
  .table thead:first-child tr:first-child th,
  .table thead:first-child tr:first-child td {
    border-top: 0; }
  .table tbody + tbody {
    border-top: 2px solid #ddd; }
  .table .number {
    text-align: right; }
  .table .table {
    background-color: #fff; }

.table-condensed {
  width: 100%;
  margin-bottom: 21px; }
  .table-condensed th,
  .table-condensed td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table-condensed th {
    font-weight: bold; }
  .table-condensed thead th {
    vertical-align: bottom; }
  .table-condensed caption + thead tr:first-child th,
  .table-condensed caption + thead tr:first-child td,
  .table-condensed colgroup + thead tr:first-child th,
  .table-condensed colgroup + thead tr:first-child td,
  .table-condensed thead:first-child tr:first-child th,
  .table-condensed thead:first-child tr:first-child td {
    border-top: 0; }
  .table-condensed tbody + tbody {
    border-top: 2px solid #ddd; }
  .table-condensed .number {
    text-align: right; }
  .table-condensed th,
  .table-condensed td {
    padding: 4px 5px; }
  .table-condensed th {
    color: #666;
    font-weight: 400;
    border-bottom: 2px solid #CCC; }

/*doc
---
title: Grid System - Old Style
name: bootstrap-grid
category: grid
---
The "old" Indigo branding uses the Bootstrap grid, generally with Bootstrap classes in markup.
*/
/*doc
---
title: Grid System - New Style
name: nouveau-grid
category: grid
---

The "new" Indigo branding uses the Bootstrap grid. Where feasible, use of the SCSS mixins `bootstrap-span` and `bootstrap-offset` is preferred over putting Bootstrap classes in markup.

If the Bootstrap grid does not cooperate nicely with a given design, it may be the design's fault. Mike is generally happy to work with ATS to resolve these issues.

*/
/*doc
---
title: Color Scheme
name: colors
category: basics
---
Within Indigo, we use a combination of the Bootstrap color scheme and the following brand colors:


$navy:          #1c2345;
$cerulean:      #009CDE;
$black:         #000000;
$pewter:        #666666;

$sky:           #70B2E3;
$grass:         #9BCB58;
$kiwi:          #C0E391;
$tangerine:     #FBB261;
$fuschia:       #E50061;
$steel:         #ACAEB0;

$cloud:         #BFE6FB;
$lime:          #E5EEAE;
$manila:        #FFE8AE;
$platnum:       #ECEDF0;
$silver:        #C9CDD4;

*/
/*doc
---
title: Color Scheme - New Branding
name: colors-new
category: basics
---

ActBlue's branding uses a three-tiered color scheme.

### Primary:

CERULEAN: #009CDE
DUSK: #3B4A91
MIDNIGHT: #1C2345
GREYSCALE: #666666

### Secondary:

SKY: #70B2E3
GRASS: #9BCB58
KIWI: #C0E391
TANGERINE: #FBB261
FUSCHIA: #E50061
STEEL: #ACAEB0

### Tertiary:

CLOUD: #BFE6FB
LIME: #E5EEAE
MANILA: #FFE8AE
PLATINUM: #ECEDF0
SILVER: #C9CDD4

*/
/*doc
---
title: Color Scheme - Color/Concept Associations
name: colors-associations
category: basics
---

Specific ActBlue features may be persistently associated with a given color.

ActBlue Express: TANGERINE

*/
.bg-alt {
  background-color: #F0F0F0; }

a.bg-alt:hover,
a.bg-alt:focus {
  background-color: #d7d7d7; }

.bg-warning {
  background-color: #fcf8e3; }

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5; }

.bg-info {
  background-color: #d9edf7; }

a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee; }

.table {
  width: 100%;
  margin-bottom: 21px; }
  .table th,
  .table td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table th {
    font-weight: bold; }
  .table thead th {
    vertical-align: bottom; }
  .table caption + thead tr:first-child th,
  .table caption + thead tr:first-child td,
  .table colgroup + thead tr:first-child th,
  .table colgroup + thead tr:first-child td,
  .table thead:first-child tr:first-child th,
  .table thead:first-child tr:first-child td {
    border-top: 0; }
  .table tbody + tbody {
    border-top: 2px solid #ddd; }
  .table .number {
    text-align: right; }
  .table .table {
    background-color: #fff; }

.table-condensed {
  width: 100%;
  margin-bottom: 21px; }
  .table-condensed th,
  .table-condensed td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table-condensed th {
    font-weight: bold; }
  .table-condensed thead th {
    vertical-align: bottom; }
  .table-condensed caption + thead tr:first-child th,
  .table-condensed caption + thead tr:first-child td,
  .table-condensed colgroup + thead tr:first-child th,
  .table-condensed colgroup + thead tr:first-child td,
  .table-condensed thead:first-child tr:first-child th,
  .table-condensed thead:first-child tr:first-child td {
    border-top: 0; }
  .table-condensed tbody + tbody {
    border-top: 2px solid #ddd; }
  .table-condensed .number {
    text-align: right; }
  .table-condensed th,
  .table-condensed td {
    padding: 4px 5px; }
  .table-condensed th {
    color: #666;
    font-weight: 400;
    border-bottom: 2px solid #CCC; }

/*doc
---
title: Grid System - Old Style
name: bootstrap-grid
category: grid
---
The "old" Indigo branding uses the Bootstrap grid, generally with Bootstrap classes in markup.
*/
/*doc
---
title: Grid System - New Style
name: nouveau-grid
category: grid
---

The "new" Indigo branding uses the Bootstrap grid. Where feasible, use of the SCSS mixins `bootstrap-span` and `bootstrap-offset` is preferred over putting Bootstrap classes in markup.

If the Bootstrap grid does not cooperate nicely with a given design, it may be the design's fault. Mike is generally happy to work with ATS to resolve these issues.

*/
body.features .tooltip.top {
  margin-top: -28px; }
body.features div.subnav-wrapper {
  height: 67px; }
body.features section#top {
  background: url("/assets/layout/features/top-background-2e53d9c639df7742126c272b531b74bc699e586a086215aa02f425c377809d23.jpg") #009CDE;
  background-size: cover; }
body.features nav.subnav {
  padding: 16px 0px; }
  body.features nav.subnav li {
    margin: 0px 25px; }
body.features div.feature {
  margin-bottom: 7em; }
  body.features div.feature:first-child {
    margin-top: 80px; }
  body.features div.feature .round-rect-backed-image {
    height: 152px;
    padding: 35px 40px;
    width: 142px; }
  body.features div.feature .span8 {
    display: table;
    height: 222px; }
    body.features div.feature .span8 .feature-content {
      display: table-cell;
      vertical-align: middle; }
body.features h2 {
  color: #2a415e;
  font-size: 46px;
  line-height: 113%; }
body.features p {
  color: #8495a7;
  font-size: 17px;
  line-height: 165%; }
body.features section#conversion-rates h2 {
  font-size: 32px;
  margin-bottom: 0.75em; }
body.features section#conversion-rates .btn-large {
  width: 380px; }

@media only screen and (max-width: 767px) {
  body.features div.subnav-wrapper {
    height: auto; }
  body.features nav.subnav ul li {
    display: inline-block; }
  body.features .feature {
    padding-left: 40px;
    padding-right: 40px;
    text-align: center;
    width: auto; }
    body.features .feature .round-rect-backed-image {
      margin-bottom: 2em; }
    body.features .feature .span8 {
      display: block;
      height: auto; }
      body.features .feature .span8 .feature-content {
        display: block;
        vertical-align: baseline; } }
/*doc
---
title: Color Scheme
name: colors
category: basics
---
Within Indigo, we use a combination of the Bootstrap color scheme and the following brand colors:


$navy:          #1c2345;
$cerulean:      #009CDE;
$black:         #000000;
$pewter:        #666666;

$sky:           #70B2E3;
$grass:         #9BCB58;
$kiwi:          #C0E391;
$tangerine:     #FBB261;
$fuschia:       #E50061;
$steel:         #ACAEB0;

$cloud:         #BFE6FB;
$lime:          #E5EEAE;
$manila:        #FFE8AE;
$platnum:       #ECEDF0;
$silver:        #C9CDD4;

*/
/*doc
---
title: Color Scheme - New Branding
name: colors-new
category: basics
---

ActBlue's branding uses a three-tiered color scheme.

### Primary:

CERULEAN: #009CDE
DUSK: #3B4A91
MIDNIGHT: #1C2345
GREYSCALE: #666666

### Secondary:

SKY: #70B2E3
GRASS: #9BCB58
KIWI: #C0E391
TANGERINE: #FBB261
FUSCHIA: #E50061
STEEL: #ACAEB0

### Tertiary:

CLOUD: #BFE6FB
LIME: #E5EEAE
MANILA: #FFE8AE
PLATINUM: #ECEDF0
SILVER: #C9CDD4

*/
/*doc
---
title: Color Scheme - Color/Concept Associations
name: colors-associations
category: basics
---

Specific ActBlue features may be persistently associated with a given color.

ActBlue Express: TANGERINE

*/
.bg-alt {
  background-color: #F0F0F0; }

a.bg-alt:hover,
a.bg-alt:focus {
  background-color: #d7d7d7; }

.bg-warning {
  background-color: #fcf8e3; }

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5; }

.bg-info {
  background-color: #d9edf7; }

a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee; }

.table {
  width: 100%;
  margin-bottom: 21px; }
  .table th,
  .table td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table th {
    font-weight: bold; }
  .table thead th {
    vertical-align: bottom; }
  .table caption + thead tr:first-child th,
  .table caption + thead tr:first-child td,
  .table colgroup + thead tr:first-child th,
  .table colgroup + thead tr:first-child td,
  .table thead:first-child tr:first-child th,
  .table thead:first-child tr:first-child td {
    border-top: 0; }
  .table tbody + tbody {
    border-top: 2px solid #ddd; }
  .table .number {
    text-align: right; }
  .table .table {
    background-color: #fff; }

.table-condensed {
  width: 100%;
  margin-bottom: 21px; }
  .table-condensed th,
  .table-condensed td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table-condensed th {
    font-weight: bold; }
  .table-condensed thead th {
    vertical-align: bottom; }
  .table-condensed caption + thead tr:first-child th,
  .table-condensed caption + thead tr:first-child td,
  .table-condensed colgroup + thead tr:first-child th,
  .table-condensed colgroup + thead tr:first-child td,
  .table-condensed thead:first-child tr:first-child th,
  .table-condensed thead:first-child tr:first-child td {
    border-top: 0; }
  .table-condensed tbody + tbody {
    border-top: 2px solid #ddd; }
  .table-condensed .number {
    text-align: right; }
  .table-condensed th,
  .table-condensed td {
    padding: 4px 5px; }
  .table-condensed th {
    color: #666;
    font-weight: 400;
    border-bottom: 2px solid #CCC; }

/*doc
---
title: Grid System - Old Style
name: bootstrap-grid
category: grid
---
The "old" Indigo branding uses the Bootstrap grid, generally with Bootstrap classes in markup.
*/
/*doc
---
title: Grid System - New Style
name: nouveau-grid
category: grid
---

The "new" Indigo branding uses the Bootstrap grid. Where feasible, use of the SCSS mixins `bootstrap-span` and `bootstrap-offset` is preferred over putting Bootstrap classes in markup.

If the Bootstrap grid does not cooperate nicely with a given design, it may be the design's fault. Mike is generally happy to work with ATS to resolve these issues.

*/
/*doc
---
title: Color Scheme
name: colors
category: basics
---
Within Indigo, we use a combination of the Bootstrap color scheme and the following brand colors:


$navy:          #1c2345;
$cerulean:      #009CDE;
$black:         #000000;
$pewter:        #666666;

$sky:           #70B2E3;
$grass:         #9BCB58;
$kiwi:          #C0E391;
$tangerine:     #FBB261;
$fuschia:       #E50061;
$steel:         #ACAEB0;

$cloud:         #BFE6FB;
$lime:          #E5EEAE;
$manila:        #FFE8AE;
$platnum:       #ECEDF0;
$silver:        #C9CDD4;

*/
/*doc
---
title: Color Scheme - New Branding
name: colors-new
category: basics
---

ActBlue's branding uses a three-tiered color scheme.

### Primary:

CERULEAN: #009CDE
DUSK: #3B4A91
MIDNIGHT: #1C2345
GREYSCALE: #666666

### Secondary:

SKY: #70B2E3
GRASS: #9BCB58
KIWI: #C0E391
TANGERINE: #FBB261
FUSCHIA: #E50061
STEEL: #ACAEB0

### Tertiary:

CLOUD: #BFE6FB
LIME: #E5EEAE
MANILA: #FFE8AE
PLATINUM: #ECEDF0
SILVER: #C9CDD4

*/
/*doc
---
title: Color Scheme - Color/Concept Associations
name: colors-associations
category: basics
---

Specific ActBlue features may be persistently associated with a given color.

ActBlue Express: TANGERINE

*/
.bg-alt {
  background-color: #F0F0F0; }

a.bg-alt:hover,
a.bg-alt:focus {
  background-color: #d7d7d7; }

.bg-warning {
  background-color: #fcf8e3; }

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5; }

.bg-info {
  background-color: #d9edf7; }

a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee; }

.table {
  width: 100%;
  margin-bottom: 21px; }
  .table th,
  .table td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table th {
    font-weight: bold; }
  .table thead th {
    vertical-align: bottom; }
  .table caption + thead tr:first-child th,
  .table caption + thead tr:first-child td,
  .table colgroup + thead tr:first-child th,
  .table colgroup + thead tr:first-child td,
  .table thead:first-child tr:first-child th,
  .table thead:first-child tr:first-child td {
    border-top: 0; }
  .table tbody + tbody {
    border-top: 2px solid #ddd; }
  .table .number {
    text-align: right; }
  .table .table {
    background-color: #fff; }

.table-condensed {
  width: 100%;
  margin-bottom: 21px; }
  .table-condensed th,
  .table-condensed td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table-condensed th {
    font-weight: bold; }
  .table-condensed thead th {
    vertical-align: bottom; }
  .table-condensed caption + thead tr:first-child th,
  .table-condensed caption + thead tr:first-child td,
  .table-condensed colgroup + thead tr:first-child th,
  .table-condensed colgroup + thead tr:first-child td,
  .table-condensed thead:first-child tr:first-child th,
  .table-condensed thead:first-child tr:first-child td {
    border-top: 0; }
  .table-condensed tbody + tbody {
    border-top: 2px solid #ddd; }
  .table-condensed .number {
    text-align: right; }
  .table-condensed th,
  .table-condensed td {
    padding: 4px 5px; }
  .table-condensed th {
    color: #666;
    font-weight: 400;
    border-bottom: 2px solid #CCC; }

/*doc
---
title: Grid System - Old Style
name: bootstrap-grid
category: grid
---
The "old" Indigo branding uses the Bootstrap grid, generally with Bootstrap classes in markup.
*/
/*doc
---
title: Grid System - New Style
name: nouveau-grid
category: grid
---

The "new" Indigo branding uses the Bootstrap grid. Where feasible, use of the SCSS mixins `bootstrap-span` and `bootstrap-offset` is preferred over putting Bootstrap classes in markup.

If the Bootstrap grid does not cooperate nicely with a given design, it may be the design's fault. Mike is generally happy to work with ATS to resolve these issues.

*/
body.pricing h2 {
  color: #2a415e;
  font-size: 46px; }
body.pricing h3 {
  color: #2a415e;
  font-family: "Montserrat", "Trebuchet MS", Tahoma, Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase; }
body.pricing h4 {
  color: #50657a;
  font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 158%;
  text-align: center; }
  body.pricing h4 a, body.pricing h4 a:link, body.pricing h4 a:visited, body.pricing h4 a:active {
    color: #009CDE; }
    body.pricing h4 a:hover, body.pricing h4 a:focus, body.pricing h4 a:link:hover, body.pricing h4 a:link:focus, body.pricing h4 a:visited:hover, body.pricing h4 a:visited:focus, body.pricing h4 a:active:hover, body.pricing h4 a:active:focus {
      color: #006692; }
body.pricing section#top {
  background-size: cover;
  background: url("/assets/layout/pricing/top-background-d885efe5053dae91506f097efe9e893bada07fb06a5e97e03ffcf5546b2cff69.jpg") #009CDE;
  background-position: center; }
body.pricing div.subnav-wrapper {
  height: 66px; }
body.pricing section#get-started h2 {
  margin-top: 2.2em;
  margin-bottom: 0.6em;
  text-align: center; }
body.pricing section#get-started h4 {
  margin-bottom: 3em; }
body.pricing section#get-started h3 {
  text-align: center; }
body.pricing section#get-started p {
  color: #8495a7;
  font-size: 16px;
  line-height: 162.5%; }
body.pricing section#features {
  background-color: #eff3f6;
  padding-top: 110px;
  padding-bottom: 75px; }
  body.pricing section#features h2 {
    text-align: center; }
  body.pricing section#features p {
    color: #8495a7;
    font-size: 16px;
    text-align: center; }
body.pricing section#just-the-beginning {
  background: url("/assets/layout/pricing/beginning-background-81389c7fca80e99c8f69b17c9120a4852e60491d24b51c444d94c73eee311912.jpg") #eff3f6;
  padding-top: 150px;
  padding-bottom: 140px;
  position: relative; }
  body.pricing section#just-the-beginning h2 {
    color: #fff;
    line-height: 126%; }
  body.pricing section#just-the-beginning p {
    color: #fff;
    font-size: 18px; }
  body.pricing section#just-the-beginning .btn {
    margin-top: 1em; }
body.pricing section#we-handle-the-details {
  padding-top: 140px;
  text-align: center; }
  body.pricing section#we-handle-the-details .span4 {
    margin-left: 0px;
    padding: 0em 3em; }
  body.pricing section#we-handle-the-details .round-rect-backed-image {
    height: 114px;
    padding: 28px 40px;
    width: 142px; }
    body.pricing section#we-handle-the-details .round-rect-backed-image img {
      max-height: 100%; }
  body.pricing section#we-handle-the-details .details-copy-container {
    padding: 2em 0; }
  body.pricing section#we-handle-the-details h3 {
    font-size: 16px;
    text-align: center; }
  body.pricing section#we-handle-the-details p {
    color: #8495a7;
    font-size: 14px; }
  body.pricing section#we-handle-the-details .divided {
    margin-top: 2em; }
    body.pricing section#we-handle-the-details .divided div {
      border-right: 1px solid #edeff1; }
    body.pricing section#we-handle-the-details .divided div:last-child {
      border-right: 0px; }
body.pricing section#getting-your-money {
  background-color: #eff3f6;
  padding-top: 125px; }
  body.pricing section#getting-your-money h2 {
    text-align: center; }
  body.pricing section#getting-your-money h3 {
    margin-bottom: 9px; }
  body.pricing section#getting-your-money h3 + p {
    margin-top: 0px; }
  body.pricing section#getting-your-money p, body.pricing section#getting-your-money li {
    color: #8495a7;
    font-size: 16px;
    line-height: 162.5%; }
  body.pricing section#getting-your-money li {
    list-style: none;
    padding-left: 1em;
    text-indent: -1em; }
    body.pricing section#getting-your-money li:before {
      content: "◼︎ ";
      color: #009CDE; }
    body.pricing section#getting-your-money li::marker {
      color: #009CDE; }
  body.pricing section#getting-your-money ul {
    margin-left: 0px; }
  body.pricing section#getting-your-money .image-row {
    margin-top: 3em; }
  body.pricing section#getting-your-money .image-row + .image-row {
    margin-top: 2em; }
body.pricing section#who-can-use-actblue {
  padding-top: 125px;
  padding-bottom: 150px; }
  body.pricing section#who-can-use-actblue .span5 {
    padding-right: 4.5em; }
  body.pricing section#who-can-use-actblue .span7 .span6 {
    padding-right: 5em; }
  body.pricing section#who-can-use-actblue h2 {
    text-align: center; }
  body.pricing section#who-can-use-actblue h3 {
    line-height: 135%;
    margin-top: 3em;
    margin-bottom: 1.5em; }
  body.pricing section#who-can-use-actblue h5 {
    color: #50657a;
    font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 133%; }
  body.pricing section#who-can-use-actblue .intro p {
    color: #50657a;
    font-size: 16px;
    line-height: 162.5%;
    text-align: center; }
  body.pricing section#who-can-use-actblue a, body.pricing section#who-can-use-actblue a:link, body.pricing section#who-can-use-actblue a:visited, body.pricing section#who-can-use-actblue a:active, body.pricing section#who-can-use-actblue a:hover, body.pricing section#who-can-use-actblue a:focus {
    color: #009CDE;
    text-decoration: none; }
  body.pricing section#who-can-use-actblue p {
    color: #8495a7;
    font-size: 16px;
    line-height: 162.5%; }
    body.pricing section#who-can-use-actblue p.note {
      font-size: 13px;
      line-height: 138%; }
  body.pricing section#who-can-use-actblue ul {
    margin-left: 0em; }
    body.pricing section#who-can-use-actblue ul.merchant-account-states {
      -webkit-column-width: 100px;
      -moz-column-width: 100px;
      column-width: 100px;
      -webkit-column-gap: 50px;
      -moz-column-gap: 50px;
      column-gap: 50px; }
    body.pricing section#who-can-use-actblue ul ul {
      margin-left: 1em; }
  body.pricing section#who-can-use-actblue li {
    color: #8495a7;
    font-size: 14px;
    line-height: 143%;
    list-style: none; }
body.pricing section#conversion-rates h2 {
  font-size: 32px; }
body.pricing .begin-fundraising h3 {
  font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  margin-bottom: 1em;
  text-align: center;
  text-transform: none !important; }
body.pricing .begin-fundraising hr {
  border-top: 1px solid #b9c0ce;
  border-bottom: 1px solid #b9c0ce;
  margin: 35px auto 25px;
  width: 7em; }
body.pricing .begin-fundraising .btn-large {
  display: block;
  margin: 0px auto 135px;
  width: 380px; }

@media only screen and (max-width: 767px) {
  body.pricing section#just-the-beginning h2 {
    color: #2a415e; }
  body.pricing section#just-the-beginning p {
    color: #8495a7; }
  body.pricing section#we-handle-the-details .span4 {
    padding: 0px; }
  body.pricing section#we-handle-the-details .divided div {
    border-right: 0px; }
  body.pricing section#we-handle-the-details .round-rect-backed-image {
    margin-bottom: 1em; }
  body.pricing section#getting-your-money h3 {
    text-align: center; }
  body.pricing .begin-fundraising .btn-large {
    max-width: 70%; }
  body.pricing section#who-can-use-actblue .span5 {
    padding-right: 0px; }
  body.pricing section#who-can-use-actblue .span7 .span6 {
    padding-right: 0px; }
  body.pricing section#who-can-use-actblue h3 {
    text-align: center; } }
/*doc
---
title: Color Scheme
name: colors
category: basics
---
Within Indigo, we use a combination of the Bootstrap color scheme and the following brand colors:


$navy:          #1c2345;
$cerulean:      #009CDE;
$black:         #000000;
$pewter:        #666666;

$sky:           #70B2E3;
$grass:         #9BCB58;
$kiwi:          #C0E391;
$tangerine:     #FBB261;
$fuschia:       #E50061;
$steel:         #ACAEB0;

$cloud:         #BFE6FB;
$lime:          #E5EEAE;
$manila:        #FFE8AE;
$platnum:       #ECEDF0;
$silver:        #C9CDD4;

*/
/*doc
---
title: Color Scheme - New Branding
name: colors-new
category: basics
---

ActBlue's branding uses a three-tiered color scheme.

### Primary:

CERULEAN: #009CDE
DUSK: #3B4A91
MIDNIGHT: #1C2345
GREYSCALE: #666666

### Secondary:

SKY: #70B2E3
GRASS: #9BCB58
KIWI: #C0E391
TANGERINE: #FBB261
FUSCHIA: #E50061
STEEL: #ACAEB0

### Tertiary:

CLOUD: #BFE6FB
LIME: #E5EEAE
MANILA: #FFE8AE
PLATINUM: #ECEDF0
SILVER: #C9CDD4

*/
/*doc
---
title: Color Scheme - Color/Concept Associations
name: colors-associations
category: basics
---

Specific ActBlue features may be persistently associated with a given color.

ActBlue Express: TANGERINE

*/
.bg-alt {
  background-color: #F0F0F0; }

a.bg-alt:hover,
a.bg-alt:focus {
  background-color: #d7d7d7; }

.bg-warning {
  background-color: #fcf8e3; }

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5; }

.bg-info {
  background-color: #d9edf7; }

a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee; }

.table {
  width: 100%;
  margin-bottom: 21px; }
  .table th,
  .table td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table th {
    font-weight: bold; }
  .table thead th {
    vertical-align: bottom; }
  .table caption + thead tr:first-child th,
  .table caption + thead tr:first-child td,
  .table colgroup + thead tr:first-child th,
  .table colgroup + thead tr:first-child td,
  .table thead:first-child tr:first-child th,
  .table thead:first-child tr:first-child td {
    border-top: 0; }
  .table tbody + tbody {
    border-top: 2px solid #ddd; }
  .table .number {
    text-align: right; }
  .table .table {
    background-color: #fff; }

.table-condensed {
  width: 100%;
  margin-bottom: 21px; }
  .table-condensed th,
  .table-condensed td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table-condensed th {
    font-weight: bold; }
  .table-condensed thead th {
    vertical-align: bottom; }
  .table-condensed caption + thead tr:first-child th,
  .table-condensed caption + thead tr:first-child td,
  .table-condensed colgroup + thead tr:first-child th,
  .table-condensed colgroup + thead tr:first-child td,
  .table-condensed thead:first-child tr:first-child th,
  .table-condensed thead:first-child tr:first-child td {
    border-top: 0; }
  .table-condensed tbody + tbody {
    border-top: 2px solid #ddd; }
  .table-condensed .number {
    text-align: right; }
  .table-condensed th,
  .table-condensed td {
    padding: 4px 5px; }
  .table-condensed th {
    color: #666;
    font-weight: 400;
    border-bottom: 2px solid #CCC; }

/*doc
---
title: Grid System - Old Style
name: bootstrap-grid
category: grid
---
The "old" Indigo branding uses the Bootstrap grid, generally with Bootstrap classes in markup.
*/
/*doc
---
title: Grid System - New Style
name: nouveau-grid
category: grid
---

The "new" Indigo branding uses the Bootstrap grid. Where feasible, use of the SCSS mixins `bootstrap-span` and `bootstrap-offset` is preferred over putting Bootstrap classes in markup.

If the Bootstrap grid does not cooperate nicely with a given design, it may be the design's fault. Mike is generally happy to work with ATS to resolve these issues.

*/
/*doc
---
title: Color Scheme
name: colors
category: basics
---
Within Indigo, we use a combination of the Bootstrap color scheme and the following brand colors:


$navy:          #1c2345;
$cerulean:      #009CDE;
$black:         #000000;
$pewter:        #666666;

$sky:           #70B2E3;
$grass:         #9BCB58;
$kiwi:          #C0E391;
$tangerine:     #FBB261;
$fuschia:       #E50061;
$steel:         #ACAEB0;

$cloud:         #BFE6FB;
$lime:          #E5EEAE;
$manila:        #FFE8AE;
$platnum:       #ECEDF0;
$silver:        #C9CDD4;

*/
/*doc
---
title: Color Scheme - New Branding
name: colors-new
category: basics
---

ActBlue's branding uses a three-tiered color scheme.

### Primary:

CERULEAN: #009CDE
DUSK: #3B4A91
MIDNIGHT: #1C2345
GREYSCALE: #666666

### Secondary:

SKY: #70B2E3
GRASS: #9BCB58
KIWI: #C0E391
TANGERINE: #FBB261
FUSCHIA: #E50061
STEEL: #ACAEB0

### Tertiary:

CLOUD: #BFE6FB
LIME: #E5EEAE
MANILA: #FFE8AE
PLATINUM: #ECEDF0
SILVER: #C9CDD4

*/
/*doc
---
title: Color Scheme - Color/Concept Associations
name: colors-associations
category: basics
---

Specific ActBlue features may be persistently associated with a given color.

ActBlue Express: TANGERINE

*/
.bg-alt {
  background-color: #F0F0F0; }

a.bg-alt:hover,
a.bg-alt:focus {
  background-color: #d7d7d7; }

.bg-warning {
  background-color: #fcf8e3; }

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5; }

.bg-info {
  background-color: #d9edf7; }

a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee; }

.table {
  width: 100%;
  margin-bottom: 21px; }
  .table th,
  .table td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table th {
    font-weight: bold; }
  .table thead th {
    vertical-align: bottom; }
  .table caption + thead tr:first-child th,
  .table caption + thead tr:first-child td,
  .table colgroup + thead tr:first-child th,
  .table colgroup + thead tr:first-child td,
  .table thead:first-child tr:first-child th,
  .table thead:first-child tr:first-child td {
    border-top: 0; }
  .table tbody + tbody {
    border-top: 2px solid #ddd; }
  .table .number {
    text-align: right; }
  .table .table {
    background-color: #fff; }

.table-condensed {
  width: 100%;
  margin-bottom: 21px; }
  .table-condensed th,
  .table-condensed td {
    padding: 8px;
    line-height: 21px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd; }
  .table-condensed th {
    font-weight: bold; }
  .table-condensed thead th {
    vertical-align: bottom; }
  .table-condensed caption + thead tr:first-child th,
  .table-condensed caption + thead tr:first-child td,
  .table-condensed colgroup + thead tr:first-child th,
  .table-condensed colgroup + thead tr:first-child td,
  .table-condensed thead:first-child tr:first-child th,
  .table-condensed thead:first-child tr:first-child td {
    border-top: 0; }
  .table-condensed tbody + tbody {
    border-top: 2px solid #ddd; }
  .table-condensed .number {
    text-align: right; }
  .table-condensed th,
  .table-condensed td {
    padding: 4px 5px; }
  .table-condensed th {
    color: #666;
    font-weight: 400;
    border-bottom: 2px solid #CCC; }

/*doc
---
title: Grid System - Old Style
name: bootstrap-grid
category: grid
---
The "old" Indigo branding uses the Bootstrap grid, generally with Bootstrap classes in markup.
*/
/*doc
---
title: Grid System - New Style
name: nouveau-grid
category: grid
---

The "new" Indigo branding uses the Bootstrap grid. Where feasible, use of the SCSS mixins `bootstrap-span` and `bootstrap-offset` is preferred over putting Bootstrap classes in markup.

If the Bootstrap grid does not cooperate nicely with a given design, it may be the design's fault. Mike is generally happy to work with ATS to resolve these issues.

*/
body.express {
  /*========================================
  =            INDIVIDUAL ITEMS            =
  ========================================*/
  /*===============================
  =            CALLOUT            =
  ===============================*/
  /*===================================
  =            NETWORK WEB            =
  ===================================*/
  /*========================================
  =            HIGH CONVERSIONS            =
  ========================================*/
  /*============================
  =            DEMO            =
  ============================*/
  /*=================================
  =            BEST PART            =
  =================================*/
  /*=====================================
  =            ONE STOP SHOP            =
  =====================================*/
  /*==============================
  =            ONWARD            =
  ==============================*/ }
  body.express #site-wrapper p {
    font-size: 17px;
    letter-spacing: -0.01em;
    line-height: 165%; }
  body.express .container {
    margin: 0em auto;
    max-width: 980px; }
  body.express h3 {
    margin-bottom: 24px; }
  body.express #callout {
    background-size: cover;
    background-color: #80807c;
    background-image: url("/assets/layout/express/background-callout-large-cc8223493c8a1a23e10abdf772fbe06dfa52cb28f9bd92eed9de588693674f9e.jpg");
    background-position: 50% 0;
    background-repeat: no-repeat;
    padding-top: 190px;
    padding-bottom: 163px;
    position: relative;
    text-align: center; }
    body.express #callout h1 {
      color: #fff;
      font-size: 40px;
      line-height: 135%;
      margin: 25px 0px 0px 0px; }
    body.express #callout .logo {
      display: block;
      margin: 0 auto;
      width: 308px; }
      body.express #callout .logo img {
        width: 100%;
        height: auto; }
    body.express #callout a.btn, body.express #callout a.btn:link, body.express #callout a.btn:visited, body.express #callout a.btn:active {
      margin-top: 2em;
      margin-bottom: 3em; }
      body.express #callout a.btn:hover, body.express #callout a.btn:focus, body.express #callout a.btn:link:hover, body.express #callout a.btn:link:focus, body.express #callout a.btn:visited:hover, body.express #callout a.btn:visited:focus, body.express #callout a.btn:active:hover, body.express #callout a.btn:active:focus {
        background: #f79304; }
  body.express #network-web {
    text-align: center;
    padding-bottom: 85px;
    background-color: #00a7e2;
    background-image: url("/assets/layout/express/background-network-web-large-530256c221f37f9d22195d2e7cb9c8594faeaad15b11ebeaa05e792a78612bc9.jpg");
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover; }
    body.express #network-web img.web {
      display: block;
      margin: -16% auto 20px;
      position: relative; }
    body.express #network-web h2 {
      color: #fff;
      font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
      font-size: 32px;
      font-weight: 300;
      line-height: 212.5%;
      margin: 0; }
    body.express #network-web p {
      color: #ccebfe;
      margin: 0;
      margin-top: 5px; }
  body.express #high-conversions {
    background: #eff3f6;
    text-align: center;
    padding-top: 65px;
    padding-bottom: 96px;
    overflow: hidden; }
    body.express #high-conversions img.rocket {
      width: 75px;
      display: block;
      margin: 0 auto; }
    body.express #high-conversions h2 {
      color: #2a415e;
      font-size: 46px;
      line-height: 113%;
      margin-top: 30px;
      margin-bottom: 20px; }
    body.express #high-conversions p {
      color: #50657a;
      font-size: 17px;
      margin: 0;
      zoom: 1; }
    body.express #high-conversions .device-sizes {
      margin-top: 30px; }
      body.express #high-conversions .device-sizes img {
        margin: 0 25px;
        width: 65px; }
  body.express #demo {
    background: #fff;
    overflow: hidden;
    padding-top: 90px;
    padding-bottom: 115px;
    position: relative; }
    body.express #demo .container {
      position: relative; }
    body.express #demo img.logo {
      max-width: 75%; }
    body.express #demo img.macbook {
      position: absolute;
      top: 93px;
      right: -75px; }
      body.express #demo img.macbook.animation {
        top: 115px;
        right: 11px; }
    body.express #demo h2 {
      color: #2a415e;
      font-size: 40px;
      line-height: 130%;
      letter-spacing: -0.02em;
      margin: 0;
      margin-top: 17px; }
    body.express #demo h3 {
      color: #50657a;
      font-family: "Montserrat", "Trebuchet MS", Tahoma, Arial, sans-serif;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.2em;
      text-transform: uppercase; }
    body.express #demo hr {
      border-top: 1px solid #a7b2bc;
      border-bottom: 1px solid #a7b2bc;
      margin-top: 0em;
      width: 7em; }
    body.express #demo p {
      color: #50657a;
      margin: 0;
      margin-top: 15px; }
    body.express #demo .span5 {
      padding-left: 55px; }
  body.express #best-part {
    background-size: cover;
    background-color: #80807c;
    background-image: url("/assets/layout/express/background-best-part-large-4de2715068458dcf905d2c59e0b06d894013843475db556844b84e45b86cb35d.jpg");
    background-position: 50% 0;
    background-repeat: no-repeat;
    padding-top: 140px;
    padding-bottom: 155px; }
    body.express #best-part .span9 {
      padding-left: 40px; }
    body.express #best-part h2 {
      color: #fff;
      font-size: 46px;
      line-height: 126%;
      letter-spacing: -0.02em; }
    body.express #best-part h3 {
      color: #fff;
      font-family: "Montserrat", "Trebuchet MS", Tahoma, Arial, sans-serif;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.2em;
      text-transform: uppercase; }
    body.express #best-part hr {
      border-top: 1px solid #b2b3b4;
      border-bottom: 1px solid #b2b3b4;
      margin-top: 0em;
      width: 7em; }
    body.express #best-part p {
      color: #fff;
      font-size: 16px;
      zoom: 1; }
      body.express #best-part p strong {
        font-size: 18px; }
  body.express #one-stop-shop {
    text-align: center;
    padding-top: 75px;
    padding-bottom: 104px; }
    body.express #one-stop-shop h2 {
      color: #2a415e;
      font-size: 40px;
      margin: 0;
      margin-bottom: 64px;
      text-align: center; }
    body.express #one-stop-shop h3 {
      color: #2a415e;
      font-family: "Montserrat", "Trebuchet MS", Tahoma, Arial, sans-serif;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.2em;
      text-align: center;
      text-transform: uppercase; }
    body.express #one-stop-shop hr {
      border-top: 1px solid #b9c0ce;
      border-bottom: 1px solid #b9c0ce;
      margin: 0px auto 25px;
      width: 7em; }
    body.express #one-stop-shop .span4 {
      border-right: 1px solid #edeff1;
      height: 195px;
      margin-left: 0px; }
      body.express #one-stop-shop .span4.last {
        border: none; }
    body.express #one-stop-shop .stop-box {
      padding: 0px 2em;
      position: relative; }
      body.express #one-stop-shop .stop-box .round-rect-backed-image {
        height: 132px;
        margin: 0px auto;
        padding: 19px 40px;
        width: 142px; }
    body.express #one-stop-shop p {
      color: #50657a;
      font-size: 16px;
      letter-spacing: 0.01em;
      line-height: 137.5%;
      padding: 0 2em; }
  body.express #onward {
    background: #0094d5;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 110px;
    position: relative;
    text-align: center; }
    body.express #onward .triangle-down {
      border-top-color: #fff;
      left: 48%; }
    body.express #onward h3 {
      color: #fff;
      font-size: 28px;
      line-height: 121%;
      margin: 0;
      margin-bottom: 15px;
      text-align: center; }
    body.express #onward a.btn, body.express #onward a.btn:link, body.express #onward a.btn:visited, body.express #onward a.btn:active {
      margin-top: 0.5em;
      width: 210px; }
      body.express #onward a.btn:hover, body.express #onward a.btn:focus, body.express #onward a.btn:link:hover, body.express #onward a.btn:link:focus, body.express #onward a.btn:visited:hover, body.express #onward a.btn:visited:focus, body.express #onward a.btn:active:hover, body.express #onward a.btn:active:focus {
        background: #f79304;
        color: #fff; }

/*=====================================
=            MEDIA QUERIES            =
=====================================*/
@media only screen and (max-width: 1200px) {
  body.express #demo img.macbook {
    right: -65px; }
  body.express #demo img.macbook.animation {
    right: 21px; } }
@media only screen and (max-width: 979px) {
  body.express #network-web img.web {
    margin-top: -17%; }
  body.express #demo {
    padding-bottom: 60px; }
    body.express #demo h2 {
      font-size: 28px;
      line-height: 28px; }
    body.express #demo img.macbook {
      right: -50px;
      width: 525px;
      display: block;
      top: 5px; }
  body.express #best-part h2 {
    font-size: 32px;
    line-height: 40px; }
  body.express #one-stop-shop .container {
    width: 100%; }
  body.express #one-stop-shop p {
    padding: 0; }
  body.express #one-stop-shop .span4 {
    width: 33%;
    margin: 0; }
  body.express #onward .container {
    width: 100%; }
  body.express #demo img.macbook.animation {
    right: 14px;
    width: 397px;
    top: 21px; }
  body.express #best-part {
    padding-top: 60px !important;
    padding-bottom: 60px !important; } }
@media only screen and (max-width: 767px) {
  body.express {
    padding: 0; }
    body.express #demo {
      padding-top: 45px;
      padding-bottom: 0; }
      body.express #demo h3 {
        text-align: center; }
      body.express #demo hr {
        margin: 0px auto 25px;
        text-align: center; }
      body.express #demo img.macbook {
        right: auto;
        left: auto;
        top: auto;
        bottom: -45px;
        position: relative;
        width: 100%; }
    body.express #best-part {
      padding-top: 50px;
      padding-bottom: 50px; }
      body.express #best-part h3 {
        text-align: center; }
      body.express #best-part hr {
        margin: 0px auto 25px;
        text-align: center; }
    body.express #one-stop-shop .span4 {
      width: 100%;
      border: none;
      margin: 0 0 25px; }
      body.express #one-stop-shop .span4 .round-rect-backed-image {
        margin-top: 4em; }
      body.express #one-stop-shop .span4:first-child .round-rect-backed-image {
        margin-top: 0em; }
    body.express #onward {
      padding-bottom: 25px;
      padding-top: 45px; }
      body.express #onward .span5 + .span5 {
        margin-top: 2em; }
      body.express #onward a.btn, body.express #onward a.btn:link, body.express #onward a.btn:visited, body.express #onward a.btn:active {
        max-width: 70%; }
    body.express #demo img.macbook.animation {
      position: absolute;
      top: auto;
      bottom: -1%;
      left: 12%;
      width: 76%; }
    body.express section {
      background-position: 50% 0 !important; }
    body.express #best-part img.chart {
      width: 30%; } }
@media only screen and (max-width: 480px) {
  body.express #callout {
    padding-bottom: 100px; }
  body.express #callout a.logo {
    width: 100%; }
  body.express #callout h1 {
    font-size: 21px;
    line-height: 31px; }
  body.express #network-web h2 {
    font-size: 30px;
    line-height: 42px;
    margin-bottom: 20px; }
  body.express #network-web p {
    font-size: 17px;
    line-height: 28px; }
  body.express #high-conversions .device-sizes img {
    margin: 0 8px; }
  body.express #demo img.macbook.animation {
    bottom: -5%; } }
@media only screen and (max-width: 320px) {
  body.express #callout .logo {
    width: auto; }
  body.express #demo img.macbook.animation {
    bottom: -8%; } }