@charset "UTF-8";

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device 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/10/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 of focused elements when they are also in an
 * active/hover state.
 */
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 {
  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"] {
  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.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */
}

/**
 * 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;
}

/**
 * Checks whether `$functions` exist in global scope.
 *
 * @access private
 *
 * @param {ArgList} $functions - list of functions to check for
 *
 * @return {Bool} Whether or not there are missing dependencies
 */
/**
 * Compares `$a` and `$b` based on `$order`.
 *
 * @access private
 *
 * @param {*}       $a      - first value
 * @param {*}       $b      - second value
 * @param {List}    $matrix - alphabetical order
 *
 * @return {Bool}
 */
/**
 * Returns truthiness of `$value`.
 *
 * @access private
 *
 * @param {*} $value - value to check
 *
 * @return {Bool}
 */
/**
 * Check whether value is a number
 *
 * @access private
 *
 * @param {*} $value - value to run test against
 *
 * @return {Bool}
 */
/**
 * Chunks `$list` into `$size` large lists.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-chunk
 *
 * @param {List}   $list  - list to chunk
 * @param {Number} $size  - length of lists
 *
 * @throws $size is not a number for `sl-chunk`.
 *
 * @requires sl-to-list
 *
 * @example
 * sl-chunk(a b c d e, 2)
 * // a b, c d, e
 *
 * @return {List | Null}
 */
/**
 * Initialize an empty comma-separated list.
 * 
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-comma-list
 *
 * @example
 * sl-comma-list()
 * // ()
 *
 * @return {List}
 */
/**
 * Returns whether `$list` contains `$value`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-contain
 *
 * @param {List}    $list  - list to check
 * @param {*}       $value - value to look for
 *
 * @example
 * sl-contain(a b c, a)
 * // true
 *
 * @example
 * sl-contain(a b c, z)
 * // false
 *
 * @return {Bool}
 */
/**
 * @requires sl-contain
 * @alias sl-contain
 */
/**
 * Counts the number of occurrences of each value of `$list`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-count-values
 *
 * @param {List} $list - list to count values from
 *
 * @example
 * sl-count-values(a b c a)
 * // (a: 2, b: 1, c: 1) 
 *
 * @return {Map} Values mapped to their count
 */
/**
 * Returns `$list` as a string, prettified if `$pre` is set to true.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-debug
 *
 * @param {List}   $list          - list to debug
 * @param {Bool}   $pre   (false) - enable/disable variables type and proper indentation
 * @param {Number} $level (1)     - internal variable for recursion
 *
 * @requires sl-is-empty
 * @requires sl-is-single
 * @requires sl-has-multiple-values
 * 
 * @example
 * sl-debug(a b c)
 * // '("a", "b", "c")'
 *
 * @return {String}
 */
/**
 * Mixin displaying clean debug
 *
 * @param {List} $list - list
 *
 * @requires sl-debug
 */
/**
 * Tests whether all items from `$list` pass the test implemented by `$function`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-every
 *
 * @param {List}    $list     - list to run test against
 * @param {String}  $function - function to run against every item from list
 * @param {ArgList} $args     - extra arguments to pass to the function
 *
 * @example
 * sl-every(1 2 3, unitless)
 * // true
 *
 * @example
 * sl-every(1 2 3px, unitless)
 * // false
 *
 * @return {Bool}
 */
/**
 * Explodes `$string` into a list using `$delimiter` as a delimiter.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-explode
 *
 * @param {String} $string              - string to explode
 * @param {String} $delimiter ('')      - string to use as a delimiter
 * @param {String} $separator ('space') - list separator
 *
 * @throws $string is not a string for `sl-explode`.
 * @throws $delimiter is not a string for `sl-explode`.
 *
 * @example
 * sl-explode(abc)
 * // a b c
 *
 * @example
 * sl-explode(abc, b)
 * // a c
 * 
 * @return {List | Null}
 */
/** Returns first element of `$list`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-first
 *
 * @param {List} $list - list to retrieve first item from
 *
 * @throws Cannot find first item of empty list.
 *
 * @requires sl-is-empty
 *
 * @example
 * sl-first(a b c)
 * // a
 *
 * @example
 * sl-first(a)
 * // a
 *
 * @example
 * sl-first(())
 * // null
 * 
 * @return {*}
 */
/**
 * @requires sl-first
 * @alias sl-first
 */
/**
 * Turns multidimensional `$list` into a one-level list.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#flatten
 *
 * @param {List} $list - list to flatten
 * 
 * @requires sl-has-multiple-values
 *
 * @example
 * sl-flatten(a b c, d e f, g h i)
 * // a b c d e f g h i
 *
 * @return {List}
 */
/** 
 * @requires sl-flatten
 * @alias sl-flatten
 */
/** Tests whether `$list` is not empty.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-has-values
 *
 * @param {List} $list - list to run test against
 *
 * @example 
 * sl-has-values(a)
 * // true
 *
 * @example 
 * sl-has-values(())
 * // false
 * 
 * @return {Bool}
 */
/**
 * Tests whether `$list` has at least 2 values.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-has-multiple-values
 *
 * @param {List} $list - list to run test against
 *
 * @example 
 * sl-has-multiple-values(a)
 * // false
 *
 * @example 
 * sl-has-multiple-values(a b)
 * // true
 * 
 * @return {Bool}
 */
/** Adds `$value` at `$index` in `$list`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-insert-nth
 *
 * @requires sl-is-true
 *
 * @param {List}    $list  - list to update
 * @param {Number}  $index - index to add
 * @param {*}       $value - value to add
 *
 * @throws List index $index is not a number for `sl-insert-nth`.
 * @throws List index $index must be a non-zero integer for `sl-insert-nth`.
 *
 * @example
 * sl-insert-nth(a b c, 2, z)
 * // a z b c
 *
 * @example
 * sl-insert-nth(a b c, 42, z)
 * // a b c z
 *
 * @example 
 * sl-insert-nth(a b c, -42, z)
 * // null
 * 
 * @return {List | Null}
 */
/**
 * Returns a list of shared value from `$list` and `$lists` minus duplicates.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-intersection
 *
 * @requires sl-remove-duplicates
 * @requires sl-to-list
 *
 * @param {List}    $list  - first list
 * @param {ArgList} $lists - other lists
 *
 * @example
 * sl-intersection(a b c, b e d, a c b)
 * // b
 * 
 * @return {List}
 */
/** 
 * Tests whether `$list` is empty.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-is-empty
 *
 * @param {List} $list - list to run test against
 *
 * @example
 * sl-is-empty(())
 * // true
 *
 * @example
 * sl-is-empty(a)
 * // false
 *
 * @return {Bool}
 */
/**
 * @requires sl-is-empty
 * @alias sl-is-empty
 */
/**
 * Tests whether `$list` has a single item.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-is-single
 *
 * @param {List} $list - list to run test against
 *
 * @example
 * sl-is-single(())
 * // false
 *
 * @example
 * sl-is-single(a)
 * // true
 *
 * @example
 * sl-is-single(a b)
 * // false
 *
 * @return {Bool}
 */
/**
 * Checks whether `$list` is symmetrical.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-is-symmetrical
 *
 * @requires sl-reverse
 *
 * @param {List} $list - list to check
 *
 * @example
 * sl-is-symmetrical(a b c)
 * // false
 *
 * 
 * @example
 * sl-is-symmetrical(a b a)
 * // true
 *
 * @return {Bool}
 */
/**
 * @requires sl-is-symmetrical
 * @alias sl-is-symmetrical
 */
/**
 * Returns last element of `$list`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-last
 *
 * @param {List} $list - list to retrieve last value from
 *
 * @throws Cannot find last item of empty list.
 *
 * @requires sl-is-empty
 *
 * @example
 * sl-last(a b c)
 * // c
 * 
 * @example
 * sl-last(a)
 * // a
 *
 * @example
 * sl-last(())
 * // null
 * 
 * @return {*}
 */
/**
 * Returns last index of `$value` in `$list`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-last-index
 *
 * @param {List} $list  - list to search
 * @param {*}    $value - value to be searched for
 *
 * @example
 * sl-last-index(a b a, a)
 * // 3
 *
 * @example
 * sl-last-index(a b a, z)
 * // null
 *
 * @return {Number | Null}
 */
/**
 * Shift indexes from `$list` of `$value`.
 *
 * @author Ana Tudor
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-loop
 *
 * @param {List}   $list      - list to update
 * @param {Number} $value (1) - number of position between old and new indexes
 *
 * @throws $value is not a number for `loop`.
 *
 * @requires sl-has-multiple-values
 *
 * @example
 * sl-loop(a b c)
 * // c a b
 * 
 * @example
 * sl-loop(a b c, 2)
 * // b c a
 *
 * @return {List | Null}
 */
/**
 * @requires sl-loop
 * @alias sl-loop
 */
/**
 * Adds `$value` as first index of `$list`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-prepend
 *
 * @requires sl-is-true
 * @requires sl-to-list
 *
 * @param {List} $list  - list to preprend value to
 * @param {*}    $value - value to prepend to the list
 *
 * @example
 * sl-prepend(a b c, z)
 * // z a b c
 * 
 * @return {List}
 */
/** Removes all false and null values from `$list`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#purge
 *
 * @requires sl-is-true
 * @requires sl-to-list
 *
 * @param {List} $list - list to purge
 *
 * @example
 * sl-purge(null a false b)
 * // a b
 *
 * @return {List}
 */
/**
 * @requires sl-purge
 * @alias sl-purge
 */
/**
 * Returns a random value of `$list`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#random-value
 *
 * @param {List} $list - list to random value from
 *
 * @throws Cannot find a random value in an empty list.
 *
 * @requires sl-is-empty
 *
 * @example
 * sl-random-value(a b c)
 * // a
 * 
 * @return {*}
 */
/**
 * @requires sl-random-value
 * @alias sl-random-value
 */
/**
 * @requires sl-random-value
 * @alias sl-random-value
 */
/**
 * Build a list of values from 1 through `$n`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-range
 *
 * @param {Number} $n - maximum value
 *
 * @throws `$n` is not a number for `sl-range`.
 * @throws `$n` is not unitless for `sl-range`.
 * @throws `$n` is not greater than 0 for `sl-range`.
 *
 * @example
 * sl-range(5)
 * // 1 2 3 4 5
 *
 * @example
 * sl-range(1)
 * // 1
 *
 * @example
 * sl-range(-42)
 * // null
 *
 * @return {List | Number | Null}
 */
/**
 * Removes value(s) `$value` from `$list`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-remove
 *
 * @requires sl-replace
 *
 * @param {List}    $list      - list to update
 * @param {*}       $value     - value to remove
 *
 * @example
 * sl-remove(a b c, a)
 * // b c
 *
 * @return {List}
 */
/**
 * @requires sl-remove
 * @alias sl-remove
 */
/**
 * Removes duplicate values from `$list`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-remove-duplicates
 *
 * @param {List} $list - list to remove duplicates from
 *
 * @requires sl-to-list
 *
 * @example
 * sl-remove-duplicates(a b a b)
 * // a b
 *
 * @return {List}
 */
/**
 * @requires sl-remove-duplicates
 * @alias sl-remove-duplicates
 */
/**
 * Removes value from `$list` at index `$index`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-remove-nth
 *
 * @requires sl-replace-nth
 *
 * @param {List}   $list  - list to remove value from
 * @param {Number} $index - index to remove
 *
 * @example
 * sl-remove-nth(a b c, 2)
 * // a c
 *
 * @example
 * sl-remove-nth(a b c, 42)
 * // null
 *
 * @return {List | Null}
 */
/**
 * @requires sl-remove-nth
 * @alias sl-remove-nth
 */
/**
 * Replaces `$old` by `$new` in `$list`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#replace
 *
 * @requires sl-is-true
 * @requires sl-purge
 * @requires sl-to-list
 *
 * @param {List}    $list  - list to update
 * @param {*}       $old   - value to replace
 * @param {*}       $value - new value for $old
 *
 * @example
 * sl-replace(a b c, b, z)
 * // a z c
 *
 * @example
 * sl-replace(a b c, y, z)
 * // a b c
 * 
 * @return {List}
 */
/**
 * Replaces value at `$index` from `$list` by `$value`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-replace-nth
 *
 * @requires sl-purge
 * @requires sl-is-true
 * @requires sl-to-list
 *
 * @param {List}   $list  - list to update
 * @param {Number} $index - index to update
 * @param {*}      $value - new value for index
 *
 * @throws Invalid index $index for `sl-replace-nth`.
 *
 * @example
 * sl-replace-nth(a b c, 2, z)
 * // a z c
 *
 * @example
 * sl-replace-nth(a b c, 100, z)
 * // null
 *
 * @return {List | Null}
 */
/**
 * Reverses the order of `$list`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-reverse
 *
 * @param {List} $list - list to reverse
 *
 * @requires sl-to-list
 *
 * @example
 * sl-reverse(a b c)
 * // c b a
 * 
 * @return {List}
 */
/**
 * @requires sl-reverse
 * @alias sl-reverse
 */
/**
 * Shuffle `$list` using Fisher-Yates method.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-shuffle
 *
 * @param {List} $list - list to shuffle
 *
 * @requires sl-to-list
 * 
 * @example
 * sl-shuffle(a b c)
 * // b a c
 * 
 * @return {List}
 */
/**
 * @requires sl-shuffle
 * @alias sl-shuffle
 */
/**
 * Slices `$list` between `$start` and `$end`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-slice
 *
 * @param {List}   $list                  - list to slice
 * @param {Number} $start (1)             - start index
 * @param {Number} $end   (length($list)) - end index
 *
 * @throws List indexes $start and $end must be numbers for `sl-slice`.
 * @throws Start index has to be lesser than or equals to the end index for `sl-slice`.
 * @throws List indexes must be non-zero integers for `sl-slice`.
 * @throws Start index has to be lesser than or equal to list length for `sl-slice`.
 * @throws End index has to be lesser than or equal to list length for `sl-slice`.
 * 
 * @example
 * sl-slice(a b c d e, 2, 4)
 * // b c d
 *
 * @example
 * sl-slice(a b c d e, 2, 2)
 * // b
 *
 * @example
 * sl-slice(a b c d e, 4, 2)
 * // null
 *
 * @example
 * sl-slice(a b c d e, -1, 6)
 * // null
 * 
 * @return {List | Null}
 */
/**
 * Sorts values of `$list` using quick-sort algorithm using `$order`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-sort
 *
 * @requires sl-str-compare
 * @requires sl-has-multiple-values
 * @requires sl-to-list
 *
 * @param {List} $list  - list to sort
 * @param {List} $order - order to respect
 *
 * @example
 * sl-sort(b a c)
 * // a b c
 *
 * @example
 * sl-sort(3 5 1)
 * // 1 3 5 
 *
 * @return {List}
 */
/**
 * @requires sl-sort
 * @alias sl-sort
 */
/**
 * Tests whether some items from `$list` pass the test implemented by `$function`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-some
 *
 * @param {List}    $list     - list to run test against
 * @param {String}  $function - function to run against every item from list
 * @param {ArgList} $args     - extra arguments to pass to the function
 *
 * @example
 * sl-some(1 2 3, unitless)
 * // true
 *
 * @example
 * sl-some(1 2 3px, unitless)
 * // true
 *
 * @example
 * sl-some(1px 2px 3px, unitless)
 * // false
 *
 * @return {Bool}
 */
