/* Theme Name: maker2020 Theme URI: Author: Maker Foundation Author URI: Description: Version: 1.1.0 License: License URI: Tags: maker2020 Text Domain: maker2020 Domain Path: /i18n */ /* ----------------------------------------------------------------------------- * TABLE OF CONTENTS * * - Fonts * - Animations * - Reset * - Typography * - Layout * - Components * - Widgets * - Utilities * * -------------------------------------------------------------------------- */ /** * Fonts. */ @font-face { font-family: 'FT Base'; font-style: normal; font-weight: 400; src: url('fonts/FTBase-Regular.woff2') format('woff2'), url('fonts/FTBase-Regular.woff') format('woff'); } @font-face { font-family: 'FT Base'; font-style: normal; font-weight: 500; src: url('fonts/FTBase-Medium.woff2') format('woff2'), url('fonts/FTBase-Medium.woff') format('woff'); } @font-face { font-family: 'FT Base'; font-style: normal; font-weight: 700; src: url('fonts/FTBase-Bold.woff2') format('woff2'), url('fonts/FTBase-Bold.woff') format('woff'); } /** * Animations. */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /** * Minimal reset. */ /* Remove default margins and padding from everything. */ * { margin: 0; padding: 0; } /* Change the default box model to border-box. */ *, *::after, *::before { box-sizing: border-box; } /* Set the page background color on the root element. The default layout is just one column, centered in the viewport, collapsing to no less than 320px wide. */ html { background: white; min-width: 320px; } /* Always render the vertical scrollbar. This prevents the layout jumping around when users navigate between pages with no vertical overflow, and long pages with content "beneath the fold". */ body { overflow-x: hidden; overflow-y: scroll; } /* Remove Webkit's proprietary tap highlight color. */ body { -webkit-tap-highlight-color: transparent; } /* Apply the default typeface globally, ensuring it's inherited by everything in the document - including

and <legend> elements which traditionally do
not inherit their font. */

body {
  font-family: FT Base, -apple-system, system-ui, BlinkMacSystemFont, SF Pro Text, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
}

body * {
  font-family: inherit;
  font-weight: inherit;
}

/* Set the elements that are to be rendered bold by default. */

b, strong {
  font-weight: 500;
}

/* The monospace font is used for preformatted text and program code, etc. */

code, kbd, pre, samp, var {
  font-family: Inconsolata, 'Deja-vu Sans Mono', Monaco, Menlo, Consolas, 'Courier New', monospace;
}

/* Remove italics from <var>, for consistency with <code>, <kbd> and <samp>. */

var {
  font-style: normal;
}

/* Set the elements that are to be italicized by default. */

em, i {
  font-style: italic;
}

/* Change the root's font size from 16px to 10px. This is convenient. It is easy
to calculate rem units if the division is by ten: 24px is 2.4rem: 24 / 10 = 2.4.
Inheritance needs to be reinforced for nested lists. */

html {
  font-size: 10px;
}

html * {
  font-size: 100%;
}

ul ul,
ol ol,
ul ol,
ol ul {
  font-size: 100%;
}

/* As long as everything is sized relative to root - via root ems - we can auto-
matically rescale the whole UI based on the size of the screen. */

/* -- @deprecated Not in use --

@media screen and (min-width: 50rem) {
  html {
    font-size: 11px;
  }
}

@media screen and (min-width: 75rem) {
  html {
    font-size: 12px;
  }
}
*/

/* The default font size is set on the <body> element. Using ems, not rems, here
will resolve an old Chrome bug: http://stackoverflow.com/a/20206725. */

body {
  font-size: 1.4em;
}

/* Where font sizes of block-level elements differ from the default font size as
set deteremined by the <body> element, the font-size value should be relative to
the root element (i.e. defined in root em units). */

pre {
  display: block;
  font-size: 1.2rem;
}

/* Inline elements should be sized as a percentage of the font-size they inherit
from their parent block element. Generally this is needed only when the typeface
changes within a block. */

code, kbd, pre, samp, var {
  display: inline-block;
  font-size: 95%;
}

/* By default, have line heights precisely match the font size of the block. */

body {
  line-height: 1;
}

body * {
  line-height: inherit;
}

/* The text-rendering property is not part of any CSS specification - it is from
the SVG spec in fact - but it is supported by Gecko + WebKit browsers when added
to HTML documents. Web browsers must make trade-offs between speed of rendering,
legibility, and achieving geometric precision in typography.  The text-rendering
property is intended to give UI designers control over these trade-offs. */

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* For responsive layouts that scale down to fit the width of small screens, the
text-size-adjust property should be set to 100%.  This tells some mobiles to not
inflate the size of rendered text in an attempt to make it more readable.  It is
not a standard CSS property. */

html {
  text-size-adjust: 100%;
}

/* The default font color is applied to the document body and allowed to cascade
to all elements within the document - even <legend> and form controls that don't
normally inherit the color property. The color property is also inherited as the
default fill color for embedded SVGs (customizable via the fill attribute). */

body {
  color: hsl(0, 0%, 20%);
  letter-spacing: 0.3px;
}

body * {
  color: inherit;
}

svg {
  fill: currentColor;
}

/* Bullets are removed from unordered lists - but not ordered ones because doing
so would make the "type" attribute obsolete. It is handy for controlling in HTML
the numbering format: <ol type="A">. The default position of bullets is moved to
the inside, which generally works better. */

ol,
ul {
  list-style-position: inside;
}

ul {
  list-style-type: none;
}

