@import url(//fast.fonts.net/t/1.css?apiType=css&projectid=44e8c964-4684-44c6-a6e3-3f3da8787b50);
/* ==========================================================================
   Capital Framework
   Button Styling
   ========================================================================== */
/* topdoc
    name: Less notes
    family: cf-buttons
    patterns:
    - name: Variables
      codenotes:
        - "@btn-font-size: 14px;"
        - "@btn-v-padding: 9px;"
        - "@btn-v-padding-modifier-ie: .8;"
      notes:
        - "@btn-v-padding-modifier-ie is used to fix the vertical padding bug in
           IE for <button>'s and <inputs>'s across various .btn styles.
           We should revisit this after adding normalize.css to see if this is
           still needed."
    tags:
    - cf-buttons
    - less
*/
/* topdoc
    name: Default button
    family: cf-buttons
    notes:
      - "Note that the .visited, .hover, .focus, .active classes are for
         demonstration purposes only and should not be used in production."
    patterns:
    - name: Default state
      markup: |
        <a href="#" class="btn">Anchor Tag</a>
        <button class="btn">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn">
    - name: Hovered state
      markup: |
        <a href="#" class="btn hover">Anchor Tag</a>
        <button class="btn hover">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn hover">
    - name: Focused state
      markup: |
        <a href="#" class="btn focus">Anchor Tag</a>
        <button class="btn focus">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn focus">
    - name: Active state
      markup: |
        <a href="#" class="btn active">Anchor Tag</a>
        <button class="btn active">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn active">
    tags:
    - cf-buttons
*/
.btn {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.57142857em 1em;
  border: 0;
  border-radius: 0.28571429em;
  margin: 0;
  vertical-align: middle;
  font-family: "AvenirNextLTW01-Medium", Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.875em;
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: .1s;
  transition: .1s;
  -webkit-appearance: none;
}
.lt-ie9 .btn {
  font-weight: normal !important;
}
.btn,
.btn:link,
.btn:visited {
  background-color: #0072ce;
  color: #ffffff;
}
.btn:hover,
.btn.hover {
  background-color: #328ed8;
}
.btn:focus,
.btn.focus {
  background-color: #328ed8;
  outline: 1px dotted #0072ce;
  outline-offset: 1px;
}
.btn:active,
.btn.active {
  background-color: #33578e;
}
button.btn::-moz-focus-inner,
input.btn::-moz-focus-inner {
  border: 0;
}
.btn + .btn {
  margin-left: 0.42857143em;
}
.lt-ie8 {
  background: url(null) fixed no-repeat;
}
.lt-ie8 button.btn,
.lt-ie8 input.btn {
  overflow: visible;
  padding-top: 0.45714286em;
  padding-bottom: 0.45714286em;
}
/* topdoc
    name: Secondary button
    family: cf-buttons
    notes:
      - "Note that the .visited, .hover, .focus, .active classes are for
         demonstration purposes only and should not be used in production."
    patterns:
    - name: Default state
      markup: |
        <a href="#" class="btn btn__secondary">Anchor Tag</a>
        <button class="btn btn__secondary">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn btn__secondary">
    - name: Hovered state
      markup: |
        <a href="#" class="btn btn__secondary hover">Anchor Tag</a>
        <button class="btn btn__secondary hover">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn btn__secondary hover">
    - name: Focused state
      markup: |
        <a href="#" class="btn btn__secondary focus">Anchor Tag</a>
        <button class="btn btn__secondary focus">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn btn__secondary focus">
    - name: Active state
      markup: |
        <a href="#" class="btn btn__secondary active">Anchor Tag</a>
        <button class="btn btn__secondary active">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn btn__secondary active">
    tags:
    - cf-buttons
*/
.btn__secondary,
.btn__secondary:link,
.btn__secondary:visited {
  background-color: #75787b;
  color: #ffffff;
}
.btn__secondary:hover,
.btn__secondary.hover {
  background-color: #919395;
}
.btn__secondary:focus,
.btn__secondary.focus {
  background-color: #919395;
  outline-color: #75787b;
}
.btn__secondary:active,
.btn__secondary.active {
  background-color: #43484e;
}
/* topdoc
    name: Destructive action button
    family: cf-buttons
    notes:
      - "Note that the .visited, .hover, .focus, .active classes are for
         demonstration purposes only and should not be used in production."
    patterns:
    - name: Default state
      markup: |
        <a href="#" class="btn btn__warning">Anchor Tag</a>
        <button class="btn btn__warning">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn btn__warning">
    - name: Hovered state
      markup: |
        <a href="#" class="btn btn__warning hover">Anchor Tag</a>
        <button class="btn btn__warning hover">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn btn__warning hover">
    - name: Focused state
      markup: |
        <a href="#" class="btn btn__warning focus">Anchor Tag</a>
        <button class="btn btn__warning focus">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn btn__warning focus">
    - name: Active state
      markup: |
        <a href="#" class="btn btn__warning active">Anchor Tag</a>
        <button class="btn btn__warning active">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn btn__warning active">
    tags:
    - cf-buttons
*/
.btn__warning,
.btn__warning:link,
.btn__warning:visited {
  background-color: #d12124;
  color: #ffffff;
}
.btn__warning:hover,
.btn__warning.hover {
  background-color: #da6750;
}
.btn__warning:focus,
.btn__warning.focus {
  background-color: #da6750;
  outline-color: #d12124;
}
.btn__warning:active,
.btn__warning.active {
  background-color: #9c301b;
}
/* topdoc
    name: Disabled button
    family: cf-buttons
    notes:
      - "Note that the .visited, .hover, .focus, .active classes are for
         demonstration purposes only and should not be used in production."
    patterns:
    - name: Default/hovered/focused/active state
      markup: |
        <a href="#" class="btn btn__disabled">Anchor Tag</a>
        <button class="btn btn__disabled">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn btn__disabled">
    - name: Default/hovered/active state
      markup: |
        <a href="#" class="btn btn__disabled">Anchor Tag</a>
        <button class="btn btn__disabled">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn btn__disabled">
    - name: Focused state
      markup: |
        <a href="#" class="btn btn__disabled focus">Anchor Tag</a>
        <button class="btn btn__disabled focus">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn btn__disabled focus">
    tags:
    - cf-buttons
*/
.btn__disabled,
.btn__disabled:link,
.btn__disabled:visited,
.btn__disabled:hover,
.btn__disabled.hover,
.btn__disabled:focus,
.btn__disabled.focus,
.btn__disabled:active,
.btn__disabled.active {
  background-color: #e3e4e5;
  color: #75787b;
  cursor: default;
  cursor: not-allowed;
}
.btn__disabled:focus,
.btn__disabled.focus {
  outline-color: #75787b;
}
/* topdoc
    name: Super button
    family: cf-buttons
    patterns:
    - name: Default state
      markup: |
        <a href="#" class="btn btn__super">Anchor Tag</a>
        <button class="btn btn__super">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn btn__super">
    - name: Hovered state
      markup: |
        <a href="#" class="btn btn__super hover">Anchor Tag</a>
        <button class="btn btn__super hover">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn btn__super hover">
    - name: Focused state
      markup: |
        <a href="#" class="btn btn__super focus">Anchor Tag</a>
        <button class="btn btn__super focus">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn btn__super focus">
    - name: Active state
      markup: |
        <a href="#" class="btn btn__super active">Anchor Tag</a>
        <button class="btn btn__super active">Button Tag</button>
        <input type="submit" value="Input Tag" class="btn btn__super active">
    tags:
    - cf-buttons
*/
.btn__super {
  padding: 0.61111111em 1.61111111em;
  font-size: 1.125em;
}
.btn__super + .btn__super {
  margin-left: 0.33333333em;
}
.lt-ie8 button.btn__super,
.lt-ie8 input.btn__super {
  padding-top: 0.66666667em;
  padding-bottom: 0.66666667em;
}
/* topdoc
    name: Button with icons
    family: cf-buttons
    patterns:
    - name: Button icon left
      markup: |
        <a href="#" class="btn">
            <span class="btn_icon__left cf-icon cf-icon-left"></span>
            Anchor Tag
        </a>
        <button class="btn">
            <span class="btn_icon__left cf-icon cf-icon-left"></span>
            Button Tag
        </button>
    - name: Button icon right
      markup: |
        <a href="#" class="btn">
            Anchor Tag
            <span class="btn_icon__right cf-icon cf-icon-right"></span>
        </a>
        <button class="btn">
            Button Tag
            <span class="btn_icon__right cf-icon cf-icon-right"></span>
        </button>
    - name: Just an icon
      markup: |
        <a href="#" class="btn">
            <span class="u-visually-hidden">Search</span>
            <span class="cf-icon cf-icon-search"></span>
        </a>
        <button class="btn">
            <span class="u-visually-hidden">Search</span>
            <span class="cf-icon cf-icon-search"></span>
        </button>
      notes:
        - "For accessibility please use the .u-visually-hidden utility class
           to add hidden text for screen readers."
    tags:
    - cf-buttons
    - fj-icons
*/
.btn_icon__left {
  padding: 0 0.75em 0 0;
  border-right: 1px solid #ffffff;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  margin: 0 0.5em 0 0;
}
.btn__disabled .btn_icon__left {
  border-right-color: #babbbd;
}
.btn_icon__right {
  padding: 0 0 0 0.75em;
  border-right: 0;
  border-left: 1px solid #ffffff;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  margin: 0 0 0 0.5em;
}
.btn__disabled .btn_icon__right {
  border-left-color: #babbbd;
}
/* topdoc
    name: Button group modifiers
    family: cf-buttons
    patterns:
    - name: Default buttons in a button group
      markup: |
        <a href="#" class="btn btn__grouped-first">Anchor 1</a>
        <a href="#" class="btn btn__grouped">Anchor 2</a>
        <a href="#" class="btn btn__grouped-last">Anchor 3</a>
        <br>
        <br>
        <button class="btn btn__grouped-first">Button 1</button>
        <button class="btn btn__grouped">Button 2</button>
        <button class="btn btn__grouped-last">Button 3</button>
        <br>
        <br>
        <input type="button" value="Input 1" class="btn btn__grouped-first">
        <input type="button" value="Input 2" class="btn btn__grouped">
        <input type="button" value="Input 3" class="btn btn__grouped-last">
    - name: Super buttons in a button group
      markup: |
        <a href="#" class="btn btn__grouped-first btn__super">Anchor 1</a>
        <a href="#" class="btn btn__grouped btn__super">Anchor 2</a>
        <a href="#" class="btn btn__grouped-last btn__super">Anchor 3</a>
        <br>
        <br>
        <button class="btn btn__grouped-first btn__super">Button 1</button>
        <button class="btn btn__grouped btn__super">Button 2</button>
        <button class="btn btn__grouped-last btn__super">Button 3</button>
        <br>
        <br>
        <input type="button" value="Input 1" class="btn btn__grouped-first btn__super">
        <input type="button" value="Input 2" class="btn btn__grouped btn__super">
        <input type="button" value="Input 3" class="btn btn__grouped-last btn__super">
    tags:
    - cf-buttons
*/
.btn__grouped {
  border-radius: 0;
}
.btn__grouped-first {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn__grouped-last {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn__grouped-first + .btn__grouped,
.btn__grouped-first + .btn__grouped-last,
.btn__grouped,
.btn__grouped + .btn__grouped,
.btn__grouped-last,
.btn__grouped + .btn__grouped-last {
  margin-left: -0.21428571em;
}
.btn__grouped-first.btn__super + .btn__grouped.btn__super,
.btn__grouped-first.btn__super + .btn__grouped-last.btn__super,
.btn__grouped.btn__super,
.btn__grouped-last.btn__super,
.btn__grouped.btn__super + .btn__grouped.btn__super,
.btn__grouped.btn__super + .btn__grouped-last.btn__super {
  margin-left: -0.16666667em;
}
/* topdoc
    name: Compound button
    family: cf-buttons
    notes:
      - "This pattern requires combining .btn__grouped modifiers with
         the .btn__compound-action modifier."
      - "Note that the .visited, .hover, .focus, .active classes are for
         demonstration purposes only and should not be used in production."
    patterns:
    - name: Default button style
      markup: |
        <a href="#" class="btn btn__grouped-first">Anchor</a>
        <a href="#" class="btn btn__grouped-last btn__compound-action">
            <span class="cf-icon cf-icon-down btn__grouped-last"></span>
        </a>
        <br>
        <br>
        <button class="btn btn__grouped-first">Button</button>
        <button class="btn btn__grouped-last btn__compound-action">
            <span class="cf-icon cf-icon-down btn__grouped-last"></span>
        </button>
    - name: Secondary button style
      markup: |
        <a href="#" class="btn btn__grouped-first btn__secondary">Anchor</a>
        <a href="#" class="btn btn__grouped-last btn__secondary btn__compound-action">
            <span class="cf-icon cf-icon-down btn__grouped-last"></span>
        </a>
        <br>
        <br>
        <button class="btn btn__grouped-first btn__secondary">Button</button>
        <button class="btn btn__grouped-last btn__secondary btn__compound-action">
            <span class="cf-icon cf-icon-down btn__grouped-last"></span>
        </button>
    - name: Super button style
      markup: |
        <a href="#" class="btn btn__grouped-first btn__super">Anchor</a>
        <a href="#" class="btn btn__grouped-last btn__super btn__compound-action">
            <span class="cf-icon cf-icon-down btn__grouped-last"></span>
        </a>
        <br>
        <br>
        <button class="btn btn__grouped-first btn__super">Button</button>
        <button class="btn btn__grouped-last btn__super btn__compound-action">
            <span class="cf-icon cf-icon-down btn__grouped-last"></span>
        </button>
    tags:
    - cf-buttons
    - fj-icons
*/
.btn__compound-action,
.btn__compound-action:link,
.btn__compound-action:visited {
  background-color: #328ed8;
}
.btn__compound-action:hover,
.btn__compound-action:focus,
.btn__compound-action.hover {
  background-color: #0072ce;
}
.btn__compound-action.btn__secondary {
  background-color: #919395;
}
.btn__compound-action.btn__secondary:hover,
.btn__compound-action.btn__secondary:focus,
.btn__compound-action.btn__secondary.hover {
  background-color: #75787b;
}
.btn__compound-action.btn__super {
  padding-left: 1.22222222em;
  padding-right: 1.22222222em;
}
/* topdoc
    name: Button link
    family: cf-buttons
    notes:
      - "Note that the .visited, .hover, .focus, .active classes are for
         demonstration purposes only and should not be used in production."
    patterns:
    - name: Default state
      markup: |
        <a href="#" class="btn btn__link">Anchor Tag</a>
        <button class="btn btn__link">Button Tag</button>
        <input type="button" value="Input Tag" class="btn btn__link">
    - name: Hovered state
      markup: |
        <a href="#" class="btn btn__link hover">Anchor Tag</a>
        <button class="btn btn__link hover">Button Tag</button>
        <input type="button" value="Input Tag" class="btn btn__link hover">
    - name: Focused state
      markup: |
        <a href="#" class="btn btn__link focus">Anchor Tag</a>
        <button class="btn btn__link focus">Button Tag</button>
        <input type="button" value="Input Tag" class="btn btn__link focus">
    - name: Active state
      markup: |
        <a href="#" class="btn btn__link active">Anchor Tag</a>
        <button class="btn btn__link active">Button Tag</button>
        <input type="button" value="Input Tag" class="btn btn__link active">
    tags:
    - cf-buttons
*/
.btn__link {
  padding: 0;
  border-bottom: 1px dotted #0072ce;
  border-radius: 0;
  margin: 0.57142857em 0;
}
.btn__link,
.btn__link:link,
.btn__link:visited {
  background-color: transparent;
  color: #0072ce;
}
.btn__link:hover,
.btn__link.hover {
  border-bottom: 1px solid #7fb8e6;
  background-color: transparent;
  color: #7fb8e6;
}
.btn__link:focus,
.btn__link.focus {
  border-bottom-style: solid;
  background-color: transparent;
  outline: thin dotted #0072ce;
}
.btn__link:active,
.btn__link.active {
  border-bottom: 1px solid #002d72;
  background-color: transparent;
  color: #002d72;
}
.lt-ie8 button.btn__link,
.lt-ie8 input.btn__link {
  padding: 0;
}
/* topdoc
    name: Secondary button link
    family: cf-buttons
    notes:
      - "Note that the .visited, .hover, .focus, .active classes are for
         demonstration purposes only and should not be used in production."
    patterns:
    - name: Default state
      markup: |
        <a href="#" class="btn btn__link btn__secondary">Anchor Tag</a>
        <button class="btn btn__link btn__secondary">Button Tag</button>
        <input type="button" value="Input Tag" class="btn btn__link btn__secondary">
    - name: Hovered state
      markup: |
        <a href="#" class="btn btn__link btn__secondary hover">Anchor Tag</a>
        <button class="btn btn__link btn__secondary hover">Button Tag</button>
        <input type="button" value="Input Tag" class="btn btn__link btn__secondary hover">
    - name: Focused state
      markup: |
        <a href="#" class="btn btn__link btn__secondary focus">Anchor Tag</a>
        <button class="btn btn__link btn__secondary focus">Button Tag</button>
        <input type="button" value="Input Tag" class="btn btn__link btn__secondary focus">
    - name: Active state
      markup: |
        <a href="#" class="btn btn__link btn__secondary active">Anchor Tag</a>
        <button class="btn btn__link btn__secondary active">Button Tag</button>
        <input type="button" value="Input Tag" class="btn btn__link btn__secondary active">
    tags:
    - cf-buttons
*/
.btn__link.btn__secondary,
.btn__link.btn__secondary:link,
.btn__link.btn__secondary:visited {
  border-bottom-color: #75787b;
  background-color: transparent;
  color: #75787b;
}
.btn__link.btn__secondary:hover,
.btn__link.btn__secondary.hover {
  border-bottom-color: #43484e;
  color: #43484e;
}
.btn__link.btn__secondary:focus,
.btn__link.btn__secondary.focus {
  outline-color: #75787b;
}
.btn__link.btn__secondary:active,
.btn__link.btn__secondary.active {
  border-bottom-color: #101820;
  color: #101820;
}
/* topdoc
    name: Destructive action button link
    family: cf-buttons
    notes:
      - "Note that the .visited, .hover, .focus, .active classes are for
         demonstration purposes only and should not be used in production."
    patterns:
    - name: Default state
      markup: |
        <a href="#" class="btn btn__link btn__warning">Anchor Tag</a>
        <button class="btn btn__link btn__warning">Button Tag</button>
        <input type="button" value="Input Tag" class="btn btn__link btn__warning">
    - name: Hovered state
      markup: |
        <a href="#" class="btn btn__link btn__warning hover">Anchor Tag</a>
        <button class="btn btn__link btn__warning hover">Button Tag</button>
        <input type="button" value="Input Tag" class="btn btn__link btn__warning hover">
    - name: Focused state
      markup: |
        <a href="#" class="btn btn__link btn__warning focus">Anchor Tag</a>
        <button class="btn btn__link btn__warning focus">Button Tag</button>
        <input type="button" value="Input Tag" class="btn btn__link btn__warning focus">
    - name: Active state
      markup: |
        <a href="#" class="btn btn__link btn__warning active">Anchor Tag</a>
        <button class="btn btn__link btn__warning active">Button Tag</button>
        <input type="button" value="Input Tag" class="btn btn__link btn__warning active">
    tags:
    - cf-buttons
*/
.btn__link.btn__warning,
.btn__link.btn__warning:link,
.btn__link.btn__warning:visited {
  border-bottom-color: #d12124;
  background-color: transparent;
  color: #d12124;
}
.btn__link.btn__warning:hover,
.btn__link.btn__warning.hover {
  border-bottom-color: #da6750;
  color: #da6750;
}
.btn__link.btn__warning:focus,
.btn__link.btn__warning.focus {
  outline-color: #d12124;
}
.btn__link.btn__warning:active,
.btn__link.btn__warning.active {
  border-bottom-color: #9c301b;
  color: #9c301b;
}
/* topdoc
  name: EOF
  eof: true
*/
/* ==========================================================================
   Capital Framework
   Expandable Styling
   ========================================================================== */
/* topdoc
    name: Recommended expandable pattern
    family: cf-expandables
    notes:
      - "Expandables can be built by combining the basic barebones structure
         described in the next section along with more specialized expandable
         elements and modifiers described throughout."
      - "The following combination is our recommended go-to expandable pattern."
    patterns:
    - name: Recommended expandable pattern
      markup: |
        <div class="expandable expandable__padded">
            <button class="expandable_header expandable_target">
                <span class="expandable_header-left expandable_label">
                    Expandable Header
                </span>
                <span class="expandable_header-right expandable_link">
                    <span class="expandable_cue-open">
                        Show
                        <span class="cf-icon cf-icon-plus-round"></span>
                    </span>
                    <span class="expandable_cue-close">
                        Hide
                        <span class="cf-icon cf-icon-minus-round"></span>
                    </span>
                </span>
            </button>
            <div class="expandable_content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing
                    elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                    temporibus magnam debitis quidem. Ducimus ratione
                    corporis nesciunt earum vel est quaerat blanditiis
                    dolore ipsa?
                </p>
            </div>
        </div>
      codenotes:
        - |
          Pattern structure
          -----------------
          .expandable.expandable__padded
            .expandable_header.expandable_target
              .expandable_header-left.expandable_label
              .expandable_header-right.expandable_link
                .expandable_cue-open
                  .cf-icon.cf-icon-plus-round
                .expandable_cue-close
                  .cf-icon.cf-icon-minus-round
              .expandable_cue-open
              .expandable_cue-close
            .expandable_content
    tags:
    - cf-expandables
*/
/* topdoc
    name: JS functions
    family: cf-expandables
    notes:
      - "There are a number of available functions that you can call on
         .expandable elements."
    patterns:
    - name: .toggle()
      codenotes:
        - "Toggles the expandable."
    - name: .expand( duration )
      codenotes:
        - "Expands the expandable."
        - |
          duration
          Type: number
          The animation duration.
          Not required.
          Defaults to `$.fn.expandable.calculateExpandDuration` or
          `$.fn.expandable.calculateCollapseDuration` if excluded.
    - name: .collapse( duration )
      codenotes:
        - "Collapses the expandable."
        - |
          duration
          Type: number
          The animation duration.
          Not required.
          Defaults to `$.fn.expandable.calculateExpandDuration` or
          `$.fn.expandable.calculateCollapseDuration` if excluded.
    - name: Example usage
      codenotes:
        - |
          // HTML
          <div class="expandable" id="my-expandable">...</div>

          // JS
          // (use .get(0) to get the HTML element, that's what the functions
          // are bound to)
          $('#my-expandable').get(0).expand(); // Opens the expandable
          $('#my-expandable').get(0).collapse(); // Closes the expandable
          $('#my-expandable').get(0).toggle(); // Toggles the expandable
    tags:
    - cf-expandables
*/
/* topdoc
    name: Barebones expandable
    family: cf-expandables
    notes:
      - "This is the barebones structure for expandables that can be used (along
         with other expanable elements and modifiers) to create custom
         expandable patterns."
      - "In this barebones example there are no visual styles."
    patterns:
    - name: Barebones expandable
      markup: |
        <div class="expandable">
            <button class="expandable_target">
                <span class="expandable_cue-open">
                    Show
                </span>
                <span class="expandable_cue-close">
                    Hide
                </span>
            </button>
            <div class="expandable_content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing
                    elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                    temporibus magnam debitis quidem. Ducimus ratione
                    corporis nesciunt earum vel est quaerat blanditiis
                    dolore ipsa?
                </p>
            </div>
        </div>
      codenotes:
        - |
          Pattern structure
          -----------------
          .expandable
            .expandable_target
              .expandable_cue-open
              .expandable_cue-close
            .expandable_content
      notes:
        - "Use the button tag for the .expandable_target element to allow for
           keyboard access."
        - "The 'Show' and 'Hide' messages can be customized directly in the HTML
           by editing the contents of .expandable_cue-open and
           .expandable_cue-close."
        - "The aria-pressed attribute on .expandable_target gets automatically
           added and updated by JavaScript."
        - "The aria-expanded attribute on .expandable_content gets automatically
           added and updated by JavaScript."
    - name: .expandable__expanded (modifier)
      codenotes:
        - |
          .expandable__expanded
      notes:
        - "Sometimes you may want the expandable to be open by default. This
           is as easy as adding the .expandable__expanded modifier to the
           .expandable block."
    tags:
    - cf-expandables
*/
.expandable {
  margin-bottom: 1.875em;
}
.expandable_target {
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}
.expandable_target:focus {
  outline: 1px dotted #101820;
  outline-offset: 1px;
}
.expandable_content:after {
  content: "";
  display: table;
  clear: both;
}
.lt-ie8 .expandable_content {
  zoom: 1;
}
/* topdoc
    name: Expandable text elements
    family: cf-expandables
    patterns:
    - name: .expandable_label (element)
      codenotes:
        - |
          .expandable_label
      markup: |
        <span class="expandable_label">
            Lorem ipsum
        </span>
      notes:
        - "Allows you to add some styled text."
    - name: .expandable_link (element)
      markup: |
        <span class="expandable_link">
            Lorem ipsum
        </span>
      codenotes:
        - |
          .expandable_link
      notes:
        - "Allows you to add some styled text with a link-like look."
    tags:
    - cf-expandables
*/
.expandable_label {
  color: #101820;
  font-family: "AvenirNextLTW01-Medium", Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
}
.lt-ie9 .expandable_label {
  font-weight: normal !important;
}
.expandable_link {
  color: #0072ce;
  font-family: "AvenirNextLTW01-Regular", Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 0.875em;
  line-height: 1.57142857;
}
.expandable_link em,
.expandable_link i {
  font-family: "AvenirNextLTW01-Italic", Arial, sans-serif;
  font-style: italic;
  font-weight: normal;
}
.lt-ie9 .expandable_link em,
.lt-ie9 .expandable_link i {
  font-style: normal !important;
}
.expandable_link strong,
.expandable_link b {
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
}
.lt-ie9 .expandable_link strong,
.lt-ie9 .expandable_link b {
  font-weight: normal !important;
}
/* topdoc
    name: Animated cues
    family: cf-expandables
    patterns:
    - name: .expandable_cue-open/close__animated (modifier)
      codenotes:
        - |
          .expandable_cue-open__animated
          .expandable_cue-close__animated
      markup: |
        <div class="expandable">
            <button class="expandable_target">
                <span class="expandable_cue-open expandable_cue-open__animated">
                    <span class="cf-icon cf-icon-down"></span>
                </span>
                <span class="expandable_cue-close expandable_cue-close__animated">
                    <span class="cf-icon cf-icon-up"></span>
                </span>
            </button>
            <div class="expandable_content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing
                    elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                    temporibus magnam debitis quidem. Ducimus ratione
                    corporis nesciunt earum vel est quaerat blanditiis
                    dolore ipsa?
                </p>
            </div>
        </div>
        <div class="expandable expandable__expanded">
            <button class="expandable_target">
                <span class="expandable_cue-open expandable_cue-open__animated">
                    <span class="cf-icon cf-icon-down"></span>
                </span>
                <span class="expandable_cue-close expandable_cue-close__animated">
                    <span class="cf-icon cf-icon-up"></span>
                </span>
            </button>
            <div class="expandable_content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing
                    elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                    temporibus magnam debitis quidem. Ducimus ratione
                    corporis nesciunt earum vel est quaerat blanditiis
                    dolore ipsa?
                </p>
            </div>
        </div>
    tags:
    - cf-expandables
*/
.expandable_cue-open__animated,
.expandable_cue-close__animated {
  -webkit-transition: 0.25s -webkit-transform;
  transition: 0.25s transform;
}
.expandable_cue-close__animated {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.expandable__expanded .expandable_cue-close__animated {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}
.expandable__expanded .expandable_cue-open__animated {
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
/* topdoc
    name: Expandable header elements
    family: cf-expandables
    codenotes:
      - |
        Pattern structure
        -----------------
        .expandable_header
          .expandable_header-left
          .expandable_header-right
    notes:
      - "These additional elements are useful for more complicated expandables
         that need to convey more information than just 'Show/Hide' before the
         user expands it."
    patterns:
    - name: .expandable_header (element)
      codenotes:
        - |
          .expandable_header
      notes:
        - "Creates a full-width container to house information that is always
           visible."
        - "Combine .expandable_header with .expandable_target for a full-width
           trigger."
    - name: .expandable_header__spaced (modifier)
      codenotes:
        - |
          .expandable_header__spaced
      notes:
        - "Allows you to add space between .expandable_header and .expandable_content."
        - "Inline style usage is for demoing the space between the header and
           content and should not be used."
    - name: .expandable_header-left, .expandable_header-right (elements)
      codenotes:
        - |
          .expandable_header-left
          .expandable_header-right
      notes:
        - "Allows you to float information left and right."
    tags:
    - cf-expandables
*/
.expandable_header {
  display: block;
}
.expandable_header:after {
  content: "";
  display: table;
  clear: both;
}
.lt-ie8 .expandable_header {
  zoom: 1;
}
button.expandable_header {
  width: 100%;
  text-align: left;
}
.expandable_header__spaced {
  padding-bottom: 0.9375em;
}
.expandable_header-left {
  float: left;
}
.expandable_header-right {
  float: right;
}
/* topdoc
    name: Padded expandable modifier
    family: cf-expandables
    patterns:
    - name: .expandable__padded (modifier)
      codenotes:
        - |
          .expandable__padded
      notes:
        - "Adds padding and a background color to .expandable_header and
           .expandable_content."
        - "In addition to using the .expandable__padded modifier you also need
           to make sure you are using .expandable_header."
    tags:
    - cf-expandables
*/
.expandable__padded {
  margin-bottom: 1.875em;
  background: #f1f2f2;
}
.expandable__padded:hover,
.expandable__padded.expandable__expanded {
  background: #e3e4e5;
}
.expandable__padded .expandable_header {
  padding: 0.625em 1em;
}
.expandable__padded .expandable_content {
  margin: 0 1em 1.375em;
}
.expandable__padded .expandable_content:before {
  content: '';
  display: block;
  height: 1px;
  margin-bottom: 1em;
  background: #babbbd;
}
/* topdoc
    name: Expandable groups
    family: cf-expandables
    patterns:
    - name: Standard expandable group
      markup: |
        <div class="expandable-group">
            <div class="expandable-group_header">Expandable group header</div>
            <div class="expandable expandable__padded">
                <button class="expandable_header expandable_target">
                    <span class="expandable_header-left expandable_label">
                        Expandable Header 1
                    </span>
                    <span class="expandable_header-right expandable_link">
                        <span class="expandable_cue-open">
                            Show
                            <span class="cf-icon cf-icon-plus-round"></span>
                        </span>
                        <span class="expandable_cue-close">
                            Hide
                            <span class="cf-icon cf-icon-minus-round"></span>
                        </span>
                    </span>
                </button>
                <div class="expandable_content">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                        temporibus magnam debitis quidem. Ducimus ratione
                        corporis nesciunt earum vel est quaerat blanditiis
                        dolore ipsa?
                    </p>
                </div>
            </div>
            <div class="expandable expandable__padded">
                <button class="expandable_header expandable_target">
                    <span class="expandable_header-left expandable_label">
                        Expandable Header 2
                    </span>
                    <span class="expandable_header-right expandable_link">
                        <span class="expandable_cue-open">
                            Show
                            <span class="cf-icon cf-icon-plus-round"></span>
                        </span>
                        <span class="expandable_cue-close">
                            Hide
                            <span class="cf-icon cf-icon-minus-round"></span>
                        </span>
                    </span>
                </button>
                <div class="expandable_content">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                        temporibus magnam debitis quidem. Ducimus ratione
                        corporis nesciunt earum vel est quaerat blanditiis
                        dolore ipsa?
                    </p>
                </div>
            </div>
            <div class="expandable expandable__padded">
                <button class="expandable_header expandable_target">
                    <span class="expandable_header-left expandable_label">
                        Expandable Header 3
                    </span>
                    <span class="expandable_header-right expandable_link">
                        <span class="expandable_cue-open">
                            Show
                            <span class="cf-icon cf-icon-plus-round"></span>
                        </span>
                        <span class="expandable_cue-close">
                            Hide
                            <span class="cf-icon cf-icon-minus-round"></span>
                        </span>
                    </span>
                </button>
                <div class="expandable_content">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                        temporibus magnam debitis quidem. Ducimus ratione
                        corporis nesciunt earum vel est quaerat blanditiis
                        dolore ipsa?
                    </p>
                </div>
            </div>
        </div>
      codenotes:
        - |
          Pattern structure
          -----------------
          .expandable-group
            .expandable-group_header
            .expandable.expandable__padded
              [...]
            .expandable.expandable__padded
              [...]
            .expandable.expandable__padded
              [...]
    - name: Accordion-style group
      markup: |
        <div class="expandable-group" data-accordion="true">
            <div class="expandable-group_header">Expandable group header</div>
            <div class="expandable expandable__padded">
                <button class="expandable_header expandable_target">
                    <span class="expandable_header-left expandable_label">
                        Expandable Header 1
                    </span>
                    <span class="expandable_header-right expandable_link">
                        <span class="expandable_cue-open">
                            Show
                            <span class="cf-icon cf-icon-plus-round"></span>
                        </span>
                        <span class="expandable_cue-close">
                            Hide
                            <span class="cf-icon cf-icon-minus-round"></span>
                        </span>
                    </span>
                </button>
                <div class="expandable_content">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                        temporibus magnam debitis quidem. Ducimus ratione
                        corporis nesciunt earum vel est quaerat blanditiis
                        dolore ipsa?
                    </p>
                </div>
            </div>
            <div class="expandable expandable__padded">
                <button class="expandable_header expandable_target">
                    <span class="expandable_header-left expandable_label">
                        Expandable Header 2
                    </span>
                    <span class="expandable_header-right expandable_link">
                        <span class="expandable_cue-open">
                            Show
                            <span class="cf-icon cf-icon-plus-round"></span>
                        </span>
                        <span class="expandable_cue-close">
                            Hide
                            <span class="cf-icon cf-icon-minus-round"></span>
                        </span>
                    </span>
                </button>
                <div class="expandable_content">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                        temporibus magnam debitis quidem. Ducimus ratione
                        corporis nesciunt earum vel est quaerat blanditiis
                        dolore ipsa?
                    </p>
                </div>
            </div>
            <div class="expandable expandable__padded">
                <button class="expandable_header expandable_target">
                    <span class="expandable_header-left expandable_label">
                        Expandable Header 3
                    </span>
                    <span class="expandable_header-right expandable_link">
                        <span class="expandable_cue-open">
                            Show
                            <span class="cf-icon cf-icon-plus-round"></span>
                        </span>
                        <span class="expandable_cue-close">
                            Hide
                            <span class="cf-icon cf-icon-minus-round"></span>
                        </span>
                    </span>
                </button>
                <div class="expandable_content">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                        temporibus magnam debitis quidem. Ducimus ratione
                        corporis nesciunt earum vel est quaerat blanditiis
                        dolore ipsa?
                    </p>
                </div>
            </div>
        </div>
      codenotes:
        - |
          <div class="expandable-group" data-accordion="true">
      notes:
        - "Accordions can only show one open expandable at a time."
        - "Add the data-accordion=\"true\" attribute to the expandable group to
           activate the accordion mode."
    tags:
    - cf-expandables
*/
.expandable-group {
  margin-bottom: 1.875em;
}
.expandable-group_header {
  padding: 0.35714286em 1.14285714em;
  border-bottom: 1px solid #919395;
  background: #f1f2f2;
  color: #75787b;
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0.35714286em;
  font-size: 0.875em;
  line-height: 1.57142857;
  margin-bottom: 0;
}
.lt-ie9 .expandable-group_header {
  font-weight: normal !important;
}
.expandable-group .expandable {
  border-bottom: 1px solid #919395;
  margin-bottom: 0;
  background: #ffffff;
}
.expandable-group .expandable_label {
  margin-top: 0;
  margin-bottom: 1.16666667em;
  font-size: 1.125em;
  font-family: "AvenirNextLTW01-Medium", Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1.22222222;
  margin-bottom: 0;
}
.lt-ie9 .expandable-group .expandable_label {
  font-weight: normal !important;
}
.expandable-group .expandable_content {
  margin-bottom: 0;
}
/* topdoc
  name: EOF
  eof: true
*/
/* ==========================================================================
   Capital Framework
   Form Element Styling
   ========================================================================== */
/* topdoc
  name: Form labels
  family: cf-forms
  patterns:
    - name: Label header
      markup: |
        <label class="form-label-header">
            Form label header
        </label>
  tags:
    - cf-forms
*/
.form-label-header {
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0.35714286em;
  font-size: 0.875em;
  line-height: 1.57142857;
  margin-bottom: 0.71428571em;
}
.lt-ie9 .form-label-header {
  font-weight: normal !important;
}
/* topdoc
  name: Super input
  family: cf-forms
  patterns:
    - name: .input__super
      markup: |
        <input class="input__super" type="text" value="Super input"></input>
        <button class="btn btn__super">Super</button>
      notes:
        - "An input that matches the height of a super button."
  tags:
    - cf-forms
*/
.input__super[type="text"],
.input__super[type="search"],
.input__super[type="email"],
.input__super[type="url"],
.input__super[type="tel"],
.input__super[type="number"] {
  padding: 0.55555556em;
  font-size: 1.125em;
}
/* topdoc
    name: Input states
    family: cf-forms
    patterns:
    - name: Error state
      codenotes:
        - .error
      notes:
        - "See the 'Form icons' section below for guidance on adding icons to
           states."
      markup: |
        <input class="error" type="text" value="Invalid input">
    - name: Success state
      codenotes:
        - .success
      notes:
        - "See the 'Form icons' section below for guidance on adding icons to
           states."
      markup: |
        <input class="success" type="text" value="Validated input">
    tags:
    - cf-forms
*/
input[type="text"].error,
input[type="search"].error,
input[type="email"].error,
input[type="url"].error,
input[type="tel"].error,
input[type="number"].error,
select[multiple].error,
textarea.error {
  border: 1px solid #d12124;
  outline: 1px solid #d12124;
}
input[type="text"].success,
input[type="search"].success,
input[type="email"].success,
input[type="url"].success,
input[type="tel"].success,
input[type="number"].success,
select[multiple].success,
textarea.success {
  border: 1px solid #2cb34a;
  outline: 1px solid #2cb34a;
}
/* topdoc
    name: Form icons
    family: cf-forms
    patterns:
    - name: Form input icons
      notes:
        - "Form input icons add small positioning tweaks to Capital Framework
          icons."
      markup: |
        <input type="text" value="">
        <span class="cf-form_input-icon cf-icon cf-icon-email"></span>
    - name: Form input error icon
      notes:
        - "The icon must be placed directly after the form input in the markup
          and the input must use the 'error' class."
        - "For invalid fields only use the alert role to call attention to
           fields that need immediate attention:
           https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role"
      markup: |
        <input class="error" type="text" value="Invalid input">
        <span class="cf-form_input-icon cf-icon cf-icon-delete-round" role="alert"></span>
    - name: Form input success icon
      notes:
        - "The icon must be placed directly after the form input in the markup
          and the input must use the 'error' class."
        - "For valid inputs only use the alert role to indicate that a
           previously invalid input is now valid:
           https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role"
      markup: |
        <input class="success" type="text" value="Validated input">
        <span class="cf-form_input-icon cf-icon cf-icon-approved-round"></span>
    tags:
    - cf-forms
*/
.cf-form_input-icon {
  position: relative;
  top: 0.3em;
  margin-left: 0.2em;
  font-size: 1.25em;
}
.error + .cf-form_input-icon {
  color: #d12124;
}
.success + .cf-form_input-icon {
  color: #2cb34a;
}
/* topdoc
  name: Form group
  family: cf-forms
  notes:
    - "A form group is recommended when you need to provide spacing between form
       elements and between groups of form elements."
  codenotes:
    - |
      Pattern structure
      -----------------
      .form-group
        .form-group_item
  patterns:
    - name: .form-group (block)
      markup: |
        <div class="form-group">
            <div class="form-group_item">
                <input type="text">
            </div>
            <div class="form-group_item">
                <input type="text">
            </div>
        </div>
        <div class="form-group">
            <div class="form-group_item">
                <input type="text">
            </div>
            <div class="form-group_item">
                <input type="text">
            </div>
        </div>
        <div class="form-group">
            <div class="form-group_item">
                <input type="text">
            </div>
            <div class="form-group_item">
                <input type="text">
            </div>
        </div>
      codenotes:
        - |
          .form-group
      notes:
        - "Provides sizeable margins between groups of form elements."
    - name: .form-group_item (element)
      markup: |
        <div class="form-group_item">
            <input type="text">
        </div>
        <div class="form-group_item">
            <input type="text">
        </div>
        <div class="form-group_item">
            <input type="text">
        </div>
      notes:
        - "Provides subtle margins between form elements within the same group."
    - name: Real world example
      markup: |
        <div class="form-group">
            <label class="form-label-header">Form group</label>
            <div class="form-group_item">
                <input type="text" value="Form group item">
            </div>
            <div class="form-group_item">
                <input type="text" value="Form group item">
            </div>
        </div>
        <div class="form-group">
            <label class="form-label-header">Form group</label>
            <div class="form-group_item">
                <input type="text" value="Form group item">
            </div>
            <div class="form-group_item">
                <input type="text" value="Form group item">
            </div>
        </div>
  tags:
    - cf-forms
*/
.form-group + .form-group {
  margin-top: 1.875em;
}
.form-group_item + .form-group_item {
  margin-top: 0.9375em;
}
/* topdoc
  name: Input with button
  family: cf-forms
  patterns:
    - name: Default input and button
      markup: |
        <div class="input-with-btn">
            <div class="input-with-btn_input">
                <input type="text">
            </div>
            <div class="input-with-btn_btn">
                <button class="btn">Search</button>
            </div>
        </div>
    - name: Super input and button
      markup: |
        <div class="input-with-btn">
            <div class="input-with-btn_input">
                <input class="input__super" type="text">
            </div>
            <div class="input-with-btn_btn">
                <button class="btn btn__super">Search</button>
            </div>
        </div>
  tags:
    - cf-forms
*/
@media only all and (min-width: 30em) {
  .input-with-btn {
    display: block;
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
  }
}
.input-with-btn_input {
  margin-bottom: 0.9375em;
}
@media only all and (min-width: 30em) {
  .input-with-btn_input {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 75%;
    border-right-width: 0;
  }
  .lt-ie8 .input-with-btn_input {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
@media only all and (min-width: 60em) {
  .input-with-btn_input {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 83.33333333%;
    border-right-width: 0;
  }
  .lt-ie8 .input-with-btn_input {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
.input-with-btn_input input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}
.input-with-btn_btn {
  margin-bottom: 0.9375em;
}
@media only all and (min-width: 30em) {
  .input-with-btn_btn {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 25%;
  }
  .lt-ie8 .input-with-btn_btn {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
@media only all and (min-width: 60em) {
  .input-with-btn_btn {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 16.66666667%;
  }
  .lt-ie8 .input-with-btn_btn {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
.input-with-btn_btn .btn {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}
.input-with-btn_btn .btn__super {
  padding-left: 0.83333333em;
  padding-right: 0.83333333em;
}
/* topdoc
  name: Button inside input
  family: cf-forms
  patterns:
    - name: Default button inside of an default input
      markup: |
        <div class="btn-inside-input">
            <input type="text"
                   value="This is some really long text to make sure that the button doesn't overlap the content in such a way that this input becomes unusable.">
            <button class="btn btn__link btn__secondary">
                Clear
                <span class="cf-icon cf-icon-delete"></span>
            </button>
        </div>
    - name: Super button inside of a super input
      markup: |
        <div class="btn-inside-input">
            <input class="input__super"
                   type="text"
                   value="This is some really long text to make sure that the button doesn't overlap the content in such a way that this input becomes unusable.">
            <button class="btn btn__super btn__link btn__secondary">
                Clear
                <span class="cf-icon cf-icon-delete"></span>
            </button>
        </div>
  tags:
    - cf-forms
*/
.btn-inside-input {
  position: relative;
}
.btn-inside-input input[type="text"],
.btn-inside-input input[type="search"],
.btn-inside-input input[type="email"],
.btn-inside-input input[type="url"],
.btn-inside-input input[type="tel"],
.btn-inside-input input[type="number"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding-right: 4.64285714em;
}
.btn-inside-input input[type="text"].input__super,
.btn-inside-input input[type="search"].input__super,
.btn-inside-input input[type="email"].input__super,
.btn-inside-input input[type="url"].input__super,
.btn-inside-input input[type="tel"].input__super,
.btn-inside-input input[type="number"].input__super {
  padding-right: 5em;
}
.btn-inside-input .btn {
  border-bottom-width: 0 !important;
  position: absolute;
  right: 1.07142857em;
  top: 0;
}
.btn-inside-input .btn__super {
  right: 0.83333333em;
}
/* topdoc
  name: EOF
  eof: true
*/
/* ==========================================================================
   Capital Framework
   Grid mixins
   ========================================================================== */
/* topdoc
  name: "Global Less variables"
  notes:
    - "The following variables are default values used in creating grids.
      They can be overridden in your application's stylesheet.
      Most mixins allows you to override these values by passing them arguments."
  family: "cf-grid"
  patterns:
    - codenotes:
        - "@grid_box-sizing-polyfill-path: '/cf-grid/custom-demo/static/css';"
      notes:
        - "The path where boxsizing.htc is located."
        - "This path MUST be overridden in your project and set to a root relative url."
    - codenotes:
        - "@grid_wrapper-width: 1200px;"
      notes:
        - "The grid's maximum width in px."
    - codenotes:
        - "@grid_gutter-width: 30px;"
      notes:
        - "The fixed width between columns."
    - codenotes:
        - "@grid_total-columns: 12;"
      notes:
        - "The total number of columns used in calculating column widths."
    - codenotes:
        - "@grid_debug"
      notes:
        - "Gives column blocks a background color if set to true."
  tags:
    - "cf-grid"
*/
/* topdoc
  name: "Wrapper"
  notes:
    - "Wrappers are centered containers with a max-width and fixed gutters
      that match the gutter widths of columns."
    - "To support IE 6/7, ensure that the path to boxsizing.htc is set using
      the @grid_box-sizing-polyfill-path Less variable.
      Read more: https://github.com/Schepp/box-sizing-polyfill."
  family: "cf-grid"
  patterns:
    - name: "Less mixin"
      codenotes:
        - ".grid_wrapper( @grid_wrapper-width: @grid_wrapper-width )"
      notes:
        - "You can create wrappers with different max-widths by passing a pixel
          value into the mixin."
    - name: "Usage"
      codenotes:
        - |
          .main-wrapper {
            .grid_wrapper();
          }
          .wide-wrapper {
            .grid_wrapper( 1900px );
          }
        - |
          <div class="main-wrapper">
              This container now has left and right padding and a centered max width.
          </div>
          <div class="wide-wrapper">
              This container is the same except it has a wider max-width.
          </div>
  tags:
    - "cf-grid"
*/
/* topdoc
  name: "Columns"
  family: "cf-grid"
  patterns:
    - name: "Less mixin"
      codenotes:
        - ".grid_column( @columns: 1; @total: @grid_total-columns; @prefix: 0; @suffix: 0 )"
      notes:
        - "Computes column widths and prefix/suffix padding."
        - "CSS borders are used for fixed gutters."
    - name: "Usage"
      codenotes:
        - |
          .main-wrapper {
            .grid_wrapper();
          }
          .half {
            .grid_column(1, 2);
          }
        - |
          <div class="main-wrapper">
              <div class="half">I am half of my parent.</div>
              <div class="half">I am half of my parent.</div>
          </div>
    - name: "This is a placeholder for documenting prefix and suffix"
      codenotes:
        - "..."
  tags:
    - "cf-grid"
*/
/* topdoc
  name: "Push and Pull mixins for source ordering"
  family: "cf-grid"
  patterns:
    - codenotes:
        - ".push( @offset: 1, @grid_total-columns: @grid_total-columns )"
        - ".pull( @offset: 1, @grid_total-columns: @grid_total-columns )"
    - name: "Usage"
      codenotes:
        - |
          .first {
            .grid_column(1, 2);
            .grid_pull(1);
          }
          .second {
            .grid_column(1, 2);
            .grid_push(1);
          }
        - |
          <div>
              <div class="second">I am first in the markup but appear after .first.</div>
              <div class="first">I am second in the markup but appear before .second.</div>
          </div>
  tags:
    - "cf-grid"
*/
/* topdoc
  name: "Nested columns"
  notes:
    - "Since all cf-grid columns have left and right gutters you will notice
      undesireable offsetting when nesting columns.
      Normally this is removed with complex selectors or by adding classes
      to the first and last column per 'row'.
      In cf-grid the way to get around this is by wrapping your columns in a
      container that utilizes the .grid_nested-col-group() mixin.
      This mixin uses negative left and right margins to pull the columns back
      into alignment with parent columns."
    - "NOTE: Working this way allows you to easily create responsive grids.
      You are free to control the number of columns per 'row' without having
      to deal with the first and last columns of each row."
    - "NOTE: cf-grids does not use 'rows' and there is no row container.
      To clarify, if you have a 12 column grid and place 24 columns inside
      of a wrapper cf-grid columns will automaitcally stack into 2 'rows'
      of 12."
  family: "cf-grid"
  patterns:
    - name: "Less mixin"
      codenotes:
        - ".grid_nested-col-group()"
    - name: "Usage"
      codenotes:
        - |
          .main-wrapper {
            .grid_wrapper();
          }
          .cols {
            .grid_nested-col-group();
          }
          .half {
            .grid_column(1, 2);
          }
        - |
          <div class="main-wrapper">
              <div class="half">
                  <div class="cols">
                      <div class="half"></div>
                      <div class="half"></div>
                  </div>
              </div>
              <div class="half">
                  <div class="cols">
                      <div class="half"></div>
                      <div class="half"></div>
                  </div>
              </div>
          </div>
  tags:
    - "cf-grid"
*/
/* topdoc
  name: EOF
  eof: true
*/
/* ==========================================================================
   Capital Framework
   Icons
   ========================================================================== */
/* topdoc
  name: Less variables
  family: cf-icons
  notes:
    - "These variables can be overriden in your project's Less file."
  patterns:
    - name: CSS prefix
      codenotes:
        - "@cf-icon-prefix: cf-icon;"
    - name: Path to icon font files
      codenotes:
        - "@cf-icon-path: '../fonts';"
    - name: Toggle IE7 support
      codenotes:
        - "@cf-icon-ie7-support: true;"
      notes:
        - "More on IE7 support can be found in the 'IE7 Support' section."
  tags:
    - cf-icons
*/
/* topdoc
  name: IE7 Support
  family: cf-icons
  notes:
    - "IE7 support is added by using dynamic properties (CSS expressions)."
    - "To turn off IE7 support simply set @cf-icon-ie7-support to false."
  tags:
    - cf-icons
*/
/* topdoc
  name: The basics
  family: cf-icons
  patterns:
    - name: "@font-face declaration"
    - name: Base icon class
      notes:
        - "The cf-icon-prefix class applies all shared icon styles including the
          font family."
        - "All icons must use two classes, one for this base class and another
          to set the font character. For example:
          <span class='cf-icon cf-icon-left'></span>."
        - "Please use the span element instead of the i element. This avoids
          font family cascading conflicts when using an italic webfont on i
          elements and then another font for the icons. Note that this issue
          only pops up in older versions of Internet Explorer."
  tags:
    - cf-icons
*/
@font-face {
  font-family: 'CFPB Minicons';
  src: url('../fonts/cf-icons.eot');
  src: url('../fonts/cf-icons.eot?#iefix') format('embedded-opentype'), url('../fonts/cf-icons.woff') format('woff'), url('../fonts/cf-icons.ttf') format('truetype'), url('../fonts/cf-icons.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
.cf-icon {
  font-family: 'CFPB Minicons';
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
/* topdoc
    name: Navigation icons
    family: cf-icons
    patterns:
      - name: left
        markup: |
          <span class="cf-icon cf-icon-left"></span>
          <span class="cf-icon cf-icon-left-round"></span>
      - name: right
        markup: |
          <span class="cf-icon cf-icon-right"></span>
          <span class="cf-icon cf-icon-right-round"></span>
      - name: up
        markup: |
          <span class="cf-icon cf-icon-up"></span>
          <span class="cf-icon cf-icon-up-round"></span>
      - name: down
        markup: |
          <span class="cf-icon cf-icon-down"></span>
          <span class="cf-icon cf-icon-down-round"></span>
      - name: arrow-left
        markup: |
          <span class="cf-icon cf-icon-arrow-left"></span>
          <span class="cf-icon cf-icon-arrow-left-round"></span>
      - name: arrow-right
        markup: |
          <span class="cf-icon cf-icon-arrow-right"></span>
          <span class="cf-icon cf-icon-arrow-right-round"></span>
      - name: arrow-up
        markup: |
          <span class="cf-icon cf-icon-arrow-up"></span>
          <span class="cf-icon cf-icon-arrow-up-round"></span>
      - name: arrow-down
        markup: |
          <span class="cf-icon cf-icon-arrow-down"></span>
          <span class="cf-icon cf-icon-arrow-down-round"></span>
    tags:
      - cf-icons
*/
.cf-icon-left:before {
  content: "\e000";
}
.lt-ie8 .cf-icon-left {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e000');
}
.cf-icon-left-round:before {
  content: "\e001";
}
.lt-ie8 .cf-icon-left-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e001');
}
.cf-icon-right:before {
  content: "\e002";
}
.lt-ie8 .cf-icon-right {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e002');
}
.cf-icon-right-round:before {
  content: "\e003";
}
.lt-ie8 .cf-icon-right-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e003');
}
.cf-icon-up:before {
  content: "\e004";
}
.lt-ie8 .cf-icon-up {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e004');
}
.cf-icon-up-round:before {
  content: "\e005";
}
.lt-ie8 .cf-icon-up-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e005');
}
.cf-icon-down:before {
  content: "\e006";
}
.lt-ie8 .cf-icon-down {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e006');
}
.cf-icon-down-round:before {
  content: "\e007";
}
.lt-ie8 .cf-icon-down-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e007');
}
.cf-icon-arrow-left:before {
  content: "\e008";
}
.lt-ie8 .cf-icon-arrow-left {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e008');
}
.cf-icon-arrow-left-round:before {
  content: "\e009";
}
.lt-ie8 .cf-icon-arrow-left-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e009');
}
.cf-icon-arrow-right:before {
  content: "\e010";
}
.lt-ie8 .cf-icon-arrow-right {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e010');
}
.cf-icon-arrow-right-round:before {
  content: "\e011";
}
.lt-ie8 .cf-icon-arrow-right-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e011');
}
.cf-icon-arrow-up:before {
  content: "\e012";
}
.lt-ie8 .cf-icon-arrow-up {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e012');
}
.cf-icon-arrow-up-round:before {
  content: "\e013";
}
.lt-ie8 .cf-icon-arrow-up-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e013');
}
.cf-icon-arrow-down:before {
  content: "\e014";
}
.lt-ie8 .cf-icon-arrow-down {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e014');
}
.cf-icon-arrow-down-round:before {
  content: "\e015";
}
.lt-ie8 .cf-icon-arrow-down-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e015');
}
/* topdoc
    name: Status icons
    family: cf-icons
    patterns:
      - name: approved
        markup: |
          <span class="cf-icon cf-icon-approved"></span>
          <span class="cf-icon cf-icon-approved-round"></span>
      - name: error
        markup: |
          <span class="cf-icon cf-icon-error"></span>
          <span class="cf-icon cf-icon-error-round"></span>
      - name: help
        markup: |
          <span class="cf-icon cf-icon-help"></span>
          <span class="cf-icon cf-icon-help-round"></span>
      - name: delete
        markup: |
          <span class="cf-icon cf-icon-delete"></span>
          <span class="cf-icon cf-icon-delete-round"></span>
      - name: plus
        markup: |
          <span class="cf-icon cf-icon-plus"></span>
          <span class="cf-icon cf-icon-plus-round"></span>
      - name: minus
        markup: |
          <span class="cf-icon cf-icon-minus"></span>
          <span class="cf-icon cf-icon-minus-round"></span>
      - name: update
        markup: |
          <span class="cf-icon cf-icon-update"></span>
          <span class="cf-icon cf-icon-update-round"></span>
    tags:
      - cf-icons
*/
.cf-icon-approved:before {
  content: "\e100";
}
.lt-ie8 .cf-icon-approved {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e100');
}
.cf-icon-approved-round:before {
  content: "\e101";
}
.lt-ie8 .cf-icon-approved-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e101');
}
.cf-icon-error:before {
  content: "\e102";
}
.lt-ie8 .cf-icon-error {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e102');
}
.cf-icon-error-round:before {
  content: "\e103";
}
.lt-ie8 .cf-icon-error-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e103');
}
.cf-icon-help:before {
  content: "\e104";
}
.lt-ie8 .cf-icon-help {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e104');
}
.cf-icon-help-round:before {
  content: "\e105";
}
.lt-ie8 .cf-icon-help-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e105');
}
.cf-icon-delete:before {
  content: "\e106";
}
.lt-ie8 .cf-icon-delete {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e106');
}
.cf-icon-delete-round:before {
  content: "\e107";
}
.lt-ie8 .cf-icon-delete-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e107');
}
.cf-icon-plus:before {
  content: "\e108";
}
.lt-ie8 .cf-icon-plus {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e108');
}
.cf-icon-plus-round:before {
  content: "\e109";
}
.lt-ie8 .cf-icon-plus-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e109');
}
.cf-icon-minus:before {
  content: "\e110";
}
.lt-ie8 .cf-icon-minus {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e110');
}
.cf-icon-minus-round:before {
  content: "\e111";
}
.lt-ie8 .cf-icon-minus-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e111');
}
.cf-icon-update:before {
  content: "\e112";
}
.lt-ie8 .cf-icon-update {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e112');
}
.cf-icon-update-round:before {
  content: "\e113";
}
.lt-ie8 .cf-icon-update-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e113');
}
/* topdoc
    name: Social icons
    family: cf-icons
    patterns:
      - name: youtube
        markup: |
          <span class="cf-icon cf-icon-youtube"></span>
          <span class="cf-icon cf-icon-youtube-square"></span>
      - name: linkedin
        markup: |
          <span class="cf-icon cf-icon-linkedin"></span>
          <span class="cf-icon cf-icon-linkedin-square"></span>
      - name: facebook
        markup: |
          <span class="cf-icon cf-icon-facebook"></span>
          <span class="cf-icon cf-icon-facebook-square"></span>
      - name: flickr
        markup: |
          <span class="cf-icon cf-icon-flickr"></span>
          <span class="cf-icon cf-icon-flickr-square"></span>
      - name: plus
        markup: |
          <span class="cf-icon cf-icon-twitter"></span>
          <span class="cf-icon cf-icon-twitter-square"></span>
      - name: github
        markup: |
          <span class="cf-icon cf-icon-github"></span>
          <span class="cf-icon cf-icon-github-square"></span>
      - name: email-social
        markup: |
          <span class="cf-icon cf-icon-email-social"></span>
          <span class="cf-icon cf-icon-email-social-square"></span>
    tags:
      - cf-icons
*/
.cf-icon-youtube:before {
  content: "\e200";
}
.lt-ie8 .cf-icon-youtube {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e200');
}
.cf-icon-youtube-square:before {
  content: "\e201";
}
.lt-ie8 .cf-icon-youtube-square {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e201');
}
.cf-icon-linkedin:before {
  content: "\e202";
}
.lt-ie8 .cf-icon-linkedin {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e202');
}
.cf-icon-linkedin-square:before {
  content: "\e203";
}
.lt-ie8 .cf-icon-linkedin-square {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e203');
}
.cf-icon-facebook:before {
  content: "\e204";
}
.lt-ie8 .cf-icon-facebook {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e204');
}
.cf-icon-facebook-square:before {
  content: "\e205";
}
.lt-ie8 .cf-icon-facebook-square {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e205');
}
.cf-icon-flickr:before {
  content: "\e206";
}
.lt-ie8 .cf-icon-flickr {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e206');
}
.cf-icon-flickr-square:before {
  content: "\e207";
}
.lt-ie8 .cf-icon-flickr-square {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e207');
}
.cf-icon-twitter:before {
  content: "\e208";
}
.lt-ie8 .cf-icon-twitter {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e208');
}
.cf-icon-twitter-square:before {
  content: "\e209";
}
.lt-ie8 .cf-icon-twitter-square {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e209');
}
.cf-icon-github:before {
  content: "\e210";
}
.lt-ie8 .cf-icon-github {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e210');
}
.cf-icon-github-square:before {
  content: "\e211";
}
.lt-ie8 .cf-icon-github-square {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e211');
}
.cf-icon-email-social:before {
  content: "\e212";
}
.lt-ie8 .cf-icon-email-social {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e212');
}
.cf-icon-email-social-square:before {
  content: "\e213";
}
.lt-ie8 .cf-icon-email-social-square {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e213');
}
/* topdoc
    name: Communication icons
    family: cf-icons
    patterns:
      - name: web
        markup: |
          <span class="cf-icon cf-icon-web"></span>
          <span class="cf-icon cf-icon-web-round"></span>
      - name: email
        markup: |
          <span class="cf-icon cf-icon-email"></span>
          <span class="cf-icon cf-icon-email-round"></span>
      - name: mail
        markup: |
          <span class="cf-icon cf-icon-mail"></span>
          <span class="cf-icon cf-icon-mail-round"></span>
      - name: phone
        markup: |
          <span class="cf-icon cf-icon-phone"></span>
          <span class="cf-icon cf-icon-phone-round"></span>
      - name: technology
        markup: |
          <span class="cf-icon cf-icon-technology"></span>
          <span class="cf-icon cf-icon-technology-round"></span>
      - name: fax
        markup: |
          <span class="cf-icon cf-icon-fax"></span>
          <span class="cf-icon cf-icon-fax-round"></span>
    tags:
      - cf-icons
*/
.cf-icon-web:before {
  content: "\e300";
}
.lt-ie8 .cf-icon-web {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e300');
}
.cf-icon-web-round:before {
  content: "\e301";
}
.lt-ie8 .cf-icon-web-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e301');
}
.cf-icon-email:before {
  content: "\e302";
}
.lt-ie8 .cf-icon-email {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e302');
}
.cf-icon-email-round:before {
  content: "\e303";
}
.lt-ie8 .cf-icon-email-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e303');
}
.cf-icon-mail:before {
  content: "\e304";
}
.lt-ie8 .cf-icon-mail {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e304');
}
.cf-icon-mail-round:before {
  content: "\e305";
}
.lt-ie8 .cf-icon-mail-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e305');
}
.cf-icon-phone:before {
  content: "\e306";
}
.lt-ie8 .cf-icon-phone {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e306');
}
.cf-icon-phone-round:before {
  content: "\e307";
}
.lt-ie8 .cf-icon-phone-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e307');
}
.cf-icon-technology:before {
  content: "\e308";
}
.lt-ie8 .cf-icon-technology {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e308');
}
.cf-icon-technology-round:before {
  content: "\e309";
}
.lt-ie8 .cf-icon-technology-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e309');
}
.cf-icon-fax:before {
  content: "\e310";
}
.lt-ie8 .cf-icon-fax {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e310');
}
.cf-icon-fax-round:before {
  content: "\e311";
}
.lt-ie8 .cf-icon-fax-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e311');
}
/* topdoc
    name: Document icons
    family: cf-icons
    patterns:
      - name: document
        markup: |
          <span class="cf-icon cf-icon-document"></span>
          <span class="cf-icon cf-icon-document-round"></span>
      - name: pdf
        markup: |
          <span class="cf-icon cf-icon-pdf"></span>
          <span class="cf-icon cf-icon-pdf-round"></span>
      - name: upload
        markup: |
          <span class="cf-icon cf-icon-upload"></span>
          <span class="cf-icon cf-icon-upload-round"></span>
      - name: copy
        markup: |
          <span class="cf-icon cf-icon-copy"></span>
          <span class="cf-icon cf-icon-copy-round"></span>
      - name: edit
        markup: |
          <span class="cf-icon cf-icon-edit"></span>
          <span class="cf-icon cf-icon-edit-round"></span>
      - name: attach
        markup: |
          <span class="cf-icon cf-icon-attach"></span>
          <span class="cf-icon cf-icon-attach-round"></span>
      - name: print
        markup: |
          <span class="cf-icon cf-icon-print"></span>
          <span class="cf-icon cf-icon-print-round"></span>
      - name: save
        markup: |
          <span class="cf-icon cf-icon-save"></span>
          <span class="cf-icon cf-icon-save-round"></span>
      - name: appendix
        markup: |
          <span class="cf-icon cf-icon-appendix"></span>
          <span class="cf-icon cf-icon-appendix-round"></span>
      - name: supplement
        markup: |
          <span class="cf-icon cf-icon-supplement"></span>
          <span class="cf-icon cf-icon-supplement-round"></span>
      - name: rss
        markup: |
          <span class="cf-icon cf-icon-rss"></span>
          <span class="cf-icon cf-icon-rss-round"></span>
    tags:
      - cf-icons
*/
.cf-icon-document:before {
  content: "\e400";
}
.lt-ie8 .cf-icon-document {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e400');
}
.cf-icon-document-round:before {
  content: "\e401";
}
.lt-ie8 .cf-icon-document-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e401');
}
.cf-icon-pdf:before {
  content: "\e402";
}
.lt-ie8 .cf-icon-pdf {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e402');
}
.cf-icon-pdf-round:before {
  content: "\e403";
}
.lt-ie8 .cf-icon-pdf-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e403');
}
.cf-icon-upload:before {
  content: "\e404";
}
.lt-ie8 .cf-icon-upload {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e404');
}
.cf-icon-upload-round:before {
  content: "\e405";
}
.lt-ie8 .cf-icon-upload-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e405');
}
.cf-icon-download:before {
  content: "\e406";
}
.lt-ie8 .cf-icon-download {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e406');
}
.cf-icon-download-round:before {
  content: "\e407";
}
.lt-ie8 .cf-icon-download-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e407');
}
.cf-icon-copy:before {
  content: "\e408";
}
.lt-ie8 .cf-icon-copy {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e408');
}
.cf-icon-copy-round:before {
  content: "\e409";
}
.lt-ie8 .cf-icon-copy-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e409');
}
.cf-icon-edit:before {
  content: "\e410";
}
.lt-ie8 .cf-icon-edit {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e410');
}
.cf-icon-edit-round:before {
  content: "\e411";
}
.lt-ie8 .cf-icon-edit-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e411');
}
.cf-icon-attach:before {
  content: "\e412";
}
.lt-ie8 .cf-icon-attach {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e412');
}
.cf-icon-attach-round:before {
  content: "\e413";
}
.lt-ie8 .cf-icon-attach-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e413');
}
.cf-icon-print:before {
  content: "\e414";
}
.lt-ie8 .cf-icon-print {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e414');
}
.cf-icon-print-round:before {
  content: "\e415";
}
.lt-ie8 .cf-icon-print-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e415');
}
.cf-icon-save:before {
  content: "\e416";
}
.lt-ie8 .cf-icon-save {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e416');
}
.cf-icon-save-round:before {
  content: "\e417";
}
.lt-ie8 .cf-icon-save-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e417');
}
.cf-icon-appendix:before {
  content: "\e418";
}
.lt-ie8 .cf-icon-appendix {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e418');
}
.cf-icon-appendix-round:before {
  content: "\e419";
}
.lt-ie8 .cf-icon-appendix-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e419');
}
.cf-icon-supplement:before {
  content: "\e420";
}
.lt-ie8 .cf-icon-supplement {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e420');
}
.cf-icon-supplement-round:before {
  content: "\e421";
}
.lt-ie8 .cf-icon-supplement-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e421');
}
.cf-icon-rss:before {
  content: "\e422";
}
.lt-ie8 .cf-icon-rss {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e422');
}
.cf-icon-rss-round:before {
  content: "\e423";
}
.lt-ie8 .cf-icon-rss-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e423');
}
/* topdoc
    name: Financial product icons
    family: cf-icons
    patterns:
      - name: bank-account
        markup: |
          <span class="cf-icon cf-icon-bank-account"></span>
          <span class="cf-icon cf-icon-bank-account-round"></span>
      - name: credit-card
        markup: |
          <span class="cf-icon cf-icon-credit-card"></span>
          <span class="cf-icon cf-icon-credit-card-round"></span>
      - name: loan
        markup: |
          <span class="cf-icon cf-icon-loan"></span>
          <span class="cf-icon cf-icon-loan-round"></span>
      - name: money-transfer
        markup: |
          <span class="cf-icon cf-icon-money-transfer"></span>
          <span class="cf-icon cf-icon-money-transfer-round"></span>
      - name: mortgage
        markup: |
          <span class="cf-icon cf-icon-mortgage"></span>
          <span class="cf-icon cf-icon-mortgage-round"></span>
      - name: debt-collection
        markup: |
          <span class="cf-icon cf-icon-debt-collection"></span>
          <span class="cf-icon cf-icon-debt-collection-round"></span>
      - name: credit-report
        markup: |
          <span class="cf-icon cf-icon-credit-report"></span>
          <span class="cf-icon cf-icon-credit-report-round"></span>
      - name: money
        markup: |
          <span class="cf-icon cf-icon-money"></span>
          <span class="cf-icon cf-icon-money-round"></span>
      - name: quick-cash
        markup: |
          <span class="cf-icon cf-icon-quick-cash"></span>
          <span class="cf-icon cf-icon-quick-cash-round"></span>
      - name: contract
        markup: |
          <span class="cf-icon cf-icon-contract"></span>
          <span class="cf-icon cf-icon-contract-round"></span>
      - name: complaint
        markup: |
          <span class="cf-icon cf-icon-complaint"></span>
          <span class="cf-icon cf-icon-complaint-round"></span>
      - name: getting-credit-card
        markup: |
          <span class="cf-icon cf-icon-getting-credit-card"></span>
          <span class="cf-icon cf-icon-getting-credit-card-round"></span>
      - name: buying-car
        markup: |
          <span class="cf-icon cf-icon-buying-car"></span>
          <span class="cf-icon cf-icon-buying-car-round"></span>
      - name: paying-college
        markup: |
          <span class="cf-icon cf-icon-paying-college"></span>
          <span class="cf-icon cf-icon-paying-college-round"></span>
      - name: owning-home
        markup: |
          <span class="cf-icon cf-icon-owning-home"></span>
          <span class="cf-icon cf-icon-owning-home-round"></span>
      - name: debt
        markup: |
          <span class="cf-icon cf-icon-debt"></span>
          <span class="cf-icon cf-icon-debt-round"></span>
      - name: building-credit
        markup: |
          <span class="cf-icon cf-icon-building-credit"></span>
          <span class="cf-icon cf-icon-building-credit-round"></span>
      - name: prepaid-cards
        markup: |
          <span class="cf-icon cf-icon-prepaid-cards"></span>
          <span class="cf-icon cf-icon-prepaid-cards-round"></span>
      - name: payday-loan
        markup: |
          <span class="cf-icon cf-icon-payday-loan"></span>
          <span class="cf-icon cf-icon-payday-loan-round"></span>
      - name: retirement
        markup: |
          <span class="cf-icon cf-icon-retirement"></span>
          <span class="cf-icon cf-icon-retirement-round"></span>
    tags:
      - cf-icons
*/
.cf-icon-bank-account:before {
  content: "\e500";
}
.lt-ie8 .cf-icon-bank-account {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e500');
}
.cf-icon-bank-account-round:before {
  content: "\e501";
}
.lt-ie8 .cf-icon-bank-account-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e501');
}
.cf-icon-credit-card:before {
  content: "\e502";
}
.lt-ie8 .cf-icon-credit-card {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e502');
}
.cf-icon-credit-card-round:before {
  content: "\e503";
}
.lt-ie8 .cf-icon-credit-card-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e503');
}
.cf-icon-loan:before {
  content: "\e504";
}
.lt-ie8 .cf-icon-loan {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e504');
}
.cf-icon-loan-round:before {
  content: "\e505";
}
.lt-ie8 .cf-icon-loan-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e505');
}
.cf-icon-money-transfer:before {
  content: "\e506";
}
.lt-ie8 .cf-icon-money-transfer {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e506');
}
.cf-icon-money-transfer-round:before {
  content: "\e507";
}
.lt-ie8 .cf-icon-money-transfer-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e507');
}
.cf-icon-mortgage:before {
  content: "\e508";
}
.lt-ie8 .cf-icon-mortgage {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e508');
}
.cf-icon-mortgage-round:before {
  content: "\e509";
}
.lt-ie8 .cf-icon-mortgage-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e509');
}
.cf-icon-debt-collection:before {
  content: "\e510";
}
.lt-ie8 .cf-icon-debt-collection {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e510');
}
.cf-icon-debt-collection-round:before {
  content: "\e511";
}
.lt-ie8 .cf-icon-debt-collection-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e511');
}
.cf-icon-credit-report:before {
  content: "\e512";
}
.lt-ie8 .cf-icon-credit-report {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e512');
}
.cf-icon-credit-report-round:before {
  content: "\e513";
}
.lt-ie8 .cf-icon-credit-report-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e513');
}
.cf-icon-money:before {
  content: "\e514";
}
.lt-ie8 .cf-icon-money {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e514');
}
.cf-icon-money-round:before {
  content: "\e515";
}
.lt-ie8 .cf-icon-money-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e515');
}
.cf-icon-quick-cash:before {
  content: "\e516";
}
.lt-ie8 .cf-icon-quick-cash {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e516');
}
.cf-icon-quick-cash-round:before {
  content: "\e517";
}
.lt-ie8 .cf-icon-quick-cash-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e517');
}
.cf-icon-contract:before {
  content: "\e518";
}
.lt-ie8 .cf-icon-contract {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e518');
}
.cf-icon-contract-round:before {
  content: "\e519";
}
.lt-ie8 .cf-icon-contract-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e519');
}
.cf-icon-complaint:before {
  content: "\e520";
}
.lt-ie8 .cf-icon-complaint {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e520');
}
.cf-icon-complaint-round:before {
  content: "\e521";
}
.lt-ie8 .cf-icon-complaint-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e521');
}
.cf-icon-getting-credit-card:before {
  content: "\e522";
}
.lt-ie8 .cf-icon-getting-credit-card {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e522');
}
.cf-icon-getting-credit-card-round:before {
  content: "\e523";
}
.lt-ie8 .cf-icon-getting-credit-card-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e523');
}
.cf-icon-buying-car:before {
  content: "\e524";
}
.lt-ie8 .cf-icon-buying-car {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e524');
}
.cf-icon-buying-car-round:before {
  content: "\e525";
}
.lt-ie8 .cf-icon-buying-car-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e525');
}
.cf-icon-paying-college:before {
  content: "\e526";
}
.lt-ie8 .cf-icon-paying-college {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e526');
}
.cf-icon-paying-college-round:before {
  content: "\e527";
}
.lt-ie8 .cf-icon-paying-college-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e527');
}
.cf-icon-owning-home:before {
  content: "\e528";
}
.lt-ie8 .cf-icon-owning-home {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e528');
}
.cf-icon-owning-home-round:before {
  content: "\e529";
}
.lt-ie8 .cf-icon-owning-home-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e529');
}
.cf-icon-debt:before {
  content: "\e530";
}
.lt-ie8 .cf-icon-debt {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e530');
}
.cf-icon-debt-round:before {
  content: "\e531";
}
.lt-ie8 .cf-icon-debt-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e531');
}
.cf-icon-building-credit:before {
  content: "\e532";
}
.lt-ie8 .cf-icon-building-credit {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e532');
}
.cf-icon-building-credit-round:before {
  content: "\e533";
}
.lt-ie8 .cf-icon-building-credit-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e533');
}
.cf-icon-prepaid-cards:before {
  content: "\e534";
}
.lt-ie8 .cf-icon-prepaid-cards {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e534');
}
.cf-icon-prepaid-cards-round:before {
  content: "\e535";
}
.lt-ie8 .cf-icon-prepaid-cards-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e535');
}
.cf-icon-payday-loan:before {
  content: "\e536";
}
.lt-ie8 .cf-icon-payday-loan {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e536');
}
.cf-icon-payday-loan-round:before {
  content: "\e537";
}
.lt-ie8 .cf-icon-payday-loan-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e537');
}
.cf-icon-retirement:before {
  content: "\e538";
}
.lt-ie8 .cf-icon-retirement {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e538');
}
.cf-icon-retirement-round:before {
  content: "\e539";
}
.lt-ie8 .cf-icon-retirement-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e539');
}
/* topdoc
    name: Web icons
    family: cf-icons
    patterns:
      - name: user
        markup: |
          <span class="cf-icon cf-icon-user"></span>
          <span class="cf-icon cf-icon-user-round"></span>
      - name: wifi
        markup: |
          <span class="cf-icon cf-icon-wifi"></span>
          <span class="cf-icon cf-icon-wifi-round"></span>
      - name: search
        markup: |
          <span class="cf-icon cf-icon-search"></span>
          <span class="cf-icon cf-icon-search-round"></span>
      - name: share
        markup: |
          <span class="cf-icon cf-icon-share"></span>
          <span class="cf-icon cf-icon-share-round"></span>
      - name: link
        markup: |
          <span class="cf-icon cf-icon-link"></span>
          <span class="cf-icon cf-icon-link-round"></span>
      - name: external-link
        markup: |
          <span class="cf-icon cf-icon-external-link"></span>
          <span class="cf-icon cf-icon-external-link-round"></span>
      - name: audio-mute
        markup: |
          <span class="cf-icon cf-icon-audio-mute"></span>
          <span class="cf-icon cf-icon-audio-mute-round"></span>
      - name: audio-low
        markup: |
          <span class="cf-icon cf-icon-audio-low"></span>
          <span class="cf-icon cf-icon-audio-low-round"></span>
      - name: audio-medium
        markup: |
          <span class="cf-icon cf-icon-audio-medium"></span>
          <span class="cf-icon cf-icon-audio-medium-round"></span>
      - name: audio-max
        markup: |
          <span class="cf-icon cf-icon-audio-max"></span>
          <span class="cf-icon cf-icon-audio-max-round"></span>
      - name: favorite
        markup: |
          <span class="cf-icon cf-icon-favorite"></span>
          <span class="cf-icon cf-icon-favorite-round"></span>
      - name: unfavorite
        markup: |
          <span class="cf-icon cf-icon-unfavorite"></span>
          <span class="cf-icon cf-icon-unfavorite-round"></span>
      - name: bookmark
        markup: |
          <span class="cf-icon cf-icon-bookmark"></span>
          <span class="cf-icon cf-icon-bookmark-round"></span>
      - name: unbookmark
        markup: |
          <span class="cf-icon cf-icon-unbookmark"></span>
          <span class="cf-icon cf-icon-unbookmark-round"></span>
      - name: settings
        markup: |
          <span class="cf-icon cf-icon-settings"></span>
          <span class="cf-icon cf-icon-settings-round"></span>
      - name: menu
        markup: |
          <span class="cf-icon cf-icon-menu"></span>
          <span class="cf-icon cf-icon-menu-round"></span>
      - name: lock
        markup: |
          <span class="cf-icon cf-icon-lock"></span>
          <span class="cf-icon cf-icon-lock-round"></span>
      - name: unlock
        markup: |
          <span class="cf-icon cf-icon-unlock"></span>
          <span class="cf-icon cf-icon-unlock-round"></span>
      - name: clock
        markup: |
          <span class="cf-icon cf-icon-clock"></span>
          <span class="cf-icon cf-icon-clock-round"></span>
      - name: chart
        markup: |
          <span class="cf-icon cf-icon-chart"></span>
          <span class="cf-icon cf-icon-chart-round"></span>
      - name: play
        markup: |
          <span class="cf-icon cf-icon-play"></span>
          <span class="cf-icon cf-icon-play-round"></span>
      - name: newspaper
        markup: |
          <span class="cf-icon cf-icon-newspaper"></span>
          <span class="cf-icon cf-icon-newspaper-round"></span>
      - name: microphone
        markup: |
          <span class="cf-icon cf-icon-microphone"></span>
          <span class="cf-icon cf-icon-microphone-round"></span>
      - name: bullhorn
        markup: |
          <span class="cf-icon cf-icon-bullhorn"></span>
          <span class="cf-icon cf-icon-bullhorn-round"></span>
      - name: double-quote
        markup: |
          <span class="cf-icon cf-icon-double-quote"></span>
          <span class="cf-icon cf-icon-double-quote-round"></span>
      - name: speech-bubble
        markup: |
          <span class="cf-icon cf-icon-speech-bubble"></span>
          <span class="cf-icon cf-icon-speech-bubble-round"></span>
      - name: information
        markup: |
          <span class="cf-icon cf-icon-information"></span>
          <span class="cf-icon cf-icon-information-round"></span>
      - name: lightbulb
        markup: |
          <span class="cf-icon cf-icon-lightbulb"></span>
          <span class="cf-icon cf-icon-lightbulb-round"></span>
      - name: dialogue
        markup: |
          <span class="cf-icon cf-icon-dialogue"></span>
          <span class="cf-icon cf-icon-dialogue-round"></span>
      - name: date
        markup: |
          <span class="cf-icon cf-icon-date"></span>
          <span class="cf-icon cf-icon-date-round"></span>
    tags:
      - cf-icons
*/
.cf-icon-user:before {
  content: "\e600";
}
.lt-ie8 .cf-icon-user {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e600');
}
.cf-icon-user-round:before {
  content: "\e601";
}
.lt-ie8 .cf-icon-user-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e601');
}
.cf-icon-wifi:before {
  content: "\e602";
}
.lt-ie8 .cf-icon-wifi {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e602');
}
.cf-icon-wifi-round:before {
  content: "\e603";
}
.lt-ie8 .cf-icon-wifi-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e603');
}
.cf-icon-search:before {
  content: "\e604";
}
.lt-ie8 .cf-icon-search {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e604');
}
.cf-icon-search-round:before {
  content: "\e605";
}
.lt-ie8 .cf-icon-search-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e605');
}
.cf-icon-share:before {
  content: "\e606";
}
.lt-ie8 .cf-icon-share {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e606');
}
.cf-icon-share-round:before {
  content: "\e607";
}
.lt-ie8 .cf-icon-share-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e607');
}
.cf-icon-link:before {
  content: "\e608";
}
.lt-ie8 .cf-icon-link {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e608');
}
.cf-icon-link-round:before {
  content: "\e609";
}
.lt-ie8 .cf-icon-link-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e609');
}
.cf-icon-external-link:before {
  content: "\e610";
}
.lt-ie8 .cf-icon-external-link {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e610');
}
.cf-icon-external-link-round:before {
  content: "\e611";
}
.lt-ie8 .cf-icon-external-link-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e611');
}
.cf-icon-audio-mute:before {
  content: "\e612";
}
.lt-ie8 .cf-icon-audio-mute {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e612');
}
.cf-icon-audio-mute-round:before {
  content: "\e616";
}
.lt-ie8 .cf-icon-audio-mute-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e616');
}
.cf-icon-audio-low:before {
  content: "\e613";
}
.lt-ie8 .cf-icon-audio-low {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e613');
}
.cf-icon-audio-low-round:before {
  content: "\e617";
}
.lt-ie8 .cf-icon-audio-low-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e617');
}
.cf-icon-audio-medium:before {
  content: "\e614";
}
.lt-ie8 .cf-icon-audio-medium {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e614');
}
.cf-icon-audio-medium-round:before {
  content: "\e618";
}
.lt-ie8 .cf-icon-audio-medium-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e618');
}
.cf-icon-audio-max:before {
  content: "\e615";
}
.lt-ie8 .cf-icon-audio-max {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e615');
}
.cf-icon-audio-max-round:before {
  content: "\e619";
}
.lt-ie8 .cf-icon-audio-max-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e619');
}
.cf-icon-favorite:before {
  content: "\e620";
}
.lt-ie8 .cf-icon-favorite {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e620');
}
.cf-icon-favorite-round:before {
  content: "\e621";
}
.lt-ie8 .cf-icon-favorite-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e621');
}
.cf-icon-unfavorite:before {
  content: "\e622";
}
.lt-ie8 .cf-icon-unfavorite {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e622');
}
.cf-icon-unfavorite-round:before {
  content: "\e623";
}
.lt-ie8 .cf-icon-unfavorite-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e623');
}
.cf-icon-bookmark:before {
  content: "\e624";
}
.lt-ie8 .cf-icon-bookmark {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e624');
}
.cf-icon-bookmark-round:before {
  content: "\e625";
}
.lt-ie8 .cf-icon-bookmark-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e625');
}
.cf-icon-unbookmark:before {
  content: "\e626";
}
.lt-ie8 .cf-icon-unbookmark {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e626');
}
.cf-icon-unbookmark-round:before {
  content: "\e627";
}
.lt-ie8 .cf-icon-unbookmark-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e627');
}
.cf-icon-settings:before {
  content: "\e628";
}
.lt-ie8 .cf-icon-settings {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e628');
}
.cf-icon-settings-round:before {
  content: "\e629";
}
.lt-ie8 .cf-icon-settings-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e629');
}
.cf-icon-menu:before {
  content: "\e630";
}
.lt-ie8 .cf-icon-menu {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e630');
}
.cf-icon-menu-round:before {
  content: "\e631";
}
.lt-ie8 .cf-icon-menu-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e631');
}
.cf-icon-lock:before {
  content: "\e632";
}
.lt-ie8 .cf-icon-lock {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e632');
}
.cf-icon-lock-round:before {
  content: "\e633";
}
.lt-ie8 .cf-icon-lock-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e633');
}
.cf-icon-unlock:before {
  content: "\e634";
}
.lt-ie8 .cf-icon-unlock {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e634');
}
.cf-icon-unlock-round:before {
  content: "\e635";
}
.lt-ie8 .cf-icon-unlock-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e635');
}
.cf-icon-clock:before {
  content: "\e636";
}
.lt-ie8 .cf-icon-clock {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e636');
}
.cf-icon-clock-round:before {
  content: "\e637";
}
.lt-ie8 .cf-icon-clock-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e637');
}
.cf-icon-chart:before {
  content: "\e638";
}
.lt-ie8 .cf-icon-chart {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e638');
}
.cf-icon-chart-round:before {
  content: "\e639";
}
.lt-ie8 .cf-icon-chart-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e639');
}
.cf-icon-play:before {
  content: "\e640";
}
.lt-ie8 .cf-icon-play {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e640');
}
.cf-icon-play-round:before {
  content: "\e641";
}
.lt-ie8 .cf-icon-play-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e641');
}
.cf-icon-newspaper:before {
  content: "\e700";
}
.lt-ie8 .cf-icon-newspaper {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e700');
}
.cf-icon-newspaper-round:before {
  content: "\e701";
}
.lt-ie8 .cf-icon-newspaper-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e701');
}
.cf-icon-microphone:before {
  content: "\e702";
}
.lt-ie8 .cf-icon-microphone {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e702');
}
.cf-icon-microphone-round:before {
  content: "\e703";
}
.lt-ie8 .cf-icon-microphone-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e703');
}
.cf-icon-bullhorn:before {
  content: "\e704";
}
.lt-ie8 .cf-icon-bullhorn {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e704');
}
.cf-icon-bullhorn-round:before {
  content: "\e705";
}
.lt-ie8 .cf-icon-bullhorn-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e705');
}
.cf-icon-double-quote:before {
  content: "\e708";
}
.lt-ie8 .cf-icon-double-quote {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e708');
}
.cf-icon-double-quote-round:before {
  content: "\e709";
}
.lt-ie8 .cf-icon-double-quote-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e709');
}
.cf-icon-speech-bubble:before {
  content: "\e710";
}
.lt-ie8 .cf-icon-speech-bubble {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e710');
}
.cf-icon-speech-bubble-round:before {
  content: "\e711";
}
.lt-ie8 .cf-icon-speech-bubble-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e711');
}
.cf-icon-information:before {
  content: "\e712";
}
.lt-ie8 .cf-icon-information {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e712');
}
.cf-icon-information-round:before {
  content: "\e713";
}
.lt-ie8 .cf-icon-information-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e713');
}
.cf-icon-lightbulb:before {
  content: "\e714";
}
.lt-ie8 .cf-icon-lightbulb {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e714');
}
.cf-icon-lightbulb-round:before {
  content: "\e715";
}
.lt-ie8 .cf-icon-lightbulb-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e715');
}
.cf-icon-dialogue:before {
  content: "\e716";
}
.lt-ie8 .cf-icon-dialogue {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e716');
}
.cf-icon-dialogue-round:before {
  content: "\e717";
}
.lt-ie8 .cf-icon-dialogue-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e717');
}
.cf-icon-date:before {
  content: "\e718";
}
.lt-ie8 .cf-icon-date {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e718');
}
.cf-icon-date-round:before {
  content: "\e719";
}
.lt-ie8 .cf-icon-date-round {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\e719');
}
/* topdoc
  name: EOF
  eof: true
*/
/* ==========================================================================
   Capital Framework
   Layout Helpers
   ========================================================================== */
