@charset "UTF-8";
/*

  WHAT IS THIS?
  "sofi-global" is a shared style library for use with SoFi's external-facing apps. *

  IMPORTANT
  Do not edit sofi-global files within individual app repos!

  OVER-RIDING SOFI-GLOBAL STYLES:
  Add styles within stylesheets/app/

  ADDING APP-SPECIFIC STYLES:
  Add styles within stylesheets/app/

  * If you need a change or improvement to sofi-global styles (instead of adding override styles) or want to add a new pattern for global re-use open a ticket for updating the sofi-global style library. Once the library has been updated, import the latest version into your app.

*/
/*

  WHAT IS THIS?
  "sofi-global" is a shared style library for use with SoFi's external-facing apps. *

  IMPORTANT
  Do not edit sofi-global files within individual app repos!

  OVER-RIDING SOFI-GLOBAL STYLES:
  Add styles within stylesheets/app/

  ADDING APP-SPECIFIC STYLES:
  Add styles within stylesheets/app/

  * If you need a change or improvement to sofi-global styles (instead of adding override styles) or want to add a new pattern for global re-use open a ticket for updating the sofi-global style library. Once the library has been updated, import the latest version into your app.

*/
/*
  * Borders
  * Break Points
  * Colors
  * Dimensions
  * Fonts
*/
/*doc
---
title: Font Colors
parent: typography
name: subFontColors
---

See under [Colors][generalColors].
*/
/*doc
---
title: Colors
name: generalColors
category: Base
---

## Sofi Brand Colors

###Primary

<span class="hg-swatch sofi-blue">SoFi Blue</span>
<span class="hg-swatch sofi-accesibility-blue">SoFi Accesibility Blue</span>

### Accent

<span class="hg-swatch yellow-green-360C">Yellow Green</span>
<span class="hg-swatch accent-dark-blue">Accent Dark Blue</span>

<hr>

## Cool Greys

These are generally used as background colors.

<div>
  <figure class="u-display-inline-block u-vertical-align-top">
    <span class="hg-swatch grey-med-dk">Grey, Medium Dark</span>
    <figcaption class="small u-intrinsic-min-content-width">old 2ndary buttons</figcaption>
  </figure>
  <figure class="u-display-inline-block u-vertical-align-top">
    <span class="hg-swatch grey-med">Grey, Medium</span>
    <figcaption class="small u-intrinsic-min-content-width">not used</figcaption>
  </figure>
  <figure class="u-display-inline-block u-vertical-align-top">
    <span class="hg-swatch grey-med-light">Grey, Medium Light</span>
    <figcaption class="small u-intrinsic-min-content-width">page footer section</figcaption>
  </figure>
  <figure class="u-display-inline-block u-vertical-align-top">
    <span class="hg-swatch grey-light">Grey, Light</span>
    <figcaption class="small u-intrinsic-min-content-width">content backgrounds</figcaption>
  </figure>
</div>

## Border Colors
<span class="hg-swatch grey-border-color">Grey Border</span>

## Font Colors

<span class="hg-swatch default-text-color">Default Text Color</span>
<span class="hg-swatch subtle-text-color">Subtle Text Color</span>

<p>This text is in the <strong>default text color</strong>.</p>
<p class="subtle-text-color-text">This text is in the <strong>subtle text color</strong>.</p>
*/
.grey-med-dk {
  background: #6d6e70; }

.grey-med {
  background: #939597; }

.grey-med-light {
  background: #e6e7e8; }

.grey-light {
  background: #f5f5f6; }

.grey-border-color {
  background: #fff;
  border: 1px solid #D1D2D4; }

.sofi-blue {
  background: #29C4F3; }

.accent-dark-blue {
  background: #0D3A54; }

.yellow-green-360C {
  background: #9CCb3b; }

.green-text-color {
  background: #769C2A; }

.green-text-color-text {
  color: #769C2A; }

.default-text-color {
  background: #3d3d3d; }

.subtle-text-color {
  background: #8A8B8A; }

.default-text-color-text {
  color: #3d3d3d; }

.subtle-text-color-text {
  color: #8A8B8A; }

.sofi-accesibility-blue {
  background: #117DB0; }

/*doc
---
title: Break Points
name: breakPoints
category: Base
---

Break points have been standardized based on common device type widths for simplicity of usage.

Responsive styles can be applied to various screen widths individually or in combination. (for example you could apply certain styles only to "mobile" and different styles to "tablet and above" screen widths.)

<p class="small"><strong>NOTE:</strong> Design mocks should be created at the most representative screen size for the type of device being depicted. For example a design for a "mobile" screen should be 320px wide to represent iPhone5 which is the smallest device we support.</p>

##Simple

* **mobile** = 0 - 759px width
* **tablet** = 760px - 959px width
* **desktop** = 960px - 1279px width
* **wide** = 1280px and above widths

##Compound

* **mobile-and-tablet**
* **tablet-and-desktop**

##Minimums

* **tablet-and-above**
* **desktop-and-above**

*/
@font-face {
  font-family: "sofi-icons";
  src: url("./libraries/sofi-global/assets/fonts/sofi-icons/sofi-icons.eot");
  src: url("./libraries/sofi-global/assets/fonts/sofi-icons/sofi-icons.eot#iefix") format("embedded-opentype"), url("./libraries/sofi-global/assets/fonts/sofi-icons/sofi-icons.woff2") format("woff2"), url("./libraries/sofi-global/assets/fonts/sofi-icons/sofi-icons.woff") format("woff"), url("./libraries/sofi-global/assets/fonts/sofi-icons/sofi-icons.ttf") format("truetype"), url("./libraries/sofi-global/assets/fonts/sofi-icons/sofi-icons.svg#sofi-icons") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "Adelle Sans";
  src: url("./libraries/sofi-global/assets/fonts/adelle-sans/light/AdelleSans-Light.eot");
  src: url("./libraries/sofi-global/assets/fonts/adelle-sans/light/AdelleSans-Light.eot?#iefix") format("embedded-opentype"), url("./libraries/sofi-global/assets/fonts/adelle-sans/light/AdelleSans-Light.woff2") format("woff2"), url("./libraries/sofi-global/assets/fonts/adelle-sans/light/AdelleSans-Light.woff") format("woff"), url("./libraries/sofi-global/assets/fonts/adelle-sans/light/AdelleSans-Light.ttf") format("truetype"), url("./libraries/sofi-global/assets/fonts/adelle-sans/light/AdelleSans-Light.svg#AdelleSansLt") format("svg");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: "Adelle Sans";
  src: url("./libraries/sofi-global/assets/fonts/adelle-sans/regular/AdelleSans-Regular.eot");
  src: url("./libraries/sofi-global/assets/fonts/adelle-sans/regular/AdelleSans-Regular.eot?#iefix") format("embedded-opentype"), url("./libraries/sofi-global/assets/fonts/adelle-sans/regular/AdelleSans-Regular.woff2") format("woff2"), url("./libraries/sofi-global/assets/fonts/adelle-sans/regular/AdelleSans-Regular.woff") format("woff"), url("./libraries/sofi-global/assets/fonts/adelle-sans/regular/AdelleSans-Regular.ttf") format("truetype"), url("./libraries/sofi-global/assets/fonts/adelle-sans/regular/AdelleSans-Regular.svg#AdelleSans") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "Adelle Sans";
  src: url("./libraries/sofi-global/assets/fonts/adelle-sans/bold/AdelleSans-Bold.eot");
  src: url("./libraries/sofi-global/assets/fonts/adelle-sans/bold/AdelleSans-Bold.eot?#iefix") format("embedded-opentype"), url("./libraries/sofi-global/assets/fonts/adelle-sans/bold/AdelleSans-Bold.woff2") format("woff2"), url("./libraries/sofi-global/assets/fonts/adelle-sans/bold/AdelleSans-Bold.woff") format("woff"), url("./libraries/sofi-global/assets/fonts/adelle-sans/bold/AdelleSans-Bold.ttf") format("truetype"), url("./libraries/sofi-global/assets/fonts/adelle-sans/bold/AdelleSans-Bold.svg#AdelleSans-Bold") format("svg");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: "Avenir";
  src: url("./libraries/sofi-global/assets/fonts/avenir/medium/Avenir-Medium.eot");
  src: url("./libraries/sofi-global/assets/fonts/avenir/medium/Avenir-Medium.eot?#iefix") format("embedded-opentype"), url("./libraries/sofi-global/assets/fonts/avenir/medium/Avenir-Medium.woff") format("woff"), url("./libraries/sofi-global/assets/fonts/avenir/medium/Avenir-Medium.ttf") format("truetype"), url("./libraries/sofi-global/assets/fonts/avenir/medium/Avenir-Medium.svg#AvenirLTStd-Medium") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "Gotham";
  src: url("./libraries/sofi-global/assets/fonts/gotham/bold/Gotham-Bold.eot");
  src: url("./libraries/sofi-global/assets/fonts/gotham/bold/Gotham-Bold.eot#iefix") format("embedded-opentype"), url("./libraries/sofi-global/assets/fonts/gotham/bold/Gotham-Bold.woff2") format("woff2"), url("./libraries/sofi-global/assets/fonts/gotham/bold/Gotham-Bold.woff") format("woff"), url("./libraries/sofi-global/assets/fonts/gotham/bold/Gotham-Bold.ttf") format("truetype"), url("./libraries/sofi-global/assets/fonts/gotham/bold/Gotham-Bold.svg#Gotham-Bold") format("svg");
  font-weight: bold;
  font-style: normal; }

/*
  CSS3 Custom Mixins (to replace Compass mixins)

  * Animation Related
    - transition
    - keyframes animation
  * Flexbox Layout
  * Transform
  * Misc
*/
/*
 Usage:
@include keyframes(slide-down) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}

.element {@include animation('slide-down 5s 3');}
*/
.inline-form .fancy-input {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex; }

/*doc
---
title: Patterns
name: aaaPatterns
category: Patterns
---

Patterns = Composable design patterns including layout, spacing, padding, and decoration.

Includes miscellaneous utility styles and animation.

*/
.dropdown__menu-list {
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out; }

.help-panel, [data-title]:not([data-title=""]):after {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }

a, .btn-link, .fake-link, .action-link, .nav-bar__sub-menu .nav-bar__sub-menu__control, .icon-action, .md-checkbox .md-fake-input:before, .sofi-blue-link, .content-panel.ghost-panel {
  -webkit-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out; }

.dropdown__menu-list a, .md-radio-button .md-fake-input:before, .hover-row-table th,
.hover-row-table td {
  -webkit-transition: background 0.3s ease-out;
  transition: background 0.3s ease-out; }

input:not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
select,
textarea, .fancy-input__decorator, .md-radio-button .md-fake-input,
.md-checkbox .md-fake-input {
  -webkit-transition: border-color 0.3s ease-out;
  transition: border-color 0.3s ease-out; }

.animate-fade.ng-enter {
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
  opacity: 0; }
  .animate-fade.ng-enter.ng-enter-active {
    opacity: 1; }

.animate-fade-up {
  position: relative; }
  .animate-fade-up.ng-enter {
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
    opacity: 0;
    top: 100px; }
    .animate-fade-up.ng-enter.ng-enter-active {
      opacity: 1;
      top: 0; }

.animate-scroll-up {
  position: relative; }
  .animate-scroll-up.ng-enter {
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
    opacity: 0;
    top: 60vh; }
    .animate-scroll-up.ng-enter.ng-enter-active {
      opacity: 1;
      top: 0; }
  .animate-scroll-up.ng-leave {
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
    top: -60vh;
    opacity: 1; }
    .animate-scroll-up.ng-leave.ng-leave-active {
      top: -120vh;
      opacity: 0; }

.animate-scroll-down {
  position: relative; }
  .animate-scroll-down.ng-enter {
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
    opacity: 0;
    top: 0; }
    .animate-scroll-down.ng-enter.ng-enter-active {
      opacity: 1;
      top: 60vh; }
  .animate-scroll-down.ng-leave {
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
    top: -120vh;
    opacity: 1; }
    .animate-scroll-down.ng-leave.ng-leave-active {
      top: -60vh;
      opacity: 0; }

.animate-scroll-right {
  position: relative; }
  .animate-scroll-right.ng-enter {
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
    opacity: 0;
    left: 60vw; }
    .animate-scroll-right.ng-enter.ng-enter-active {
      opacity: 1;
      left: 0; }
  .animate-scroll-right.ng-leave {
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
    left: -60vw;
    opacity: 1; }
    .animate-scroll-right.ng-leave.ng-leave-active {
      left: -120vw;
      opacity: 0; }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(359deg); } }

/*
  * Dimensions
  * Usability and User Interaction
  * Text Related Patterns
  * Responsive
  * Margins and padding
  * Table related
  * Misc
    - gpu acceleration
    - Layout helpers
    - Constrain Content

  TODO: Update and add hologram documentation
  Utility styles should all be prepended by "u-"
*/
/*doc
---
title: Utility
name: utility
category: Patterns
---

Utility = helper classes and simple reusable patterns

Utility classes should start with "u-". They can be used to create quick ad hoc layouts or in certain cases where it may not make sense to create a specialized "Module" class. If you find yourself using several utility classes to style an HTML element though that's a sign you should consider creating a new Module class to encompass those styles.

More complex utility classes can be referenced within customized Modules by referencing the placeholder version. (Utility classes which are too simple only have class names however, not placeholders. For example text alignment styles only have class names.)
*/
/*doc
---
title: Dimensions
parent: utility
name: subDimensions
---

###.u-full-width

Make element 100% width.

```html_example
<p>
    <button class="btn" type="button">
        Without class
    </button>
</p>
<p>
    <button class="btn u-full-width" type="button">
        With class
    </button>
</p>

```

###.u-full-max-width
Prevent element from exceeding 100% width. If element is wider than its container it will shrink to fit.

Apply to images for example.

##More experimental, rarer use case utility classes for setting dimensions
###.u-intrinsic-max-content-width

Make element shrink wrap the width of its <em>widest</em> content. Apply to block level elements.

```html_example
<div style="background: skyblue; padding: 1em;">
  Without class
</div>

<hr>

<div class="u-intrinsic-max-content-width" style="background: skyblue; padding: 1em;">
  With class
</div>
```

###.u-intrinsic-min-content-width

Make element shrink wrap the width of its <em>narrowest</em> content. Apply to block level elements.

This has a side affect of causing words to wrap.

```html_example
<div style="background: skyblue; padding: 1em;">
  Without class
</div>

<hr>

<div class="u-intrinsic-min-content-width" style="background: skyblue; padding: 1em;">
  With class
</div>
```
*/
/*doc
---
title: Text
parent: utility
name: subText
---

###Text alignment

####.u-text-align-left
####.u-text-align-left
####.u-text-align-center

```html_example
<p class="u-text-align-left">
    Align text to the left. This is already the default for most elements so this class should rarely be needed.
</p>

<p class="u-text-align-right">
  Align text to the right.
</p>

<p class="u-text-align-center">
  Center text.
</p>
```

###Text wrapping

####.u-wrap-text

Make long text strings wrap to prevent breaking layouts. can apply to table cells, pre tags, etc. as needed.

```html_example
Without class:
<div style="width: 200px; border: 1px solid;">
  <p>Alongtextstringwithnospacesatallwhichnormallywouldnotwrapandwouldstickoutofitscontainer</p>
</div>

<hr>

With class:
<div style="width: 200px; border: 1px solid;">
  <p class="u-wrap-text">
    Alongtextstringwithnospacesatallwhichnormallywouldnotwrapandwouldstickoutofitscontainer
  </p>
</div>
```

####.u-nowrap
Prevent text from wrapping even if it has spaces.

```html_example
Without class:
<div style="width: 200px; border: 1px solid;">
  <p>Some text containing spaces which would normally wrap to fit within its container.</p>
</div>

<hr>

With class:
<div style="width: 200px; border: 1px solid;">
  <p class="u-nowrap">
    Some text containing spaces which would normally wrap to fit within its container.
  </p>
</div>
```

####.u-truncate-text

Truncate long text.

```html_example
Without class:
<div style="width: 200px; border: 1px solid;">
  <p>Alongtextstringwithnospacesatallwhichnormallywouldnotwrapandwouldstickoutofitscontainer</p>
</div>

<hr>

With class:
<div style="width: 200px; border: 1px solid;">
  <p class="u-truncate-text">
    Alongtextstringwithnospacesatallwhichnormallywouldnotwrapandwouldstickoutofitscontainer
  </p>
</div>
```
*/
/*doc
---
title: Vertical Alignment
parent: utility
name: subVerticalAlignment
---

Change vertical alignment of inline block elements in relationship to each other. (These should rarely be needed.)

####.u-vertical-align-middle
####.u-vertical-align-text-bottom
####.u-vertical-align-top
*/
/*doc
---
title: Responsive
parent: utility
name: subResponsive
---

Hide content in certain views for responsive layouts.

####.u-hide-in-mobile
####.u-hide-in-tablet
####.u-hide-in-mobile-and-tablet
####.u-hide-in-tablet-and-above}
####.u-hide-in-desktop-and-above
*/
.u-full-width {
  width: 100% !important; }

.u-full-max-width {
  max-width: 100% !important; }


.u-intrinsic-max-content-width {
  width: -moz-max-content;
  width: -webkit-max-content;
  width: max-content; }


.u-intrinsic-min-content-width {
  width: -moz-min-content;
  width: -webkit-min-content;
  width: min-content; }

.help-panel__close, .main-actions a:not(.btn) {
  position: relative; }
  .help-panel__close:before, .main-actions a:not(.btn):before {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    margin: auto;
    position: absolute;
    top: -50%;
    right: -100%;
    bottom: -50%;
    left: -100%; }

.nav-bar__sub-menu__content-wrapper, .dropdown__menu-content-wrapper {
  pointer-events: none; }

.nav-bar__sub-menu__content-wrapper ul, .dropdown__menu-list {
  pointer-events: auto; }

.action-control {
  cursor: pointer; }

.u-text-align-left {
  text-align: left !important; }

.u-text-align-right {
  text-align: right !important; }

.u-text-align-center {
  text-align: center !important; }


.u-wrap-text {
  word-break: break-all;
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word; }

.nav-bar__logo, [class^="icon-"], .uib-daypicker .glyphicon,
.uib-monthpicker .glyphicon,
.uib-yearpicker .glyphicon {
  text-indent: 3000px;
  white-space: nowrap;
  overflow: hidden; }
  .nav-bar__logo:before, [class^="icon-"]:before, .uib-daypicker .glyphicon:before,
  .uib-monthpicker .glyphicon:before,
  .uib-yearpicker .glyphicon:before, .nav-bar__logo:after, [class^="icon-"]:after, .uib-daypicker .glyphicon:after,
  .uib-monthpicker .glyphicon:after,
  .uib-yearpicker .glyphicon:after {
    text-indent: 0; }

.content-panel__header-title,
.u-truncate-text {
  overflow: hidden;
  text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal; }


.u-nowrap {
  white-space: nowrap; }


.u-break-together {
  display: inline-block; }

.u-vertical-align-middle {
  vertical-align: middle !important; }

.u-vertical-align-text-bottom {
  vertical-align: text-bottom !important; }

.u-vertical-align-top {
  vertical-align: top !important; }

.hidden {
  display: none; }

@media (max-width: 759px) {
  
  .u-hide-in-mobile {
    display: none !important;
    margin-top: 0 !important; } }

@media (min-width: 760px) and (max-width: 959px) {
  
  .u-hide-in-tablet {
    display: none !important;
    margin-top: 0 !important; } }

@media (max-width: 959px) {
  
  .u-hide-in-mobile-and-tablet {
    display: none !important;
    margin-top: 0 !important; } }

@media (min-width: 760px) {
  
  .u-hide-in-tablet-and-above {
    display: none !important;
    margin-top: 0 !important; } }

@media (min-width: 960px) {
  
  .u-hide-in-desktop-and-above {
    display: none !important;
    margin-top: 0 !important; } }

.u-margin-top-content-wide {
  margin-top: 4rem !important; }

.action-cell,
.u-min-content-width-cell {
  white-space: nowrap;
  width: 1%; }


.u-max-reading-width {
  margin-right: auto;
  margin-left: auto;
  max-width: 86.0rem; }

.page__footer__main, .page__footer__subfooter, .nav-bar, .help-panel, .main__header, .main__header__sub, .main__body, .content-section__body,
.constrain-content {
  max-width: 1304px;
  margin: 0 auto; }
  @media (max-width: 759px) {
    .page__footer__main, .page__footer__subfooter, .nav-bar, .help-panel, .main__header, .main__header__sub, .main__body, .content-section__body,
    .constrain-content {
      padding-left: 1.33333rem;
      padding-right: 1.33333rem; } }
  @media (min-width: 760px) {
    .page__footer__main, .page__footer__subfooter, .nav-bar, .help-panel, .main__header, .main__header__sub, .main__body, .content-section__body,
    .constrain-content {
      padding-left: 2rem;
      padding-right: 2rem; } }

.u-flex-vertical-align-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  -webkit-align-items: center !important;
  -moz-align-items: center !important;
  align-items: center !important; }

.u-flex-horizontal-align-center {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-justify-content: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important; }

.u-display-inline-block {
  display: inline-block !important; }

.u-display-block {
  display: block !important; }

/*doc
---
title: Layout
name: layout
category: Patterns
---

Layout = Columns/grids and abstract layout patterns for groups of elements

*/
/*doc
---
title: Layout Patterns
parent: layout
name: sublayoutPatterns
---

Layout Patterns = Abstract layout patterns for arrangements of groups of elements.

Dotted outlines have been added to more clearly show the structure of layout patterns in the examples below. These outlines will not be visible in actual production usage.

**Flexbox Layouts:**

<ul class="bulleted-list">
  <li>center</li>
  <li>
    media object and variants:
    <ul class="bulleted-list">
      <li>media object</li>
      <li>flag object</li>
    </ul>
  </li>
  <li>
    justified block:
    <ul class="bulleted-list">
      <li>horizontal justified block</li>
      <li>vertical justified block</li>
    </ul>
  </li>
  <li>
    table-like layouts:
    <ul class="bulleted-list">
      <li>equal cell</li>
      <li>unequal cell</li>
    </ul>
  </li>
</ul>

### Center

Centers an element both vertically and horizontally within any container element it is applied to. Designed primarily for centering a single element but will also work on multiple elements. (Multiple elements will all be centered together within the main container.)

<em>(NOTE: Inline styles are for purposes of demonstration only. Do not use within production app code!)</em>

```html_example
<div class="l-flex-center" style="height: 200px; background: aliceBlue;">
  <p>A vertically and horizontally centered element. (Can be any element.)</p>
</div>
```

#### Media Object Layout

Aligns an element such as an image to the left of an associated block of content. The image does not need to be wrapped by any other element (a stand alone image tag is fine). Designed to work with 2 main elements of any type.

```html_example
<div class="l-media-object">
  <div>IMAGE</div>

  <div>
    <h4>A header</h4>
    <p>Some associated text content.</p>
  </div>
</div>
```

#### Flag Object Layout

This is very similar to the Media Object pattern except the 2 elements are center aligned to each other.

```html_example
<div class="l-flag-object">
  <div>IMAGE<br>IMAGE<br>IMAGE</div>

  <p>Some associated text content.</p>
</div>
```

#### Justified Block Layout

This pattern works on multiple elements distributing them an equal distance apart and justified to the right and left. (Works on any type of html elements. A list is used just as an example.)

```html_example
<ul class="l-justified-block">
  <li>First Item</li>
  <li>Another Item</li>
  <li>Item</li>
  <li>Last Item</li>
</ul>
```

#### Vertical Justified Block Layout

This is a variation on the above more common pattern. (It does not need to be used together with the above class. The below is only an example.)

```html_example
<ul class="l-justified-block">
  <li class="l-justified-block-vertical">
    <h5>
      A long header<br>
      which wraps to<br>
      the next few lines
    </h5>

    <a href="#">Click Me</a>
  </li>

  <li class="l-justified-block-vertical">
    <h5>Just a header</h5>

    <a href="#">Click Me</a>
  </li>

  <li class="l-justified-block-vertical">
    <h5>Just a header</h5>

    <a href="#">Click Me</a>
  </li>
</ul>
```

#### Equal Cell Layout

This is a table-like layout which works on muliple elements. All elements will be lined up in a row and will be equal width adding up to 100% total.

```html_example
<ul class="l-equal-cell">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio voluptates praesentium!</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem</li>
</ul>

```

#### Unequal Cell Layout

This is similar to the above layout except the width of elements will be relative to the length of their contents. (NOTE: examples below do not include styles for spacing between elements.)

```html_example
<ul class="l-unequal-cell">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio voluptates praesentium!</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem</li>
</ul>

<p class="l-unequal-cell">
  <input type="text" placeholder="Type something here">

  <select>
    <option>option</option>
  </select>

  <button type="button" class="btn">Go</button>
</p>

```

*/
/*
  Flexbox Layouts:
  --------------------
  * center
  * media object and variants
    - media object
    - flag object
    - TODO: add "reverse" variants?
  * justified block
    - horizontal justified block
    - vertical justified block
  * Table-like layouts
    - equal cell
    - unequal cell

  Other Layout Methods:
  ----------------------
  (replace with flexbox if feasible)
  * Transform layouts
    - vertical center
    - horizontal center
  * Inline-Block Layouts
    - block list
    - justified block
*/

.l-flex-center {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }


.l-media-object {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }
  
  .l-media-object > * {
    margin-top: 0;
    margin-bottom: 0; }
    
    .l-media-object > * + * {
      margin-top: 0;
      margin-bottom: 0; }
    
    .l-media-object > *:first-child {
      margin-right: 1rem; }
    
    .l-media-object > *:only-child,
    .l-media-object > *:nth-child(n+2) {
      width: 100%;
      flex-shrink: 1; }
  
  .l-media-object > table {
    width: auto !important; }


.l-flag-object {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center; }
  
  .l-flag-object > * {
    margin-top: 0;
    margin-bottom: 0; }
    
    .l-flag-object > * + * {
      margin-top: 0;
      margin-bottom: 0; }
    
    .l-flag-object > *:first-child {
      margin-right: 1rem; }
    
    .l-flag-object > *:only-child,
    .l-flag-object > *:nth-child(n+2) {
      width: 100%;
      flex-shrink: 1; }
  
  .l-flag-object > table {
    width: auto !important; }

.nav-bar,
.l-justified-block {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: center;
  justify-content: space-between; }
  .nav-bar > *,
  .l-justified-block > * {
    margin-top: 0; }


.l-justified-block-vertical {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: center;
  justify-content: space-between;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }


.l-equal-cell {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }
  
  .l-equal-cell > * {
    flex-basis: 100%;
    margin-top: 0; }


.l-unequal-cell {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }
  
  .l-unequal-cell > * {
    flex-grow: 1;
    margin-top: 0;
    min-width: -moz-min-content;
    min-width: -webkit-min-content;
    min-width: min-content; }
  
  .l-unequal-cell > .btn {
    flex-shrink: 0; }
  
  .l-unequal-cell > input,
  .l-unequal-cell > select {
    height: auto !important;
    min-width: auto !important; }
  
  .l-unequal-cell > .btn {
    width: auto; }
  
  .l-unequal-cell > input {
    width: 100%; }

.loading-mask__inner {
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  position: relative;
  top: 50%; }

[data-title]:not([data-title=""]):after {
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  left: 50%; }

/*doc
---
title: Column Grid
parent: layout
name: subColumnGrid
---

Columns have fixed pixel width gutters but flexible percentage-based widths. Column layouts can be changed depending on screen width break points to create responsive layouts.

**Responsive Views:**<br>
  * all<br>
  * mobile<br>
  * tablet<br>
  * desktop<br>
  * wide<br>
  * mobile-and-tablet<br>
  * tablet-and-desktop<br>
  * tablet-and-above<br>
  * desktop-and-above

###Equal Width Columns

```html_example
<div class="col-group all--1-2">
  <div class="col">1/2 Content</div>
  <div class="col">1/2 Content</div>
</div><!-- /.col-group -->

<div class="col-group all--1-3">
  <div class="col">1/3 Content</div>
  <div class="col">1/3 Content</div>
  <div class="col">1/3 Content</div>
</div>

<div class="col-group all--1-4">
  <div class="col">1/4 Content</div>
  <div class="col">1/4 Content</div>
  <div class="col">1/4 Content</div>
  <div class="col">1/4 Content</div>
</div>

<div class="col-group all--1-5">
  <div class="col">1/5 Content</div>
  <div class="col">1/5 Content</div>
  <div class="col">1/5 Content</div>
  <div class="col">1/5 Content</div>
  <div class="col">1/5 Content</div>
</div>
```

###Unequal Width Columns

```html_example
<div class="col-group all--1-3-and-2-3">
  <div class="col">1/3 Content</div>
  <div class="col">2/3 Content</div>
</div>

<div class="col-group all--2-3-and-1-3">
  <div class="col">2/3 Content</div>
  <div class="col">1/3 Content</div>
</div>

<div class="col-group all--1-4-and-3-4">
  <div class="col">1/4 Content</div>
  <div class="col">3/4 Content</div>
</div>

<div class="col-group all--3-4-and-1-4">
  <div class="col">3/4 Content</div>
  <div class="col">1/4 Content</div>
</div>

<div class="col-group all--2-5-and-3-5">
  <div class="col">2/5 Content</div>
  <div class="col">3/5 Content</div>
</div>

<div class="col-group all--3-5-and-2-5">
  <div class="col">3/5 Content</div>
  <div class="col">2/5 Content</div>
</div>

<div class="col-group all--1-4-and-2-4-and-1-4">
  <div class="col">1/4 Content</div>
  <div class="col">2/4 Content</div>
  <div class="col">1/4 Content</div>
</div>
```

###Full Width Columns

The full width coloumn layout is mainly useful for mobile views.

```html_example
<div class="col-group all--full">
  <div class="col">Full width content</div>
  <div class="col">Full width content</div>
</div>
```

*/
/*
  Views:
  * all
  * mobile
  * tablet
  * desktop
  * wide
  * mobile-and-tablet
  * tablet-and-desktop
  * tablet-and-above
  * desktop-and-above

  Layouts:
  Equal width columns -
  * full
  * 1-2
  * 1-3
  * 1-4
  * 1-5
  Mixed width columns -
  * 1-3-and-2-3
  * 2-3-and-1-3
  * 1-4-and-3-4
  * 3-4-and-1-4
  * 1-4-and-2-4-and-1-4
  * 2-5-and-3-5
  * 3-5-and-2-5

  How to use:
  Add extra classes to col-group container to set the column layout.

  Examples:
  (half width columns in all screen sizes)
  <div class="col-group full--1-2">
    <div class="col">This is a column.</div>
    <div class="col">This is a column.</div>
  </div>

  (full width columns in mobile, half width columns in tablet, third width columns in desktop and above)
  <div class="col-group mobile--full tablet--1-2 desktop-and-above-1-3">
    <div class="col">This is a column.</div>
    <div class="col">This is a column.</div>
    <div class="col">This is a column.</div>
  </div>

  NOTES:
  * .col elements can also be a .col-group for creating nested columns,
  * .col and .col-group elements don't have to be div tags
*/
.col-group {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .col-group:not(.compact-gutters).all--full > .col {
    width: 100%; }
    .col-group:not(.compact-gutters).all--full > .col + .col {
      margin-top: 2rem; }
  .col-group:not(.compact-gutters).all--1-2 > .col {
    width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2);
    max-width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).all--1-2 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).all--1-2 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto; }
    .col-group:not(.compact-gutters).all--1-2 > .col:first-child, .col-group:not(.compact-gutters).all--1-2 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).all--1-2 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
  .col-group:not(.compact-gutters).all--1-3 > .col {
    width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3);
    max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).all--1-3 > .col:not(:nth-child(3n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).all--1-3 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto; }
    .col-group:not(.compact-gutters).all--1-3 > .col:first-child, .col-group:not(.compact-gutters).all--1-3 > .col:nth-child(2), .col-group:not(.compact-gutters).all--1-3 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).all--1-3 > .col:nth-child(n + 4) {
      margin-top: 2rem; }
  .col-group:not(.compact-gutters).all--1-4 > .col {
    width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4);
    max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4); }
    .col-group:not(.compact-gutters).all--1-4 > .col:not(:nth-child(4n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).all--1-4 > .col:nth-child(4n) {
      flex: 1 1 0;
      width: auto; }
    .col-group:not(.compact-gutters).all--1-4 > .col:first-child, .col-group:not(.compact-gutters).all--1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).all--1-4 > .col:nth-child(3), .col-group:not(.compact-gutters).all--1-4 > .col:nth-child(4) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).all--1-4 > .col:nth-child(n + 5) {
      margin-top: 2rem; }
  .col-group:not(.compact-gutters).all--1-5 > .col {
    width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5);
    max-width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5); }
    .col-group:not(.compact-gutters).all--1-5 > .col:not(:nth-child(5n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).all--1-5 > .col:nth-child(5n) {
      flex: 1 1 0;
      width: auto; }
    .col-group:not(.compact-gutters).all--1-5 > .col:first-child, .col-group:not(.compact-gutters).all--1-5 > .col:nth-child(2), .col-group:not(.compact-gutters).all--1-5 > .col:nth-child(3), .col-group:not(.compact-gutters).all--1-5 > .col:nth-child(4), .col-group:not(.compact-gutters).all--1-5 > .col:nth-child(5) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).all--1-5 > .col:nth-child(n + 6) {
      margin-top: 2rem; }
  .col-group:not(.compact-gutters).all--1-3-and-2-3 > .col:nth-child(2n + 1) {
    width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
  .col-group:not(.compact-gutters).all--1-3-and-2-3 > .col:nth-child(2n) {
    flex: 1 1 0;
    width: auto;
    max-width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
  .col-group:not(.compact-gutters).all--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
    margin-left: 2rem; }
  .col-group:not(.compact-gutters).all--1-3-and-2-3 > .col:first-child, .col-group:not(.compact-gutters).all--1-3-and-2-3 > .col:nth-child(2) {
    margin-top: 0; }
  .col-group:not(.compact-gutters).all--1-3-and-2-3 > .col:nth-child(n + 3) {
    margin-top: 2rem; }
  .col-group:not(.compact-gutters).all--2-3-and-1-3 > .col:nth-child(2n + 1) {
    width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
  .col-group:not(.compact-gutters).all--2-3-and-1-3 > .col:nth-child(2n) {
    flex: 1 1 0;
    width: auto;
    max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
  .col-group:not(.compact-gutters).all--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
    margin-left: 2rem; }
  .col-group:not(.compact-gutters).all--2-3-and-1-3 > .col:first-child, .col-group:not(.compact-gutters).all--2-3-and-1-3 > .col:nth-child(2) {
    margin-top: 0; }
  .col-group:not(.compact-gutters).all--2-3-and-1-3 > .col:nth-child(n + 3) {
    margin-top: 2rem; }
  .col-group:not(.compact-gutters).all--1-4-and-3-4 > .col:nth-child(2n + 1) {
    width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
  .col-group:not(.compact-gutters).all--1-4-and-3-4 > .col:nth-child(2n) {
    flex: 1 1 0;
    width: auto;
    max-width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
  .col-group:not(.compact-gutters).all--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
    margin-left: 2rem; }
  .col-group:not(.compact-gutters).all--1-4-and-3-4 > .col:first-child, .col-group:not(.compact-gutters).all--1-4-and-3-4 > .col:nth-child(2) {
    margin-top: 0; }
  .col-group:not(.compact-gutters).all--1-4-and-3-4 > .col:nth-child(n + 3) {
    margin-top: 2rem; }
  .col-group:not(.compact-gutters).all--3-4-and-1-4 > .col:nth-child(2n + 1) {
    width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
  .col-group:not(.compact-gutters).all--3-4-and-1-4 > .col:nth-child(2n) {
    flex: 1 1 0;
    width: auto;
    max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
  .col-group:not(.compact-gutters).all--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
    margin-left: 2rem; }
  .col-group:not(.compact-gutters).all--3-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).all--3-4-and-1-4 > .col:nth-child(2) {
    margin-top: 0; }
  .col-group:not(.compact-gutters).all--3-4-and-1-4 > .col:nth-child(n + 3) {
    margin-top: 2rem; }
  .col-group:not(.compact-gutters).all--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
    width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
  .col-group:not(.compact-gutters).all--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
    width: calc( (100% * 2 / 4 - 2rem) + 2rem / 3); }
  .col-group:not(.compact-gutters).all--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
    flex: 1 1 0;
    width: auto;
    max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
  .col-group:not(.compact-gutters).all--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
    margin-left: 2rem; }
  .col-group:not(.compact-gutters).all--1-4-and-2-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).all--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).all--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
    margin-top: 0; }
  .col-group:not(.compact-gutters).all--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
    margin-top: 2rem; }
  .col-group:not(.compact-gutters).all--2-5-and-3-5 > .col:nth-child(2n + 1) {
    width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
  .col-group:not(.compact-gutters).all--2-5-and-3-5 > .col:nth-child(2n) {
    flex: 1 1 0;
    width: auto;
    max-width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
  .col-group:not(.compact-gutters).all--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
    margin-left: 2rem; }
  .col-group:not(.compact-gutters).all--2-5-and-3-5 > .col:first-child, .col-group:not(.compact-gutters).all--2-5-and-3-5 > .col:nth-child(2) {
    margin-top: 0; }
  .col-group:not(.compact-gutters).all--2-5-and-3-5 > .col:nth-child(n + 3) {
    margin-top: 2rem; }
  .col-group:not(.compact-gutters).all--3-5-and-2-5 > .col:nth-child(2n + 1) {
    width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
  .col-group:not(.compact-gutters).all--3-5-and-2-5 > .col:nth-child(2n) {
    flex: 1 1 0;
    width: auto;
    max-width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
  .col-group:not(.compact-gutters).all--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
    margin-left: 2rem; }
  .col-group:not(.compact-gutters).all--3-5-and-2-5 > .col:first-child, .col-group:not(.compact-gutters).all--3-5-and-2-5 > .col:nth-child(2) {
    margin-top: 0; }
  .col-group:not(.compact-gutters).all--3-5-and-2-5 > .col:nth-child(n + 3) {
    margin-top: 2rem; }
  .col-group:not(.compact-gutters).all--ruled {
    position: relative; }
    .col-group:not(.compact-gutters).all--ruled > .col:nth-child(2):before,
    .col-group:not(.compact-gutters).all--ruled > .col:nth-child(3):before,
    .col-group:not(.compact-gutters).all--ruled > .col:nth-child(4):before {
      border-left: 1px solid #D1D2D4;
      content: "";
      display: block;
      margin-left: -1rem;
      position: absolute;
      top: 0;
      bottom: 0; }
  .col-group:not(.compact-gutters).all--centered > .col {
    margin-left: auto;
    margin-right: auto; }
    .col-group:not(.compact-gutters).all--centered > .col + .col {
      margin-top: 1em; }
  .col-group:not(.compact-gutters).all--col-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column-reverse;
    -moz-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse; }
  @media (max-width: 759px) {
    .col-group:not(.compact-gutters).mobile--full > .col {
      width: 100%; }
      .col-group:not(.compact-gutters).mobile--full > .col + .col {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile--1-2 > .col {
      width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2);
      max-width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2); }
      .col-group:not(.compact-gutters).mobile--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).mobile--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).mobile--1-2 > .col:first-child, .col-group:not(.compact-gutters).mobile--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).mobile--1-2 > .col:nth-child(n + 3) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile--1-3 > .col {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3);
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3); }
      .col-group:not(.compact-gutters).mobile--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).mobile--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).mobile--1-3 > .col:first-child, .col-group:not(.compact-gutters).mobile--1-3 > .col:nth-child(2), .col-group:not(.compact-gutters).mobile--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).mobile--1-3 > .col:nth-child(n + 4) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile--1-4 > .col {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4);
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4); }
      .col-group:not(.compact-gutters).mobile--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).mobile--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).mobile--1-4 > .col:first-child, .col-group:not(.compact-gutters).mobile--1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).mobile--1-4 > .col:nth-child(3), .col-group:not(.compact-gutters).mobile--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).mobile--1-4 > .col:nth-child(n + 5) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile--1-5 > .col {
      width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5);
      max-width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5); }
      .col-group:not(.compact-gutters).mobile--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).mobile--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).mobile--1-5 > .col:first-child, .col-group:not(.compact-gutters).mobile--1-5 > .col:nth-child(2), .col-group:not(.compact-gutters).mobile--1-5 > .col:nth-child(3), .col-group:not(.compact-gutters).mobile--1-5 > .col:nth-child(4), .col-group:not(.compact-gutters).mobile--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).mobile--1-5 > .col:nth-child(n + 6) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).mobile--1-3-and-2-3 > .col:first-child, .col-group:not(.compact-gutters).mobile--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).mobile--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).mobile--2-3-and-1-3 > .col:first-child, .col-group:not(.compact-gutters).mobile--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).mobile--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).mobile--1-4-and-3-4 > .col:first-child, .col-group:not(.compact-gutters).mobile--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).mobile--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).mobile--3-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).mobile--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).mobile--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).mobile--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).mobile--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).mobile--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).mobile--1-4-and-2-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).mobile--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).mobile--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).mobile--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).mobile--2-5-and-3-5 > .col:first-child, .col-group:not(.compact-gutters).mobile--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).mobile--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).mobile--3-5-and-2-5 > .col:first-child, .col-group:not(.compact-gutters).mobile--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).mobile--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile--ruled {
      position: relative; }
      .col-group:not(.compact-gutters).mobile--ruled > .col:nth-child(2):before,
      .col-group:not(.compact-gutters).mobile--ruled > .col:nth-child(3):before,
      .col-group:not(.compact-gutters).mobile--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -1rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group:not(.compact-gutters).mobile--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group:not(.compact-gutters).mobile--centered > .col + .col {
        margin-top: 1em; }
    .col-group:not(.compact-gutters).mobile--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }
  @media (min-width: 760px) and (max-width: 959px) {
    .col-group:not(.compact-gutters).tablet--full > .col {
      width: 100%; }
      .col-group:not(.compact-gutters).tablet--full > .col + .col {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet--1-2 > .col {
      width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2);
      max-width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2); }
      .col-group:not(.compact-gutters).tablet--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).tablet--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).tablet--1-2 > .col:first-child, .col-group:not(.compact-gutters).tablet--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).tablet--1-2 > .col:nth-child(n + 3) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet--1-3 > .col {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3);
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3); }
      .col-group:not(.compact-gutters).tablet--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).tablet--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).tablet--1-3 > .col:first-child, .col-group:not(.compact-gutters).tablet--1-3 > .col:nth-child(2), .col-group:not(.compact-gutters).tablet--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).tablet--1-3 > .col:nth-child(n + 4) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet--1-4 > .col {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4);
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4); }
      .col-group:not(.compact-gutters).tablet--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).tablet--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).tablet--1-4 > .col:first-child, .col-group:not(.compact-gutters).tablet--1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).tablet--1-4 > .col:nth-child(3), .col-group:not(.compact-gutters).tablet--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).tablet--1-4 > .col:nth-child(n + 5) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet--1-5 > .col {
      width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5);
      max-width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5); }
      .col-group:not(.compact-gutters).tablet--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).tablet--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).tablet--1-5 > .col:first-child, .col-group:not(.compact-gutters).tablet--1-5 > .col:nth-child(2), .col-group:not(.compact-gutters).tablet--1-5 > .col:nth-child(3), .col-group:not(.compact-gutters).tablet--1-5 > .col:nth-child(4), .col-group:not(.compact-gutters).tablet--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).tablet--1-5 > .col:nth-child(n + 6) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet--1-3-and-2-3 > .col:first-child, .col-group:not(.compact-gutters).tablet--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet--2-3-and-1-3 > .col:first-child, .col-group:not(.compact-gutters).tablet--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet--1-4-and-3-4 > .col:first-child, .col-group:not(.compact-gutters).tablet--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet--3-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).tablet--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).tablet--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet--1-4-and-2-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).tablet--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet--2-5-and-3-5 > .col:first-child, .col-group:not(.compact-gutters).tablet--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet--3-5-and-2-5 > .col:first-child, .col-group:not(.compact-gutters).tablet--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet--ruled {
      position: relative; }
      .col-group:not(.compact-gutters).tablet--ruled > .col:nth-child(2):before,
      .col-group:not(.compact-gutters).tablet--ruled > .col:nth-child(3):before,
      .col-group:not(.compact-gutters).tablet--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -1rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group:not(.compact-gutters).tablet--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group:not(.compact-gutters).tablet--centered > .col + .col {
        margin-top: 1em; }
    .col-group:not(.compact-gutters).tablet--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }
  @media (min-width: 960px) and (max-width: 1279px) {
    .col-group:not(.compact-gutters).desktop--full > .col {
      width: 100%; }
      .col-group:not(.compact-gutters).desktop--full > .col + .col {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop--1-2 > .col {
      width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2);
      max-width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2); }
      .col-group:not(.compact-gutters).desktop--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).desktop--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).desktop--1-2 > .col:first-child, .col-group:not(.compact-gutters).desktop--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).desktop--1-2 > .col:nth-child(n + 3) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop--1-3 > .col {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3);
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3); }
      .col-group:not(.compact-gutters).desktop--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).desktop--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).desktop--1-3 > .col:first-child, .col-group:not(.compact-gutters).desktop--1-3 > .col:nth-child(2), .col-group:not(.compact-gutters).desktop--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).desktop--1-3 > .col:nth-child(n + 4) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop--1-4 > .col {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4);
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4); }
      .col-group:not(.compact-gutters).desktop--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).desktop--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).desktop--1-4 > .col:first-child, .col-group:not(.compact-gutters).desktop--1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).desktop--1-4 > .col:nth-child(3), .col-group:not(.compact-gutters).desktop--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).desktop--1-4 > .col:nth-child(n + 5) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop--1-5 > .col {
      width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5);
      max-width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5); }
      .col-group:not(.compact-gutters).desktop--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).desktop--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).desktop--1-5 > .col:first-child, .col-group:not(.compact-gutters).desktop--1-5 > .col:nth-child(2), .col-group:not(.compact-gutters).desktop--1-5 > .col:nth-child(3), .col-group:not(.compact-gutters).desktop--1-5 > .col:nth-child(4), .col-group:not(.compact-gutters).desktop--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).desktop--1-5 > .col:nth-child(n + 6) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).desktop--1-3-and-2-3 > .col:first-child, .col-group:not(.compact-gutters).desktop--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).desktop--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).desktop--2-3-and-1-3 > .col:first-child, .col-group:not(.compact-gutters).desktop--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).desktop--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).desktop--1-4-and-3-4 > .col:first-child, .col-group:not(.compact-gutters).desktop--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).desktop--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).desktop--3-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).desktop--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).desktop--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).desktop--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).desktop--1-4-and-2-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).desktop--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).desktop--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).desktop--2-5-and-3-5 > .col:first-child, .col-group:not(.compact-gutters).desktop--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).desktop--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).desktop--3-5-and-2-5 > .col:first-child, .col-group:not(.compact-gutters).desktop--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).desktop--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop--ruled {
      position: relative; }
      .col-group:not(.compact-gutters).desktop--ruled > .col:nth-child(2):before,
      .col-group:not(.compact-gutters).desktop--ruled > .col:nth-child(3):before,
      .col-group:not(.compact-gutters).desktop--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -1rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group:not(.compact-gutters).desktop--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group:not(.compact-gutters).desktop--centered > .col + .col {
        margin-top: 1em; }
    .col-group:not(.compact-gutters).desktop--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }
  @media (min-width: 1280px) {
    .col-group:not(.compact-gutters).wide--full > .col {
      width: 100%; }
      .col-group:not(.compact-gutters).wide--full > .col + .col {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).wide--1-2 > .col {
      width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2);
      max-width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2); }
      .col-group:not(.compact-gutters).wide--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).wide--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).wide--1-2 > .col:first-child, .col-group:not(.compact-gutters).wide--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).wide--1-2 > .col:nth-child(n + 3) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).wide--1-3 > .col {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3);
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3); }
      .col-group:not(.compact-gutters).wide--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).wide--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).wide--1-3 > .col:first-child, .col-group:not(.compact-gutters).wide--1-3 > .col:nth-child(2), .col-group:not(.compact-gutters).wide--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).wide--1-3 > .col:nth-child(n + 4) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).wide--1-4 > .col {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4);
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4); }
      .col-group:not(.compact-gutters).wide--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).wide--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).wide--1-4 > .col:first-child, .col-group:not(.compact-gutters).wide--1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).wide--1-4 > .col:nth-child(3), .col-group:not(.compact-gutters).wide--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).wide--1-4 > .col:nth-child(n + 5) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).wide--1-5 > .col {
      width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5);
      max-width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5); }
      .col-group:not(.compact-gutters).wide--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).wide--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).wide--1-5 > .col:first-child, .col-group:not(.compact-gutters).wide--1-5 > .col:nth-child(2), .col-group:not(.compact-gutters).wide--1-5 > .col:nth-child(3), .col-group:not(.compact-gutters).wide--1-5 > .col:nth-child(4), .col-group:not(.compact-gutters).wide--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).wide--1-5 > .col:nth-child(n + 6) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).wide--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).wide--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).wide--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).wide--1-3-and-2-3 > .col:first-child, .col-group:not(.compact-gutters).wide--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).wide--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).wide--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).wide--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).wide--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).wide--2-3-and-1-3 > .col:first-child, .col-group:not(.compact-gutters).wide--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).wide--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).wide--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).wide--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).wide--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).wide--1-4-and-3-4 > .col:first-child, .col-group:not(.compact-gutters).wide--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).wide--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).wide--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).wide--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).wide--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).wide--3-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).wide--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).wide--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).wide--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).wide--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).wide--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).wide--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).wide--1-4-and-2-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).wide--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).wide--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).wide--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).wide--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).wide--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).wide--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).wide--2-5-and-3-5 > .col:first-child, .col-group:not(.compact-gutters).wide--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).wide--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).wide--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).wide--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).wide--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).wide--3-5-and-2-5 > .col:first-child, .col-group:not(.compact-gutters).wide--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).wide--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).wide--ruled {
      position: relative; }
      .col-group:not(.compact-gutters).wide--ruled > .col:nth-child(2):before,
      .col-group:not(.compact-gutters).wide--ruled > .col:nth-child(3):before,
      .col-group:not(.compact-gutters).wide--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -1rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group:not(.compact-gutters).wide--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group:not(.compact-gutters).wide--centered > .col + .col {
        margin-top: 1em; }
    .col-group:not(.compact-gutters).wide--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }
  @media (max-width: 959px) {
    .col-group:not(.compact-gutters).mobile-and-tablet--full > .col {
      width: 100%; }
      .col-group:not(.compact-gutters).mobile-and-tablet--full > .col + .col {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-2 > .col {
      width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2);
      max-width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2); }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-2 > .col:first-child, .col-group:not(.compact-gutters).mobile-and-tablet--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-2 > .col:nth-child(n + 3) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-3 > .col {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3);
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3); }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-3 > .col:first-child, .col-group:not(.compact-gutters).mobile-and-tablet--1-3 > .col:nth-child(2), .col-group:not(.compact-gutters).mobile-and-tablet--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-3 > .col:nth-child(n + 4) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-4 > .col {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4);
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4); }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-4 > .col:first-child, .col-group:not(.compact-gutters).mobile-and-tablet--1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).mobile-and-tablet--1-4 > .col:nth-child(3), .col-group:not(.compact-gutters).mobile-and-tablet--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-4 > .col:nth-child(n + 5) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-5 > .col {
      width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5);
      max-width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5); }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-5 > .col:first-child, .col-group:not(.compact-gutters).mobile-and-tablet--1-5 > .col:nth-child(2), .col-group:not(.compact-gutters).mobile-and-tablet--1-5 > .col:nth-child(3), .col-group:not(.compact-gutters).mobile-and-tablet--1-5 > .col:nth-child(4), .col-group:not(.compact-gutters).mobile-and-tablet--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).mobile-and-tablet--1-5 > .col:nth-child(n + 6) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-3-and-2-3 > .col:first-child, .col-group:not(.compact-gutters).mobile-and-tablet--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile-and-tablet--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile-and-tablet--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--2-3-and-1-3 > .col:first-child, .col-group:not(.compact-gutters).mobile-and-tablet--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).mobile-and-tablet--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-4-and-3-4 > .col:first-child, .col-group:not(.compact-gutters).mobile-and-tablet--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile-and-tablet--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile-and-tablet--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--3-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).mobile-and-tablet--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).mobile-and-tablet--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile-and-tablet--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile-and-tablet--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--2-5-and-3-5 > .col:first-child, .col-group:not(.compact-gutters).mobile-and-tablet--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).mobile-and-tablet--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile-and-tablet--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).mobile-and-tablet--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--3-5-and-2-5 > .col:first-child, .col-group:not(.compact-gutters).mobile-and-tablet--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).mobile-and-tablet--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).mobile-and-tablet--ruled {
      position: relative; }
      .col-group:not(.compact-gutters).mobile-and-tablet--ruled > .col:nth-child(2):before,
      .col-group:not(.compact-gutters).mobile-and-tablet--ruled > .col:nth-child(3):before,
      .col-group:not(.compact-gutters).mobile-and-tablet--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -1rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group:not(.compact-gutters).mobile-and-tablet--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group:not(.compact-gutters).mobile-and-tablet--centered > .col + .col {
        margin-top: 1em; }
    .col-group:not(.compact-gutters).mobile-and-tablet--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }
  @media (min-width: 760px) and (max-width: 1279px) {
    .col-group:not(.compact-gutters).tablet-and-desktop--full > .col {
      width: 100%; }
      .col-group:not(.compact-gutters).tablet-and-desktop--full > .col + .col {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-2 > .col {
      width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2);
      max-width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2); }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-2 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-desktop--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-2 > .col:nth-child(n + 3) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-3 > .col {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3);
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3); }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-3 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-desktop--1-3 > .col:nth-child(2), .col-group:not(.compact-gutters).tablet-and-desktop--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-3 > .col:nth-child(n + 4) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-4 > .col {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4);
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4); }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-4 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-desktop--1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).tablet-and-desktop--1-4 > .col:nth-child(3), .col-group:not(.compact-gutters).tablet-and-desktop--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-4 > .col:nth-child(n + 5) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-5 > .col {
      width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5);
      max-width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5); }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-5 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-desktop--1-5 > .col:nth-child(2), .col-group:not(.compact-gutters).tablet-and-desktop--1-5 > .col:nth-child(3), .col-group:not(.compact-gutters).tablet-and-desktop--1-5 > .col:nth-child(4), .col-group:not(.compact-gutters).tablet-and-desktop--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).tablet-and-desktop--1-5 > .col:nth-child(n + 6) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-3-and-2-3 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-desktop--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-desktop--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-desktop--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--2-3-and-1-3 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-desktop--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet-and-desktop--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-4-and-3-4 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-desktop--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-desktop--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-desktop--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--3-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-desktop--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet-and-desktop--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-desktop--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-desktop--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--2-5-and-3-5 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-desktop--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet-and-desktop--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-desktop--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-desktop--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--3-5-and-2-5 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-desktop--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet-and-desktop--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-desktop--ruled {
      position: relative; }
      .col-group:not(.compact-gutters).tablet-and-desktop--ruled > .col:nth-child(2):before,
      .col-group:not(.compact-gutters).tablet-and-desktop--ruled > .col:nth-child(3):before,
      .col-group:not(.compact-gutters).tablet-and-desktop--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -1rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group:not(.compact-gutters).tablet-and-desktop--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group:not(.compact-gutters).tablet-and-desktop--centered > .col + .col {
        margin-top: 1em; }
    .col-group:not(.compact-gutters).tablet-and-desktop--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }
  @media (min-width: 760px) {
    .col-group:not(.compact-gutters).tablet-and-above--full > .col {
      width: 100%; }
      .col-group:not(.compact-gutters).tablet-and-above--full > .col + .col {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--1-2 > .col {
      width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2);
      max-width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2); }
      .col-group:not(.compact-gutters).tablet-and-above--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).tablet-and-above--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).tablet-and-above--1-2 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-above--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).tablet-and-above--1-2 > .col:nth-child(n + 3) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--1-3 > .col {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3);
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3); }
      .col-group:not(.compact-gutters).tablet-and-above--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).tablet-and-above--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).tablet-and-above--1-3 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-above--1-3 > .col:nth-child(2), .col-group:not(.compact-gutters).tablet-and-above--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).tablet-and-above--1-3 > .col:nth-child(n + 4) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--1-4 > .col {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4);
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4); }
      .col-group:not(.compact-gutters).tablet-and-above--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).tablet-and-above--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).tablet-and-above--1-4 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-above--1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).tablet-and-above--1-4 > .col:nth-child(3), .col-group:not(.compact-gutters).tablet-and-above--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).tablet-and-above--1-4 > .col:nth-child(n + 5) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--1-5 > .col {
      width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5);
      max-width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5); }
      .col-group:not(.compact-gutters).tablet-and-above--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).tablet-and-above--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).tablet-and-above--1-5 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-above--1-5 > .col:nth-child(2), .col-group:not(.compact-gutters).tablet-and-above--1-5 > .col:nth-child(3), .col-group:not(.compact-gutters).tablet-and-above--1-5 > .col:nth-child(4), .col-group:not(.compact-gutters).tablet-and-above--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).tablet-and-above--1-5 > .col:nth-child(n + 6) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-above--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-above--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--1-3-and-2-3 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-above--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet-and-above--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-above--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-above--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--2-3-and-1-3 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-above--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet-and-above--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-above--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-above--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--1-4-and-3-4 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-above--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet-and-above--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-above--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-above--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--3-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-above--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet-and-above--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).tablet-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).tablet-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).tablet-and-above--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--1-4-and-2-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).tablet-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-above--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-above--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--2-5-and-3-5 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-above--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet-and-above--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-above--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).tablet-and-above--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--3-5-and-2-5 > .col:first-child, .col-group:not(.compact-gutters).tablet-and-above--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).tablet-and-above--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).tablet-and-above--ruled {
      position: relative; }
      .col-group:not(.compact-gutters).tablet-and-above--ruled > .col:nth-child(2):before,
      .col-group:not(.compact-gutters).tablet-and-above--ruled > .col:nth-child(3):before,
      .col-group:not(.compact-gutters).tablet-and-above--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -1rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group:not(.compact-gutters).tablet-and-above--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group:not(.compact-gutters).tablet-and-above--centered > .col + .col {
        margin-top: 1em; }
    .col-group:not(.compact-gutters).tablet-and-above--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }
  @media (min-width: 960px) {
    .col-group:not(.compact-gutters).desktop-and-above--full > .col {
      width: 100%; }
      .col-group:not(.compact-gutters).desktop-and-above--full > .col + .col {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--1-2 > .col {
      width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2);
      max-width: calc( (100% * 1 / 2 - 2rem) + 2rem / 2); }
      .col-group:not(.compact-gutters).desktop-and-above--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).desktop-and-above--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).desktop-and-above--1-2 > .col:first-child, .col-group:not(.compact-gutters).desktop-and-above--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).desktop-and-above--1-2 > .col:nth-child(n + 3) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--1-3 > .col {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3);
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 3); }
      .col-group:not(.compact-gutters).desktop-and-above--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).desktop-and-above--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).desktop-and-above--1-3 > .col:first-child, .col-group:not(.compact-gutters).desktop-and-above--1-3 > .col:nth-child(2), .col-group:not(.compact-gutters).desktop-and-above--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).desktop-and-above--1-3 > .col:nth-child(n + 4) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--1-4 > .col {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4);
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 4); }
      .col-group:not(.compact-gutters).desktop-and-above--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).desktop-and-above--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).desktop-and-above--1-4 > .col:first-child, .col-group:not(.compact-gutters).desktop-and-above--1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).desktop-and-above--1-4 > .col:nth-child(3), .col-group:not(.compact-gutters).desktop-and-above--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).desktop-and-above--1-4 > .col:nth-child(n + 5) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--1-5 > .col {
      width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5);
      max-width: calc( (100% * 1 / 5 - 2rem) + 2rem / 5); }
      .col-group:not(.compact-gutters).desktop-and-above--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 2rem; }
      .col-group:not(.compact-gutters).desktop-and-above--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group:not(.compact-gutters).desktop-and-above--1-5 > .col:first-child, .col-group:not(.compact-gutters).desktop-and-above--1-5 > .col:nth-child(2), .col-group:not(.compact-gutters).desktop-and-above--1-5 > .col:nth-child(3), .col-group:not(.compact-gutters).desktop-and-above--1-5 > .col:nth-child(4), .col-group:not(.compact-gutters).desktop-and-above--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group:not(.compact-gutters).desktop-and-above--1-5 > .col:nth-child(n + 6) {
        margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop-and-above--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop-and-above--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--1-3-and-2-3 > .col:first-child, .col-group:not(.compact-gutters).desktop-and-above--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).desktop-and-above--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop-and-above--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop-and-above--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--2-3-and-1-3 > .col:first-child, .col-group:not(.compact-gutters).desktop-and-above--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).desktop-and-above--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop-and-above--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop-and-above--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--1-4-and-3-4 > .col:first-child, .col-group:not(.compact-gutters).desktop-and-above--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).desktop-and-above--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop-and-above--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop-and-above--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--3-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).desktop-and-above--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).desktop-and-above--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).desktop-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).desktop-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 2rem) + 2rem / 3); }
    .col-group:not(.compact-gutters).desktop-and-above--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--1-4-and-2-4-and-1-4 > .col:first-child, .col-group:not(.compact-gutters).desktop-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group:not(.compact-gutters).desktop-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).desktop-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop-and-above--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop-and-above--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--2-5-and-3-5 > .col:first-child, .col-group:not(.compact-gutters).desktop-and-above--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).desktop-and-above--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop-and-above--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 2rem) + 2rem / 2); }
    .col-group:not(.compact-gutters).desktop-and-above--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--3-5-and-2-5 > .col:first-child, .col-group:not(.compact-gutters).desktop-and-above--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group:not(.compact-gutters).desktop-and-above--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 2rem; }
    .col-group:not(.compact-gutters).desktop-and-above--ruled {
      position: relative; }
      .col-group:not(.compact-gutters).desktop-and-above--ruled > .col:nth-child(2):before,
      .col-group:not(.compact-gutters).desktop-and-above--ruled > .col:nth-child(3):before,
      .col-group:not(.compact-gutters).desktop-and-above--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -1rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group:not(.compact-gutters).desktop-and-above--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group:not(.compact-gutters).desktop-and-above--centered > .col + .col {
        margin-top: 1em; }
    .col-group:not(.compact-gutters).desktop-and-above--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }
  .col-group.compact-gutters.all--full > .col {
    width: 100%; }
    .col-group.compact-gutters.all--full > .col + .col {
      margin-top: 1rem; }
  .col-group.compact-gutters.all--1-2 > .col {
    width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2);
    max-width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.all--1-2 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.all--1-2 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto; }
    .col-group.compact-gutters.all--1-2 > .col:first-child, .col-group.compact-gutters.all--1-2 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.all--1-2 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
  .col-group.compact-gutters.all--1-3 > .col {
    width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3);
    max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.all--1-3 > .col:not(:nth-child(3n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.all--1-3 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto; }
    .col-group.compact-gutters.all--1-3 > .col:first-child, .col-group.compact-gutters.all--1-3 > .col:nth-child(2), .col-group.compact-gutters.all--1-3 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group.compact-gutters.all--1-3 > .col:nth-child(n + 4) {
      margin-top: 1rem; }
  .col-group.compact-gutters.all--1-4 > .col {
    width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4);
    max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4); }
    .col-group.compact-gutters.all--1-4 > .col:not(:nth-child(4n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.all--1-4 > .col:nth-child(4n) {
      flex: 1 1 0;
      width: auto; }
    .col-group.compact-gutters.all--1-4 > .col:first-child, .col-group.compact-gutters.all--1-4 > .col:nth-child(2), .col-group.compact-gutters.all--1-4 > .col:nth-child(3), .col-group.compact-gutters.all--1-4 > .col:nth-child(4) {
      margin-top: 0; }
    .col-group.compact-gutters.all--1-4 > .col:nth-child(n + 5) {
      margin-top: 1rem; }
  .col-group.compact-gutters.all--1-5 > .col {
    width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5);
    max-width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5); }
    .col-group.compact-gutters.all--1-5 > .col:not(:nth-child(5n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.all--1-5 > .col:nth-child(5n) {
      flex: 1 1 0;
      width: auto; }
    .col-group.compact-gutters.all--1-5 > .col:first-child, .col-group.compact-gutters.all--1-5 > .col:nth-child(2), .col-group.compact-gutters.all--1-5 > .col:nth-child(3), .col-group.compact-gutters.all--1-5 > .col:nth-child(4), .col-group.compact-gutters.all--1-5 > .col:nth-child(5) {
      margin-top: 0; }
    .col-group.compact-gutters.all--1-5 > .col:nth-child(n + 6) {
      margin-top: 1rem; }
  .col-group.compact-gutters.all--1-3-and-2-3 > .col:nth-child(2n + 1) {
    width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
  .col-group.compact-gutters.all--1-3-and-2-3 > .col:nth-child(2n) {
    flex: 1 1 0;
    width: auto;
    max-width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
  .col-group.compact-gutters.all--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
    margin-left: 1rem; }
  .col-group.compact-gutters.all--1-3-and-2-3 > .col:first-child, .col-group.compact-gutters.all--1-3-and-2-3 > .col:nth-child(2) {
    margin-top: 0; }
  .col-group.compact-gutters.all--1-3-and-2-3 > .col:nth-child(n + 3) {
    margin-top: 1rem; }
  .col-group.compact-gutters.all--2-3-and-1-3 > .col:nth-child(2n + 1) {
    width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
  .col-group.compact-gutters.all--2-3-and-1-3 > .col:nth-child(2n) {
    flex: 1 1 0;
    width: auto;
    max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
  .col-group.compact-gutters.all--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
    margin-left: 1rem; }
  .col-group.compact-gutters.all--2-3-and-1-3 > .col:first-child, .col-group.compact-gutters.all--2-3-and-1-3 > .col:nth-child(2) {
    margin-top: 0; }
  .col-group.compact-gutters.all--2-3-and-1-3 > .col:nth-child(n + 3) {
    margin-top: 1rem; }
  .col-group.compact-gutters.all--1-4-and-3-4 > .col:nth-child(2n + 1) {
    width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
  .col-group.compact-gutters.all--1-4-and-3-4 > .col:nth-child(2n) {
    flex: 1 1 0;
    width: auto;
    max-width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
  .col-group.compact-gutters.all--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
    margin-left: 1rem; }
  .col-group.compact-gutters.all--1-4-and-3-4 > .col:first-child, .col-group.compact-gutters.all--1-4-and-3-4 > .col:nth-child(2) {
    margin-top: 0; }
  .col-group.compact-gutters.all--1-4-and-3-4 > .col:nth-child(n + 3) {
    margin-top: 1rem; }
  .col-group.compact-gutters.all--3-4-and-1-4 > .col:nth-child(2n + 1) {
    width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
  .col-group.compact-gutters.all--3-4-and-1-4 > .col:nth-child(2n) {
    flex: 1 1 0;
    width: auto;
    max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
  .col-group.compact-gutters.all--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
    margin-left: 1rem; }
  .col-group.compact-gutters.all--3-4-and-1-4 > .col:first-child, .col-group.compact-gutters.all--3-4-and-1-4 > .col:nth-child(2) {
    margin-top: 0; }
  .col-group.compact-gutters.all--3-4-and-1-4 > .col:nth-child(n + 3) {
    margin-top: 1rem; }
  .col-group.compact-gutters.all--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
    width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
  .col-group.compact-gutters.all--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
    width: calc( (100% * 2 / 4 - 1rem) + 1rem / 3); }
  .col-group.compact-gutters.all--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
    flex: 1 1 0;
    width: auto;
    max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
  .col-group.compact-gutters.all--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
    margin-left: 1rem; }
  .col-group.compact-gutters.all--1-4-and-2-4-and-1-4 > .col:first-child, .col-group.compact-gutters.all--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group.compact-gutters.all--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
    margin-top: 0; }
  .col-group.compact-gutters.all--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
    margin-top: 1rem; }
  .col-group.compact-gutters.all--2-5-and-3-5 > .col:nth-child(2n + 1) {
    width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
  .col-group.compact-gutters.all--2-5-and-3-5 > .col:nth-child(2n) {
    flex: 1 1 0;
    width: auto;
    max-width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
  .col-group.compact-gutters.all--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
    margin-left: 1rem; }
  .col-group.compact-gutters.all--2-5-and-3-5 > .col:first-child, .col-group.compact-gutters.all--2-5-and-3-5 > .col:nth-child(2) {
    margin-top: 0; }
  .col-group.compact-gutters.all--2-5-and-3-5 > .col:nth-child(n + 3) {
    margin-top: 1rem; }
  .col-group.compact-gutters.all--3-5-and-2-5 > .col:nth-child(2n + 1) {
    width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
  .col-group.compact-gutters.all--3-5-and-2-5 > .col:nth-child(2n) {
    flex: 1 1 0;
    width: auto;
    max-width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
  .col-group.compact-gutters.all--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
    margin-left: 1rem; }
  .col-group.compact-gutters.all--3-5-and-2-5 > .col:first-child, .col-group.compact-gutters.all--3-5-and-2-5 > .col:nth-child(2) {
    margin-top: 0; }
  .col-group.compact-gutters.all--3-5-and-2-5 > .col:nth-child(n + 3) {
    margin-top: 1rem; }
  .col-group.compact-gutters.all--ruled {
    position: relative; }
    .col-group.compact-gutters.all--ruled > .col:nth-child(2):before,
    .col-group.compact-gutters.all--ruled > .col:nth-child(3):before,
    .col-group.compact-gutters.all--ruled > .col:nth-child(4):before {
      border-left: 1px solid #D1D2D4;
      content: "";
      display: block;
      margin-left: -0.5rem;
      position: absolute;
      top: 0;
      bottom: 0; }
  .col-group.compact-gutters.all--centered > .col {
    margin-left: auto;
    margin-right: auto; }
    .col-group.compact-gutters.all--centered > .col + .col {
      margin-top: 1em; }
  .col-group.compact-gutters.all--col-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column-reverse;
    -moz-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse; }
  @media (max-width: 759px) {
    .col-group.compact-gutters.mobile--full > .col {
      width: 100%; }
      .col-group.compact-gutters.mobile--full > .col + .col {
        margin-top: 1rem; }
    .col-group.compact-gutters.mobile--1-2 > .col {
      width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2);
      max-width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2); }
      .col-group.compact-gutters.mobile--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.mobile--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.mobile--1-2 > .col:first-child, .col-group.compact-gutters.mobile--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group.compact-gutters.mobile--1-2 > .col:nth-child(n + 3) {
        margin-top: 1rem; }
    .col-group.compact-gutters.mobile--1-3 > .col {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3);
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3); }
      .col-group.compact-gutters.mobile--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.mobile--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.mobile--1-3 > .col:first-child, .col-group.compact-gutters.mobile--1-3 > .col:nth-child(2), .col-group.compact-gutters.mobile--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group.compact-gutters.mobile--1-3 > .col:nth-child(n + 4) {
        margin-top: 1rem; }
    .col-group.compact-gutters.mobile--1-4 > .col {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4);
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4); }
      .col-group.compact-gutters.mobile--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.mobile--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.mobile--1-4 > .col:first-child, .col-group.compact-gutters.mobile--1-4 > .col:nth-child(2), .col-group.compact-gutters.mobile--1-4 > .col:nth-child(3), .col-group.compact-gutters.mobile--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group.compact-gutters.mobile--1-4 > .col:nth-child(n + 5) {
        margin-top: 1rem; }
    .col-group.compact-gutters.mobile--1-5 > .col {
      width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5);
      max-width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5); }
      .col-group.compact-gutters.mobile--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.mobile--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.mobile--1-5 > .col:first-child, .col-group.compact-gutters.mobile--1-5 > .col:nth-child(2), .col-group.compact-gutters.mobile--1-5 > .col:nth-child(3), .col-group.compact-gutters.mobile--1-5 > .col:nth-child(4), .col-group.compact-gutters.mobile--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group.compact-gutters.mobile--1-5 > .col:nth-child(n + 6) {
        margin-top: 1rem; }
    .col-group.compact-gutters.mobile--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.mobile--1-3-and-2-3 > .col:first-child, .col-group.compact-gutters.mobile--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.mobile--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.mobile--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.mobile--2-3-and-1-3 > .col:first-child, .col-group.compact-gutters.mobile--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.mobile--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.mobile--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.mobile--1-4-and-3-4 > .col:first-child, .col-group.compact-gutters.mobile--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.mobile--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.mobile--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.mobile--3-4-and-1-4 > .col:first-child, .col-group.compact-gutters.mobile--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.mobile--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.mobile--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.mobile--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.mobile--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.mobile--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.mobile--1-4-and-2-4-and-1-4 > .col:first-child, .col-group.compact-gutters.mobile--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group.compact-gutters.mobile--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group.compact-gutters.mobile--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 1rem; }
    .col-group.compact-gutters.mobile--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.mobile--2-5-and-3-5 > .col:first-child, .col-group.compact-gutters.mobile--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.mobile--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.mobile--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.mobile--3-5-and-2-5 > .col:first-child, .col-group.compact-gutters.mobile--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.mobile--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.mobile--ruled {
      position: relative; }
      .col-group.compact-gutters.mobile--ruled > .col:nth-child(2):before,
      .col-group.compact-gutters.mobile--ruled > .col:nth-child(3):before,
      .col-group.compact-gutters.mobile--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -0.5rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group.compact-gutters.mobile--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group.compact-gutters.mobile--centered > .col + .col {
        margin-top: 1em; }
    .col-group.compact-gutters.mobile--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }
  @media (min-width: 760px) and (max-width: 959px) {
    .col-group.compact-gutters.tablet--full > .col {
      width: 100%; }
      .col-group.compact-gutters.tablet--full > .col + .col {
        margin-top: 1rem; }
    .col-group.compact-gutters.tablet--1-2 > .col {
      width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2);
      max-width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2); }
      .col-group.compact-gutters.tablet--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.tablet--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.tablet--1-2 > .col:first-child, .col-group.compact-gutters.tablet--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group.compact-gutters.tablet--1-2 > .col:nth-child(n + 3) {
        margin-top: 1rem; }
    .col-group.compact-gutters.tablet--1-3 > .col {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3);
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3); }
      .col-group.compact-gutters.tablet--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.tablet--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.tablet--1-3 > .col:first-child, .col-group.compact-gutters.tablet--1-3 > .col:nth-child(2), .col-group.compact-gutters.tablet--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group.compact-gutters.tablet--1-3 > .col:nth-child(n + 4) {
        margin-top: 1rem; }
    .col-group.compact-gutters.tablet--1-4 > .col {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4);
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4); }
      .col-group.compact-gutters.tablet--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.tablet--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.tablet--1-4 > .col:first-child, .col-group.compact-gutters.tablet--1-4 > .col:nth-child(2), .col-group.compact-gutters.tablet--1-4 > .col:nth-child(3), .col-group.compact-gutters.tablet--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group.compact-gutters.tablet--1-4 > .col:nth-child(n + 5) {
        margin-top: 1rem; }
    .col-group.compact-gutters.tablet--1-5 > .col {
      width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5);
      max-width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5); }
      .col-group.compact-gutters.tablet--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.tablet--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.tablet--1-5 > .col:first-child, .col-group.compact-gutters.tablet--1-5 > .col:nth-child(2), .col-group.compact-gutters.tablet--1-5 > .col:nth-child(3), .col-group.compact-gutters.tablet--1-5 > .col:nth-child(4), .col-group.compact-gutters.tablet--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group.compact-gutters.tablet--1-5 > .col:nth-child(n + 6) {
        margin-top: 1rem; }
    .col-group.compact-gutters.tablet--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet--1-3-and-2-3 > .col:first-child, .col-group.compact-gutters.tablet--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet--2-3-and-1-3 > .col:first-child, .col-group.compact-gutters.tablet--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet--1-4-and-3-4 > .col:first-child, .col-group.compact-gutters.tablet--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet--3-4-and-1-4 > .col:first-child, .col-group.compact-gutters.tablet--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.tablet--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet--1-4-and-2-4-and-1-4 > .col:first-child, .col-group.compact-gutters.tablet--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group.compact-gutters.tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet--2-5-and-3-5 > .col:first-child, .col-group.compact-gutters.tablet--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet--3-5-and-2-5 > .col:first-child, .col-group.compact-gutters.tablet--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet--ruled {
      position: relative; }
      .col-group.compact-gutters.tablet--ruled > .col:nth-child(2):before,
      .col-group.compact-gutters.tablet--ruled > .col:nth-child(3):before,
      .col-group.compact-gutters.tablet--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -0.5rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group.compact-gutters.tablet--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group.compact-gutters.tablet--centered > .col + .col {
        margin-top: 1em; }
    .col-group.compact-gutters.tablet--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }
  @media (min-width: 960px) and (max-width: 1279px) {
    .col-group.compact-gutters.desktop--full > .col {
      width: 100%; }
      .col-group.compact-gutters.desktop--full > .col + .col {
        margin-top: 1rem; }
    .col-group.compact-gutters.desktop--1-2 > .col {
      width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2);
      max-width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2); }
      .col-group.compact-gutters.desktop--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.desktop--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.desktop--1-2 > .col:first-child, .col-group.compact-gutters.desktop--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group.compact-gutters.desktop--1-2 > .col:nth-child(n + 3) {
        margin-top: 1rem; }
    .col-group.compact-gutters.desktop--1-3 > .col {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3);
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3); }
      .col-group.compact-gutters.desktop--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.desktop--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.desktop--1-3 > .col:first-child, .col-group.compact-gutters.desktop--1-3 > .col:nth-child(2), .col-group.compact-gutters.desktop--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group.compact-gutters.desktop--1-3 > .col:nth-child(n + 4) {
        margin-top: 1rem; }
    .col-group.compact-gutters.desktop--1-4 > .col {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4);
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4); }
      .col-group.compact-gutters.desktop--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.desktop--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.desktop--1-4 > .col:first-child, .col-group.compact-gutters.desktop--1-4 > .col:nth-child(2), .col-group.compact-gutters.desktop--1-4 > .col:nth-child(3), .col-group.compact-gutters.desktop--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group.compact-gutters.desktop--1-4 > .col:nth-child(n + 5) {
        margin-top: 1rem; }
    .col-group.compact-gutters.desktop--1-5 > .col {
      width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5);
      max-width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5); }
      .col-group.compact-gutters.desktop--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.desktop--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.desktop--1-5 > .col:first-child, .col-group.compact-gutters.desktop--1-5 > .col:nth-child(2), .col-group.compact-gutters.desktop--1-5 > .col:nth-child(3), .col-group.compact-gutters.desktop--1-5 > .col:nth-child(4), .col-group.compact-gutters.desktop--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group.compact-gutters.desktop--1-5 > .col:nth-child(n + 6) {
        margin-top: 1rem; }
    .col-group.compact-gutters.desktop--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.desktop--1-3-and-2-3 > .col:first-child, .col-group.compact-gutters.desktop--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.desktop--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.desktop--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.desktop--2-3-and-1-3 > .col:first-child, .col-group.compact-gutters.desktop--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.desktop--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.desktop--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.desktop--1-4-and-3-4 > .col:first-child, .col-group.compact-gutters.desktop--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.desktop--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.desktop--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.desktop--3-4-and-1-4 > .col:first-child, .col-group.compact-gutters.desktop--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.desktop--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.desktop--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.desktop--1-4-and-2-4-and-1-4 > .col:first-child, .col-group.compact-gutters.desktop--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group.compact-gutters.desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group.compact-gutters.desktop--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 1rem; }
    .col-group.compact-gutters.desktop--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.desktop--2-5-and-3-5 > .col:first-child, .col-group.compact-gutters.desktop--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.desktop--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.desktop--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.desktop--3-5-and-2-5 > .col:first-child, .col-group.compact-gutters.desktop--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.desktop--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.desktop--ruled {
      position: relative; }
      .col-group.compact-gutters.desktop--ruled > .col:nth-child(2):before,
      .col-group.compact-gutters.desktop--ruled > .col:nth-child(3):before,
      .col-group.compact-gutters.desktop--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -0.5rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group.compact-gutters.desktop--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group.compact-gutters.desktop--centered > .col + .col {
        margin-top: 1em; }
    .col-group.compact-gutters.desktop--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }
  @media (min-width: 1280px) {
    .col-group.compact-gutters.wide--full > .col {
      width: 100%; }
      .col-group.compact-gutters.wide--full > .col + .col {
        margin-top: 1rem; }
    .col-group.compact-gutters.wide--1-2 > .col {
      width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2);
      max-width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2); }
      .col-group.compact-gutters.wide--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.wide--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.wide--1-2 > .col:first-child, .col-group.compact-gutters.wide--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group.compact-gutters.wide--1-2 > .col:nth-child(n + 3) {
        margin-top: 1rem; }
    .col-group.compact-gutters.wide--1-3 > .col {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3);
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3); }
      .col-group.compact-gutters.wide--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.wide--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.wide--1-3 > .col:first-child, .col-group.compact-gutters.wide--1-3 > .col:nth-child(2), .col-group.compact-gutters.wide--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group.compact-gutters.wide--1-3 > .col:nth-child(n + 4) {
        margin-top: 1rem; }
    .col-group.compact-gutters.wide--1-4 > .col {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4);
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4); }
      .col-group.compact-gutters.wide--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.wide--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.wide--1-4 > .col:first-child, .col-group.compact-gutters.wide--1-4 > .col:nth-child(2), .col-group.compact-gutters.wide--1-4 > .col:nth-child(3), .col-group.compact-gutters.wide--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group.compact-gutters.wide--1-4 > .col:nth-child(n + 5) {
        margin-top: 1rem; }
    .col-group.compact-gutters.wide--1-5 > .col {
      width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5);
      max-width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5); }
      .col-group.compact-gutters.wide--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.wide--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.wide--1-5 > .col:first-child, .col-group.compact-gutters.wide--1-5 > .col:nth-child(2), .col-group.compact-gutters.wide--1-5 > .col:nth-child(3), .col-group.compact-gutters.wide--1-5 > .col:nth-child(4), .col-group.compact-gutters.wide--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group.compact-gutters.wide--1-5 > .col:nth-child(n + 6) {
        margin-top: 1rem; }
    .col-group.compact-gutters.wide--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.wide--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.wide--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.wide--1-3-and-2-3 > .col:first-child, .col-group.compact-gutters.wide--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.wide--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.wide--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.wide--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.wide--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.wide--2-3-and-1-3 > .col:first-child, .col-group.compact-gutters.wide--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.wide--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.wide--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.wide--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.wide--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.wide--1-4-and-3-4 > .col:first-child, .col-group.compact-gutters.wide--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.wide--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.wide--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.wide--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.wide--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.wide--3-4-and-1-4 > .col:first-child, .col-group.compact-gutters.wide--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.wide--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.wide--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.wide--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.wide--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.wide--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.wide--1-4-and-2-4-and-1-4 > .col:first-child, .col-group.compact-gutters.wide--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group.compact-gutters.wide--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group.compact-gutters.wide--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 1rem; }
    .col-group.compact-gutters.wide--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.wide--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.wide--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.wide--2-5-and-3-5 > .col:first-child, .col-group.compact-gutters.wide--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.wide--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.wide--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.wide--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.wide--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.wide--3-5-and-2-5 > .col:first-child, .col-group.compact-gutters.wide--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.wide--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.wide--ruled {
      position: relative; }
      .col-group.compact-gutters.wide--ruled > .col:nth-child(2):before,
      .col-group.compact-gutters.wide--ruled > .col:nth-child(3):before,
      .col-group.compact-gutters.wide--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -0.5rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group.compact-gutters.wide--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group.compact-gutters.wide--centered > .col + .col {
        margin-top: 1em; }
    .col-group.compact-gutters.wide--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }
  @media (max-width: 959px) {
    .col-group.compact-gutters.mobile-and-tablet--full > .col {
      width: 100%; }
      .col-group.compact-gutters.mobile-and-tablet--full > .col + .col {
        margin-top: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--1-2 > .col {
      width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2);
      max-width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2); }
      .col-group.compact-gutters.mobile-and-tablet--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.mobile-and-tablet--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.mobile-and-tablet--1-2 > .col:first-child, .col-group.compact-gutters.mobile-and-tablet--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group.compact-gutters.mobile-and-tablet--1-2 > .col:nth-child(n + 3) {
        margin-top: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--1-3 > .col {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3);
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3); }
      .col-group.compact-gutters.mobile-and-tablet--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.mobile-and-tablet--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.mobile-and-tablet--1-3 > .col:first-child, .col-group.compact-gutters.mobile-and-tablet--1-3 > .col:nth-child(2), .col-group.compact-gutters.mobile-and-tablet--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group.compact-gutters.mobile-and-tablet--1-3 > .col:nth-child(n + 4) {
        margin-top: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--1-4 > .col {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4);
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4); }
      .col-group.compact-gutters.mobile-and-tablet--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.mobile-and-tablet--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.mobile-and-tablet--1-4 > .col:first-child, .col-group.compact-gutters.mobile-and-tablet--1-4 > .col:nth-child(2), .col-group.compact-gutters.mobile-and-tablet--1-4 > .col:nth-child(3), .col-group.compact-gutters.mobile-and-tablet--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group.compact-gutters.mobile-and-tablet--1-4 > .col:nth-child(n + 5) {
        margin-top: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--1-5 > .col {
      width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5);
      max-width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5); }
      .col-group.compact-gutters.mobile-and-tablet--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.mobile-and-tablet--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.mobile-and-tablet--1-5 > .col:first-child, .col-group.compact-gutters.mobile-and-tablet--1-5 > .col:nth-child(2), .col-group.compact-gutters.mobile-and-tablet--1-5 > .col:nth-child(3), .col-group.compact-gutters.mobile-and-tablet--1-5 > .col:nth-child(4), .col-group.compact-gutters.mobile-and-tablet--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group.compact-gutters.mobile-and-tablet--1-5 > .col:nth-child(n + 6) {
        margin-top: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile-and-tablet--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile-and-tablet--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--1-3-and-2-3 > .col:first-child, .col-group.compact-gutters.mobile-and-tablet--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.mobile-and-tablet--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile-and-tablet--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile-and-tablet--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--2-3-and-1-3 > .col:first-child, .col-group.compact-gutters.mobile-and-tablet--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.mobile-and-tablet--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile-and-tablet--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile-and-tablet--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--1-4-and-3-4 > .col:first-child, .col-group.compact-gutters.mobile-and-tablet--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.mobile-and-tablet--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile-and-tablet--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile-and-tablet--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--3-4-and-1-4 > .col:first-child, .col-group.compact-gutters.mobile-and-tablet--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.mobile-and-tablet--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:first-child, .col-group.compact-gutters.mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group.compact-gutters.mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group.compact-gutters.mobile-and-tablet--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile-and-tablet--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile-and-tablet--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--2-5-and-3-5 > .col:first-child, .col-group.compact-gutters.mobile-and-tablet--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.mobile-and-tablet--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile-and-tablet--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.mobile-and-tablet--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--3-5-and-2-5 > .col:first-child, .col-group.compact-gutters.mobile-and-tablet--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.mobile-and-tablet--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.mobile-and-tablet--ruled {
      position: relative; }
      .col-group.compact-gutters.mobile-and-tablet--ruled > .col:nth-child(2):before,
      .col-group.compact-gutters.mobile-and-tablet--ruled > .col:nth-child(3):before,
      .col-group.compact-gutters.mobile-and-tablet--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -0.5rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group.compact-gutters.mobile-and-tablet--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group.compact-gutters.mobile-and-tablet--centered > .col + .col {
        margin-top: 1em; }
    .col-group.compact-gutters.mobile-and-tablet--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }
  @media (min-width: 760px) and (max-width: 1279px) {
    .col-group.compact-gutters.tablet-and-desktop--full > .col {
      width: 100%; }
      .col-group.compact-gutters.tablet-and-desktop--full > .col + .col {
        margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--1-2 > .col {
      width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2);
      max-width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2); }
      .col-group.compact-gutters.tablet-and-desktop--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.tablet-and-desktop--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.tablet-and-desktop--1-2 > .col:first-child, .col-group.compact-gutters.tablet-and-desktop--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group.compact-gutters.tablet-and-desktop--1-2 > .col:nth-child(n + 3) {
        margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--1-3 > .col {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3);
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3); }
      .col-group.compact-gutters.tablet-and-desktop--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.tablet-and-desktop--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.tablet-and-desktop--1-3 > .col:first-child, .col-group.compact-gutters.tablet-and-desktop--1-3 > .col:nth-child(2), .col-group.compact-gutters.tablet-and-desktop--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group.compact-gutters.tablet-and-desktop--1-3 > .col:nth-child(n + 4) {
        margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--1-4 > .col {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4);
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4); }
      .col-group.compact-gutters.tablet-and-desktop--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.tablet-and-desktop--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.tablet-and-desktop--1-4 > .col:first-child, .col-group.compact-gutters.tablet-and-desktop--1-4 > .col:nth-child(2), .col-group.compact-gutters.tablet-and-desktop--1-4 > .col:nth-child(3), .col-group.compact-gutters.tablet-and-desktop--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group.compact-gutters.tablet-and-desktop--1-4 > .col:nth-child(n + 5) {
        margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--1-5 > .col {
      width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5);
      max-width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5); }
      .col-group.compact-gutters.tablet-and-desktop--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.tablet-and-desktop--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.tablet-and-desktop--1-5 > .col:first-child, .col-group.compact-gutters.tablet-and-desktop--1-5 > .col:nth-child(2), .col-group.compact-gutters.tablet-and-desktop--1-5 > .col:nth-child(3), .col-group.compact-gutters.tablet-and-desktop--1-5 > .col:nth-child(4), .col-group.compact-gutters.tablet-and-desktop--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group.compact-gutters.tablet-and-desktop--1-5 > .col:nth-child(n + 6) {
        margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-desktop--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-desktop--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--1-3-and-2-3 > .col:first-child, .col-group.compact-gutters.tablet-and-desktop--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet-and-desktop--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-desktop--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-desktop--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--2-3-and-1-3 > .col:first-child, .col-group.compact-gutters.tablet-and-desktop--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet-and-desktop--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-desktop--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-desktop--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--1-4-and-3-4 > .col:first-child, .col-group.compact-gutters.tablet-and-desktop--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet-and-desktop--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-desktop--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-desktop--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--3-4-and-1-4 > .col:first-child, .col-group.compact-gutters.tablet-and-desktop--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet-and-desktop--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:first-child, .col-group.compact-gutters.tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group.compact-gutters.tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet-and-desktop--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-desktop--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-desktop--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--2-5-and-3-5 > .col:first-child, .col-group.compact-gutters.tablet-and-desktop--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet-and-desktop--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-desktop--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-desktop--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--3-5-and-2-5 > .col:first-child, .col-group.compact-gutters.tablet-and-desktop--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet-and-desktop--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-desktop--ruled {
      position: relative; }
      .col-group.compact-gutters.tablet-and-desktop--ruled > .col:nth-child(2):before,
      .col-group.compact-gutters.tablet-and-desktop--ruled > .col:nth-child(3):before,
      .col-group.compact-gutters.tablet-and-desktop--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -0.5rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group.compact-gutters.tablet-and-desktop--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group.compact-gutters.tablet-and-desktop--centered > .col + .col {
        margin-top: 1em; }
    .col-group.compact-gutters.tablet-and-desktop--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }
  @media (min-width: 760px) {
    .col-group.compact-gutters.tablet-and-above--full > .col {
      width: 100%; }
      .col-group.compact-gutters.tablet-and-above--full > .col + .col {
        margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-above--1-2 > .col {
      width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2);
      max-width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2); }
      .col-group.compact-gutters.tablet-and-above--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.tablet-and-above--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.tablet-and-above--1-2 > .col:first-child, .col-group.compact-gutters.tablet-and-above--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group.compact-gutters.tablet-and-above--1-2 > .col:nth-child(n + 3) {
        margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-above--1-3 > .col {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3);
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3); }
      .col-group.compact-gutters.tablet-and-above--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.tablet-and-above--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.tablet-and-above--1-3 > .col:first-child, .col-group.compact-gutters.tablet-and-above--1-3 > .col:nth-child(2), .col-group.compact-gutters.tablet-and-above--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group.compact-gutters.tablet-and-above--1-3 > .col:nth-child(n + 4) {
        margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-above--1-4 > .col {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4);
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4); }
      .col-group.compact-gutters.tablet-and-above--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.tablet-and-above--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.tablet-and-above--1-4 > .col:first-child, .col-group.compact-gutters.tablet-and-above--1-4 > .col:nth-child(2), .col-group.compact-gutters.tablet-and-above--1-4 > .col:nth-child(3), .col-group.compact-gutters.tablet-and-above--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group.compact-gutters.tablet-and-above--1-4 > .col:nth-child(n + 5) {
        margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-above--1-5 > .col {
      width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5);
      max-width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5); }
      .col-group.compact-gutters.tablet-and-above--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.tablet-and-above--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.tablet-and-above--1-5 > .col:first-child, .col-group.compact-gutters.tablet-and-above--1-5 > .col:nth-child(2), .col-group.compact-gutters.tablet-and-above--1-5 > .col:nth-child(3), .col-group.compact-gutters.tablet-and-above--1-5 > .col:nth-child(4), .col-group.compact-gutters.tablet-and-above--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group.compact-gutters.tablet-and-above--1-5 > .col:nth-child(n + 6) {
        margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-above--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-above--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-above--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet-and-above--1-3-and-2-3 > .col:first-child, .col-group.compact-gutters.tablet-and-above--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet-and-above--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-above--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-above--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-above--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet-and-above--2-3-and-1-3 > .col:first-child, .col-group.compact-gutters.tablet-and-above--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet-and-above--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-above--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-above--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-above--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet-and-above--1-4-and-3-4 > .col:first-child, .col-group.compact-gutters.tablet-and-above--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet-and-above--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-above--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-above--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-above--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet-and-above--3-4-and-1-4 > .col:first-child, .col-group.compact-gutters.tablet-and-above--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet-and-above--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.tablet-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.tablet-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.tablet-and-above--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet-and-above--1-4-and-2-4-and-1-4 > .col:first-child, .col-group.compact-gutters.tablet-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group.compact-gutters.tablet-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-above--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-above--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-above--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet-and-above--2-5-and-3-5 > .col:first-child, .col-group.compact-gutters.tablet-and-above--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet-and-above--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-above--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-above--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.tablet-and-above--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.tablet-and-above--3-5-and-2-5 > .col:first-child, .col-group.compact-gutters.tablet-and-above--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.tablet-and-above--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.tablet-and-above--ruled {
      position: relative; }
      .col-group.compact-gutters.tablet-and-above--ruled > .col:nth-child(2):before,
      .col-group.compact-gutters.tablet-and-above--ruled > .col:nth-child(3):before,
      .col-group.compact-gutters.tablet-and-above--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -0.5rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group.compact-gutters.tablet-and-above--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group.compact-gutters.tablet-and-above--centered > .col + .col {
        margin-top: 1em; }
    .col-group.compact-gutters.tablet-and-above--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }
  @media (min-width: 960px) {
    .col-group.compact-gutters.desktop-and-above--full > .col {
      width: 100%; }
      .col-group.compact-gutters.desktop-and-above--full > .col + .col {
        margin-top: 1rem; }
    .col-group.compact-gutters.desktop-and-above--1-2 > .col {
      width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2);
      max-width: calc( (100% * 1 / 2 - 1rem) + 1rem / 2); }
      .col-group.compact-gutters.desktop-and-above--1-2 > .col:not(:nth-child(2n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.desktop-and-above--1-2 > .col:nth-child(2n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.desktop-and-above--1-2 > .col:first-child, .col-group.compact-gutters.desktop-and-above--1-2 > .col:nth-child(2) {
        margin-top: 0; }
      .col-group.compact-gutters.desktop-and-above--1-2 > .col:nth-child(n + 3) {
        margin-top: 1rem; }
    .col-group.compact-gutters.desktop-and-above--1-3 > .col {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3);
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 3); }
      .col-group.compact-gutters.desktop-and-above--1-3 > .col:not(:nth-child(3n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.desktop-and-above--1-3 > .col:nth-child(3n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.desktop-and-above--1-3 > .col:first-child, .col-group.compact-gutters.desktop-and-above--1-3 > .col:nth-child(2), .col-group.compact-gutters.desktop-and-above--1-3 > .col:nth-child(3) {
        margin-top: 0; }
      .col-group.compact-gutters.desktop-and-above--1-3 > .col:nth-child(n + 4) {
        margin-top: 1rem; }
    .col-group.compact-gutters.desktop-and-above--1-4 > .col {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4);
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 4); }
      .col-group.compact-gutters.desktop-and-above--1-4 > .col:not(:nth-child(4n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.desktop-and-above--1-4 > .col:nth-child(4n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.desktop-and-above--1-4 > .col:first-child, .col-group.compact-gutters.desktop-and-above--1-4 > .col:nth-child(2), .col-group.compact-gutters.desktop-and-above--1-4 > .col:nth-child(3), .col-group.compact-gutters.desktop-and-above--1-4 > .col:nth-child(4) {
        margin-top: 0; }
      .col-group.compact-gutters.desktop-and-above--1-4 > .col:nth-child(n + 5) {
        margin-top: 1rem; }
    .col-group.compact-gutters.desktop-and-above--1-5 > .col {
      width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5);
      max-width: calc( (100% * 1 / 5 - 1rem) + 1rem / 5); }
      .col-group.compact-gutters.desktop-and-above--1-5 > .col:not(:nth-child(5n)) + .col {
        margin-left: 1rem; }
      .col-group.compact-gutters.desktop-and-above--1-5 > .col:nth-child(5n) {
        flex: 1 1 0;
        width: auto; }
      .col-group.compact-gutters.desktop-and-above--1-5 > .col:first-child, .col-group.compact-gutters.desktop-and-above--1-5 > .col:nth-child(2), .col-group.compact-gutters.desktop-and-above--1-5 > .col:nth-child(3), .col-group.compact-gutters.desktop-and-above--1-5 > .col:nth-child(4), .col-group.compact-gutters.desktop-and-above--1-5 > .col:nth-child(5) {
        margin-top: 0; }
      .col-group.compact-gutters.desktop-and-above--1-5 > .col:nth-child(n + 6) {
        margin-top: 1rem; }
    .col-group.compact-gutters.desktop-and-above--1-3-and-2-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop-and-above--1-3-and-2-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop-and-above--1-3-and-2-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.desktop-and-above--1-3-and-2-3 > .col:first-child, .col-group.compact-gutters.desktop-and-above--1-3-and-2-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.desktop-and-above--1-3-and-2-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.desktop-and-above--2-3-and-1-3 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop-and-above--2-3-and-1-3 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 3 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop-and-above--2-3-and-1-3 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.desktop-and-above--2-3-and-1-3 > .col:first-child, .col-group.compact-gutters.desktop-and-above--2-3-and-1-3 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.desktop-and-above--2-3-and-1-3 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.desktop-and-above--1-4-and-3-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop-and-above--1-4-and-3-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop-and-above--1-4-and-3-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.desktop-and-above--1-4-and-3-4 > .col:first-child, .col-group.compact-gutters.desktop-and-above--1-4-and-3-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.desktop-and-above--1-4-and-3-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.desktop-and-above--3-4-and-1-4 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop-and-above--3-4-and-1-4 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop-and-above--3-4-and-1-4 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.desktop-and-above--3-4-and-1-4 > .col:first-child, .col-group.compact-gutters.desktop-and-above--3-4-and-1-4 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.desktop-and-above--3-4-and-1-4 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.desktop-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3n + 1) {
      width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.desktop-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3n - 1) {
      width: calc( (100% * 2 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.desktop-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 1 / 4 - 1rem) + 1rem / 3); }
    .col-group.compact-gutters.desktop-and-above--1-4-and-2-4-and-1-4 > .col:not(:nth-child(3n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.desktop-and-above--1-4-and-2-4-and-1-4 > .col:first-child, .col-group.compact-gutters.desktop-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(2), .col-group.compact-gutters.desktop-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(3) {
      margin-top: 0; }
    .col-group.compact-gutters.desktop-and-above--1-4-and-2-4-and-1-4 > .col:nth-child(n + 4) {
      margin-top: 1rem; }
    .col-group.compact-gutters.desktop-and-above--2-5-and-3-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop-and-above--2-5-and-3-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop-and-above--2-5-and-3-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.desktop-and-above--2-5-and-3-5 > .col:first-child, .col-group.compact-gutters.desktop-and-above--2-5-and-3-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.desktop-and-above--2-5-and-3-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.desktop-and-above--3-5-and-2-5 > .col:nth-child(2n + 1) {
      width: calc( (100% * 3 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop-and-above--3-5-and-2-5 > .col:nth-child(2n) {
      flex: 1 1 0;
      width: auto;
      max-width: calc( (100% * 2 / 5 - 1rem) + 1rem / 2); }
    .col-group.compact-gutters.desktop-and-above--3-5-and-2-5 > .col:not(:nth-child(2n)) + .col {
      margin-left: 1rem; }
    .col-group.compact-gutters.desktop-and-above--3-5-and-2-5 > .col:first-child, .col-group.compact-gutters.desktop-and-above--3-5-and-2-5 > .col:nth-child(2) {
      margin-top: 0; }
    .col-group.compact-gutters.desktop-and-above--3-5-and-2-5 > .col:nth-child(n + 3) {
      margin-top: 1rem; }
    .col-group.compact-gutters.desktop-and-above--ruled {
      position: relative; }
      .col-group.compact-gutters.desktop-and-above--ruled > .col:nth-child(2):before,
      .col-group.compact-gutters.desktop-and-above--ruled > .col:nth-child(3):before,
      .col-group.compact-gutters.desktop-and-above--ruled > .col:nth-child(4):before {
        border-left: 1px solid #D1D2D4;
        content: "";
        display: block;
        margin-left: -0.5rem;
        position: absolute;
        top: 0;
        bottom: 0; }
    .col-group.compact-gutters.desktop-and-above--centered > .col {
      margin-left: auto;
      margin-right: auto; }
      .col-group.compact-gutters.desktop-and-above--centered > .col + .col {
        margin-top: 1em; }
    .col-group.compact-gutters.desktop-and-above--col-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; } }

@media (max-width: 759px) {
  .col.mobile--full {
    width: 100% !important;
    max-width: 100% !important; } }

@media (min-width: 760px) and (max-width: 959px) {
  .col.tablet--full {
    width: 100% !important;
    max-width: 100% !important; } }

@media (max-width: 959px) {
  .col.mobile-and-tablet--full {
    width: 100% !important;
    max-width: 100% !important; } }

.col.all--full {
  width: 100% !important;
  max-width: 100% !important; }

.col > :first-child {
  margin-top: 0; }

.col > :last-child {
  margin-bottom: 0; }

/*doc
---
title: Spacing
name: spacing
category: Patterns
---

Spacing = Margins or gutters between blocks of content or text/typographic elements
*/
/*doc
---
title: Typographic Spacing
parent: spacing
name: subTypographicSpacing
---

Vertical (and sometimes horizontal) spacing between typographic elements including h1 - h6 headers, paragraphs, lists, etc.

Margin space is added "between" text elements instead of just to the bottom or top of all elements. This prevents the first and last elements inside a container from having top or bottom margins respectively so that containers will hug text contents. (Uniform padding can then be easily added to the container element itself as needed for a particular design).

Typographic spacing uses em units so is based on each element's individual font-size. Headers (h1 - h6) have wider top margins when combined with other non-header text elements above them.

This spacing system is based off <a href="http://alistapart.com/article/axiomatic-css-and-lobotomized-owls" target="_blank">"Axiomatic CSS and Lobotomized Owls"</a> but is more targeted to to text related elements instead of being applied to all html elements.

```html_example
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione delectus, magni, voluptate blanditiis animi itaque amet reprehenderit fuga aliquam veritatis.</p>
<p>Saepe quasi officiis mollitia magnam, esse ratione itaque, facere maxime laboriosam velit pariatur quia repudiandae veritatis modi laborum eligendi aperiam.</p>

<h2>Header 2</h2>
<p>Saepe quasi officiis mollitia magnam, esse ratione itaque, facere maxime laboriosam velit pariatur quia repudiandae veritatis modi laborum eligendi aperiam.</p>

<h2>Header 2</h2>
<h3>Header 3 Subheader</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione delectus, magni, voluptate blanditiis animi itaque amet reprehenderit fuga aliquam veritatis.</p>
<p>Saepe quasi officiis mollitia magnam, esse ratione itaque, facere maxime laboriosam velit pariatur quia repudiandae veritatis modi laborum eligendi aperiam.</p>
<p>Necessitatibus aut vel dolorem ipsa id nemo architecto amet nihil libero, repellendus consectetur veniam dolorum, unde quos dolor magnam labore!</p>
```
*/
/*doc
---
title: Block / Gutter Spacing
parent: spacing
name: subBlockSpacing
---

Vertical and horizontal spacing between blocks of content such as gutters between columns or margins between groups of related content.

Uses fixed units instead of ems so that spacing is consistent and independant of an element's text size.

<strong>TODO:</strong> Document and better define standardized gutter spacing. (currently based on width of 20px for column gutters, etc.)

*/
p + *,
h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *,
ul + *, ol + *,
hr + *,
table + *, .alert + *, .sub-title + *, .spaced-list > li + *, .bulleted-list + *, .progress-list > li + *,
* + p,
* +
h1,
* + h2,
* + h3,
* + h4,
* + h5,
* + h6,
* +
ul,
* + ol,
* +
hr,
* +
table,
* + .alert,
* + .sub-title, .spaced-list >
* + li,
* + .bulleted-list, .progress-list >
* + li {
  margin-top: 0.8em; }

.compact-spaced-list > li + *, .numbered-list > li + *, .numbered-list p + *, .pdf-doc-list > li + *, .custom-bullet-list > li + *, th p + *, .compact-spaced-list >
* + li, .numbered-list >
* + li, .numbered-list
* + p, .pdf-doc-list >
* + li, .custom-bullet-list >
* + li, th
* + p {
  margin-top: 0.4em; }

.page__footer__copyright__third-party-logos > * + *, .nav-bar__menu > li + *, .main-actions .btn + *,
.main-actions a + *, .multi-section-form-actions .btn + *,
.multi-section-form-actions a + *, .inline-form ol + *,
.inline-form li + *,
.inline-form > p + *,
.inline-form .field-n-error-wrapper + *, .page__footer__copyright__third-party-logos >
* + *, .nav-bar__menu >
* + li, .main-actions
* + .btn,
.main-actions
* + a, .multi-section-form-actions
* + .btn,
.multi-section-form-actions
* + a, .inline-form
* + ol,
.inline-form
* + li,
.inline-form >
* + p,
.inline-form
* + .field-n-error-wrapper {
  margin-left: 1em; }

.alternating-row-table caption > * + *, .hover-row-table caption > * + *, tfoot.table-total td > * + *, .alternating-row-table caption >
* + *, .hover-row-table caption >
* + *, tfoot.table-total td >
* + * {
  margin-left: 0.5em; }

@media (max-width: 759px) {
  p.u-hide-in-mobile + *,
  h1.u-hide-in-mobile + *, h2.u-hide-in-mobile + *, h3.u-hide-in-mobile + *, h4.u-hide-in-mobile + *, h5.u-hide-in-mobile + *, h6.u-hide-in-mobile + *,
  ul.u-hide-in-mobile + *, ol.u-hide-in-mobile + *,
  hr.u-hide-in-mobile + *,
  table.u-hide-in-mobile + *, .u-hide-in-mobile.alert + *, .u-hide-in-mobile.sub-title + *, .spaced-list > li.u-hide-in-mobile + *, .u-hide-in-mobile.bulleted-list + *, .progress-list > li.u-hide-in-mobile + *, .compact-spaced-list > li.u-hide-in-mobile + *, .numbered-list > li.u-hide-in-mobile + *, .numbered-list p.u-hide-in-mobile + *, .pdf-doc-list > li.u-hide-in-mobile + *, .custom-bullet-list > li.u-hide-in-mobile + *, th p.u-hide-in-mobile + *, .page__footer__copyright__third-party-logos > .u-hide-in-mobile + *, .nav-bar__menu > li.u-hide-in-mobile + *, .main-actions .u-hide-in-mobile.btn + *,
  .main-actions a.u-hide-in-mobile + *, .multi-section-form-actions .u-hide-in-mobile.btn + *,
  .multi-section-form-actions a.u-hide-in-mobile + *, .inline-form ol.u-hide-in-mobile + *,
  .inline-form li.u-hide-in-mobile + *,
  .inline-form > p.u-hide-in-mobile + *,
  .inline-form .u-hide-in-mobile.field-n-error-wrapper + *, .alternating-row-table caption > .u-hide-in-mobile + *, .hover-row-table caption > .u-hide-in-mobile + *, tfoot.table-total td > .u-hide-in-mobile + * {
    margin-top: 0;
    margin-left: 0; } }

@media (min-width: 760px) and (max-width: 959px) {
  p.u-hide-in-tablet + *,
  h1.u-hide-in-tablet + *, h2.u-hide-in-tablet + *, h3.u-hide-in-tablet + *, h4.u-hide-in-tablet + *, h5.u-hide-in-tablet + *, h6.u-hide-in-tablet + *,
  ul.u-hide-in-tablet + *, ol.u-hide-in-tablet + *,
  hr.u-hide-in-tablet + *,
  table.u-hide-in-tablet + *, .u-hide-in-tablet.alert + *, .u-hide-in-tablet.sub-title + *, .spaced-list > li.u-hide-in-tablet + *, .u-hide-in-tablet.bulleted-list + *, .progress-list > li.u-hide-in-tablet + *, .compact-spaced-list > li.u-hide-in-tablet + *, .numbered-list > li.u-hide-in-tablet + *, .numbered-list p.u-hide-in-tablet + *, .pdf-doc-list > li.u-hide-in-tablet + *, .custom-bullet-list > li.u-hide-in-tablet + *, th p.u-hide-in-tablet + *, .page__footer__copyright__third-party-logos > .u-hide-in-tablet + *, .nav-bar__menu > li.u-hide-in-tablet + *, .main-actions .u-hide-in-tablet.btn + *,
  .main-actions a.u-hide-in-tablet + *, .multi-section-form-actions .u-hide-in-tablet.btn + *,
  .multi-section-form-actions a.u-hide-in-tablet + *, .inline-form ol.u-hide-in-tablet + *,
  .inline-form li.u-hide-in-tablet + *,
  .inline-form > p.u-hide-in-tablet + *,
  .inline-form .u-hide-in-tablet.field-n-error-wrapper + *, .alternating-row-table caption > .u-hide-in-tablet + *, .hover-row-table caption > .u-hide-in-tablet + *, tfoot.table-total td > .u-hide-in-tablet + * {
    margin-top: 0;
    margin-left: 0; } }

@media (max-width: 959px) {
  p.u-hide-in-mobile-and-tablet + *,
  h1.u-hide-in-mobile-and-tablet + *, h2.u-hide-in-mobile-and-tablet + *, h3.u-hide-in-mobile-and-tablet + *, h4.u-hide-in-mobile-and-tablet + *, h5.u-hide-in-mobile-and-tablet + *, h6.u-hide-in-mobile-and-tablet + *,
  ul.u-hide-in-mobile-and-tablet + *, ol.u-hide-in-mobile-and-tablet + *,
  hr.u-hide-in-mobile-and-tablet + *,
  table.u-hide-in-mobile-and-tablet + *, .u-hide-in-mobile-and-tablet.alert + *, .u-hide-in-mobile-and-tablet.sub-title + *, .spaced-list > li.u-hide-in-mobile-and-tablet + *, .u-hide-in-mobile-and-tablet.bulleted-list + *, .progress-list > li.u-hide-in-mobile-and-tablet + *, .compact-spaced-list > li.u-hide-in-mobile-and-tablet + *, .numbered-list > li.u-hide-in-mobile-and-tablet + *, .numbered-list p.u-hide-in-mobile-and-tablet + *, .pdf-doc-list > li.u-hide-in-mobile-and-tablet + *, .custom-bullet-list > li.u-hide-in-mobile-and-tablet + *, th p.u-hide-in-mobile-and-tablet + *, .page__footer__copyright__third-party-logos > .u-hide-in-mobile-and-tablet + *, .nav-bar__menu > li.u-hide-in-mobile-and-tablet + *, .main-actions .u-hide-in-mobile-and-tablet.btn + *,
  .main-actions a.u-hide-in-mobile-and-tablet + *, .multi-section-form-actions .u-hide-in-mobile-and-tablet.btn + *,
  .multi-section-form-actions a.u-hide-in-mobile-and-tablet + *, .inline-form ol.u-hide-in-mobile-and-tablet + *,
  .inline-form li.u-hide-in-mobile-and-tablet + *,
  .inline-form > p.u-hide-in-mobile-and-tablet + *,
  .inline-form .u-hide-in-mobile-and-tablet.field-n-error-wrapper + *, .alternating-row-table caption > .u-hide-in-mobile-and-tablet + *, .hover-row-table caption > .u-hide-in-mobile-and-tablet + *, tfoot.table-total td > .u-hide-in-mobile-and-tablet + * {
    margin-top: 0;
    margin-left: 0; } }

@media (min-width: 760px) {
  p.u-hide-in-tablet-and-above + *,
  h1.u-hide-in-tablet-and-above + *, h2.u-hide-in-tablet-and-above + *, h3.u-hide-in-tablet-and-above + *, h4.u-hide-in-tablet-and-above + *, h5.u-hide-in-tablet-and-above + *, h6.u-hide-in-tablet-and-above + *,
  ul.u-hide-in-tablet-and-above + *, ol.u-hide-in-tablet-and-above + *,
  hr.u-hide-in-tablet-and-above + *,
  table.u-hide-in-tablet-and-above + *, .u-hide-in-tablet-and-above.alert + *, .u-hide-in-tablet-and-above.sub-title + *, .spaced-list > li.u-hide-in-tablet-and-above + *, .u-hide-in-tablet-and-above.bulleted-list + *, .progress-list > li.u-hide-in-tablet-and-above + *, .compact-spaced-list > li.u-hide-in-tablet-and-above + *, .numbered-list > li.u-hide-in-tablet-and-above + *, .numbered-list p.u-hide-in-tablet-and-above + *, .pdf-doc-list > li.u-hide-in-tablet-and-above + *, .custom-bullet-list > li.u-hide-in-tablet-and-above + *, th p.u-hide-in-tablet-and-above + *, .page__footer__copyright__third-party-logos > .u-hide-in-tablet-and-above + *, .nav-bar__menu > li.u-hide-in-tablet-and-above + *, .main-actions .u-hide-in-tablet-and-above.btn + *,
  .main-actions a.u-hide-in-tablet-and-above + *, .multi-section-form-actions .u-hide-in-tablet-and-above.btn + *,
  .multi-section-form-actions a.u-hide-in-tablet-and-above + *, .inline-form ol.u-hide-in-tablet-and-above + *,
  .inline-form li.u-hide-in-tablet-and-above + *,
  .inline-form > p.u-hide-in-tablet-and-above + *,
  .inline-form .u-hide-in-tablet-and-above.field-n-error-wrapper + *, .alternating-row-table caption > .u-hide-in-tablet-and-above + *, .hover-row-table caption > .u-hide-in-tablet-and-above + *, tfoot.table-total td > .u-hide-in-tablet-and-above + * {
    margin-top: 0;
    margin-left: 0; } }

@media (min-width: 960px) {
  p.u-hide-in-desktop-and-above + *,
  h1.u-hide-in-desktop-and-above + *, h2.u-hide-in-desktop-and-above + *, h3.u-hide-in-desktop-and-above + *, h4.u-hide-in-desktop-and-above + *, h5.u-hide-in-desktop-and-above + *, h6.u-hide-in-desktop-and-above + *,
  ul.u-hide-in-desktop-and-above + *, ol.u-hide-in-desktop-and-above + *,
  hr.u-hide-in-desktop-and-above + *,
  table.u-hide-in-desktop-and-above + *, .u-hide-in-desktop-and-above.alert + *, .u-hide-in-desktop-and-above.sub-title + *, .spaced-list > li.u-hide-in-desktop-and-above + *, .u-hide-in-desktop-and-above.bulleted-list + *, .progress-list > li.u-hide-in-desktop-and-above + *, .compact-spaced-list > li.u-hide-in-desktop-and-above + *, .numbered-list > li.u-hide-in-desktop-and-above + *, .numbered-list p.u-hide-in-desktop-and-above + *, .pdf-doc-list > li.u-hide-in-desktop-and-above + *, .custom-bullet-list > li.u-hide-in-desktop-and-above + *, th p.u-hide-in-desktop-and-above + *, .page__footer__copyright__third-party-logos > .u-hide-in-desktop-and-above + *, .nav-bar__menu > li.u-hide-in-desktop-and-above + *, .main-actions .u-hide-in-desktop-and-above.btn + *,
  .main-actions a.u-hide-in-desktop-and-above + *, .multi-section-form-actions .u-hide-in-desktop-and-above.btn + *,
  .multi-section-form-actions a.u-hide-in-desktop-and-above + *, .inline-form ol.u-hide-in-desktop-and-above + *,
  .inline-form li.u-hide-in-desktop-and-above + *,
  .inline-form > p.u-hide-in-desktop-and-above + *,
  .inline-form .u-hide-in-desktop-and-above.field-n-error-wrapper + *, .alternating-row-table caption > .u-hide-in-desktop-and-above + *, .hover-row-table caption > .u-hide-in-desktop-and-above + *, tfoot.table-total td > .u-hide-in-desktop-and-above + * {
    margin-top: 0;
    margin-left: 0; } }

.u-remove-vertical-spacing * + * {
  margin-top: 0 !important; }

/*doc
---
title: Padding
name: padding
category: Patterns
---

Padding = Standardized padding for container elements

<strong>TODO:</strong> Define standardized padding styles.

*/
/*
  * Backgrounds
  * Borders and outlines
  * Buttons
  * Header styles (this should probably move to a "text" based styles category)
  * Links
  * Lists
  * Misc Helpers
  * Shadows
*/
.page__footer__main, .page__footer__subfooter, .help-panel, .main__header, .main__header__sub {
  position: relative; }
  .page__footer__main:before, .page__footer__subfooter:before, .help-panel:before, .main__header:before, .main__header__sub:before, .page__footer__main:after, .page__footer__subfooter:after, .help-panel:after, .main__header:after, .main__header__sub:after {
    background: inherit;
    border: inherit;
    box-shadow: inherit;
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0; }
  .page__footer__main:before, .page__footer__subfooter:before, .help-panel:before, .main__header:before, .main__header__sub:before {
    left: -100%; }
  .page__footer__main:after, .page__footer__subfooter:after, .help-panel:after, .main__header:after, .main__header__sub:after {
    left: 100%; }

.btn-group--toggle input[type="radio"]:focus + .btn:focus {
  outline: none;
  border: 1px solid #29C4F3 !important;
  -webkit-box-shadow: 0 0 5px #29C4F3 !important;
  box-shadow: 0 0 5px #29C4F3 !important; }

.btn:disabled {
  background: #d1d3d4 !important;
  border-color: #d1d3d4 !important;
  color: #fff !important;
  cursor: default; }
  .btn:hover:disabled, .btn:focus:disabled, .btn:active:disabled {
    background: #d1d3d4 !important;
    border-color: #d1d3d4 !important; }

.explanatory-title, .sub-title, .back-link, .alternating-row-table tbody th, .hover-row-table tbody th, .alternating-row-table > thead th, .hover-row-table > thead th {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1; }

h1, .h1 {
  font-size: 2.4rem !important;
  font-weight: 400;
  line-height: 1.1; }

h2, .h2 {
  font-size: 2.1rem !important;
  font-weight: 400;
  line-height: 1.1; }

h3, .aligned-form legend, .h3 {
  font-size: 1.8rem !important;
  font-weight: 400;
  line-height: 1.1; }

h4, caption, .h4 {
  font-size: 1.6rem !important;
  font-weight: 700;
  line-height: 1.1; }

h5, .h5 {
  font-size: 1.4rem !important;
  font-weight: 700;
  line-height: 1.1; }

h6, .h6 {
  font-size: 1.2rem !important;
  font-weight: 700;
  line-height: 1.1; }

a, .btn-link, .fake-link, .action-link {
  color: #117DB0;
  cursor: pointer;
  outline: none;
  text-decoration: none; }
  a:hover, .btn-link:hover, .fake-link:hover, .action-link:hover {
    color: #0A5070; }
  a:active, .btn-link:active, .fake-link:active, .action-link:active {
    color: #0A5070; }

.page__footer__copyright__nav-links > li {
  display: inline; }
  .page__footer__copyright__nav-links > li + li:before {
    content: " • ";
    display: inline; }

.pdf-doc-list__links > li,
.piped-separated-horiz-list > li {
  display: inline; }
  .pdf-doc-list__links > li + li:before,
  .piped-separated-horiz-list > li + li:before {
    content: " | ";
    display: inline; }

.main__header--dashboard, .accent-blue-box {
  background: #0D3A54 !important;
  color: #fff; }
  .main__header--dashboard a, .accent-blue-box a {
    color: #29C4F3; }
    .main__header--dashboard a:hover, .accent-blue-box a:hover {
      color: #0b9dc9; }
  .main__header--dashboard strong, .accent-blue-box strong {
    color: #fff; }

.page__footer__main, .page__footer__subfooter, .help-panel, .main__header, .main__header__sub {
  position: relative; }
  .page__footer__main:before, .page__footer__subfooter:before, .help-panel:before, .main__header:before, .main__header__sub:before, .page__footer__main:after, .page__footer__subfooter:after, .help-panel:after, .main__header:after, .main__header__sub:after {
    background: inherit;
    border: inherit;
    box-shadow: inherit;
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0; }
  .page__footer__main:before, .page__footer__subfooter:before, .help-panel:before, .main__header:before, .main__header__sub:before {
    left: -100%; }
  .page__footer__main:after, .page__footer__subfooter:after, .help-panel:after, .main__header:after, .main__header__sub:after {
    left: 100%; }

.btn-group--toggle input[type="radio"]:focus + .btn {
  outline: none;
  border-color: #29C4F3 !important;
  box-shadow: 0 0 5px 0.5px #29C4F3 !important; }

/*doc
---
title: Intro
name: aaaaIntro
category: Base
---

Welcome to SoFi's living style guide. This guide is generated from specially formatted comments within the shared-styles scss files using <a href="https://trulia.github.io/hologram/" target="_blank">Hologram</a>.

<h2>Styles are separated into these main categories:</h2>

* <strong>Patterns =</strong> abstract layout patterns, grid, spacing, padding, decoration, and misc. utility styles
* <strong>Base =</strong> Basic HTML element default styling, includes typography styles and colors
* <strong>Templates =</strong> shared page templates and standard "chrome" such as nav bars, footers, etc.
* <strong>Modules =</strong> Special elements and components

<hr>
*/
/*doc
---
title: Base
name: aaaBase
category: Base
---

Base = HTML element default styles

Includes typography styles such as fonts and text spacing. Also brand colors such as background colors, etc...

See [Modules][aaaModules] for more custom and complex component styles.
*/
/*doc
---
title: Typography
name: typography
category: Base
---

Typography = Anything related to basic text content styling and associated elements including fonts, colors, font-sizes, etc.

See [typographic spacing pattern styles][subTypographicSpacing] for more examples of headers and paragraphs in relationship to each other.

*/
/*doc
---
title: Font Families
parent: typography
name: subFontFamilies
---

Header and body text font: "Adelle Sans"
*/
/*doc
---
title: Font Sizes
parent: typography
name: subFontSizes
---

NOTE: The actual font sizes in the CSS use "rem units" not pixels. The below listed sizes are used in tablet and above width and are calculated off of base 10px. Font sizes are bumped down slightly for mobile width by instead calculating off base 9px. (Adjust your browser screen width to view the change in font size in "mobile" vs. other widths.)

<div class="col-group all--1-2">
  <div class="col">
    <p>TABLET & ABOVE:<br>
    h1: 24px <small><em>(Page Heading)</em></small><br>
    h2: 18px <small><em>("Product" Heading)</em></small><br>
    h3: 14px <small><em>(Section / Box Heading)</em></small></p>

    <p><em>(h4, h5 & h6 not defined in UX style guide)</em><br>
    h4: 16px<br>
    h5: 14px<br>
    h6: 12px</p>

    <p>body text: 16px<br>
    small text: 12px</p>
  </div>

  <div class="col">
    <p>MOBILE:<br>
    h1: 22px<br>
    h2: 16px<br>
    h3: 13px</p>

    <p><em>(not defined in UX style guide)</em><br>
    h4: 14px<br>
    h5: 13px<br>
    h6: 11px</p>

    <p>body text: 14px<br>
    small text: 11px</p>
  </div>
</div>

*/
/*doc
---
title: Line Heights
parent: typography
name: subLineHeights
---

These use unitless values so are relative to the font size of each element.

**Body text:**<br>
line-height: 1.4

**Header text:**<br>
line-height: 1.1
*/
/*doc
---
title: Headers
parent: typography
name: subHeaders
---

```html_example
<h1>Header 1 (Page Heading)</h1>
<h2>Header 2 (Dashboard Heading)</h2>
<h3>Header 3 (Product Heading)</h3>

<hr>
<p class="small">(below are not defined in UX styles)</p>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
```
*/
/*doc
---
title: Paragraphs
parent: typography
name: subParagraphs
---

```html_example
<p>Lorem ipsum dolor sit amet, <strong>some bold text</strong> consectetur adipiscing elit. Aenean pretium, urna vitae tempor sodales, metus diam rutrum arcu, eget porttitor erat sapien sit amet metus. Etiam porttitor dolor at metus auctor luctus. Integer urna ligula, ultrices at accumsan nec, rutrum in lacus. Integer eu dolor vel ipsum cursus cursus. Phasellus sed blandit nibh.</p>
<p>Saepe quasi officiis mollitia magnam, esse ratione itaque, facere maxime laboriosam velit pariatur quia repudiandae veritatis modi laborum eligendi aperiam. Curabitur tempus suscipit ipsum, quis consectetur nisi sagittis eget. Donec fermentum mollis augue.</p>
<p>Necessitatibus aut vel dolorem ipsa id nemo architecto amet nihil libero, repellendus consectetur veniam dolorum, unde quos dolor magnam labore! Sed tristique, massa eget imperdiet lobortis.</p>
```
*/
/*doc
---
title: Links
name: links
category: Base
---

These are the default link styles. See [module link styles][links] for special targeted link styles.

```html_example
<p>
  <a href="#">This is a stand alone text link.</a>
</p>
<p>
  Lorem ipsum dolor <a href="#">link within a sentence</a> sit amet, consectetur adipiscing elit.
</p>
```
*/
/*doc
---
title: Small Text
parent: typography
name: subSmall
---

The "Small" tag should be used for fine print and side comments. We also have a "small" class name which can be used on any element if the small tag doesn't seem semantically appropriate for your use case.

```html_example
<p>Regular paragraph without small text.</p>
<p>
  <small>This is an example of small text.</small>
</p>
<p class="small">
  An example of an alternate way to use the small text style.
</p>
```
*/
* {
  box-sizing: border-box;
  margin: 0; }

html, body {
  height: 100%; }

body, figure, ul {
  padding: 0; }

ul {
  list-style-type: none; }

footer, header, main {
  display: block; }

pre {
  white-space: pre-wrap; }

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth; }
  @media (max-width: 759px) {
    html {
      font-size: 9px; } }
  @media (min-width: 760px) {
    html {
      font-size: 10px; } }

body {
  color: #3d3d3d;
  font-family: "Adelle Sans", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 1.6em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.4; }

small {
  font-size: 1.2rem;
  font-weight: normal; }

time {
  font-size: 1.2rem;
  font-weight: normal; }

hr {
  background: #D1D2D4;
  border: 0;
  height: 1px;
  margin: 1em 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Adelle Sans", Helvetica, Arial, "Lucida Grande", sans-serif; }

:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h1, :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h2, :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h3, :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h4, :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h5, :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + h6 {
  margin-top: 1.6em; }

button, input, select, textarea {
  font-size: 1.6rem;
  color: inherit;
  font-family: inherit;
  max-width: 100%; }

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="file"] {
  cursor: pointer; }
  button:focus,
  input[type="button"]:focus,
  input[type="reset"]:focus,
  input[type="submit"]:focus,
  input[type="file"]:focus {
    outline: 0; }

input[type="radio"],
input[type="checkbox"] {
  font-size: 16px;
  width: 1em;
  height: 1em;
  vertical-align: middle; }
  input[type="radio"]:focus,
  input[type="checkbox"]:focus {
    outline: 0; }

input:not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
textarea,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; }

input[type="number"] {
  -moz-appearance: textfield; }

input[maxlength="2"] {
  width: 2em !important; }

input[maxlength="3"] {
  width: 3em !important; }

input[maxlength="4"] {
  width: 4em !important; }

input[maxlength="5"] {
  width: 5em !important; }

input + select {
  width: auto; }

textarea {
  vertical-align: top;
  width: 100%;
  height: 5em;
  resize: vertical; }

label {
  line-height: 1.1;
  margin-bottom: 0.3em; }

legend {
  background-color: inherit;
  font-weight: 700;
  line-height: 1.1;
  padding: 0; }

fieldset {
  border: 0;
  min-width: 0;
  padding: 0; }

body:not(:-moz-handler-blocked) fieldset {
  display: table-cell; }

li select:only-of-type {
  width: 100%; }

::-webkit-input-placeholder {
  color: #8A8B8A; }

:-moz-placeholder {
  color: #8A8B8A; }

::-moz-placeholder {
  color: #8A8B8A; }

:-ms-input-placeholder {
  color: #8A8B8A; }

::input-placeholder {
  color: #8A8B8A; }

input:not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
select,
textarea {
  background-color: transparent;
  border-radius: 0; }
  input:not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):focus,
  select:focus,
  textarea:focus {
    border-color: #117DB0 !important;
    box-shadow: none !important;
    outline: 0; }
  input:not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):disabled,
  select:disabled,
  textarea:disabled {
    background-color: transparent !important;
    color: #3d3d3d;
    -webkit-text-fill-color: #3d3d3d;
    opacity: 1;
    resize: none; }

input:not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
select {
  border: 0;
  border-bottom: 1px solid #D1D2D4;
  padding: 0; }
  input:not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):focus,
  select:focus {
    border-width: 0 0 1px 0 !important; }

textarea {
  border: 1px solid #D1D2D4;
  padding: 0.1em 0.3em; }

input:not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
select {
  height: 1.5em; }

select {
  background: url("./libraries/sofi-global/assets/images/icons/arrow-angle-down.svg") no-repeat;
  background-position: right .6em bottom 50%;
  border-radius: 0;
  -moz-border-radius: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  padding-right: 2.2em;
  min-width: 5em;
  vertical-align: middle; }
  select::-ms-expand {
    display: none; }
  select + select {
    margin-left: 0.4em; }

label + ul,
label + ol {
  margin-top: 0.8em !important; }

fieldset + fieldset {
  margin-top: 2rem; }

caption, th {
  text-align: left; }

caption {
  padding-bottom: 0.3em; }
  caption:empty {
    display: none; }

table {
  border-collapse: collapse; }

th,
td {
  vertical-align: top;
  line-height: 1.2;
  padding: 0.1em 0.5em; }
  @media (max-width: 759px) {
    th,
    td {
      padding: 0.1em 0.3em; } }
  th:first-child,
  td:first-child {
    padding-left: 0; }
  th:last-child,
  td:last-child {
    padding-right: 0; }

th {
  font-weight: 700; }

img,
iframe,
embed,
object {
  border: 0; }

iframe,
embed,
object {
  display: block;
  max-width: 100%; }

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

@media screen and (-webkit-min-device-pixel-ratio: 0), (min--moz-device-pixel-ratio: 0) {
  svg {
    height: auto; } }

/*doc
---
title: Templates
name: aaaTemplates
category: Templates
---

Template = shared page template structure and related elements such as common headers and footers, navbars, etc.

<strong>TODO:</strong> Include examples of page template types in documentation.
*/
/*doc
---
title: Page Template Structure
name: pageTemplateStructure
category: Templates
---

This is the underlying template structure for all pages.

<ul class="bulleted-list">
  <li>
    div.page
    <ul class="bulleted-list">
      <li>
        <strong>header.page__header</strong>
        <ul class="bulleted-list">
          <li>
            nav.nav-bar
            <ul class="bulleted-list">
              <li>a.nav-bar__logo</li>
              <li>ul.nav-bar__menu <small><em>(optional, not on logged out pages)</em></small></li>
            </ul>
          </li>

          <li>div.help-panel</li>
        </ul>
      </li>

      <li>
        <strong>main.page__main</strong>
        <ul class="bulleted-list">
          <li>header.main__header <small><em>(optional)</em></small></li>
          <li>
            div.main__body <small><em>(adds consistent padding around content, optional)</em></small>
            <ul class="bulleted-list">
              <li>section.content-section <small><em>(This inner content container may be refactored in the future, optional)</em></small></li>
            </ul>
          </li>
        </ul>
      </li>

      <li>
        <strong>footer.page__footer</strong> <small><em>(optional, not included on all pages)</em></small>
      </li>
    </ul>
  </li>
</ul>

*/
.page {
  overflow: hidden; }
  .page__header {
    background: #fff;
    border-bottom: 1px solid #f5f5f6;
    box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.05), 0 5px 5px -5px rgba(0, 0, 0, 0.1);
    min-height: 5.7rem;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 700; }
  .page__main {
    padding-top: 5.7rem;
    min-height: 40vh; }
  .page__footer {
    font-size: 1.2rem;
    background-color: #f5f5f6;
    color: #5b5b5b; }
    .page__footer__main, .page__footer__subfooter {
      padding-top: 4rem; }
    .page__footer__main {
      line-height: 1.6;
      padding-bottom: 4rem; }
    .page__footer__subfooter {
      padding-bottom: 7.7rem;
      font-size: 1.2rem;
      background: #e6e7e8; }
      .page__footer__subfooter a,
      .page__footer__subfooter a:hover {
        color: inherit; }
      .page__footer__subfooter p a {
        text-decoration: underline; }
    .page__footer__copyright {
      padding-top: 2rem; }
      @media (min-width: 760px) {
        .page__footer__copyright__third-party-logos {
          text-align: right; } }
      .page__footer__copyright__third-party-logos > * {
        vertical-align: middle; }
    .page__footer__nav-links li + li {
      margin-top: 0.5em; }
    .page__footer__nav-links a {
      line-height: 1.2; }
    .page__footer__social-links {
      text-align: right;
      line-height: 2.2; }
      .page__footer__social-links [class^="icon-"], .page__footer__social-links .uib-daypicker .glyphicon, .uib-daypicker .page__footer__social-links .glyphicon, .page__footer__social-links
      .uib-monthpicker .glyphicon,
      .uib-monthpicker .page__footer__social-links .glyphicon, .page__footer__social-links
      .uib-yearpicker .glyphicon,
      .uib-yearpicker .page__footer__social-links .glyphicon {
        font-size: 2.8rem; }

.nav-bar {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  padding-top: 1.0rem;
  padding-bottom: 1.0rem;
  position: relative;
  z-index: 3; }
  .nav-bar a {
    color: #767676;
    text-decoration: none;
    font-weight: normal; }
    .nav-bar a:hover {
      color: #29C4F3; }
  .nav-bar__logo {
    background: url("./libraries/sofi-global/assets/images/logos-sofi/sofi-logo.svg") no-repeat;
    background-size: contain;
    display: inline-block;
    width: 88px;
    height: 31px; }
  .nav-bar__menu {
    margin-top: 0; }
    .nav-bar__menu > li {
      display: inline-block; }
  .nav-bar__sub-menu__section-header {
    background: #e6e7e8;
    border-bottom: 1px solid #D1D2D4;
    display: block;
    padding: 0.4em 1em; }
  .nav-bar__sub-menu ul {
    margin-top: 0; }

.help-panel {
  font-size: 1.2rem;
  background: #f5f5f6;
  line-height: 1.6;
  padding: 2rem;
  position: relative; }
  @media (max-width: 759px) {
    .help-panel {
      height: calc(100vh - 5.7rem);
      overflow-x: hidden;
      overflow-y: auto; } }
  .help-panel__close {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 2; }
  .help-panel:not(.active) {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden; }

div[data-noscript] {
  display: none; }

.nav-bar__sub-menu {
  display: inline-block;
  position: relative; }
  @media (max-width: 959px) {
    .nav-bar__sub-menu {
      position: static; } }
  @media (min-width: 960px) {
    .nav-bar__sub-menu {
      padding: 0.5em 0; } }
  .nav-bar__sub-menu .dropdown-backdrop {
    display: none !important; }
  .nav-bar__sub-menu .nav-bar__sub-menu__control {
    color: #117DB0;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    cursor: pointer;
    line-height: 1; }
    .nav-bar__sub-menu .nav-bar__sub-menu__control:hover {
      color: #0A5070; }
    .nav-bar__sub-menu .nav-bar__sub-menu__control:active {
      color: #0A5070; }
    @media (max-width: 759px) {
      .nav-bar__sub-menu .nav-bar__sub-menu__control {
        vertical-align: middle;
        font-size: 3.2rem;
        font-weight: normal; } }
    @media (min-width: 760px) {
      .nav-bar__sub-menu .nav-bar__sub-menu__control {
        font-weight: bold;
        min-width: 9em; } }
  .nav-bar__sub-menu__content-wrapper {
    overflow: hidden;
    position: absolute;
    top: 100%;
    right: 0; }
    @media (max-width: 959px) {
      .nav-bar__sub-menu__content-wrapper {
        width: 100%; } }
    @media (min-width: 960px) {
      .nav-bar__sub-menu__content-wrapper {
        left: 0; } }
  .nav-bar__sub-menu__list {
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    -ms-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    background: #fff;
    border: 1px solid #D1D2D4;
    margin: 0; }
    @media (max-width: 959px) {
      .nav-bar__sub-menu__list {
        position: relative; }
        .nav-bar__sub-menu__list:before {
          pointer-events: none;
          box-shadow: inset 0 6px 10px -10px rgba(0, 0, 0, 0.65);
          content: "";
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 2; } }
    .nav-bar__sub-menu__list li {
      font-size: 1.2rem; }
      .nav-bar__sub-menu__list li + li {
        border-top: 1px solid #D1D2D4; }
    .nav-bar__sub-menu__list a {
      -webkit-transition: background 0.3s ease-out;
      transition: background 0.3s ease-out;
      background: #fff;
      color: inherit;
      display: block;
      padding: 0.8em 1em; }
      .nav-bar__sub-menu__list a:hover, .nav-bar__sub-menu__list a:active {
        color: inherit;
        background: #f5f5f6;
        text-decoration: none; }

.nav-bar__sub-menu.open .nav-bar__sub-menu__list {
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0); }

div[data-device-breakpoint] {
  visibility: hidden;
  text-indent: -9999px;
  font-size: 0; }
  div[data-device-breakpoint]:before {
    position: absolute; }
    @media (max-width: 759px) {
      div[data-device-breakpoint]:before {
        content: 'mobile'; } }
    @media (min-width: 760px) and (max-width: 959px) {
      div[data-device-breakpoint]:before {
        content: 'tablet'; } }
    @media (min-width: 960px) and (max-width: 1279px) {
      div[data-device-breakpoint]:before {
        content: 'desktop'; } }
    @media (min-width: 1280px) {
      div[data-device-breakpoint]:before {
        content: 'wide'; } }

.page-background:before {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1; }

.page-background--grey:before {
  background: #f5f5f6; }

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'sofi-icons';
    src: url('../font/sofi-icons.svg?65737341#sofi-icons') format('svg');
  }
}
*/
[class^="icon-"]:before, .uib-daypicker .glyphicon:before,
.uib-monthpicker .glyphicon:before,
.uib-yearpicker .glyphicon:before, [class*=" icon-"]:before {
  font-family: "sofi-icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }

.icon-lifesavers:before {
  content: '\e800'; }

/* '' */
.icon-suit:before {
  content: '\e801'; }

/* '' */
.icon-spinner:before, .btn--loading:before {
  content: '\e802'; }

/* '' */
.icon-search:before {
  content: '\e803'; }

/* '' */
.icon-cancel-circled:before {
  content: '\e804'; }

/* '' */
.icon-cancel:before {
  content: '\e805'; }

/* '' */
.icon-plus-circled:before {
  content: '\e806'; }

/* '' */
.icon-plus:before {
  content: '\e807'; }

/* '' */
.icon-home:before {
  content: '\e808'; }

/* '' */
.icon-attention:before {
  content: '\e809'; }

/* '' */
.icon-angle-down:before {
  content: '\e80a'; }

/* '' */
.icon-thumbs-up-alt:before {
  content: '\e80b'; }

/* '' */
.icon-location:before {
  content: '\e80c'; }

/* '' */
.icon-doc-text-inv:before {
  content: '\e80d'; }

/* '' */
.icon-rss:before {
  content: '\e80e'; }

/* '' */
.icon-phone:before {
  content: '\e80f'; }

/* '' */
.icon-menu:before {
  content: '\e810'; }

/* '' */
.icon-cog:before {
  content: '\e811'; }

/* '' */
.icon-calendar:before {
  content: '\e812'; }

/* '' */
.icon-login:before {
  content: '\e813'; }

/* '' */
.icon-cancel-large:before {
  content: '\e814'; }

/* '' */
.icon-gplus:before {
  content: '\e815'; }

/* '' */
.icon-ok:before, .md-checkbox input + .md-fake-input:before, .progress-list > li.complete:before {
  content: '\e816'; }

/* '' */
.icon-instagram:before {
  content: '\e817'; }

/* '' */
.icon-mail-solid:before {
  content: '\e818'; }

/* '' */
.icon-mail-outline:before {
  content: '\e819'; }

/* '' */
.icon-twitter:before {
  content: '\e81a'; }

/* '' */
.icon-graduation-cap:before {
  content: '\e81b'; }

/* '' */
.icon-share:before {
  content: '\e81c'; }

/* '' */
.icon-user:before {
  content: '\e81d'; }

/* '' */
.icon-percent:before {
  content: '\e81e'; }

/* '' */
.icon-music-1:before {
  content: '\e81f'; }

/* '' */
.icon-info-circled:before {
  content: '\e820'; }

/* '' */
.icon-money:before {
  content: '\e821'; }

/* '' */
.icon-investor:before {
  content: '\e822'; }

/* '' */
.icon-dollar:before {
  content: '\e823'; }

/* '' */
.icon-blank:before {
  content: '\e824'; }

/* '' */
.icon-glass:before {
  content: '\e825'; }

/* '' */
.icon-tag:before {
  content: '\e826'; }

/* '' */
.icon-mobile-alt:before {
  content: '\e827'; }

/* '' */
.icon-logout:before {
  content: '\e828'; }

/* '' */
.icon-ok-circled:before {
  content: '\e829'; }

/* '' */
.icon-flag:before {
  content: '\e82a'; }

/* '' */
.icon-angle-up:before {
  content: '\e82b'; }

/* '' */
.icon-sort-down:before {
  content: '\e82c'; }

/* '' */
.icon-upload:before {
  content: '\e82d'; }

/* '' */
.icon-play-circled:before {
  content: '\e82e'; }

/* '' */
.icon-resize-full:before {
  content: '\e82f'; }

/* '' */
.icon-stars-little:before {
  content: '\e830'; }

/* '' */
.icon-angle-circled-left:before {
  content: '\e831'; }

/* '' */
.icon-angle-circled-right:before {
  content: '\e832'; }

/* '' */
.icon-comment:before {
  content: '\e833'; }

/* '' */
.icon-clipboard:before {
  content: '\e834'; }

/* '' */
.icon-angle-left:before, .uib-daypicker .glyphicon-chevron-left:before,
.uib-monthpicker .glyphicon-chevron-left:before,
.uib-yearpicker .glyphicon-chevron-left:before {
  content: '\e835'; }

/* '' */
.icon-chart-pie:before {
  content: '\e836'; }

/* '' */
.icon-angle-double-left:before {
  content: '\e837'; }

/* '' */
.icon-chat:before {
  content: '\e838'; }

/* '' */
.icon-angle-double-right:before {
  content: '\e839'; }

/* '' */
.icon-vcard:before {
  content: '\e83a'; }

/* '' */
.icon-ellipsis:before {
  content: '\e83b'; }

/* '' */
.icon-angle-right:before, .uib-daypicker .glyphicon-chevron-right:before,
.uib-monthpicker .glyphicon-chevron-right:before,
.uib-yearpicker .glyphicon-chevron-right:before, .goto-link:after {
  content: '\e83c'; }

/* '' */
.icon-parent-loan:before {
  content: '\e83d'; }

/* '' */
.icon-briefcase:before {
  content: '\e83e'; }

/* '' */
.icon-folder:before {
  content: '\e83f'; }

/* '' */
.icon-down:before {
  content: '\e840'; }

/* '' */
.icon-left:before {
  content: '\e841'; }

/* '' */
.icon-archive:before {
  content: '\e842'; }

/* '' */
.icon-tools:before {
  content: '\e843'; }

/* '' */
.icon-wallet:before {
  content: '\e844'; }

/* '' */
.icon-sofi-logo:before {
  content: '\e845'; }

/* '' */
.icon-right:before {
  content: '\e846'; }

/* '' */
.icon-circle-empty:before {
  content: '\e847'; }

/* '' */
.icon-circle:before {
  content: '\e848'; }

/* '' */
.icon-shield-check:before {
  content: '\e849'; }

/* '' */
.icon-dollar-sign:before {
  content: '\e84a'; }

/* '' */
.icon-stars-more:before {
  content: '\e84b'; }

/* '' */
.icon-up:before {
  content: '\e84c'; }

/* '' */
.icon-exchange:before {
  content: '\e84d'; }

/* '' */
.icon-stars-lots:before {
  content: '\e84e'; }

/* '' */
.icon-arrow-combo:before {
  content: '\e84f'; }

/* '' */
.icon-play-circled2:before {
  content: '\e850'; }

/* '' */
.icon-check:before {
  content: '\e851'; }

/* '' */
.icon-wealth:before {
  content: '\e852'; }

/* '' */
.icon-list-bullet:before {
  content: '\e853'; }

/* '' */
.icon-table:before {
  content: '\e854'; }

/* '' */
.icon-music:before {
  content: '\e855'; }

/* '' */
.icon-facebook:before {
  content: '\e856'; }

/* '' */
.icon-question-circled:before {
  content: '\e857'; }

/* '' */
.icon-up-open:before {
  content: '\e858'; }

/* '' */
.icon-down-open:before {
  content: '\e859'; }

/* '' */
.icon-pencil:before {
  content: '\e85a'; }

/* '' */
.icon-lightbulb:before {
  content: '\e85b'; }

/* '' */
.icon-users:before {
  content: '\e85c'; }

/* '' */
.icon-library:before {
  content: '\e85d'; }

/* '' */
.icon-shield:before {
  content: '\e85e'; }

/* '' */
.icon-locked:before {
  content: '\e85f'; }

/* '' */
.icon-unlocked:before {
  content: '\e860'; }

/* '' */
.icon-equal-housing-lender:before {
  content: '\e861'; }

/* '' */
.icon-linkedin:before {
  content: '\e862'; }

/* '' */
.icon-question:before {
  content: '\e863'; }

/* '' */
.icon-exclamation:before {
  content: '\e864'; }

/* '' */
.icon-diamond:before {
  content: '\e865'; }

/* '' */
.icon-pig-outline:before {
  content: '\e866'; }

/* '' */
.icon-dollars:before {
  content: '\e867'; }

/* '' */
.icon-pig-solid:before {
  content: '\e868'; }

/* '' */
.icon-joint:before {
  content: '\e869'; }

/* '' */
.icon-repeating:before {
  content: '\e86a'; }

/* '' */
.icon-pinterest:before {
  content: '\e86b'; }

/* '' */
.icon-attention-circled:before {
  content: '\e86c'; }

/* '' */
.icon-down-dir:before {
  content: '\e86d'; }

/* '' */
.icon-up-dir:before {
  content: '\e86e'; }

/* '' */
/*doc
---
title: Icons
name: icons
category: Modules
---

SoFi Icon Font:

<strong>TODO:</strong> Need a better way to link to and display this.

<a href="static/fontello-98f23d6d/demo.html" target="_blank">Open all icon examples below in new window.</a>

<iframe src="static/fontello-98f23d6d/demo.html" width="100%" height="400" style="border: 1px solid #ccc;"></iframe>

 */
[class^="icon-"], .uib-daypicker .glyphicon,
.uib-monthpicker .glyphicon,
.uib-yearpicker .glyphicon {
  cursor: inherit;
  font-size: inherit;
  vertical-align: middle;
  display: inline-block;
  box-sizing: content-box;
  padding: 1px;
  width: 1em;
  height: 1em;
  position: relative; }
  [class^="icon-"]:before, .uib-daypicker .glyphicon:before,
  .uib-monthpicker .glyphicon:before,
  .uib-yearpicker .glyphicon:before {
    cursor: inherit;
    padding: 1px;
    width: 1em;
    height: 1em;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }

.icon-text {
  font-weight: bold;
  text-align: center;
  text-indent: 0;
  letter-spacing: -0.15em;
  text-indent: -0.15em; }

.icon-action {
  border: 2px solid;
  border-radius: 600px;
  color: #8A8B8A;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em; }
  .icon-action.positive:hover {
    color: #29C4F3; }
  .icon-action.negative:hover {
    color: #F0503A; }

.icon-question-circled {
  cursor: pointer; }

@media (max-width: 759px) {
  header .icon-question-circled {
    display: block;
    font-size: 2.5rem !important;
    width: 100%; } }

/*doc
---
title: Alerts
name: alerts
category: Modules
---

**TODO:** Alert design patterns need to be better defined and standardized.

###General Alert Messages

These are used for general informational messages or error messages. They often appear as a result of a user action such as after a form is submitted. Their widths are confined to content areas they appear within.

```html_example
<div class="alert alert--danger">
    <p>Danger alert</p>
</div>

<div class="alert alert--info">
    <p>Info alert</p>
</div>
```

###Alert Banner

These currently appear only on the Wealth Account Dashboard page. They stretch across the full width of the screen and are used to inform the users of important actions they should take.

NOTE: These may be redesigned as part of the upcoming Account Dashboard page redesign,

```html_example
<div class="alert-banner alert-banner--info">
  <button type="button" class="alert-banner__close" aria-label="Close">
    <i class="icon-cancel">Close</i>
  </button>

  <p>
    (Info Banner) Congratulations on your new SoFi Wealth account! <a href="#">Add Funds.</a>
  </p>
</div>

<div class="alert-banner alert-banner--danger">
  <button type="button" class="alert-banner__close" aria-label="Close">
    <i class="icon-cancel">Close</i>
  </button>

  <p>
    (Danger Banner) Congratulations on your new SoFi Wealth account! <a href="#">Add Funds.</a>
  </p>
</div>

<div class="alert-banner alert-banner--market">
  <button type="button" class="alert-banner__close" aria-label="Close">
    <i class="icon-cancel">Close</i>
  </button>

  <p>
    (Market Alert Banner) Congratulations on your new SoFi Wealth account! <a href="#">Add Funds.</a>
  </p>
</div>
```
*/
.alert {
  font-size: 1.2rem;
  padding: 1em; }
  .alert + * {
    margin-top: 1em; }
  .alert--danger {
    background: #f2dede;
    border: 1px solid #ebccd1;
    color: #a94442; }
    .alert--danger a {
      color: inherit;
      text-decoration: underline; }
  .alert--info {
    background: #d2f3fc;
    border: 1px solid #76d9f7; }
  .alert--empty {
    text-align: center; }

.error-page-notice {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  text-align: center;
  min-height: 60vh; }
  .error-page-notice > * {
    margin: 0 auto; }

.alert-banner {
  background: #1899d5;
  color: #fff;
  text-align: center;
  padding: 1rem 1.5rem;
  position: relative; }
  .alert-banner a {
    color: inherit;
    font-weight: 700; }
    .alert-banner a:hover {
      text-decoration: underline; }
  .alert-banner__close {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    -webkit-appearance: none;
    position: absolute;
    top: 0.1em;
    right: 0.1em; }
    .alert-banner__close + * {
      margin-top: 0; }
  .alert-banner + .alert-banner {
    border-top: 1px solid #D1D2D4; }
  .alert-banner--info {
    background: #1899d5; }
  .alert-banner--danger {
    background: #cd0b24; }
  .alert-banner--market {
    background: #F7932A; }

/*
    - Buttons
    - Button & Action containers
*/
/*doc
---
title: Buttons
name: buttons
category: Modules
---

##Single Buttons

```html_example
<p>
Regular Size:<br>
  <button type="button" class="btn">Default Button</button>
  <button type="button" class="btn btn--secondary">Secondary Button</button>
</p>
<p>
Disabled:<br>
  <button type="button" class="btn" disabled>Default Button</button>
  <button type="button" class="btn btn--secondary" disabled>Secondary Button</button>
</p>
<p>
Small:<br>
  <button type="button" class="btn btn--small">Default Button</button>
  <button type="button" class="btn btn--secondary btn--small">Secondary Button</button>
</p>

<p style="padding: 1em; background: #f5f5f6">
  On grey background:<br>
  <button type="button" class="btn">Default Button</button>
  <button type="button" class="btn btn--secondary">Secondary Button</button>
  <button type="button" class="btn" disabled>Default Button</button>
  <button type="button" class="btn btn--secondary" disabled>Secondary Button</button>
</p>

<p>
  "Full" Size:<br>
  (has a max-width of 345px)<br>
  <button type="button" class="btn btn--full">Default Button</button>
</p>
<p>
  "Loading" state buttons:<br>
  <button type="button" class="btn btn--loading">Default Button</button>
  <button type="button" class="btn btn--secondary btn--loading">Secondary Button</button>
</p>
```

##Group Buttons

NOTE: Group buttons are mostly used in Advisor currently. Designs haven't been completely standardized by the designers.

###Toggle Button

```html_example
<ul class="btn-group btn-group--toggle">
    <li>
        <input type="radio" name="toggle-1" value="yes" id="toggle-yes-1" checked>
        <label class="btn btn--small" for="toggle-yes-1">Yes</label>
    </li>
    <li>
        <input type="radio" name="toggle-1" value="no" id="toggle-no-1">
        <label class="btn btn--small" for="toggle-no-1">No</label>
    </li>
    <li>
        <input type="radio" name="toggle-1" value="maybe" id="toggle-maybe-1">
        <label class="btn btn--small" for="toggle-maybe-1">Maybe</label>
    </li>
</ul>

<hr>

<ul class="btn-group btn-group--toggle">
    <li>
        <input type="radio" name="toggle-2" value="yes" id="toggle-yes-2" checked>
        <label class="btn" for="toggle-yes-2">Yes</label>
    </li>
    <li>
        <input type="radio" name="toggle-2" value="no" id="toggle-no-2">
        <label class="btn" for="toggle-no-2">No</label>
    </li>
    <li>
        <input type="radio" name="toggle-2" value="maybe" id="toggle-maybe-2">
        <label class="btn" for="toggle-maybe-2">Maybe</label>
    </li>
</ul>
```

###Button with Dropdown

```html_example
<div class="btn-group dropdown" data-uib-dropdown>
    <a class="btn btn--small" target="_blank">
        Download Report
    </a>

    <div class="dropdown">
        <a class="btn btn--small" type="button" data-uib-dropdown-toggle>
            <span class="icon-angle-down"></span>
        </a>

        <div class="dropdown__menu-content-wrapper">
            <ul class="dropdown__menu-list" role="menu">
                <li>
                    <label class="input-wrapper">
                        <input type="checkbox" name="checkAll">
                        <strong>Select All</strong>
                    </label>
                </li>

                <li>
                    <label class="input-wrapper">
                        <input type="checkbox">
                        Text
                    </label>
                </li>

                <li>
                    <label class="input-wrapper">
                        <input type="checkbox">
                        Text
                    </label>
                </li>
            </ul>
        </div>
    </div>
</div>
```
*/
.btn {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  background: #117DB0;
  border: 1px solid #117DB0;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  text-align: center !important;
  display: inline-block;
  position: relative; }
  @media (max-width: 759px) {
    .btn {
      padding: 0.6em 0.9em; } }
  @media (min-width: 760px) {
    .btn {
      padding: 0.6em 1.5em; } }
  .btn:hover, .btn:active {
    color: #fff; }
  .btn:hover {
    background: #0d648c;
    border-color: #0d648c; }
  .btn:active {
    background: #0a5070;
    border-color: #0a5070; }
  .btn + .btn {
    margin-left: 0.4em; }
  .btn--call-out {
    background: #9CCb3b;
    border-color: #9CCb3b;
    color: #fff; }
    .btn--call-out:hover, .btn--call-out:active {
      background: #739728;
      border-color: #739728; }
  .btn--danger {
    background: #F0503A;
    border-color: #F0503A; }
  .btn--secondary {
    border: 1px solid;
    background: #fff;
    color: #117DB0; }
    .btn--secondary:hover, .file-input-unit:hover .btn--secondary, .btn--secondary:active {
      background: #fff;
      color: #0A5070; }
  .btn--loading:before, .btn--loading:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
  .btn--loading:before {
    font-family: "sofi-icons";
    width: 1em;
    height: 1em;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
    margin: auto;
    z-index: 2; }
  .btn--loading:after {
    background-color: inherit;
    border-radius: inherit;
    content: '';
    display: block; }
  .btn--small {
    font-size: 1.4rem !important;
    padding: 0.35em 0.6em;
    min-width: 0; }
    .btn--small [class^="icon-"], .btn--small .uib-daypicker .glyphicon, .uib-daypicker .btn--small .glyphicon, .btn--small
    .uib-monthpicker .glyphicon,
    .uib-monthpicker .btn--small .glyphicon, .btn--small
    .uib-yearpicker .glyphicon,
    .uib-yearpicker .btn--small .glyphicon {
      color: inherit;
      font-size: 1.4rem;
      text-shadow: none; }
  .btn--tiny {
    font-size: 1.2rem !important;
    padding: 0.2em 0.6em; }
  .btn--full {
    display: block;
    width: 345px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto; }
  .btn [class^="icon-"], .btn .uib-daypicker .glyphicon, .uib-daypicker .btn .glyphicon, .btn
  .uib-monthpicker .glyphicon,
  .uib-monthpicker .btn .glyphicon, .btn
  .uib-yearpicker .glyphicon,
  .uib-yearpicker .btn .glyphicon {
    display: inline-block;
    margin-top: -4px;
    margin-bottom: -2px; }

.main-actions {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: center;
  justify-content: space-between;
  white-space: nowrap; }
  @media (max-width: 759px) {
    .main-actions {
      margin-top: 1.2em; } }
  @media (min-width: 760px) {
    .main-actions {
      margin-top: 2em; } }
  .main-actions p {
    width: 100%; }
  .main-actions + .main-actions {
    margin-top: 0.8em; }
  .main-actions a:not(.btn) {
    white-space: normal;
    display: inline-block;
    vertical-align: middle;
    max-width: 51.5%; }
    .main-actions a:not(.btn):only-child {
      max-width: none; }

table .main-actions {
  margin-top: 1em; }

.inline-form .main-actions {
  margin-top: 0; }

.multi-section-form-actions {
  margin-top: 2rem;
  text-align: right; }
  @media (min-width: 760px) {
    .multi-section-form-actions .btn {
      width: 345px;
      max-width: 50%; } }

.btn-group {
  display: -webkit-inline-box !important;
  display: -webkit-inline-flex !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important; }
  .btn-group > * {
    flex-grow: 1;
    margin-top: 0;
    min-width: -moz-min-content;
    min-width: -webkit-min-content;
    min-width: min-content; }
  .btn-group > .btn {
    flex-shrink: 0; }
  .btn-group > input,
  .btn-group > select {
    height: auto !important;
    min-width: auto !important; }
  .btn-group > .btn {
    width: auto; }
  .btn-group > input {
    width: 100%; }
  .btn-group label {
    margin: 0 !important;
    font-weight: normal; }
  .btn-group .btn {
    border-radius: 0;
    min-width: 0; }
  .btn-group > * {
    flex-grow: initial; }
    .btn-group > * + * {
      margin-left: 1px; }
  .btn-group > .btn:first-child,
  .btn-group > *:first-child .btn {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px; }
  .btn-group > .btn:last-child,
  .btn-group > *:last-child .btn {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px; }
  .btn-group--toggle .btn {
    background-color: #e6e7e8;
    border-color: #e6e7e8;
    color: #3d3d3d; }
  .btn-group--toggle input[type="radio"] {
    position: absolute;
    clip: rect(0 0 0 0); }
    .btn-group--toggle input[type="radio"]:checked + .btn {
      background: #117DB0;
      border-color: #117DB0;
      color: #fff;
      cursor: default; }

.btn-link {
  border: 0;
  background: transparent;
  font-size: inherit;
  display: inline-block;
  width: auto;
  padding: 0.6em; }

/*doc
---
title: Containers & Boxes
name: containers
category: Modules
---

<strong>TODO:</strong> Container types and usage still need to be better defined and standardized.

##Boxes

NOTE: Some or all of these boxes will likely be going away in the current redesign.

```html_example
<div class="accent-blue-box">
  <p>This is a box. It can have any kind of content.</p>
  <p>This is <a href="#">a link</a> within a box.</p>
</div>

<hr>

<div class="highlight-box">
  <p>This is a box. It can have any kind of content.</p>
  <p>This is <a href="#">a link</a> within a box.</p>
</div>

<hr>

<div class="subtle-highlight-box">
  <p>This is a box. It can have any kind of content.</p>
  <p>This is <a href="#">a link</a> within a box.</p>
</div>

<hr>

<div class="disclaimer-box">
  <p>This is a <strong>disclaimer box</strong>. It can have any kind of content but is meant for displaying disclaimer messages.</p>
  <p>This is <a href="#">a link</a> within a box.</p>
</div>
```

###Boxes used in Condensed Form flow screens

#### Progress Box

<strong>TODO:</strong> Originally this box was used to only contain progress indicator lists but seems to be used for other types of content in some WIP designs so we should redefine and rename it...

```html_example
<div style="padding: 1em; background: #f5f5f6">

<section class="progress-box content-section">
    <header class="progress-box__header">
        <h4>SoFi Wealth</h4>
    </header>

    <div class="progress-box__body">
        <ol class="progress-list">
            <li class="complete">Create Account</li>
            <li class="current">Complete Your Profile</li>
            <li>Review Terms of Service</li>
            <li>Add Funds</li>
        </ol>
    </div>
</section>

</div>
```

#### Wide Box

So far this is being used in wide left side columns on two column pages. It initially was used mainly for form content so was originally based on form fieldset and legend tags but newer mocks show it being used for other types of content so it's been refactored.

We may want to come up with better naming as usage patterns become clearer. (NOTE: The "content-section" may be refactored or removed in upcoming revisions.)

```html_example
<div style="padding: 1em; background: #f5f5f6">

<section class="wide-box content-section">
    <header class="wide-box__header">
        <h4>Box Header</h4>
    </header>

    <div class="wide-box__body">
        Content goes in here...
    </div>
</section>

</div>
```

*/
.main__header {
  background: #e6e7e8;
  padding-top: 2rem;
  padding-bottom: 2rem; }
  .main__header h1:not(:last-child) {
    margin-bottom: 0.6em; }
  .main__header__sub {
    background: #e6e7e8;
    padding-top: 2rem;
    padding-bottom: 2rem; }
    .main__header__sub h2:not(:last-child) {
      margin-bottom: 0.6em; }

@media (max-width: 759px) {
  .main__body {
    padding-top: 2rem;
    padding-bottom: 2rem; } }

@media (min-width: 760px) {
  .main__body {
    padding-top: 4rem;
    padding-bottom: 4rem; } }

@media (max-width: 759px) {
  .content-section {
    margin-top: 2rem;
    margin-bottom: 2rem; } }

@media (min-width: 760px) {
  .content-section {
    margin-top: 3rem;
    margin-bottom: 3rem; } }

.content-section__header {
  padding-bottom: 1.0em; }

.content-section__body {
  padding-top: 2rem;
  padding-bottom: 2rem; }

.content-section__sub-section + * {
  margin-top: 2rem; }

.accent-blue-box, .highlight-box, .subtle-highlight-box,
.disclaimer-box {
  border-radius: 4px;
  padding: 2rem; }

.highlight-box {
  background: #d2f3fc; }

.subtle-highlight-box,
.disclaimer-box {
  background: #f5f5f6; }

.disclaimer-box {
  font-size: 1.2rem; }

.progress-box {
  position: relative; }
  @media (min-width: 760px) {
    .progress-box {
      background: #fff; } }
  @media (min-width: 760px) {
    .progress-box__header, .progress-box__body {
      padding: 2rem; } }
  .progress-box__header {
    border-bottom: 1px solid #D1D2D4; }
    .progress-box__header h2, .progress-box__header h3, .progress-box__header h4 {
      letter-spacing: 0.04em;
      text-transform: uppercase;
      line-height: 1.1;
      font-weight: 700;
      font-size: 1.4rem !important; }
    @media (max-width: 759px) {
      .progress-box__header {
        display: none; } }

.border-box {
  background: #fff;
  border: 1px solid #D1D2D4;
  border-radius: 4px;
  padding: 1rem;
  position: relative; }

.wide-box__header {
  text-transform: uppercase;
  margin-bottom: 0.2em; }
  .wide-box__header h2, .wide-box__header h3, .wide-box__header h4 {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    font-weight: 700;
    font-size: 1.4rem !important; }

.wide-box__body {
  background: #fff;
  position: relative; }
  @media (max-width: 759px) {
    .wide-box__body {
      padding: 1rem; } }
  @media (min-width: 760px) and (max-width: 959px) {
    .wide-box__body {
      padding: 2rem; } }
  @media (min-width: 960px) {
    .wide-box__body {
      padding: 2rem 4rem; } }

.wide-box .form-step-list {
  width: 100%; }

@media (min-width: 760px) {
  .wide-box .form-step-list {
    max-width: 420px; } }

.wide-box label + ul {
  margin-top: 0.3em; }

@media (min-width: 760px) {
  .reader-content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: center;
    justify-content: space-between; } }

.reader-content__edit {
  text-align: right; }
  @media (min-width: 760px) {
    .reader-content__edit {
      -webkit-box-ordinal-group: 2;
      -moz-box-ordinal-group: 2;
      -ms-flex-order: 2;
      -webkit-order: 2;
      order: 2; } }

/*
    - Errors
    - Help Text (WIP - see if included in final UI)
    - Custom Form Controls
    - Form Layouts
    - Material Design style form controls
*/
/*doc
---
title: Forms and Form Elements
name: formElements
category: Modules
---

NOTE: Form element examples below don't include JavaScript so do not show animation of label flying up, etc. For examples of functionality, see Wealth app. (Currently we don't have a solution for including JavaScript in the Living Style Guide.)

##Basic Form Elements (not within a form layout)

"MD" style form elements:
(These have animated transitions between the states which unfortunately aren't included in the Living Style Guide since they need JS for functionality. See Wealth app for working examples.)

```html_example
<p>An empty text input:</p>
<ol class="form-step-list">
  <li class="md-input-container" data-input-focus-container>
      <label>First Name</label>
      <input type="text" data-input-focus required>
  </li>
</ol>

<p>A focused text input:</p>
<ol class="form-step-list">
  <li class="md-input-container is-focused" data-input-focus-container>
      <label>First Name</label>
      <input type="text" data-input-focus required>
  </li>
</ol>

<p>A filled text input:</p>
<ol class="form-step-list">
  <li class="md-input-container is-not-empty" data-input-focus-container>
      <label>First Name</label>
      <input type="text" value="Filled" data-input-focus required>
  </li>
</ol>

<p>A text input with an error:</p>
<ol class="form-step-list">
  <li class="md-input-container is-not-empty" data-input-focus-container>
      <label>First Name</label>
      <input type="text" value="Filled" data-input-focus required class="ng-invalid ng-touched">
      <p class="error">
         An error!
      </p>
  </li>
</ol>
```

##Fancy Specialized Custom Form Elements (not within a form layout)
```html_example
<p>
  <label>No max-length set:</label>
  <span class="fancy-input fancy-input--dollar">
    <input type="text" placeholder="0">
    <span class="fancy-input__decorator">$</span>
  </span>
</p>

<p>
  <label>This example has a max-length set:</label>
  <span class="fancy-input">
    <input type="text" maxlength="3" placeholder="0">
    <span class="fancy-input__decorator">%</span>
  </span>
</p>
```

##Form Layouts with Basic Form Elements
NOTE: These layouts are in the process of being refactored and updated.

###Form Layout

```html_example
<div style="padding: 1em; background: #f5f5f6">

<section class="wide-box content-section">
    <header class="wide-box__header">
      <h4>Some Header</h4>
    </header>

    <div class="wide-box__body">
      <form>
        <ol class="form-step-list">
          <li>
            <label>Enter a line of text</label>
            <input type="text" placeholder="placeholder" />
            <p class="error">This is an example of an error message.</p>
          </li>

          <li>
            <label>Write some longer text</label>
            <textarea cols="30" rows="10" placeholder="placeholder"></textarea>
          </li>

          <li>
            <label>Make a choice</label>

            <ul class="spaced-list">
              <li>
                <label class="md-radio-button">
                  <input type="radio" name="choice" />
                  <span class="md-fake-input"></span>
                  <span class="md-label-text">Yes</span>
                </label>
              </li>

              <li>
                <label class="md-radio-button">
                  <input type="radio" name="choice" />
                  <span class="md-fake-input"></span>
                  <span class="md-label-text">No</span>
                </label>
              </li>
            </ul>
          </li>

          <li>
            <label>Make a choice</label>

            <p></p>

            <ul class="spaced-list">
              <li>
                <label class="md-radio-button">
                  <input type="radio" name="choice" />
                  <span class="md-fake-input"></span>
                  <span class="md-label-text">Yes</span>
                </label>
              </li>

              <li>
                <label class="md-radio-button">
                  <input type="radio" name="choice" />
                  <span class="md-fake-input"></span>
                  <span class="md-label-text">No</span>
                </label>
              </li>
            </ul>
          </li>

          <li>
            <label>Select any or none of the following</label>

            <ul class="spaced-list">
              <li>
                <label class="md-checkbox">
                  <input type="checkbox" />
                  <span class="md-fake-input"></span>
                  <span class="md-label-text">Red</span>
                </label>
              </li>

              <li>
                <label class="md-checkbox">
                  <input type="checkbox" />
                  <span class="md-fake-input"></span>
                  <span class="md-label-text">Blue</span>
                </label>
              </li>

              <li>
                <label class="md-checkbox">
                  <input type="checkbox" />
                  <span class="md-fake-input"></span>
                  <span class="md-label-text">Orange</span>
                </label>
              </li>
            </ul>
          </li>

          <li>
            <label>Upload a file</label>
            <input type="file" />
          </li>

          <li>
            <label>Select an option</label>
            <select>
              <option selected="selected" disabled>Default</option>
              <option>First choice</option>
              <option>Another choice</option>
              <option>One more</option>
            </select>
            <p class="form-help">An example of extra help text to explain field.</p>
          </li>

          <li>
            <label>Select multiple options</label>

            <span class="compound-input">
              <select>
                <option selected="selected" disabled>Month</option>
                <option>October</option>
              </select>

              <select>
                <option selected="selected" disabled>Day</option>
                <option>24</option>
              </select>

              <select>
                <option selected="selected" disabled>Year</option>
                <option>1984</option>
              </select>
            </span>
          </li>
        </ol>
      </form>
    </div><!-- /.wide-box__body -->
</section>

<p class="multi-section-form-actions">
  <button type="submit" class="btn">Submit</button>
</p>

</div>
```
*/
.error,
.form-help {
  font-size: 1.2rem;
  line-height: 1.2;
  margin-top: 0.5em;
  margin-top: 0.3em; }

.error {
  color: #a94442; }

.form-help {
  color: #8A8B8A; }

.file-input-unit {
  overflow: hidden;
  display: inline-block;
  position: relative; }
  .file-input-unit input[type="file"] {
    opacity: 0;
    font-size: 200px;
    display: block;
    width: 100%;
    min-height: 3em;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; }
  .file-input-unit .btn {
    white-space: nowrap; }

.fancy-input {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end;
  height: 1.5em;
  position: relative; }
  .fancy-input input {
    min-width: 4em !important;
    padding-right: 0.3em !important; }
    .fancy-input input:focus + .fancy-input__decorator {
      border-color: #117DB0 !important; }
    .fancy-input input.ng-invalid.ng-touched + .fancy-input__decorator {
      border-color: #F0503A; }
  .fancy-input--dollar {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row-reverse;
    -moz-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end; }
    .fancy-input--dollar input {
      padding-left: 0.3em !important;
      padding-right: 0 !important; }
  .fancy-input__decorator {
    border-bottom: 1px solid #D1D2D4;
    color: #767676;
    white-space: nowrap;
    height: 1.5em; }

.dropdown {
  display: inline-block;
  position: relative; }
  .dropdown__button {
    white-space: nowrap; }
    .dropdown__button:after {
      border: 4px solid transparent;
      border-top-color: inherit;
      border-bottom-width: 0;
      content: "";
      display: inline-block;
      margin-left: 0.3em;
      vertical-align: middle; }
  .dropdown__menu-content-wrapper {
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    position: absolute;
    overflow: hidden;
    position: absolute;
    top: 100%;
    z-index: 5; }
  .dropdown__menu-list {
    -ms-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    background: #fff;
    border: 1px solid #D1D2D4;
    font-size: 1.2rem;
    margin: 0; }
    .dropdown__menu-list li {
      line-height: 1.1; }
      .dropdown__menu-list li + li {
        border-top: 1px solid #D1D2D4; }
    .dropdown__menu-list a {
      background: #fff;
      color: inherit;
      white-space: initial;
      display: block;
      padding: 0.3em; }
      .dropdown__menu-list a:hover {
        background: #f5f5f6;
        text-decoration: none; }

.dropdown.open .dropdown__menu-list {
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0); }

.input-wrapper {
  display: inline-block;
  max-width: 100%;
  min-width: 2.5em;
  padding-left: 22px;
  margin-bottom: 0;
  vertical-align: middle; }
  .input-wrapper + .input-wrapper {
    margin-left: 0.8em; }
  .input-wrapper input[type="radio"],
  .input-wrapper input[type="checkbox"] {
    margin-left: -22px; }
  @media (max-width: 759px) {
    .input-wrapper:nth-of-type(n+5) {
      display: block;
      margin-left: 0;
      margin-top: 0.2em; } }

[class*="input-wrapper"] + select {
  width: auto; }

.compound-input {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
  width: 100%; }
  .compound-input > * {
    flex-grow: 1;
    margin-top: 0;
    min-width: -moz-min-content;
    min-width: -webkit-min-content;
    min-width: min-content; }
  .compound-input > .btn {
    flex-shrink: 0; }
  .compound-input > input,
  .compound-input > select {
    height: auto !important;
    min-width: auto !important; }
  .compound-input > .btn {
    width: auto; }
  .compound-input > input {
    width: 100%; }
  .compound-input > * {
    line-height: 1.4;
    white-space: nowrap; }
    .compound-input > * + * {
      margin-left: 0.4em; }
  .compound-input input[maxlength] {
    width: 100% !important; }

.date-input-wrapper {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle; }
  .date-input-wrapper__unit {
    display: table-cell;
    vertical-align: top; }
    .date-input-wrapper__unit:first-child {
      width: 100%; }
    .date-input-wrapper__unit:nth-child(2) {
      padding: 0.3em 0.5em; }

select.ng-invalid {
  color: #8A8B8A; }

.uib-datepicker {
  margin-top: -1px;
  position: absolute;
  z-index: 1000; }

.uib-daypicker,
.uib-monthpicker,
.uib-yearpicker {
  background: #f5f5f6;
  border: 1px solid #D1D2D4;
  border-radius: 4px;
  display: inline-block;
  padding: 0.5em; }
  .uib-daypicker .btn,
  .uib-monthpicker .btn,
  .uib-yearpicker .btn {
    background-color: #fff;
    border: 1px solid #D1D2D4;
    border-radius: 4px;
    color: initial;
    font-weight: initial;
    width: 100%;
    min-width: 0;
    padding: 0.3em; }
    .uib-daypicker .btn:not([disable]) .text-muted,
    .uib-monthpicker .btn:not([disable]) .text-muted,
    .uib-yearpicker .btn:not([disable]) .text-muted {
      opacity: 0.3; }
    .uib-daypicker .btn:focus,
    .uib-monthpicker .btn:focus,
    .uib-yearpicker .btn:focus {
      outline: none;
      background-color: #d2f3fc; }
  .uib-daypicker table,
  .uib-monthpicker table,
  .uib-yearpicker table {
    outline: none; }
  .uib-daypicker th,
  .uib-daypicker td,
  .uib-monthpicker th,
  .uib-monthpicker td,
  .uib-yearpicker th,
  .uib-yearpicker td {
    text-align: center;
    width: 2em;
    padding: 0.1em; }
  .uib-daypicker small,
  .uib-monthpicker small,
  .uib-yearpicker small {
    font-size: smaller; }
  .uib-daypicker .glyphicon,
  .uib-monthpicker .glyphicon,
  .uib-yearpicker .glyphicon {
    font-size: 1.6rem; }
    .uib-daypicker .glyphicon:before,
    .uib-monthpicker .glyphicon:before,
    .uib-yearpicker .glyphicon:before {
      font-weight: 700; }

input[type="text"][disabled],
input[type="number"][disabled],
input[type="tel"][disabled],
input[type="date"][disabled],
input[type="email"][disabled] {
  background-color: #eeeeee !important; }

.form-step-list {
  list-style-type: none;
  padding: 0; }
  .form-step-list > li + * {
    margin-top: 2rem; }
  .form-step-list input:not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
  .form-step-list select,
  .form-step-list textarea {
    width: 100%; }

legend + .form-step-list {
  margin-top: 0.4em; }

@media (min-width: 760px) {
  .aligned-form .form-step-list > li {
    padding-left: 10em; } }

.modal-content .stacked-form {
  max-width: none !important; }

.aligned-form input:not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
.aligned-form [class*="-input-wrapper"],
.aligned-form .compound-input,
.aligned-form .combo-box-input textarea,
.stacked-form input:not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
.stacked-form [class*="-input-wrapper"],
.stacked-form .compound-input,
.stacked-form .combo-box-input textarea {
  width: 100%; }

@media (max-width: 759px) {
  .aligned-form label:not(.input-wrapper):not(.toggle-label) {
    display: block;
    margin-bottom: 0.2em; } }

@media (min-width: 760px) {
  .aligned-form .main-actions,
  .aligned-form .secondary-actions {
    padding-left: 10em; }
  .aligned-form input:not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
  .aligned-form [class*="-input-wrapper"],
  .aligned-form .compound-input,
  .aligned-form .combo-box-input,
  .aligned-form select,
  .aligned-form textarea {
    max-width: 29em; }
  .aligned-form label:not(.input-wrapper):not(.toggle-label) {
    display: inline-block;
    width: 9.5em;
    margin-left: -10em;
    vertical-align: middle; } }

.aligned-form legend {
  border-bottom: 1px dotted #D1D2D4;
  text-transform: none !important;
  width: 29em;
  max-width: 100%; }
  .aligned-form legend + .form-step-list {
    margin-top: 1em; }

.stacked-form {
  margin-left: auto;
  margin-right: auto;
  max-width: 56.0rem !important; }
  .stacked-form label:not(.input-wrapper):not(.toggle-label) {
    display: block;
    margin-bottom: 0.3em; }

.inline-form {
  padding-bottom: 0.3em; }
  .inline-form ol,
  .inline-form li,
  .inline-form > p,
  .inline-form .field-n-error-wrapper,
  .inline-form label,
  .inline-form input,
  .inline-form button,
  .inline-form select {
    display: inline-block !important;
    vertical-align: middle; }
  .inline-form .form-step-list li,
  .inline-form > p {
    margin-top: 0 !important; }
  .inline-form .field-n-error-wrapper p.error {
    position: absolute; }
  @media (max-width: 759px) {
    .inline-form .btn {
      padding-left: 0.4em;
      padding-right: 0.4em; } }

.sub-fields-unit__sub-fields {
  margin-bottom: 1.5em;
  padding-left: 20px; }

.md-input-container {
  position: relative; }
  .md-input-container label:not(.input-wrapper) {
    color: #767676;
    font-weight: normal;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(0, 1.3em, 0) scale(1);
    transform-origin: left top;
    display: block;
    pointer-events: none;
    margin-bottom: 0; }
  .md-input-container.is-focused label, .md-input-container.is-not-empty label {
    font-weight: 300;
    transform: translate3d(0, 0, 0) scale(0.85); }
  .md-input-container.is-focused label {
    color: #117DB0; }
  .md-input-container.is-focused input:not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
  .md-input-container.is-focused select,
  .md-input-container.is-focused textarea {
    border-color: #117DB0; }
  .md-input-container ::-webkit-input-placeholder {
    color: transparent; }
  .md-input-container :-moz-placeholder {
    color: transparent; }
  .md-input-container ::-moz-placeholder {
    color: transparent; }
  .md-input-container :-ms-input-placeholder {
    color: transparent; }
  .md-input-container ::input-placeholder {
    color: transparent; }
  .md-input-container--dollar:not(.is-focused):not(.is-not-empty) label {
    padding-left: 0.6em; }
  .md-input-container--dollar input {
    padding-left: 0.3em !important;
    padding-right: 0 !important; }

.md-radio-button,
.md-checkbox {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  cursor: pointer;
  font-weight: normal !important;
  position: relative; }
  .md-radio-button + .md-radio-button,
  .md-radio-button .md-checkbox,
  .md-checkbox + .md-radio-button,
  .md-checkbox .md-checkbox {
    margin-left: 4rem; }
  .md-radio-button .md-fake-input,
  .md-checkbox .md-fake-input {
    border: 1px solid #767676;
    display: inline-block;
    width: 2.8rem;
    height: 2.8rem;
    position: relative;
    flex-shrink: 0; }
    .md-radio-button .md-fake-input:before,
    .md-checkbox .md-fake-input:before {
      font-size: 2.0rem;
      content: "";
      display: block;
      margin: auto;
      background: transparent;
      position: absolute; }
    .md-radio-button .md-fake-input + .md-label-text,
    .md-checkbox .md-fake-input + .md-label-text {
      margin-left: 0.4em; }
  .md-radio-button input,
  .md-checkbox input {
    opacity: 0;
    position: absolute;
    z-index: -1; }
    .md-radio-button input:checked + .md-fake-input,
    .md-checkbox input:checked + .md-fake-input {
      color: #117DB0;
      border-color: #117DB0; }
    .md-radio-button input:focus + .md-fake-input,
    .md-checkbox input:focus + .md-fake-input {
      border-color: #117DB0 !important; }
  .md-radio-button + .md-input-container,
  .md-checkbox + .md-input-container {
    padding-left: 0.4em;
    margin-left: 2.8rem; }
  .md-radio-button .md-label-text,
  .md-checkbox .md-label-text {
    padding-top: 0.45em; }

.md-radio-button .md-fake-input:before {
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px; }

.md-radio-button .md-fake-input,
.md-radio-button .md-fake-input:before {
  border-radius: 500px; }

.md-radio-button input:checked + .md-fake-input:before {
  background: #117DB0; }

.md-checkbox .md-fake-input {
  border-radius: 2px; }
  .md-checkbox .md-fake-input:before {
    color: transparent;
    width: 1em;
    height: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }

.md-checkbox input + .md-fake-input:before {
  font-family: "sofi-icons"; }

.md-checkbox input:checked + .md-fake-input:before {
  color: #117DB0; }

.ng-submitted:not(.ng-valid-parse) .ng-invalid-required,
.ng-submitted:not(.ng-valid-parse) .ng-invalid-required + .md-fake-input,
.ng-submitted:not(.ng-valid-parse) .error-item {
  border-color: #F0503A !important; }

.ng-invalid.ng-touched {
  border-color: #F0503A !important; }

.disabled-choice {
  cursor: default;
  -webkit-filter: grayscale(80%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(80%);
  opacity: 0.45; }
  .disabled-choice * {
    cursor: default; }

h1 + [class*="js-"]:empty + p, h2 + [class*="js-"]:empty + p, h3 + [class*="js-"]:empty + p, h4 + [class*="js-"]:empty + p, h5 + [class*="js-"]:empty + p, h6 + [class*="js-"]:empty + p {
  margin-top: 0.4em; }

.explanatory-title {
  font-weight: normal;
  opacity: .75;
  display: block; }
  .explanatory-title + h1, .explanatory-title + h2, .explanatory-title + h3, .explanatory-title + h4, .explanatory-title + h5, .explanatory-title + h6 {
    margin-top: 0; }

.content-header {
  text-align: center;
  line-height: 1.1;
  margin-left: auto;
  margin-right: auto;
  max-width: 86.0rem; }
  @media (max-width: 759px) {
    .content-header {
      margin-bottom: 1.33333rem; } }
  @media (min-width: 760px) {
    .content-header {
      margin-bottom: 4rem; } }
  .content-header [class^="icon-"], .content-header .uib-daypicker .glyphicon, .uib-daypicker .content-header .glyphicon, .content-header
  .uib-monthpicker .glyphicon,
  .uib-monthpicker .content-header .glyphicon, .content-header
  .uib-yearpicker .glyphicon,
  .uib-yearpicker .content-header .glyphicon {
    font-size: 1.6rem; }

/*doc
---
title: Links
name: customLinks
category: Modules
---

**TODO:** We need to come up with more defined patterns for link types and how/where they should be used.

See [base link styles][links] for comparison.

##Secondary Link

Secondary links are more subtle de-emphasized links.

```html_example
<p>
  <a href="#" class="secondary-link">This is a stand alone secondary link.</a>
</p>
```

##Action Link
<strong>TODO:</strong> These need to be rethought/refactored. May go away.

These links use the standard link styles but are bold to stand out more. We may possibly want to consider making this the standard link style instead of a special style.

(The "action-link" class name can be applied to any type of element such as a span tag instead of using an anchor tag.)

```html_example
<p>
  <a href="#" class="action-link">This is a stand alone "action" link.</a>
</p>
<p>
  Lorem ipsum dolor <a href="#" class="action-link">"action" link within a sentence</a> sit amet, consectetur adipiscing elit.
</p>
```

##Negative Action Link

NOTE: So far this seems to be used only in one place on Wealth. Need to better define usage.

<p>
  <a href="" class="negative-action-link">Delete</a>
</p>

*/
.fake-link {
  border: 0;
  background: transparent;
  font-size: inherit;
  display: inline-block;
  padding: 0;
  width: auto; }

.action-link {
  font-weight: 700; }

.text-color-link {
  color: inherit !important; }

.sofi-blue-link {
  color: #29C4F3;
  cursor: pointer;
  outline: none;
  text-decoration: none; }
  .sofi-blue-link:hover {
    color: #0b9dc9; }
  .sofi-blue-link:active {
    color: #0A5070; }

.goto-link {
  padding-right: 1em;
  line-height: 1.2;
  display: inline-block;
  position: relative; }
  .goto-link:after {
    font-size: 1em;
    font-family: 'sofi-icons';
    font-style: normal;
    line-height: 1;
    text-decoration: inherit;
    text-align: center;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: auto 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0; }

.secondary-link {
  color: #767676; }
  .secondary-link:hover {
    color: #767676;
    text-decoration: underline; }
    .secondary-link:hover:after {
      text-decoration: none; }

.back-link {
  font-size: 1.2rem; }
  .back-link [class^="icon-"], .back-link .uib-daypicker .glyphicon, .uib-daypicker .back-link .glyphicon, .back-link
  .uib-monthpicker .glyphicon,
  .uib-monthpicker .back-link .glyphicon, .back-link
  .uib-yearpicker .glyphicon,
  .uib-yearpicker .back-link .glyphicon {
    vertical-align: text-top; }
  .back-link + * {
    margin-top: 0.6em; }

.negative-action-link {
  color: #F0503A; }

/*doc
---
title: Lists
name: lists
category: Modules
---

##Numbered List

A basic numbered list.

```html_example
<ol class="numbered-list">
  <li>list item</li>
  <li>another one</li>
  <li>one more thing</li>
</ol>
```

##Bulleted List

A basic bulleted list.

```html_example
<ul class="bulleted-list">
  <li>list item</li>
  <li>another one</li>
  <li>one more thing</li>
</ul>
```

##PDF Doc List

A list of PDF docs.

NOTE: This may be going away in the upcoming redesign of the Wealth Account Dashboard.

```html_example
<ul class="pdf-doc-list">
  <li>
    <strong><a href="#">May 2016</a></strong>
    <a class="secondary-link small" href="#">Download</a>
  </li>

  <li>
    <strong><a href="#">April 2016</a></strong>
    <a class="secondary-link small" href="#">Download</a>
  </li>

  <li>
    <strong><a href="#">March 2016</a></strong>
    <a class="secondary-link small" href="#">Download</a>
  </li>
</ul>
```

##Progress List

```html_example
<ol class="progress-list">
  <li class="complete">Completed item</li>
  <li class="current">Current item</li>
  <li>An upcoming item</li>
  <li>And another one after that</li>
</ol>
```

*/
.compact-spaced-list > li {
  line-height: 1.1; }

.spaced-list > li {
  line-height: 1.1; }

.numbered-list {
  list-style-type: none;
  counter-reset: custom-counter;
  position: relative;
  padding-left: 2.8em;
  overflow: hidden; }
  .numbered-list > li {
    counter-increment: custom-counter; }
    .numbered-list > li:before {
      content: counter(custom-counter) ".";
      position: absolute;
      left: 0;
      min-width: 1.5em;
      text-align: right; }

.bulleted-list {
  list-style-type: disc;
  padding-left: 1.5em; }
  .bulleted-list .bulleted-list {
    list-style-type: circle;
    margin-top: 0; }

.line-separated-list li + li {
  border-top: 1px dotted #D1D2D4;
  padding-top: 0.5em;
  margin-top: 0.5em; }

.pdf-doc-list > li {
  min-height: 25px;
  padding-left: 30px;
  position: relative; }
  .pdf-doc-list > li:before {
    background: url("./libraries/sofi-global/assets/images/icons/icon-pdf.png") no-repeat;
    background-size: contain;
    content: "";
    display: block;
    width: 20px;
    height: 25px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .pdf-doc-list > li:before {
        background-image: url("./libraries/sofi-global/assets/images/icons/icon-pdf-2x.png"); } }
  .pdf-doc-list > li > * {
    vertical-align: middle; }

.pdf-doc-list__links {
  display: inline;
  white-space: nowrap;
  color: #767676; }

.custom-bullet-list > li {
  padding-left: 1.5em;
  position: relative; }
  .custom-bullet-list > li [class^="icon-"], .custom-bullet-list > li .uib-daypicker .glyphicon, .uib-daypicker .custom-bullet-list > li .glyphicon, .custom-bullet-list > li
  .uib-monthpicker .glyphicon,
  .uib-monthpicker .custom-bullet-list > li .glyphicon, .custom-bullet-list > li
  .uib-yearpicker .glyphicon,
  .uib-yearpicker .custom-bullet-list > li .glyphicon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0; }

.progress-list {
  counter-reset: custom-counter;
  list-style-type: none;
  padding-left: 0; }
  .progress-list .step-label {
    vertical-align: middle; }
  .progress-list > li {
    counter-increment: custom-counter;
    position: relative;
    padding-left: 2.5em; }
    .progress-list > li:before {
      border: 2px solid;
      border-radius: 500px;
      color: #8A8B8A;
      content: counter(custom-counter) "";
      font-weight: bold;
      line-height: 1;
      text-align: center;
      display: block;
      width: 1em;
      height: 1em;
      padding: 0.3em;
      margin: auto 0;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0; }
    .progress-list > li.complete:before {
      font-family: "sofi-icons"; }
    .progress-list > li.current {
      font-weight: bold; }
      .progress-list > li.current:before {
        color: inherit; }
  @media (max-width: 759px) {
    .progress-list--mobile-responsive {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .progress-list--mobile-responsive li {
        height: calc(1em + (0.3em * 2) + (2px * 2));
        margin-top: 0;
        overflow: hidden;
        max-width: 0;
        padding-left: 3em; }
        .progress-list--mobile-responsive li:last-child {
          padding-left: calc(1em + (0.3em * 2) + (2px * 2)); }
        .progress-list--mobile-responsive li:not(:last-child):after {
          border-top: 1px solid;
          content: "";
          display: block;
          height: 0;
          margin: auto;
          position: absolute;
          top: 0;
          right: 2px;
          bottom: 0;
          left: calc(1em + (0.3em * 2) + (2px * 2) + 2px); } }

.loading-mask {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1100; }
  .loading-mask .icon-spinner, .loading-mask .btn--loading:before {
    font-size: 3.2rem;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear; }

.pdf-embed {
  border: 1px solid #D1D2D4;
  margin: 2em 0; }
  .pdf-embed iframe {
    width: 100%; }
  .pdf-embed .alert {
    margin: 3px; }

.media-object {
  overflow: hidden; }
  .media-object > img,
  .media-object figcaption {
    display: block; }
  .media-object > img {
    float: left;
    margin-right: 1em; }
  .media-object figcaption {
    overflow: hidden; }

/*doc
---
title: Modals
name: modals
category: Modules
---

Modals are also referred to as dialogs, pop ups and popovers.

```html_example
<div style="padding: 20px; background: #666;">

<div class="modal-dialog modal-lg">
    <div class="modal-content">
		<header class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="vm.close()">
				<i class="icon-cancel-large" aria-hidden="true"></i>
			</button>

			<h2 class="h1">Header for Modal</h2>
		</header>

		<div class="modal-body">
			<p>Some text content.</p>
		</div><!-- /.modal-body -->

		<footer class="modal-footer">
			<a class="fake-link" href="">Secondary Action</a>
			<button type="button" class="btn">Primary Action</button>
		</footer>
    </div>
</div>

</div>
```

*/
.modal-content > *,
.modal-header,
.modal-body,
.modal-footer {
  border-radius: inherit; }

.modal-dialog {
  max-width: 660px; }

.modal-content {
  background: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }

.modal-header {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: center;
  justify-content: space-between;
  -webkit-box-direction: reverse;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  background: transparent;
  border-bottom: 1px solid #D1D2D4;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }
  @media (max-width: 759px) {
    .modal-header {
      padding: 1rem !important; } }
  @media (min-width: 760px) {
    .modal-header {
      padding: 2rem !important; } }
  .modal-header .close {
    color: #8A8B8A;
    font-size: 1.6rem; }
    .modal-header .close + * {
      flex: 1 1 0;
      margin-top: 0 !important;
      margin-right: 0.5em !important; }
  .modal-header button.close {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none; }
  .modal-header > :not(.close) {
    width: 100%;
    margin-right: auto; }

@media (max-width: 759px) {
  .modal-body {
    padding: 1rem !important; } }

@media (min-width: 760px) {
  .modal-body {
    padding: 2rem !important; } }

.modal-body h3 {
  text-transform: none; }

.modal-body .stacked-form {
  max-width: none !important; }

.modal-dialog .modal-body * + p {
  margin-top: 0.8em !important; }

.modal-footer {
  background: #f5f5f6;
  border-top: 0 !important;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 1rem !important; }
  @media (max-width: 759px) {
    .modal-footer {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; }
      .modal-footer .btn,
      .modal-footer a {
        text-align: center;
        display: block;
        width: 100%; }
        .modal-footer .btn + *,
        .modal-footer a + * {
          margin-bottom: 0.8em; }
      .modal-footer a {
        padding: 0.6em; } }
  @media (min-width: 760px) {
    .modal-footer {
      text-align: right; }
      .modal-footer .btn,
      .modal-footer a {
        display: inline-block;
        width: auto; }
      .modal-footer > * + * {
        margin-left: 1em;
        margin-top: 0 !important; } }

.popover {
  font-weight: normal;
  line-height: initial; }

[style*="none"] + * {
  margin-top: 0; }

.popover-title + .popover-content:empty {
  padding: 0;
  margin: 0; }

.content-panel {
  background: #fff;
  border: 1px solid #D1D2D4; }
  @media (min-width: 760px) {
    .content-panel {
      min-height: 226px; } }
  .content-panel__header {
    background: #0D3A54;
    color: #fff;
    padding: .6rem 1.0rem;
    position: relative; }
    .content-panel__header [class^="icon-"], .content-panel__header .uib-daypicker .glyphicon, .uib-daypicker .content-panel__header .glyphicon, .content-panel__header
    .uib-monthpicker .glyphicon,
    .uib-monthpicker .content-panel__header .glyphicon, .content-panel__header
    .uib-yearpicker .glyphicon,
    .uib-yearpicker .content-panel__header .glyphicon {
      font-size: 0.8em; }
  .content-panel__header-title {
    line-height: 1;
    padding-right: 62px; }
  .content-panel .goal-actions {
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    right: .8rem;
    top: 50%;
    margin: 0; }
  .content-panel__body {
    padding: 2rem; }
  .content-panel.ghost-panel {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    border: 3px dotted #76d9f7;
    color: #117DB0;
    cursor: pointer;
    text-align: center;
    word-spacing: 9999px;
    line-height: 1.2; }
    .content-panel.ghost-panel:hover [class^="icon-"], .content-panel.ghost-panel:hover .uib-daypicker .glyphicon, .uib-daypicker .content-panel.ghost-panel:hover .glyphicon, .content-panel.ghost-panel:hover
    .uib-monthpicker .glyphicon,
    .uib-monthpicker .content-panel.ghost-panel:hover .glyphicon, .content-panel.ghost-panel:hover
    .uib-yearpicker .glyphicon,
    .uib-yearpicker .content-panel.ghost-panel:hover .glyphicon {
      color: inherit; }

/*doc
---
title: Tables
name: tables
category: Modules
---

Table design patterns still need better definition and standardization.

##Alternating Row Table

This table style is currently the same as the "Hover Row Table" except the table rows don't change color when you hover over them. We need to standardize these two table designs to consolidate them or else differentiate them more if we can.

Add the class "responsive-table" to make table cells stack into one column in mobile view. You must also add a data-th attribute with the associated table header to each td for this to display headers in mobile view. See below tables for examples of how this works. (Narrow your browser screen.)

```html_example
<table class="alternating-row-table responsive-table">
  <caption>Table Caption</caption>

  <thead>
    <tr>
      <th>Cell Header</th>
      <th>Cell Header</th>
      <th>Cell Header</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
    </tr>

    <tr>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
    </tr>

    <tr>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
    </tr>
  </tbody>
</table>
```

##Hover Row Table

```html_example
<table class="hover-row-table responsive-table">
  <caption>Table Caption</caption>

  <thead>
    <tr>
      <th>Cell Header</th>
      <th>Cell Header</th>
      <th>Cell Header</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
    </tr>

    <tr>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
    </tr>

    <tr>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
    </tr>
  </tbody>
</table>
```

##Bordered Table

This was originally created as a temporary table style. It's no longer used within Wealth but is still used in Advisor for some tables. If we want to continue using it we should better define how/where to use it and perhaps refine the design.

```html_example
<table class="bordered-table">
  <caption>Table Caption</caption>

  <thead>
    <tr>
      <th>Cell Header</th>
      <th>Cell Header</th>
      <th>Cell Header</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
    </tr>

    <tr>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
    </tr>

    <tr>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
      <td data-th="Cell Header">Cell content</td>
    </tr>
  </tbody>
</table>
```

*/
.responsive-table {
  width: 100%; }
  @media (max-width: 759px) {
    .responsive-table thead {
      display: none; }
    .responsive-table tr,
    .responsive-table td,
    .responsive-table th {
      display: block; }
    .responsive-table td,
    .responsive-table th {
      padding: initial !important;
      width: auto !important; }
    .responsive-table tr {
      padding: 0.5em; }
    .responsive-table tbody {
      border-top: 1px solid #D1D2D4; }
      .responsive-table tbody tr {
        border-top: 0 !important; }
        .responsive-table tbody tr:nth-child(odd) {
          background: #fafafa !important; }
        .responsive-table tbody tr:nth-child(even) {
          background: #f5f5f6 !important; }
      .responsive-table tbody td,
      .responsive-table tbody th {
        text-align: left !important; }
        .responsive-table tbody td + td,
        .responsive-table tbody td + th,
        .responsive-table tbody th + td,
        .responsive-table tbody th + th {
          margin-top: 0.3em; }
    .responsive-table td:empty {
      display: none; }
    .responsive-table tbody td[data-th]:before,
    .responsive-table tfoot td[data-th]:before {
      content: attr(data-th) ": ";
      display: inline;
      font-weight: 700; }
    .responsive-table tfoot {
      border-top: 2px dotted #D1D2D4 !important; }
      .responsive-table tfoot td[data-th]:before {
        text-transform: uppercase;
        letter-spacing: 0.04em; } }

.bordered-table {
  width: 100%; }
  .bordered-table th, .bordered-table td {
    border: 1px solid #D1D2D4;
    padding: 0.2em 0.4em; }
  .bordered-table th {
    background: #f5f5f6; }
  .bordered-table tbody th {
    width: 5%;
    white-space: nowrap; }

.border-separated-table {
  width: 100%; }
  .border-separated-table th,
  .border-separated-table td {
    padding: 2rem;
    vertical-align: middle; }
  .border-separated-table thead + tbody th,
  .border-separated-table thead + tbody td,
  .border-separated-table tr + tr th,
  .border-separated-table tr + tr td {
    border-top: 1px solid #D1D2D4; }

.alternating-row-table, .hover-row-table {
  width: 100%; }
  .alternating-row-table tbody th, .hover-row-table tbody th {
    font-size: 1.2rem;
    padding-top: 2em !important; }
  .alternating-row-table + table, .hover-row-table + table {
    margin-top: 2em; }
  .alternating-row-table thead > tr, .hover-row-table thead > tr,
  .alternating-row-table tbody > tr, .hover-row-table tbody > tr {
    border-bottom: 1px solid #e6e7e8; }
  .alternating-row-table > thead, .hover-row-table > thead {
    background: #e6e7e8; }
    .alternating-row-table > thead th, .hover-row-table > thead th {
      font-size: 1.2rem;
      font-weight: normal;
      padding: 0.5em;
      vertical-align: middle; }
      .alternating-row-table > thead th [class^="icon-"], .hover-row-table > thead th [class^="icon-"], .alternating-row-table > thead th .uib-daypicker .glyphicon, .uib-daypicker .alternating-row-table > thead th .glyphicon, .hover-row-table > thead th .uib-daypicker .glyphicon, .uib-daypicker .hover-row-table > thead th .glyphicon, .alternating-row-table > thead th
      .uib-monthpicker .glyphicon,
      .uib-monthpicker .alternating-row-table > thead th .glyphicon, .hover-row-table > thead th
      .uib-monthpicker .glyphicon,
      .uib-monthpicker .hover-row-table > thead th .glyphicon, .alternating-row-table > thead th
      .uib-yearpicker .glyphicon,
      .uib-yearpicker .alternating-row-table > thead th .glyphicon, .hover-row-table > thead th
      .uib-yearpicker .glyphicon,
      .uib-yearpicker .hover-row-table > thead th .glyphicon {
        font-size: 1em; }
  .alternating-row-table > tbody > tr th, .hover-row-table > tbody > tr th,
  .alternating-row-table > tbody > tr td, .hover-row-table > tbody > tr td,
  .alternating-row-table > tfoot > tr th, .hover-row-table > tfoot > tr th,
  .alternating-row-table > tfoot > tr td, .hover-row-table > tfoot > tr td {
    vertical-align: middle;
    padding: 0.8em 0.5em; }
    @media (max-width: 959px) {
      .alternating-row-table > tbody > tr th, .hover-row-table > tbody > tr th,
      .alternating-row-table > tbody > tr td, .hover-row-table > tbody > tr td,
      .alternating-row-table > tfoot > tr th, .hover-row-table > tfoot > tr th,
      .alternating-row-table > tfoot > tr td, .hover-row-table > tfoot > tr td {
        padding: 0.5em; } }
  .alternating-row-table > tbody > tr:nth-child(odd), .hover-row-table > tbody > tr:nth-child(odd) {
    background: transparent; }
  .alternating-row-table > tbody > tr:nth-child(even), .hover-row-table > tbody > tr:nth-child(even) {
    background: #f5f5f6; }
  .alternating-row-table > tfoot, .hover-row-table > tfoot {
    border-top: 1px solid #D1D2D4; }
    .alternating-row-table > tfoot td, .hover-row-table > tfoot td {
      padding-top: .5em;
      padding-bottom: .5em; }

.hover-row-table > tbody > tr:hover > th,
.hover-row-table > tbody > tr:hover > td {
  background: #EBF7FC; }

.number-cell {
  text-align: right; }

.action-cell {
  text-align: center; }
  .action-cellth {
    text-align: left !important; }

tfoot.table-total {
  font-size: 1.2rem;
  text-transform: uppercase;
  background: #f5f5f6;
  text-align: right; }

.simple-data-table > thead th,
.simple-data-table > thead td,
.simple-data-table > tbody th,
.simple-data-table > tbody td {
  padding: 0.1em 0.5em; }
  .simple-data-table > thead th:first-child,
  .simple-data-table > thead td:first-child,
  .simple-data-table > tbody th:first-child,
  .simple-data-table > tbody td:first-child {
    padding-left: 0; }
  .simple-data-table > thead th:last-child,
  .simple-data-table > thead td:last-child,
  .simple-data-table > tbody th:last-child,
  .simple-data-table > tbody td:last-child {
    padding-right: 0; }

.simple-data-table > tbody th {
  font-weight: normal; }

th .date-input-wrapper,
th input {
  max-width: 7em; }

th input {
  font-size: 1.2rem;
  height: auto !important;
  padding: 0.1em !important; }

th input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

.strong {
  font-weight: bold; }

.small {
  font-size: 1.2rem;
  font-weight: normal; }

[data-title]:not([data-title=""]) {
  cursor: pointer;
  position: relative;
  overflow: visible; }
  [data-title]:not([data-title=""]).open-below:after {
    margin-top: 0.2em;
    margin-bottom: 0;
    bottom: auto;
    top: 100%; }
  [data-title]:not([data-title=""]).verbose-tooltip:after {
    width: 11em;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content; }
  [data-title]:not([data-title=""]):after {
    background: #000;
    border-radius: 4px;
    color: #fff;
    cursor: default;
    font-size: 1.2rem;
    font-weight: bold;
    font-style: normal;
    line-height: 1.2;
    text-align: left;
    content: attr(data-title);
    display: block;
    margin-bottom: 0.2em;
    position: absolute;
    bottom: 100%;
    opacity: 0;
    overflow: hidden;
    max-width: 11em;
    max-height: 0;
    z-index: 500; }
  [data-title]:not([data-title=""]):hover:after {
    border: 1px solid rgba(255, 255, 255, 0.5);
    opacity: .85;
    padding: 0.5em;
    max-height: 10em; }

/**
 *
 * CSS value variables
 *
 */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
body {
  font-family: sans-serif;
  margin: 0;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

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

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden],
template {
  display: none; }

a {
  background-color: transparent; }

a:active,
a:hover {
  outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 1em 40px; }

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

pre {
  overflow: auto; }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0; }

button {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled],
html input[disabled] {
  cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

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

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

/*! end normalize.css */
/**
 *
 * Vendor css for custom range sliders
 * ex. /student-loan-calculator/
 *
 */
/* https://github.com/andreruffert/rangeslider.js
   ========================================================================== */
.rangeslider,
.rangeslider__fill {
  display: block;
  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; }

.rangeslider {
  background: #e6e6e6;
  position: relative; }

.rangeslider--horizontal {
  height: 10px;
  width: 100%; }

.rangeslider--vertical {
  width: 20px;
  min-height: 150px;
  max-height: 100%; }

.rangeslider--disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4; }

.rangeslider__fill {
  background: #15c0f1;
  position: absolute; }

.rangeslider--horizontal .rangeslider__fill {
  top: 0;
  height: 100%; }

.rangeslider--vertical .rangeslider__fill {
  bottom: 0;
  width: 100%; }

.rangeslider__handle {
  background: white;
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  width: 27px;
  height: 27px;
  position: absolute;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g");
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%; }
  @media (max-width: 759px) {
    .rangeslider__handle {
      width: 34px;
      height: 34px; } }

.rangeslider__handle:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
  background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%; }

.rangeslider__handle:active {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)));
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12)); }

.rangeslider--horizontal .rangeslider__handle {
  top: -10px;
  touch-action: pan-y;
  -ms-touch-action: pan-y; }

.rangeslider--vertical .rangeslider__handle {
  left: -10px;
  touch-action: pan-x;
  -ms-touch-action: pan-x; }

input[type="range"]:focus + .rangeslider .rangeslider__handle {
  -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); }

input[type="radio"] {
  cursor: pointer;
  position: absolute;
  z-index: 100;
  opacity: 0;
  filter: alpha(opacity=0); }

input[type="radio"] + label {
  position: relative;
  display: block;
  padding: 0 0 0 12px;
  font-size: 16px;
  top: 0px;
  margin-left: 15px;
  line-height: 25px;
  cursor: pointer;
  height: 40px; }
  @media (max-width: 759px) {
    input[type="radio"] + label {
      padding-left: 12px;
      font-size: 14px; } }

input[type="radio"] + label:before {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  height: 16px;
  left: -10px;
  width: 16px;
  background: #eae9e9;
  border: 1px solid #eae9e9;
  -webkit-box-shadow: inset 0px 0px 0px 2px white;
  -moz-box-shadow: inset 0px 0px 0px 2px white;
  box-shadow: inset 0px 0px 0px 2px white;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */ }
  @media (max-width: 759px) {
    input[type="radio"] + label:before {
      top: 0;
      left: -15px;
      height: 22px;
      width: 22px;
      -webkit-border-radius: 12px;
      border-radius: 12px;
      background-clip: padding-box;
      /* stops bg color from leaking outside the border: */ } }

input[type="radio"]:checked + label:before {
  background: #15c0f1; }

/**
 *
 * SoFi Wordpress button style override
 *
 */
.btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  background-color: #15c0f1;
  border: 2px solid transparent;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "Gotham Bold", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  padding: 10px 13px;
  text-decoration: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
  /*  @include media($tablet) {
    font-size: 13px;
    padding: 13px 18px;
  }*/ }
  .btn:hover, .btn:focus, .btn.active {
    background-color: transparent;
    color: #15c0f1;
    border: 2px solid #15c0f1;
    overflow: hidden; }
  .btn:active {
    opacity: 0.7; }
  .btn:disabled {
    cursor: not-allowed;
    opacity: 0.5; }

/**
 *
 * SoFi Wordpress button style override
 *
 */
.btn-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  background-color: #666;
  border: 2px solid transparent;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "Gotham Bold", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  padding: 10px 13px;
  text-decoration: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
  /*  @include media($tablet) {
    font-size: 13px;
    padding: 13px 18px;
  }*/ }
  .btn-select:hover, .btn-select:focus, .btn-select.active {
    background-color: #15c0f1;
    color: #FFF;
    border: 2px solid #15c0f1;
    overflow: hidden; }
  .btn-select:active {
    opacity: 0.7; }
  .btn-select:disabled {
    cursor: not-allowed;
    opacity: 0.5; }

/**
 * SoFi Wordpress styles override
 * Base settings for typographic elements
 *
 */
/* Web fonts
    ========================================================================== */
@font-face {
  font-family: 'Larsseit';
  src: url("../fonts/larsseit.woff2") format("woff2"), url("../fonts/larsseit.woff") format("woff"), url("../fonts/larsseit.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Larsseit-Bold';
  src: url("../fonts/larsseit-bold.woff2") format("woff2"), url("../fonts/larsseit-bold.woff") format("woff"), url("../fonts/larsseit-bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Gotham Bold';
  src: url("../fonts/gothambold-webfont.woff2") format("woff2"), url("../fonts/gothambold-webfont.woff") format("woff"), url("../fonts/gothambold-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

/* Prevent FOIT (flash of unstyled text)
    https://www.filamentgroup.com/lab/font-events.html
    See src/js/custom.js for implementation
    ========================================================================== */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.l-hero .section__heading,
.l-hero .section__subheading {
  font-family: sans-serif; }

.fonts-loaded body {
  font-family: "Larsseit", Helvetica, Arial, "Lucida Grande", sans-serif; }

.fonts-loaded h1,
.fonts-loaded h2,
.fonts-loaded h3,
.fonts-loaded h4,
.fonts-loaded h5,
.fonts-loaded h6 {
  font-family: "Gotham Bold", Helvetica, Arial, "Lucida Grande", sans-serif; }

.fonts-loaded .l-hero .section__heading,
.fonts-loaded .l-hero .section__subheading {
  font-family: "Larsseit-Bold", Helvetica, Arial, "Lucida Grande", sans-serif; }

/* Global
    ========================================================================== */
body {
  -webkit-font-feature-settings: "kern", "liga", "pnum";
  -moz-font-feature-settings: "kern", "liga", "pnum";
  -ms-font-feature-settings: "kern", "liga", "pnum";
  font-feature-settings: "kern", "liga", "pnum";
  -webkit-font-smoothing: antialiased;
  color: #5b5b5b;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
  font-family: "Larsseit", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 590; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 0.7em;
  letter-spacing: 0;
  font-weight: 600;
  font-family: "Gotham Bold", Helvetica, Arial, "Lucida Grande", sans-serif; }

p {
  margin: 0 0 0.7em;
  line-height: 1.5; }

a {
  color: #15c0f1;
  text-decoration: none;
  transition: color 0.1s linear; }
  a:active, a:focus, a:hover {
    color: #119ac1; }
  a:active, a:focus {
    outline: none; }

_ hr {
  border-bottom: 1px solid #cccccc;
  border-left: none;
  border-right: none;
  border-top: none;
  margin: 1.4em 0; }

img,
picture {
  margin: 0;
  max-width: 100%; }

sub,
sup {
  position: relative;
  vertical-align: baseline;
  line-height: 0; }
  sub a,
  sup a {
    color: inherit; }

sub {
  font-size: 50%;
  font-weight: normal; }

sup {
  top: -0.8em;
  font-size: 60%;
  font-weight: 900; }
  sup a {
    text-decoration: underline; }

/*-- Chart --*/
.c3 svg {
  font: 10px sans-serif;
  -webkit-tap-highlight-color: transparent; }

.c3 path, .c3 line {
  fill: none;
  stroke: #000; }

.c3 text {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
  shape-rendering: crispEdges; }

.c3-chart-arc path {
  stroke: #fff; }

.c3-chart-arc text {
  fill: #fff;
  font-size: 13px; }

/*-- Axis --*/
/*-- Grid --*/
.c3-grid line {
  stroke: #aaa; }

.c3-grid text {
  fill: #aaa; }

.c3-xgrid, .c3-ygrid {
  stroke-dasharray: 3 3; }

/*-- Text on Chart --*/
.c3-text.c3-empty {
  fill: #808080;
  font-size: 2em; }

/*-- Line --*/
.c3-line {
  stroke-width: 1px; }

/*-- Point --*/
.c3-circle._expanded_ {
  stroke-width: 1px;
  stroke: white; }

.c3-selected-circle {
  fill: white;
  stroke-width: 2px; }

/*-- Bar --*/
.c3-bar {
  stroke-width: 0; }

.c3-bar._expanded_ {
  fill-opacity: 0.75; }

/*-- Focus --*/
.c3-target.c3-focused {
  opacity: 1; }

.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
  stroke-width: 2px; }

.c3-target.c3-defocused {
  opacity: 0.3 !important; }

/*-- Region --*/
.c3-region {
  fill: steelblue;
  fill-opacity: .1; }

/*-- Brush --*/
.c3-brush .extent {
  fill-opacity: .1; }

/*-- Select - Drag --*/
/*-- Legend --*/
.c3-legend-item {
  font-size: 12px; }

.c3-legend-item-hidden {
  opacity: 0.15; }

.c3-legend-background {
  opacity: 0.75;
  fill: white;
  stroke: lightgray;
  stroke-width: 1; }

/*-- Title --*/
.c3-title {
  font: 14px sans-serif; }

/*-- Tooltip --*/
.c3-tooltip-container {
  z-index: 10; }

.c3-tooltip {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  empty-cells: show;
  -webkit-box-shadow: 7px 7px 12px -9px #777777;
  -moz-box-shadow: 7px 7px 12px -9px #777777;
  box-shadow: 7px 7px 12px -9px #777777;
  opacity: 0.9; }

.c3-tooltip tr {
  border: 1px solid #CCC; }

.c3-tooltip th {
  background-color: #aaa;
  font-size: 14px;
  padding: 2px 5px;
  text-align: left;
  color: #FFF; }

.c3-tooltip td {
  font-size: 13px;
  padding: 3px 6px;
  background-color: #fff;
  border-left: 1px dotted #999; }

.c3-tooltip td > span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px; }

.c3-tooltip td.value {
  text-align: right; }

/*-- Area --*/
.c3-area {
  stroke-width: 0;
  opacity: 0.2; }

/*-- Arc --*/
.c3-chart-arcs-title {
  dominant-baseline: middle;
  font-size: 1.3em; }

.c3-chart-arcs .c3-chart-arcs-background {
  fill: #e0e0e0;
  stroke: none; }

.c3-chart-arcs .c3-chart-arcs-gauge-unit {
  fill: #000;
  font-size: 16px; }

.c3-chart-arcs .c3-chart-arcs-gauge-max {
  fill: #777; }

.c3-chart-arcs .c3-chart-arcs-gauge-min {
  fill: #777; }

.c3-chart-arc .c3-gauge-value {
  fill: #000;
  /*  font-size: 28px !important;*/ }

.mortgage-calculator {
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  min-width: 320px;
  max-width: 1280px;
  margin: 0 auto; }
  .mortgage-calculator .bigger-label {
    width: -moz-calc(100% + 10px);
    width: -webkit-calc(100% + 10px);
    width: calc(100% + 10px); }
  .mortgage-calculator .hide {
    display: none; }
  .mortgage-calculator .pv-slider-wrapper {
    padding-top: 4px;
    padding-bottom: 30px; }
  .mortgage-calculator .dp-slider-wrapper {
    padding-top: 18px;
    padding-bottom: 30px; }
  .mortgage-calculator .additional-payment-wrapper {
    padding-top: 35px; }
  .mortgage-calculator .col--form {
    padding-top: 15px; }
    @media (max-width: 759px) {
      .mortgage-calculator .col--form {
        padding-top: 0px; } }
    .mortgage-calculator .col--form .radio-container {
      padding-bottom: 8px; }
    .mortgage-calculator .col--form .form-step-list .md-input-container .double-space {
      height: 2em; }
    .mortgage-calculator .col--form .form-step-list .md-input-container .error-label {
      padding-top: .2em;
      color: #f2705d;
      font-size: 0.87em; }
    .mortgage-calculator .col--form .form-step-list .md-input-container .percent-icon-wrapper {
      position: absolute;
      right: 0.7em; }
      .mortgage-calculator .col--form .form-step-list .md-input-container .percent-icon-wrapper.top {
        top: 1.15em; }
        @media (max-width: 759px) {
          .mortgage-calculator .col--form .form-step-list .md-input-container .percent-icon-wrapper.top {
            top: 1.33em; } }
      .mortgage-calculator .col--form .form-step-list .md-input-container .percent-icon-wrapper.bottom {
        right: 0.1em;
        bottom: 0.4em; }
    .mortgage-calculator .col--form .form-step-list .md-input-container .dollar-icon-wrapper {
      position: absolute;
      top: 1.15em;
      left: 0; }
      @media (max-width: 759px) {
        .mortgage-calculator .col--form .form-step-list .md-input-container .dollar-icon-wrapper {
          top: 1.33em; } }
    @media (max-width: 759px) {
      .mortgage-calculator .col--form .form-step-list .md-input-container label {
        font-size: 19px; } }
    .mortgage-calculator .col--form .form-step-list .md-input-container input[type="text"], .mortgage-calculator .col--form .form-step-list .md-input-container input[type="number"] {
      font-size: 1.30em; }
      .mortgage-calculator .col--form .form-step-list .md-input-container input[type="text"].dollar-input, .mortgage-calculator .col--form .form-step-list .md-input-container input[type="number"].dollar-input {
        padding-left: 1em !important; }
  @media (max-width: 759px) {
    .mortgage-calculator .col--summary {
      margin-top: 6px !important; } }
  .mortgage-calculator .col--summary .summary-wrapper {
    width: 100%;
    height: 100%;
    background: #f6f6f6;
    padding-top: 15px; }
    .mortgage-calculator .col--summary .summary-wrapper .summary {
      width: 100%;
      padding-right: 25px;
      padding-left: 25px; }
      .mortgage-calculator .col--summary .summary-wrapper .summary .header--summary {
        font-size: 1.6rem !important;
        font-family: sans-serif;
        font-weight: 600;
        margin-bottom: 10px; }
        @media (max-width: 759px) {
          .mortgage-calculator .col--summary .summary-wrapper .summary .header--summary {
            margin-bottom: 5px;
            font-size: 1.7rem; } }
      .mortgage-calculator .col--summary .summary-wrapper .summary .bottom-border {
        border-bottom: 2px solid #AAA; }
      .mortgage-calculator .col--summary .summary-wrapper .summary .row {
        width: 100%;
        position: relative;
        padding-top: 10px; }
        .mortgage-calculator .col--summary .summary-wrapper .summary .row .label {
          top: 0px;
          padding-left: 5px;
          padding-bottom: 8px;
          font-weight: 680; }
        .mortgage-calculator .col--summary .summary-wrapper .summary .row .value {
          position: absolute;
          top: 10px;
          right: 5px;
          color: #15c0f1;
          font-weight: 700; }
      .mortgage-calculator .col--summary .summary-wrapper .summary #chart {
        margin-left: -10px;
        margin-top: -5px;
        height: 220px; }
      .mortgage-calculator .col--summary .summary-wrapper .summary .c3-line {
        stroke-width: 2px; }
      .mortgage-calculator .col--summary .summary-wrapper .summary .c3 .c3-axis-x path, .mortgage-calculator .col--summary .summary-wrapper .summary .c3 .c3-axis-x line {
        stroke: #f6f6f6; }
      .mortgage-calculator .col--summary .summary-wrapper .summary .c3 .c3-axis-y path, .mortgage-calculator .col--summary .summary-wrapper .summary .c3 .c3-axis-y line {
        stroke: #f6f6f6; }
      .mortgage-calculator .col--summary .summary-wrapper .summary tspan {
        color: #888;
        stroke: #777;
        font-size: 10px; }
      .mortgage-calculator .col--summary .summary-wrapper .summary .legend-wrapper .legend {
        cursor: pointer;
        cursor: hand;
        width: 100%;
        height: 30px;
        padding-top: 5px; }
        .mortgage-calculator .col--summary .summary-wrapper .summary .legend-wrapper .legend div {
          float: right;
          width: 33%;
          text-align: center; }
          @media (max-width: 759px) {
            .mortgage-calculator .col--summary .summary-wrapper .summary .legend-wrapper .legend div {
              font-size: 13px; } }
        .mortgage-calculator .col--summary .summary-wrapper .summary .legend-wrapper .legend span {
          display: inline-block;
          margin-left: 7px;
          margin-right: 7px;
          padding: 5px; }
    .mortgage-calculator .col--summary .summary-wrapper .cta-wrapper {
      margin-top: 5px;
      width: 100%;
      height: 60px;
      background-color: #2FA0d9;
      padding-top: 17px;
      color: #FFF;
      font-weight: bold;
      font-size: 1.4em;
      text-align: center; }
      .mortgage-calculator .col--summary .summary-wrapper .cta-wrapper .cta-label {
        position: relative;
        padding-right: 14px;
        font-size: 20px; }
        @media (max-width: 759px) {
          .mortgage-calculator .col--summary .summary-wrapper .cta-wrapper .cta-label {
            font-size: 16px;
            top: -2px;
            padding-bottom: 39px; } }
      .mortgage-calculator .col--summary .summary-wrapper .cta-wrapper button {
        margin-top: -6px;
        background: #9ccb3b;
        font-weight: normal; }
        .mortgage-calculator .col--summary .summary-wrapper .cta-wrapper button:hover {
          background-color: transparent;
          border-color: #FFF;
          color: #FFF; }