/**
 * Sums up all numeric values in `$list`, stripping unit if `$force` set to `true`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-sum
 *
 * @param {List} $list          - list
 * @param {Bool} $force (false) - enable/disable parseInt
 *
 * @requires sl-every
 * @requires sl-is-number
 *
 * @throws All items from list are not numbers for `sl-sum`.
 *
 * @example
 * sl-sum(1 2 3)
 * // 6
 *
 * @example
 * sl-sum(a b 1)
 * null
 *
 * @example
 * sl-sum(1 2 3px, true)
 * // 6
 * 
 * @return {Number}
 */
/**
 * Returns the tail of `$list`: all items except the first (head).
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-tail
 *
 * @requires sl-slice
 *
 * @param {List} $list - list to retrieve tail from
 *
 * @example
 * sl-tail(a b c)
 * // b c 
 *
 * @return {List | Null}
 */
/**
 * @requires sl-tail
 * @alias sl-tail
 */
/**
 * Casts `$value` into a list.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-to-list
 *
 * @param {*} $value - value to cast to list
 * @param {String} $separator (space) - separator to use
 *
 * @example
 * sl-to-list(a b c, comma)
 * // a, b, c
 * 
 * @return {List}
 */
/**
 * @requires sl-to-list
 * @alias sl-to-list
 */
/**
 * Casts `$list` into a map, using indexes as keys (starting with `$start`).
 * Useful for iterating through a list with an index variable.
 * e.g. `@each $index, $value in to-map($list)`
 *
 * @author Andrey "Lolmaus" Mikhaylov
 * @author Chris Eppstein
 * 
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-to-map
 * 
 * @param {List} $list - list to turn into map
 *
 * @requires sl-range
 * @requires sl-is-empty
 * 
 * @throws List cannot be empty for `sl-to-map`.
 *
 * @example
 * sl-to-map(a b c)
 * // 1 a, 2 b, 3 c
 * 
 * @return {Map | Null}
 */
/**
 * @requires sl-to-map
 * @alias sl-to-map
 */
/**
 * @requires sl-to-map
 * @alias sl-to-map
 */
/**
 * Joins all elements of `$list` with `$glue`.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-to-string
 *
 * @param {List}   $list      - list to cast
 * @param {String} $glue ('') - value to use as a join string
 *
 * @requires sl-has-multiple-values
 * @requires sl-last
 * 
 * @example
 * sl-to-string(a b c)
 * // abc
 *
 * @example
 * sl-to-string(a b c, '-')
 * // a-b-c
 * 
 * @return {String}
 */
/**
 * @requires sl-to-string
 * @alias sl-to-string
 */
/**
 * Returns a list of values from `$lists` minus duplicates.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-union
 *
 * @requires sl-flatten
 * @requires sl-remove-duplicates
 *
 * @param {ArgList} $lists - lists to unify
 *
 * @example
 * sl-union(a b c, b e d, a c b)
 * // a b c e d
 * 
 * @return {List}
 */
/**
 * @requires sl-union
 * @alias sl-union
 */
/**
 * Apply `$function` to every item from `$list` passing $args as parameters.
 *
 * @ignore Documentation: http://sassylists.com/documentation.html#sl-walk
 *
 * @param {List}    $list     - list to update
 * @param {String}  $function - function to call on each value
 * @param {ArgList} $args     - optional function arguments
 *
 * @throws There is no `$function` function for `sl-walk`.
 *
 * @requires sl-to-map
 * @requires sl-to-list
 *
 * @example
 * sl-walk(a b c, to-upper-case)
 * // A B C
 *
 * @return {List | Null}
 */
/* ==========================================================================
 * Helpers for converting units (rems, percent, etc.)
 * ========================================================================== */
