/*------------------------------------*\
    #Apollo: core styles for all browsers
\*------------------------------------*/
/*------------------------------------*\
    #Settings
\*------------------------------------*/
/*------------------------------------*\
    #Breakpoints

    The measurements presented here are for guidance only
    and should be updated to reflect the design/content needs.
\*------------------------------------*/
/*------------------------------------*\
    #Colors
\*------------------------------------*/
/**
Base colors that can be used when prototyping. Taken from http://clrs.cc/

1. We ideally avoid using pure white on pure black, because the contrast is
so great that it creates the illusion that text is vibrating on screen.
 */
/* 1 */
/* 1 */
/**
Theme colors.
 */
/**
Sass variables.
 */
/**
Social media colours that might be useful.
See: https://brandcolors.net/
 */
/*------------------------------------*\
    #Fonts
\*------------------------------------*/
@font-face {
  font-display: fallback;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/notosans-regular-webfont.woff2") format("woff2"); }

@font-face {
  font-display: fallback;
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/notosans-italic-webfont.woff2") format("woff2"); }

@font-face {
  font-display: fallback;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/notosans-bold-webfont.woff2") format("woff2"); }

@font-face {
  font-display: fallback;
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/notosans-bolditalic-webfont.woff2") format("woff2"); }

/*------------------------------------*\
    #Paths
\*------------------------------------*/
/*------------------------------------*\
    #Typesetting
\*------------------------------------*/
/**
Use https://www.cssfontstack.com/ and https://meowni.ca/font-style-matcher/ to pick
system fonts that are reasonably close to any web fonts needed for the project.

This improves performance, avoids Flash Of Invisible Text (FOIT) and minimises
Flash of Unstyled Content (FOUC) - see https://helenvholmes.com/writing/type-is-your-right/

Be sure to include fonts for both Mac OS and Windows. Use quote marks around
fonts with white space in their name.

When Font Face Observer has detected that the @font-face files are loaded, then we
can safely use the web fonts instead of the system fonts.
 */
/*------------------------------------*\
    #Functions
\*------------------------------------*/
/*------------------------------------*\
    #Maths functions
\*------------------------------------*/
/**
 #Random number
 http://xkcd.com/221/
 */
/**
 #Power function
 https://css-tricks.com/snippets/sass/power-function/
 */
/**
 #Square root function
 */
/*------------------------------------*\
    #CSS unit functions
\*------------------------------------*/
/**
 #em
 */
/**
 #rem
 */
/**
 #px
 */
/**
 #Return a number without a unit
 */
/**
 #Remove any unit present to return a unitless number
 */
/*------------------------------------*\
    #Mixins
\*------------------------------------*/
/*------------------------------------*\
    #Font sizes
\*------------------------------------*/
/*------------------------------------*\
    #Media query
\*------------------------------------*/
/*------------------------------------*\
    #Stack
\*------------------------------------*/
/**
This mixin allows us to add vertical spacing between a container's direct children,
much like the 'axiomatic owl' technique but limited to specific use cases.

By applying Flexbox to the parent container, we can use auto margin on a specific
child element. This way, we can choose to group elements inside the stack to the
top/bottom of the vertical space, which is useful for card-like components.

Use with a specific measure, or without for the default measure, e.g.

main {
	@include stack(4rem);
}

article {
	@include stack;
}
 */
/*------------------------------------*\
    #Base

    Normalize comes first for the cascade
\*------------------------------------*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0; }

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none; }

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none; }

/*------------------------------------*\
    #Animation
\*------------------------------------*/
/*
 * Respect the choices of users who do not want animations.
 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-play-state: paused !important;
    scroll-behavior: auto !important;
    transition: none !important; } }

/*------------------------------------*\
    #Background colours
\*------------------------------------*/
.bg--alert {
  background-color: #e93737;
  color: #000; }

.bg--success {
  background-color: #2ecc40;
  color: #000; }

.bg--warning {
  background-color: #f9dc4a;
  color: #000; }

/*------------------------------------*\
    #Quotes
\*------------------------------------*/
blockquote {
  font-size: 1.125rem;
  line-height: calc(27 / 18);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start; }
  blockquote > * + * {
    margin-top: 1rem; }
  blockquote > * {
    font-weight: bold; }
  blockquote cite {
    font-size: 1rem;
    font-style: normal;
    font-weight: normal; }

/*------------------------------------*\
    #Body
\*------------------------------------*/
html {
  height: 100%; }

/**
 Typographical styles for fonts are in 40-base/_typography.scss
 */
body {
  background-color: #fff;
  color: #111;
  min-height: 100%;
  overflow-x: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }

/**
Styles needed for a sticky footer
 */
.grid-wrap {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 100%;
      grid-template-columns: 100%;
  -ms-grid-rows: 1fr auto;
      grid-template-rows: 1fr auto;
  min-height: 100vh; }

/*------------------------------------*\
    #Box sizing
\*------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: inherit;
  margin: 0;
  overflow-wrap: break-word;
  padding: 0; }

/*------------------------------------*\
    #Buttons

    1. High contrast themes tend to eliminate background-color.
    With no border set, we need to apply a transparent outline to
    maintain the button shape. The negative outline-offset moves
    the outline inside the perimeter so it behaves like a border.
\*------------------------------------*/
button,
.button {
  background-color: #005797;
  border: solid 2px #005797;
  border-radius: 1.5rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  outline: 2px solid transparent;
  /* 1 */
  outline-offset: -2px;
  /* 1 */
  padding: 0.6875rem 1.5rem; }
  button:hover,
  .button:hover {
    background-color: #024488;
    border-color: #024488; }
  button:focus,
  .button:focus {
    color: #000;
    background-color: #f9dc4a;
    border-color: #000; }
  button:active,
  .button:active {
    color: #000; }

[dir="ltr"] button:not([type="submit"]) {
  text-align: left; }

[dir="rtl"] button:not([type="submit"]) {
  text-align: right; }

/**
Remove link styling from links styled as buttons.
 */
.button {
  display: block;
  text-decoration: none; }

/**
Remove link styling from actual buttons styled as buttons.
 */
button.button,
input[type="submit"].button {
  text-decoration: none; }

.button--wide {
  text-align: center;
  width: 100%; }

.button--alt {
  background-color: transparent;
  color: #005797; }
  .button--alt:hover {
    background-color: #cbe0fb;
    color: #024488; }
  .button--alt:focus {
    background-color: #f9dc4a;
    border-width: 3px;
    color: #000;
    padding: 0.625rem 1.4375rem; }

.button--ghost {
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
  color: #000;
  font-weight: normal;
  padding-left: 0;
  padding-right: 0; }
  .button--ghost:hover {
    background-color: transparent;
    border-color: transparent; }
  .button--ghost:focus {
    background-color: transparent;
    border-color: transparent;
    color: #000; }

.button[disabled],
.button.js-disabled {
  background-color: #bdbdbd;
  border-color: #bdbdbd;
  box-shadow: none;
  color: #303030;
  cursor: not-allowed; }
  .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active,
  .button.js-disabled:hover,
  .button.js-disabled:focus,
  .button.js-disabled:active {
    background-color: #bdbdbd;
    color: #303030;
    outline: 0; }

/**
Double specificity so links as buttons keep their styling even within
elements that would otherwise override it, without using !important
 */
.button--alert.button--alert {
  background-color: #e93737;
  color: #000; }
  .button--alert.button--alert:visited {
    background-color: #e93737;
    color: #000; }
  .button--alert.button--alert:hover, .button--alert.button--alert:focus, .button--alert.button--alert:active {
    background-color: #ee6565; }

.button--success.button--success {
  background-color: #2ecc40;
  color: #000; }
  .button--success.button--success:visited {
    background-color: #2ecc40;
    color: #000; }
  .button--success.button--success:hover, .button--success.button--success:focus, .button--success.button--success:active {
    background-color: #54d964; }

.button--warning.button--warning {
  background-color: #f9dc4a;
  color: #000; }
  .button--warning.button--warning:visited {
    background-color: #f9dc4a;
    color: #000; }
  .button--warning.button--warning:hover, .button--warning.button--warning:focus, .button--warning.button--warning:active {
    background-color: #fbe67b; }

/*------------------------------------*\
    #Focus
\*------------------------------------*/
:focus {
  /**
	Ideally we would specify the background-color here to cover all circumstances.
	Unfortunately, this does not work at all well for Internet Explorer, so we can't.
	 */
  outline: 2px solid transparent;
  outline-offset: -2px; }

/**
Where focus is moved to the target via JavaScript, it is
acceptable not to show a focus outline.
 */
main:focus,
#main:focus,
[tabindex="-1"]:focus {
  outline: none; }

/*------------------------------------*\
    #Forms
\*------------------------------------*/
/**
Start of resets for the fieldset element
https://thatemil.com/blog/2015/01/03/reset-your-fieldset/
 */
fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0.01em 0 0 0; }

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

/**
End of resets for the fieldset element
 */
form > * + *,
fieldset > * + * {
  margin-top: 0.9375rem; }

/**
Group inputs to line up side-by-side
 */
.input-group {
  display: -ms-flexbox;
  display: flex; }

.input-group > * + * {
  margin-left: 1.875rem; }

[dir="rtl"] .input-group > * + * {
  margin-left: 0;
  margin-right: 1.875rem; }

label,
.faux-label {
  display: block;
  margin-bottom: 0.4375rem; }

.field {
  max-width: 41.25rem; }

.field-legend {
  font-weight: bold; }

.field-label,
.field-hint,
.field-error-msg,
.faux-label {
  display: block; }

.field-hint {
  font-size: 0.9375rem;
  line-height: calc(22.5 / 15);
  max-width: 41.25rem; }

textarea,
[type=date],
[type=email],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 2px solid;
  border-radius: 0;
  line-height: 1.25;
  padding: 0.3125rem;
  width: 100%; }
  textarea:focus,
  [type=date]:focus,
  [type=email]:focus,
  [type=number]:focus,
  [type=password]:focus,
  [type=search]:focus,
  [type=tel]:focus,
  [type=text]:focus,
  [type=time]:focus,
  [type=url]:focus {
    box-shadow: inset 0 0 0 2px;
    outline: solid 3px #f9dc4a;
    outline-offset: 0; }

select,
[type=date],
[type=email],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url] {
  height: 2.9375rem; }

[type="file"] {
  border: 2px solid transparent;
  border-radius: 0;
  line-height: 1.25;
  padding-bottom: 0.3125rem;
  padding-top: 0.3125rem; }
  [type="file"]:focus {
    border-color: currentColor;
    box-shadow: inset 0 0 0 4px;
    margin-left: -0.3125rem;
    margin-right: -0.3125rem;
    outline: 3px solid #f9dc4a;
    padding-left: 0.3125rem;
    padding-right: 0.3125rem; }

/**
Select
 */
select {
  background-color: inherit;
  border: 2px solid;
  border-radius: 0;
  line-height: 1.25;
  padding: 0.3125rem;
  -webkit-padding-end: 1em;
          padding-inline-end: 1em;
  width: 100%; }
  select:focus {
    box-shadow: inset 0 0 0 2px;
    outline: solid 3px #f9dc4a;
    outline-offset: 0; }

/**
Textarea
 */
textarea {
  height: 10em;
  resize: vertical; }

/**
Memorable dates (e.g. date of birth)
 */
.memorable-date {
  display: inline-block;
  margin-top: 0; }

.memorable-date + .memorable-date {
  margin-left: 1rem; }

[dir="rtl"] .memorable-date + .memorable-date {
  margin-left: auto;
  margin-right: 1rem; }

/**
Radio/checkbox inputs
 */
.radio-item,
.checkbox-item {
  clear: left;
  float: left;
  padding-left: 2.125rem;
  position: relative; }
  .radio-item::after,
  .checkbox-item::after {
    clear: both;
    content: '';
    display: block; }

[dir="rtl"] .radio-item,
[dir="rtl"] .checkbox-item {
  clear: right;
  float: right;
  padding-left: 0;
  padding-right: 2.125rem; }

.radio-item input,
.checkbox-item input {
  cursor: pointer;
  height: 2.75rem;
  left: -0.625rem;
  margin: 0;
  opacity: 0;
  position: absolute;
  top: -0.125rem;
  width: 2.75rem;
  z-index: 1; }

[dir="rtl"] .radio-item input,
[dir="rtl"] .checkbox-item input {
  left: auto;
  right: -0.625rem; }

.radio-item label,
.checkbox-item label {
  cursor: pointer;
  display: inline-block;
  margin-bottom: 0;
  margin-top: -0.125rem;
  padding: 0.6875rem 0.9375rem 0.625rem 0.0625rem;
  -ms-touch-action: manipulation;
      touch-action: manipulation; }
  .radio-item label::before, .radio-item label::after,
  .checkbox-item label::before,
  .checkbox-item label::after {
    content: '';
    position: absolute; }
  .radio-item label::before,
  .checkbox-item label::before {
    background: transparent;
    border: 2px solid;
    height: 1.5rem;
    left: 0;
    top: 0.5rem;
    width: 1.5rem; }

[dir="rtl"] .radio-item label,
[dir="rtl"] .checkbox-item label {
  padding: 0.6875rem 0.0625rem 0.625rem 0.9375rem; }
  [dir="rtl"] .radio-item label::before,
  [dir="rtl"] .checkbox-item label::before {
    left: auto;
    right: 0; }

.radio-item label::before, .radio-item label::after {
  border-radius: 50%; }

.radio-item label::after {
  background: currentColor;
  border: 5px solid;
  height: 0;
  left: 0.4375rem;
  opacity: 0;
  top: 0.9375rem;
  width: 0; }

[dir="rtl"] .radio-item label::after {
  left: auto;
  right: 0.4375rem; }

.checkbox-item label::after {
  background: transparent;
  border: solid;
  border-top-color: transparent;
  border-width: 0 0 3px 3px;
  height: 0.40625rem;
  left: 0.375rem;
  opacity: 0;
  top: 0.9375rem;
  transform: rotate(-45deg);
  width: 0.75rem; }

[dir="rtl"] .checkbox-item label::after {
  auto: 0.375rem;
  right: 0.375rem; }

.radio-item:hover input:not(:disabled) + label::before,
.checkbox-item:hover input:not(:disabled) + label::before {
  box-shadow: 0 0 0 8px #005797; }

.radio-item input:focus + label::before,
.checkbox-item input:focus + label::before {
  border-width: 4px;
  box-shadow: 0 0 0 4px #f9dc4a; }

.radio-item:hover input:focus + label::before,
.checkbox-item:hover input:focus + label::before {
  box-shadow: 0 0 0 4px #f9dc4a, 0 0 0 10px #005797; }

.radio-item input:checked + label::after,
.checkbox-item input:checked + label::after {
  opacity: 1; }

[type="radio"]:disabled,
[type="radio"]:disabled + label [type="checkbox"]:disabled,
[type="checkbox"]:disabled + label {
  cursor: default; }

[type="radio"]:disabled + label,
[type="checkbox"]:disabled + label {
  opacity: .5; }

/**
Segmented options. Can use either radio or checkbox inputs. The purpose is to
show all available options outright, rather than hide them behind a <select>
 */
.segmented-group-wrapper {
  max-width: none; }

.segmented-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  margin-top: 0; }
  .segmented-group > div {
    -ms-flex: 1 1 33.333%;
        flex: 1 1 33.333%;
    max-width: 100%;
    min-width: 9.6875rem;
    position: relative; }
  .segmented-group label {
    border: 2px solid;
    cursor: pointer;
    display: block;
    margin: 0.125rem; }
    .segmented-group label:before, .segmented-group label:after {
      content: '';
      position: absolute; }
    .segmented-group label::before {
      background: transparent;
      height: 1.5rem;
      right: 0.625rem;
      top: 0.625rem;
      width: 1.5rem; }
    .segmented-group label::after {
      background: transparent;
      border: solid;
      border-top-color: transparent;
      border-width: 0 0 3px 3px;
      height: 0.40625rem;
      right: 1rem;
      opacity: 0;
      top: 1.0625rem;
      transform: rotate(-45deg);
      width: 0.75rem; }
  .segmented-group input {
    cursor: pointer;
    height: 2.75rem;
    margin: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 2.75rem;
    z-index: 1; }
  .segmented-group .segmented-label {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: start;
        justify-content: flex-start;
    display: block;
    padding: 0.625rem;
    padding-right: 2.75rem; }
    .segmented-group .segmented-label > * + * {
      margin-top: 0.5em; }
    .segmented-group .segmented-label span {
      display: block; }
    .segmented-group .segmented-label span:first-of-type {
      font-weight: bold; }
  .segmented-group > div:hover label {
    background-color: #cbe0fb; }
  .segmented-group input:focus + label {
    border-color: #f9dc4a;
    box-shadow: inset 0 0 0 4px;
    outline: solid 2px #f9dc4a; }
  .segmented-group input:checked + label::after {
    opacity: 1; }

[dir="rtl"] .segmented-group label::before {
  left: 0.625rem;
  right: auto; }

[dir="rtl"] .segmented-group label::after {
  left: 1rem;
  right: auto; }

[dir="rtl"] .segmented-group input {
  left: 0;
  right: auto; }

[dir="rtl"] .segmented-group .segmented-label {
  padding: 0.625rem;
  padding-left: 2.75rem; }

/**
Fixed input widths
 */
.input-width-30 {
  max-width: 59ex; }

.input-width-20 {
  max-width: 41ex; }

.input-width-10 {
  max-width: 23ex; }

.input-width-5 {
  max-width: 10.8ex; }

.input-width-4 {
  max-width: 9ex; }

.input-width-3 {
  max-width: 7.2ex; }

.input-width-2 {
  max-width: 5.4ex; }

/**
Error styles
 */
.error-summary.error-summary {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start;
  border-color: #a82615;
  border-width: 0.3125rem; }
  .error-summary.error-summary > * + * {
    margin-top: 1rem; }
  .error-summary.error-summary a {
    color: #a82615;
    display: inline-block;
    font-weight: bold;
    padding-bottom: 0.625rem;
    padding-top: 0.625rem; }
    .error-summary.error-summary a:hover, .error-summary.error-summary a:visited {
      color: #a82615; }
    .error-summary.error-summary a:focus {
      color: #000; }

.field--error {
  border-left: solid 0.3125rem #a82615;
  padding-left: 0.9375rem; }
  .field--error input:not([type="file"]),
  .field--error textarea:not(:focus),
  .field--error .segmented-group label {
    border-color: #a82615; }
  .field--error input:focus,
  .field--error textarea:focus {
    border-color: inherit; }

[dir="rtl"] .field--error {
  border-left: none;
  border-right: solid 0.3125rem #a82615;
  padding-left: 0;
  padding-right: 0.9375rem; }

.field-error-msg {
  color: #a82615;
  font-weight: bold;
  margin-top: 0.9375rem; }

/*------------------------------------*\
    #Hide and show items inclusively

    See https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
\*------------------------------------*/
/*
 * Hide from everybody and remove from the document flow, using the hidden
 * attribute.
 *
 * Use if a component should remain hidden regardless of CSS being
 * available or not (the style below provides support for legacy browsers).
 */
[hidden] {
  display: none !important; }

/*
 * Hide from everybody and remove from the document flow, using the %hidden
 * placeholder (extend the placeholder with Sass to avoid it appearing
 * repeatedly in your markup).
 *
 * Use if a component requires a basic show and hide interaction, and the
 * content should become available were CSS to fail.
 */
/*
 * Hide from everybody while maintaining layout, using the %invisible
 * placeholder (extend the placeholder with Sass to avoid it appearing
 * repeatedly in your markup).
 *
 * Use if a more complex transition is required, like when transitioning an
 * off-screen navigation into the viewport. Best paired with other CSS
 * properties that negate its position in the DOM e.g. `position: absolute;`
 */
/*
 * Hide visually only - remains available to Assistive Technology -
 * using the %visually-hidden placeholder (extend the placeholder with
 * Sass to avoid it appearing repeatedly in your markup).
 */
.visuallyhidden:not(:focus):not(:active), .skip-link:not(:focus):not(:active), .global-header [role="status"] {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px; }

/*
 *The :not portions of the following selector allow a means for any
 * focusable element to become visible when focused/active by a user.
 */
/*
 * Make sure that the siblings of hidden components do not cause the hidden
 * component to take up any vertical space.
 */
[hidden] + *,
.hidden + *,
.visuallyhidden + *,
.skip-link + * {
  margin-top: 0 !important; }

br {
  margin-top: 0; }

/*
 * Restore an element that has been visually hidden, using the %visually-hidden
 * placeholder (extend the placeholder with Sass to avoid it appearing
 * repeatedly in your markup).
 */
/*------------------------------------*\
    #HTML elements
\*------------------------------------*/
abbr {
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em; }

dfn {
  font-style: normal;
  font-weight: 600; }

b,
strong,
.bold {
  font-weight: 600; }

em,
i {
  font-style: italic; }

small,
.small,
.small-caps {
  font-size: 0.875rem;
  line-height: calc(20 / 14); }

.small-caps {
  text-shadow: 0 0 0 #111;
  text-transform: uppercase; }

code,
samp,
pre {
  font-family: Monaco, "Lucida Console", monospace;
  font-size: .9em;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  orphans: 3;
  padding-left: 0.1875rem;
  padding-right: 0.1875rem;
  page-break-before: avoid;
  text-transform: none;
  widows: 3; }

/*------------------------------------*\
    #Icons
\*------------------------------------*/
svg {
  fill: currentColor;
  height: auto;
  width: 100%; }

/**
SVG icons are sized relative to font size, thanks to the em unit.

1. When the cap unit is supported this will make it easier to match icon
size to text size.
 */
.icon {
  height: 1em;
  height: 1cap;
  /* 1 */
  vertical-align: baseline;
  width: 1em;
  width: 1cap;
  /* 1 */ }

.icon--larger {
  height: 1.875rem;
  width: 1.875rem; }

.icon--beta {
  height: 2.4375rem;
  width: 3.8125rem; }

/**
Use the `with-icon` class on the SVG's parent, if there
is a need to specify the spacing between text and icon.
Pay attention to whether the icon is before the text or after.

2. Logical property creates appropriate spacing irrespective of text direction
 */
.with-icon--before,
.with-icon--after,
.with-icon--larger {
  -ms-flex-align: baseline;
      align-items: baseline;
  display: -ms-inline-flexbox;
  display: inline-flex; }

.with-icon--larger {
  -ms-flex-align: center;
      align-items: center; }

[dir="ltr"] .with-icon--before .icon {
  margin-right: 0.5rem; }
  @supports ((-webkit-margin-end: 1em) or (margin-inline-end: 1em)) {
    [dir="ltr"] .with-icon--before .icon {
      margin-right: 0;
      -webkit-margin-end: 0.5rem;
              margin-inline-end: 0.5rem;
      /* 2 */ } }

[dir="ltr"] .with-icon--after .icon {
  margin-left: 0.5rem; }
  @supports ((-webkit-margin-start: 1em) or (margin-inline-start: 1em)) {
    [dir="ltr"] .with-icon--after .icon {
      margin-left: 0;
      -webkit-margin-start: 0.5rem;
              margin-inline-start: 0.5rem;
      /* 2 */ } }

[dir="rtl"] .with-icon--before .icon {
  margin-left: 0.5rem; }
  @supports ((-webkit-margin-start: 1em) or (margin-inline-start: 1em)) {
    [dir="rtl"] .with-icon--before .icon {
      margin-left: 0;
      -webkit-margin-end: 0.5rem;
              margin-inline-end: 0.5rem;
      /* 2 */ } }

[dir="rtl"] .with-icon--after .icon {
  margin-right: 0.5rem; }
  @supports ((-webkit-margin-start: 1em) or (margin-inline-start: 1em)) {
    [dir="rtl"] .with-icon--after .icon {
      margin-right: 0;
      -webkit-margin-start: 0.5rem;
              margin-inline-start: 0.5rem;
      /* 2 */ } }

/*------------------------------------*\
    #Images
\*------------------------------------*/
img {
  height: auto;
  width: 100%; }

.avatar {
  border-radius: 50%;
  height: 6.25rem;
  overflow: hidden;
  position: relative;
  width: 6.25rem; }
  .avatar img {
    height: auto;
    margin-top: -0.625rem;
    width: 100%; }

.avatar--med {
  height: 3.125rem;
  width: 3.125rem; }
  .avatar--med img {
    margin-top: 0; }

.avatar--small {
  height: 1.875rem;
  width: 1.875rem; }
  .avatar--small img {
    margin-top: 0; }

/*------------------------------------*\
    #Links
\*------------------------------------*/
/**
Default global link styles that do not interfere with component link styles
- see https://alexcarpenter.me/screencasts/2019/02/global-link-styles/

1. Don't rely on colour alone for styling links - see
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F73

2. Remove the outline on focused links when they are also active/hovered.
 */
a:not([class]),
a.with-icon--before,
a.with-icon--after {
  border: 0;
  color: #005797;
  cursor: pointer;
  padding-left: 0.125rem;
  padding-right: 0.125rem;
  text-decoration: underline;
  /* 1 */
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em; }
  a:not([class]):visited,
  a.with-icon--before:visited,
  a.with-icon--after:visited {
    color: #920ba6; }
    a:not([class]):visited svg,
    a.with-icon--before:visited svg,
    a.with-icon--after:visited svg {
      fill: #920ba6; }
  a:not([class]):hover,
  a.with-icon--before:hover,
  a.with-icon--after:hover {
    color: #024488;
    outline-width: 0;
    /* 2 */ }
    a:not([class]):hover svg,
    a.with-icon--before:hover svg,
    a.with-icon--after:hover svg {
      fill: #024488; }
  a:not([class]):focus,
  a.with-icon--before:focus,
  a.with-icon--after:focus {
    background-color: #f9dc4a;
    background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a);
    color: #000;
    text-decoration: none; }
    a:not([class]):focus svg,
    a.with-icon--before:focus svg,
    a.with-icon--after:focus svg {
      fill: #000; }
  a:not([class]):active,
  a.with-icon--before:active,
  a.with-icon--after:active {
    color: #000;
    outline-width: 0;
    /* 2 */ }
    a:not([class]):active svg,
    a.with-icon--before:active svg,
    a.with-icon--after:active svg {
      fill: #000; }

/*------------------------------------*\
    #Lists
\*------------------------------------*/
/**
Remove default list styles on lists with a class name (e.g. 'nav-list')
 */
ol[class],
ul[class] {
  list-style: none;
  padding: 0; }

ul:not([class]) > * + *,
ul:not([class]) li ul,
ul:not([class]) li ol,
ol:not([class]) > * + *,
ol:not([class]) li ul,
ol:not([class]) li ol {
  -webkit-margin-before: 0.75em;
          margin-block-start: 0.75em; }

ul:not([class]) {
  -webkit-padding-start: 2.4em;
          padding-inline-start: 2.4em; }

ol:not([class]) {
  counter-reset: count;
  list-style-type: none;
  -webkit-padding-start: 1.25em;
          padding-inline-start: 1.25em; }
  ol:not([class]) > li {
    counter-increment: count; }
    ol:not([class]) > li::before {
      content: counters(count, ".") " ";
      -webkit-padding-end: 0.5em;
              padding-inline-end: 0.5em; }

.clean-list li {
  display: block; }

/**
Description lists / Definition lists
 */
dl dt {
  font-weight: bold; }

dl dd + dt {
  -webkit-margin-before: 0.5em;
          margin-block-start: 0.5em; }

dl dt + dd,
dl dd + dd {
  -webkit-margin-before: 0.25em;
          margin-block-start: 0.25em; }

@supports (grid-row-start: auto) {
  dl.grid {
    column-gap: 1rem;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 4fr;
        grid-template-columns: 1fr 4fr;
    -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
    row-gap: 1rem; }
    dl.grid dd + dt,
    dl.grid dt + dd,
    dl.grid dd + dd {
      -webkit-margin-before: 0;
              margin-block-start: 0; }
    dl.grid dt {
      -ms-grid-column: 1;
          grid-column-start: 1;
      grid-column-end: 2; }
    dl.grid dd {
      -ms-grid-column: 2;
          grid-column-start: 2;
      grid-column-end: 3; } }

/*------------------------------------*\
    #Skip link
\*------------------------------------*/
.skip-link {
  background-color: #f9dc4a;
  border: solid 3px #000;
  color: #000;
  padding: 0.625em 0.9375em;
  text-decoration: none; }
  .skip-link:active, .skip-link:focus {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 999; }
    .skip-link:active span, .skip-link:focus span {
      box-shadow: 0 -1px 0 0 inset; }

/*------------------------------------*\
    #Details and summary elements
\*------------------------------------*/
summary {
  color: #005797;
  cursor: pointer;
  display: inline-block;
  padding-left: 1.5625rem;
  position: relative; }
  summary::before {
    border-color: transparent;
    border-left-color: inherit;
    border-style: solid;
    border-width: 7px 0 7px 12.124px;
    bottom: 0;
    -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
            clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    content: '';
    display: block;
    height: 0;
    left: 0;
    margin: auto;
    position: absolute;
    top: -0.0625rem;
    width: 0; }
  summary:hover {
    color: #024488; }
  summary span {
    display: inline-block;
    padding-bottom: 0.625rem;
    padding-top: 0.625rem;
    text-decoration: underline;
    /* 1 */
    text-decoration-skip-ink: auto;
    text-underline-offset: 0.25em; }
  summary:focus span {
    background-color: #f9dc4a;
    background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a);
    color: #000;
    text-decoration: none; }

[dir="rtl"] summary {
  padding-left: 0;
  padding-right: 1.5625rem; }
  [dir="rtl"] summary::before {
    left: auto;
    right: 0;
    transform: rotate(180deg); }

/*------------------------------------*\
    #Social links
\*------------------------------------*/
.social-links__item {
  height: 3rem;
  padding: 0.875rem;
  width: 3rem; }
  .social-links__item .icon {
    height: 1.25rem;
    width: 1.25rem; }
  .social-links__item:hover .icon {
    color: #024488; }

/*------------------------------------*\
    #Tables

    1. Logical property allows text-direction to change with 'dir'
\*------------------------------------*/
table {
  border: 1px solid #bdbdbd;
  border-collapse: collapse;
  width: 100%; }

tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05); }

th,
td,
table caption {
  padding: 0.75rem;
  text-align: left;
  text-align: start;
  /* 1 */ }

[dir="rtl"] th,
[dir="rtl"] td,
[dir="rtl"] table caption {
  text-align: right;
  text-align: start;
  /* 1 */ }

th {
  vertical-align: bottom; }
  th[scope="col"] {
    background-color: #024488;
    color: #fff; }

td {
  vertical-align: text-top; }

/**
Responsive tables:
https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html
 */
@media screen {
  .table-wrap {
    border: 1px solid #bdbdbd;
    max-width: 100% !important; }
    .table-wrap[role][aria-labelledby][tabindex] {
      overflow: auto; }
    .table-wrap table {
      border: 0; }
    .table-wrap:focus {
      border-color: #000;
      box-shadow: inset 0 0 0 4px;
      outline: 3px solid #f9dc4a; } }

/*------------------------------------*\
    #Typography
\*------------------------------------*/
body {
  font-family: "Noto Sans", "Trebuchet MS", Geneva, sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  
    color: #111;
    -moz-osx-font-smoothing: grayscale;
    }

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin: 0;
    margin-block-end: 0px;
    }

h1 {
    font-size: 2.625rem;
    line-height: calc(58.8 / 42);
    }

h1 {
    margin: 0.67em 0;
    margin-block-end: 1em;
  }

.txt-mercury {
  font-size: 2.125rem;
  line-height: calc(43 / 34); }
  @media screen and (min-width: 48em) {
    .txt-mercury {
      font-size: 3.75rem;
      line-height: calc(72 / 60); } }

h1,
.txt-venus {
  font-size: 2.0625rem;
  line-height: calc(43 / 33); }
  @media screen and (min-width: 48em) {
    h1,
    .txt-venus {
      font-size: 2.625rem;
      line-height: calc(58.8 / 42); } }

h2,
.txt-earth {
  font-size: 1.6875rem;
  line-height: calc(33.6 / 27); }
  @media screen and (min-width: 48em) {
    h2,
    .txt-earth {
      font-size: 2.125rem;
      line-height: calc(43 / 34); } }

h3,
.lead,
.txt-mars {
  font-size: 1.5rem;
  line-height: calc(33.6 / 24); }

h4,
.txt-jupiter {
  font-size: 1.25rem;
  line-height: calc(32 / 20); }

h5,
.txt-saturn {
  font-size: 1.125rem;
  line-height: calc(27 / 18); }

h6 {
  font-size: 1rem; }

.txt-pluto {
  font-size: 0.9375rem;
  line-height: calc(22.5 / 15); }

.txt-eris {
  font-size: 0.875rem;
  line-height: calc(20 / 14); }

/**
When Font Face Observer has detected that the @font-face files are loaded, then we
can safely use the web fonts instead of the system fonts.
 */
.fonts-loaded body {
  font-family: "Noto Sans", "Trebuchet MS", Geneva, sans-serif; }

/*------------------------------------*\
    #Print styles

    We aim to:
    - Hide everything that is irrelevant for print
    - Make everything black and white and easy to read

    It is perfectly acceptable to use !important for print styles
    as they should override everything else.

    IMPORTANT: Anything that uses flexbox or grid on screen
    and needs to appear in print must be refactored to use
    block or inline block layout. Otherwise it will not print.
    You can check this using the print preview in Chrome/Firefox.
\*------------------------------------*/
@media print {
  *,
  *:before,
  *:after,
  p:first-line,
  div:first-line,
  blockquote:first-line,
  li:first-line {
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
    overflow: visible !important;
    position: static !important;
    text-shadow: none !important; }
  body,
  .lazy,
  .lazyload {
    display: block !important; }
  .js-object-fit,
  .responsive-wrapper,
  picture {
    padding: 0 !important; }
    .js-object-fit img,
    .responsive-wrapper img,
    picture img {
      display: block !important;
      height: auto !important;
      width: 100% !important; }
  li,
  .js-object-fit,
  .responsive-wrapper,
  picture,
  figure,
  img {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid; }
  .l-sidebar > div {
    display: block !important; }
  .js-carousel > * {
    display: block !important; }
  .js-carousel ul.carousel-controls {
    display: none !important; }
  .js-carousel ul.clean-list li + li {
    margin-top: 1cm !important; }
  .component--collapsibles [hidden] {
    display: block !important; }
  .skip-link,
  #cookie-banner,
  nav,
  .component--video,
  .global-footer {
    display: none !important; } }

/*------------------------------------*\
    #Layouts
\*------------------------------------*/
/*------------------------------------*\
    #Box layout primitive

    From https://absolutely.every-layout.dev/layouts/box/

    `.l-box` should have borders and/or padding on all sides, or
    none at all. Otherwise it's not a box, but something more specific.
\*------------------------------------*/
.l-box {
  border: 1px solid;
  display: block;
  padding: 1.5rem; }

.l-box--no-padding {
  padding: 0; }

/**
1. High contrast themes tend to eliminate background-color. If there is no
border set on the box, we need to apply a transparent outline to maintain
the box shape. The negative outline-offset moves the outline inside the
perimeter so it behaves like a border and doesn't add to the overall size.
 */
.l-box--no-border {
  border: none;
  outline: 1px solid transparent;
  /* 1 */
  outline-offset: -1px;
  /* 1 */ }

/*------------------------------------*\
    #Center layout primitive

    From https://absolutely.every-layout.dev/layouts/center/

    `.l-center` creates a horizontally centered container.
\*------------------------------------*/
/**
1. We use left and right padding to add some minimum space between the
contents of `.l-center` and the edges of the parent element or viewport.
To avoid making the content narrower than intended, we add an exception
to our global box-sizing rule.
 */
.l-center.l-center {
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 70rem;
  padding-left: 5vw;
  padding-right: 5vw; }

/*------------------------------------*\
    #Cluster layout primitive

    From https://absolutely.every-layout.dev/layouts/cluster/

    `.l-cluster` suits any groups of elements that differ in length and
    are liable to wrap. Use the Cluster to align any groups of horizontally
    laid out elements to the left or right, or in the center, with even
    spacing between elements.

    The size variable used below defines the desired spacing between
    elements inside `.l-cluster` (currently 1rem). Sizes are defined
    in /10-settings/sizes
\*------------------------------------*/
/**
Suppress horizontal scrolling caused by the negative margin
in some circumstances.
 */
.l-cluster {
  overflow: hidden; }

/**
We use flexbox to configure the elements into clusters without creating
white space. We can control how we align items within the cluster,
by using 'align-items` and `justify-content`.
 */
.l-cluster > * {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -0.625rem; }

/**
We apply an even, symmetrical margin to the elements that we wish to space
out, but halve it to to account for 'doubling up' at the edges.
 */
.l-cluster.l-cluster > * > * {
  display: inline-block;
  margin: 0.625rem; }

/*------------------------------------*\
    #Frame layout primitive

    From https://absolutely.every-layout.dev/layouts/frame/

    `.l-frame` is most useful for cropping media (images
    and video) to a specific aspect ratio.

    It is not recommended to apply the `.l-frame` class to the
    <figure> element, as it will interfere with the <figcaption>.
    Instead, place it on <picture> or a <div> inside of <figure>.
\*------------------------------------*/
.l-frame {
  display: block;
  position: relative; }

.l-frame > * {
  -ms-flex-align: center;
      align-items: center;
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0; }

.l-frame > iframe,
.l-frame > img,
.l-frame > video {
  height: 100%;
  object-fit: cover;
  width: 100%; }

/* Common aspect ratios */
.l-frame--16-9 {
  padding-bottom: 56.25%; }

.l-frame--3-2 {
  padding-bottom: 66.67%; }

.l-frame--4-3 {
  padding-bottom: 75%; }

.l-frame--square {
  padding-bottom: 100%; }

/*------------------------------------*\
    #Sidebar layout primitive

    From https://absolutely.every-layout.dev/layouts/sidebar/

    `.l-sidebar` creates a container for a larger panel next to
    a smaller - sidebar - panel.

    When there is enough horizontal space for them to sit alongside
    each other, they do so. Otherwise they stack vertically. The
    point at which this happens is determined by setting a flex-basis
    on the sidebar panel and a min-width on the other panel.

    N.B: because this layout uses Flexbox, we can use the `order`
    property on either `.not-sidebar` or `.sidebar` (depending upon
    the source order of the HTML) to determine whether the sidebar
    sits on the left or right side.
\*------------------------------------*/
/**
Suppress horizontal scrolling caused by the negative margin
in some circumstances.
 */
.l-sidebar {
  overflow: hidden; }

/**
We target the intermediary wrapper and give it a negative margin
to create a gutter between the `.sidebar` and `.not-sidebar`.
 */
.l-sidebar > * {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -0.75rem;
  /* 1 */ }

/**
We apply an even, symmetrical margin to `.sidebar` and `.not-sidebar`,
but halve it to to account for 'doubling up' at the edges.
 */
.l-sidebar > * > * {
  margin: 0.75rem; }

/**
Flex-basis determines the ideal width of the `.sidebar`. This can be
omitted to let the contents of `.sidebar` determine the width of
`.sidebar` (e.g. an image with a specified max-width).
 */
.l-sidebar .sidebar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-preferred-size: 20rem;
      flex-basis: 20rem;
  -ms-flex-positive: 1;
      flex-grow: 1; }
  .l-sidebar .sidebar > * + * {
    margin-top: 1em; }

/**
Min-width determines the point at which `.sidebar` and `.not-sidebar`
will sit side-by-side rather than vertically. This negates the use of
a viewport media query.
 */
.l-sidebar .not-sidebar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -ms-flex-positive: 999;
      flex-grow: 999;
  min-width: calc(55% - 1.5rem); }
  .l-sidebar .not-sidebar > * + * {
    margin-top: 1em; }

.l-sidebar--expanded {
  width: 100%; }

.l-sidebar .sidebar.sidebar--compact {
  -ms-flex-preferred-size: 11.25rem;
      flex-basis: 11.25rem; }

/*------------------------------------*\
    #Switcher layout primitive

    Uses this to switch between vertical and horizontal layouts:
    https://www.freecodecamp.org/news/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848/

    `.l-switcher` switches a Flexbox context between a horizontal and a
    vertical layout at a given, CONTAINER-BASED breakpoint, rather than
    using viewport media queries.

    The child elements in the horizontal configuration will be of equal
	width.

	To apply gutter spacing, apply padding to the flex items and an
    equivalent negative margin to the flex container. This will double up,
    so use half the intended value.

\*------------------------------------*/
.l-switcher {
  overflow: hidden; }

.l-switcher > * {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap; }

/**
1. Determines the item width in the single column, vertical configuration

2. Determines how many items will be in a row in the horizontal configuration

3. The 690 value matches the desired breakpoint value. The 100% corresponds to
the width of the columns' parent container. This calculation will create a
value that's either bigger than the max-width or smaller than the min-width,
so that either of these properties is applied instead.
 */
.l-switcher > * > * {
  max-width: 100%;
  /* 1 */
  min-width: 50%;
  /* 2 */
  width: calc(690px * 690 - 100% * 690);
  /* 3 */ }

/*------------------------------------*\
    #Core components
\*------------------------------------*/
/*------------------------------------*\
    #Global header core
\*------------------------------------*/
.no-js [data-trigger="account-menu"],
.no-js .account-menu {
  display: none; }

.global-header {
  background-color: #fff; }

.global-header .banner {
  background-color: #cbe0fb;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem; }

.global-header .banner__inner {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex; }
  .global-header .banner__inner .icon--beta {
    -ms-flex: none;
        flex: none;
    width: 3.8125rem; }
  .global-header .banner__inner p {
    font-size: 0.875rem;
    line-height: calc(20 / 14); }
  .global-header .banner__inner a {
    color: #024488; }
    .global-header .banner__inner a:focus {
      color: #000; }

[dir="ltr"] .banner__inner p {
  margin-left: 0.625rem; }

[dir="rtl"] .banner__inner p {
  margin-right: 0.625rem; }

#lang-nav {
  background-color: #f8f8fb; }
  #lang-nav .l-cluster > * {
    -ms-flex-pack: end;
        justify-content: flex-end;
    margin: 0 -0.625rem; }
  #lang-nav .l-cluster.l-cluster > * > * {
    margin: 0 0.625rem; }
  #lang-nav a {
    font-size: 0.875rem;
    line-height: calc(20 / 14);
    color: #111;
    display: block;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem; }

/*------------------------------------*\
    #Logo
\*------------------------------------*/
.logo {
  display: block;
  height: 2.75rem;
  position: relative;
  width: 4.125rem; }
  @media screen and (min-width: 64em) {
    .logo {
      height: 3.25rem;
      width: 4.875rem; } }

/*------------------------------------*\
    #Navigation core
\*------------------------------------*/
#global-nav svg {
  pointer-events: none; }

[data-trigger="mobile-nav"] {
  display: none; }

#global-nav {
  border-bottom: solid 1px #bdbdbd;
  display: block;
  padding-bottom: 1.125rem;
  padding-top: 1.125rem; }
  @media screen and (min-width: 70em) {
    #global-nav {
      padding-bottom: 0;
      padding-top: 1.25rem; } }

.global-nav__inner {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media screen and (min-width: 70em) {
    .global-nav__inner {
      -ms-flex-align: end;
          align-items: flex-end;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      position: relative; } }

.global-nav__inner > ul {
  background-color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-bottom: 2.8125rem;
  width: 100%; }
  @media screen and (min-width: 70em) {
    .global-nav__inner > ul {
      -ms-flex-preferred-size: auto;
          flex-basis: auto;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      padding-bottom: 0; } }

@media screen and (min-width: 70em) {
  li.top-nav-item + li.top-nav-item {
    -webkit-margin-start: 0.25rem;
            margin-inline-start: 0.25rem; } }

@media screen and (min-width: 70em) {
  .global-nav__inner > ul > li:last-child {
    -webkit-margin-start: auto;
            margin-inline-start: auto; } }

.global-nav__inner .top-nav-item {
  border-bottom: solid 1px #bdbdbd;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%; }
  @media screen and (min-width: 70em) {
    .global-nav__inner .top-nav-item {
      border-bottom: none;
      -ms-flex-preferred-size: auto;
          flex-basis: auto; } }

.nav-link {
  color: #111;
  display: block;
  padding: 0.625rem 0;
  position: relative;
  text-decoration: none; }
  @media screen and (min-width: 70em) {
    .nav-link {
      display: inline-block; } }

.global-nav__inner .top-nav-item > .nav-link {
  font-weight: 600; }

@media screen and (min-width: 70em) {
  .logo-link {
    border-bottom: solid 3px transparent;
    -webkit-margin-end: 1.5625rem;
            margin-inline-end: 1.5625rem;
    padding-bottom: 0.3125rem; }
    .logo-link:hover, .logo-link:focus {
      border-bottom-color: #0079b8;
      outline: none; } }

.icon-link {
  -ms-flex-align: center;
      align-items: center;
  color: #111;
  display: -ms-flexbox;
  display: flex;
  padding: 0.875rem 0;
  text-decoration: none !important; }
  @media screen and (min-width: 70em) {
    .icon-link {
      display: -ms-inline-flexbox;
      display: inline-flex;
      -ms-flex-pack: center;
          justify-content: center;
      height: 100%;
      min-width: 2.75rem; } }
  .icon-link:visited, .icon-link:hover {
    color: #111 !important; }
  .icon-link:focus {
    background-color: transparent !important;
    background-image: none !important; }

.account-login {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  font-size: 0.875rem !important; }
  @media screen and (min-width: 70em) {
    .account-login {
      -ms-flex-preferred-size: auto;
          flex-basis: auto;
      padding-bottom: 0.625rem;
      padding-top: 0.625rem; } }
  .account-login .icon {
    height: 1.5rem;
    width: 1.5rem; }

@media screen and (min-width: 70em) {
  .global-nav__inner .top-nav-item > a {
    border-bottom: solid 3px transparent;
    font-size: 1rem;
    padding: 0.625rem 0.3125rem 0.4375rem;
    white-space: nowrap; }
    .global-nav__inner .top-nav-item > a:hover, .global-nav__inner .top-nav-item > a:focus {
      border-bottom-color: #0079b8;
      outline: none; } }

.global-nav__inner .nav__submenu {
  display: none; }

/*------------------------------------*\
    #Breadcrumbs
    See: https://scottaohara.github.io/a11y_breadcrumbs/
\*------------------------------------*/
#breadcrumb {
  padding-bottom: 0.9375rem;
  padding-top: 0.625rem; }
  #breadcrumb .l-cluster > * {
    margin: 0 -0.6875rem; }
  #breadcrumb .l-cluster.l-cluster > * > * {
    margin: 0 0 0 0.6875rem;
    padding-right: 1em;
    position: relative; }

[dir="rtl"] #breadcrumb .l-cluster.l-cluster > * > * {
  margin: 0 0.6875rem 0 0;
  padding-left: 1em;
  padding-right: 0; }

.breadcrumbs a {
  font-size: 0.9375rem;
  line-height: calc(22.5 / 15);
  color: #111;
  display: block;
  padding-bottom: 0.6875rem;
  padding-top: 0.6875rem; }
  .breadcrumbs a:visited, .breadcrumbs a:hover, .breadcrumbs a:active {
    color: #111; }

.breadcrumbs [aria-current] {
  font-weight: 600;
  text-decoration: none; }
  .breadcrumbs [aria-current]:hover, .breadcrumbs [aria-current]:focus {
    outline-color: #111; }

/**
Separator chevron - see https://codepen.io/jonneal/pen/kptBs
*/
.breadcrumbs li:not(:last-child)::after {
  border-style: solid;
  border-width: 0.1em 0.1em 0 0;
  content: '';
  display: block;
  height: 0.5em;
  position: absolute;
  right: 0.4em;
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
  width: 0.5em; }

[dir="rtl"] .breadcrumbs li:not(:last-child)::after {
  border-width: 0 0 0.1em 0.1em;
  left: 0.1em;
  right: auto; }

/*------------------------------------*\
    #Main
\*------------------------------------*/
/**
1. We use left and right padding to add some minimum space between the
contents of <main> and the edges of the parent element or viewport.
To avoid making the content narrower than intended, we add an exception
to our global box-sizing rule.
 */
main,
#main, #mainContentGrid {
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 70rem;
  padding: 1.5rem 5vw 6.25rem; }

#main .component + .component {
  margin-top: 5rem; }
  @media screen and (min-width: 48em) {
    #main .component + .component {
      margin-top: 6.25rem; } }

#main .component.u-full-width + .component.u-full-width {
  margin-top: 0; }

/*------------------------------------*\
    #Hero
\*------------------------------------*/
.hero {
  background-color: #f8f8fb; }
  @media screen and (min-width: 70em) {
    .hero {
      padding-top: 1.125rem; } }
  .hero .l-sidebar > *,
  .hero .l-sidebar > * > * {
    margin: 0; }
  .hero .l-sidebar .sidebar {
    -ms-flex-preferred-size: 31.25rem;
        flex-basis: 31.25rem; }
  .hero .l-sidebar .not-sidebar {
    min-width: 50%; }
  .hero .l-sidebar .not-sidebar > * {
    max-width: 81.5%; }
  .hero .lead {
    margin-bottom: 1.125rem;
    margin-top: 0; }
  .hero img {
    margin-left: auto;
    margin-right: auto;
    max-width: 31.25rem; }

.hero + * {
  margin-top: 3.125rem; }

.hero--listing {
  background-color: #fff;
  margin-bottom: 1.25rem;
  padding-bottom: 2.5rem; }

.hero--listing + * {
  margin-top: 0; }

/*------------------------------------*\
    #Translations
\*------------------------------------*/
.translations {
  background-color: #f8f8fb;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; }

.translations.l-cluster > * {
  margin: 0 -0.625rem; }

.translations.l-cluster > * > * {
  margin: 0 0.625rem; }

.translations + * {
  margin-top: 1.875rem; }

/*
 * For the TR card, the language subheading is h5 for Family view and h3 for Search results view
 */
.translations h2,
.translations h3,
.translations h5 {
  font-size: 1rem;
  font-weight: normal;
  padding-bottom: 0.625rem;
  padding-top: 0.75rem; }

.translations a {
  display: block;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem; }

.translations [aria-current] {
  color: #111;
  text-decoration: none; }
  .translations [aria-current]:visited {
    color: #111; }
  .translations [aria-current]:hover, .translations [aria-current]:focus {
    color: #111;
    outline-color: #111; }

/*------------------------------------*\
    #Table of contents
\*------------------------------------*/
.toc {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start; }
  .toc > * + * {
    margin-top: 1em; }

.toc + * {
  margin-top: 1.875rem; }
  @media screen and (min-width: 70em) {
    .toc + * {
      margin-top: 5rem; } }


[dir="ltr"] .toc ul {
  border-left: solid 3px #f9c818;
  padding-left: 0.9375rem; }

[dir="rtl"] .toc ul {
  border-right: solid 3px #f9c818;
  padding-right: 0.9375rem; }

.toc ul a {
  display: inline-block;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem; }

/*------------------------------------*\
    #Text component

    1. The `stack` mixin applies flexbox in the column direction,
    so we need to prevent buttons from stretching horizontally
\*------------------------------------*/
.component--text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start; }
  .component--text > * + * {
    margin-top: 1em; }

.component--text > * {
  max-width: 41.25rem; }
  .component--text > * + h2,
  .component--text > * + h3,
  .component--text > * + h4,
  .component--text > * + h5,
  .component--text > * + h6 {
    margin-top: 2em; }

.component--text button,
.component--text .button {
  -ms-flex-item-align: start;
      align-self: flex-start;
  /* 1 */ }

/*------------------------------------*\
    #Quotes
\*------------------------------------*/
.component--quote {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -webkit-margin-start: 0.625rem;
          margin-inline-start: 0.625rem;
  padding: 1.25rem;
  position: relative; }
  .component--quote > * + * {
    margin-top: 1rem; }
  .component--quote::before {
    background-color: #005a9c;
    border-radius: 0.3125rem;
    content: '';
    height: 100%;
    left: -0.625rem;
    position: absolute;
    top: 0;
    width: 0.625rem; }
  .component--quote blockquote {
    color: #005a9c; }

[dir="rtl"] .component--quote::before {
  left: auto;
  right: -0.625rem; }

/*------------------------------------*\
    #Image component
\*------------------------------------*/
.component--image figcaption {
  font-size: 0.9375rem;
  font-style: italic;
  line-height: calc(22.5 / 15);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -webkit-margin-before: 1em;
          margin-block-start: 1em; }
  .component--image figcaption > * + * {
    margin-top: 1em; }
  .component--image figcaption > * {
    max-width: 33.75rem; }
  .component--image figcaption > a {
    -ms-flex-item-align: start;
        align-self: flex-start;
    display: inline-block;
    margin: 0;
    padding-bottom: 0.625rem;
    padding-top: 0.625rem; }

/*------------------------------------*\
    #Video component
\*------------------------------------*/
.component--video iframe {
  border: 0; }

.component--video figcaption {
  font-size: 0.9375rem;
  line-height: calc(22.5 / 15);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -webkit-margin-before: 1em;
          margin-block-start: 1em; }
  .component--video figcaption > * + * {
    margin-top: 1em; }
  .component--video figcaption > * {
    max-width: 33.75rem; }
  .component--video figcaption > a {
    -ms-flex-item-align: start;
        align-self: flex-start;
    display: inline-block;
    margin: 0;
    padding-bottom: 0.625rem;
    padding-top: 0.625rem; }

/*------------------------------------*\
    #Columns
\*------------------------------------*/
.component--columns {
  overflow: hidden; }

.component--columns__intro {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start;
  max-width: 41.25rem;
  margin-bottom: 1.875rem; }
  .component--columns__intro > * + * {
    margin-top: 1em; }

@media screen and (min-width: 48em) {
  .component--columns > ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: -1.5%; } }

.component--columns > ul li + li {
  margin-top: 1.25rem; }
  @media screen and (min-width: 48em) {
    .component--columns > ul li + li {
      margin-top: 0; } }

@media screen and (min-width: 48em) {
  .component--columns--images > ul > li {
    -ms-flex: 1 0 33%;
        flex: 1 0 33%;
    max-width: 50%;
    padding: 1.5%; } }

@media screen and (min-width: 48em) {
  .component--columns--images li:nth-last-child(n+4):nth-last-child(-n+4):first-child,
  .component--columns--images li:nth-last-child(n+4):nth-last-child(-n+4):first-child ~ li {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%; } }

@media screen and (min-width: 48em) {
  .component--columns--icons > ul > li {
    -ms-flex: 1 0 50%;
        flex: 1 0 50%;
    max-width: 50%;
    padding: 1.5%; } }

@media screen and (min-width: 70em) {
  .component--columns--icons > ul > li {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%; } }

@media screen and (min-width: 70em) {
  .component--columns--icons li:nth-last-child(n+5), .component--columns--icons li:nth-last-child(n+5) ~ li {
    -ms-flex-preferred-size: 33%;
        flex-basis: 33%; } }

@media screen and (min-width: 70em) {
  .component--columns--icons li:nth-last-child(n+7), .component--columns--icons li:nth-last-child(n+7) ~ li {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%; } }

/*------------------------------------*\
    #Cards
\*------------------------------------*/
.card {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  height: 100%; }

[dir="ltr"] .card--event {
  border-left: solid 0.375rem; }

[dir="rtl"] .card--event {
  border-right: solid 0.375rem; }

.card--event.conference {
  border-color: #237978; }

.card--event.meeting {
  border-color: #1bc0d7; }

.card--event.talk {
  border-color: #f9c818; }

.card--event.workshop {
  border-color: #e93737; }

.card__text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-order: 1;
      order: 1;
  padding-top: 1rem; }
  .card__text > * + * {
    margin-top: 1rem; }

.card__text a:not([class]) {
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-top: 0.375rem;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem; }

.card__heading {
  font-size: 1.125rem;
  line-height: calc(27 / 18); }

.card__image img {
  border-radius: 0.25rem; }

.card__link {
  border: 0;
  color: #111;
  text-decoration: none; }
  .card__link:hover {
    text-decoration: underline;
    /* 1 */
    text-decoration-skip-ink: auto;
    text-underline-offset: 0.25em; }
  .card__link:focus {
    background-color: #f9dc4a;
    background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a);
    color: #000;
    text-decoration: none; }

/*------------------------------------*\
    #Tag list
\*------------------------------------*/
.tag-list.tag-list {
  margin: -0.625rem; }
  .tag-list.tag-list li {
    margin: 0.625rem; }

.tag {
  font-size: 0.875rem;
  line-height: calc(20 / 14);
  background-color: rgba(206, 205, 205, 0.5);
  border-radius: 0.25rem;
  display: inline-block;
  padding: 0.15625rem 0.3125rem 0.15625rem 0.3125rem; }

/*
Makes the tag links selectable if card link is stretched
across entire card using pseudo element
 */
a.tag {
  position: relative;
  text-decoration: underline;
  z-index: 10;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em; }

/*------------------------------------*\
    #Fifty-fifty
\*------------------------------------*/
@media screen and (min-width: 48em) {
  .component--fifty-fifty {
    -ms-flex-align: start;
        align-items: flex-start;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: justify;
        justify-content: space-between; } }

.component--fifty-fifty > * + * {
  margin-top: 1rem; }
  @media screen and (min-width: 48em) {
    .component--fifty-fifty > * + * {
      margin-top: 0; } }

.component--fifty-fifty figcaption {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start; }
  .component--fifty-fifty figcaption > * + * {
    margin-top: 1.875rem; }
  @media screen and (min-width: 48em) {
    .component--fifty-fifty figcaption {
      -ms-flex-preferred-size: 52%;
          flex-basis: 52%; } }
  @media screen and (min-width: 64em) {
    .component--fifty-fifty figcaption {
      -ms-flex-preferred-size: 45%;
          flex-basis: 45%; } }

.component--fifty-fifty figcaption .l-box {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start; }
  .component--fifty-fifty figcaption .l-box > * + * {
    margin-top: 1rem; }
  .component--fifty-fifty figcaption .l-box a {
    -ms-flex-item-align: start;
        align-self: flex-start; }

@media screen and (min-width: 48em) {
  .component--fifty-fifty .image,
  .component--fifty-fifty .illustration {
    -ms-flex-preferred-size: 45%;
        flex-basis: 45%; } }

.component--fifty-fifty .image img {
  border-radius: 0.25rem; }

.component--fifty-fifty .image .l-frame {
  padding-bottom: 66.67%; }
  @media screen and (min-width: 48em) {
    .component--fifty-fifty .image .l-frame {
      padding-bottom: 100%; } }

.component--fifty-fifty .illustration .l-frame {
  padding-bottom: 75%; }

@media screen and (min-width: 48em) {
  .component--fifty-fifty.reversed figcaption {
    -ms-flex-order: -1;
        order: -1; } }

/*------------------------------------*\
    #Evangelists
\*------------------------------------*/
@media screen and (min-width: 64em) {
  .component--evangelists {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: justify;
        justify-content: space-between; } }

.component--evangelists > * + * {
  margin-top: 1rem; }
  @media screen and (min-width: 64em) {
    .component--evangelists > * + * {
      margin-top: 0; } }

.component--evangelists__text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start; }
  .component--evangelists__text > * + * {
    margin-top: 1em; }
  @media screen and (min-width: 64em) {
    .component--evangelists__text {
      -ms-flex-preferred-size: 45%;
          flex-basis: 45%; } }
  .component--evangelists__text h2 ~ * {
    max-width: 41.25rem; }

.component--evangelists__list {
  background-color: #005a9c;
  border-radius: 0.375rem;
  color: #fff;
  overflow: hidden;
  padding-top: 1.5rem; }
  @media screen and (min-width: 64em) {
    .component--evangelists__list {
      -ms-flex-preferred-size: 45%;
          flex-basis: 45%; } }
  .component--evangelists__list h3 {
    padding-left: 1.5rem;
    padding-right: 1.5rem; }
  .component--evangelists__list li + li {
    border-top: solid 1px #649bc5; }
  .component--evangelists__list .sidebar {
    -ms-flex-preferred-size: auto;
        flex-basis: auto; }
  .component--evangelists__list .not-sidebar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: start;
        justify-content: flex-start;
    min-width: calc(65% - 1.5rem); }
    .component--evangelists__list .not-sidebar > * + * {
      margin-top: 0.75em; }
  .component--evangelists__list a {
    color: #fff; }
    .component--evangelists__list a:visited, .component--evangelists__list a:hover, .component--evangelists__list a:active {
      color: #fff; }
    .component--evangelists__list a:focus {
      background-color: #f9dc4a;
      background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a);
      color: #000; }

/*------------------------------------*\
    #Actitivy
\*------------------------------------*/
.component--activity {
  background-color: #f8f8fb;
  padding-bottom: 3.125rem;
  padding-top: 3.125rem; }

@media screen and (min-width: 64em) {
  .component--activity .component--columns--images li:nth-last-child(n+4):nth-last-child(-n+4):first-child,
  .component--activity .component--columns--images li:nth-last-child(n+4):nth-last-child(-n+4):first-child ~ li {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%; } }

.component--activity .card {
  background-color: #fff;
  border-radius: 0.25rem;
  overflow: hidden; }

.component--activity .card__text {
  padding: 1.25rem; }

.component--activity .card__image img {
  border-radius: 0; }

/*------------------------------------*\
    #Group list
\*------------------------------------*/
.component--group-list {
  background-color: #f8f8fb;
  padding-bottom: 3.125rem;
  padding-top: 3.125rem; }
  .component--group-list h2,
  .component--group-list h2 + p {
    margin-bottom: 1em;
    max-width: 41.25rem; }
  .component--group-list .component--collapsibles > div,
  .component--group-list .component--collapsible-cards > div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: start;
        justify-content: flex-start;
    background-color: #fff;
    border-radius: 0.375rem;
    box-shadow: -0.0625rem 0.0625rem 0.25rem rgba(55, 70, 95, 0.12);
    padding: 1.5625rem; }
    .component--group-list .component--collapsibles > div > * + *,
    .component--group-list .component--collapsible-cards > div > * + * {
      margin-top: 1rem; }
  .component--group-list .component--collapsibles > div + div {
    margin-top: 1rem; }
  .component--group-list .component--collapsible-cards > div + div {
    margin-top: 0.625rem; }
  .component--group-list [data-heading="collapsibles"] span {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: start;
        justify-content: flex-start; }
    .component--group-list [data-heading="collapsibles"] span > * + * {
      margin-top: 1rem; }
  .component--group-list [data-heading="collapsibles"] h3 {
    font-size: 1.125rem;
    line-height: calc(27 / 18); }
  .component--group-list [data-heading="collapsibles"] > * {
    font-size: 0.9375rem;
    line-height: calc(22.5 / 15);
    display: block;
    font-weight: normal;
    margin-top: 1rem; }
  .component--group-list [data-heading="collapsibles"] + * {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: start;
        justify-content: flex-start; }
    .component--group-list [data-heading="collapsibles"] + * > * + * {
      margin-top: 1rem; }
    .component--group-list [data-heading="collapsibles"] + * > * {
      max-width: 41.25rem; }
    .component--group-list [data-heading="collapsibles"] + * > .component--collapsible-cards {
      max-width: none; }

/*------------------------------------*\
    #Members grid
\*------------------------------------*/
.component--members {
  background-color: #f8f8fb;
  padding-bottom: 1.5625rem;
  padding-top: 1.5625rem; }

.component--members .l-center {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start; }
  .component--members .l-center > * + * {
    margin-top: 1em; }
  .component--members .l-center > h2,
  .component--members .l-center > p {
    max-width: 41.25rem; }

.component--members__grid {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap; }
  @supports (display: grid) {
    .component--members__grid {
      display: -ms-grid;
      display: grid;
      grid-gap: 1.375rem;
      -ms-grid-columns: (minmax(7.5rem, 1fr))[auto-fill];
          grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); } }

.component--members__grid > div {
  background-color: #fff;
  border: solid 1.375rem #f8f8fb;
  -ms-flex-preferred-size: 7.5rem;
      flex-basis: 7.5rem;
  padding: 1.5rem;
  position: relative; }
  @supports (display: grid) {
    .component--members__grid > div {
      border: none;
      -ms-flex-align: center;
          align-items: center;
      display: -ms-grid;
      display: grid;
      -ms-flex-pack: center;
          justify-content: center;
      position: static; } }
  .component--members__grid > div::before {
    content: '';
    display: block;
    padding-bottom: 100%; }
    @supports (display: grid) {
      .component--members__grid > div::before {
        grid-area: 1 / 1 / 2 / 2; } }

.component--members__grid > div img {
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 100%;
  position: absolute;
  right: 0;
  top: 0; }
  @supports (display: grid) {
    .component--members__grid > div img {
      grid-area: 1 / 1 / 2 / 2;
      position: static;
      width: 100%; } }

.component--members__grid + a {
  -ms-flex-item-align: start;
      align-self: flex-start; }

.component--members__cta > * {
  -ms-flex-align: center;
      align-items: center; }

.component--members__cta > * > *:not(a) {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%; }
  @media screen and (min-width: 48em) {
    .component--members__cta > * > *:not(a) {
      -ms-flex-preferred-size: auto;
          flex-basis: auto; } }

/*------------------------------------*\
    #Slide
\*------------------------------------*/
@media screen and (min-width: 64em) {
  .slide {
    -ms-flex-align: start;
        align-items: flex-start;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between; } }

.slide > * + * {
  margin-top: 1rem; }
  @media screen and (min-width: 64em) {
    .slide > * + * {
      margin-top: 0; } }

@media screen and (min-width: 64em) {
  .slide__quote,
  .slide__cite {
    -ms-flex-preferred-size: 45%;
        flex-basis: 45%; } }

.slide__quote {
  font-size: 1.5rem;
  line-height: calc(33.6 / 24);
  background: url("/dist/assets/images/quote-bg.png") no-repeat 0 0;
  font-weight: bold;
  -webkit-margin-start: 2.1875rem;
          margin-inline-start: 2.1875rem;
  padding-top: 0.9375rem;
  position: relative; }
  .slide__quote::before {
    background-color: #005a9c;
    border-radius: 0.3125rem;
    content: '';
    height: 100%;
    left: -2.0625rem;
    position: absolute;
    top: 0;
    width: 0.25rem; }
  .slide__quote > * {
    max-width: 41.25rem; }

[dir="rtl"] .slide__quote {
  background-position-x: 100%; }
  [dir="rtl"] .slide__quote::before {
    left: auto;
    right: -2.0625rem; }

.slide__cite {
  font-size: 0.9375rem;
  line-height: calc(22.5 / 15);
  -webkit-padding-start: 0.3125rem;
          padding-inline-start: 0.3125rem; }
  .slide__cite.l-sidebar .sidebar {
    -ms-flex-preferred-size: auto;
        flex-basis: auto; }
  .slide__cite.l-sidebar .not-sidebar {
    min-width: calc(70% - 1.5rem); }
    .slide__cite.l-sidebar .not-sidebar p:first-child {
      font-weight: bold; }
    .slide__cite.l-sidebar .not-sidebar p:first-child + p {
      margin-top: 0; }

.slide__logo {
  background-color: #fff;
  height: 7.5rem;
  padding: 1.5rem;
  position: relative;
  width: 11.25rem; }
  .slide__logo > img {
    bottom: 0;
    left: 0;
    margin: auto;
    max-width: 100%;
    position: absolute;
    right: 0;
    top: 0; }
    @supports (object-fit: contain) {
      .slide__logo > img {
        height: 100%;
        max-width: none;
        object-fit: contain;
        position: static; } }

/*------------------------------------*\
    #Slider core
\*------------------------------------*/
.component--slider {
  background-color: #f8f8fb;
  padding-bottom: 3.125rem;
  padding-top: 3.125rem; }
  .component--slider h2 {
    font-size: 1rem;
    font-weight: normal;
    margin-bottom: 1.5rem; }
  .component--slider ul > li + li {
    margin-top: 2rem; }

/*------------------------------------*\
    #Crosslinks (You may also like)
\*------------------------------------*/
.crosslinks {
  background-color: #005a9c;
  color: #fff;
  padding-bottom: 3.125rem;
  padding-top: 3.125rem; }

.crosslinks .component--columns__intro h2 {
  font-size: 1.5rem;
  line-height: calc(33.6 / 24); }

@media screen and (min-width: 43.75em) {
  .crosslinks .component--columns--images > ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: -1.5%; } }

@media screen and (min-width: 43.75em) {
  .crosslinks .component--columns--images > ul > li {
    -ms-flex: 1 0 50%;
        flex: 1 0 50%;
    max-width: 50%;
    padding: 1.5%; } }

@media screen and (min-width: 43.75em) {
  .crosslinks .component--columns--images > ul li + li {
    margin-top: 0; } }

@media screen and (min-width: 43.75em) {
  .crosslinks .component--columns--images li:nth-last-child(n+3):nth-last-child(-n+3):first-child,
  .crosslinks .component--columns--images li:nth-last-child(n+3):nth-last-child(-n+3):first-child ~ li {
    -ms-flex-preferred-size: 33%;
        flex-basis: 33%; } }

@media screen and (min-width: 64em) {
  .crosslinks .component--columns--images li:nth-last-child(n+4):nth-last-child(-n+4):first-child,
  .crosslinks .component--columns--images li:nth-last-child(n+4):nth-last-child(-n+4):first-child ~ li {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%; } }

.crosslinks .card {
  background-color: #fff;
  border-radius: 0.25rem;
  color: #111;
  overflow: hidden; }

.crosslinks .card__text {
  padding: 1.25rem; }

.crosslinks .card__image img {
  border-radius: 0; }

/*------------------------------------*\
    #Search
\*------------------------------------*/
input[type=search] {
  position: relative;
  z-index: 1; }

.l-sidebar.search {
  overflow: visible; }

.l-sidebar.search form {
  margin: 0; }

.l-sidebar.search form > * {
  margin: 0; }

.l-sidebar.search form .sidebar {
  -ms-flex-preferred-size: auto;
      flex-basis: auto; }

.l-sidebar.search form .not-sidebar {
  min-width: 70%; }

.l-sidebar.search input[type="search"] {
  max-width: none; }

.l-sidebar.search button[type="submit"] {
  -webkit-margin-start: 1rem;
          margin-inline-start: 1rem; }

@supports ((-webkit-padding-start: 1em) or (padding-inline-start: 1em)) {
  .l-sidebar.search form input[type="search"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs/%3E%3Cpath d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
    background-position: center left 0.25em;
    background-repeat: no-repeat;
    background-size: 1.875rem 1.875rem;
    -webkit-padding-start: 2.5rem;
            padding-inline-start: 2.5rem; }
  [dir="rtl"] .l-sidebar.search form input[type="search"] {
    background-position: center right 0.25em; } }

/*------------------------------------*\
    #Meta info
\*------------------------------------*/
.meta {
  border-bottom: solid 1px #bdbdbd;
  border-top: solid 1px #bdbdbd;
  margin-bottom: 3.125rem;
  padding: 1.5rem 0; }

.meta .with-link {
  padding-bottom: 0.625rem;
  padding-top: 0.625rem; }

.meta .icon {
  height: 1.5rem;
  width: 1.5rem; }

/*------------------------------------*\
    #Pagination
    See: https://weboverhauls.github.io/demos/pagination/
\*------------------------------------*/
.pagination {
  margin-top: 2.5rem; }

.pagination + * {
  border-top: solid 1px #bdbdbd;
  margin-top: 2.0625rem; }

@media screen and (min-width: 64em) {
  .pagination__list {
    -ms-flex-pack: end;
        justify-content: flex-end; } }

.pagination__list li {
  display: inline-block; }

.pagination__list a {
  font-size: 0.9375rem;
  line-height: calc(22.5 / 15);
  color: #000;
  display: block;
  text-decoration: none;
  padding: 0.6875rem 1.125rem; }
  .pagination__list a:visited {
    color: #000; }

.pagination__list a[href]:hover {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em; }

.pagination__list [aria-current] {
  background-color: #005797;
  color: #fff;
  font-weight: bold; }
  .pagination__list [aria-current]:hover {
    color: #fff; }

.pagination__list__first svg,
.pagination__list__last svg {
  height: 1.375rem; }

.pagination__list__first .double-chevron-right {
  display: none; }

.pagination__list__last .double-chevron-left {
  display: none; }

[dir="rtl"] .pagination__list__first .double-chevron-left {
  display: none; }

[dir="rtl"] .pagination__list__first .double-chevron-right {
  display: block; }

[dir="rtl"] .pagination__list__last .double-chevron-left {
  display: block; }

[dir="rtl"] .pagination__list__last .double-chevron-right {
  display: none; }

/*------------------------------------*\
    #RSS feed
\*------------------------------------*/
.rss {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start;
  margin-top: 2.5rem; }
  .rss > * + * {
    margin-top: 1em; }
  .rss a {
    display: block;
    padding-bottom: 0.625rem;
    padding-top: 0.625rem; }

/*------------------------------------*\
    #Comments
\*------------------------------------*/
.comments {
  background-color: #f8f8fb;
  padding-bottom: 3.125rem;
  padding-top: 3.125rem; }
  .comments h2 {
    font-size: 1.5rem;
    line-height: calc(33.6 / 24); }

.comment-list {
  margin-top: 1.875rem; }
  .comment-list > li {
    border-bottom: solid 1px #bdbdbd;
    padding-bottom: 3.125rem; }
  .comment-list > li + li {
    margin-top: 1.25rem; }

.l-sidebar.comment {
  overflow: visible; }

.l-sidebar.comment .sidebar,
.l-sidebar.comment-form-wrap .sidebar {
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  -ms-flex-order: -1;
      order: -1; }
  .l-sidebar.comment .sidebar img,
  .l-sidebar.comment-form-wrap .sidebar img {
    max-width: 3.125rem; }

.l-sidebar.comment .not-sidebar,
.l-sidebar.comment-form-wrap .not-sidebar {
  min-width: calc(80% - 1.5rem); }

.reply-list.reply-list {
  margin-left: 4.375rem;
  margin-top: 1.875rem;
  padding-left: 1.875rem;
  position: relative; }
  .reply-list.reply-list::before {
    background-color: #005a9c;
    border-radius: 0.1875rem;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 0.1875rem; }
  .reply-list.reply-list > li {
    border-top: solid 1px #bdbdbd; }
  .reply-list.reply-list > li + li {
    margin-top: 1.25rem; }

[dir="rtl"] .reply-list.reply-list {
  margin-left: 0;
  margin-right: 4.375rem;
  padding-left: 0;
  padding-right: 1.875rem; }
  [dir="rtl"] .reply-list.reply-list::before {
    left: auto;
    right: 0; }

.reply-list .comment {
  padding-top: 1.25rem; }

.comment__author {
  font-size: 1rem;
  font-weight: bold;
  line-height: calc(32 / 24); }

.comment__body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start;
  max-width: 41.25rem; }
  .comment__body > * + * {
    margin-top: 1em; }

[data-replylink] {
  font-size: 0.9375rem;
  line-height: calc(22.5 / 15);
  -ms-flex-item-align: start;
      align-self: flex-start;
  padding-bottom: 0.6875rem;
  padding-top: 0.6875rem; }

#respond {
  margin-top: 1rem; }
  #respond > div:first-of-type {
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }

.comment-form-wrap {
  margin-top: 1.875rem; }

#comment-form {
  max-width: 41.25rem; }
  #comment-form .l-switcher > * {
    margin: -0.625rem; }
  #comment-form .l-switcher > * > * {
    padding: 0.625rem;
    width: calc(660px * 660 - 100% * 660); }

/*------------------------------------*\
    #Pre-footer items
\*------------------------------------*/
.pre-footer.l-switcher {
  margin: -1.25rem; }

.pre-footer.l-switcher > * > * {
  min-width: 33.333%;
  padding: 1.25rem;
  width: calc(920px * 920 - 100% * 920); }

/*------------------------------------*\
    #Global footer
\*------------------------------------*/
.global-footer {
  border-top: solid 1px #bdbdbd;
  -ms-grid-row: 2;
  grid-row-start: 3;
  grid-row-end: 4;
  padding: 1.25rem 0 1.5625rem; }
  .global-footer .l-center {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: start;
        justify-content: flex-start; }
    .global-footer .l-center > * + * {
      margin-top: 1rem; }
  .global-footer a,
  .global-footer .copyright {
    font-size: 0.875rem;
    line-height: calc(20 / 14); }
  .global-footer a {
    color: #111; }
    .global-footer a:visited, .global-footer a:hover, .global-footer a:active {
      color: #111; }

.global-footer__links {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .global-footer__links > ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    @media screen and (min-width: 64em) {
      .global-footer__links > ul {
        -webkit-margin-start: auto;
                margin-inline-start: auto; } }
  .global-footer__links .l-cluster > * {
    margin: 0 -0.625rem; }
  .global-footer__links .l-cluster.l-cluster > * > * {
    margin: 0 0.625rem; }
  .global-footer__links a:not([class]) {
    display: block;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem; }
  .global-footer__links .with-icon--larger {
    padding: 0.75rem; }
    .global-footer__links .with-icon--larger img {
      height: 1.25rem;
      width: 1.25rem; }
    .global-footer__links .with-icon--larger:focus {
      background-color: #f9dc4a;
      background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a); }

/*------------------------------------*\
    #Maturity levels
\*------------------------------------*/
.maturity-level-highlighted {
  background-color: #f9dc4a;
  border-radius: 0.25rem;
  padding: 0.625rem; }

/*------------------------------------*\
    #Family/Series list
\*------------------------------------*/
/* dl */
@supports (grid-row-start: auto) {
  dl.family-series-list {
    column-gap: 1rem;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 4fr;
        grid-template-columns: auto 4fr;
    -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
    row-gap: 1rem; }
    dl.family-series-list dd + dt,
    dl.family-series-list dt + dd,
    dl.family-series-list dd + dd {
      -webkit-margin-before: 0;
              margin-block-start: 0; }
    dl.family-series-list dt {
      font-weight: bold;
      -ms-grid-column: 1;
          grid-column-start: 1;
      grid-column-end: 2; }
    dl.family-series-list dd {
      -ms-grid-column: 2;
          grid-column-start: 2;
      grid-column-end: 3; } }

dl.family-series-list dt:nth-of-type(2) {
  -webkit-margin-start: 1.5em;
          margin-inline-start: 1.5em;
  position: relative; }

dl.family-series-list dt:nth-of-type(2)::before {
  content: " ";
  position: absolute;
  top: 0;
  left: -1.5rem;
  width: 1rem;
  height: 1rem;
  border: 2px solid #979797;
  border-width: 0 0 2px 2px; }

.family-grouping {
  -webkit-padding-start: 1.25rem;
          padding-inline-start: 1.25rem;
  position: relative; }
  .family-grouping::before {
    background-color: #D8D8D8;
    border-radius: 0.3125rem;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 0.375rem; }
  .family-grouping [dir="rtl"] blockquote::before {
    left: auto;
    right: 0; }

.family-grouping + .family-grouping {
  margin-top: 2.75rem; }

/*------------------------------------*\
    #Templates
\*------------------------------------*/
/*------------------------------------*\
    #Default page
\*------------------------------------*/
.default .content {
  max-width: 47rem; }


@media screen and (min-width: 64em) {
  #newmainContentGrid {
  display: grid;
  grid: 
	"top    .      side "
	"main   .      side "
	"more   .      side "
	/ 3fr   2em    1fr ;
    }
 #colgrid {
     display: grid;
     grid: 
     "toc"
     "."
     "related"
     }
    #colgrid { side }
    #toc {grid-area: toc}
    #related {grid-area: related}
    #title {grid-area: top}
    #maintext {grid-area: main}
    }

@supports (grid-column-gap: 8%) {
  .default .content {
    max-width: none; }
    @media screen and (min-width: 64em) {
      .default .content {
        display: -ms-grid;
        display: grid;
        grid-column-gap: 7.857%;
        -ms-grid-columns: 67.143% 25%;
            grid-template-columns: 67.143% 25%;
        grid-template-areas: "article related"; } }
  @media screen and (min-width: 64em) {
    .default .content article {
      grid-area: article; } }
  @media screen and (min-width: 64em) {
    .default .content .related {
      grid-area: related; } } }

.default .related {
  border-top: solid 10px #005a9c;
  margin-top: 2.5rem;
  padding-top: 1.25rem; }

@supports (grid-column-gap: 8%) {
  @media screen and (min-width: 64em) {
    .default .related {
      margin-top: 0; } } }

@media screen and (min-width: 64em) {
  .default .related__inner {
    -webkit-border-start: solid 1px #bdbdbd;
            border-inline-start: solid 1px #bdbdbd;
    padding-left: 1.25rem;
    padding-right: 1.25rem; } }

.default .related__inner ul a {
  display: inline-block;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem; }

/*------------------------------------*\
    #Event
\*------------------------------------*/
.event .content {
  max-width: 47rem; }

.event .intro {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin-bottom: 1.25rem;
  -webkit-margin-start: 1.875rem;
          margin-inline-start: 1.875rem;
  position: relative; }
  .event .intro::before {
    border-radius: 0.3125rem;
    content: '';
    height: 100%;
    left: -1.75rem;
    position: absolute;
    top: 0;
    width: 0.3125rem; }
  .event .intro.conference::before {
    background-color: #237978; }
  .event .intro.meeting::before {
    background-color: #1bc0d7; }
  .event .intro.talk::before {
    background-color: #f9c818; }
  .event .intro.workshop::before {
    background-color: #e93737; }
  .event .intro h1 {
    margin-bottom: 0; }
  .event .intro h1 + * {
    font-size: 1.5rem;
    line-height: calc(33.6 / 24);
    margin-bottom: 0.625rem;
    -ms-flex-order: -1;
        order: -1; }

[dir="rtl"] .event .intro::before {
  left: auto;
  right: -1.75rem; }

.event .lead,
.event .calendar-link {
  margin-bottom: 1.25rem; }

/*------------------------------------*\
    #Post template
\*------------------------------------*/
.post .content,
.post .rss {
  max-width: 47rem; }

@supports (grid-column-gap: 8%) {
  .post .content {
    max-width: none; }
    @media screen and (min-width: 64em) {
      .post .content {
        display: -ms-grid;
        display: grid;
        grid-column-gap: 7.857%;
        -ms-grid-columns: 67.143% 25%;
            grid-template-columns: 67.143% 25%;
        grid-template-areas: "article related"; } }
  @media screen and (min-width: 64em) {
    .post .content article {
      grid-area: article; } }
  @media screen and (min-width: 64em) {
    .post .content .related {
      grid-area: related; } } }

.post .related {
  margin-top: 2.5rem; }

@supports (grid-column-gap: 8%) {
  @media screen and (min-width: 64em) {
    .post .content .related {
      margin-top: 0; } } }

.post .related__inner {
  background-color: #f8f8fb;
  padding: 1.75rem 1.25rem; }
  .post .related__inner h2 {
    font-size: 1.1875rem;
    line-height: calc(33 / 17); }
  .post .related__inner h3 {
    font-size: 1rem;
    line-height: calc(32 / 24); }
  .post .related__inner a {
    color: #545454; }
    .post .related__inner a:focus {
      color: #000; }

.post .related__inner > div {
  margin-top: 1.125rem; }
  .post .related__inner > div + div {
    border-top: solid 1px #bdbdbd;
    margin-top: 1.5rem;
    padding-top: 0.9375rem; }

.post .related__inner ul {
  margin-top: 0.375rem; }

.post .related__inner li {
  font-size: 0.9375rem;
  line-height: calc(22.5 / 15); }
  .post .related__inner li + li {
    margin-top: 1.375rem; }

.post .sub-head {
  font-size: 0.9375rem;
  line-height: calc(22.5 / 15);
  margin-bottom: 1.875rem;
  margin-top: -1.25rem; }

.post .meta {
  position: relative; }

@media screen and (min-width: 48em) {
  .post .meta dl dd:first-of-type {
    padding-right: 9.375rem; } }

.post .meta dl dd, .post .meta dl dt {
  margin: 0;
  padding-bottom: 0.3125rem;
  padding-top: 0.3125rem; }

.post .meta dl dt {
  float: left;
  font-weight: normal;
  margin-right: 1em; }

.post .skip-to-comments,
.post .skip-to-comment-form {
  color: #545454;
  display: inline-block;
  padding-bottom: 0.6875rem;
  padding-top: 0.6875rem;
  text-decoration: underline;
  /* 1 */
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em; }
  .post .skip-to-comments:visited,
  .post .skip-to-comment-form:visited {
    color: #545454; }
  .post .skip-to-comments:focus,
  .post .skip-to-comment-form:focus {
    background-color: #f9dc4a;
    background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a);
    color: #000;
    text-decoration: none; }

@media screen and (min-width: 48em) {
  .post .skip-to-comments {
    position: absolute;
    right: 0;
    top: 1.1875rem; } }

.post .rss {
  border-top: solid 1px #bdbdbd;
  padding-top: 2.5rem; }

@media screen and (min-width: 48em) {
  [dir="rtl"] .post .meta dl dd:first-of-type {
    padding-left: 9.375rem;
    padding-right: 0; } }

[dir="rtl"] .post .meta dl dt {
  float: right;
  margin-left: 1em;
  margin-right: 0; }

@media screen and (min-width: 48em) {
  [dir="rtl"] .post .skip-to-comments {
    left: 0;
    right: auto; } }

.post__notes {
  border-top: solid 1px #bdbdbd;
  margin-top: 3.75rem;
  padding-top: 1.25rem; }

/*------------------------------------*\
    #Landing page
\*------------------------------------*/
.landing h1,
.ecosystem h1 {
  font-size: 2.125rem;
  line-height: calc(43 / 34); }
  @media screen and (min-width: 48em) {
    .landing h1,
    .ecosystem h1 {
      font-size: 3.75rem;
      line-height: calc(72 / 60); } }

.landing #breadcrumb,
.ecosystem #breadcrumb {
  background-color: #f8f8fb; }

.landing main,
.landing #main,
.ecosystem main,
.ecosystem #main {
  padding-top: 0; }

.landing .component--text,
.landing .component--image,
.landing .component--video,
.landing .component--quote,
.ecosystem .component--text,
.ecosystem .component--image,
.ecosystem .component--video,
.ecosystem .component--quote {
  margin-left: auto;
  margin-right: auto;
  max-width: 44.4375rem; }

.landing .component--quote,
.ecosystem .component--quote {
  max-width: 43.1875rem; }

/*------------------------------------*\
    #Listing templates
\*------------------------------------*/
.listing .wrap {
  background-color: #f8f8fb; }

.listing #breadcrumb {
  background-color: #fff; }

.listing h1 {
  font-size: 2.125rem;
  line-height: calc(43 / 34);
  margin-bottom: 2rem; }
  @media screen and (min-width: 48em) {
    .listing h1 {
      font-size: 3.75rem;
      line-height: calc(72 / 60); } }

.listing main,
.listing #main {
  padding-top: 0; }

.listing .filters.l-switcher {
  margin: -0.625rem; }

.listing .filters > div {
  -ms-flex-align: end;
      align-items: flex-end; }

.listing .filters.l-switcher > * > * {
  min-width: 33.333%;
  padding: 0.625rem;
  width: calc(920px * 920 - 100% * 920); }

.listing .filters .button--ghost {
  padding-left: 0.1875rem;
  padding-right: 0.1875rem; }
  .listing .filters .button--ghost:hover {
    text-decoration: underline;
    text-decoration-skip-ink: auto;
    text-underline-offset: 0.25em; }
  .listing .filters .button--ghost:focus {
    border-color: inherit;
    box-shadow: inset 0 0 0 2px;
    outline: solid 3px #f9dc4a;
    outline-offset: 0; }

.listing .archive-links {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start;
  margin-top: 2.5rem; }
  .listing .archive-links > * + * {
    margin-top: 1em; }
  .listing .archive-links ul {
    background-color: #fff;
    border: solid 1px #bdbdbd;
    height: 11.25rem;
    -webkit-margin-start: 1.5625rem;
            margin-inline-start: 1.5625rem;
    overflow-y: scroll;
    width: 11.25rem; }
    .listing .archive-links ul:focus {
      border-color: #000;
      box-shadow: inset 0 0 0 4px;
      outline: 3px solid #f9dc4a; }
  .listing .archive-links ul a {
    display: inline-block;
    padding: 0.625rem; }

.people-list > li {
  padding-bottom: 1.875rem;
  padding-top: 2.5rem; }

.people-list > li + li {
  border-top: solid 1px #bdbdbd; }

.people-list .l-sidebar .sidebar {
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  -ms-flex-order: -1;
      order: -1; }
  .people-list .l-sidebar .sidebar img {
    max-width: 6.25rem; }

.people-list .l-sidebar .not-sidebar {
  min-width: calc(70% - 1.5rem); }

.people-list .l-sidebar .not-sidebar > div {
  max-width: 41.25rem; }
  .people-list .l-sidebar .not-sidebar > div > * + * {
    margin-top: 1.25rem; }

.people-list .l-cluster > *,
.people-list .l-cluster.l-cluster > * > * {
  margin-bottom: 0;
  margin-top: 0; }

.people-list .l-cluster > * {
  -ms-flex-align: center;
      align-items: center; }

.people-list .l-cluster a {
  display: inline-block;
  padding: 0.75rem 0; }

.people-list .l-cluster.groups > * > *:first-child {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%; }
  @media screen and (min-width: 48em) {
    .people-list .l-cluster.groups > * > *:first-child {
      -ms-flex-preferred-size: auto;
          flex-basis: auto; } }

.event-list {
  margin-top: 2.5rem; }
  .event-list > li + li {
    margin-top: 1rem; }
  .event-list .card {
    background-color: #fff;
    border-radius: 0.25rem;
    box-shadow: -1px 1px 4px 0 rgba(55, 70, 95, 0.12);
    overflow: hidden;
    padding: 1rem; }
  .event-list .card.l-sidebar .sidebar {
    -ms-flex-preferred-size: auto;
        flex-basis: auto; }
  .event-list .card.l-sidebar .not-sidebar {
    min-width: calc(70% - 1.5rem); }
  .event-list .card.l-sidebar .l-sidebar .sidebar {
    -ms-flex-preferred-size: 20rem;
        flex-basis: 20rem; }
  .event-list .card.l-sidebar .l-sidebar .not-sidebar {
    min-width: calc(55% - 1.5rem); }
  .event-list .card .l-cluster > * {
    font-size: 0.9375rem;
    line-height: calc(22.5 / 15);
    -ms-flex-align: center;
        align-items: center; }
  .event-list .card__text {
    padding-top: 0; }
  .event-list .card__image {
    -ms-flex-item-align: start;
        align-self: flex-start;
    height: 6.25rem;
    width: 6.25rem; }
    @media screen and (min-width: 64em) {
      .event-list .card__image {
        height: 12.5rem;
        width: 12.5rem; } }
  .event-list .card__image img {
    border-radius: 0; }
  .event-list .date-location {
    font-size: 0.9375rem;
    line-height: calc(22.5 / 15);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    max-width: 18.75rem; }
  .event-list .date-location img {
    -webkit-margin-end: 0.75rem;
            margin-inline-end: 0.75rem;
    width: 1.125rem; }
  .event-list .date-location > div:last-child {
    -webkit-border-start: solid 1px #bdbdbd;
            border-inline-start: solid 1px #bdbdbd;
    -webkit-padding-start: 0.75rem;
            padding-inline-start: 0.75rem; }

/*------------------------------------*\
    #Utilities
\*------------------------------------*/
/*------------------------------------*\
    #Alignment utilities

    1. Logical property allows text-direction to change with `ltr`
\*------------------------------------*/
.u-float-left {
  float: left;
  float: inline-start;
  /* 1 */ }

.u-float-right {
  float: right;
  float: inline-end;
  /* 1 */ }

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

.u-text-left {
  text-align: left;
  text-align: start;
  /* 1 */ }

.u-text-right {
  text-align: right;
  text-align: end;
  /* 1 */ }

/**
Change text-alignment at the "laptop" breakpoint,
as defined in /10-settings/breakpoints

1. Logical property allows text-direction to change with `ltr`
 */
@media screen and (min-width: 80em) {
  .u-text-left-from-lap {
    text-align: left;
    text-align: start;
    /* 1 */ } }

@media screen and (min-width: 80em) {
  .u-text-center-from-lap {
    text-align: center; } }

@media screen and (min-width: 80em) {
  .u-text-right-from-lap {
    text-align: right;
    text-align: end;
    /* 1 */ } }

/*------------------------------------*\
    #Clearfix utility

    https://css-tricks.com/snippets/css/clear-fix/

    Extend the clearfix placeholder with Sass to avoid
    having it appear over and over in your markup.
\*------------------------------------*/
/*------------------------------------*\
    #Layout utilities
\*------------------------------------*/
/**
For a full-viewport-width element inside a limited width parent.
The parent must be exactly centered in the browser in order for this
to work - see https://css-tricks.com/full-width-containers-limited-width-parents/
 */
.u-full-width {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  position: relative;
  right: 50%;
  width: 100vw; }

/**
To horizontally center a block-level item
 */
.u-center {
  margin-left: auto;
  margin-right: auto;
  position: relative; }

figure.di {
    border: thin solid gray;
    border-radius: 5px;
    text-align: center;
    padding:10px;
}

figure.di figcaption {
    font-style: italic;
}