/* topdoc
  name: Content layouts
  family: cf-layout
  patterns:
    - name: Standard content columns
      markup: |
        <div class="content-l">
            <div class="content-l_col content-l_col-1">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;
                            margin-bottom: 4px;">
                    Full-width column (spans 12 columns)
                </div>
            </div>
        </div>
        <div class="content-l">
            <div class="content-l_col content-l_col-1-2">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;
                            margin-bottom: 4px;">
                    Half-width column (spans 6/12 columns)
                </div>
            </div>
            <div class="content-l_col content-l_col-1-2">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;
                            margin-bottom: 4px;">
                    Half-width column (spans 6/12 columns)
                </div>
            </div>
        </div>
        <div class="content-l">
            <div class="content-l_col content-l_col-1-3">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;
                            margin-bottom: 4px;">
                    Third-width column (spans 4/12 columns)
                </div>
            </div>
            <div class="content-l_col content-l_col-1-3">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;
                            margin-bottom: 4px;">
                    Third-width column (spans 4/12 columns)
                </div>
            </div>
            <div class="content-l_col content-l_col-1-3">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;
                            margin-bottom: 4px;">
                    Third-width column (spans 4/12 columns)
                </div>
            </div>
        </div>
        <div class="content-l">
            <div class="content-l_col content-l_col-2-3">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;">
                    Two thirds-width column (spans 8/12 columns)
                </div>
            </div>
        </div>
      codenotes:
        - |
          Structural cheat sheet:
          -----------------------
          .content-l
            .content-l_col.content-l_col-(RATIO)
        - .content-l_col.content-l_col-1
        - .content-l_col.content-l_col-1-2
        - .content-l_col.content-l_col-1-3
        - .content-l_col.content-l_col-2-3
      notes:
        - "These layout classes have breakpoints that are specific for use
           within .content_main."
        - "Since .content-l_col's are nested within .content_main extra
           margins will occur. The .content-l container uses the
           grid_nested-col-group mixin to counter this."
        - "Note that the divs with inline styles are for demonstration purposes
           only and should not be used in production."
    - name: .content-l_col__stack-on-cols (modifier)
      markup: |
            <div class="content-l_col content-l_col__stack-on-cols content-l_col-1-2">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;">
                    Half-width column from 600px to 801px
                </div>
            </div>
            <div class="content-l_col content-l_col__stack-on-cols content-l_col-1-2">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;">
                    Half-width column from 600px to 801px
                </div>
            </div>
      codenotes:
        - .content-l_col__stack-on-cols
      notes:
        - "A modifier that allows you to have columns that behave as normal but
           stack at the larger multi-column views. For example a
           .content-l_col-1-2 would stack as normal from 0-599px, at 600px it
           would convert into a column, and at 801px it would stack again."
        - "This is really only useful for .content-l_col-1-2 since there is a
           decent range between when it becomes a column (600px) to when the
           modifier converts it back into a full-width container (801px).
           .content-l_col-1-3 on the other hand would have a much smaller range,
           768 to 801px."
    - name: Large gutters modifier
      markup: |
        <div class="content-l content-l__large-gutters">
            <div class="content-l_col content-l_col-1">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;
                            margin-bottom: 4px;">
                    Full-width column (spans 12 columns)
                </div>
            </div>
        </div>
        <div class="content-l content-l__large-gutters">
            <div class="content-l_col content-l_col-1-2">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;
                            margin-bottom: 4px;">
                    Half-width column (spans 6/12 columns)
                </div>
            </div>
            <div class="content-l_col content-l_col-1-2">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;
                            margin-bottom: 4px;">
                    Half-width column (spans 6/12 columns)
                </div>
            </div>
        </div>
        <div class="content-l content-l__large-gutters">
            <div class="content-l_col content-l_col-1-3">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;
                            margin-bottom: 4px;">
                    Third-width column (spans 4/12 columns)
                </div>
            </div>
            <div class="content-l_col content-l_col-1-3">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;
                            margin-bottom: 4px;">
                    Third-width column (spans 4/12 columns)
                </div>
            </div>
            <div class="content-l_col content-l_col-1-3">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;
                            margin-bottom: 4px;">
                    Third-width column (spans 4/12 columns)
                </div>
            </div>
        </div>
        <div class="content-l content-l__large-gutters">
            <div class="content-l_col content-l_col-2-3">
                <div style="background: #F1F2F2;
                            text-align: center;
                            padding: 8px;">
                    Two thirds-width column (spans 8/12 columns)
                </div>
            </div>
        </div>
      codenotes:
        - .content-l.content-l__large-gutters
      notes:
        - "Adds 30px gutters to all columns by simply adding the
           .content-l__large-gutters modifier."
  tags:
    - cf-layout
*/
.content-l {
  position: relative;
}
@media only all and (min-width: 37.5em) {
  .content-l {
    display: block;
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
  }
}
@media only all and (min-width: 37.5em) {
  .content-l__large-gutters {
    margin-left: -30px;
    margin-right: -30px;
  }
  .content-l__large-gutters .content-l_col {
    border-left-width: 30px;
    border-right-width: 30px;
  }
}
.content-l_col + .content-l_col {
  margin-top: 1.875em;
}
@media only all and (min-width: 37.5em) {
  .content-l_col.content-l_col-1-2 + .content-l_col.content-l_col-1-2 {
    margin-top: 0;
  }
}
@media only all and (min-width: 48em) {
  .content-l_col.content-l_col-1-3 + .content-l_col.content-l_col-1-3,
  .content-l_col.content-l_col-3-8 + .content-l_col.content-l_col-3-8,
  .content-l_col.content-l_col-3-8 + .content-l_col.content-l_col-5-8,
  .content-l_col.content-l_col-5-8 + .content-l_col.content-l_col-3-8 {
    margin-top: 0;
  }
}
@media only all and (min-width: 37.5em) {
  .content-l_col-1 {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 100%;
  }
  .lt-ie8 .content-l_col-1 {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
@media only all and (min-width: 37.5em) {
  .content-l_col-1-2 {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 50%;
  }
  .lt-ie8 .content-l_col-1-2 {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
@media only all and (min-width: 37.5em) {
  .content-l_col-1-3 {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 100%;
  }
  .lt-ie8 .content-l_col-1-3 {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
@media only all and (min-width: 48em) {
  .content-l_col-1-3 {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 33.33333333%;
  }
  .lt-ie8 .content-l_col-1-3 {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
@media only all and (min-width: 37.5em) {
  .content-l_col-2-3 {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 100%;
  }
  .lt-ie8 .content-l_col-2-3 {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
@media only all and (min-width: 48em) {
  .content-l_col-2-3 {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 66.66666667%;
  }
  .lt-ie8 .content-l_col-2-3 {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
@media only all and (min-width: 37.5em) {
  .content-l_col-3-8 {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 100%;
  }
  .lt-ie8 .content-l_col-3-8 {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
@media only all and (min-width: 48em) {
  .content-l_col-3-8 {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 37.5%;
  }
  .lt-ie8 .content-l_col-3-8 {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
@media only all and (min-width: 37.5em) {
  .content-l_col-5-8 {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 100%;
  }
  .lt-ie8 .content-l_col-5-8 {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
@media only all and (min-width: 48em) {
  .content-l_col-5-8 {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 62.5%;
  }
  .lt-ie8 .content-l_col-5-8 {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
@media only all and (min-width: 50.0625em) {
  .content-l_col__stack-on-cols {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 100%;
  }
  .lt-ie8 .content-l_col__stack-on-cols {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
/* topdoc
  name: Content layout column dividers
  family: cf-layout
  notes:
    - "Adds dividers between specified .content-l_col-X-X classes."
    - "Layout dividers work in conjunction with .content-l_col-X-X elements and
       have specific needs depending on which column element variant they are
       attached to. For example .content-l_col-1-2 has different divider needs
       than .content-l_col-1-3 because they break to single columns at different
       breakpoints."
    - "Dividers use absolute positioning relative to the .content-l element and
       depends on .content-l using `position: relative;`. This allows vertical
       dividers to span the height of the tallest column. Just be aware that if
       you have more than one row of columns, and each row has columns of
       different widths, the borders will cause unwanted overlapping since they
       will span the height of the entire .content-l element."
  patterns:
    - name: .content-l_col__before-divider (modifier)
      markup: |
        <div class="content-l content-l__large-gutters">
            <div class="content-l_col content-l_col-1-2">
                <img src="http://placekitten.com/600/320">
                <br>
                Half-width column (spans 6/12 columns)
            </div>
            <div class="content-l_col content-l_col-1-2 content-l_col__before-divider">
                <img src="http://placekitten.com/600/320">
                <br>
                Half-width column (spans 6/12 columns)
            </div>
        </div>
        <br>
        <!-- Starting a new .content-l so that the dividers from
             .content-l_col.content-l_col-1-2.content-l_col__before-divider
             won't overlap the .content-l_col-1-3 columns. -->
        <div class="content-l content-l__large-gutters">
            <div class="content-l_col content-l_col-1-3">
                Third-width column (spans 4/12 columns)
            </div>
            <div class="content-l_col content-l_col-1-3 content-l_col__before-divider">
                Third-width column (spans 4/12 columns)
            </div>
            <div class="content-l_col content-l_col-1-3 content-l_col__before-divider">
                Third-width column (spans 4/12 columns)
            </div>
        </div>
      codenotes:
        - .content-l_col__before-divider
  tags:
    - cf-layout
*/
@media only all and (max-width: 37.4375em) {
  .content-l_col__before-divider.content-l_col-1-2 {
    margin-top: 3.75em;
  }
  .content-l_col__before-divider.content-l_col-1-2:before {
    content: "";
    display: block;
    height: 1px;
    margin-bottom: 1.875em;
    background-color: #babbbd;
  }
}
@media only all and (min-width: 37.5em) {
  .content-l_col__before-divider.content-l_col-1-2 {
    border-left-width: 30px;
  }
  .content-l_col__before-divider.content-l_col-1-2:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    display: block;
    background-color: #babbbd;
    margin-left: -30px;
  }
}
@media only all and (max-width: 47.9375em) {
  .content-l_col__before-divider.content-l_col-1-3 {
    margin-top: 3.75em;
  }
  .content-l_col__before-divider.content-l_col-1-3:before {
    content: "";
    display: block;
    height: 1px;
    margin-bottom: 1.875em;
    background-color: #babbbd;
  }
}
@media only all and (min-width: 48em) {
  .content-l_col__before-divider.content-l_col-1-3 {
    border-left-width: 30px;
  }
  .content-l_col__before-divider.content-l_col-1-3:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    display: block;
    background-color: #babbbd;
    margin-left: -30px;
  }
}
/* topdoc
  name: Content bar
  family: cf-layout
  patterns:
    - name: A 10 pixel bar that divides the header or hero from the main content
      markup: |
        <div class="content_bar"></div>
      notes:
        - "This is necessary because we don't have a predictable place to put a
           full-width border. It needs to be under the hero on pages with
           heroes, but under the header if there is no hero."
        - ".content_bar must come after .content_hero but before .content_wrapper"
  tags:
    - cf-layout
*/
.content_bar {
  height: 10px;
  background: #2cb34a;
}
/* topdoc
  name: Content line
  family: cf-layout
  patterns:
    - name: "A 1 pixel edge to edge bar that can divide content."
      markup: |
        <div class="content_line"></div>
  tags:
    - cf-layout
*/
.content_line {
  height: 1px;
  background: #babbbd;
}
/* topdoc
  name: Main content and sidebar
  family: cf-layout
  patterns:
    - name: Standard layout for the main content area and sidebar
      markup: |
        <main class="content" id="main" role="main">
            <section class="content_hero" style="background: #E3E4E5">
                Content hero
            </section>
            <div class="content_bar"></div>
            <div class="content_wrapper">
                <section class="content_main">
                    Main content area
                </section>
                <aside class="content_sidebar" style="background: #F1F2F2">
                    Sidebar
                </aside>
            </div>
        </main>
      codenotes:
        - |
          Structural cheat sheet:
          -----------------------
          main.content
            .content_hero
            .content_bar
            .content_wrapper
              .content_sidebar
              .content_main
      notes:
        - "By default .content_main and .content_sidebar stack vertically. When
           using the modifiers described below to create columns, the columns
           will remain stacked for smaller screens and then convert to to
           columns at 801px."
        - ".content_bar must come after .content_hero (if it exists) but before
           .content_wrapper."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
    - name: Left-hand navigation layout
      markup: |
        <main class="content content__1-3" id="main" role="main">
            <div class="content_bar"></div>
            <div class="content_wrapper">
                <aside class="content_sidebar">
                    Section navigation
                </aside>
                <section class="content_main">
                    <h2>Main content area</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Cum corrupti tempora nam nihil qui mollitia consectetur
                        corporis nemo culpa dolorum! Laborum at eos deleniti
                        consequatur itaque officiis debitis quisquam! Provident!
                    </p>
                </section>
            </div>
        </main>
        <footer class="footer" role="contentinfo">
            <div class="wrapper">
                Footer
            </div>
        </footer>
      codenotes:
        - .content__1-3
      notes:
        - "Add a class of .content__L-R to main.content to determine the width
           ratio of .content_main and .content_sidebar, where 'L' is the
           left-hand item and 'R' is the right-hand item. The two common
           configurations are 1-3 (sidebar on the left, content on the right, in
           a ratio of 1:3) and 2-1 (content on the left, sidebar on the right,
           in a ratio of 2:1). It is assumed that the content is wider than the
           sidebar."
    - name: Right-hand sidebar layout
      markup: |
        <main class="content content__2-1" id="main" role="main">
            <div class="content_bar"></div>
            <div class="content_wrapper">
                <section class="content_main">
                    <h2>Main content area</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Cum corrupti tempora nam nihil qui mollitia consectetur
                        corporis nemo culpa dolorum! Laborum at eos deleniti
                        consequatur itaque officiis debitis quisquam! Provident!
                    </p>
                </section>
                <aside class="content_sidebar" style="background: #F1F2F2">
                    Sidebar
                </aside>
            </div>
        </main>
        <footer class="footer" role="contentinfo">
            <div class="wrapper">
                Footer
            </div>
        </footer>
      codenotes:
        - .content__2-1
      notes:
        - "Add a class of .content__L-R to main.content to determine the width
           ratio of .content_main and .content_sidebar, where 'L' is the
           left-hand item and 'R' is the right-hand item. The two common
           configurations are 1-3 (sidebar on the left, content on the right, in
           a ratio of 1:3) and 2-1 (content on the left, sidebar on the right,
           in a ratio of 2:1). It is assumed that the content is wider than the
           sidebar."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
    - name: Narrow content column option
      markup: |
        <main class="content content__2-1" id="main" role="main">
            <div class="content_bar"></div>
            <div class="content_wrapper">
                <section class="content_main content_main__narrow">
                    <h2>Main content area</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Cum corrupti tempora nam nihil qui mollitia consectetur
                        corporis nemo culpa dolorum! Laborum at eos deleniti
                        consequatur itaque officiis debitis quisquam! Provident!
                    </p>
                </section>
                <aside class="content_sidebar" style="background: #F1F2F2">
                    Sidebar
                </aside>
            </div>
        </main>
        <footer class="footer" role="contentinfo">
            <div class="wrapper">
                Footer
            </div>
        </footer>
      codenotes:
        - .content_main__narrow
      notes:
        - "Add a class of .content_main__narrow to .content_main to get a
           one-column (in a 12-column grid) gutter on the right side."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
    - name: Flush bottom modifier
      markup: |
        <main class="content content__1-3" id="main" role="main">
            <div class="content_bar"></div>
            <div class="content_wrapper">
                <aside class="content_sidebar content__flush-bottom">
                    Side with no bottom padding...
                </aside>
                <section class="content_main content__flush-bottom">
                    Main content with no bottom padding...
                    <div class="block
                                block__flush-bottom
                                block__flush-sides
                                block__bg">
                        .content__flush-bottom is very useful when you have a
                        content block inside of .content_main with a background
                        and flush sides.
                    </div>
                </section>
            </div>
        </main>
        <footer class="footer" role="contentinfo">
            <div class="wrapper">
                Footer
            </div>
        </footer>
      codenotes:
        - .content__flush-bottom
      notes:
        - "Add a class of .content__flush-bottom to .content_main or
           content_sidebar to remove bottom padding."
    - name: Flush top modifier (only on small screens)
      markup: |
        <main class="content content__1-3" id="main" role="main">
            <div class="content_bar"></div>
            <div class="content_wrapper">
                <aside class="content_sidebar content__flush-top-on-small">
                    Side with no top padding on small screens...
                </aside>
                <section class="content_main">
                    Main content
                </section>
            </div>
        </main>
        <footer class="footer" role="contentinfo">
            <div class="wrapper">
                Footer
            </div>
        </footer>
      codenotes:
        - .content__flush-top-on-small
      notes:
        - "Add a class of .content__flush-top-on-small to .content_main or
           .content_sidebar to remove top padding on small screens only.
           'Small' screens in this case refers to the breakpoint where
           .content_main and .content_sidebar single column layout."
    - name: Flush all modifier (only on small screens)
      markup: |
        <main class="content content__1-3" id="main" role="main">
            <div class="content_bar"></div>
            <div class="content_wrapper">
                <aside class="content_sidebar content__flush-all-on-small">
                    Side with no padding or border-based gutters on small screens...
                </aside>
                <section class="content_main">
                    Main content
                </section>
            </div>
        </main>
        <footer class="footer" role="contentinfo">
            <div class="wrapper">
                Footer
            </div>
        </footer>
      codenotes:
        - .content__flush-all-on-small
      notes:
        - "Add a class of .content__flush-all-on-small to .content_main or
           .content_sidebar to remove all padding and border-based gutters on
           small screens only. 'Small' screens in this case refers to the
           breakpoint where .content_main and .content_sidebar single column layout."
  tags:
    - cf-layout
*/
.content_intro,
.content_main,
.content_sidebar {
  padding: 1.875em 0.9375em;
}
@media only all and (min-width: 37.5em) {
  .content_intro,
  .content_main,
  .content_sidebar {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 100%;
    padding: 3.75em 0.9375em;
  }
  .lt-ie8 .content_intro,
  .lt-ie8 .content_main,
  .lt-ie8 .content_sidebar {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
@media only all and (min-width: 50.0625em) {
  .content_intro,
  .content_main,
  .content_sidebar {
    padding: 3.75em 0;
  }
}
@media only all and (min-width: 50.0625em) {
  .content_intro {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 100%;
  }
  .lt-ie8 .content_intro {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
@media only all and (min-width: 50.0625em) {
  .content__1-3 .content_sidebar {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 25%;
    padding-right: 1.875em;
  }
  .lt-ie8 .content__1-3 .content_sidebar {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
  .content__1-3 .content_main {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 75%;
    position: relative;
  }
  .lt-ie8 .content__1-3 .content_main {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
  .content__1-3 .content_main:after {
    content: '';
    border-left: 1px solid #babbbd;
    position: absolute;
    top: 3.75em;
    bottom: 0;
    left: -1.875em;
  }
  .content__2-1 .content_main {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 66.66666667%;
  }
  .lt-ie8 .content__2-1 .content_main {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
  .content__2-1 .content_main:after {
    right: -1.875em;
  }
  .content__2-1 .content_sidebar {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 33.33333333%;
    padding-left: 1.875em;
  }
  .lt-ie8 .content__2-1 .content_sidebar {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
}
@media only all and (min-width: 64em) {
  .content__2-1 .content_main__narrow {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 0 15px;
    margin-right: -0.25em;
    vertical-align: top;
    width: 66.66666667%;
    padding-right: 8.33333333%;
  }
  .lt-ie8 .content__2-1 .content_main__narrow {
    display: inline;
    margin-right: 0;
    zoom: 1;
    behavior: url('/cf-grid/custom-demo/static/css/boxsizing.htc');
  }
  .lt-ie8 .content__2-1 .content_main__narrow {
    padding-right: 0;
  }
}
.content__flush-bottom {
  padding-bottom: 0;
}
@media only all and (max-width: 50em) {
  .content__flush-top-on-small {
    padding-top: 0;
  }
}
@media only all and (max-width: 50em) {
  .content__flush-all-on-small {
    padding: 0;
    border-width: 0;
  }
}
/* topdoc
  name: Block
  family: cf-layout
  notes:
    - ".block is a base class with several modifiers that help you separate
       chunks of content via margins, padding, borders, and backgrounds."
  patterns:
    - name: Standard block example
      markup: |
        Main content...
        <div class="block">
            Content block
        </div>
        <div class="block">
            Content block
        </div>
        <div class="block">
            Content block
        </div>
      codenotes:
        - .block
      notes:
        - "The standard .block class by itself simply adds a margin of twice the
           gutter width to the top and bottom."
    - name: Flush-top modifier
      markup: |
        Main content...
        <div class="block block__flush-top">
            Content block with no top margin.
        </div>
        <div class="block">
            Content block
        </div>
      codenotes:
        - .block.block__flush-top
      notes:
        - "Removes the top margin from .block."
    - name: Flush-bottom modifier
      markup: |
        Main content...
        <div class="block block__flush-bottom">
            Content block with no bottom margin.
        </div>
        <div class="block block__flush-top">
            Content block with no top margin.
        </div>
      codenotes:
        - .block.block__flush-bottom
      notes:
        - "Removes the bottom margin from .block."
    - name: Flush-sides modifier
      markup: |
        <main class="content content__1-3" id="main" role="main">
            <div class="content_wrapper">
                <aside class="content_sidebar">
                    Section navigation
                </aside>
                <section class="content_main">
                    Main content...
                    <aside class="block block__flush-sides">
                        Content block with no side margins.
                    </aside>
                </section>
            </div>
        </main>
      codenotes:
        - .block.block__flush-sides
      notes:
        - "Removes the side margin from .block."
        - "Typically used in conjuction with .block__bg to create a 'well' whose
           background extends into the left and right gutters. (See below.)"
    - name: Border-top modifier
      markup: |
        Main content...
        <div class="block block__border-top">
            Content block with top border.
        </div>
      codenotes:
        - .block.block__border-top
      notes:
        - "Adds top border to .block."
    - name: Border-bottom modifier
      markup: |
        Main content...
        <div class="block block__border-bottom">
            Content block with bottom border.
        </div>
      codenotes:
        - .block.block__border-bottom
      notes:
        - "Adds bottom border to .block."
    - name: Padded-top modifier
      markup: |
        Main content...
        <div class="block block__padded-top block__border-top">
            Content block with reduced top margin & added top padding
            and border.
        </div>
      codenotes:
        - .block.block__padded-top
      notes:
        - "Breaks top margin into margin & padding. Useful in combination with
           block__border-top to add padding between block contents & border."
    - name: Padded-bottom modifier
      markup: |
        <div class="block block__padded-bottom block__border-bottom">
            Content block with reduced bottom margin & added bottom padding
            and border.
        </div>
        Content...
      codenotes:
        - .block.block__padded-bottom
      notes:
        - "Breaks bottom margin into margin & padding. Useful in combination with
           block__border-bottom to add padding between block contents & border."
    - name: Background modifier
      markup: |
        Main content...
        <div class="block block__bg">
            Content block with a background
        </div>
      codenotes:
        - .block.block__bg
      notes:
        - "Adds a background color and padding to .block."
    - name: Background and flush-sides modifier combo example
      markup: |
        <main class="content content__1-3" id="main" role="main">
            <div class="content_wrapper">
                <aside class="content_sidebar">
                    Section navigation
                </aside>
                <section class="content_main content__flush-bottom">
                    Main content...
                    <div class="block block__flush-sides block__bg">
                        Content block with a background and flush sides
                    </div>
                </section>
            </div>
        </main>
      codenotes:
        - .block.block__flush-sides.block__bg
      notes:
        - "This is an example of combining modifiers to get a flush padded bg
           with a .block."
    - name: Sub blocks
      markup: |
        <div class="block block__sub">
            <div style="background: #F1F2F2; padding: 8px;">
                Sub content block
            </div>
        </div>
        <div class="block block__sub">
            <div style="background: #F1F2F2; padding: 8px;">
                Sub content block
            </div>
        </div>
        <div class="block block__sub">
            <div style="background: #F1F2F2; padding: 8px;">
                Sub content block
            </div>
        </div>
      codenotes:
        - .block.block__sub
      notes:
        - "Useful for when you need some consistent margins between
           blocks that are nested within other blocks."
        - "Note that the divs with inline styles are for demonstration purposes
           only and should not be used in production."
    - name: Mixing content blocks with content layouts
      markup: |
        <div class="content-l">
            <div class="block content-l_col content-l_col-1-2">
                <div style="background: #F1F2F2; padding: 8px;">
                    Content block that is also a content column.
                    Notice how my top margins only exist on smaller screens when
                    I need to stack vertically.
                </div>
            </div>
            <div class="block content-l_col content-l_col-1-2">
                <div style="background: #F1F2F2; padding: 8px;">
                    Content block that is also a content column.
                    Notice how my top margins only exist on smaller screens when
                    I need to stack vertically.
                </div>
            </div>
        </div>
      codenotes:
        - .block.content-l_col
      notes:
        - "You can safely combine .block with .content-l_col to
           achieve a column-based layout at larger screens with no top margins
           and a vertical layout at smaller screens that do have margins."
        - "Note that the divs with inline styles are for demonstration purposes
           only and should not be used in production."
  tags:
    - cf-layout
*/
.block {
  margin-top: 3.75em;
  margin-bottom: 3.75em;
}
.block__border-top {
  border-top: 1px solid #babbbd;
}
.block__border-bottom {
  border-bottom: 1px solid #babbbd;
}
.block__flush-top {
  margin-top: 0 !important;
}
.block__flush-bottom {
  margin-bottom: 0 !important;
}
.block__flush-sides {
  margin-right: -15px;
  margin-left: -15px;
}
@media only all and (min-width: 37.5em) {
  .block__flush-sides {
    margin-right: -30px;
    margin-left: -30px;
  }
}
.block__bg {
  padding: 1.875em 0.9375em;
  background: #f1f2f2;
}
@media only all and (min-width: 37.5em) {
  .block__bg {
    padding: 2.8125em 1.875em;
  }
}
.block__padded-top {
  padding-top: 1.875em;
  margin-top: 1.875em;
}
.block__padded-bottom {
  padding-bottom: 1.875em;
  margin-bottom: 1.875em;
}
.block__sub {
  margin-top: 1.875em;
  margin-bottom: 1.875em;
}
@media only all and (min-width: 37.5em) {
  .content-l_col.block,
  .content-l_col.block__sub {
    margin-top: 0;
  }
}
/* topdoc
  name: Bleedbar sidebar styling
  family: cf-layout
  patterns:
    - name: Give the sidebar a background color that bleeds off the edge of the screen
      markup: |
        <main class="content content__2-1 content__bleedbar" id="main" role="main">
            <section class="content_hero" style="background: #E3E4E5">
                Content hero
            </section>
            <div class="content_bar"></div>
            <div class="content_wrapper">
                <section class="content_main">
                    Main content area
                </section>
                <aside class="content_sidebar">
                    Bleeding sidebar
                </aside>
            </div>
        </main>
      codenotes:
        - ".content__bleedbar"
      notes:
        - "Simply add class .content__bleedbar to main.content."
        - "Only supports sidebars on the right, for now."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
  tags:
    - cf-layout
*/
.content__bleedbar .content_main:after {
  content: none;
}
.content__bleedbar .content_sidebar {
  padding: 1.875em 0.9375em;
  background: #f1f2f2;
}
@media only all and (min-width: 50.0625em) {
  .content__bleedbar {
    overflow: hidden;
  }
  .content__bleedbar .content_sidebar {
    padding: 3.75em 0 0.9375em 1.875em;
    margin-left: 0;
    position: relative;
    z-index: 1;
    background: transparent;
  }
  .lt-ie8 .content__bleedbar .content_sidebar {
    padding-right: 30px;
    background: #f1f2f2;
  }
  .content__bleedbar .content_wrapper:after {
    content: '';
    display: block;
    width: 9999px;
    border-left: 1px solid #babbbd;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 0;
    margin-left: 10px;
    background: #f1f2f2;
  }
  .content__bleedbar.content__2-1 .content_wrapper:after {
    left: 66.666666667%;
  }
  .content__bleedbar.content__3-1 .content_wrapper:after {
    left: 75%;
  }
}
/* topdoc
  name: cf-grid helpers
  family: cf-layout
  patterns:
    - name: .wrapper (base)
      markup: |
        <div class="wrapper">
            Wrapper
        </div>
      notes:
        - "Turns an element into a cf-grid wrapper at 801px and above."
        - "Includes some explicit declarations for IE8 due to the fact that it
           doesn't support media queries."
    - name: .wrapper__match-content (modifier)
      markup: |
        <div class="wrapper wrapper__match-content">
            <code>.wrapper.wrapper__match-content</code>
            <img src="http://placekitten.com/800/40">
        </div>
        <br>
        <main class="content" id="main" role="main">
            <div class="content_wrapper">
                <section class="content_main">
                    <code>.content_wrapper .content_main</code>
                    <img src="http://placekitten.com/800/40">
                </section>
            </div>
        </main>
      notes:
        - "The .content area has a visual gutter twice the size of a normal
           wrapper because the gutters from the sidebar and main content divs
           add to the gutters of the wrapper. This modifier gives you a wrapper
           with wider gutters to match the visual gutters of the .content area."
    - name: Column divider modifiers
      notes:
        - "cf-grid columns use left and right borders for fixed margins which
           means it's not possible to set visual left and right borders directly
           on them. Instead we can use the :before pseudo element and position
           it absolutely. The added benefit of doing it this way is that the
           border spans the entire height of the next parent using `position:
           relative;`. This means that the border will always match the height
           of the tallest column in the row."
      codenotes:
        - .grid_column__top-divider
        - .grid_column__left-divider
        - |
          .my-column-1-2 {

              // Creates a column that spans 6 out of 12 columns.
              .grid_column(6, 12);

              // Add a top divider only at screen 599px and smaller.
              .respond-to-max(599px {
                  .grid_column__top-divider();
              });

              // Add a left divider only at screen 600px and larger.
              .respond-to-min(600px, {
                  .grid_column__left-divider();
              });

          }
  tags:
    - cf-layout
*/
@media only all and (min-width: 50.0625em) {
  .wrapper,
  .content_wrapper {
    max-width: 1170px;
    padding: 0 15px;
    margin: 0 auto;
    position: relative;
    clear: both;
  }
}
.wrapper__match-content,
.content_wrapper__match-content {
  padding-left: 15px;
  padding-right: 15px;
}
@media only all and (min-width: 37.5em) {
  .wrapper__match-content,
  .content_wrapper__match-content {
    padding-left: 30px;
    padding-right: 30px;
    max-width: 1140px;
  }
}
.lt-ie9 .wrapper,
.lt-ie9 .content_wrapper {
  max-width: 960px;
}
.lt-ie9 body {
  min-width: 800px;
}
.grid_column__top-divider {
  margin-top: 3.75em;
}
.grid_column__top-divider:before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 1.875em;
  background-color: #babbbd;
}
.grid_column__left-divider {
  border-left-width: 30px;
}
.grid_column__left-divider:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  display: block;
  background-color: #babbbd;
  margin-left: -30px;
}
/* topdoc
    name: EOF
    eof: true
*/
/* ==========================================================================
   Capital Framework
   Pagination Styling
   ========================================================================== */
/* topdoc
    name: Pagination
    family: cf-pagination
    notes:
      - "To enable the component to jump directly to the paginated content place
        place #pagination_content directly above your paginated content."
    patterns:
    - name: Default pagination
      markup: |
        <div id="pagination_content"></div>

        <!-- Paginated content here -->

        <nav class="pagination">
            <a class="btn btn__super pagination_prev" href="#pagination_content">
                <span class="btn_icon__left cf-icon cf-icon-left"></span>
                Previous
            </a>
            <a class="btn btn__super pagination_next" href="#pagination_content">
                Next
                <span class="btn_icon__right cf-icon cf-icon-right"></span>
            </a>
            <form class="pagination_form" action="index.html#pagination_content">
                <label class="pagination_label"
                       for="pagination_current-page">
                    Page
                    <span class="u-visually-hidden">
                        number out of 149 total pages
                    </span>
                </label>
                <input
                    class="pagination_current-page"
                    id="pagination_current-page"
                    name="pagination_current-page"
                    type="number" min="1" max="149"
                    value="149">
                <span class="pagination_label">
                    <span aria-hidden="true">
                        of 149
                    </span>
                </span>
                <button class="btn btn__link pagination_submit"
                        id="pagination_submit"
                        type="submit">
                    Go
                </button>
            </form>
        </nav>
    tags:
    - fj-buttons
    - fj-forms
*/
.pagination {
  display: block;
  position: relative;
}
@media only all and (max-width: 19.9375em) {
  .pagination_prev.btn,
  .pagination_next.btn {
    display: block;
    text-align: center;
  }
  .pagination_prev.btn + .pagination_next.btn {
    margin: 1em 0 0;
  }
}
@media only all and (min-width: 20em) {
  .pagination_next {
    position: absolute;
    top: 0;
    right: 0;
  }
}
@media only all and (max-width: 23.0625em) {
  .pagination_prev.btn,
  .pagination_next.btn {
    padding-left: 1.11111111em;
    padding-right: 1.11111111em;
  }
}
.pagination_form {
  display: block;
  padding: 0.3125em;
  margin: 1em 0 0 0;
  background: #e3e4e5;
  color: #75787b;
  text-align: center;
}
.pagination_label {
  display: inline-block;
  margin: 0;
  font-family: "AvenirNextLTW01-Medium", Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1em;
  vertical-align: middle;
}
.lt-ie8 .pagination_label {
  display: inline;
}
.lt-ie9 .pagination_label {
  font-weight: normal !important;
}
.pagination_current-page,
input[type="number"].pagination_current-page,
input[type="text"].pagination_current-page {
  display: inline-block;
  width: 2.625em;
  margin: 0 0.25em;
  font-size: 1em;
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  text-align: right;
  vertical-align: middle;
}
.lt-ie8 .pagination_current-page,
.lt-ie8 input[type="number"].pagination_current-page,
.lt-ie8 input[type="text"].pagination_current-page {
  display: inline;
}
.lt-ie9 .pagination_current-page,
.lt-ie9 input[type="number"].pagination_current-page,
.lt-ie9 input[type="text"].pagination_current-page {
  font-weight: normal !important;
}
.lt-ie8 .pagination_current-page,
.lt-ie8 input[type="number"].pagination_current-page,
.lt-ie8 input[type="text"].pagination_current-page {
  margin: 0 4px;
}
.pagination_submit.btn {
  display: inline-block;
  margin: 0 0 0 0.875em;
  font-size: 1em;
  vertical-align: middle;
}
.lt-ie8 .pagination_submit.btn {
  display: inline;
}
.lt-ie8 .pagination_submit.btn {
  padding-left: 0.875em;
  margin: 0;
  border: none;
  text-decoration: underline;
}
@media only all and (min-width: 40em) {
  .pagination_form {
    margin: 0;
    border-radius: 0.25em;
  }
  .pagination_prev {
    position: absolute;
    top: 0;
    left: 0;
  }
  .pagination_prev,
  .pagination_prev:link,
  .pagination_prev:visited {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .pagination_next,
  .pagination_next:link,
  .pagination_next:visited {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
/* topdoc
  name: EOF
  eof: true
*/
/* ==========================================================================
   Capital Framework
   Core Less file
   ========================================================================== */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
/*! normalize-legacy-addon | MIT License | https://github.com/cfpb/normalize-legacy-addon */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
audio,
canvas,
video {
  *display: inline;
  *zoom: 1;
}
/* ==========================================================================
   Base
   ========================================================================== */
/* 
 * Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 * `em` units.
*/
html {
  font-size: 100%;
}
/*
 * Addresses `font-family` inconsistency between `textarea` and other form
 * elements.
 */
html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}
/* ==========================================================================
   Typography
   ========================================================================== */
/*
 * Addresses font sizes and margins set differently in IE 6/7.
 * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */
h1 {
  margin: 0.67em 0;
}
h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}
h3 {
  font-size: 1.17em;
  margin: 1em 0;
}
h4 {
  font-size: 1em;
  margin: 1.33em 0;
}
h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}
h6 {
  font-size: 0.75em;
  margin: 2.33em 0;
}
blockquote {
  margin: 1em 40px;
}
/*
 * Addresses margins set differently in IE 6/7.
 */
p,
pre {
  margin: 1em 0;
}
/*
 * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
 */
code,
kbd,
pre,
samp {
  _font-family: 'courier new', monospace;
}
/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre;
  word-wrap: break-word;
}
/*
 * Addresses CSS quotes not supported in IE 6/7.
 */
q {
  quotes: none;
}
/*
 * Addresses `quotes` property not supported in Safari 4.
 */
q:before,
q:after {
  content: '';
  content: none;
}
/* ==========================================================================
   Lists
   ========================================================================== */
/*
 * Addresses margins set differently in IE 6/7.
 */
dl,
menu,
ol,
ul {
  margin: 1em 0;
}
dd {
  margin: 0 0 0 40px;
}
/*
 * Addresses paddings set differently in IE 6/7.
 */
menu,
ol,
ul {
  padding: 0 0 0 40px;
}
/*
 * Corrects list images handled incorrectly in IE 7.
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}
/* ==========================================================================
   Embedded content
   ========================================================================== */
/*
 * Improves image quality when scaled in IE 7.
 */
img {
  -ms-interpolation-mode: bicubic;
}
/* ==========================================================================
   Forms
   ========================================================================== */
/*
 * Corrects margin displayed oddly in IE 6/7.
 */
form {
  margin: 0;
}
/*
 * 1. Corrects color not being inherited in IE 6/7/8/9.
 * 2. Corrects text not wrapping in Firefox 3.
 * 3. Corrects alignment displayed oddly in IE 6/7.
 */
legend {
  border: 0;
  /* 1 */
  white-space: normal;
  /* 2 */
  *margin-left: -7px;
  /* 3 */
}
/*
 * Improves appearance and consistency in all browsers.
 */
button,
input,
select,
textarea {
  vertical-align: baseline;
  *vertical-align: middle;
}
/*
 * Removes inner spacing in IE 7 without affecting normal text inputs.
 * Known issue: inner spacing remains in IE 6.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  *overflow: visible;
}
/*
 * Removes excess padding in IE 7.
 * Known issue: excess padding remains in IE 6.
 */
input[type="checkbox"],
input[type="radio"] {
  *height: 13px;
  *width: 13px;
}
/* ==========================================================================
   Capital Framework
   Color variables
   ========================================================================== */
/* ==========================================================================
   Capital Framework
   Less variables
   ========================================================================== */
/* topdoc
  name: Less variables
  family: cf-core
  patterns:
    - name: Font sizes
      codenotes:
        - "@base-font-size-px: 16px;"
        - "@base-line-height-px: 22px;"
        - "@base-line-height: unit(@base-line-height-px / @base-font-size-px);"
        - "@mobile-max: 599px;"
        - "@tablet-min: 600px;"
  tags:
    - cf-core
*/
/* topdoc
  name: EOF
  eof: true
*/
/* ==========================================================================
   Capital Framework
   Media queries
   ========================================================================== */
/* topdoc
  name: Media query mixins
  family: cf-core
  notes:
    - "These mixins allow us to write consistent media queries using pixel
      values, which are easier to remember. The mixins handle converting the
      pixels into em's."
  patterns:
    - name: "min-width/max-width media queries"
      codenotes:
        - ".respond-to-min(@bp, @rules)"
        - ".respond-to-max(@bp, @rules)"
      notes:
        - "@bp: the breakpoint size in pixels. It will get converted into em's."
        - "@rules: a CSS or Less ruleset. Note that it can contain the full set
          of Less features."
    - name: "min-width/max-width media query usage"
      codenotes:
        - |
            .respond-to-min(768px, {
                .title {
                    font-size: 2em;
                }
            });

            Compiles to:

            @media only all and (min-width: 48em) {
                .title {
                    font-size: 2em;
                }
            }
    - name: "min-width/max-width media query range"
      codenotes:
        - ".respond-to-range(@bp1, @bp2, @rules)"
      notes:
        - "@bp1: the min-width breakpoint size in pixels.
          It will get converted into em's."
        - "@bp2: the max-width breakpoint size in pixels.
          It will get converted into em's."
        - "@rules: a CSS or Less ruleset. Note that it can contain the full set
          of Less features."
    - name: "min-width/max-width media query range usage"
      codenotes:
        - |
            .respond-to-range(320px, 768px, {
                .title {
                    font-size: 2em;
                }
            });

            Compiles to:

            @media only all and (min-width: 20em) and (max-width: 48em) {
                .title {
                    font-size: 2em;
                }
            }
  tags:
    - cf-core
*/
/* topdoc
    name: EOF
    eof: true
*/
/* ==========================================================================
   Capital Framework
   Utilities
   ========================================================================== */
/* topdoc
  name: JS-only
  family: cf-core
  patterns:
    - name: Setup
      codenotes:
        - <html class="no-js">
        - |
            <script>
                // Confirm availability of JS and remove no-js class from html
                var docElement = document.documentElement;
                docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2');
            </script>
      notes:
        - "First add the .no-js class to the HTML element."
        - "Then add the script to your HEAD which removes the .no-js class when
           JS is available."
    - name: Utility class
      codenotes:
        - .u-js-only;
      notes:
        - "Hide stuff when JavaScript isn't available. Depends on having a small
           script in the HEAD of your HTML document that removes a .no-js class."
  tags:
    - cf-core
*/
.no-js .u-js-only {
  display: none !important;
}
/* topdoc
  name: Clearfix
  family: cf-core
  patterns:
    - name: Utility class
      markup: |
        <div class="u-clearfix">
            <div style="float:left; width:100%; height:60px; background:black;"></div>
        </div>
      codenotes:
        - .u-clearfix;
      notes:
        - "Use this class to clear floats. For example, without .u-clearfix the
           black box would spill into the markup section."
        - "More information: http://css-tricks.com/snippets/css/clear-fix/"
  tags:
    - cf-core
*/
.u-clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.lt-ie8 .u-clearfix {
  zoom: 1;
}
/* topdoc
  name: Visually hidden
  family: cf-core
  patterns:
    - name: Utility class
      markup: |
        <h1>
            <a href="#">
                <span class="cf-icon cf-icon-twitter-square"></span>
                <span class="u-visually-hidden">Share on Twitter</span>
            </a>
        </h1>
      codenotes:
        - .u-visually-hidden;
      notes:
        - "Use this class to hide something from view while keeping it
          accessible to screen readers."
  tags:
    - cf-core
*/
.u-visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
/* topdoc
  name: Inline block
  family: cf-core
  patterns:
    - name: Utility class
      codenotes:
        - .u-inline-block;
      notes:
        - "Also adds a .lt-ie8 class to hack inline-block for IE 7 and below."
  tags:
    - cf-core
*/
.u-inline-block {
  display: inline-block;
}
.lt-ie8 .u-inline-block {
  display: inline;
}
/* topdoc
  name: Floating right
  family: cf-core
  patterns:
    - name: Utility class
      codenotes:
        - .u-right;
      notes:
        - "IE7 float: right drop bug fixes:"
        - "1. If the float: right follows an element in the html structure that
          should be to its left (and not above it), then that preceding
          element(s) must be float: left.
          http://stackoverflow.com/questions/10981767/clean-css-fix-of-ie7s-float-right-drop-bug#answer-11437688"
        - "2. Simply change the markup order so that the element floating right
          comes before the element to its left."
  tags:
    - cf-core
*/
.u-right {
  float: right;
}
/* topdoc
  name: Break word
  family: cf-core
  patterns:
    - name: Utility class
      markup: |
        <div style="width: 100px;">
            This link should break:
            <br>
            <a class="u-break-word" href="#">
                something@something.com
            </a>
            <br>
            <br>
            This link should not:
            <br>
            <a href="#">
                something@something.com
            </a>
        </div>
      codenotes:
        - .u-break-word
      notes:
        - "Use this on elements where you need the words to break when confined
           to small containers."
        - "This only works in IE8 when the element with the .u-break-word class
           has layout. See <http://stackoverflow.com/questions/3997223/word-wrapbreak-word-not-working-in-ie8>
           for more information."
  tags:
    - cf-core
*/
.u-break-word {
  word-break: break-all;
}
/* topdoc
  name: Align with button
  family: cf-core
  patterns:
    - name: Utility class
      codenotes:
        - ".u-align-with-btn(@font-size: @base-font-size-px);"
      notes:
        - "Adds top padding (among other things) to help alignment with buttons."
        - "If you pass no arguments then the padding will be calculated using
          @base-font-size-px."
        - "Pass one argument to use a custom font size to calculate the top
          padding."
  tags:
    - cf-core
*/
/* topdoc
  name: Flexible proportional containers
  family: cf-core
  notes:
    - "Utilizes intrinsic ratios to create a flexible container that retains its
      aspect ratio. When image tags scale they retain their aspect ratio, but if
      you need a flexible video you will need to use this mixin."
    - "You can read more about intrinsic rations here:
      http://alistapart.com/article/creating-intrinsic-ratios-for-video"
  patterns:
    - name: Default example
      markup: |
        <div class="u-flexible-container">
            <video
              class="u-flexible-container_inner"
              style="background:#75787B;"
              controls>
            </video>
        </div>
      notes:
        - "Defaults to a 16:19 ratio."
        - "Original mixin credit: https://gist.github.com/craigmdennis/6655047"
        - "Note that inline style usage is being used for demo purposes only.
          Please do not use inline styles."
      codenotes:
        - |
          Structural sheat sheet:
          -----------------------
          .u-flexible-container
            .u-flexible-container_inner
    - name: Background image examples
      markup: |
        <div class="u-flexible-container"
             style="
               background-image:url(http://placekitten.com/700/394);
               background-position: center center;
             ">
        </div>
        <div class="u-flexible-container"
             style="
               background-image:url(http://placekitten.com/700/394);
               background-position: center center;
               background-size: cover;
             ">
        </div>
      codenotes:
        - |
          Structural sheat sheet:
          -----------------------
          .u-flexible-container
      notes:
        - "If you're not using the video or object elements and all you need is
          a proportionally cropped or scaling background image with a fluid
          container then you can leave out u-flexible-container_inner."
        - "Note that inline style usage is being used for demo purposes only.
          Please do not use inline styles."
    - name: 4-3 modifier
      markup: |
        <div class="u-flexible-container u-flexible-container__4-3">
            <video
              class="u-flexible-container_inner"
              style="background:#75787B;"
              controls>
            </video>
        </div>
      codenotes:
        - |
          Structural sheat sheet:
          -----------------------
          .u-flexible-container.u-flexible-container__4-3
            .u-flexible-container_inner
      notes:
        - "Create your own aspect ratios by using this modifier as an example."
        - "Note that inline style usage is being used for demo purposes only.
          Please do not use inline styles."
  tags:
    - cf-core
*/
.u-flexible-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.u-flexible-container_inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.u-flexible-container__4-3 {
  position: relative;
  padding-bottom: 75%;
  height: 0;
}
/* topdoc
  name: Link mixins
  family: cf-core
  patterns:
    - codenotes:
        - .u-link__colors();
      notes:
        - "Pass this mixin no arguments to color your link states with the
          following defaults: :link (default state) pacific, :hover pacific-50,
          :focus: pacific, :visited teal, :active navy."
    - codenotes:
        - .u-link__colors(@c);
      notes:
        - "Pass this mixin one color to be used on all of the following
          states of your link; :link (default state), :visited, :hover, :focus,
          :active."
    - codenotes:
        - .u-link__colors(@c, @h);
      notes:
        - "Pass this mixin two colors to use the first color for the :link,
          :visited, and :active states, and the second color for the :hover and
          :focus states."
    - codenotes:
        - .u-link__colors(@c, @v, @h, @f, @a);
      notes:
        - "Pass this mixin five colors in 'love/hate' mnemonic order to color
          :link, :visited, :hover, :focus, and :active states respectively."
        - "Even though this mixin is basically the same as
          .u-link__colors-base(@c, @v, @h, @f, @a); we encourage you to use
          .u-link__colors(@c, @v, @h, @f, @a) to promote consistency."
    - codenotes:
        - .u-link__colors(@c, @v, @h, @f, @a, @bc, @bv, @bh, @bf, @ba);
      notes:
        - "Allows you to color text and the borders separately."
        - "The first five colors in 'love/hate' mnemonic order will color text
          for the :link, :visited, :hover, :focus, and :active states
          respectively. The last five colors in 'love/hate' mnemonic order will
          color the borders for the :link, :visited, :hover, :focus, and :active
          states respectively."
        - "Even though this mixin is basically the same as
          .u-link__colors-base(@c, @v, @h, @f, @a, @bc, @bv, @bh, @bf, @ba); we
          encourage you to use .u-link__colors(@c, @v, @h, @f, @a, @bc, @bv, @bh, @bf, @ba)
          to promote consistency."
    - codenotes:
        - .u-link__colors-base(@c, @v, @h, @f, @a);
      notes:
        - "This is the base mixin that all .u-link__colors() mixins use. Please
          refrain from using this mixin directly in order to promote a
          consistent use of mixin names for coloring links throughout this
          project. Remember that if you need to set colors for all states of a
          link you should use .u-link__colors(@c, @v, @h, @f, @a)."
    - codenotes:
        - .u-link__border();
      notes:
        - "Forces the default bottom border on the :link and :hover states."
    - codenotes:
        - .u-link__no-border();
      notes:
        - "Turn off the default bottom border on the :link and :hover states."
    - codenotes:
        - .u-link__hover-border();
      notes:
        - "Turn off the default bottom border on the :link state and force a
          bottom border on the :hover state."
    - codenotes:
        - .u-link-child__hover();
      notes:
        - "When a link has child elements you may want only certain children to
          change color when the parent link is hovered.
          Pass no arguments to this mixin to color the child element pacific
          when the parent link is hovered."
    - codenotes:
        - .u-link-child__hover(@c);
      notes:
        - "Pass this mixin one color to color the child element when the parent
          link is hovered."
  tags:
    - cf-core
*/
/* topdoc
  name: Margin utilities
  family: cf-core
  patterns:
    - name: Utility classes
      codenotes:
        - .u-m<p><#>;
      notes:
        - "Replace <p> with the first letter of the position ('t' for top or 'b'
           for bottom) and <#> with the pixel value of the margin you want."
        - "Available values: 0, 5, 10, 15, 20, 30, 45, 60."
  tags:
    - cf-core
*/
.u-mt0 {
  margin-top: 0 !important;
}
.u-mb0 {
  margin-bottom: 0 !important;
}
.u-mt5 {
  margin-top: 5px !important;
}
.u-mb5 {
  margin-bottom: 5px !important;
}
.u-mt10 {
  margin-top: 10px !important;
}
.u-mb10 {
  margin-bottom: 10px !important;
}
.u-mt15 {
  margin-top: 15px !important;
}
.u-mb15 {
  margin-bottom: 15px !important;
}
.u-mt20 {
  margin-top: 20px !important;
}
.u-mb20 {
  margin-bottom: 20px !important;
}
.u-mt30 {
  margin-top: 30px !important;
}
.u-mb30 {
  margin-bottom: 30px !important;
}
.u-mt45 {
  margin-top: 45px !important;
}
.u-mb45 {
  margin-bottom: 45px !important;
}
.u-mt60 {
  margin-top: 60px !important;
}
.u-mb60 {
  margin-bottom: 60px !important;
}
/* topdoc
  name: Width utilities
  family: cf-core
  patterns:
    - name: Percent-based
      markup: |
        <div class="u-w100pct" style="background: #DBEDD4; margin-bottom: 1px;">
            <code>.u-w100pct</code>
        </div>
        <div class="u-w90pct" style="background: #DBEDD4; margin-bottom: 1px;">
            <code>.u-w90pct</code>
        </div>
        <div class="u-w80pct" style="background: #DBEDD4; margin-bottom: 1px;">
            <code>.u-w80pct</code>
        </div>
        <div class="u-w70pct" style="background: #DBEDD4; margin-bottom: 1px;">
            <code>.u-w70pct</code>
        </div>
        <div class="u-w60pct" style="background: #DBEDD4; margin-bottom: 1px;">
            <code>.u-w60pct</code>
        </div>
        <div class="u-w50pct" style="background: #DBEDD4; margin-bottom: 1px;">
            <code>.u-w50pct</code>
        </div>
        <div class="u-w40pct" style="background: #DBEDD4; margin-bottom: 1px;">
            <code>.u-w40pct</code>
        </div>
        <div class="u-w30pct" style="background: #DBEDD4; margin-bottom: 1px;">
            <code>.u-w30pct</code>
        </div>
        <div class="u-w20pct" style="background: #DBEDD4; margin-bottom: 1px;">
            <code>.u-w20pct</code>
        </div>
        <div class="u-w10pct" style="background: #DBEDD4; margin-bottom: 1px;">
            <code>.u-w10pct</code>
        </div>
        <div class="u-w75pct" style="background: #DBEDD4; margin-bottom: 1px;">
            <code>.u-w75pct</code>
        </div>
        <div class="u-w25pct" style="background: #DBEDD4; margin-bottom: 1px;">
            <code>.u-w25pct</code>
        </div>
        <div class="u-w66pct" style="background: #DBEDD4; margin-bottom: 1px;">
            <code>.u-w66pct</code>
        </div>
        <div class="u-w33pct" style="background: #DBEDD4; margin-bottom: 1px;">
            <code>.u-w33pct</code>
        </div>
      notes:
        - "Inline styles are for demonstration purposes only, please don't use
           them."
  tags:
    - cf-core
*/
.u-w100pct {
  width: 100%;
}
.u-w90pct {
  width: 90%;
}
.u-w80pct {
  width: 80%;
}
.u-w70pct {
  width: 70%;
}
.u-w60pct {
  width: 60%;
}
.u-w50pct {
  width: 50%;
}
.u-w40pct {
  width: 40%;
}
.u-w30pct {
  width: 30%;
}
.u-w20pct {
  width: 20%;
}
.u-w10pct {
  width: 10%;
}
.u-w75pct {
  width: 75%;
}
.u-w25pct {
  width: 25%;
}
.u-w66pct {
  width: 66.66666667%;
}
.u-w33pct {
  width: 33.33333333%;
}
/* topdoc
  name: Width-specific display
  family: cf-core
  patterns:
    - name: Show on mobile
      markup: |
        <section>
            <p>The the text in the box below is visible only at widths less than 600px</p>
            <div style="border: 1px solid black; height: 22px; padding: 5px;">
                <p class="u-show-on-mobile">Visible on mobile</p>
            </div>
        </section>
      codenotes:
        - ".u-show-on-mobile"
        - "Uses 'display:block' to toggle display. Would need to be extended
          for inline use cases."
      notes:
        - "Displays an element only at mobile widths."
    - name: Hide on mobile
      markup: |
        <section>
            <p>The text in the box below is hidden at widths less than 600px</p>
            <div style="border: 1px solid black; height: 22px; padding: 5px;">
                <p class="u-hide-on-mobile">Hidden on mobile</p>
            </div>
        </section>
      codenotes:
        - ".u-hide-on-mobile"
      notes:
        - "Hides an element at mobile widths"
  tags:
    - cf-core
*/
@media only all and (max-width: 37.4375em) {
  .u-hide-on-mobile {
    display: none;
  }
}
.u-show-on-mobile {
  display: none;
}
@media only all and (max-width: 37.4375em) {
  .u-show-on-mobile {
    display: block;
  }
}
/* topdoc
  name: Small text utility
  family: cf-core
  patterns:
    - name: .u-small-text (utility class)
      markup: |
        Lorem ipsum<br>
        <span class="u-small-text">dolor sit amet</span>
      codenotes:
        - ".u-small-text"
      notes:
        - "14px text."
        - "The utility class should only be used when the default text size is
           16px. For example you wouldn't want to use the class inside of an
           `h1` because the `font-size` in the `h1` will make `.u-small-text`
           bigger than it should be. See the docs for the `.u-small-text()`
           mixin."
    - name: .u-small-text() (Less mixin)
      codenotes:
        - ".u-small-text(@context)"
        - |
          // Mixin usage:
          .example {
            font-size: unit(20px / @base-font-size-px, em);
            small {
              .u-small-text(20px);
            }
          }
          // Compiles to:
          .example {
            font-size: 1.25em;
          }
          .example small {
            font-size: 0.7em;
          }
      notes:
        - "This mixin enables you to easily create consistent small text by
           passing the context `font-size`."
  tags:
    - cf-core
*/
.u-small-text {
  font-size: 0.875em;
}
small {
  font-size: 0.875em;
}
/* topdoc
    name: EOF
    eof: true
*/
/* ==========================================================================
   Capital Framework
   Base styles
   ========================================================================== */
/*
 * Source: http://fast.fonts.net/cssapi/44e8c964-4684-44c6-a6e3-3f3da8787b50.css
 * This file has been edited to use absolute URLS so we can concatenate it with
 * all of our other styles.
 */
@font-face {
  font-family: "AvenirNextLTW01-Regular";
  src: url("//fast.fonts.net/dv2/2/e9167238-3b3f-4813-a04a-a384394eed42.eot?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50") format("eot");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "AvenirNextLTW01-Regular";
  src: url("//fast.fonts.net/dv2/2/e9167238-3b3f-4813-a04a-a384394eed42.eot?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50");
  src: url("//fast.fonts.net/dv2/3/1e9892c0-6927-4412-9874-1b82801ba47a.woff?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50") format("woff"), url("//fast.fonts.net/dv2/1/46cf1067-688d-4aab-b0f7-bd942af6efd8.ttf?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50") format("truetype"), url("//fast.fonts.net/dv2/11/52a192b1-bea5-4b48-879f-107f009b666f.svg?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50#52a192b1-bea5-4b48-879f-107f009b666f") format("svg");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "AvenirNextLTW01-Italic";
  src: url("//fast.fonts.net/dv2/2/d1fddef1-d940-4904-8f6c-17e809462301.eot?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50") format("eot");
  font-style: italic;
  font-weight: normal;
}
@font-face {
  font-family: "AvenirNextLTW01-Italic";
  src: url("//fast.fonts.net/dv2/2/d1fddef1-d940-4904-8f6c-17e809462301.eot?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50");
  src: url("//fast.fonts.net/dv2/3/92b66dbd-4201-4ac2-a605-4d4ffc8705cc.woff?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50") format("woff"), url("//fast.fonts.net/dv2/1/18839597-afa8-4f0b-9abb-4a30262d0da8.ttf?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50") format("truetype"), url("//fast.fonts.net/dv2/11/1de7e6f4-9d4d-47e7-ab23-7d5cf10ab585.svg?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50#1de7e6f4-9d4d-47e7-ab23-7d5cf10ab585") format("svg");
  font-style: italic;
  font-weight: normal;
}
@font-face {
  font-family: "AvenirNextLTW01-Medium";
  src: url("//fast.fonts.net/dv2/2/1a7c9181-cd24-4943-a9d9-d033189524e0.eot?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50") format("eot");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "AvenirNextLTW01-Medium";
  src: url("//fast.fonts.net/dv2/2/1a7c9181-cd24-4943-a9d9-d033189524e0.eot?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50");
  src: url("//fast.fonts.net/dv2/3/f26faddb-86cc-4477-a253-1e1287684336.woff?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50") format("woff"), url("//fast.fonts.net/dv2/1/63a74598-733c-4d0c-bd91-b01bffcd6e69.ttf?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50") format("truetype"), url("//fast.fonts.net/dv2/11/a89d6ad1-a04f-4a8f-b140-e55478dbea80.svg?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50#a89d6ad1-a04f-4a8f-b140-e55478dbea80") format("svg");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "AvenirNextLTW01-Demi";
  src: url("//fast.fonts.net/dv2/2/12d643f2-3899-49d5-a85b-ff430f5fad15.eot?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50") format("eot");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "AvenirNextLTW01-Demi";
  src: url("//fast.fonts.net/dv2/2/12d643f2-3899-49d5-a85b-ff430f5fad15.eot?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50");
  src: url("//fast.fonts.net/dv2/3/91b50bbb-9aa1-4d54-9159-ec6f19d14a7c.woff?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50") format("woff"), url("//fast.fonts.net/dv2/1/a0f4c2f9-8a42-4786-ad00-fce42b57b148.ttf?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50") format("truetype"), url("//fast.fonts.net/dv2/11/99affa9a-a5e9-4559-bd07-20cf0071852d.svg?d44f19a684109620e4841679af90e818b934c450213fb296d217dd76fbd8133e8104ffce1b8d7381e92baf075aac747ded01b441045f936c159eb0f46c11e1f99e958a3e0d6904164b21814766132f7cb38b46df85fb387875d6907338f619856e049c29c288424547a2ca329b1d0251faf8c505bae9c3ec3d5a1e4327f5fdf46ffb088d97582c65a45857e1e0662c2d545166a03c7b024ca17ac3839d703086c5f9fd694b6f5493360c3bcd9d5d427b599ea7651d27005ca2f4c1d0312515f51a323f79b7f5cf1afa2ab67a3ddbfee1&projectId=44e8c964-4684-44c6-a6e3-3f3da8787b50#99affa9a-a5e9-4559-bd07-20cf0071852d") format("svg");
  font-style: normal;
  font-weight: 700;
}
/* topdoc
  name: Webfonts
  family: cf-core
  patterns:
    - name: Licensed webfonts
      notes:
        - "Avenir Next is included via the licensed-fonts.css file.
          This file contains absolute links to our paid font service.
          Fonts included this way will only work on CFPB-registered domains."
        - "Note that when using Avenir Regular we automatically fix faux italic
          and bold issues by overriding i, em, b, and strong tags to use the
          appropriate fonts."
    - name: Webfont mixins
      codenotes:
        - ".webfont-regular()"
        - ".webfont-italic()"
        - ".webfont-medium()"
        - ".webfont-demi()"
      notes:
        - "Use these mixins to easily add the Avenir Next font family to your
          elements."
        - "To avoid faux bold and italics in Avenir Next, you must use the font
          family name for that particular style. So when defining an italic or
          bold style in Avenir Next you need to use the Avenir Next Italic font
          family. Use the mixins when setting bold or italic text as they also
          set the appropriate font-weight and font-style."
        - "These mixins also add the appropriate .lt-ie9 overrides.
          .lt-ie9 overrides are necessary to override font-style and font-weight
          each time the webfont is used. These overrides are built into the webfont
          mixins so you get them automatically. Note that this requires you to
          use conditional classes on the <html> element:
          https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/html.md#conditional-html-classes."
  tags:
    - cf-core
*/
/* topdoc
  name: Type hierarchy
  family: cf-core
  patterns:
    - name: Default body type
      markup: |
        <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>, sed do eiusmod <strong>tempor incididunt</strong> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    - name: Heading level 1
      markup: |
        <h1>Example heading element</h1>
        <p class="h1">A non-heading element</p>
      notes:
        - Responsive header. At mobile sizes, displays as h2.
    - name: Heading level 2
      markup: |
        <h2>Example heading element</h2>
        <p class="h2">A non-heading element</p>
      notes:
        - Responsive header. At mobile sizes, displays as h3.
    - name: Heading level 3
      markup: |
        <h3>Example heading element</h3>
        <p class="h3">A non-heading element</p>
      notes:
        - Responsive header. At mobile sizes, displays as h4.
    - name: Heading level 4
      markup: |
        <h4>Example heading element</h4>
        <p class="h4">A non-heading element</p>
    - name: Heading level 5
      markup: |
        <h5>Example heading element</h5>
        <p class="h5">A non-heading element</p>
    - name: Heading level 6
      markup: |
        <h6>Example heading element</h6>
        <p class="h6">A non-heading element</p>
    - name: Super header
      markup: |
        <h1 class="superheader">Example super heading</h1>
        <p class="superheader">Example super heading</p>
  tags:
    - cf-core
*/
body {
  color: #101820;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 100%;
  line-height: 1.375;
}
h1,
.h1,
h2,
.h2,
h3,
.h3 {
  font-family: "AvenirNextLTW01-Regular", Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
}
h1 em,
.h1 em,
h2 em,
.h2 em,
h3 em,
.h3 em,
h1 i,
.h1 i,
h2 i,
.h2 i,
h3 i,
.h3 i {
  font-family: "AvenirNextLTW01-Italic", Arial, sans-serif;
  font-style: italic;
  font-weight: normal;
}
.lt-ie9 h1 em,
.lt-ie9 .h1 em,
.lt-ie9 h2 em,
.lt-ie9 .h2 em,
.lt-ie9 h3 em,
.lt-ie9 .h3 em,
.lt-ie9 h1 i,
.lt-ie9 .h1 i,
.lt-ie9 h2 i,
.lt-ie9 .h2 i,
.lt-ie9 h3 i,
.lt-ie9 .h3 i {
  font-style: normal !important;
}
h1 strong,
.h1 strong,
h2 strong,
.h2 strong,
h3 strong,
.h3 strong,
h1 b,
.h1 b,
h2 b,
.h2 b,
h3 b,
.h3 b {
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
}
.lt-ie9 h1 strong,
.lt-ie9 .h1 strong,
.lt-ie9 h2 strong,
.lt-ie9 .h2 strong,
.lt-ie9 h3 strong,
.lt-ie9 .h3 strong,
.lt-ie9 h1 b,
.lt-ie9 .h1 b,
.lt-ie9 h2 b,
.lt-ie9 .h2 b,
.lt-ie9 h3 b,
.lt-ie9 .h3 b {
  font-weight: normal !important;
}
h1,
.h1 {
  margin-top: 0;
  margin-bottom: 0.47058824em;
  font-size: 2.125em;
  line-height: 1.29411765;
}
@media only all and (max-width: 37.4375em) {
  h1,
  .h1 {
    font-family: "AvenirNextLTW01-Regular", Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0.73076923em;
    font-size: 1.625em;
    line-height: 1.26923077;
  }
  h1 em,
  .h1 em,
  h1 i,
  .h1 i {
    font-family: "AvenirNextLTW01-Italic", Arial, sans-serif;
    font-style: italic;
    font-weight: normal;
  }
  .lt-ie9 h1 em,
  .lt-ie9 .h1 em,
  .lt-ie9 h1 i,
  .lt-ie9 .h1 i {
    font-style: normal !important;
  }
  h1 strong,
  .h1 strong,
  h1 b,
  .h1 b {
    font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
  }
  .lt-ie9 h1 strong,
  .lt-ie9 .h1 strong,
  .lt-ie9 h1 b,
  .lt-ie9 .h1 b {
    font-weight: normal !important;
  }
}
@media only all and (max-width: 37.4375em) and only all and (max-width: 37.4375em) {
  h1,
  .h1 {
    font-family: "AvenirNextLTW01-Regular", Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0.95454545em;
    font-size: 1.375em;
    line-height: 1.27272727;
  }
  h1 em,
  .h1 em,
  h1 i,
  .h1 i {
    font-family: "AvenirNextLTW01-Italic", Arial, sans-serif;
    font-style: italic;
    font-weight: normal;
  }
  .lt-ie9 h1 em,
  .lt-ie9 .h1 em,
  .lt-ie9 h1 i,
  .lt-ie9 .h1 i {
    font-style: normal !important;
  }
  h1 strong,
  .h1 strong,
  h1 b,
  .h1 b {
    font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
  }
  .lt-ie9 h1 strong,
  .lt-ie9 .h1 strong,
  .lt-ie9 h1 b,
  .lt-ie9 .h1 b {
    font-weight: normal !important;
  }
}
@media only all and (max-width: 37.4375em) and only all and (max-width: 37.4375em) and only all and (max-width: 37.4375em) {
  h1,
  .h1 {
    margin-top: 0;
    margin-bottom: 1.16666667em;
    font-size: 1.125em;
    font-family: "AvenirNextLTW01-Medium", Arial, sans-serif;
    font-style: normal;
    font-weight: 500;
    line-height: 1.22222222;
  }
  .lt-ie9 h1,
  .lt-ie9 .h1 {
    font-weight: normal !important;
  }
}
h2,
.h2 {
  margin-top: 0;
  margin-bottom: 0.73076923em;
  font-size: 1.625em;
  line-height: 1.26923077;
}
@media only all and (max-width: 37.4375em) {
  h2,
  .h2 {
    font-family: "AvenirNextLTW01-Regular", Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0.95454545em;
    font-size: 1.375em;
    line-height: 1.27272727;
  }
  h2 em,
  .h2 em,
  h2 i,
  .h2 i {
    font-family: "AvenirNextLTW01-Italic", Arial, sans-serif;
    font-style: italic;
    font-weight: normal;
  }
  .lt-ie9 h2 em,
  .lt-ie9 .h2 em,
  .lt-ie9 h2 i,
  .lt-ie9 .h2 i {
    font-style: normal !important;
  }
  h2 strong,
  .h2 strong,
  h2 b,
  .h2 b {
    font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
  }
  .lt-ie9 h2 strong,
  .lt-ie9 .h2 strong,
  .lt-ie9 h2 b,
  .lt-ie9 .h2 b {
    font-weight: normal !important;
  }
}
@media only all and (max-width: 37.4375em) and only all and (max-width: 37.4375em) {
  h2,
  .h2 {
    margin-top: 0;
    margin-bottom: 1.16666667em;
    font-size: 1.125em;
    font-family: "AvenirNextLTW01-Medium", Arial, sans-serif;
    font-style: normal;
    font-weight: 500;
    line-height: 1.22222222;
  }
  .lt-ie9 h2,
  .lt-ie9 .h2 {
    font-weight: normal !important;
  }
}
h3,
.h3 {
  margin-top: 0;
  margin-bottom: 0.95454545em;
  font-size: 1.375em;
  line-height: 1.27272727;
}
@media only all and (max-width: 37.4375em) {
  h3,
  .h3 {
    margin-top: 0;
    margin-bottom: 1.16666667em;
    font-size: 1.125em;
    font-family: "AvenirNextLTW01-Medium", Arial, sans-serif;
    font-style: normal;
    font-weight: 500;
    line-height: 1.22222222;
  }
  .lt-ie9 h3,
  .lt-ie9 .h3 {
    font-weight: normal !important;
  }
}
h4,
.h4 {
  margin-top: 0;
  margin-bottom: 1.16666667em;
  font-size: 1.125em;
  font-family: "AvenirNextLTW01-Medium", Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1.22222222;
}
.lt-ie9 h4,
.lt-ie9 .h4 {
  font-weight: normal !important;
}
h5,
h6,
.h5,
.h6 {
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.lt-ie9 h5,
.lt-ie9 h6,
.lt-ie9 .h5,
.lt-ie9 .h6 {
  font-weight: normal !important;
}
h5,
.h5 {
  margin-top: 0;
  margin-bottom: 0.35714286em;
  font-size: 0.875em;
  line-height: 1.57142857;
}
h6,
.h6 {
  margin-top: 0;
  margin-bottom: 0.41666667em;
  font-size: 0.75em;
  line-height: 1.83333333;
}
.superheader {
  margin-bottom: 0.1875em;
  font-size: 3em;
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  line-height: 1.25;
}
.lt-ie9 .superheader {
  font-weight: normal !important;
}
/* topdoc
  name: Margins
  family: cf-core
  patterns:
    - name: Consistent vertical margins
      notes:
        - "Assumes that the font size of each of these items remains the default."
      markup: |
        <p>Paragraph margin example</p>
        <p>Paragraph margin example</p>
  tags:
    - cf-core
*/
p,
ul,
ol,
dl,
table,
figure {
  margin-top: 0;
  margin-bottom: 1.25em;
}
/* topdoc
  name: Default link
  notes:
    - "Note that the .visited, .hover, .focus, .active classes are for demonstration purposes only and should not 
      be used in production."
  family: cf-core
  patterns:
    - name: Default state
      markup: |
        <a href="#">Default link style</a>
    - name: Visited state
      markup: |
        <a href="#" class="visited">Visited link style</a>
    - name: Hovered state
      markup: |
        <a href="#" class="hover">Hovered link style</a>
    - name: Focused state
      markup: |
        <a href="#" class="focus">Focused link style</a>
    - name: Active state
      markup: |
        <a href="#" class="active">Active link style</a>
  tags:
    - cf-core
*/
a {
  border-width: 0;
  border-style: dotted;
  border-color: #0072ce;
  color: #0072ce;
  text-decoration: none;
}
a:visited,
a.visited {
  border-color: #005e5d;
  color: #005e5d;
}
a:hover,
a.hover {
  border-style: solid;
  border-color: #7fb8e6;
  color: #7fb8e6;
}
a:focus,
a.focus {
  border-style: solid;
  outline: thin dotted;
}
a:active,
a.active {
  border-style: solid;
  border-color: #002d72;
  color: #002d72;
}
/* topdoc
  name: Underlined links
  family: cf-core
  patterns:
    - name: States
      notes:
        - "Note that the .visited, .hover, .focus, .active classes are for demonstration purposes only and should not 
          be used in production."
        - "The underline style properties are mostly set above in the a tag.
          To enable the underline simply set a bottom-border-width as done here."
      markup: |
        <p>
            <a href="#">Default</a>,
            <a href="#" class="visited">Visited</a>,
            <a href="#" class="hover">Hovered</a>,
            <a href="#" class="focus">Focused</a>,
            <a href="#" class="active">Active</a>
        </p>
    - name: Underline conditions
      notes:
        - "We're restricting link borders to links within p, li, and dd so that
          we don't have to override them every time we want a plain link."
      markup: |
        <p>
            <a href="#">A child of a paragraph</a>
        </p>
        <ul>
            <li>
                <a href="#">A child of a list item</a>
            </li>
        </ul>
        <dl>
            <dt>
                Definition list term
            </dt>
            <dd>
                <a href="#">A child of a definition list description</a>
            </dd>
        </dl>
    - name: Exceptions for underlined links
      notes:
        - "Inline text links inside of a nav element are not underlined."
      markup: |
        <nav>
            <p>
                <a href="#">A child of a paragraph</a>
            </p>
            <ul>
                <li>
                    <a href="#">A child of a list item</a>
                </li>
            </ul>
            <dl>
                <dt>
                    Definition list term
                </dt>
                <dd>
                    <a href="#">A child of a definition list description</a>
                </dd>
            </dl>
        </nav>
  tags:
    - cf-core
*/
p a,
li a,
dd a {
  border-bottom-width: 1px;
}
nav a {
  border-bottom-width: 0;
}
/* topdoc
  name: Lists
  family: cf-core
  patterns:
    - name: Unordered list
      markup: |
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
  tags:
    - cf-core
*/
ul {
  list-style: square;
}
/* topdoc
  name: Tables
  family: cf-core
  patterns:
    - name: Standard table
      markup: |
        <table>
            <thead>
                <tr>
                    <th>Column 1 header</th>
                    <th>Column 2 header</th>
                    <th>Column 3 header</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Row 1 header</th>
                    <td>Row 1, column 2</td>
                    <td>Row 1, column 3</td>
                </tr>
                <tr>
                    <th>Row 2 header</th>
                    <td>Row 2, column 2</td>
                    <td>Row 2, column 3</td>
                </tr>
                <tr>
                    <th>Row 3 header</th>
                    <td>Row 3, column 2</td>
                    <td>Row 3, column 3</td>
                </tr>
            </tbody>
        </table>
    - name: Compact table
      markup: |
        <table class="compact-table">
            <thead>
                <tr>
                    <th>Column 1 header</th>
                    <th>Column 2 header</th>
                    <th>Column 3 header</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Row 1 header</th>
                    <td>Row 1, column 2</td>
                    <td>Row 1, column 3</td>
                </tr>
                <tr>
                    <th>Row 2 header</th>
                    <td>Row 2, column 2</td>
                    <td>Row 2, column 3</td>
                </tr>
                <tr>
                    <th>Row 3 header</th>
                    <td>Row 3, column 2</td>
                    <td>Row 3, column 3</td>
                </tr>
            </tbody>
        </table>
      notes:
        - Reduces cell padding to 10px.
  tags:
    - cf-core
*/
table {
  font-family: "AvenirNextLTW01-Regular", Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
}
table em,
table i {
  font-family: "AvenirNextLTW01-Italic", Arial, sans-serif;
  font-style: italic;
  font-weight: normal;
}
.lt-ie9 table em,
.lt-ie9 table i {
  font-style: normal !important;
}
table strong,
table b {
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
}
.lt-ie9 table strong,
.lt-ie9 table b {
  font-weight: normal !important;
}
th,
td {
  padding: 0.75em 0.9375em;
  background: #f8f8f8;
}
thead th,
thead td {
  color: #ffffff;
  background: #43484e;
}
tbody > tr:nth-child(odd) > th,
tbody > tr:nth-child(odd) > td {
  background: #f1f2f2;
}
.compact-table th,
.compact-table td {
  padding: 0.4375em 0.625em;
}
th {
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  text-align: left;
}
.lt-ie9 th {
  font-weight: normal !important;
}
/* topdoc
  name: Block quote
  family: cf-core
  patterns:
    - name: Default block quote
      markup: |
        <blockquote cite="link-to-source">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa
            similique fugit hic eligendi praesentium officiis illum optio iusto
            commodi eum tempore nisi ad in perferendis enim quo dolores.
            Reprehenderit similique earum quibusdam possimus vitae esse
            nesciunt mollitia sed beatae aliquid dolores iure a impedit quam
            minus eum modi illum ducimus eligendi eveniet labore non sequi
            voluptate et totam praesentium animi itaque asperiores dolorum
            sunt laudantium repellat nam commodi. Perspiciatis natus aliquam
            veniam officiis ducimus voluptatum ut necessitatibus non!
        </blockquote>
      notes:
        - "Use a block quote to quote from an external work. See .pull-quote if
          you need to highlight an excerpt from the current work."
        - "It is best practice to document the URL of a quoted work using the
          cite attribute."
  tags:
    - cf-core
*/
blockquote {
  margin: 1.25em;
}
@media only all and (min-width: 37.5em) {
  blockquote {
    margin: 1.75em 2.5em;
  }
}
/* topdoc
  name: Pull quote
  family: cf-core
  patterns:
    - name: Default pull quote
      markup: |
        <aside class="pull-quote">
            <div class="pull-quote_body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Cum corrupti tempora nam nihil qui mollitia consectetur
                corporis nemo culpa dolorum!
            </div>
            <footer>
                <cite class="pull-quote_citation">
                    - Author Name
                </cite>
            <footer>
        </aside>
      notes:
        - "Use a pull quote to highlight excerpts from the current work.
          This is not to be confused with blockquote which quotes from an
          external work."
        - "Since a pull quote is an excerpt and repeats content from the
          article it's contained within you should use the aside element."
    - name: Large pull quote
      markup: |
        <aside class="pull-quote pull-quote__large">
            <div class="pull-quote_body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Cum corrupti tempora nam nihil qui mollitia consectetur
                corporis nemo culpa dolorum!
            </div>
            <footer>
                <cite class="pull-quote_citation">
                    - Author Name
                </cite>
            <footer>
        </aside>
  tags:
    - cf-core
*/
.pull-quote_body {
  font-family: "AvenirNextLTW01-Regular", Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 0.95454545em;
  font-size: 1.375em;
  line-height: 1.27272727;
  margin-bottom: 0.54545455em;
  color: #101820;
}
.pull-quote_body em,
.pull-quote_body i {
  font-family: "AvenirNextLTW01-Italic", Arial, sans-serif;
  font-style: italic;
  font-weight: normal;
}
.lt-ie9 .pull-quote_body em,
.lt-ie9 .pull-quote_body i {
  font-style: normal !important;
}
.pull-quote_body strong,
.pull-quote_body b {
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
}
.lt-ie9 .pull-quote_body strong,
.lt-ie9 .pull-quote_body b {
  font-weight: normal !important;
}
@media only all and (max-width: 37.4375em) {
  .pull-quote_body {
    margin-top: 0;
    margin-bottom: 1.16666667em;
    font-size: 1.125em;
    font-family: "AvenirNextLTW01-Medium", Arial, sans-serif;
    font-style: normal;
    font-weight: 500;
    line-height: 1.22222222;
  }
  .lt-ie9 .pull-quote_body {
    font-weight: normal !important;
  }
}
.pull-quote_citation {
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0.35714286em;
  font-size: 0.875em;
  line-height: 1.57142857;
  color: #75787b;
}
.lt-ie9 .pull-quote_citation {
  font-weight: normal !important;
}
.pull-quote__large .pull-quote_body {
  font-family: "AvenirNextLTW01-Regular", Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 0.73076923em;
  font-size: 1.625em;
  line-height: 1.26923077;
  margin-bottom: 0.69230769em;
}
.pull-quote__large .pull-quote_body em,
.pull-quote__large .pull-quote_body i {
  font-family: "AvenirNextLTW01-Italic", Arial, sans-serif;
  font-style: italic;
  font-weight: normal;
}
.lt-ie9 .pull-quote__large .pull-quote_body em,
.lt-ie9 .pull-quote__large .pull-quote_body i {
  font-style: normal !important;
}
.pull-quote__large .pull-quote_body strong,
.pull-quote__large .pull-quote_body b {
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
}
.lt-ie9 .pull-quote__large .pull-quote_body strong,
.lt-ie9 .pull-quote__large .pull-quote_body b {
  font-weight: normal !important;
}
@media only all and (max-width: 37.4375em) {
  .pull-quote__large .pull-quote_body {
    font-family: "AvenirNextLTW01-Regular", Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0.95454545em;
    font-size: 1.375em;
    line-height: 1.27272727;
  }
  .pull-quote__large .pull-quote_body em,
  .pull-quote__large .pull-quote_body i {
    font-family: "AvenirNextLTW01-Italic", Arial, sans-serif;
    font-style: italic;
    font-weight: normal;
  }
  .lt-ie9 .pull-quote__large .pull-quote_body em,
  .lt-ie9 .pull-quote__large .pull-quote_body i {
    font-style: normal !important;
  }
  .pull-quote__large .pull-quote_body strong,
  .pull-quote__large .pull-quote_body b {
    font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
  }
  .lt-ie9 .pull-quote__large .pull-quote_body strong,
  .lt-ie9 .pull-quote__large .pull-quote_body b {
    font-weight: normal !important;
  }
}
@media only all and (max-width: 37.4375em) and only all and (max-width: 37.4375em) {
  .pull-quote__large .pull-quote_body {
    margin-top: 0;
    margin-bottom: 1.16666667em;
    font-size: 1.125em;
    font-family: "AvenirNextLTW01-Medium", Arial, sans-serif;
    font-style: normal;
    font-weight: 500;
    line-height: 1.22222222;
  }
  .lt-ie9 .pull-quote__large .pull-quote_body {
    font-weight: normal !important;
  }
}
/* topdoc
    name: Form labels
    family: cf-core
    notes:
      - "Visit https://github.com/cfpb/cf-forms for advanced form label patterns."
    patterns:
    - name: Default label
      markup: |
        <label>Form label</label>
    - name: Label wrapping a radio or checkbox
      markup: |
        <label>
            <input type="radio">
            Radio label
        </label>
        <label>
            <input type="checkbox">
            Checkbox label
        </label>
    tags:
    - cf-core
*/
label {
  display: block;
  margin-bottom: 0.3125em;
  font-family: "AvenirNextLTW01-Regular", Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
}
label em,
label i {
  font-family: "AvenirNextLTW01-Italic", Arial, sans-serif;
  font-style: italic;
  font-weight: normal;
}
.lt-ie9 label em,
.lt-ie9 label i {
  font-style: normal !important;
}
label strong,
label b {
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
}
.lt-ie9 label strong,
.lt-ie9 label b {
  font-weight: normal !important;
}
label input[type="radio"],
label input[type="checkbox"] {
  margin-right: 0.375em;
}
/* topdoc
    name: Form elements
    family: cf-core
    notes:
      - "The .focus class is only included for documentation demos and should
         not be used in production."
      - "Visit https://github.com/cfpb/cf-forms for advanced form field patterns."
    patterns:
    - name: type="text"
      markup: |
        <input type="text" value="Lorem ipsum">
        <input placeholder="Lorem ipsum" type="text" value="">
        <input class="focus" type="text" value="Lorem ipsum">
    - name: type="search"
      markup: |
        <input type="search" value="Lorem ipsum">
        <input placeholder="Lorem ipsum" type="search" value="">
        <input class="focus" type="search" value="Lorem ipsum">
    - name: type="email"
      markup: |
        <input type="email" value="Lorem ipsum">
        <input placeholder="Lorem ipsum" type="email" value="">
        <input class="focus" type="email" value="Lorem ipsum">
    - name: type="url"
      markup: |
        <input type="url" value="Lorem ipsum">
        <input placeholder="Lorem ipsum" type="url" value="">
        <input class="focus" type="url" value="Lorem ipsum">
    - name: type="tel"
      markup: |
        <input type="tel" value="Lorem ipsum">
        <input placeholder="Lorem ipsum" type="tel" value="">
        <input class="focus" type="tel" value="Lorem ipsum">
    - name: type="number"
      markup: |
        <input type="number" value="1000">
        <input placeholder="Lorem ipsum" type="number" value="">
        <input class="focus" type="number" value="1000">
    - name: textarea
      markup: |
        <textarea>Lorem ipsum</textarea>
        <textarea class="focus">Lorem ipsum</textarea>
    - name: multi-select
      markup: |
        <select multiple>
            <option value="option1">Lorem</option>
            <option value="option2">Ipsum</option>
            <option value="option3">Dolor</option>
            <option value="option4">Sit</option>
        </select>
        <select class="focus" multiple>
            <option value="option1">Lorem</option>
            <option value="option2">Ipsum</option>
            <option value="option3">Dolor</option>
            <option value="option4">Sit</option>
        </select>
    tags:
    - cf-core
*/
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select[multiple] {
  display: inline-block;
  margin: 0;
  padding: 0.375em;
  font-family: Arial, sans-serif;
  font-size: 1em;
  background: #ffffff;
  border: 1px solid #75787b;
  border-radius: 0;
  vertical-align: top;
  -webkit-appearance: none;
  -webkit-user-modify: read-write-plaintext-only;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
input[type="text"]:focus,
input[type="text"].focus,
input[type="search"]:focus,
input[type="search"].focus,
input[type="email"]:focus,
input[type="email"].focus,
input[type="url"]:focus,
input[type="url"].focus,
input[type="tel"]:focus,
input[type="tel"].focus,
input[type="number"]:focus,
input[type="number"].focus,
textarea:focus,
textarea.focus,
select[multiple]:focus,
select[multiple].focus {
  border: 1px solid #0072ce;
  outline: 1px solid #0072ce;
  outline-offset: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
::-webkit-input-placeholder {
  color: #75787b;
}
::-moz-placeholder {
  color: #75787b;
}
:-ms-input-placeholder {
  color: #75787b;
}
/* topdoc
  name: Images
  family: cf-core
  patterns:
    - name: max-width
      markup: |
            <img src="http://placekitten.com/800/40" alt="">
      notes:
        - "Gives all images a default max-width of 100% of their container."
  tags:
    - cf-core
*/
img {
  max-width: 100%;
}
/* topdoc
  name: Figure
  family: cf-core
  patterns:
    - name: figure.figure__bordered
      markup: |
        <figure class="figure__bordered">
            <img src="http://placekitten.com/300/300">
        </figure>
  tags:
    - cf-core
*/
figure {
  margin-left: 0;
  margin-right: 0;
}
figure img {
  vertical-align: middle;
}
.figure__bordered img {
  border: 1px solid #babbbd;
}
/* topdoc
  name: Branded list modifier
  family: cf-core
  patterns:
    - name: Branded list
      markup: |
        <ul class="list__branded">
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
        </ul>
      codenotes:
        - ".list__branded"
      notes:
        - "List that uses brand-color bullets"
  tags:
    - cf-core
*/
.list__branded li {
  position: relative;
  list-style-type: none;
  padding-bottom: 0.75em;
}
.list__branded li:before {
  content: "\25AA";
  position: absolute;
  color: #2cb34a;
  font-size: 1.375em;
  line-height: 1;
  left: -0.86363636em;
}
/* topdoc
  name: EOF
  eof: true
*/
/* ==========================================================================
   helper classes
   ========================================================================== */
.demi {
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
}
.lt-ie9 .demi {
  font-weight: normal !important;
}
.sans {
  font-family: "AvenirNextLTW01-Regular", Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
}
.sans em,
.sans i {
  font-family: "AvenirNextLTW01-Italic", Arial, sans-serif;
  font-style: italic;
  font-weight: normal;
}
.lt-ie9 .sans em,
.lt-ie9 .sans i {
  font-style: normal !important;
}
.sans strong,
.sans b {
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
}
.lt-ie9 .sans strong,
.lt-ie9 .sans b {
  font-weight: normal !important;
}
/* ==========================================================================
   Universal
   ========================================================================== */
html,
body {
  height: 100%;
}
/* for sticky footer */
.body-wrapper {
  display: table;
  height: 100%;
  width: 100%;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  padding: 3em 0;
}
.title_heading {
  margin: 0;
  font-size: 1.625em;
}
.title_heading a {
  color: #75787b;
}
.global-nav_list {
  margin: 0;
  padding: 0;
  font-family: "AvenirNextLTW01-Regular", Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  vertical-align: middle;
}
.global-nav_list em,
.global-nav_list i {
  font-family: "AvenirNextLTW01-Italic", Arial, sans-serif;
  font-style: italic;
  font-weight: normal;
}
.lt-ie9 .global-nav_list em,
.lt-ie9 .global-nav_list i {
  font-style: normal !important;
}
.global-nav_list strong,
.global-nav_list b {
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
}
.lt-ie9 .global-nav_list strong,
.lt-ie9 .global-nav_list b {
  font-weight: normal !important;
}
@media (min-width: 770px) {
  .site-header .content-l_col {
    vertical-align: middle;
  }
  .site-header .content-l_col + .content-l_col {
    margin-top: 0;
  }
  .global-nav {
    text-align: right;
  }
  .nav-list-item {
    display: inline-block;
    margin-right: 20px;
  }
  .lt-ie8 .nav-list-item {
    display: inline;
  }
  .nav-list-item:last-child {
    margin-right: 0px;
  }
}
@media (max-width: 770px) {
  .global-nav_list {
    border-top: 1px solid #e3e4e5;
  }
  .nav-list-item a {
    display: block;
    border-bottom: 1px solid #e3e4e5;
    padding: 1em;
  }
}
/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: #dbedd4;
}
.hero_heading {
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 3.5em;
  margin: 0;
}
.lt-ie9 .hero_heading {
  font-weight: normal !important;
}
.hero_code {
  background: #43484e;
  color: #f1f2f2;
  font-size: 1.5em;
  padding: .5em .5em;
  margin: 1.5em 0;
}
@media (min-width: 1100px) {
  .hero_code {
    width: 60%;
  }
}
.hero_p {
  margin-bottom: 0;
}
.jump-link {
  position: relative;
  margin-right: 1.5em;
  border-bottom-width: 1px;
  font-family: "AvenirNextLTW01-Medium", Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
}
.lt-ie9 .jump-link {
  font-weight: normal !important;
}
.jump-link:after {
  content: "\e002";
  right: -1.25em;
}
.jump-link__download:after {
  content: "\e406";
  right: -1.5em;
}
.jump-link__external-link:after {
  content: "\e610";
}
.jump-link:after {
  font-family: 'CFPB Minicons';
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  bottom: 0;
  border-bottom: none;
}
@media (max-width: 770px) {
  .hero_heading {
    font-size: 2em;
  }
  .hero_code {
    font-size: 1em;
  }
}
/* ==========================================================================
   Main content
   ========================================================================== */
.section-image {
  width: 65%;
  margin: 0 auto;
  padding-bottom: 1.4em;
}
/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  display: table-row;
  /* for sticky footer */
  height: 1px;
  /* for sticky footer */
  background: #f1f2f2;
}
.site-footer_wrapper {
  padding: 2em 0;
}
/* ==========================================================================
   Secondary Nav
   ========================================================================== */
.nav-secondary {
  margin-bottom: 1.875em;
}
.nav-secondary_list {
  margin: 0;
  padding: 0;
}
.nav-secondary_item {
  list-style: none;
}
@media only all and (min-width: 50.0625em) {
  .nav-secondary_item + .nav-secondary_item {
    margin-top: 10px;
  }
}
@media only all and (max-width: 50em) {
  .nav-secondary_link {
    display: block;
    padding: 0.9375em 1.875em;
    border-bottom-style: solid;
    border-width: 0;
    border-bottom-width: 1px;
    background: #f1f2f2;
    font-family: "AvenirNextLTW01-Medium", Arial, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
    color: #43484e;
    border-color: #e3e4e5;
    text-align: left;
  }
  .lt-ie9 .nav-secondary_link {
    font-weight: normal !important;
  }
  .nav-secondary_link:visited,
  .nav-secondary_link.visited {
    border-color: #e3e4e5;
    color: #43484e;
  }
  .nav-secondary_link:hover,
  .nav-secondary_link.hover {
    border-color: #e3e4e5;
    color: #43484e;
  }
  .nav-secondary_link:focus,
  .nav-secondary_link.focus {
    border-color: #e3e4e5;
    color: #43484e;
  }
  .nav-secondary_link:active,
  .nav-secondary_link.active {
    border-color: #e3e4e5;
    color: #43484e;
  }
}
@media only all and (max-width: 37.5em) {
  .nav-secondary_link {
    padding-left: 0.9375em;
    padding-right: 0.9375em;
  }
}
@media only all and (min-width: 50.0625em) {
  .nav-secondary_link {
    display: inline-block;
    padding: 0.27777778em 0.83333333em;
    border-left-style: solid;
    border-left-width: 5px;
    font-family: "AvenirNextLTW01-Medium", Arial, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.125em;
    color: #0072ce;
    border-color: transparent;
  }
  .lt-ie9 .nav-secondary_link {
    font-weight: normal !important;
  }
  .nav-secondary_link:visited,
  .nav-secondary_link.visited {
    border-color: transparent;
    color: #0072ce;
  }
  .nav-secondary_link:hover,
  .nav-secondary_link.hover {
    border-color: #2cb34a;
    color: #101820;
  }
  .nav-secondary_link:focus,
  .nav-secondary_link.focus {
    border-color: #2cb34a;
    color: #101820;
  }
  .nav-secondary_link:active,
  .nav-secondary_link.active {
    border-color: #2cb34a;
    color: #101820;
  }
}
@media only all and (max-width: 50em) {
  .nav-secondary_link__current {
    display: none;
  }
}
@media only all and (min-width: 50.0625em) {
  .nav-secondary_link__current {
    color: #101820;
    border-color: #2cb34a;
  }
  .nav-secondary_link__current:visited,
  .nav-secondary_link__current.visited {
    border-color: #2cb34a;
    color: #101820;
  }
  .nav-secondary_link__current:hover,
  .nav-secondary_link__current.hover {
    border-color: #2cb34a;
    color: #101820;
  }
  .nav-secondary_link__current:focus,
  .nav-secondary_link__current.focus {
    border-color: #2cb34a;
    color: #101820;
  }
  .nav-secondary_link__current:active,
  .nav-secondary_link__current.active {
    border-color: #2cb34a;
    color: #101820;
  }
}
.nav-secondary_link__button {
  width: 100%;
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  text-transform: uppercase;
}
.lt-ie9 .nav-secondary_link__button {
  font-weight: normal !important;
}
.nav-secondary_link__button:focus {
  outline: thin dotted;
}
@media only all and (min-width: 50.0625em) {
  .nav-secondary_link__button {
    display: none;
  }
}
/* ==========================================================================
   Syntax highlighting
   based on Hyde: https://github.com/poole/hyde/tree/master/public
   ========================================================================== */
.highlight .hll {
  background-color: #ffc;
}
.highlight .c {
  color: #999;
}
/* Comment */
.highlight .err {
  color: #a00;
  background-color: #ffaaaa;
}
/* Error */
.highlight .k {
  color: #069;
}
/* Keyword */
.highlight .o {
  color: #555555;
}
/* Operator */
.highlight .cm {
  color: #09f;
  font-style: italic;
}
/* Comment.Multiline */
.highlight .cp {
  color: #009999;
}
/* Comment.Preproc */
.highlight .c1 {
  color: #999;
}
/* Comment.Single */
.highlight .cs {
  color: #999;
}
/* Comment.Special */
.highlight .gd {
  background-color: #fcc;
  border: 1px solid #cc0000;
}
/* Generic.Deleted */
.highlight .ge {
  font-style: italic;
}
/* Generic.Emph */
.highlight .gr {
  color: #ff0000;
}
/* Generic.Error */
.highlight .gh {
  color: #030;
}
/* Generic.Heading */
.highlight .gi {
  background-color: #cfc;
  border: 1px solid #00cc00;
}
/* Generic.Inserted */
.highlight .go {
  color: #aaaaaa;
}
/* Generic.Output */
.highlight .gp {
  color: #009;
}
/* Generic.Prompt */
/* Generic.Strong */
.highlight .gu {
  color: #030;
}
/* Generic.Subheading */
.highlight .gt {
  color: #99cc66;
}
/* Generic.Traceback */
.highlight .kc {
  color: #069;
}
/* Keyword.Constant */
.highlight .kd {
  color: #069;
}
/* Keyword.Declaration */
.highlight .kn {
  color: #069;
}
/* Keyword.Namespace */
.highlight .kp {
  color: #006699;
}
/* Keyword.Pseudo */
.highlight .kr {
  color: #069;
}
/* Keyword.Reserved */
.highlight .kt {
  color: #078;
}
/* Keyword.Type */
.highlight .m {
  color: #ff6600;
}
/* Literal.Number */
.highlight .s {
  color: #d44950;
}
/* Literal.String */
.highlight .na {
  color: #4f9fcf;
}
/* Name.Attribute */
.highlight .nb {
  color: #336666;
}
/* Name.Builtin */
.highlight .nc {
  color: #0a8;
}
/* Name.Class */
.highlight .no {
  color: #336600;
}
/* Name.Constant */
.highlight .nd {
  color: #9999ff;
}
/* Name.Decorator */
.highlight .ni {
  color: #999;
}
/* Name.Entity */
.highlight .ne {
  color: #c00;
}
/* Name.Exception */
.highlight .nf {
  color: #cc00ff;
}
/* Name.Function */
.highlight .nl {
  color: #9999ff;
}
/* Name.Label */
.highlight .nn {
  color: #0cf;
}
/* Name.Namespace */
.highlight .nt {
  color: #2f6f9f;
}
/* Name.Tag */
.highlight .nv {
  color: #003333;
}
/* Name.Variable */
.highlight .ow {
  color: #000;
}
/* Operator.Word */
.highlight .w {
  color: #bbbbbb;
}
/* Text.Whitespace */
.highlight .mf {
  color: #ff6600;
}
/* Literal.Number.Float */
.highlight .mh {
  color: #ff6600;
}
/* Literal.Number.Hex */
.highlight .mi {
  color: #ff6600;
}
/* Literal.Number.Integer */
.highlight .mo {
  color: #ff6600;
}
/* Literal.Number.Oct */
.highlight .sb {
  color: #cc3300;
}
/* Literal.String.Backtick */
.highlight .sc {
  color: #cc3300;
}
/* Literal.String.Char */
.highlight .sd {
  color: #c30;
  font-style: italic;
}
/* Literal.String.Doc */
.highlight .s2 {
  color: #cc3300;
}
/* Literal.String.Double */
.highlight .se {
  color: #c30;
}
/* Literal.String.Escape */
.highlight .sh {
  color: #cc3300;
}
/* Literal.String.Heredoc */
.highlight .si {
  color: #aa0000;
}
/* Literal.String.Interpol */
.highlight .sx {
  color: #cc3300;
}
/* Literal.String.Other */
.highlight .sr {
  color: #33aaaa;
}
/* Literal.String.Regex */
.highlight .s1 {
  color: #cc3300;
}
/* Literal.String.Single */
.highlight .ss {
  color: #ffcc33;
}
/* Literal.String.Symbol */
.highlight .bp {
  color: #336666;
}
/* Name.Builtin.Pseudo */
.highlight .vc {
  color: #003333;
}
/* Name.Variable.Class */
.highlight .vg {
  color: #003333;
}
/* Name.Variable.Global */
.highlight .vi {
  color: #003333;
}
/* Name.Variable.Instance */
.highlight .il {
  color: #ff6600;
}
/* Literal.Number.Integer.Long */
.css .o,
.css .o + .nt,
.css .nt + .nt {
  color: #999;
}
/* Code */
code,
pre {
  font-family: "Input Mono", Consolas, Monaco, "Courier New", monospace;
}
code {
  padding: .25em .5em;
  font-size: 85%;
  color: #bf616a;
  background-color: #f9f9f9;
  border-radius: 3px;
}
pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1em;
  padding: 1em;
  font-size: .8em;
  line-height: 1.4;
  white-space: pre;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f9f9f9;
}
pre code {
  padding: 0;
  font-size: 100%;
  color: inherit;
  background-color: transparent;
}
/* Pygments via Jekyll */
.highlight {
  margin-bottom: 1rem;
  border-radius: 4px;
}
.highlight pre {
  margin-bottom: 0;
}