/*doc
---
title: Global Variables
name: settings
category: core
---

We keep global settings to a minimum, to keep variables closely tied to the relevant modules/libraries.

Right now, the only globals we need are a few file path helpers: `$path-images`, `$path-icons`, and `$path-fonts`.

*/
/* =============================================================================
//  Global animation styles
// ========================================================================== */
/*doc
---
title: Animation
name: animation
category: core
---

The animation library sets global defaults for CSS transitions. Use it in your modules like this:

```
.your-selector {
    @extend %base-transition;
}
```

*/
a, button, .button, input, textarea, select, .comments, .comments-callout, .comments-callout:hover:after, .comments-callout:after, .pagination, .pagination-title, .overlay-close {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

/* Globals
// -------------------------------------------------------------------------- */
/* =============================================================================
//  Webfonts
// ========================================================================== */
/*doc
---
title: Fonts
name: fonts
category: core
---

Fonts are accessed through SASS placeholders. Just extend the appropriate one. Fonts are applied to type, globally, in _type.scss, and individual modules can set up their own font styles.

Please DO NOT use your own font-family attributes in any circumstance. Always extend the placeholder.

```
// display fonts
// -> headlines, buttons, labels, etc.

@extend %font-display
@extend %font-display-bold

// body fonts
// -> paragraphs, captions, etc.

@extend %font-body
@extend %font-body-italic
@extend %font-body-bold
```

*/
/* =============================================================================
// Border/rule settings & helper
// ===========================================================================*/
/* ==========================================================================
//  Global color styles
// -> base colors are set here on global elements, but modules apply their own
// -> refer to colors ONLY via the $theme maps
// ========================================================================== */
/*doc
---
title: Color
name: color
category: core
---

Some functions and globals to keep the color scheme DRY and easy to manage in one place. Color for the entire site is handled through structured SASS maps, assigning each color a role:

```
$theme--default: (
    text--primary   : $black,
    text--secondary : #706F6F,
    text--tertiary  : darken($gray, 10),
    bg              : white,
    well            : $gray--superlight,
    border          : $gray--light,
    highlight       : $highlight--default,
    accent          : $blue--dark
);

```
You can easily access these colors by "role" with the `theme()` function, like so:

```
.your-module {
    color: theme(highlight);
    background-color: theme(bg);

}
```

If the site has multiple color schemes (say, "default" and "reverse" themes), you can specify the theme by passing in a second parameter:

```
background-color: theme(bg, reverse);
```

The second parameter is optional, and theme() will default to the 'default' theme map.

*/
/* Default
// -------------------------------------------------------------------------- */
body {
  color: #706f6f;
  background-color: white;
}
body .well {
  background: #f1f2f3;
}
body .highlight {
  color: #00aeef;
}
body .accent {
  color: #8c9498;
}
body button,
body input,
body select,
body textarea {
  color: #706f6f;
}
body h1, body h2, body h3, body h4, body h5, body h6 {
  color: #4a4a4a;
}
body p, body table, body li, body span {
  color: #706f6f;
}
body a {
  color: #00aeef;
}
body input, body textarea {
  background: #f1f2f3;
  border-color: #dee3e3;
}
body input:focus, body textarea:focus {
  border-color: #00aeef;
}
body input::-webkit-input-placeholder, body input:-moz-placeholder, body input::-moz-placeholder, body input:-ms-input-placeholder, body textarea::-webkit-input-placeholder, body textarea:-moz-placeholder, body textarea::-moz-placeholder, body textarea:-ms-input-placeholder {
  color: #abb3b1;
}
body ::selection {
  background: rgba(0, 174, 239, 0.6);
  text-shadow: none;
}
body ::-moz-selection {
  background: rgba(0, 174, 239, 0.6);
  text-shadow: none;
}

/* =============================================================================
// Global layout styles
// ===========================================================================*/
/* =============================================================================
// Global breakpoint settings
// -> requires Breakpoint library
// ===========================================================================*/
.show-small {
  display: none;
}
@media (min-width: 48em) {
  .show-small {
    display: block;
  }
}

.show-medium {
  display: none;
}
@media (min-width: 64em) {
  .show-medium {
    display: block;
  }
}

/*doc
---
title: Global layout helpers
name: layout
category: core
---

Global layout styles.

```html_example
<a href="#" class="button l-abs top right">Button @ top right</a>
```

*/
.l-wrapper {
  max-width: 1108px;
}

.l-wrapper.narrow {
  max-width: 764px;
}

.l-wrapper.wide {
  max-width: 1284px;
}

/* ---- Generic helpers ------------------------------------------------------*/
/* Layout Globals/Base Styles
// ---------------------------------------------------------------------------*/
html {
  font-size: 95%;
  box-sizing: border-box;
}
@media (min-width: 48em) {
  html {
    font-size: 100%;
  }
}
@media (min-width: 64em) {
  html {
    font-size: 110%;
  }
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Layout Helper Microclasses
// ---------------------------------------------------------------------------*/
/* ---- Wrappers and columns -------------------------------------------------*/
.l-wrapper {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-left: 42px;
  padding-right: 42px;
}
.l-wrapper::after {
  clear: both;
  content: "";
  display: table;
}

/* https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
.l-wrapper-video {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  padding-top: 25px;
  height: 0;
}
.l-wrapper-video > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ---- Fixed position -------------------------------------------------------*/
.l-fixed.full-h, .overlay {
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.l-fixed.full-w {
  overflow: auto;
  overflow-x: auto;
  overflow-y: hidden;
}

.l-fixed {
  position: fixed;
}
.l-fixed.full-h {
  top: 0;
  bottom: 0;
}
.l-fixed.full-w {
  left: 0;
  right: 0;
}

/* ---- Absolute Positioning -------------------------------------------------*/
.l-abs {
  position: absolute;
}
.l-abs.left {
  left: 0;
  margin-left: gutters();
}
.l-abs.right {
  right: 0;
  margin-right: gutters();
}
.l-abs.top {
  top: 0;
  margin-top: gutters();
}
.l-abs.bottom {
  bottom: 0;
  margin-bottom: gutters();
}

/* ---- Floats ---------------------------------------------------------------*/
.l-float.left {
  float: left;
}
.l-float.right {
  float: right;
}

/* ---- Visibility -----------------------------------------------------------*/
/*doc
---
title: Border settings & mixins
name: borders
category: core
---

Some mixins that allow us to keep our border styles DRY and control them from one place. Use these mixins and placeholders instead of writing your own CSS.

```
.your-selector {
    // add the default border radius
    @extend %base-radius;

    // add a thin border on all sides
    @include border('all', 'thin');

    // add a thick border on the top and left sides with the highlight color
    @include border('top left', 'thick', theme(highlight));
}
```

*/
.has-border.top {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #dee3e3;
  padding-top: 26px;
}
.has-border.bottom {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #dee3e3;
  padding-bottom: 26px;
}
.has-border.left {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #dee3e3;
  padding-left: 26px;
}
.has-border.right {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #dee3e3;
  padding-right: 26px;
}

.has-no-borders {
  border: none !important;
}

/* Globals
// -------------------------------------------------------------------------- */
/* ----- Avenir ------------------------------------------------------------- */
@font-face {
  font-family: 'Avenir';
  src: url(https://handshake.pppknowledgelab.org/wp-content/themes/handshake/_fonts/Avenir.eot);
  src: url(https://handshake.pppknowledgelab.org/wp-content/themes/handshake/_fonts/Avenir.eot) format("embedded-opentype"), url(https://handshake.pppknowledgelab.org/wp-content/themes/handshake/_fonts/Avenir.woff) format("woff"), url(https://handshake.pppknowledgelab.org/wp-content/themes/handshake/_fonts/Avenir.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'AvenirBold';
  src: url(https://handshake.pppknowledgelab.org/wp-content/themes/handshake/_fonts/Avenir_Bold.eot);
  src: url(https://handshake.pppknowledgelab.org/wp-content/themes/handshake/_fonts/Avenir_Bold.eot) format("embedded-opentype"), url(https://handshake.pppknowledgelab.org/wp-content/themes/handshake/_fonts/Avenir_Bold.woff) format("woff"), url(https://handshake.pppknowledgelab.org/wp-content/themes/handshake/_fonts/Avenir_Bold.ttf) format("truetype");
  font-weight: bold;
  font-style: normal;
}
/* Font styles
// -> PUBLIC, use these to style type globally & in modules
// -------------------------------------------------------------------------- */
/* ----- Display type ------------------------------------------------------- */
.breadcrumb strong, .header-breadcrumb strong, button, .button, button > strong, .button > strong, h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong, .headline-title, .hero-title, .hero h1, .article-hero h1, .slug strong, .hero-slug strong, .signoff-name, .lead:first-letter, .content > p:not(.intro):first-of-type:first-letter,
.intro + p:first-letter, .article-content > p:not(.intro):first-of-type:first-letter, .callout, .comments-callout > strong, .media-title, .meta dd, .article-meta dd, .meta-slug, nav.jump ol > li:before, .nav.jump ol > li:before, .jump.footer-nav ol > li:before, .article-jump ol > li:before, .footer-nav-main .nav-item, .pagination-slug strong, .pagination-title, .profile-name, .article-content h3, .article-content h4, .article-content h5, .article-content h6, .breadcrumb, .header-breadcrumb, button.full, .button.full, .button-label, form, input[type="search"], h1, h2, h3, h4, h5, h6, .alpha, .beta, .cappa, .delta, .epsilon, .jump-title, .zeta, .subhead, .hero-subhead, .slug, .hero-slug, .logo-tagline, .signoff, .signoff-title, .comments-callout, .media-title.small, .media-subtitle, .media-category, .meta, .article-meta, nav, .nav, .footer-nav, .toolbar-title, header.main, header [role="banner"], .header.main, .header [role="banner"], .pagination, .profile-subtitle, .sidebar-title {
  font-family: "Avenir", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  font-weight: normal;
  font-style: normal;
}

.breadcrumb strong, .header-breadcrumb strong, button, .button, button > strong, .button > strong, h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong, .headline-title, .hero-title, .hero h1, .article-hero h1, .slug strong, .hero-slug strong, .signoff-name, .lead:first-letter, .content > p:not(.intro):first-of-type:first-letter,
.intro + p:first-letter, .article-content > p:not(.intro):first-of-type:first-letter, .callout, .comments-callout > strong, .media-title, .meta dd, .article-meta dd, .meta-slug, nav.jump ol > li:before, .nav.jump ol > li:before, .jump.footer-nav ol > li:before, .article-jump ol > li:before, .footer-nav-main .nav-item, .pagination-slug strong, .pagination-title, .profile-name, .article-content h3, .article-content h4, .article-content h5, .article-content h6 {
  font-family: "AvenirBold", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  font-weight: bold;
}

/* ----- Body type ---------------------------------------------------------- */
.note, .pullquote, .article-pullquote, .intro, figure figcaption small, figure .figure-caption small, .figure figcaption small, .article-note figcaption small, .figure .figure-caption small, .article-note .figure-caption small, p strong, strong, .wbg-text, .address, input, textarea, select, body, .caption, figcaption {
  font-family: "Georgia", "Cambria", "Times New Roman", "Times", serif;
  font-weight: normal;
  font-style: normal;
}

.note, .pullquote, .article-pullquote, .intro, figure figcaption small, figure .figure-caption small, .figure figcaption small, .article-note figcaption small, .figure .figure-caption small, .article-note .figure-caption small {
  font-style: italic;
}

p strong, strong, .wbg-text {
  font-weight: bold;
}

/* ----- Ampersands --------------------------------------------------------- */
.amp {
  font-family: "Baskerville", "Palatino", "Book Antiqua", serif;
  font-style: italic;
  font-weight: normal;
}

/* use the best ampersands from common system fonts... */
.amp {
  font-size: 1.1em;
  /* relative to whatever type surrounds it -- it renders slightly bigger */
  color: inherit;
}

/* =============================================================================
// Atoms
// -> individual elements
// ========================================================================== */
/* ==========================================================================
//  Address modules
// ========================================================================== */
/* Base
// -------------------------------------------------------------------------- */
.address {
  font-size: 13px;
  font-size: 0.8125rem;
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  font-style: normal;
}
.address > li {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.address .address-title {
  font-size: 16px;
  font-size: 1rem;
  margin: 0;
}
.address ul {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  margin: 0.5em 0;
}
.address ul > li {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.address li {
  margin: 0;
}

/* =============================================================================
//  Breadcrumb module
// -> mainly used the header
// ========================================================================== */
/* Base
----------------------------------------------------------------------------- */
.breadcrumb, .header-breadcrumb {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  font-size: 13px;
  font-size: 0.8125rem;
  margin: 0;
  text-transform: uppercase;
  color: #706f6f;
}
.breadcrumb > li, .header-breadcrumb > li {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.breadcrumb li, .header-breadcrumb li {
  display: inline-block;
}
.breadcrumb:hover, .header-breadcrumb:hover, .breadcrumb:active, .header-breadcrumb:active {
  color: #00aeef;
}
.breadcrumb a, .header-breadcrumb a {
  color: #706f6f;
}
.breadcrumb a:hover, .header-breadcrumb a:hover, .breadcrumb a:active, .header-breadcrumb a:active {
  color: #00aeef;
}

/* Submodules
----------------------------------------------------------------------------- */
.breadcrumb-item {
  font-size: 13px;
  font-size: 0.8125rem;
  margin: 0;
}
.breadcrumb-item.active {
  color: #4a4a4a;
}
.breadcrumb-item.active a {
  color: #4a4a4a;
}
.breadcrumb-item:after {
  content: " \203A";
  color: #b9bfbe;
}
.breadcrumb-item:last-child:after {
  content: '';
}

/* =============================================================================
//  Button module
// ========================================================================== */
/*doc
---
title: Buttons
name: button
category: atoms
---

You can apply button styles to any element but `button` and `a` would be the winners on the semantics front.

Buttons are available in a range of "obnoxiousness" and size.

```html_example
<!-- default button -->
<a href="#" class="button">Default</a>

<!-- obnoxious, attention-grabbing primary button -->
<a href="#" class="button primary">Primary</a>

<!-- laid back, self-effacing secondary button -->
<a href="#" class="button secondary">Secondary</a>

<!-- large button -->
<a href="#" class="button small">Small</a>

<!-- small button -->
<a href="#" class="button large">Large</a>

<!-- small primary button -->
<a href="#" class="button primary small">Confused button</a>

<!-- large secondary button -->
<a href="#" class="button secondary large">Confused button</a>
```

There are a couple special buttons called `.pill` and `.text`. Pills are little round guys usually used in selection contexts, like filter menus. Text buttons are ashamed of their button heritage and try to hide themselves with transparent backgrounds.

```html_example
    <!-- pill button -->
    <a href="#" class="button pill">I'm a pill button.</a>

    <!-- text button -->
    <a href="#" class="button text">I'm not a button, I swear.</a>
```

Some buttons have icons. Just tell your button that it's harboring an icon with the `.has-icon` modifier class:

```html_example
    <!-- button with icon -->
    <a href="#" class="button has-icon">
        <svg class="icon download" preserveAspectRatio="xMinYMin meet">
          <use xlink:href="#download"></use>
          <image src="wp-content/themes/handshake/_img/icons/download.png" xlink:href="">
        </svg>
        Whoa, is that an icon?
    </a>
```

Finally, if you want your button to fill up the whole container it's living in, use `.full` and `.full.bleed`:

```html_example
    <!-- a "full" button is full-width relative to its container -->
    <a class="button full" href="#">Full button</a>

    <!-- a "full bleed" button goes all the way to the edge -->
    <a class="button full bleed" href="#">Full bleed button</a>
```

### Button groups

To make a group of buttons work together cooperatively (buttons are normally antisocial, like cats), use a `.button-group` container:

```html_example
    <ul class="button-group">
        <li><a class="button" href="#">Button</a></li>
        <li><a class="button" href="#">Button</a></li>
        <li><a class="button" href="#">Button</a></li>
    </ul>
```
*/
/* Config/mixins
// -------------------------------------------------------------------------- */
/* Base
// -------------------------------------------------------------------------- */
button, .button {
  display: inline-block;
  position: relative;
  padding: 0.8125em 1.625em;
  color: white;
  background-color: #8c9498;
  border-radius: 3px;
  line-height: 1.2;
  -webkit-appearance: none;
  border: none;
  text-transform: uppercase;
}
button:hover, .button:hover {
  background-color: #99a1a4;
}
button:active, .button:active {
  background-color: #7f878c;
}
button:focus, .button:focus {
  outline: none;
}

/* Variations
// -------------------------------------------------------------------------- */
button.primary, .button.primary {
  color: white;
  background-color: #00aeef;
}
button.primary:hover, .button.primary:hover {
  background-color: #09bcff;
}
button.primary:active, .button.primary:active {
  background-color: #009bd5;
}
button.secondary, .button.secondary {
  color: #706f6f;
  background-color: #f1f2f3;
}
button.secondary:hover, .button.secondary:hover {
  background-color: white;
}
button.secondary:active, .button.secondary:active {
  background-color: #e3e5e7;
}
button.small, .button.small {
  font-size: 13px;
  font-size: 0.8125rem;
}
button.large, .button.large {
  font-size: 26px;
  font-size: 1.625rem;
}
button.text, .button.text {
  padding: 0;
  color: #706f6f;
  background-color: transparent;
}
button.text:hover, button.text:active, .button.text:hover, .button.text:active {
  background-color: transparent;
}
button.text.has-icon > .icon, button.text.has-icon > .comments-close, button.text.has-icon > .social-icon, button.text.has-icon > .footer-search, button.text.has-icon > .header-search, button.text.has-icon > .overlay-close, .button.text.has-icon > .icon, .button.text.has-icon > .comments-close, .button.text.has-icon > .social-icon, .button.text.has-icon > .footer-search, .button.text.has-icon > .header-search, .button.text.has-icon > .overlay-close {
  fill: #00aeef;
}
button.pill, .button.pill {
  padding: 0.4em 1.3em;
  border-radius: 1000px;
  background-color: transparent;
  color: #abb3b1;
}
button.pill:hover, .button.pill:hover {
  color: #4a4a4a;
}
button.pill:active, .button.pill:active {
  color: #4a4a4a;
}
button.pill.active, .button.pill.active {
  color: white;
  background-color: #00aeef;
}
button.full, .button.full {
  display: block;
  margin-top: 26px;
  padding: 26px 42px;
  text-align: center;
  color: #4a4a4a;
  background-color: #f1f2f3;
}
button.full:hover, .button.full:hover {
  color: #00aeef;
}
button.full:active, .button.full:active {
  color: #00aeef;
  background-color: #e3e5e7;
}
button.full.bleed, .button.full.bleed {
  border-radius: 0;
}
button.full.has-icon > .icon, button.full.has-icon > .comments-close, button.full.has-icon > .social-icon, button.full.has-icon > .footer-search, button.full.has-icon > .header-search, button.full.has-icon > .overlay-close, .button.full.has-icon > .icon, .button.full.has-icon > .comments-close, .button.full.has-icon > .social-icon, .button.full.has-icon > .footer-search, .button.full.has-icon > .header-search, .button.full.has-icon > .overlay-close {
  height: 16px;
  height: 1rem;
  width: 16px;
  width: 1rem;
  display: inline-block;
  position: absolute;
  margin-right: 0;
  margin-left: -21px;
  margin-bottom: 0;
  fill: #00aeef;
}
button.has-icon, .button.has-icon {
  position: relative;
  padding-left: 2.5em;
  vertical-align: center;
}
button.has-icon .icon, button.has-icon .comments-close, button.has-icon .social-icon, button.has-icon .footer-search, button.has-icon .header-search, button.has-icon .overlay-close, .button.has-icon .icon, .button.has-icon .comments-close, .button.has-icon .social-icon, .button.has-icon .footer-search, .button.has-icon .header-search, .button.has-icon .overlay-close {
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -0.7em;
  margin-left: -2.5em;
  width: 1.75em;
  height: 1.75em;
  fill: white;
}

/* Submodules
// -------------------------------------------------------------------------- */
.button-label {
  font-size: 16px;
  font-size: 1rem;
  display: block;
  margin-top: 0;
  text-transform: uppercase;
}
.button-label + ul, .button-label + .button-group {
  margin-top: 13px;
  margin-top: 0.8125rem;
}

.button-group {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  font-size: 0;
}
.button-group > li {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.button-group li {
  display: inline-block;
}
.button-group button, .button-group .button {
  margin-right: 1px;
  margin-right: 0.0625rem;
  border-radius: 0;
}
.button-group button.pill, .button-group .button.pill {
  border-radius: 1000px;
}
.button-group li:first-child button, .button-group li:first-child .button {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.button-group li:last-child button, .button-group li:last-child .button {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.button-group.full {
  display: block;
  margin: 0;
  margin-top: 26px;
  padding: 26px;
  text-align: center;
  background-color: #f1f2f3;
}
.button-group.full.bleed {
  border-radius: 0;
}
.button-group ul {
  margin-left: 0;
}

/* =============================================================================
//  Form module
// ========================================================================== */
/*doc
---
title: Forms
name: Form
category: atoms
---

*/
/* Base
// -------------------------------------------------------------------------- */
input, textarea, select {
  padding: 0.5em 1em;
  border-radius: 3px;
  box-sizing: border-box !important;
  box-shadow: none;
  text-shadow: none;
}
input:focus, textarea:focus, select:focus {
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */
  box-shadow: none;
}
input::-webkit-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder, textarea::-webkit-input-placeholder, textarea:-moz-placeholder, textarea::-moz-placeholder, textarea:-ms-input-placeholder, select::-webkit-input-placeholder, select:-moz-placeholder, select::-moz-placeholder, select:-ms-input-placeholder {
  color: #abb3b1;
}

[type="checkbox"] {
  width: 1em;
  height: 1em;
}

textarea {
  resize: vertical;
}

/* --- Search bars ---------------------------------------------------------- */
input[type="search"] {
  font-size: 30px;
  font-size: 1.875rem;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: #4a4a4a;
  padding-left: 1.75em;
  border-radius: 0;
  border-color: #4a4a4a;
  border-top: none;
  border-left: none;
  border-right: none;
  letter-spacing: -0.04em;
  color: #4a4a4a;
  background: transparent url("https://handshake.pppknowledgelab.org/wp-content/themes/handshake/_img/icons/search.png") no-repeat 0.1em center;
  background-size: 1.05em;
}
input[type="search"]:focus {
  border-bottom-color: #00aeef;
}
input[type="search"]::-webkit-input-placeholder, input[type="search"]:-moz-placeholder, input[type="search"]::-moz-placeholder, input[type="search"]:-ms-input-placeholder {
  letter-spacing: -0.04em;
}
.svg input[type="search"], .inlinesvg input[type="search"] {
  background-image: url("https://handshake.pppknowledgelab.org/wp-content/themes/handshake/_img/icons/search.svg");
}
.reverse input[type="search"] {
  border-color: white;
  color: white;
  background-image: url("https://handshake.pppknowledgelab.org/wp-content/themes/handshake/_img/icons/search-rev.png");
}
.svg .reverse input[type="search"], .inlinesvg .reverse input[type="search"] {
  background-image: url("https://handshake.pppknowledgelab.org/wp-content/themes/handshake/_img/icons/search-rev.svg");
}
.reverse input[type="search"]:focus {
  border-bottom-color: red;
}

.search label {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  /*
   * Extends the .visuallyhidden class to allow the element
   * to be focusable when navigated to via the keyboard:
   * https://www.drupal.org/node/897638
   */
}
.search input[type="search"] {
  display: block;
  width: 100%;
}

/* =============================================================================
//  Global headings styles
// ========================================================================== */
/*doc
---
title: Headings
name: heading
category: atoms
---

You can make individual headings and groups of headings with both the usual `h1 - h6` tags and also a few helper/microclasses to add special behaviors.

#### Helper classes

`h1 - h6` get global styles, which you can imitate with other tags (like `span`) if needed using these greek fraternity-esque helpers:

```
.alpha // looks like h1
.beta // looks like h2
.cappa // looks like h3
.delta // looks like h4
.epsilon // looks like h5
.zeta // looks like h6
```

`.subhead` makes a heading look like, well, a subhead. It has a thinner weight and smaller relative size.

`.highlight` is useful for making a heading bright and obnoxious. It will adapt the highlight color of its context (ie blue, orange, whatever).

#### Heading modules

`.slug` is a special kind of heading used at the beginning of a section (usually a `.panel`) to describe the content following it (ie "Recent Posts" or "Contributors"). It will be flush with the top of its container, centered, uppercase, and get a thick top border.

`.headline`, finally, is the most complex heading module and is used throughout the site in various contexts (articles, hero units, etc.). It's, literally, a headline: the main title and most important element on a page or section. It can be applied to either an individual heading (`h1`, etc.) or to a group of headings (usually with a `header`). Headlines behave slightly differently depending on their context, but generally they are full-width, centered, and larger than anything else.

```html_example
<h1 class="headline">I'm a simple title.</h1>

<header class="headline">
    <h1 class="headline-title">I've got more going on.</h1>
    <span class="subhead highlight">It's complicated, you see.</span>
</header>
```

##### Note on titles and subtitles

It's important to remember that the `h1, h2, h3`, etc. elements are not just for looks: they have a specific purpose in HTML. They're essential to the DOM Tree and, to your browser, they represent the beginning of a new section of content. HTML5 has a variety of what are called "sectioning" elements and headings are the most basic of those (`section`, `article`, and `aside` being more sophisticated sectioning containers).

What does this mean? Don't use an `h3` tag just because you wnat that size and style of type somewhere. Use it only to mark up a third-level section heading. If you just want the look of an `h3` in a non-sectioning context (like an article subtitle), use a generic element like `span` or `p` with the `.cappa` helper class.

Many modules (like `media-box`, `profile`, etc.) define their own special heading submodules to achieve a certain style regardless of the actual markup. If you're working in one of those modules, reach for the submodules first.

*/
/* Globals
// -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  margin-bottom: 0;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}
h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6, h2 + h1, h2 + h2, h2 + h3, h2 + h4, h2 + h5, h2 + h6, h3 + h1, h3 + h2, h3 + h3, h3 + h4, h3 + h5, h3 + h6, h4 + h1, h4 + h2, h4 + h3, h4 + h4, h4 + h5, h4 + h6, h5 + h1, h5 + h2, h5 + h3, h5 + h4, h5 + h5, h5 + h6, h6 + h1, h6 + h2, h6 + h3, h6 + h4, h6 + h5, h6 + h6 {
  margin-top: 0;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
}
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
  margin-top: 0.5em;
}

h1, .alpha {
  font-size: 48px;
  font-size: 3rem;
  display: block;
  line-height: 1;
  letter-spacing: -0.03em;
}

h2, .beta {
  font-size: 42px;
  font-size: 2.625rem;
  display: block;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h3, .cappa {
  font-size: 30px;
  font-size: 1.875rem;
  display: block;
  line-height: 1.1;
  letter-spacing: 0;
}

h4, .delta {
  font-size: 26px;
  font-size: 1.625rem;
  display: block;
  line-height: 1.2;
  letter-spacing: 0;
}

h5, .epsilon, .jump-title {
  font-size: 19px;
  font-size: 1.1875rem;
  display: block;
  line-height: 1.2;
  letter-spacing: 0;
}

h6, .zeta {
  font-size: 16px;
  font-size: 1rem;
  display: block;
  line-height: 1.2;
  letter-spacing: 0;
}

/* Modules
// -------------------------------------------------------------------------- */
.headline, .hero-headline, .article-headline {
  margin: 2em 0;
  margin-bottom: 26px;
  text-align: center;
  line-height: 1.2;
}
.headline h1, .hero-headline h1, .article-headline h1, .headline h2, .hero-headline h2, .article-headline h2, .headline h3, .hero-headline h3, .article-headline h3, .headline h4, .hero-headline h4, .article-headline h4, .headline h5, .hero-headline h5, .article-headline h5, .headline h6, .hero-headline h6, .article-headline h6 {
  line-height: 1.2;
  margin: 0;
}

.headline-title, .hero-title, .hero h1, .article-hero h1 {
  font-size: 48px;
  font-size: 3rem;
}

.subhead, .hero-subhead {
  font-size: 26px;
  font-size: 1.625rem;
  color: #706f6f;
  font-weight: normal;
  text-transform: none;
}
.subhead > a, .hero-subhead > a {
  color: #706f6f;
}

.highlight {
  color: #00aeef;
}
.highlight > a {
  color: inherit;
}

.slug, .hero-slug {
  font-size: 16px;
  font-size: 1rem;
  border-top-width: 4px;
  border-top-style: solid;
  border-top-color: #00aeef;
  display: inline-block;
  position: relative;
  margin-top: 0;
  margin-bottom: 1em;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  text-align: center;
  text-transform: uppercase;
  color: #00aeef;
}
.slug a, .hero-slug a {
  color: #00aeef;
}
.slug strong, .hero-slug strong {
  font-weight: bold;
}
.csstransforms .slug, .csstransforms .hero-slug {
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  left: 50%;
}

/* State/special features
// -------------------------------------------------------------------------- */
.has-rule {
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: #dee3e3;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}
.reverse .has-rule {
  border-bottom-color: white;
}
.has-rule + .gallery, .has-rule + .main_footer-gallery {
  padding-top: 0;
}

/* =============================================================================
//  SVG styles
// -> for icon sprites, vector graphics, etc.
// ========================================================================== */
.icon, .comments-close, .social-icon, .footer-search, .header-search, .overlay-close {
  display: inline-block;
  height: 1.4em;
  width: 1.4em;
  max-height: 100%;
  max-width: 100%;
  margin-top: -0.15em;
  margin-right: 0.3em;
  vertical-align: middle;
  fill: inherit;
}
.icon svg, .comments-close svg, .social-icon svg, .footer-search svg, .header-search svg, .overlay-close svg {
  margin: 0;
  width: 100%;
  max-height: 100%;
}

li {
  font-size: 16px;
  font-size: 1rem;
}
li strong {
  font-weight: bold;
}

li {
  margin-bottom: 0.5em;
}
li:last-child {
  margin-bottom: 0;
}

ol, ul {
  margin-left: 1.5em;
  /* bump to the right a little @ mobile sizes so the numbers/bullets don't run off */
  padding-left: 0;
  margin-before: 0;
  margin-after: 0;
}
@media (min-width: 48em) {
  ol, ul {
    margin-left: 0;
  }
}

dl dt {
  margin-top: 0.5em;
}
dl dt:first-child {
  margin-top: 0;
}

/* ==========================================================================
//  Logo modules
// ========================================================================== */
/* Base
// -------------------------------------------------------------------------- */
.logo, .footer-logo, .header-logo {
  display: inline-block;
  fill: #4a4a4a;
}
.logo svg, .footer-logo svg, .header-logo svg {
  width: 100%;
  height: 100%;
}

/* Modifiers
// -------------------------------------------------------------------------- */
.logo.handshake, .handshake.footer-logo, .handshake.header-logo, .logo.handshake-vertical, .handshake-vertical.footer-logo, .handshake-vertical.header-logo {
  width: 60px;
  width: 3.75rem;
  height: 30px;
  height: 1.875rem;
}
.logo.handshake.large, .handshake.large.footer-logo, .handshake.large.header-logo, .logo.handshake-vertical.large, .handshake-vertical.large.footer-logo, .handshake-vertical.large.header-logo {
  width: 160px;
  width: 10rem;
  height: 160px;
  height: 10rem;
}
.logo.wbg, .wbg.footer-logo, .wbg.header-logo {
  width: 225px;
  width: 14.0625rem;
  height: 40px;
  height: 2.5rem;
  padding: 16px;
  padding: 1rem;
}

/* Submodules
// -------------------------------------------------------------------------- */
.logo-lockup, .header-lockup {
  width: 225px;
  width: 14.0625rem;
  padding: 21px 26px 26px 26px;
  padding: 1.3125rem 1.625rem 1.625rem 1.625rem;
  display: block;
  text-align: center;
  background-color: rgba(0, 174, 239, 0.9);
}
.logo-lockup > .logo, .header-lockup > .logo, .logo-lockup > .footer-logo, .header-lockup > .footer-logo, .logo-lockup > .header-logo, .header-lockup > .header-logo {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  fill: white;
}
.logo-lockup .logo-tagline + .logo, .header-lockup .logo-tagline + .logo, .logo-lockup .logo-tagline + .footer-logo, .header-lockup .logo-tagline + .footer-logo, .logo-lockup .logo-tagline + .header-logo, .header-lockup .logo-tagline + .header-logo {
  margin-top: 0.5em;
}

.logo-tagline {
  display: inline-block;
  font-size: 0.625em;
  color: #4a4a4a;
}

/* ==========================================================================
//  Global media styles
// ========================================================================== */
audio,
canvas,
img,
video {
  vertical-align: middle;
  max-width: 100%;
}

/* Fix IE SVG scaling issue
 * https://gist.github.com/larrybotha/7881691
 */
/*
 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 *
 * [1] IE9
 * [2] IE10+
 */
/* 1 */
.ie9 img[src*=".svg"] {
  width: 100%;
}

/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"], source[type*="svg+xml"] {
    width: 100%;
  }
}
/* ==========================================================================
//  Note module
// ========================================================================== */
/* Base
// -------------------------------------------------------------------------- */
.note {
  font-size: 13px;
  font-size: 0.8125rem;
  display: inline-block;
  margin: -0.2em 0.5em 0;
  padding: 0 0.5em;
  height: 1.5em;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  color: white;
  background-color: #00aeef;
}

/* ==========================================================================
//  Pullquote modules
// ========================================================================== */
/* Base
// -------------------------------------------------------------------------- */
.pullquote, .article-pullquote {
  font-size: 26px;
  font-size: 1.625rem;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
  line-height: 1.2;
  color: #abb3b1;
}

/* ==========================================================================
//  signoff modules
// ========================================================================== */
/* Base
// -------------------------------------------------------------------------- */
.signoff {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  font-size: 13px;
  font-size: 0.8125rem;
  margin-top: 0;
  margin-bottom: 0;
}
.signoff > li {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

/* Modifiers
// -------------------------------------------------------------------------- */
.signoff.horizontal {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}
.signoff.horizontal > li {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.signoff.horizontal .signoff-author {
  display: inline-block;
}

/* Submodules
// -------------------------------------------------------------------------- */
.signoff-author {
  line-height: 1.3;
  margin-right: 3em;
}
.signoff-author:last-child {
  margin-right: 0;
}
.signoff-author a {
  color: inherit;
}

.signoff-name {
  font-size: 19px;
  font-size: 1.1875rem;
  display: block;
  margin-left: 0;
  color: #4a4a4a;
}

.signoff-title {
  font-size: 13px;
  font-size: 0.8125rem;
  display: block;
  margin-left: 0;
  color: #abb3b1;
}

/* =============================================================================
//  Global type styles
// ========================================================================== */
/*doc

Inline text is mostly styled globally and doesn't change a whole lot from one context to another. If you mark it up with relevant tags it should take care of itself. But there are a few helper classes to define special styles:

`.intro`: an italicized introduction to an article. Pretty common in Handshake's features and interviews.

`.caption`: small, secondary text appearing in sidebars and, of course, captions.

`.callout`: a featured passage. It isn't a header, per se, but it's the most important part of the article body. Used, for example, to highlight the question in _1 Question, 9 Experts_.

`.lead`: the first paragraph of an article, decorated with a drop cap, etc. This is usually selected via `.content > p:first-child`, but if you need to imitate those styles in another context, use this class.

*/
.lead:first-letter, .content > p:not(.intro):first-of-type:first-letter,
.intro + p:first-letter, .article-content > p:not(.intro):first-of-type:first-letter {
  float: left;
  margin: 0 0.06em 0 -0.04em;
  font-size: 3.5em;
  line-height: 0.8;
  color: #00aeef;
}

/* Globals
// -------------------------------------------------------------------------- */
body {
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

p {
  font-size: 16px;
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 1em;
}

a {
  text-decoration: none;
}

small {
  font-size: 0.6em;
}

address {
  font-style: normal;
}

/* Helpers
// -------------------------------------------------------------------------- */
.intro:first-letter {
  float: none;
  font-size: inherit;
}

.caption, figcaption {
  font-size: 13px;
  font-size: 0.8125rem;
  color: #706f6f;
}

.callout {
  padding: 1em;
  margin-top: 1.2em;
  margin-bottom: 2em;
  border-radius: 3px;
  color: #4a4a4a;
  background-color: #f1f2f3;
}

/* =============================================================================
// Molecules
// -> simple groups of things that can be easily combined & reused
// ========================================================================== */
/* ==========================================================================
//  Banner module
// ========================================================================== */
/* Base
// -------------------------------------------------------------------------- */
.banner {
  padding: 16px 42px;
  text-align: center;
  background-color: #d6d8db;
}
.banner > .button {
  display: block;
  margin-top: 0.5em;
  margin-left: 0;
}
@media (min-width: 30em) {
  .banner > .button {
    display: inline-block;
    margin-left: 1em;
    margin-top: 0;
  }
}

/* ==========================================================================
// Comments modules
// ========================================================================== */
/* Base
// -------------------------------------------------------------------------- */
.comments {
  display: none;
  position: relative;
  z-index: 2;
  padding: 42px;
  overflow: hidden;
  background-color: white;
}
@media (min-width: 64em) {
  .comments {
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #dee3e3;
    position: fixed;
    top: 0;
    right: -42%;
    bottom: 0;
    padding-left: 26px;
    width: 42%;
  }
}
@media (min-width: 80em) {
  .comments {
    right: -30%;
    width: 30%;
  }
}

/* Submodules
// -------------------------------------------------------------------------- */
.comments-callout {
  font-size: 16px;
  font-size: 1rem;
  display: none;
  position: relative;
  padding: 0.8em;
  border-radius: 3px;
  text-align: center;
  line-height: 1.1;
  color: white;
  background-color: #4a4a4a;
}
.comments-callout .dsq-postid {
  color: white;
}
.comments-callout:hover {
  background-color: #646464;
}
.comments-callout:hover:after {
  height: 0;
  width: 0;
  border-top: 16px solid #646464;
  border-left: 16px solid transparent;
}
.comments-callout:after {
  height: 0;
  width: 0;
  border-top: 16px solid #4a4a4a;
  border-left: 16px solid transparent;
  content: " ";
  display: block;
  position: absolute;
  bottom: -16px;
  left: 50%;
}
.comments-callout > strong {
  font-size: 30px;
  font-size: 1.875rem;
  display: block;
  color: white !important;
}
@media (min-width: 48em) {
  .comments-callout {
    margin-top: -200px;
    margin-top: -12.5rem;
    display: block;
    position: relative;
    float: left;
    clear: left;
  }
}

.comments-close {
  position: absolute;
  top: 26px;
  right: 26px;
}

/* States
// -------------------------------------------------------------------------- */
.has-comments .comments {
  display: block;
}
@media (min-width: 64em) {
  .has-comments .comments {
    right: 0;
  }
}

/* ==========================================================================
//  Figure modules
// ========================================================================== */
/* Base
// -------------------------------------------------------------------------- */
figure, .figure, .article-note {
  margin: 1.6em 0;
  padding: 0;
}
figure > img, .figure > img, .article-note > img {
  margin-bottom: 0;
  margin-top: 0;
}
figure figcaption, figure .figure-caption, .figure figcaption, .article-note figcaption, .figure .figure-caption, .article-note .figure-caption {
  font-size: 13px;
  font-size: 0.8125rem;
  margin-top: 1em;
  font-size: 0.8em;
  color: #abb3b1;
}
figure figcaption > .note:first-child, figure .figure-caption > .note:first-child, .figure figcaption > .note:first-child, .article-note figcaption > .note:first-child, .figure .figure-caption > .note:first-child, .article-note .figure-caption > .note:first-child {
  margin-left: 0;
}
figure figcaption small, figure .figure-caption small, .figure figcaption small, .article-note figcaption small, .figure .figure-caption small, .article-note .figure-caption small {
  color: #abb3b1;
}

/* ==========================================================================
//  Hero modules
// ========================================================================== */
/* Base
// -------------------------------------------------------------------------- */
.hero, .article-hero {
  position: relative;
  margin: 0 0 5em 0;
  height: 320px;
  height: 55vh;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-color: #dee3e3;
  background-color: rgba(222, 227, 227, 0.8);
}
.l-wrapper > .hero, .l-wrapper > .article-hero {
  margin-left: -42px;
  margin-right: -42px;
}

/* Modifiers
// -------------------------------------------------------------------------- */
.hero.short, .short.article-hero {
  height: 300px;
  height: 50vh;
}
@media (min-width: 48em) {
  .hero.short, .short.article-hero {
    height: 60vh;
  }
}

.hero.secondary, .secondary.article-hero {
  margin-bottom: 68px;
}

/* Submodules
// -------------------------------------------------------------------------- */
/* --- the headline --------------------------------------------------------- */
.hero-headline {
  position: absolute;
  left: 0;
  bottom: -3.5em;
  margin-left: 0;
  margin-bottom: 0;
  padding: 26px;
  width: 100%;
  background-color: white;
}
@media (min-width: 64em) {
  .hero-headline {
    left: 50%;
    margin-left: -538px;
    width: 1076px;
  }
}
@media (min-width: 42.5em) {
  .hero-headline.narrow {
    left: 50%;
    margin-left: -366px;
    width: 732px;
  }
}
@media (min-width: 75em) {
  .hero-headline.wide {
    margin-left: -626px;
    width: 1252px;
  }
}
.hero.secondary .hero-headline, .secondary.article-hero .hero-headline {
  position: relative;
  left: 0;
  bottom: 0;
  margin: 0;
  background-color: rgba(0, 174, 239, 0.85);
  padding: 42px 26px;
  text-align: left;
}
@media (min-width: 64em) {
  .hero.secondary .hero-headline, .secondary.article-hero .hero-headline {
    left: 50%;
    margin-left: -28.3456%;
    width: 56.69121%;
  }
}

/* --- a slug/label --------------------------------------------------------- */
.hero-slug {
  top: -26px;
  left: 0;
}
.csstransforms .hero-slug {
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  left: 0;
}

/* --- the title (main header) ---------------------------------------------- */
.hero-title, .hero h1, .article-hero h1 {
  padding: 0.2em 0 1.2em 0;
  padding: 0.0125rem 0 0.075rem 0;
  margin-top: -26px;
  line-height: 1.2;
  color: #4a4a4a;
}
.hero-title > a, .hero h1 > a, .article-hero h1 > a {
  color: #4a4a4a;
}
.hero-title > a:hover, .hero-title > a:active, .hero h1 > a:hover, .article-hero h1 > a:hover, .hero h1 > a:active, .article-hero h1 > a:active {
  color: #00aeef;
}
@media (min-width: 30em) {
  .hero-title, .hero h1, .article-hero h1 {
    font-size: 68px;
    font-size: 4.25rem;
  }
}
@media (min-width: 64em) {
  .hero-title, .hero h1, .article-hero h1 {
    font-size: 78px;
    font-size: 4.875rem;
  }
}
.hero.secondary .hero-title, .secondary.article-hero .hero-title, .hero.secondary .hero h1, .secondary.article-hero .hero h1, .hero.secondary .article-hero h1, .secondary.article-hero .article-hero h1 {
  line-height: 1.1;
  color: white;
}
@media (min-width: 30em) {
  .hero.secondary .hero-title, .secondary.article-hero .hero-title, .hero.secondary .hero h1, .secondary.article-hero .hero h1, .hero.secondary .article-hero h1, .secondary.article-hero .article-hero h1 {
    font-size: 42px;
    font-size: 2.625rem;
  }
}
@media (min-width: 64em) {
  .hero.secondary .hero-title, .secondary.article-hero .hero-title, .hero.secondary .hero h1, .secondary.article-hero .hero h1, .hero.secondary .article-hero h1, .secondary.article-hero .article-hero h1 {
    font-size: 48px;
    font-size: 3rem;
  }
}
@media (min-width: 30em) {
  .hero-headline.narrow .hero-title, .hero-headline.narrow .hero h1, .hero-headline.narrow .article-hero h1 {
    font-size: 42px;
    font-size: 2.625rem;
  }
}
@media (min-width: 64em) {
  .hero-headline.narrow .hero-title, .hero-headline.narrow .hero h1, .hero-headline.narrow .article-hero h1 {
    font-size: 48px;
    font-size: 3rem;
  }
}

/* --- subheader ------------------------------------------------------------ */
.hero-subhead {
  font-size: 26px;
  font-size: 1.625rem;
  display: block;
  position: relative;
  top: 0;
  margin: 0.5em 0 0 0;
  padding: 0.6em 0 0 0;
  line-height: 1.2;
  text-transform: none;
  color: rgba(255, 255, 255, 0.75);
  border: none;
}
.hero-subhead:before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 10%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.75);
}

/* --- wrapper/box ---------------------------------------------------------- */
.hero-wrapper {
  bottom: -26px;
  bottom: -1.625rem;
  position: absolute;
  left: 0;
  width: 100%;
}
@media (min-width: 64em) {
  .hero-wrapper {
    left: 50%;
    margin-left: -600px;
    width: 1200px;
  }
}

/* =============================================================================
//  Media Box
// -> a short listing pointing at more detailed content, like an article
//    or author profile. often found in 'feed' and 'gallery' organisms.
// ========================================================================== */
/*doc
---
title: Media Box
name: media_box
category: molecules
---

A media box is a simple listing, usually containing a thumbnail image, a title, and a short blurb/summary. These are used throughout Handshake's site for article feeds, lists of contributors, and issue archives. It's probably the most ubiquitous and varied module on the site.

```html_example
    <li class='media'>
        <a class="media-thumb" href="[ LINK ]"><img src="[ THUMBNAIL IMAGE ]" /></a>
        <div class="media-content">
            <h3 class="media-title"><a href="[ LINK ]">[ TITLE ]</a></h3>
            <a class="media-subtitle">[ SUBTITLE ]</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. Quos nisi redarguimus, omnis virtus, omne decus, omnis vera laus deserenda est.</p>
        </div>
    </li>
```

They can be displayed as "vertical" (stacked, thumbnail on top) or "horizontal" (2-column, thumbnail on the left). Vertical is default.

```html_example
    <li class="media horizontal"></li>
```

Finally, the "tile" version has a filled background and smaller titling. It's meant for listings with less copy and more prominent thumbnails, like issue or contributor listings.

```html_example
    <li class="media tile"></li>
    <li class="media tile horizontal"></li>
```

## Media box thumbnails

You can display the thumbnail smaller (about half-size) by added a "small" modifier class to the .media-thumb child. This is often used for column posts (like "Money Talks"), where the thumb is a drawing of the author.

```html_example
    <a class="media-thumb small" href="[ LINK ]"><img src="[ THUMBNAIL IMAGE ]" /></a>
```

Also, if you'd like to crop the thumbnail to the standard (square-ish) aspect ratio, add the "cropped" modifier to the media box container. This is helpful when you can't control the size of the thumbnail, or if it's oddly shaped. This will center the image in its container and crop off the edges, much like "background-size: cover;" does for CSS backgrounds.

For the crop to work, the thumbnail <img> must be contained in something like an anchor or div tag.

```html_example
    <li class='media cropped'>
        <a class="media-thumb" href="[ LINK ]"><img src="[ THUMBNAIL IMAGE ]" /></a>
    </li>
```

*/
/* Config
// -------------------------------------------------------------------------- */
/* Base
// -------------------------------------------------------------------------- */
.media, .gallery-media {
  position: relative;
  margin-bottom: 0;
  list-style: none;
  text-align: left;
}
.media p, .gallery-media p {
  margin-top: 0.5em;
}

/* Modifiers
// -------------------------------------------------------------------------- */
/* --- "horizontal" format -------------------------------------------------- */
.media.horizontal::after, .horizontal.gallery-media::after {
  clear: both;
  content: "";
  display: table;
}
.media.horizontal:first-child, .horizontal.gallery-media:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* --- "vertical" format ---------------------------------------------------- */
/* --- "tile" version ------------------------------------------------------- */
/* -> has a solid background, smaller text */
.media.tile, .tile.gallery-media {
  border: none;
  padding: 0;
}
.media.tile:before, .tile.gallery-media:before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: #f1f2f3;
}
.media.tile.horizontal, .tile.horizontal.gallery-media {
  overflow: hidden;
}
.media.tile > .media-title, .tile.gallery-media > .media-title,
.media.tile > .media-subtitle,
.tile.gallery-media > .media-subtitle,
.media.tile > .media-category,
.tile.gallery-media > .media-category {
  padding: 0 26px;
  padding: 0 1.625rem;
}
.media.tile > .media-title:first-child, .tile.gallery-media > .media-title:first-child,
.media.tile > .media-subtitle:first-child,
.tile.gallery-media > .media-subtitle:first-child,
.media.tile > .media-category:first-child,
.tile.gallery-media > .media-category:first-child {
  padding-top: 26px;
  padding-top: 1.625rem;
}
.media.tile > .media-title:last-child, .tile.gallery-media > .media-title:last-child,
.media.tile > .media-subtitle:last-child,
.tile.gallery-media > .media-subtitle:last-child,
.media.tile > .media-category:last-child,
.tile.gallery-media > .media-category:last-child {
  padding-bottom: 26px;
  padding-bottom: 1.625rem;
}

/* Submodules
// -------------------------------------------------------------------------- */
/* --- thumbnail image ------------------------------------------------------ */
.media-thumb {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  float: none;
  clear: both;
  margin-bottom: 13px;
}
.media-thumb img {
  width: 100%;
}
.media-thumb.small {
  width: 26%;
  float: left;
  margin-right: 1em;
}
.media-thumb.cover-thumb img {
  border-width: 1px;
  border-style: solid;
  border-color: #dee3e3;
}
@media (min-width: 30em) {
  .media.horizontal .media-thumb, .horizontal.gallery-media .media-thumb {
    width: 32.07184%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 26px;
    margin-bottom: 0;
  }
  .media.horizontal .media-thumb.small, .horizontal.gallery-media .media-thumb.small {
    width: 16.03592%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 26px;
  }
}
.media.tile .media-thumb, .tile.gallery-media .media-thumb {
  background-color: #333;
}
.media.cropped .media-thumb, .cropped.gallery-media .media-thumb {
  position: relative;
  max-height: 200px;
  max-height: 12.5rem;
}
.media.cropped .media-thumb:before, .cropped.gallery-media .media-thumb:before {
  display: block;
  content: " ";
  width: 100%;
  padding-top: 61.8047%;
}
.media.cropped .media-thumb > img, .cropped.gallery-media .media-thumb > img, .media.cropped .media-thumb .aspect-content, .cropped.gallery-media .media-thumb .aspect-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
.csstransforms .media.cropped .media-thumb > img, .csstransforms .cropped.gallery-media .media-thumb > img, .csstransforms .media.cropped .media-thumb > .aspect-content, .csstransforms .cropped.gallery-media .media-thumb > .aspect-content {
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  top: 50%;
  left: 50%;
}
@media (min-width: 30em) {
  .media.horizontal.cropped .media-thumb, .horizontal.cropped.gallery-media .media-thumb {
    position: relative;
  }
  .media.horizontal.cropped .media-thumb:before, .horizontal.cropped.gallery-media .media-thumb:before {
    display: block;
    content: " ";
    width: 32.07184%;
    padding-top: 100%;
  }
  .media.horizontal.cropped .media-thumb > img, .horizontal.cropped.gallery-media .media-thumb > img, .media.horizontal.cropped .media-thumb .aspect-content, .horizontal.cropped.gallery-media .media-thumb .aspect-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
  }
  .csstransforms .media.horizontal.cropped .media-thumb > img, .csstransforms .horizontal.cropped.gallery-media .media-thumb > img, .csstransforms .media.horizontal.cropped .media-thumb > .aspect-content, .csstransforms .horizontal.cropped.gallery-media .media-thumb > .aspect-content {
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    top: 50%;
    left: 50%;
  }
  .media.horizontal.cropped .media-thumb.small, .horizontal.cropped.gallery-media .media-thumb.small {
    position: relative;
  }
  .media.horizontal.cropped .media-thumb.small:before, .horizontal.cropped.gallery-media .media-thumb.small:before {
    display: block;
    content: " ";
    width: 16.03592%;
    padding-top: 100%;
  }
  .media.horizontal.cropped .media-thumb.small > img, .horizontal.cropped.gallery-media .media-thumb.small > img, .media.horizontal.cropped .media-thumb.small .aspect-content, .horizontal.cropped.gallery-media .media-thumb.small .aspect-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
  }
  .csstransforms .media.horizontal.cropped .media-thumb.small > img, .csstransforms .horizontal.cropped.gallery-media .media-thumb.small > img, .csstransforms .media.horizontal.cropped .media-thumb.small > .aspect-content, .csstransforms .horizontal.cropped.gallery-media .media-thumb.small > .aspect-content {
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    top: 50%;
    left: 50%;
  }
}
@media (min-width: 30em) {
  .media.tile.horizontal.cropped .media-thumb, .tile.horizontal.cropped.gallery-media .media-thumb {
    position: relative;
  }
  .media.tile.horizontal.cropped .media-thumb:before, .tile.horizontal.cropped.gallery-media .media-thumb:before {
    display: block;
    content: " ";
    width: 32.07184%;
    padding-top: 100%;
  }
  .media.tile.horizontal.cropped .media-thumb > img, .tile.horizontal.cropped.gallery-media .media-thumb > img, .media.tile.horizontal.cropped .media-thumb .aspect-content, .tile.horizontal.cropped.gallery-media .media-thumb .aspect-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
  }
  .csstransforms .media.tile.horizontal.cropped .media-thumb > img, .csstransforms .tile.horizontal.cropped.gallery-media .media-thumb > img, .csstransforms .media.tile.horizontal.cropped .media-thumb > .aspect-content, .csstransforms .tile.horizontal.cropped.gallery-media .media-thumb > .aspect-content {
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    top: 50%;
    left: 50%;
  }
  .media.tile.horizontal.cropped .media-thumb.small, .tile.horizontal.cropped.gallery-media .media-thumb.small {
    position: relative;
  }
  .media.tile.horizontal.cropped .media-thumb.small:before, .tile.horizontal.cropped.gallery-media .media-thumb.small:before {
    display: block;
    content: " ";
    width: 16.03592%;
    padding-top: 100%;
  }
  .media.tile.horizontal.cropped .media-thumb.small > img, .tile.horizontal.cropped.gallery-media .media-thumb.small > img, .media.tile.horizontal.cropped .media-thumb.small .aspect-content, .tile.horizontal.cropped.gallery-media .media-thumb.small .aspect-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
  }
  .csstransforms .media.tile.horizontal.cropped .media-thumb.small > img, .csstransforms .tile.horizontal.cropped.gallery-media .media-thumb.small > img, .csstransforms .media.tile.horizontal.cropped .media-thumb.small > .aspect-content, .csstransforms .tile.horizontal.cropped.gallery-media .media-thumb.small > .aspect-content {
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    top: 50%;
    left: 50%;
  }
}

/* --- content wrapper ------------------------------------------------------ */
.media-content p {
  clear: both;
}
.media-content p:last-child {
  margin-bottom: 0;
}
@media (min-width: 30em) {
  .media.horizontal .media-content, .horizontal.gallery-media .media-content {
    width: 67.92816%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
  }
  .media.horizontal .media-thumb.small + .media-content, .horizontal.gallery-media .media-thumb.small + .media-content {
    width: 83.96408%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
  }
  .media.tile.horizontal .media-content, .tile.horizontal.gallery-media .media-content {
    width: 67.92816%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding: 26px;
    padding: 1.625rem;
  }
  .media.tile.horizontal .media-thumb.small + .media-content, .tile.horizontal.gallery-media .media-thumb.small + .media-content {
    width: 83.96408%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

/* --- title ------------------------------------------------------------ */
.media-title {
  font-size: 26px;
  font-size: 1.625rem;
  display: block;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #4a4a4a;
}
.media-title.small {
  font-size: 19px;
  font-size: 1.1875rem;
  text-transform: none;
}
.media-title + p {
  margin-top: 0.5em;
}
.media-title > a {
  color: #4a4a4a;
}

/* --- subtitle --------------------------------------------------------- */
.media-subtitle {
  font-size: 19px;
  font-size: 1.1875rem;
  display: block;
  margin: 0;
  line-height: 1.3;
  text-transform: none;
  color: #00aeef;
}
.media-subtitle.small {
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-transform: none;
}

/* --- category heading/label ------------------------------------------- */
.media-category {
  font-size: 13px;
  font-size: 0.8125rem;
  display: block;
  margin: 0;
  text-transform: uppercase;
}
.media-category > a {
  color: #abb3b1;
}

/* ==========================================================================
// Meta (info) modules
// -> secondary info about the content, ie author, topics, etc.
// ========================================================================== */
/*doc
---
title: Meta
name: meta
category: molecules
---

"Meta," in this context, is not a hipster with thick glasses and a preoccupation with words like "tension," "liminal," and "microaggression." It, instead, is a secondary element with info about the main content. It's usually marked up as an `aside`, and usually contains various lists - ordered, unordered, and definition. Great for displaying contact info, tag lists, and 'top stories' listings.

```html_example
<aside class="meta">
    <address class="meta-section">
        <dl>
            <dt>Author</dt>
            <dd>John Kjorstad</dd>
        </dl>
    </address>
    <section class="meta-section">
        <h4 class="meta-slug">Connect with John</h4>
        <dl>
            <dt>Twitter</dt>
            <dd>@JohnKjorstad</dd>
        </dl>
    </section>
</aside>
````

*/
/* Base
// -------------------------------------------------------------------------- */
.meta, .article-meta {
  font-size: 13px;
  font-size: 0.8125rem;
  color: #abb3b1;
}
.meta a, .article-meta a {
  color: #abb3b1;
}
.meta a:hover, .article-meta a:hover, .meta a:active, .article-meta a:active {
  color: #00aeef;
}
.meta ol, .article-meta ol, .meta ul, .article-meta ul, .meta dl, .article-meta dl {
  margin: 0;
}
.meta li, .article-meta li {
  font-size: 13px;
  font-size: 0.8125rem;
  margin-left: 1.4em;
}
.meta dt, .article-meta dt, .meta dd, .article-meta dd {
  font-size: 13px;
  font-size: 0.8125rem;
  margin-left: 0;
}
.meta dd, .article-meta dd {
  color: #4a4a4a;
}
.meta dd a, .article-meta dd a {
  color: #4a4a4a;
}
.meta .inline, .article-meta .inline {
  display: inline;
}
.meta .inline:after, .article-meta .inline:after {
  content: ", ";
  color: #abb3b1;
}
.meta .inline:last-child:after, .article-meta .inline:last-child:after {
  content: "";
}
.meta .meta-portrait, .article-meta .meta-portrait {
  width: 19.09855%;
  float: left;
  margin-right: -100%;
  clear: none;
  padding-right: 26px;
}
.meta .meta-portrait + .meta-section, .article-meta .meta-portrait + .meta-section {
  width: 80.90145%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  padding-right: 0;
  padding-top: 0;
  border-top: none;
}
@media (min-width: 64em) {
  .meta .meta-portrait, .article-meta .meta-portrait {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    clear: both;
  }
  .meta .meta-portrait + .meta-section, .article-meta .meta-portrait + .meta-section {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    clear: both;
    padding-top: 26px;
  }
}

/* Submodules
// -------------------------------------------------------------------------- */
.meta-section {
  padding-top: 17px;
  padding-top: 1.0625rem;
  padding-bottom: 13px;
  padding-bottom: 0.8125rem;
  position: relative;
  margin: 0;
}
.meta-section:before {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 13%;
  height: 4px;
  background-color: #dee3e3;
}
.meta-section:first-child {
  padding-top: 0;
}
.meta-section:first-child:before {
  content: none;
}
@media (min-width: 48em) {
  .meta-section {
    padding-top: 30px;
    padding-top: 1.875rem;
    padding-bottom: 26px;
    padding-bottom: 1.625rem;
  }
  .meta-section:before {
    width: 19%;
  }
}
.meta-section.button {
  padding-top: 26px;
  padding-top: 1.625rem;
  padding-bottom: 26px;
  padding-bottom: 1.625rem;
  display: block;
  clear: both;
}
.meta-section.button:before {
  height: 1px;
}

.meta-slug {
  font-size: 13px;
  font-size: 0.8125rem;
  margin-bottom: 1em;
  color: #4a4a4a;
}

/* ==========================================================================
//  Navigation
// ========================================================================== */
/* Base
// -------------------------------------------------------------------------- */
nav, .nav, .footer-nav {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}
nav > li, .nav > li, .footer-nav > li {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
nav > ul, .nav > ul, .footer-nav > ul {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}
nav > ul > li, .nav > ul > li, .footer-nav > ul > li {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

/* Modifiers
// -------------------------------------------------------------------------- */
nav, .nav, .footer-nav {
  /* --- jump nav (local) ------------------------------------------------- */
}
nav.jump, .nav.jump, .jump.footer-nav, .article-jump {
  color: #abb3b1;
  counter-reset: jump-counter;
}
nav.jump li, .nav.jump li, .jump.footer-nav li, .article-jump li {
  margin-bottom: 0.5em;
  list-style: none;
}
nav.jump ol > li:before, .nav.jump ol > li:before, .jump.footer-nav ol > li:before, .article-jump ol > li:before {
  content: counter(jump-counter) ".";
  display: inline-block;
  margin-right: 0.5em;
  counter-increment: jump-counter;
  color: #abb3b1;
}

/* Submodules
// -------------------------------------------------------------------------- */
.jump-title:first-child {
  margin-top: 0;
}

.jump-item {
  color: #abb3b1;
}
.jump-item:hover, .jump-item strong {
  color: #00aeef;
}

/* ==========================================================================
// Social toolbar modules
// -> share links, comment count, etc.
// ========================================================================== */
/* Base
// -------------------------------------------------------------------------- */
.social, .article-social, article .social {
  font-size: 13px;
  font-size: 0.8125rem;
  text-align: center;
}
.social > ul li, .article-social > ul li, .social > li, .article-social > li, article .social > li {
  display: inline-block;
  list-style: none;
}
.social h1, .article-social h1, .social h2, .article-social h2, .social h3, .article-social h3, .social h4, .article-social h4, .social h5, .article-social h5, .social h6, .article-social h6, .social .icon, .article-social .icon, .social .comments-close, .article-social .comments-close, .social .social-icon, .article-social .social-icon, .social .footer-search, .article-social .footer-search, .social .header-search, .article-social .header-search, .social .overlay-close, .article-social .overlay-close {
  color: #abb3b1;
  fill: #abb3b1;
}

/* Submodules
// -------------------------------------------------------------------------- */
.social-section {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #dee3e3;
  display: inline-block;
  margin-left: 1em;
  padding-left: 1em;
}
.social-section:first-child {
  margin-left: 0;
}
@media (min-width: 64em) {
  .social-section {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #dee3e3;
    display: block;
    margin-top: 1em;
    padding-top: 1em;
    border-left: none;
  }
  .social-section:first-child {
    margin-top: 0;
  }
}

.social-channels {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}
.social-channels > li {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.social-channels > .social-channel {
  display: inline-block;
  list-style: none;
  vertical-align: bottom;
  margin: 0 0.5em 0 0;
}
.social-channels > .social-channel:last-child {
  margin-right: 0;
}
.social-channels > .social-channel .icon, .social-channels > .social-channel .comments-close, .social-channels > .social-channel .social-icon, .social-channels > .social-channel .footer-search, .social-channels > .social-channel .header-search, .social-channels > .social-channel .overlay-close {
  margin: 0;
  width: 1.2em;
  height: 1.2em;
}

.social-icon {
  fill: #abb3b1;
}
.social-icon:hover, .social-icon:active {
  fill: #00aeef;
}

/* ==========================================================================
//  "Heads Up Display" module
// -> a dark, full-bleed overlay for stuff like search results
// ========================================================================== */
/* Base
// -------------------------------------------------------------------------- */
.toolbar button, .toolbar .button {
  margin-right: 0.2em;
}

/* Child modules
// -------------------------------------------------------------------------- */
.toolbar-title {
  font-size: 13px;
  font-size: 0.8125rem;
  display: inline-block;
  margin-top: 0;
  margin-right: 1em;
  margin-bottom: 0;
  text-transform: uppercase;
  color: #abb3b1;
}

/* =============================================================================
// Organisms
// -> self-contained, reusable groups of molecules
// ========================================================================== */
/* ==========================================================================
//  Feed modules
// ========================================================================== */
/*doc
---
title: Feed
name: feed
category: organisms
---

A feed is a simple, vertical list of excerpted content, like article listings or blog posts. It's one-column by default but you can also add a small sidebar to it for stuff like "top stories" lists. It's native habitat is the "panel" region.

```html_example
<ul class="feed">
    <li class="feed-item">A post</li>
    <li class="feed-item">Another post</li>
    <li class="feed-item">And one more</li>
</ul>
```

Typically you'd mark this up as an unordered list, but it will work with any block-level elements.

You can add a sidebar using the "meta" module (a molecule). Add the `.feed-items` class to the main column.

```html_example
<div class="feed">
    <ul class="feed-items">
        <li class="feed-item">A post</li>
        <li class="feed-item">Another post</li>
        <li class="feed-item">And one more</li>
    </ul>
    <aside class="meta">
        I'm a sidebar.
    </aside>
</div>
```

*/
/* Base
// -------------------------------------------------------------------------- */
.feed {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  margin-top: 0;
  clear: both;
}
.feed::after {
  clear: both;
  content: "";
  display: table;
}
.feed > li {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.feed > ul {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  margin-top: 0;
}
.feed > ul > li {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.feed > .meta, .feed > .article-meta {
  display: none;
}
@media (min-width: 56.25em) {
  .feed > .feed-items {
    width: 72.36042%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 26px;
    margin-top: 0;
  }
  .feed > .feed-items + .meta, .feed > .feed-items + .article-meta {
    width: 27.63958%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    display: block;
  }
}

/* Modifiers
// -------------------------------------------------------------------------- */
.feed.l-wrapper {
  padding-left: 42px;
  margin-left: auto;
}

/* Submodules
// -------------------------------------------------------------------------- */
.feed-item {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #dee3e3;
  margin-top: 26px;
  margin-bottom: 26px;
  padding-top: 26px;
}
.feed-item:first-child {
  border-top: none;
}
.feed-item.media.tile, .feed-item.tile.gallery-media {
  border: none;
}

/* =============================================================================
//  Gallery modules
// -> arrange child elements into rows and columns
// ========================================================================== */
/*doc
---
title: Gallery
name: gallery
category: organisms
---

A gallery is a grid of small bits of content- usually listings or thumbnails. It breaks the content into even columns and rows. It is responsive, so the column number will change based on screen width, and column width is fluid (percentage-based).

```html_example
    <ul class='gallery'>
        <li class="gallery-item">
            Wow, I'm in a gallery.
        </li>
        <li class="gallery-item">
            Me too.
        </li>
    </ul>
```

Typically, you'll mark up a gallery as an unordered list, but it will work with most block-level elements (like <nav> or <div>). Just give the container a "gallery" class and the children a "gallery-item" class.

There are three (column) size variations: small, medium, and large. Medium is default, so that's the size you get with just "gallery." This only affects overall column width: a "large" gallery will have fewer columns at any given screen size than a "small" gallery. Note any size variation can be used at any screen size. The best choice mainly depends on the type of content you're displaying. If there's lots of text, it might look squished in a "small" gallery, whereas tiny icons might get blown up really huge in a "large" gallery.

```html_example
    <!-- small gallery, with narrow columns -->
    <ul class="gallery small"></ul>

    <!-- medium gallery, slightly wider columns -->
    <!-- (default, no modifier needed) -->
    <ul class="gallery"></ul>

    <!-- large gallery with wide columns -->
    <ul class="gallery large"></ul>
```

The gallery module uses the [Singularity Quick Spanner plugin](https://github.com/lolmaus/singularity-quick-spanner) and it's Thumbnail Grid mixins. This uses nth-child selectors heavily, so we'll prob need to polyfill this for IE8.

*/
/* Base
// -------------------------------------------------------------------------- */
.gallery, .main_footer-gallery {
  display: block;
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-bottom: 0;
  font-size: 0;
  list-style: none;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  box-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  -o-align-items: stretch;
  align-items: stretch;
  -ms-flex-align: stretch;
}
.gallery > ul, .main_footer-gallery > ul {
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}
.gallery.l-wrapper, .l-wrapper.main_footer-gallery {
  margin-left: auto;
  margin-right: auto;
  padding-left: 29px;
  padding-right: 29px;
  max-width: 1121px;
}
@media (min-width: 48em) {
  .gallery, .main_footer-gallery {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    margin-left: -13px;
    margin-right: -13px;
  }
  .gallery.l-wrapper, .l-wrapper.main_footer-gallery {
    margin-left: auto;
    margin-right: auto;
    padding-left: 29px;
    padding-right: 29px;
    max-width: 1121px;
  }
}

/* Modifiers
// -------------------------------------------------------------------------- */
/* --- Column sizing -------------------------------------------------------- */
@media (min-width: 30em) {
  .gallery.tiny, .tiny.main_footer-gallery, .gallery.small, .small.main_footer-gallery {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    margin-left: -13px;
    margin-right: -13px;
  }
  .gallery.tiny.l-wrapper, .tiny.l-wrapper.main_footer-gallery, .gallery.small.l-wrapper, .small.l-wrapper.main_footer-gallery {
    margin-left: auto;
    margin-right: auto;
    padding-left: 29px;
    padding-right: 29px;
    max-width: 1121px;
  }
}

@media (min-width: 48em) {
  .gallery.large.l-wrapper, .large.l-wrapper.main_footer-gallery {
    margin-left: auto;
    margin-right: auto;
    padding-left: 29px;
    padding-right: 29px;
    max-width: 1121px;
  }
}

@media (min-width: 48em) {
  .gallery.automatic.l-wrapper, .automatic.l-wrapper.main_footer-gallery {
    margin-left: auto;
    margin-right: auto;
    padding-left: 29px;
    padding-right: 29px;
    max-width: 1121px;
  }
}

/* --- Special behaviors ---------------------------------------------------- */
.gallery.centered, .centered.main_footer-gallery {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  text-align: center;
}

.gallery.centered-vertical, .centered-vertical.main_footer-gallery {
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
}

@media (min-width: 48em) {
  .gallery.flush, .flush.main_footer-gallery {
    margin-left: 0;
    margin-right: 0;
  }
  .gallery.flush.l-wrapper, .flush.l-wrapper.main_footer-gallery {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Submodules
// -------------------------------------------------------------------------- */
/* --- Gallery Items -------------------------------------------------------- */
.gallery-item, .gallery-media, .main_footer-gallery-item {
  font-size: 16px;
  font-size: 1rem;
  display: block;
  position: relative;
  margin: 0;
  padding-bottom: 26px;
  vertical-align: top;
}
@media (min-width: 48em) {
  .gallery-item, .gallery-media, .main_footer-gallery-item {
    display: inline-block !important;
    width: 50%;
    padding-right: 13px;
    padding-left: 13px;
    vertical-align: top;
  }
  .flexbox .gallery-item, .flexbox .gallery-media, .flexbox .main_footer-gallery-item {
    width: auto;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 50%;
    -moz-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
  }
}
@media (min-width: 64em) {
  .gallery-item, .gallery-media, .main_footer-gallery-item {
    display: inline-block !important;
    width: 33.33333%;
    padding-right: 13px;
    padding-left: 13px;
    vertical-align: top;
  }
  .flexbox .gallery-item, .flexbox .gallery-media, .flexbox .main_footer-gallery-item {
    width: auto;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
    -moz-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
  }
}
@media (min-width: 48em) {
  .gallery.automatic .gallery-item, .automatic.main_footer-gallery .gallery-item, .gallery.automatic .gallery-media, .automatic.main_footer-gallery .gallery-media, .gallery.automatic .main_footer-gallery-item, .automatic.main_footer-gallery .main_footer-gallery-item {
    flex: 1;
  }
}
.gallery.tiny .gallery-item, .tiny.main_footer-gallery .gallery-item, .gallery.tiny .gallery-media, .tiny.main_footer-gallery .gallery-media, .gallery.tiny .main_footer-gallery-item, .tiny.main_footer-gallery .main_footer-gallery-item {
  display: inline-block !important;
  width: 50%;
  padding-right: 13px;
  padding-left: 13px;
  vertical-align: top;
}
.flexbox .gallery.tiny .gallery-item, .flexbox .tiny.main_footer-gallery .gallery-item, .flexbox .gallery.tiny .gallery-media, .flexbox .tiny.main_footer-gallery .gallery-media, .flexbox .gallery.tiny .main_footer-gallery-item, .flexbox .tiny.main_footer-gallery .main_footer-gallery-item {
  width: auto;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  -webkit-flex: 0 0 50%;
  -moz-flex: 0 0 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
}
@media (min-width: 30em) {
  .gallery.tiny .gallery-item, .tiny.main_footer-gallery .gallery-item, .gallery.tiny .gallery-media, .tiny.main_footer-gallery .gallery-media, .gallery.tiny .main_footer-gallery-item, .tiny.main_footer-gallery .main_footer-gallery-item {
    display: inline-block !important;
    width: 33.33333%;
    padding-right: 13px;
    padding-left: 13px;
    vertical-align: top;
  }
  .flexbox .gallery.tiny .gallery-item, .flexbox .tiny.main_footer-gallery .gallery-item, .flexbox .gallery.tiny .gallery-media, .flexbox .tiny.main_footer-gallery .gallery-media, .flexbox .gallery.tiny .main_footer-gallery-item, .flexbox .tiny.main_footer-gallery .main_footer-gallery-item {
    width: auto;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
    -moz-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
  }
}
@media (min-width: 48em) {
  .gallery.tiny .gallery-item, .tiny.main_footer-gallery .gallery-item, .gallery.tiny .gallery-media, .tiny.main_footer-gallery .gallery-media, .gallery.tiny .main_footer-gallery-item, .tiny.main_footer-gallery .main_footer-gallery-item {
    display: inline-block !important;
    width: 16.66667%;
    padding-right: 13px;
    padding-left: 13px;
    vertical-align: top;
  }
  .flexbox .gallery.tiny .gallery-item, .flexbox .tiny.main_footer-gallery .gallery-item, .flexbox .gallery.tiny .gallery-media, .flexbox .tiny.main_footer-gallery .gallery-media, .flexbox .gallery.tiny .main_footer-gallery-item, .flexbox .tiny.main_footer-gallery .main_footer-gallery-item {
    width: auto;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 16.66667%;
    -moz-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
  }
}
@media (min-width: 80em) {
  .gallery.tiny .gallery-item, .tiny.main_footer-gallery .gallery-item, .gallery.tiny .gallery-media, .tiny.main_footer-gallery .gallery-media, .gallery.tiny .main_footer-gallery-item, .tiny.main_footer-gallery .main_footer-gallery-item {
    display: inline-block !important;
    width: 12.5%;
    padding-right: 13px;
    padding-left: 13px;
    vertical-align: top;
  }
  .flexbox .gallery.tiny .gallery-item, .flexbox .tiny.main_footer-gallery .gallery-item, .flexbox .gallery.tiny .gallery-media, .flexbox .tiny.main_footer-gallery .gallery-media, .flexbox .gallery.tiny .main_footer-gallery-item, .flexbox .tiny.main_footer-gallery .main_footer-gallery-item {
    width: auto;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 12.5%;
    -moz-flex: 0 0 12.5%;
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
  }
}
@media (min-width: 30em) {
  .gallery.small .gallery-item, .small.main_footer-gallery .gallery-item, .gallery.small .gallery-media, .small.main_footer-gallery .gallery-media, .gallery.small .main_footer-gallery-item, .small.main_footer-gallery .main_footer-gallery-item {
    display: inline-block !important;
    width: 50%;
    padding-right: 13px;
    padding-left: 13px;
    vertical-align: top;
  }
  .flexbox .gallery.small .gallery-item, .flexbox .small.main_footer-gallery .gallery-item, .flexbox .gallery.small .gallery-media, .flexbox .small.main_footer-gallery .gallery-media, .flexbox .gallery.small .main_footer-gallery-item, .flexbox .small.main_footer-gallery .main_footer-gallery-item {
    width: auto;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 50%;
    -moz-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
  }
}
@media (min-width: 48em) {
  .gallery.small .gallery-item, .small.main_footer-gallery .gallery-item, .gallery.small .gallery-media, .small.main_footer-gallery .gallery-media, .gallery.small .main_footer-gallery-item, .small.main_footer-gallery .main_footer-gallery-item {
    display: inline-block !important;
    width: 33.33333%;
    padding-right: 13px;
    padding-left: 13px;
    vertical-align: top;
  }
  .flexbox .gallery.small .gallery-item, .flexbox .small.main_footer-gallery .gallery-item, .flexbox .gallery.small .gallery-media, .flexbox .small.main_footer-gallery .gallery-media, .flexbox .gallery.small .main_footer-gallery-item, .flexbox .small.main_footer-gallery .main_footer-gallery-item {
    width: auto;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
    -moz-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
  }
}
@media (min-width: 64em) {
  .gallery.small .gallery-item, .small.main_footer-gallery .gallery-item, .gallery.small .gallery-media, .small.main_footer-gallery .gallery-media, .gallery.small .main_footer-gallery-item, .small.main_footer-gallery .main_footer-gallery-item {
    display: inline-block !important;
    width: 25%;
    padding-right: 13px;
    padding-left: 13px;
    vertical-align: top;
  }
  .flexbox .gallery.small .gallery-item, .flexbox .small.main_footer-gallery .gallery-item, .flexbox .gallery.small .gallery-media, .flexbox .small.main_footer-gallery .gallery-media, .flexbox .gallery.small .main_footer-gallery-item, .flexbox .small.main_footer-gallery .main_footer-gallery-item {
    width: auto;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 25%;
    -moz-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
  }
}
@media (min-width: 48em) {
  .gallery.large .gallery-item, .large.main_footer-gallery .gallery-item, .gallery.large .gallery-media, .large.main_footer-gallery .gallery-media, .gallery.large .main_footer-gallery-item, .large.main_footer-gallery .main_footer-gallery-item {
    display: inline-block !important;
    width: 50%;
    padding-right: 13px;
    padding-left: 13px;
    vertical-align: top;
  }
  .flexbox .gallery.large .gallery-item, .flexbox .large.main_footer-gallery .gallery-item, .flexbox .gallery.large .gallery-media, .flexbox .large.main_footer-gallery .gallery-media, .flexbox .gallery.large .main_footer-gallery-item, .flexbox .large.main_footer-gallery .main_footer-gallery-item {
    width: auto;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    -webkit-flex: 0 0 50%;
    -moz-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
  }
}
.gallery.flush .gallery-item, .flush.main_footer-gallery .gallery-item, .gallery.flush .gallery-media, .flush.main_footer-gallery .gallery-media, .gallery.flush .main_footer-gallery-item, .flush.main_footer-gallery .main_footer-gallery-item {
  padding-left: 0;
  padding-right: 0;
}
.gallery.centered .gallery-item, .centered.main_footer-gallery .gallery-item, .gallery.centered .gallery-media, .centered.main_footer-gallery .gallery-media, .gallery.centered .main_footer-gallery-item, .centered.main_footer-gallery .main_footer-gallery-item {
  text-align: center;
}
.gallery.centered-vertical .gallery-item, .centered-vertical.main_footer-gallery .gallery-item, .gallery.centered-vertical .gallery-media, .centered-vertical.main_footer-gallery .gallery-media, .gallery.centered-vertical .main_footer-gallery-item, .centered-vertical.main_footer-gallery .main_footer-gallery-item {
  vertical-align: middle;
}

.gallery-media {
  margin-bottom: 26px;
}
@media (min-width: 48em) {
  .gallery-media.tile:before {
    right: 13px;
    left: 13px;
  }
}

/* Base
// -------------------------------------------------------------------------- */
.main_footer {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #c2c6c8;
  position: relative;
  background-color: #dddfe0;
}

/* Submodules
// -------------------------------------------------------------------------- */
.main_footer-tier {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #c2c6c8;
  padding-bottom: 21px;
  padding-bottom: 1.3125rem;
}
.main_footer-tier:last-child {
  border-bottom: none;
}
.main_footer-tier.well {
  background-color: #cfd3d4;
}
.main_footer-tier.has-padding {
  padding-top: 21px;
  padding-top: 1.3125rem;
}

.main_footer-slug {
  position: relative;
  z-index: 1;
}
.main_footer-slug::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  background: #dddfe0;
  z-index: -1;
}

.main_footer-slug-label {
  font-size: 13px;
  font-size: 0.8125rem;
  padding: 0 12px 0 0;
  padding: 0 0.75rem 0 0;
  background: #cfd3d4;
  color: #919a98;
}

.main_footer-section {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #c2c6c8;
  padding: 0 0px 26px;
  padding: 0 0px 1.625rem;
  display: block;
}

.main_footer-gallery {
  margin-top: 26px !important;
}

.main_footer-gallery-item {
  text-align: center;
}

.footer-nav {
  padding-top: 13px;
  padding-top: 0.8125rem;
  text-align: left;
}
.footer-nav a {
  color: #706f6f;
}
.footer-nav a:hover, .footer-nav a:active {
  color: #00aeef;
}
@media (min-width: 30em) {
  .footer-nav {
    margin-left: 186px;
    margin-left: 11.625rem;
    margin-top: 0;
    text-align: right;
  }
}

.footer-nav-main {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #c2c6c8;
  margin: 0;
  padding: 0;
  text-align: left;
}
.footer-nav-main > li {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.footer-nav-main .nav-item {
  display: inline-block;
}
.footer-nav-main li {
  margin-bottom: 0;
}
.footer-nav-main .nav-item {
  padding: 0 0 13px 13px;
  padding: 0 0 0.8125rem 0.8125rem;
  font-size: 13px;
  font-size: 0.8125rem;
  text-transform: uppercase;
  color: #abb3b1;
}
.footer-nav-main .nav-item.search {
  padding-bottom: 0;
  float: right;
}

.footer-nav-utility {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  display: inline-block;
  margin: 0;
  padding: 0;
}
.footer-nav-utility > li {
  list-style: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.footer-nav-utility .nav-item {
  display: inline-block;
}
.footer-nav-utility .nav-item {
  margin-top: 13px;
  margin-top: 0.8125rem;
  padding: 2px 13px;
  padding: 0.125rem 0.8125rem;
  font-size: 13px;
  font-size: 0.8125rem;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #c2c6c8;
  color: #abb3b1;
}
.footer-nav-utility .nav-item:first-child {
  border-left: none;
}
.footer-nav-utility .nav-item:last-child {
  padding-right: 0;
}

.footer-logo {
  padding: 30px 18px 24px;
  padding: 1.875rem 1.125rem 1.5rem;
  width: 160px;
  width: 10rem;
  display: block;
  position: relative;
  margin-top: -1px;
  fill: white;
  background-color: #4a4a4a;
}
@media (min-width: 48em) {
  .footer-logo {
    margin-bottom: -144px;
    margin-bottom: -9rem;
    position: absolute;
    top: 0;
    left: 42px;
  }
}

.wbg {
  float: right;
  height: 100%;
  vertical-align: middle;
  display: none;
}
@media (min-width: 30em) {
  .wbg {
    display: block;
  }
}

.footer-copyright {
  font-size: 13px;
  font-size: 0.8125rem;
  display: block;
  border-left: none;
  color: #abb3b1;
  margin-top: 1em;
}
@media (min-width: 48em) {
  .footer-copyright {
    margin-left: 13px;
    margin-left: 0.8125rem;
    padding-left: 13px;
    padding-left: 0.8125rem;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #c2c6c8;
    display: inline-block;
    margin-top: 0;
  }
}

.footer-search {
  margin-right: 21px;
  margin-right: 1.3125rem;
  width: 24px;
  width: 1.5rem;
  display: inline-block;
  float: right;
  fill: #4a4a4a;
}
.footer-search:hover, .footer-search:active {
  fill: #00aeef;
}
.footer.cover .footer-search {
  fill: white;
}
.footer.cover .footer-search:hover {
  fill: #00aeef;
}

/* =============================================================================
//  Header modules
// ========================================================================== */
/* Config
// -------------------------------------------------------------------------- */
/* Base
// -------------------------------------------------------------------------- */
header, .header {
  position: relative;
}
header h1, header h2, header h3, header h4, header h5, header h6, .header h1, .header h2, .header h3, .header h4, .header h5, .header h6 {
  line-height: 1.2;
  margin: 0;
}

/* Modifiers
// -------------------------------------------------------------------------- */
header, .header {
  /* --- main header (used throughout site) ------------------------------- */
}
header.main, header [role="banner"], .header.main, .header [role="banner"] {
  height: 48px;
  height: 3rem;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  background-color: white;
  background-color: rgba(255, 255, 255, 0.8);
  /* --- home page header (variation on main header) ------------------ */
}
header.main + *, header [role="banner"] + *, .header.main + *, .header [role="banner"] + * {
  margin-top: 90px;
}
header.main + .hero, header.main + .article-hero, header.main + .article, header.main + article, header.main + .full.bleed, header [role="banner"] + .hero, header [role="banner"] + .article-hero, header [role="banner"] + .article, header [role="banner"] + article, header [role="banner"] + .full.bleed, .header.main + .hero, .header.main + .article-hero, .header.main + .article, .header.main + article, .header.main + .full.bleed, .header [role="banner"] + .hero, .header [role="banner"] + .article-hero, .header [role="banner"] + .article, .header [role="banner"] + article, .header [role="banner"] + .full.bleed {
  margin-top: 0;
}
header.main.cover, header [role="banner"].cover, .header.main.cover, .header [role="banner"].cover {
  background-color: transparent;
}
header.main.cover + *, header [role="banner"].cover + *, .header.main.cover + *, .header [role="banner"].cover + * {
  margin-top: 0;
}

/* Submodules
// -------------------------------------------------------------------------- */
.header-logo {
  margin-left: 42px;
  margin-left: 2.625rem;
  width: 200px;
  width: 12.5rem;
  display: inline-block;
  padding: 0.4em 0;
  height: 100%;
}

.header-lockup {
  position: absolute;
  top: 0;
  left: 42px;
}

.header-breadcrumb {
  padding-left: 26px;
  padding-left: 1.625rem;
  display: none;
}
@media (min-width: 37.5em) {
  .header-breadcrumb {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .header-breadcrumb::before, .header-breadcrumb:before {
    display: inline-block;
    content: " ";
    vertical-align: middle;
    height: 100%;
  }
}

.header-search {
  margin-right: 42px;
  margin-right: 2.625rem;
  width: 24px;
  width: 1.5rem;
  display: inline-block;
  float: right;
  padding: 0.6em 0 0.4em 0;
  height: 100%;
  fill: #4a4a4a;
}
.header-search:hover, .header-search:active {
  fill: #00aeef;
}
.header.cover .header-search {
  fill: white;
}
.header.cover .header-search:hover {
  fill: #00aeef;
}

/* ==========================================================================
//  Pagination
// -> "next" and "previous" navigation at the bottom of an article, issue, etc.
// ========================================================================== */
/* Base
// -------------------------------------------------------------------------- */
.pagination {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #dee3e3;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #dee3e3;
  position: relative;
  z-index: 1;
  margin-top: 26px;
  padding-top: 26px;
  padding-bottom: 26px;
  clear: both;
  text-align: center;
  line-height: 1.2;
}
.pagination::after {
  clear: both;
  content: "";
  display: table;
}
.pagination li {
  margin-bottom: 0;
}
.pagination > ul.l-wrapper {
  padding-left: 42px;
  margin-left: auto;
  margin-top: 0;
  margin-bottom: 0;
}
@media (min-width: 48em) {
  .pagination .pagination-prev, .pagination .pagination-next {
    width: 50%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 26px;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 2.5em;
    text-align: left;
  }
  .pagination .pagination-next {
    width: 50%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #dee3e3;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 2.5em;
    text-align: right;
  }
}

/* Submodules
// -------------------------------------------------------------------------- */
.pagination-prev, .pagination-next {
  position: relative;
}
.pagination-prev:hover .pagination-title, .pagination-next:hover .pagination-title {
  color: #00aeef;
}

.pagination-next {
  position: relative;
  margin-top: 26px;
}

.pagination-slug {
  top: -6.5px;
  top: -0.40625rem;
  height: 13px;
  height: 0.8125rem;
  font-size: 13px;
  font-size: 0.8125rem;
  display: inline-block;
  position: absolute;
  left: 50%;
  z-index: 2;
  -webkit-transform: translate(-50%);
  -ms-transform: translateY -50%;
  -moz-transform: translateY -50%;
  -o-transform: translateY -50%;
  transform: translate(-50%);
  padding: 0 1em;
  text-transform: uppercase;
  line-height: 1;
  color: #b9bfbe;
  background-color: white;
}

.pagination-label {
  font-size: 13px;
  font-size: 0.8125rem;
  color: #00aeef;
  text-transform: uppercase;
}

.pagination-title {
  font-size: 19px;
  font-size: 1.1875rem;
  font-weight: bold;
}

.pagination-subtitle {
  font-size: 13px;
  font-size: 0.8125rem;
  color: #abb3b1;
}

.icon.arrow-left, .arrow-left.comments-close, .arrow-left.social-icon, .arrow-left.footer-search, .arrow-left.header-search, .icon.arrow-right, .arrow-right.comments-close, .arrow-right.social-icon, .arrow-right.footer-search, .arrow-right.header-search, .arrow-right.overlay-close, .arrow-left.overlay-close {
  display: none;
}
@media (min-width: 48em) {
  .icon.arrow-left, .arrow-left.comments-close, .arrow-left.social-icon, .arrow-left.footer-search, .arrow-left.header-search, .icon.arrow-right, .arrow-right.comments-close, .arrow-right.social-icon, .arrow-right.footer-search, .arrow-right.header-search, .arrow-right.overlay-close, .arrow-left.overlay-close {
    display: block;
    position: absolute;
    left: 0;
    top: 0.1em;
    height: 1.5em;
    width: 1.5em;
    margin: 0;
    fill: #abb3b1;
  }
}

.icon.arrow-right, .arrow-right.comments-close, .arrow-right.social-icon, .arrow-right.footer-search, .arrow-right.header-search, .arrow-right.overlay-close {
  left: auto;
  right: 0;
}

/* ==========================================================================
//  Profile module
// ========================================================================== */
/*doc
---
title: Profile
name: profile
category: regions
---

A profile is an area containing a contributor's name, title, portrait, bio, contact info, etc. Since it's a special layout, it has a lot of submodules, but they're pretty straightforward.

```html_example
<div class="profile">
    <header class="profile-header">
        <h1 class="profile-name">Sevi Simavi</h1>
        <span class="profile-subtitle"><strong>CEO</strong>, Cherie Blair Foundation for Women</span>
    </header>

    <img class="profile-portrait" alt="Sevi Simavi" />

    <!-- use a meta module (molecule) for contact info, etc. -->
    <aside class="meta">
        <address class="meta-section">
            <dl>
                <dt><a href="#">LinkedIn</a></dt>
                <dt><a href="#">Twitter</a></dt>
                <dd>@SeviSimavi</dd>
            </dl>
        </address>
        <dl class="meta-section">
            <dt>Topics</dt>
            <dd class="inline">technology</dd>
            <dd class="inline">broadband</dd>
            <dd class="inline">legal</dd>
        </dl>
    </aside>

    <div class="profile-content">
        <p>Sevi has over ten years of global public policy and financial sector development experience gained in over 50 countries across the globe through work at the World Bank Group and the private sector. Her expertise includes business and financial regulation, institution and capacity building, women’s entrepreneurship, emerging markets and results measurement. Sevi has an LLM from Georgetown University.</p>
    </div>
</div>
```

*/
/* Base
// -------------------------------------------------------------------------- */
.profile::after {
  clear: both;
  content: "";
  display: table;
}
.profile .profile-portrait, .profile .meta, .profile .article-meta {
  margin-bottom: 26px;
}
.profile > .meta, .profile > .article-meta {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #dee3e3;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #dee3e3;
  padding-top: 13px;
}
@media (min-width: 26.25em) {
  .profile .profile-portrait {
    width: 38.1971%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 26px;
  }
  .profile > .meta, .profile > .article-meta {
    width: 61.8029%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
  }
  .profile .profile-content {
    clear: both;
  }
}
@media (min-width: 37.5em) {
  .profile .profile-portrait {
    width: 27.63958%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 26px;
  }
  .profile .profile-header {
    width: 72.36042%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
  }
  .profile .profile-content {
    width: 72.36042%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
  }
  .profile .meta, .profile .article-meta {
    width: 72.36042%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
  }
}
@media (min-width: 48em) {
  .profile .profile-portrait {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 42px;
    padding-right: 0;
    width: 21.6544%;
  }
  .profile .profile-header {
    width: 56.69121%;
    float: left;
    margin-right: -100%;
    margin-left: 21.6544%;
    clear: none;
    padding-right: 26px;
  }
  .profile > .meta, .profile > .article-meta {
    width: 21.6544%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    border: none;
  }
  .profile .profile-content {
    width: 56.69121%;
    float: left;
    margin-right: -100%;
    margin-left: 21.6544%;
    clear: none;
    padding-right: 26px;
    clear: left;
  }
}

/* Submodules
// -------------------------------------------------------------------------- */
.profile-portrait {
  width: 100%;
}
.profile-portrait img {
  width: 100%;
}

.profile-header {
  padding-bottom: 26px;
}
.profile-header::after {
  clear: both;
  content: "";
  display: table;
}

.profile-name {
  font-size: 42px;
  font-size: 2.625rem;
  text-transform: none;
}

.profile-subtitle {
  color: #00aeef;
}

.profile-content {
  margin-bottom: 42px;
}

/* ==========================================================================
// Sidebars
// -> secondary content that goes alongside the main text of an article
// -> note we're using "sidebar" in the journalist sense of the word, not the
//    UI/layout sense of the word. sidebar _content_, not share buttons or
//    meta info. for that stuff, see the 'meta' and 'share' molecules.
// ========================================================================== */
/* Base
// -------------------------------------------------------------------------- */
.sidebar {
  padding: 26px;
  background-color: #f1f2f3;
}

/* Submodules
// -------------------------------------------------------------------------- */
.sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5, .sidebar h6 {
  margin: 0 !important;
  line-height: 1.2;
  text-transform: none !important;
}
.sidebar h1 {
  font-size: 26px;
  font-size: 1.625rem;
}

.sidebar-title {
  margin: 0;
  text-transform: none !important;
  color: #4a4a4a;
}

/* =============================================================================
// Regions
// -> reusable, major content regions containing specific combinations of organisms
// -> compose entirely with organisms as much as possible
// -> should not contain much "original" styling, leave that to
//      the atoms, molecules, organisms
// ========================================================================== */
/* ==========================================================================
//  Article module
// ========================================================================== */
/* Config
// -------------------------------------------------------------------------- */
/* Base
// -------------------------------------------------------------------------- */
article, .article {
  position: relative;
  margin-top: 0;
  padding-bottom: 26px;
  clear: both;
}
article::after, .article::after {
  clear: both;
  content: "";
  display: table;
}

/* Submodules
// -------------------------------------------------------------------------- */
/* --- hero unit on features -------------------------------------------- */
.article-hero {
  margin-bottom: 26px;
}

/* --- article title & subtitle ----------------------------------------- */
.article-headline {
  margin-top: 78px;
  margin-top: 4.875rem;
  padding-left: 26px;
  padding-right: 26px;
  margin-bottom: 3em;
  clear: both;
}
.article-hero + .article-headline {
  margin-top: 0;
}

/* --- main content ----------------------------------------------------- */
.article-content {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 64em) {
  .article-content {
    width: 56.69121%;
    float: left;
    margin-right: -100%;
    margin-left: 21.6544%;
    clear: none;
    padding-right: 26px;
    max-width: none;
  }
}
.article-content section {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #dee3e3;
  margin-top: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
}
.article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6 {
  text-transform: none;
}
.article-content h1 + p, .article-content h1 + ol, .article-content h1 + li, .article-content h1 + img, .article-content h2 + p, .article-content h2 + ol, .article-content h2 + li, .article-content h2 + img, .article-content h3 + p, .article-content h3 + ol, .article-content h3 + li, .article-content h3 + img, .article-content h4 + p, .article-content h4 + ol, .article-content h4 + li, .article-content h4 + img, .article-content h5 + p, .article-content h5 + ol, .article-content h5 + li, .article-content h5 + img, .article-content h6 + p, .article-content h6 + ol, .article-content h6 + li, .article-content h6 + img {
  margin-bottom: 0.5em;
}
.article-content h1 {
  font-size: 30px;
  font-size: 1.875rem;
}
.article-content h2 {
  font-size: 26px;
  font-size: 1.625rem;
  font-weight: normal;
  color: #00aeef;
}
.article-content h3 {
  font-size: 19px;
  font-size: 1.1875rem;
}
.article-content h4 {
  font-size: 16px;
  font-size: 1rem;
  color: #abb3b1;
}
.article-content h5, .article-content h6 {
  font-size: 13px;
  font-size: 0.8125rem;
  color: #abb3b1;
}
.article-content p + section {
  margin-top: 0;
}
.article-content > img, .article-content section > img {
  margin: 1.2em 0;
  width: 100%;
}
.article-content > img:first-child, .article-content section > img:first-child {
  margin-top: 0;
}
.article-content > img + p, .article-content > img + ul, .article-content > img + ol, .article-content section > img + p, .article-content section > img + ul, .article-content section > img + ol {
  margin-top: 1em;
}
@media (min-width: 48em) {
  .article-content > img, .article-content section > img {
    margin: 1.2em 1.2em 1.2em 0;
    float: left;
    width: auto;
  }
}

/* --- share menu ------------------------------------------------------- */
.article-social, article .article-social, article .social {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #dee3e3;
}
.article-social::after, article .article-social::after, article .social::after {
  clear: both;
  content: "";
  display: table;
}
@media (min-width: 64em) {
  .article-social, article .article-social, article .social {
    width: 21.6544%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    clear: right;
    border-top: none;
  }
}

/* --- jump nav --------------------------------------------------------- */
.article-jump {
  clear: left;
  margin-bottom: 26px;
  display: none;
  margin-top: 0;
}
@media (min-width: 64em) {
  .article-jump {
    float: left;
    margin-left: -38.1971%;
    padding-right: 26px;
    width: 38.1971%;
  }
}
@media (min-width: 64em) {
  .article-jump {
    display: block;
  }
}

/* --- author, date, etc. ----------------------------------------------- */
.article-meta {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 64em) {
  .article-meta {
    width: 21.6544%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 26px;
    clear: both;
  }
}

/* ---pullquotes -------------------------------------------------------- */
@media (min-width: 64em) {
  .article-pullquote {
    margin-left: -2em;
  }
}

/* --- footnotes and sidebar images ------------------------------------- */
.article-note {
  clear: right;
  margin-bottom: 26px;
}
@media (min-width: 64em) {
  .article-note {
    float: right;
    margin-right: -42.53043%;
    padding-left: 26px;
    width: 42.53043%;
  }
}
@media (min-width: 64em) {
  .article-note {
    margin-top: -2.625em;
  }
}

/* --- local footer ----------------------------------------------------- */
.article-footer {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #dee3e3;
  margin-top: 1em;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  clear: both;
}
@media (min-width: 64em) {
  .article-footer {
    width: 56.69121%;
    float: left;
    margin-right: -100%;
    margin-left: 21.6544%;
    clear: none;
    padding-right: 26px;
    clear: left;
    max-width: none;
  }
}
.article-footer .feed {
  margin-top: 1em;
}
.article-footer .media:first-of-type, .article-footer .gallery-media:first-of-type {
  border-top: none;
}

/* ==========================================================================
//  "Heads Up Display" module
// -> a dark, full-bleed overlay for stuff like search results
// ========================================================================== */
/* Base
// -------------------------------------------------------------------------- */
.overlay {
  padding-top: 68px;
  padding-top: 4.25rem;
  padding-bottom: 42px;
  padding-bottom: 2.625rem;
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: white;
  background-color: rgba(255, 255, 255, 0.95);
}
.has-overlay .overlay {
  display: block;
}

/* Submodules
// -------------------------------------------------------------------------- */
.has-overlay .overlay-open {
  display: none;
}

.overlay-close {
  width: 26px;
  width: 1.625rem;
  height: 26px;
  height: 1.625rem;
  display: block;
  position: fixed;
  top: 26px;
  right: 42px;
  z-index: 2;
  margin: 0;
  fill: #abb3b1;
}
.overlay-close:hover, .overlay-close:active {
  fill: #00aeef;
}

.overlay-header {
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
}

.overlay-toolbar {
  margin-top: 26px;
  margin-bottom: 26px;
}

/* States
// -------------------------------------------------------------------------- */
.has-overlay {
  overflow: hidden;
}

/* ==========================================================================
//  Panel modules
// ========================================================================== */
/*doc
---
title: Panel
name: panel
category: regions
---

A 'panel' is a full-width container for a section of content, such as a list of contributors or a feed of recent articles. Panels always stack vertically on a page and usually have borders between them. They always take up the entire width of the window, but include outside gutters (padding) to keep content from bumping the edges. They often have a "slug" header which describes the kind of the content inside.

```html_example
    <section class='panel'>
        <h1 class="slug">Contributors</h1>
    </section>
```

The <section> element is usually the best tag to use for this, but it will work on `<div>` too. If you use `<section>`, be sure to add a heading as one of its first children.

If you'd like the content inside to be constrained to a limited width on large screens, add a `.l-wrapper` container inside the panel:

```html_example
    <section class='panel'>
        <h1 class="slug">Contributors</h1>
        <div class="l-wrapper">
            <!-- your content here -->
        </div>
    </section>
```

If you don't want the panel to have a border, just add a "no-border" modifier class:

```html_example
    <section class='panel no-border'>
        You totally can't see my edges.
    </section>
```

*/
/* Base
// -------------------------------------------------------------------------- */
.panel {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #dee3e3;
  position: relative;
  z-index: 0;
  padding-top: 26px;
  padding-bottom: 26px;
}
.panel.no-border {
  border-top: none;
}
header + .panel, .header + .panel, .hero + .panel, .article-hero + .panel {
  border-top: none;
}
.panel > .slug, .panel > .hero-slug {
  top: -26px;
}
.panel > .hero:first-child, .panel > .article-hero:first-child,
.panel > .full.bleed:first-child {
  margin-top: -26px;
}
.panel > .full.bleed:last-child {
  margin-bottom: -26px;
}

/* =============================================================================
// Styles of Shame
// -> put quick and dirty hacks here, then clean up & organize later
// ========================================================================== */
#wpas-load {
  display: none;
}

#wp-logged-in header.main, #wp-logged-in .header.main {
  top: 32px !important;
}

.wbg-text {
  font-family: "AvenirBold", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  color: #fff;
  font-size: 1.5em;
}
.wbg-text:hover {
  color: #fff;
}
.wbg-text .blue {
  color: #00ade4;
}

/*
     FILE ARCHIVED ON 12:43:37 Jan 30, 2017 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 11:10:09 Dec 08, 2022.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 976.7
  exclusion.robots: 0.092
  exclusion.robots.policy: 0.083
  cdx.remote: 0.08
  esindex: 0.012
  LoadShardBlock: 300.501 (3)
  PetaboxLoader3.datanode: 244.651 (5)
  CDXLines.iter: 17.653 (3)
  load_resource: 213.841 (2)
  PetaboxLoader3.resolve: 96.813 (2)
*/