li {
  list-style: inherit;
}

/* Different web browsers design the horizontal rule (<hr>) element in different
ways. Here's a more consistent implementation. */

hr {
  border: 0;
  border-top: 1px solid hsl(0, 0%, 93%);
  height: 0;
}

/* Text should not be wrapped within figures or preformatted blocks.  Horizontal
scrolling is preferred in this context, even on smaller screens, so the intended
presentation of the text is preserved. */

figure {
  overflow: auto;
}

/* Suppress text wrapping within <code> elements, unless it is in a preformatted
text block. */

code {
  white-space: normal;
}

pre {
  overflow: auto;
  white-space: pre;
  word-wrap: normal;
}

pre code {
  white-space: pre;
}

/* Remove the dotted underline given to <abbr> and <dfn> elements. The values of
their title attributes are inaccessible via touch interfaces, so this visual cue
serves no purpose in that context. Remove the default italics seen on <dfn>s for
the same reason. The only useful differential styling here is the cursor. */

abbr,
dfn {
  text-decoration: none;
}

abbr[title],
dfn[title] {
  cursor: help;
}

/* Generated quotes are removed from block-level and inline quotes. */

dfn {
  font-style: normal;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after {
  content: '';
}

q::before,
q::after {
  content: '';
}

/* Remove the default italics of <cite>, remove the underline from <ins> and <u>
and remove the strikethrough from <del> and <s>. Also reset the <mark> element -
so it is not distinguishable from the surrounding text by default. The items are
thus purely semantic with their design determined exclusively by classes. */

cite {
  font-style: normal;
}

del,
ins {
  text-decoration: none;
}

s,
u {
  text-decoration: none;
}

mark {
  background: transparent;
  color: inherit;
}

/* The default presentation for superscript and subscript affects line-height in
all browsers. We'll use a different method to achieve a similar design, one that
does not affect line-height. */

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Removing the size of the <small> element makes it a pure semantic element, as
it ought to be. The <address> element also has been redefined as a section node,
yet most browsers still treat it as a text node, italicizing its inner text - we
can fix that. */

small {
  font-size: 100%;
}

address {
  font-style: normal;
}

/* Generally it's more convenient if pseudo elements inherit the text-decoration
and vertical-align properties of their parents. */

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

/* The default border model for the <table> element is swapped from separated to
collapsed. This more convenient for styling. In case some tables are reverted to
the separated model, the default border-spacing is set to zero. Also, have cells
automatically scale to best fit their content. Empty cells exist for a reason so
we make sure they are rendered. */

table {
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  table-layout: auto;
  text-align: left;
  vertical-align: middle;
  width: 100%;
}

*[dir="rtl"] table {
  text-align: right;
}

/* Allow borders, backgrounds and other such properties to be set on the <table>
and cascade down to all child cells. */

tbody,
td,
tfoot,
th,
thead,
tr {
  background: inherit;
  border: inherit;
  font-weight: inherit;
  margin: inherit;
  padding: inherit;
  text-align: inherit;
  vertical-align: inherit;
}

/* Reinforce the default position of table captions. They work best at the start
rather than the end of tables. */

caption {
  caption-side: top;
}

/* Set the default font for form fields and buttons. These may be inherited from
the document body. */

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* Remove the default italics of <optgroup> labels. Instead make them bold. */

optgroup {
  font-style: normal;
  font-weight: 400;
}

optgroup option {
  font-weight: normal;
}

/* Remove underline from hyperlinks. */

a {
  color: inherit;
  outline: none;
  text-decoration: none;
}

/* @deprecated */
/* We enforce a consistent outline around elements in focus. The default outline
is hidden while a button or link is active. */

*:focus {
  outline-color: hsla(50, 100%, 50%, .75);
  outline-style: solid;
  outline-width: 3px;
}

*:focus:active {
  outline-width: 0;
}

*[tabindex="-1"],
*[tabindex="-1"]:focus {
  outline: none;
}

*:focus {
  outline: none !important;
}

/* All interactive elements, except disabled ones, when hovered over should show
the pointer cursor. */

a,
button,
details,
input[type="button"],
input[type="color"],
input[type="image"],
input[type="range"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
}

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

/* For the ultimate in accessibility, accesskeys, where relevant, can be visibly
rendered in the :::after pseudo element.  Remember also to describe accesskeys -
the title attribute is a good place for this. */

*[accesskey]::after {
  content: ' [' attr(accesskey) ']';
}

/* Remove the default border around fieldsets. When did you last see this? */

fieldset {
  border: 0;
}

/* Convert the <label> element from inline to block-level - this is how it tends
to be used. */

label {
  display: block;
}

/* Convert buttons and most input controls from inline to block, and get them to
fill the width of their container.  Default backgrounds and borders can be based
on the main text color. */

/* In Webkit on Mac, <select> boxes can fail to inherit some properties, if they
do not have any styling applied to them directly - a strange bug! Just setting a
background color or any other property is enough to eliminate this error. */

button,
input,
select,
textarea {
  background: transparent;
  border: 0;
  color: inherit;
  display: block;
  width: 100%;
}

select[multiple],
select[size] {
  height: auto;
}

input[type="color"] {
  display: inline-block;
  width: 60px;
}

input[type="image"] {
  display: inline-block;
  width: auto;
}

/* Turn off textarea resizing and set overflow to auto... doing this removes the
vertical scrollbar in IE6-9 when there is no overflow. We can change the default
height of textarea boxes; this can be adjusted on a case-by-case basis by adding
the rows attribute. */

textarea {
  min-height: 10em;
  overflow: auto;
  resize: none;
}

/* Internet Explorer versions 8 and 9 have the box-sizing property on radios and
checkboxes set to content-box, rather than border-box - the convention. There is
some excess padding applied in those browsers, too. */

input[type="checkbox"],
input[type="radio"] {
  border-sizing: border-box;
  display: inline-block;
  padding: 0;
  vertical-align: baseline;
  width: auto;
}

/* Buttons are not stylable in iOS by default, but that can be changed simply by
applying the appearance property. All browsers apply their own bespoke chrome to
search boxes; this can be removed in WebKit browsers. */

button {
  appearance: button;
}

input[type="search"] {
  appearance: textfield;
}

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

/* Firefox adds, for accessibility purposes, a small dotted border around button
and input controls that are in focus.  This causes unwanted padding, which makes
precision styling impossible. Happily, ::-moz-focus-inner offers a fix. */

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

/* Similar resets for <select> elements in Firefox: */

select:-moz-focusring,
select::-moz-focus-inner {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

/* This is needed to remove the focus ring from range inputs in some old Firefox
releases. @see https://bugzilla.mozilla.org/show_bug.cgi?id=932410 */

input[type="range"]::-moz-focus-outer {
  border: 0;
}

/* Apply a consistent color for placeholder text. Firefox 19+ gives placeholders
an opacity of 0.54, which needs to be reset for cross-browser consistency. */

::placeholder {
  color: hsl(0, 0%, 70%);
  opacity: 1;
}

/* Remove some non-standard <input type="password"> features from in IE10+. */

input::-ms-clear,
input::-ms-reveal {
  display: none;
}

/* Convert all multimedia containers – images, audo and video, iframes, objects,
and embedded pluggins – from inline to block-level.  This is how they tend to be
used. */

audio,
video {
  display: block;
}

/* Do not display <audio> elements if they don't have playback controls enabled.
That's terrible for usability. */

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

/* Block-level images are configured to fit the width of the container when they
are larger than it.  They are also made to maintain their proportion when scaled
down. Bicubic sampling betters the rendering of resized images in IE > 6. IE 6-9
adds a border around images when they are inside links; border:0 sorts it. */

img {
  border: 0;
  display: block;
  height: auto;
  -ms-interpolation-mode: bicubic;
  max-width: 100%;
}

/* Making <video> elements responsive is tricky. The best solution is to set the
max-width property to 100%.  The video itself will scale down proportionally but
the outer video container will stay a consistent height - producing an unsightly
letterbox effect.  Setting the video element's height to auto doesn't fix this -
the video box just collapses to a default height. The only option it seems is to
give <video> elements a background color so that the letterbox effect doesn't at
least result in weird white space above and below the video.

The very best solution for responsive video is Thierry Koblentz's hack - but you
need to know the dimensions of each video for it to work:
http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ */

video {
  background: hsl(0, 0%, 20%);
  max-width: 100%;
}

/* Canvases can be made to scale proportionally in all modern web browsers. SVGs
are trickier, however. We can set their max-width to 100% but if their height is
set to auto (to maintain proportion when scaled), IE will instead render a fixed
height. Our solution, below, fixes the IE issue, but it means that SVGs, scaled-
down, will be letterboxed, producing extra white space above/below the graphic -
as with videos.  Note: large, dynamically-generated graphics ought to be redrawn
anyway, when their size needs to change, e.g. on window resize. */

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

iframe {
  border: 0;
}

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

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

/* A fix for the non-standard overflow on embedded SVGs in IE9. */

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

/* IE 11 and Android 4.3- do not recognise the new <main> element, and they will
not render it block-level. IE 9+ is okay with other sectioning elements, such as
<aside> and <header>. */

address,
article,
aside,
details,
footer,
header,
main,
nav,
section,
summary {
  display: block;
}

/* Set the display value for <meter> and <progress>, for the benefit of browsers
that do not yet natively support these elements. */

meter,
progress {
  display: inline-block;
}

/* We've also got polyfills for IE's proprietary unselectable attribute, for the
hidden attribute (which is not supported natively in IE 10-, FF 3, Safari 4) and
a partial polyfill for the <template> element. */

*[unselectable] {
  user-select: none;
}

*[hidden],
template {
  display: none !important;
}

/**
 * Layout.
 */

.BACKGROUND {
  position: absolute;
  width: 1106px;
  height: 589px;
  left: 50%;
  margin-left: -553px; /* = half the width */
  top: 0;
  background: url('img/backgrounds/background-merged.png') no-repeat;

/* For mobile nav transition: */
  transition: opacity 0.5s cubic-bezier(0.16, 0.68, 0.43, 0.99) 0s;
  opacity: 1;
}

html.mobile-nav-is-enabled.mobile-nav-is-showing .BACKGROUND {
  opacity: 0;
}

.CONTAINER_OUTER {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
}

.CONTAINER_INNER {
  margin: 0 auto;
  max-width: 119rem;
  padding: 0 2.5rem;
}

@media screen and (min-width: 61.25rem) { /* 980px */

.CONTAINER_INNER {
    padding: 0 5rem;
  }

}

.BANNER {
  align-items: center;
  display: flex;
  height: 11.8rem;
  justify-content: space-between;
  margin-bottom: 7rem;
  padding: 5.5rem 0 2rem;
  position: relative;
}

.BANNER_LOGO {}

.BANNER_MOBILE_MENU {
  display: none;
}
.BANNER_MOBILE_MENU_TOGGLE {}

@media screen and (min-width: 75rem) { /* 1200px */
  .BANNER_MOBILE_MENU_TOGGLE {
    display: none;
  }
}

html.mobile-nav-is-enabled .BANNER_MOBILE_MENU {
  background: hsl(0, 0%, 100%);
  display: block;
  height: 100%;
  left: -100%;
  opacity: 0;
  overflow-y: scroll;
  padding: 2.3rem 2.5rem 10.3rem;
  position: fixed;
  top: 95px;
  transition: opacity 0.5s cubic-bezier(0.16, 0.68, 0.43, 0.99) 0s;
  width: 100%;
  z-index: 100;
}

html.mobile-nav-is-enabled.mobile-nav-is-showing .BANNER_MOBILE_MENU {
  display: block;
  left: 0;
  opacity: 1;
}

html.mobile-nav-is-enabled.mobile-nav-is-showing body {
  overflow: hidden;
}

.BANNER_DESKTOP_MENU {
  display: none;
}

@media screen and (min-width: 75rem) { /* 1200px */
  .BANNER_DESKTOP_MENU {
    display: block;
  }
}

.LANDING {
  margin-bottom: 4rem;
}

/* Special modifier just for the homepage. */
.LANDING--homepage {
  margin-bottom: 7rem;
}

.LANDING__JUMBOTRON {
  margin-bottom: 4rem;
}

.LANDING__PROMOTED {}

.MAIN {}

.MAIN_CONTENT,
.MAIN_CONTENT__NOSIDEBAR {
  margin-bottom: 9rem;
}

.MAIN_CONTENT__NOSIDEBAR {
  max-width: 66rem;
  margin-left: auto;
  margin-right: auto;
}

.MAIN_SIDEBAR {
  display: grid;
  grid-gap: 5rem;
  grid-row-gap: 5rem;
}

@media screen and (min-width: 38.75rem) { /* 620px */

.MAIN_SIDEBAR {
    grid-template-columns: 31rem auto;
  }

}

@media screen and (min-width: 61.25rem) { /* 980px */

.MAIN {
    display: flex;
    width: 100%;
  }

.MAIN_CONTENT {
    flex: 1;
    margin-bottom: 0; /* Reset */
  }

.MAIN_SIDEBAR {
    display: block; /* Reset grid */
    padding-left: 10rem;
    width: 37rem;
  }

.MAIN_SIDEBAR > * {
    margin: 5rem 0;
  }

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

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

}

.READNEXT {
  margin-bottom: 10rem;
}

.FOOTER {
  margin: 10rem 0 7rem;
  display: grid;
  grid-gap: 5rem;
  grid-row-gap: 5rem;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 38.75rem) { /* 620px */

.FOOTER {
    grid-template-columns: 31rem auto;
  }

}

@media screen and (min-width: 61.25rem) { /* 980px */

.FOOTER {
    margin: 15rem 0 10rem;
    grid-template-columns: 31rem 31rem auto;
  }

}

@media screen and (min-width: 1200px) { /* 980px */

.FOOTER {
    margin: 15rem 0 10rem;
    grid-template-columns: 14rem 14rem 14rem 14rem auto;
  }

}

/**
 * Components.
 */

/** ArchiveTop */

.ArchiveTop {}

.ArchiveTop__list {
  list-style: none; /* Turn off numbering on <ol>s */
}

.ArchiveTop__item {
  border-bottom: 1px solid hsl(0, 0%, 93%);
  padding: 4rem 0;
  overflow: hidden;
}

.ArchiveTop__item:first-child {
  padding-top: 0;
}

.ArchiveTop__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/** ArchiveMore */

.ArchiveMore {}

.ArchiveMore__list {
  list-style: none; /* Turn off numbering on <ol>s */
  border-top: 1px solid hsl(0, 0%, 93%);
  margin-top: 5rem;
}

.ArchiveMore__item {
  border-bottom: 1px solid hsl(0, 0%, 93%);
  padding: 2.5rem 0;
  overflow: hidden;
}

.ArchiveMore__btn {
  margin-top: 5rem;
  background: white;
  border: 1px solid hsl(0, 0%, 84%);
  border-radius: 6px;
  color: hsl(0, 0%, 56%);
  padding: 1.5rem 2rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.3px;
}

.ArchiveMore__btn:hover,
.ArchiveMore__btn:focus,
.ArchiveMore__btn:active {
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

/** BackToBlog */

.BackToBlog svg {
  display: inline-block;
  margin-right: 0.5rem;
}

.BackToBlog a {
  display: inline-block;
  background: white;
  border: 1px solid hsl(0, 0%, 84%);
  border-radius: 5rem;
  color: hsl(0, 0%, 56%);
  padding: 0.9rem 1.5rem 1.1rem;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.3px;
}

.BackToBlog a:hover,
.BackToBlog a:focus,
.BackToBlog a:active {
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
}

/** BlogPostHeader */

.BannerImage {
  margin-bottom: 4rem;
}

/** BlogPostHeader */

.BlogPostHeader__title {
  text-align: center;
  margin-bottom: 2.6rem;
  font-weight: 500;
  font-size: 3.9rem;
  line-height: 5rem;
  max-width: 80%;
  margin-right: auto;
  margin-left: auto;
}

.BlogPostHeader__subtitle {
  color: hsl(0, 0%, 50%);
  font-size: 1.9rem;
  text-align: center;
}

/** FooterSection */

.FooterSection {}

/*
.FooterSection {
  margin-bottom: 5rem;
}

.FooterSection:last-child {
  margin-bottom: 0;
}
*/

.FooterSection__list {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
}

.FooterSection__list li {
  margin-bottom: 1em;
}

.FooterSection__list li:last-child {
  margin-bottom: 0;
}

/* .hyperlink_target */
.FooterSection__list a {
  color: hsl(0, 0%, 20%);
  transition: color 0.2s ease 0s;
  white-space: nowrap; /* Required for i18n */
}

/* .hyperlink_target:hover */
.FooterSection__list a:hover {
  color: #1aab9b;
}

/** Footnotes */

.Footnotes {
  align-items: center;
  border-top: 1px solid hsl(0, 0%, 90%);
  color: hsl(0, 0%, 70%);
  display: flex;
  font-size: 1.6rem;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 2rem;
}

.Footnotes__date {}

.Footnotes__share {
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
}

.Footnotes__share li {
  display: inline-block;
  margin-right: 2rem;
}

.Footnotes__share svg {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.6rem;
  vertical-align: -0.2rem;
}

.Footnotes__share li:last-child {
  margin-right: 0;
}

/** Hamburger */

.Hamburger {}

.Hamburger svg {
  position: relative;
  width: 20px;
  height: 16px;
}

.Hamburger svg rect {
  position: absolute;
  transform: rotate(0deg);
  transition: all 0.25s ease-in-out 0s;
}

html.mobile-nav-is-enabled.mobile-nav-is-showing .Hamburger svg rect:nth-child(1) {
  transform: rotate(45deg);
  transform-origin: left top;
}

html.mobile-nav-is-enabled.mobile-nav-is-showing .Hamburger svg rect:nth-child(2) {
  width: 0%;
  opacity: 0;
}

html.mobile-nav-is-enabled.mobile-nav-is-showing .Hamburger svg rect:nth-child(3) {
  transform: rotate(-45deg);
  transform-origin: left bottom;
}

/** Jumbotron */

.Jumbotron {
  margin: 0 auto;
  max-width: 78rem;
  text-align: center;
}

/** Logo */

.Logo {
  transition: transform 0.15s ease 0s;
}

.Logo:hover {
  transform: translateY(-2px);
}

/** MobileNavigation */

.MobileNavigation {}

ul.MobileNavigation__list {}

ul.MobileNavigation__list .menu-subtitle {
  display: none;
}

ul.MobileNavigation__list a {
  display: block;
}

ul.MobileNavigation__list > li {
  cursor: pointer;
  font-size: 2.85rem;
  line-height: normal;
  padding-bottom: 1rem;
  padding-top: 1.4rem;
  position: relative;
}

ul.MobileNavigation__list > li.menu-item-has-children::after {
  transition: transform 0.2s ease 0s;
  content: '';
  mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDE1IDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0tMS4zODA5MWUtMDUgLTQuODU0OThlLTA2TDUuMDk5OTkgNS43N0wtMS4zODA5MWUtMDUgMTEuNTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzLjMyIDEpIHJvdGF0ZSg5MCkiIHN0cm9rZT0iIzIzMTUzNiIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K") center center no-repeat;
  background-color: black;
  width: 2.8rem;
  height: 1.6rem;
  right: 0.6rem;
  position: absolute;
  top: 2.45rem;
}

ul.MobileNavigation__list > li.menu-item-has-children.is-extended::after {
  transform: rotate(180deg);
}

ul.MobileNavigation__list > li > ul {
  display: block;
  opacity: 0;
  height: auto;
  max-height: 0px;
  transform-origin: center top 0px;
  transition: all 0.25s ease-in-out 0s;
  pointer-events: none;
}

ul.MobileNavigation__list > li.menu-item-has-children.is-extended > ul {
  height: auto;
  transform-origin: center top 0px;
  transition: all 0.25s ease-in-out 0s;
  pointer-events: unset;
  max-height: 500px;
  opacity: 1;
  margin: 20px 23px;
}

ul.MobileNavigation__list > li > ul > li {
  pointer-events: unset;
}

ul.MobileNavigation__list > li > ul > li > a {
  line-height: 4.2rem;
  font-size: 2.1rem;
  text-decoration: none;
}

/** NewsletterSignUp */

.NewsletterSignUp__wrapper {
  align-items: center;
  border: 1px solid rgb(212, 217, 225);
  border-radius: 4px;
  display: flex;
  font-size: 1.5rem;
  max-width: 320px;
  padding: 9px 1.4rem;
  position: relative;
  transition: all 200ms ease 0s;
}

.NewsletterSignUp__input {
  background: transparent;
  border: medium none;
  color: rgb(72, 73, 95);
  flex-grow: 1;
  font-size: 1em;
  line-height: 1.6;
  max-width: 320px;
  min-width: 0;
  outline: currentcolor none medium;
}

.NewsletterSignUp__input::placeholder {
  color: hsl(0, 0%, 80%);
  opacity: 1;
}

.NewsletterSignUp__button {
  background-color: transparent;
  border-color: currentcolor currentcolor currentcolor rgb(212, 217, 225);
  border-style: none none none solid;
  border-width: medium medium medium 1px;
  border-image: none 100% / 1 / 0 stretch;
  bottom: 0;
  color: rgb(152, 152, 166);
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  position: absolute;
  right: 0;
  top: 0;
  transition: color 0.125s ease 0s;
  width: 44px;
}

.NewsletterSignUp__button svg {
  margin: 0 auto;
  transition: transform 0.125s ease 0s;
}

.NewsletterSignUp__result {
  margin-top: 8px;
  font-size: 1.4rem;
}

.NewsletterSignUp__result.success {
  color: rgb(26, 171, 155);
}

.NewsletterSignUp__result.error {
  color: rgb(171, 103, 26);
}

/** PrimaryNavigation */

.PrimaryNavigation {
  font-size: 1.75rem;
}

ul.PrimaryNavigation__list {
  align-content: flex-end;
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

ul.PrimaryNavigation__list > li {
  align-self: auto;
  display: block;
  flex: 0 1 auto;
  margin-left: 9rem;
  order: 0;
  position: relative;
  transition: opacity 0.4s ease 0s;
}

ul.PrimaryNavigation__list:hover > li {
  opacity: 0.4;
}

ul.PrimaryNavigation__list:hover > li:hover {
  opacity: 1;
}

ul.PrimaryNavigation__list > li > a {
  margin: -25px;
  padding: 25px;
}

ul.PrimaryNavigation__list > li > ul {
  display: none;
  left: 0;
  margin-left: -3px;
  margin-top: 18px;
  min-width: 5rem;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  visibility: hidden;
}

/* @see https://css-tricks.com/solved-with-css-dropdown-menus/ */
ul.PrimaryNavigation__list > li:hover > ul,
ul.PrimaryNavigation__list > li:focus-within > ul,
ul.PrimaryNavigation__list > li > ul:hover,
ul.PrimaryNavigation__list > li > ul:focus {
  display: block;
  opacity: 1;
  visibility: visible;
}

ul.PrimaryNavigation__list > li > ul > li {
  clear: both;
  width: 100%;
}

ul.PrimaryNavigation__list ul.sub-menu {
  background-color: white;
  border-radius: 4px;
  border: 1px solid rgb(217, 217, 217);
  filter: drop-shadow(rgba(159, 159, 159, 0.18) 0px 1px 2px);
  padding-top: 6px;
  padding-bottom: 8px;
  padding-right: 44px;
  padding-left: 20px;
  z-index: 100;
}

ul.PrimaryNavigation__list ul.sub-menu > li {
  font-size: 1.7rem;
  line-height: 1.6;
  margin-top: 12px;
  margin-bottom: 12px;
  white-space: nowrap;
}

ul.PrimaryNavigation__list ul.sub-menu > li > a:hover {
  color: #1aab9b;
  text-decoration: none;
}

.PrimaryNavigation .menu-subtitle { display: none; }
.PrimaryNavigation ul.sub-menu .menu-subtitle { display: block; }

.PrimaryNavigation ul.sub-menu .menu-subtitle {
  color: hsl(0, 0%, 44%);
}

ul.PrimaryNavigation__list a {
  white-space: nowrap; /* Required for i18n */
  text-decoration: none;
}

/** Promoted / PromotedItem */

.Promoted {}

@media screen and (min-width: 61.25rem) { /* 980px */

.Promoted {
    display: flex;
    width: 100%;
  }

}

.PromotedItem {
  border: 1px solid #D1DEE6;
  border-radius: 8px;
  display: block;
  height: 32rem;
  margin-bottom: 2.5rem;
  overflow: hidden;
  position: relative;
  width: 100%;
}

@media screen and (min-width: 61.25rem) { /* 980px */

.PromotedItem {
    width: 33%;
    margin-right: 4rem;
    margin-bottom: 0;
    min-height: 32rem;
  }

.PromotedItem:last-child {
    margin-right: 0;
  }

}

.PromotedItem__underlay {
  background-position: 95%;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

/* Not needed?
.PromotedItem__overlay__1,
.PromotedItem__overlay__2,
.PromotedItem__overlay__3 {
  background:
    radial-gradient(32.28% 32.28% at 33.94% 67.72%, #F4F0EC 0%, #F6DDB4 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 66.42%, #000000 100%);
  display: block;
  height: 100%;
  left: 0;
  opacity: 0.8;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.PromotedItem__overlay__2 {
  background:
    radial-gradient(50% 50% at 50% 50%, #B9EAE5 0%, #97DED5 92.71%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 66.42%, #000000 100%);;
}

.PromotedItem__overlay__3 {
  background:
    linear-gradient(180deg, #F2C8BA 0%, #FCF1ED 92.19%, #F4D3C6 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 66.42%, #000000 100%);
}
*/

.PromotedItem__link {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

.PromotedItem__article {
  background: white;
  border-top: 1px solid #D1DEE6;
  bottom: 0;
  height: auto;
  left: 0;
  padding: 1.5rem;
  position: absolute;
  width: 100%;
  z-index: 3;
}

/**
 * RichText widget.
 *
 * The `.RichText` class encapsulates all content generated by WP's Gutenberg
 * rich-text content editor.
 *
 * The Gutenberg starter theme was used as reference for this section.
 * @see https://github.com/WordPress/gutenberg-starter-theme/
 */

.RichText h1,
.RichText h2,
.RichText h3,
.RichText h4,
.RichText h5,
.RichText h6 {
  clear: both;
}

.RichText h1,
.RichText .has-huge-font-size,
.RichText .has-larger-font-size {
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0.5em;
  margin-top: 1.8em;
}

.RichText h2,
.RichText .has-large-font-size {
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0.9em;
  margin-top: 1.8em;
}

.RichText h3,
.RichText .has-medium-font-size {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0.9em;
  margin-top: 1.8em;
}

.RichText h4 {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 1em;
  margin-top: 1em;
}

.RichText h5 {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 1em;
  margin-top: 1em;
}

.RichText h6,
.RichText .has-small-font-size {
  color: hsl(0, 0%, 60%);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  line-height: 1.2;
  margin-bottom: 1.8em;
  margin-top: 1em;
  text-transform: uppercase;
}

.RichText p,
.RichText ul,
.RichText ol,
.RichText .has-normal-font-size,
.RichText .has-regular-font-size {
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 1em;
}

.RichText h2:first-child,
.RichText h3:first-child,
.RichText h4:first-child,
.RichText h5:first-child,
.RichText h6:first-child,
.RichText p:first-child,
.RichText ul:first-child,
.RichText ol:first-child,
.RichText .has-small-font-size:first-child,
.RichText .has-normal-font-size:first-child,
.RichText .has-regular-font-size:first-child,
.RichText .has-medium-font-size:first-child,
.RichText .has-large-font-size:first-child,
.RichText .has-huge-font-size:first-child,
.RichText .has-larger-font-size:first-child {
  margin-top: 0;
}

.RichText h2:last-child,
.RichText h3:last-child,
.RichText h4:last-child,
.RichText h5:last-child,
.RichText h6:last-child,
.RichText p:last-child,
.RichText ul:last-child,
.RichText ol:last-child,
.RichText .has-small-font-size:last-child,
.RichText .has-normal-font-size:last-child,
.RichText .has-regular-font-size:last-child,
.RichText .has-medium-font-size:last-child,
.RichText .has-large-font-size:last-child,
.RichText .has-huge-font-size:last-child,
.RichText .has-larger-font-size:last-child {
  margin-bottom: 0;
}

/* Inline images. */
.RichText p img,
.RichText ul img,
.RichText ol img {
  display: inline-block;
}

.RichText ul {
  list-style: square;
  list-style-position: outside;
  margin-left: 1em;
}

.RichText ol {
  list-style-type: decimal;
  list-style-position: outside;
  margin-left: 1em;
}

.RichText li {
  margin-bottom: 0.5em;
}

.RichText li:last-child {
  margin-bottom: 0;
}

/* Nested lists. */
.RichText li > ul,
.RichText li > ol {
  margin-bottom: 0;
  margin-left: 2.5em;
}

.RichText .has-drop-cap:not(:focus)::after {
  content: "";
  display: table;
  clear: both;
}

.RichText .has-drop-cap:not(:focus)::first-letter {
  float: left;
  font-size: 7rem;
  line-height: 0.68;
  font-weight: 500;
  margin: 0.05em 0.1em 0 0;
  text-transform: uppercase;
  font-style: normal;
}

.RichText hr {
  border-top: 2px solid hsl(0, 0%, 84%);
  margin: 2.5rem 0;
}

/* Most custom blocks are wrapped in DIVs. */
.RichText div,
.RichText table,
.RichText *[class^="wp-block-"] {
  margin: 4rem 0;
}

/* Reset for blocks within blocks. */
.RichText *[class^="wp-block-"] *[class^="wp-block-"] {
  margin: 0;
}

/* Override for right-aligned images.*/
.wp-block-image .alignright {
  margin-left: 3em;
}

/* Override for block-image captions.*/
.wp-block-image figcaption {
  margin-top: 1.2em;
}

.RichText figure {}

.RichText figcaption {
  color: hsl(0, 0%, 60%);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 1.2em;
  text-align: center;
}

.RichText blockquote,
.RichText q {
  quotes: "" "";
}

.RichText blockquote:before,
.RichText blockquote:after,
.RichText q:before,
.RichText q:after {
  content: "";
}

.RichText blockquote {
  border-left: 2px solid hsl(0, 4%, 80%);
  margin: 0 2.5rem;
  padding-left: 2em;
  padding-right: 4em;
  text-align: left;
}

.RichText blockquote p {
  font-size: 2.2rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}

.RichText blockquote cite {
  color: hsl(0, 0%, 50%);
  display: block;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 1em;
}

.RichText pre {
  display: block;
  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  width: 100%;
  overflow: auto;
  padding: 0.8em 1em !important; /* Override prettyprint's own CSS. */
  margin: 1rem 0;
}

.RichText p > code {
  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  display: inline;
  padding: 3px 6px;
  border-radius: 2px;
  background: hsl(0, 0%, 93%);
  font-size: 0.9em;
}

/* Hyperlinks and other inline styles. */

.RichText a {
  color: #1aab9b;
  font-weight: 500;
}

/** SocialButtons */

.SocialButtons {}

.SocialButtons ul {
  display: grid;
  column-gap: 24px;
  grid-template-columns: repeat(7, 20px);
}

/**
 * Widgets.
 */

.widget_text p {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 1em;
}

.widget_text p:last-child {
  margin-bottom: 0;
}

.widget_search .maker2020-search-form {
  border: 1px solid hsl(0, 0%, 87%);
  border-radius: 4rem;
  font-family: inherit;
  max-width: 32rem;
  padding: 0 6em 2px 1em;
  position: relative;
}

.widget_search .maker2020-search-field {
  border: 0;
  color: hsl(0, 0%, 0%);
  font-family: inherit;
  font-size: 1.5rem;
  line-height: 2.3;
  width: 100%;
}

.widget_search .maker2020-search-button {
  background: 0;
  border: 0;
  color: hsl(0, 0%, 70%);
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2.3;
  padding: 0 0.4em;
  position: absolute;
  top: 0;
  right: 0;
  width: 6em;
}

.widget_search .maker2020-search-form.is-focus {
  border-color: hsl(0, 0%, 0%);
}

.widget_search .maker2020-search-form.is-focus .maker2020-search-button {
  color: hsl(0, 0%, 0%);
}

/* Remove browser-specific chrome from this particular search box. */
.widget_search input[type="search"]::-webkit-search-decoration,
.widget_search input[type="search"]::-webkit-search-cancel-button,
.widget_search input[type="search"]::-webkit-search-results-button,
.widget_search input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

.widget_categories ul,
.widget_polylang ul {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
}

.widget_categories li,
.widget_polylang li {
  margin-bottom: 1em;
}

.widget_categories li:last-child,
.widget_polylang li:last-child {
  margin-bottom: 0;
}

/* .hyperlink_target */
.widget_categories a,
.widget_polylang a,
.widget_text a {
  color: #1aab9b;
  transition: color 0.1s ease 0s;
}

/* .hyperlink_target:hover */
.widget_categories a:hover,
.widget_polylang a:hover,
.widget_text a:hover {
  color: #10695f;
}

/**
 * Utilities.
 */

.align-content--center {
  align-content: center;
}

.align-content--flex-end {
  align-content: flex-end;
}

.align-content--flex-start {
  align-content: flex-start;
}

.align-content--space-around {
  align-content: space-around;
}

.align-content--space-between {
  align-content: space-between;
}

.align-items--baseline {
  align-items: baseline;
}

.align-items--center {
  align-items: center;
}

.align-items--flex-end {
  align-items: flex-end;
}

.align-items--flex-start {
  align-items: flex-start;
}

.align-items--stretch {
  align-items: stretch;
}

.align-self--auto {
  align-self: auto;
}

.align-self--center {
  align-self: center;
}

.align-self--flex-end {
  align-self: flex-end;
}

.align-self--flex-start {
  align-self: flex-start;
}

.align-self--stretch {
  align-self: stretch;
}

.clear--both {
  clear: both;
}

.clear--left {
  clear: left;
}

.clear--right {
  clear: right;
}

.clearfix::after {
  clear: both;
  content: '';
  display: table;
}

.display--block {
  display: block;
}

.display--flex {
  display: flex;
}

.display--inline {
  display: inline;
}

.display--inline-block {
  display: inline-block;
}

.display--inline-flex {
  display: inline-flex;
}

.display--none {
  display: none;
}

.display--table {
  display: table;
}

.display--table-cell {
  display: table-cell;
}

.display--table-row {
  display: table-row;
}

.flex-direction--column {
  flex-direction: column;
}

.flex-direction--column-reverse {
  flex-direction: column-reverse;
}

.flex-direction--row {
  flex-direction: row;
}

.flex-direction--row-reverse {
  flex-direction: row-reverse;
}

.flex-grow--0 {
  flex-grow: 0;
}

.flex-grow--1 {
  flex-grow: 1;
}

.flex-shrink--0 {
  flex-shrink: 0;
}

.flex-shrink--1 {
  flex-shrink: 1;
}

.flex-wrap--nowrap {
  flex-wrap: nowrap;
}

.flex-wrap--wrap {
  flex-wrap: wrap;
}

.flex-wrap--wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex--auto {
  flex: auto;
}

.flex--initial {
  flex: initial;
}

.flex--none {
  flex: none;
}

.float--left {
  float: left;
}

.float--right {
  float: right;
}

.float--none {
  float: none;
}

.font-weight--400 {
  font-weight: 400;
}

.font-weight--500 {
  font-weight: 500;
}

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

.header--h1 {
  font-size: 4.5rem;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0.5em;
}

.header--h2 {
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 1em;
}

.header--h3 {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0.7em;
}

.header--h4 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1em;
}

.header--h5 {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0.5em;
}

.header--h6 {
  color: hsl(0, 0%, 60%);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  line-height: 1.2;
  margin-bottom: 1.8em;
  text-transform: uppercase;
}

.header--h1:last-child,
.header--h2:last-child,
.header--h3:last-child,
.header--h4:last-child,
.header--h5:last-child,
.header--h6:last-child {
  margin-bottom: 0;
}

.hyperlink_target {
  color: hsl(0, 0%, 20%);
  transition: color 0.2s ease 0s;
}

.hyperlink_block:hover .hyperlink_target,
.hyperlink_target:hover {
  color: #1aab9b;
}

.justify-content--center {
  justify-content: center;
}

.justify-content--flex-end {
  justify-content: flex-end;
}

.justify-content--flex-start {
  justify-content: flex-start;
}

.justify-content--space-around {
  justify-content: space-around;
}

.justify-content--space-between {
  justify-content: space-between;
}

.margin-bottom--3px {
  margin-bottom: 3px;
}

.smallprint {
  color: hsl(0, 0%, 50%);
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: 1em;
}

.smallprint:last-child {
  margin-bottom: 0;
}

.spacer--half {
  clear: both;
  display: block;
  height: 1.25rem;
}

.spacer--1x {
  clear: both;
  display: block;
  height: 2.5rem;
}

.spacer--2x {
  clear: both;
  display: block;
  height: 5rem;
}

.spacer--3x {
  clear: both;
  display: block;
  height: 7.5rem;
}

.spacer--4x {
  clear: both;
  display: block;
  height: 10rem;
}

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

.text-align--justify {
  text-align: justify;
}

.text-align--left {
  text-align: left;
}

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