/*! normalize.css v7.0.0 | 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
 *    IE on Windows Phone and in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  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
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 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
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * 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 style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

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

/**
 * 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
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

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

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

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

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 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;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

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

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

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 and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[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 IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

html {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  font-size: 100%;

  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-rendering: optimizeLegibility;
}

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

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-size:   1rem;
  line-height: 1.5;
  color:       #121212;
}

::-moz-selection {
  background: #2196F3;
  color: #FFFFFF;
}

::selection {
  background: #2196F3;
  color: #FFFFFF;
}

::-moz-selection {
  background: #2196F3;
  color: #FFFFFF;
}

hr {
  margin: 0;
  padding: 0;
  border-top: 0;
  border-bottom: 0.125rem solid #ECEFF1;
}

svg {
  display: inline-block;
  height: auto;
  vertical-align: middle;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

[tabindex="-1"]:focus {
  outline: none !important;
}

.GoalGrid-item {
  transition: -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transform: scale(1.0001);
  transform: scale(1.0001);
}

.GoalGrid-bg::before {
  content: "";
  background: rgba(0, 0, 0, .08);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0, 0, 0.2, 1);
}

.GoalGrid-item:hover .GoalGrid-bg::before {
  opacity: 1;
}

.GoalGrid-iconGlyph {
  transition: -webkit-transform 180ms cubic-bezier(0, 0, 0.2, 1);
  transition: transform 180ms cubic-bezier(0, 0, 0.2, 1);
  transition: transform 180ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0, 0, 0.2, 1);
  transition: transform 180ms cubic-bezier(0, 0, 0.2, 1),
    -webkit-transform 180ms cubic-bezier(0, 0, 0.2, 1);
  will-change: transform;
}

.GoalGrid-item:hover .GoalGrid-iconGlyph {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}

.GoalGrid-item:active .GoalGrid-iconGlyph {
  -webkit-transform: scale(1.0001);
  transform: scale(1.0001);
}

.GoalGrid-item:active {
  -webkit-transform: scale(0.97);
  transform: scale(0.97);
}

.GoalGrid-item:active::before {
  opacity: 0;
  transition: opacity 100ms cubic-bezier(0, 0, 0.2, 1);
}

.GoalGrid-content {
  transition: 100ms cubic-bezier(0, 0, 0.2, 1);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.GoalGrid-item.is-loading .GoalGrid-content {
  opacity: 0;
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
  will-change: transform;
}

.GoalGrid-icon {
  height: 92%;
  margin-top: 8%;
  will-change: transform;
}

.GoalGrid-logo {
  width: 64%;
  position: absolute;
  top: 18%;
  left: 18%;
}

.Icon {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  align-items: stretch;
  width: 100%;
  height: 100%;
  color: currentColor;
  white-space: nowrap;
}

.Icon-label {
  width: 100%;
  color: currentColor;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.Icon-glyph {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  fill: currentColor;
  width: 80%;
  margin-left: 10%;
  margin-top: -4%;
}

/**
 * React Select
 * ============
 * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/
 * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs
 * MIT License: https://github.com/JedWatson/react-select
*/

.Select {
  position: relative;
}

.Select,
.Select div,
.Select input,
.Select span {
  box-sizing: border-box;
}

.Select.is-disabled > .Select-control {
  background-color: transparent;
}

.Select.is-disabled > .Select-control:hover {
  box-shadow: none;
}

.Select.is-disabled .Select-arrow-zone {
  cursor: default;
  pointer-events: none;
  opacity: 0.35;
}

.Select-control {
  background-color: transparent;
  color: currentcolor;
  cursor: default;
  display: table;
  border-spacing: 0;
  border-collapse: separate;
  height: 2.25em;
  outline: none;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.Select-control:after,
.Select-control:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /*height: 0.125rem;*/
  height: 0.0625rem;
  background: currentcolor;
}

.Select-control:after {
  -webkit-transform-origin: left;
          transform-origin: left;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: scale(0,1);
          transform: scale(0,1);
  background: #2196F3;
}

.Select.is-focused .Select-control:after {
  -webkit-transform: scale(1,1);
          transform: scale(1,1);
}

/*.Select-control:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #00ADEE;
}*/

.Select-control:hover {}

.Select-control .Select-input:focus {
  outline: none;
}

.is-searchable.is-open > .Select-control {
  cursor: text;
}

.is-open > .Select-control {
  border-color: #2196F3;
}

.is-open > .Select-control > .Select-arrow {
  border-color: transparent transparent #999;
  border-width: 0 5px 5px;
}

.Select-arrow-zone svg {
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transition: transform 0.3s;
}

.is-open .Select-arrow-zone svg {
  transform: rotate(180deg) translateY(10%);
  -webkit-transform: rotate(180deg) translateY(10%);
}

.is-searchable.is-focused:not(.is-open) > .Select-control {
  cursor: text;
}

.is-focused:not(.is-open) > .Select-control {
  border-color: #575048;
}

.Select-placeholder,
.Select--single > .Select-control .Select-value {
  bottom: 0;
  color: #263238;
  left: 0;
  line-height: 2.125;
  /*padding-left: 1rem;*/
  /*padding-right: 1.5rem;*/
  padding-right: 1.5em;
  position: absolute;
  right: 0;
  top: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.has-value.Select--single > .Select-control .Select-value .Select-value-label,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
  color: currentcolor;
}

.has-value.Select--single > .Select-control .Select-value a.Select-value-label,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {
  cursor: pointer;
  text-decoration: none;
}

.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,
.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {
  /*color: #007eff;*/
  outline: none;
  text-decoration: underline;
}

.Select-input {
  height: 2.125em;
  /*padding-left: 1rem;*/
  padding-right: 1rem;
  vertical-align: middle;
}

.Select-input > input {
  width: 100%;
  background: none transparent;
  border: 0 none;
  box-shadow: none;
  cursor: default;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  outline: none;
  line-height: 2.125;
  padding: 0;
  -webkit-appearance: none;
}

.is-focused .Select-input > input {
  cursor: text;
}

.has-value.is-pseudo-focused .Select-input {
  opacity: 0;
}

.Select-control:not(.is-searchable) > .Select-input {
  outline: none;
}

.Select-loading-zone {
  cursor: pointer;
  display: table-cell;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 16px;
}

.Select-loading {
  -webkit-animation: Select-animation-spin 400ms infinite linear;
  animation: Select-animation-spin 400ms infinite linear;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-right-color: #333;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.Select-clear-zone {
  -webkit-animation: Select-animation-fadeIn 200ms;
  animation: Select-animation-fadeIn 200ms;
  color: #212121;
  cursor: pointer;
  display: table-cell;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 17px;
}

.Select-clear-zone:hover {
  color: #D0021B;
}

.Select-clear {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
}

.Select--multi .Select-clear-zone {
  width: 17px;
}

.Select-arrow-zone {
  cursor: pointer;
  display: table-cell;
  position: relative;
  text-align: center;
  vertical-align: middle;
  /*width: 25px;*/
  width: 1.5em;
}

.Select-arrow {
  border-color: #212121 transparent transparent;
  border-style: solid;
  border-width: 5px 5px 2.5px;
  display: inline-block;
  height: 0;
  width: 0;
}

.is-open .Select-arrow,
.Select-arrow-zone:hover > .Select-arrow {
  border-top-color: #212121;
}

.Select--multi .Select-multi-value-wrapper {
  display: inline-block;
}

.Select .Select-aria-only {
  display: inline-block;
  height: 1px;
  width: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

@-webkit-keyframes Select-animation-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes Select-animation-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.Select-menu-outer {
  background-color: #fff;
  box-shadow: 0 0.125rem 1rem rgba(38, 50, 56, .2);
  box-sizing: border-box;
  max-height: 15.75rem;

  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
}

.Select-menu {
  max-height: 15.75rem;
  overflow-y: auto;
}

.Select-option {
  box-sizing: border-box;
  background-color: #fff;
  color: #263238;
  cursor: pointer;
  display: block;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
}

/*.Select-option:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}*/

.Select-option.is-selected {
  background-color: #CFD8DC;
  color: #607D8B;
}

.Select-option.is-focused {
  background-color: #2196F3;
  color: #CFD8DC;
}

.Select-option.is-disabled {
  color: #90A4AE;
  cursor: default;
}

.Select-noresults {
  box-sizing: border-box;
  color: #607D8B;
  cursor: default;
  display: block;
  padding: 8px 10px;
}

.Select--multi .Select-input {
  vertical-align: middle;
  margin-left: 10px;
  padding: 0;
}

.Select--multi.has-value .Select-input {
  margin-left: 5px;
}

.Select--multi .Select-value {
  background-color: #ebf5ff;
  /* Fallback color for IE 8 */
  background-color: rgba(0, 126, 255, .08);
  border-radius: 2px;
  border: 1px solid #c2e0ff;
  /* Fallback color for IE 8 */
  border: 1px solid rgba(0, 126, 255, .24);
  color: #007eff;
  display: inline-block;
  font-size: 0.9em;
  line-height: 1.4;
  margin-left: 5px;
  margin-top: 5px;
  vertical-align: top;
}

.Select--multi .Select-value-icon,
.Select--multi .Select-value-label {
  display: inline-block;
  vertical-align: middle;
}

.Select--multi .Select-value-label {
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
  cursor: default;
  padding: 2px 5px;
}

.Select--multi a.Select-value-label {
  color: #007eff;
  cursor: pointer;
  text-decoration: none;
}

.Select--multi a.Select-value-label:hover {
  text-decoration: underline;
}

.Select--multi .Select-value-icon {
  cursor: pointer;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
  border-right: 1px solid #c2e0ff;
  /* Fallback color for IE 8 */
  border-right: 1px solid rgba(0, 126, 255, .24);
  padding: 1px 5px 3px;
}

.Select--multi .Select-value-icon:hover,
.Select--multi .Select-value-icon:focus {
  background-color: #d8eafd;
  /* Fallback color for IE 8 */
  background-color: rgba(0, 113, 230, .08);
  color: #0071e6;
}

.Select--multi .Select-value-icon:active {
  background-color: #c2e0ff;
  /* Fallback color for IE 8 */
  background-color: rgba(0, 126, 255, .24);
}

.Select--multi.is-disabled .Select-value {
  background-color: #fcfcfc;
  border: 1px solid #e3e3e3;
  color: #333;
}

.Select--multi.is-disabled .Select-value-icon {
  cursor: not-allowed;
  border-right: 1px solid #e3e3e3;
}

.Select--multi.is-disabled .Select-value-icon:hover,
.Select--multi.is-disabled .Select-value-icon:focus,
.Select--multi.is-disabled .Select-value-icon:active {
  background-color: #fcfcfc;
}

@keyframes Select-animation-spin {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}

@-webkit-keyframes Select-animation-spin {
  to {
    -webkit-transform: rotate(1turn);
  }
}

#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #2196F3;

  position: fixed;
  z-index: 9999999;
  top: 0;
  left: 0;

  width: 100%;
  height: 0.1875rem;
}

#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #2196F3, 0 0 5px #2196F3;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}

#nprogress .spinner {
  display: block;
  position: fixed;
  /*z-index: 1031;*/
  z-index: 999999;
  /*top: 1rem;*/
  top: 2.5rem;
  right: 0.5rem;
  margin-top: -9px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 0.1875rem transparent;
  border-top-color: #2196F3;
  border-left-color: #2196F3;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/*
 * wsdm tooltip
 *
 */

 .wsdm-tooltip {
  display: none;
  padding: 0;
  font-size: 1rem;
  background: rgba(255, 255, 255, .95);
  border-radius: 5px;
  pointer-events: none;
  text-align: center;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .1);
  z-index: 1000;
}
/* .wsdm-tooltip {
  display: none;
  padding: 0;
  margin : 0;
  font-size: 1rem;
  background: rgba(255, 255, 255, .95);
  /* background: transparent !important; */
  /*border : 0;
  border-radius: 0px;
  pointer-events: none;
  text-align: center;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .1);
  z-index: 1000;
} */

/*.wsdm-tooltip:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0.75rem solid transparent;
  border-right: 0.75rem solid transparent;
  border-top: 0.75rem solid rgba(255, 255, 255, 0.95);
  top: 100%;
  left: 50%;
  margin-left: -0.75rem;
}*/

.sldr {
  overflow: visible;
}

.sldr-background {
  background-color: #D8D8D8 !important;
  position: relative !important;
  border-radius: 4px !important;
  height: 4px !important;
  top: 0px !important;
  width: 100% !important
}

.sldr-progress {
  background-color: #10D799 !important;
  position: absolute !important;
  border-radius: 4px !important;
  height: 4px !important;
  top: 0px !important;
}

.sldr-handle, .sldr-play {
  cursor: pointer;
  width: 32px !important;
  height: 32px !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #10D799 !important;
  background-color: #ffffff !important;
  border-radius: 32px !important;
  outline: none !important;
  z-index: 2 !important;
  box-shadow: 0 2px 2px rgba(72, 72, 72, .3) !important;
  margin-left: -16px !important;
  top: -14px !important;
}

.sldr-play {
  position: relative;
  margin: 0 !important;
  color: #666;
}

/* prevent slider's handle overlapping the play button */

.sldr-playable .sldr-holder {
  margin-left: 20px;
}

.sldr-handle:before,
.sldr-handle:after {
  content: '';
  display: block;
  position: absolute;
  background-color: #dadfe8;
}

.sldr-tooltip {
  padding: 0 3px;
  font-size: 10px;
  color: #666;
  background: #fff;
  border: 1px solid #10D799 !important;
  border-radius: 3px;
  transition: opacity 0.3s;
}

.sldr-snap-hint {
  position: absolute;
  top: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #aaa;
  margin-left: -4px;
}

.sldr-snap-hint-active {
  background:  #10D799 !important;
  border-color:  #10D799 !important;
}

/*
 * Links
 *
 */

a {
  color: #2196F3;
  text-decoration: none;
  outline: none;
}

a:hover,
a:focus {
  /* border-bottom: 0.125rem solid currentcolor; */
}

.link--focus-highlight:focus {
  box-shadow: inset 0 0 0 3em rgba(0, 0, 0, .1),
              0 2px 4px rgba(0, 0, 0, .1),
              0 3px 4px rgba(0, 0, 0, .1),
              0 1px 5px rgba(0, 0, 0, .1);
}

.link--underlined {
  border-bottom: 0.125rem solid currentcolor;
}

.link--no-underline,
.link--no-underline:hover,
.link--no-underline:focus {
  border-bottom: none;
}

.btn {
  display: inline-block;
  position: relative;

  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.25;

  background: transparent;
  color: inherit;
  border: 0;
  outline: none;

  padding: 0.5rem;
  cursor: pointer;

  vertical-align: middle;
}

.btn:hover {
  box-shadow: inset 0 0 0 3em rgba(0, 0, 0, .05);
}

.btn:focus {
  box-shadow: inset 0 0 0 3em rgba(0, 0, 0, .1);
}

.btn:active {
  box-shadow: inset 0 0 0 3em rgba(0, 0, 0, .15);
}

.btn--outlined {
  border-color: currentcolor;
}

.btn--outlined:before {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  border-radius: inherit;
  border-width: 0.125rem;
  border-style: solid;
  border-color: inherit;
}

/* Just in case */

.btn--outlined[class*=" border-"] {
  border-width: 0;
}

.btn--outlined.border-0:before { border-width: 0 }

.btn--outlined.border-1:before { border-width: 0.0625rem }

.btn--outlined.border-2:before { border-width: 0.125rem }

.btn--outlined.border-3:before { border-width: 0.1875rem }

.btn--outlined.border-4:before { border-width: 0.25rem }

.btn--outlined.border-5:before { border-width: 0.3125rem }

.btn--outlined.border-6:before { border-width: 0.375rem }

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

h1,h2,h3,h4,h5,h6, p {
  margin-top: 0;
  margin-bottom: 0;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: 300;
}

.font-headline {
  font-family: giorgio;
  word-spacing: 0.1em;
}

/*
 * Font sizes
 *
 */

small,
.text-0   { font-size: 0.875rem; }

.text-1   { font-size: 1rem; }

.text-2   { font-size: 1.25rem; }

.text-3   { font-size: 1.5rem; }

.text-4   { font-size: 2rem; }

.text-5   { font-size: 2.75rem; }

.text-6   { font-size: 3.5rem; }

.text-7   { font-size: 4rem; }

.text-8   { font-size: 5rem; }

.text-9   { font-size: 6rem; }

/*
 * Line height
 *
 * .lh-1 vs. lh-self
 */

.lh-1       { line-height: 1; }

.lh-base    { line-height: 1.5;  }

.lh-small   { line-height: 1.25; }

/*
 * Text align
 *
 */

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

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

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

/*
 * Text weight
 *
 */

b,
strong,
.strong   { font-weight: 700; }

.regular  { font-weight: 400; }

.light    { font-weight: 300; }

.italic { font-style: italic; }

/*
 * Text transform
 *
 */

.uppercase   { text-transform: uppercase;  }

.lowercase   { text-transform: lowercase;  }

.capitalized { text-transform: capitalize; }

/*
 * Text decoration
 *
 */

.underline    { text-decoration: underline;    }

.line-through { text-decoration: line-through; }

@media (min-width: 30em) {
  .xs-text-0   { font-size: 0.875rem; }
  .xs-text-1   { font-size: 1rem; }
  .xs-text-2   { font-size: 1.25rem; }
  .xs-text-3   { font-size: 1.5rem; }
  .xs-text-4   { font-size: 2rem; }
  .xs-text-5   { font-size: 2.75rem; }
  .xs-text-6   { font-size: 3.5rem; }
  .xs-text-7   { font-size: 4rem; }
  .xs-text-8   { font-size: 5rem; }
  .xs-text-9   { font-size: 6rem; }

  .xs-lh-1     { line-height: 1; }
  .xs-lh-base  { line-height: 1.5;  }
  .xs-lh-small { line-height: 1.25; }

  .xs-strong   { font-weight: 700;   }
  .xs-regular  { font-weight: 400;   }
  .xs-light    { font-weight: 300;   }
  .xs-italic   { font-style: italic; }

  .xs-uppercase    { text-transform: uppercase;  }
  .xs-lowercase    { text-transform: lowercase;  }
  .xs-capitalized  { text-transform: capitalize; }

  .xs-underline    { text-decoration: underline;    }
  .xs-line-through { text-decoration: line-through; }

  .xs-text-left,
  .xs-align-left   { text-align: left;   }
  .xs-text-right,
  .xs-align-right  { text-align: right;  }
  .xs-text-center,
  .xs-align-center { text-align: center; }
}

@media (min-width: 48em) {
  .sm-text-0   { font-size: 0.875rem; }
  .sm-text-1   { font-size: 1rem; }
  .sm-text-2   { font-size: 1.25rem; }
  .sm-text-3   { font-size: 1.5rem; }
  .sm-text-4   { font-size: 2rem; }
  .sm-text-5   { font-size: 2.75rem; }
  .sm-text-6   { font-size: 3.5rem; }
  .sm-text-7   { font-size: 4rem; }
  .sm-text-8   { font-size: 5rem; }
  .sm-text-9   { font-size: 6rem; }

  .sm-lh-1     { line-height: 1; }
  .sm-lh-base  { line-height: 1.5;  }
  .sm-lh-small { line-height: 1.25; }

  .sm-strong   { font-weight: 700;   }
  .sm-regular  { font-weight: 400;   }
  .sm-light    { font-weight: 300;   }
  .sm-italic   { font-style: italic; }

  .sm-uppercase    { text-transform: uppercase;  }
  .sm-lowercase    { text-transform: lowercase;  }
  .sm-capitalized  { text-transform: capitalize; }

  .sm-underline    { text-decoration: underline;    }
  .sm-line-through { text-decoration: line-through; }

  .sm-text-left,
  .sm-align-left   { text-align: left;   }
  .sm-text-right,
  .sm-align-right  { text-align: right;  }
  .sm-text-center,
  .sm-align-center { text-align: center; }

}

@media (min-width: 62em) {
  .md-text-0   { font-size: 0.875rem; }
  .md-text-1   { font-size: 1rem; }
  .md-text-2   { font-size: 1.25rem; }
  .md-text-3   { font-size: 1.5rem; }
  .md-text-4   { font-size: 2rem; }
  .md-text-5   { font-size: 2.75rem; }
  .md-text-6   { font-size: 3.5rem; }
  .md-text-7   { font-size: 4rem; }
  .md-text-8   { font-size: 5rem; }
  .md-text-9   { font-size: 6rem; }

  .md-lh-1     { line-height: 1; }
  .md-lh-base  { line-height: 1.5;  }
  .md-lh-small { line-height: 1.25; }

  .md-strong   { font-weight: 700;   }
  .md-regular  { font-weight: 400;   }
  .md-light    { font-weight: 300;   }
  .md-italic   { font-style: italic; }

  .md-uppercase    { text-transform: uppercase;  }
  .md-lowercase    { text-transform: lowercase;  }
  .md-capitalized  { text-transform: capitalize; }

  .md-underline    { text-decoration: underline;    }
  .md-line-through { text-decoration: line-through; }

  .md-text-left,
  .md-align-left   { text-align: left;   }
  .md-text-right,
  .md-align-right  { text-align: right;  }
  .md-text-center,
  .md-align-center { text-align: center; }
}

@media (min-width: 75em) {
  .lg-text-0   { font-size: 0.875rem; }
  .lg-text-1   { font-size: 1rem; }
  .lg-text-2   { font-size: 1.25rem; }
  .lg-text-3   { font-size: 1.5rem; }
  .lg-text-4   { font-size: 2rem; }
  .lg-text-5   { font-size: 2.75rem; }
  .lg-text-6   { font-size: 3.5rem; }
  .lg-text-7   { font-size: 4rem; }
  .lg-text-8   { font-size: 5rem; }
  .lg-text-9   { font-size: 6rem; }

  .lg-lh-1     { line-height: 1; }
  .lg-lh-base  { line-height: 1.5;  }
  .lg-lh-small { line-height: 1.25; }

  .lg-strong   { font-weight: 700;   }
  .lg-regular  { font-weight: 400;   }
  .lg-light    { font-weight: 300;   }
  .lg-italic   { font-style: italic; }

  .lg-uppercase    { text-transform: uppercase;  }
  .lg-lowercase    { text-transform: lowercase;  }
  .lg-capitalized  { text-transform: capitalize; }

  .lg-underline    { text-decoration: underline;    }
  .lg-line-through { text-decoration: line-through; }

  .lg-text-left,
  .lg-align-left   { text-align: left;   }
  .lg-text-right,
  .lg-align-right  { text-align: right;  }
  .lg-text-center,
  .lg-align-center { text-align: center; }
}

@media (min-width: 91em) {
  .xl-text-0   { font-size: 0.875rem; }
  .xl-text-1   { font-size: 1rem; }
  .xl-text-2   { font-size: 1.25rem; }
  .xl-text-3   { font-size: 1.5rem; }
  .xl-text-4   { font-size: 2rem; }
  .xl-text-5   { font-size: 2.75rem; }
  .xl-text-6   { font-size: 3.5rem; }
  .xl-text-7   { font-size: 4rem; }
  .xl-text-8   { font-size: 5rem; }
  .xl-text-9   { font-size: 6rem; }

  .xl-lh-1     { line-height: 1; }
  .xl-lh-base  { line-height: 1.5;  }
  .xl-lh-small { line-height: 1.25; }

  .xl-strong   { font-weight: 700;   }
  .xl-regular  { font-weight: 400;   }
  .xl-light    { font-weight: 300;   }
  .xl-italic   { font-style: italic; }

  .xl-uppercase    { text-transform: uppercase;  }
  .xl-lowercase    { text-transform: lowercase;  }
  .xl-capitalized  { text-transform: capitalize; }

  .xl-underline    { text-decoration: underline;    }
  .xl-line-through { text-decoration: line-through; }

  .xl-text-left,
  .xl-align-left   { text-align: left;   }
  .xl-text-right,
  .xl-align-right  { text-align: right;  }
  .xl-text-center,
  .xl-align-center { text-align: center; }
}

.col {
  position: relative;
  display: block;
  float: left;
  min-height: 1px;
  max-width: 100%;
}

.base-1  { width: 8.33333%  }

.base-2  { width: 16.66667%  }

.base-3  { width: 25%  }

.base-4  { width: 33.33333%  }

.base-5  { width: 41.66667%  }

.base-6  { width: 50%  }

.base-7  { width: 58.33333%  }

.base-8  { width: 66.66667%  }

.base-9  { width: 75%  }

.base-10 { width: 83.33333% }

.base-11 { width: 91.66667% }

.base-12 { width: 100% }

.base-offset-0  { margin-left: 0 }

.base-offset-1  { margin-left: 8.33333% }

.base-offset-2  { margin-left: 16.66667% }

.base-offset-3  { margin-left: 25% }

.base-offset-4  { margin-left: 33.33333% }

.base-offset-5  { margin-left: 41.66667% }

.base-offset-6  { margin-left: 50% }

@media (min-width: 30em) {
  .xs-1  { width: 8.33333%  }
  .xs-2  { width: 16.66667%  }
  .xs-3  { width: 25%  }
  .xs-4  { width: 33.33333%  }
  .xs-5  { width: 41.66667%  }
  .xs-6  { width: 50%  }
  .xs-7  { width: 58.33333%  }
  .xs-8  { width: 66.66667%  }
  .xs-9  { width: 75%  }
  .xs-10 { width: 83.33333% }
  .xs-11 { width: 91.66667% }
  .xs-12 { width: 100% }

  .xs-offset-0  { margin-left: 0 }
  .xs-offset-1  { margin-left: 8.33333% }
  .xs-offset-2  { margin-left: 16.66667% }
  .xs-offset-3  { margin-left: 25% }
  .xs-offset-4  { margin-left: 33.33333% }
  .xs-offset-5  { margin-left: 41.66667% }
  .xs-offset-6  { margin-left: 50% }
}

@media (min-width: 48em) {
  .sm-1  { width: 8.33333%  }
  .sm-2  { width: 16.66667%  }
  .sm-3  { width: 25%  }
  .sm-4  { width: 33.33333%  }
  .sm-5  { width: 41.66667%  }
  .sm-6  { width: 50%  }
  .sm-7  { width: 58.33333%  }
  .sm-8  { width: 66.66667%  }
  .sm-9  { width: 75%  }
  .sm-10 { width: 83.33333% }
  .sm-11 { width: 91.66667% }
  .sm-12 { width: 100% }

  .sm-offset-0  { margin-left: 0 }
  .sm-offset-1  { margin-left: 8.33333% }
  .sm-offset-2  { margin-left: 16.66667% }
  .sm-offset-3  { margin-left: 25% }
  .sm-offset-4  { margin-left: 33.33333% }
  .sm-offset-5  { margin-left: 41.66667% }
  .sm-offset-6  { margin-left: 50% }
}

@media (min-width: 62em) {
  .md-1  { width: 8.33333%  }
  .md-2  { width: 16.66667%  }
  .md-3  { width: 25%  }
  .md-4  { width: 33.33333%  }
  .md-5  { width: 41.66667%  }
  .md-6  { width: 50%  }
  .md-7  { width: 58.33333%  }
  .md-8  { width: 66.66667%  }
  .md-9  { width: 75%  }
  .md-10 { width: 83.33333% }
  .md-11 { width: 91.66667% }
  .md-12 { width: 100% }

  .md-offset-0  { margin-left: 0 }
  .md-offset-1  { margin-left: 8.33333% }
  .md-offset-2  { margin-left: 16.66667% }
  .md-offset-3  { margin-left: 25% }
  .md-offset-4  { margin-left: 33.33333% }
  .md-offset-5  { margin-left: 41.66667% }
  .md-offset-6  { margin-left: 50% }
}

@media (min-width: 75em) {
  .lg-1  { width: 8.33333%  }
  .lg-2  { width: 16.66667%  }
  .lg-3  { width: 25%  }
  .lg-4  { width: 33.33333%  }
  .lg-5  { width: 41.66667%  }
  .lg-6  { width: 50%  }
  .lg-7  { width: 58.33333%  }
  .lg-8  { width: 66.66667%  }
  .lg-9  { width: 75%  }
  .lg-10 { width: 83.33333% }
  .lg-11 { width: 91.66667% }
  .lg-12 { width: 100% }

  .lg-offset-0  { margin-left: 0 }
  .lg-offset-1  { margin-left: 8.33333% }
  .lg-offset-2  { margin-left: 16.66667% }
  .lg-offset-3  { margin-left: 25% }
  .lg-offset-4  { margin-left: 33.33333% }
  .lg-offset-5  { margin-left: 41.66667% }
  .lg-offset-6  { margin-left: 50% }
}

@media (min-width: 91em) {
  .xl-1  { width: 8.33333%  }
  .xl-2  { width: 16.66667%  }
  .xl-3  { width: 25%  }
  .xl-4  { width: 33.33333%  }
  .xl-5  { width: 41.66667%  }
  .xl-6  { width: 50%  }
  .xl-7  { width: 58.33333%  }
  .xl-8  { width: 66.66667%  }
  .xl-9  { width: 75%  }
  .xl-10 { width: 83.33333% }
  .xl-11 { width: 91.66667% }
  .xl-12 { width: 100% }

  .xl-offset-0  { margin-left: 0 }
  .xl-offset-1  { margin-left: 8.33333% }
  .xl-offset-2  { margin-left: 16.66667% }
  .xl-offset-3  { margin-left: 25% }
  .xl-offset-4  { margin-left: 33.33333% }
  .xl-offset-5  { margin-left: 41.66667% }
  .xl-offset-6  { margin-left: 50% }
}

.flex {
  display: -webkit-box;
  display: flex;
}

.flex-column       { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column }

.flex-row          { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row    }

.flex-wrap         { flex-wrap: wrap        }

.flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse }

.flex-row-reverse    { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse    }

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

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

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

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

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

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

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

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

.self-center   { align-self: center     }

.self-baseline { align-self: baseline   }

.self-stretch  { align-self: stretch    }

.justify-start   { -webkit-box-pack: start; justify-content: flex-start    }

.justify-end     { -webkit-box-pack: end; justify-content: flex-end      }

.justify-center  { -webkit-box-pack: center; justify-content: center        }

.justify-between { -webkit-box-pack: justify; justify-content: space-between }

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

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

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

.content-center  { align-content: center        }

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

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

.content-stretch { align-content: stretch       }

.flex-auto {
  -webkit-box-flex: 1;
          flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.flex-none { -webkit-box-flex: 0; flex: none }

.order-0    { -webkit-box-ordinal-group: 1; order: 0     }

.order-1    { -webkit-box-ordinal-group: 2; order: 1     }

.order-2    { -webkit-box-ordinal-group: 3; order: 2     }

.order-3    { -webkit-box-ordinal-group: 4; order: 3     }

.order-last { -webkit-box-ordinal-group: 100000; order: 99999 }

@media (min-width: 30em) {
  .xs-flex {
    display: -webkit-box;
    display: flex;
  }

  .xs-flex-column  { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column }
  .xs-flex-row     { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row    }
  .xs-flex-wrap    { flex-wrap: wrap }

  .xs-flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse }
  .xs-flex-row-reverse    { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse    }
  .xs-flex-wrap-reverse   { flex-wrap: wrap-reverse        }

  .xs-items-start    { -webkit-box-align: start; align-items: flex-start }
  .xs-items-end      { -webkit-box-align: end; align-items: flex-end   }
  .xs-items-center   { -webkit-box-align: center; align-items: center     }
  .xs-items-baseline { -webkit-box-align: baseline; align-items: baseline   }
  .xs-items-stretch  { -webkit-box-align: stretch; align-items: stretch    }

  .xs-self-start    { align-self: flex-start }
  .xs-self-end      { align-self: flex-end   }
  .xs-self-center   { align-self: center     }
  .xs-self-baseline { align-self: baseline   }
  .xs-self-stretch  { align-self: stretch    }

  .xs-justify-start   { -webkit-box-pack: start; justify-content: flex-start    }
  .xs-justify-end     { -webkit-box-pack: end; justify-content: flex-end      }
  .xs-justify-center  { -webkit-box-pack: center; justify-content: center        }
  .xs-justify-between { -webkit-box-pack: justify; justify-content: space-between }
  .xs-justify-around  { justify-content: space-around  }

  .xs-content-start   { align-content: flex-start    }
  .xs-content-end     { align-content: flex-end      }
  .xs-content-center  { align-content: center        }
  .xs-content-between { align-content: space-between }
  .xs-content-around  { align-content: space-around  }
  .xs-content-stretch { align-content: stretch       }

  .xs-flex-auto {
    -webkit-box-flex: 1;
            flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
  }

  .xs-flex-none { -webkit-box-flex: 0; flex: none }

  .xs-order-0    { -webkit-box-ordinal-group: 1; order: 0     }
  .xs-order-1    { -webkit-box-ordinal-group: 2; order: 1     }
  .xs-order-2    { -webkit-box-ordinal-group: 3; order: 2     }
  .xs-order-3    { -webkit-box-ordinal-group: 4; order: 3     }
  .xs-order-last { -webkit-box-ordinal-group: 100000; order: 99999 }
}

@media (min-width: 48em) {
  .sm-flex {
    display: -webkit-box;
    display: flex;
  }

  .sm-flex-column  { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column }
  .sm-flex-row     { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row    }
  .sm-flex-wrap    { flex-wrap: wrap }

  .sm-flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse }
  .sm-flex-row-reverse    { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse    }
  .sm-flex-wrap-reverse   { flex-wrap: wrap-reverse        }

  .sm-items-start    { -webkit-box-align: start; align-items: flex-start }
  .sm-items-end      { -webkit-box-align: end; align-items: flex-end   }
  .sm-items-center   { -webkit-box-align: center; align-items: center     }
  .sm-items-baseline { -webkit-box-align: baseline; align-items: baseline   }
  .sm-items-stretch  { -webkit-box-align: stretch; align-items: stretch    }

  .sm-self-start    { align-self: flex-start }
  .sm-self-end      { align-self: flex-end   }
  .sm-self-center   { align-self: center     }
  .sm-self-baseline { align-self: baseline   }
  .sm-self-stretch  { align-self: stretch    }

  .sm-justify-start   { -webkit-box-pack: start; justify-content: flex-start    }
  .sm-justify-end     { -webkit-box-pack: end; justify-content: flex-end      }
  .sm-justify-center  { -webkit-box-pack: center; justify-content: center        }
  .sm-justify-between { -webkit-box-pack: justify; justify-content: space-between }
  .sm-justify-around  { justify-content: space-around  }

  .sm-content-start   { align-content: flex-start    }
  .sm-content-end     { align-content: flex-end      }
  .sm-content-center  { align-content: center        }
  .sm-content-between { align-content: space-between }
  .sm-content-around  { align-content: space-around  }
  .sm-content-stretch { align-content: stretch       }

  .sm-flex-auto {
    -webkit-box-flex: 1;
            flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
  }

  .sm-flex-none { -webkit-box-flex: 0; flex: none }

  .sm-order-0    { -webkit-box-ordinal-group: 1; order: 0     }
  .sm-order-1    { -webkit-box-ordinal-group: 2; order: 1     }
  .sm-order-2    { -webkit-box-ordinal-group: 3; order: 2     }
  .sm-order-3    { -webkit-box-ordinal-group: 4; order: 3     }
  .sm-order-last { -webkit-box-ordinal-group: 100000; order: 99999 }
}

@media (min-width: 62em) {
  .md-flex {
    display: -webkit-box;
    display: flex;
  }

  .md-flex-column  { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column }
  .md-flex-row     { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row    }
  .md-flex-wrap    { flex-wrap: wrap }

  .md-flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse }
  .md-flex-row-reverse    { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse    }
  .md-flex-wrap-reverse   { flex-wrap: wrap-reverse        }

  .md-items-start    { -webkit-box-align: start; align-items: flex-start }
  .md-items-end      { -webkit-box-align: end; align-items: flex-end   }
  .md-items-center   { -webkit-box-align: center; align-items: center     }
  .md-items-baseline { -webkit-box-align: baseline; align-items: baseline   }
  .md-items-stretch  { -webkit-box-align: stretch; align-items: stretch    }

  .md-self-start    { align-self: flex-start }
  .md-self-end      { align-self: flex-end   }
  .md-self-center   { align-self: center     }
  .md-self-baseline { align-self: baseline   }
  .md-self-stretch  { align-self: stretch    }

  .md-justify-start   { -webkit-box-pack: start; justify-content: flex-start    }
  .md-justify-end     { -webkit-box-pack: end; justify-content: flex-end      }
  .md-justify-center  { -webkit-box-pack: center; justify-content: center        }
  .md-justify-between { -webkit-box-pack: justify; justify-content: space-between }
  .md-justify-around  { justify-content: space-around  }

  .md-content-start   { align-content: flex-start    }
  .md-content-end     { align-content: flex-end      }
  .md-content-center  { align-content: center        }
  .md-content-between { align-content: space-between }
  .md-content-around  { align-content: space-around  }
  .md-content-stretch { align-content: stretch       }

  .md-flex-auto {
    -webkit-box-flex: 1;
            flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
  }

  .md-flex-none { -webkit-box-flex: 0; flex: none }

  .md-order-0    { -webkit-box-ordinal-group: 1; order: 0     }
  .md-order-1    { -webkit-box-ordinal-group: 2; order: 1     }
  .md-order-2    { -webkit-box-ordinal-group: 3; order: 2     }
  .md-order-3    { -webkit-box-ordinal-group: 4; order: 3     }
  .md-order-last { -webkit-box-ordinal-group: 100000; order: 99999 }
}

@media (min-width: 75em) {
  .lg-flex {
    display: -webkit-box;
    display: flex;
  }

  .lg-flex-column  { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column }
  .lg-flex-row     { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row    }
  .lg-flex-wrap    { flex-wrap: wrap }

  .lg-flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse }
  .lg-flex-row-reverse    { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse    }
  .lg-flex-wrap-reverse   { flex-wrap: wrap-reverse        }

  .lg-items-start    { -webkit-box-align: start; align-items: flex-start }
  .lg-items-end      { -webkit-box-align: end; align-items: flex-end   }
  .lg-items-center   { -webkit-box-align: center; align-items: center     }
  .lg-items-baseline { -webkit-box-align: baseline; align-items: baseline   }
  .lg-items-stretch  { -webkit-box-align: stretch; align-items: stretch    }

  .lg-self-start    { align-self: flex-start }
  .lg-self-end      { align-self: flex-end   }
  .lg-self-center   { align-self: center     }
  .lg-self-baseline { align-self: baseline   }
  .lg-self-stretch  { align-self: stretch    }

  .lg-justify-start   { -webkit-box-pack: start; justify-content: flex-start    }
  .lg-justify-end     { -webkit-box-pack: end; justify-content: flex-end      }
  .lg-justify-center  { -webkit-box-pack: center; justify-content: center        }
  .lg-justify-between { -webkit-box-pack: justify; justify-content: space-between }
  .lg-justify-around  { justify-content: space-around  }

  .lg-content-start   { align-content: flex-start    }
  .lg-content-end     { align-content: flex-end      }
  .lg-content-center  { align-content: center        }
  .lg-content-between { align-content: space-between }
  .lg-content-around  { align-content: space-around  }
  .lg-content-stretch { align-content: stretch       }

  .lg-flex-auto {
    -webkit-box-flex: 1;
            flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
  }

  .lg-flex-none { -webkit-box-flex: 0; flex: none }

  .lg-order-0    { -webkit-box-ordinal-group: 1; order: 0     }
  .lg-order-1    { -webkit-box-ordinal-group: 2; order: 1     }
  .lg-order-2    { -webkit-box-ordinal-group: 3; order: 2     }
  .lg-order-3    { -webkit-box-ordinal-group: 4; order: 3     }
  .lg-order-last { -webkit-box-ordinal-group: 100000; order: 99999 }
}

@media (min-width: 91em) {

  .xl-flex {
    display: -webkit-box;
    display: flex;
  }

  .xl-flex-column  { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column }
  .xl-flex-row     { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row    }
  .xl-flex-wrap    { flex-wrap: wrap }

  .xl-flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse }
  .xl-flex-row-reverse    { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse    }
  .xl-flex-wrap-reverse   { flex-wrap: wrap-reverse        }

  .xl-items-start    { -webkit-box-align: start; align-items: flex-start }
  .xl-items-end      { -webkit-box-align: end; align-items: flex-end   }
  .xl-items-center   { -webkit-box-align: center; align-items: center     }
  .xl-items-baseline { -webkit-box-align: baseline; align-items: baseline   }
  .xl-items-stretch  { -webkit-box-align: stretch; align-items: stretch    }

  .xl-self-start    { align-self: flex-start }
  .xl-self-end      { align-self: flex-end   }
  .xl-self-center   { align-self: center     }
  .xl-self-baseline { align-self: baseline   }
  .xl-self-stretch  { align-self: stretch    }

  .xl-justify-start   { -webkit-box-pack: start; justify-content: flex-start    }
  .xl-justify-end     { -webkit-box-pack: end; justify-content: flex-end      }
  .xl-justify-center  { -webkit-box-pack: center; justify-content: center        }
  .xl-justify-between { -webkit-box-pack: justify; justify-content: space-between }
  .xl-justify-around  { justify-content: space-around  }

  .xl-content-start   { align-content: flex-start    }
  .xl-content-end     { align-content: flex-end      }
  .xl-content-center  { align-content: center        }
  .xl-content-between { align-content: space-between }
  .xl-content-around  { align-content: space-around  }
  .xl-content-stretch { align-content: stretch       }

  .xl-flex-auto {
    -webkit-box-flex: 1;
            flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
  }

  .xl-flex-none { -webkit-box-flex: 0; flex: none }

  .xl-order-0    { -webkit-box-ordinal-group: 1; order: 0     }
  .xl-order-1    { -webkit-box-ordinal-group: 2; order: 1     }
  .xl-order-2    { -webkit-box-ordinal-group: 3; order: 2     }
  .xl-order-3    { -webkit-box-ordinal-group: 4; order: 3     }
  .xl-order-last { -webkit-box-ordinal-group: 100000; order: 99999 }
}

/*
 * Visibility
 *
 */

.xs-visible,
.sm-visible,
.md-visible,
.lg-visible,
.xl-visible {
  display: none;
}

.hidden  { display: none; }

/*
 * Display
 *
 */

.inline          { display: inline;       }

.block           { display: block;        }

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

.table           { display: table;        }

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

@media (min-width: 30em) {
  .xs-visible         { display: inherit;      }
  .xs-hidden          { display: none;         }

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

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

@media (min-width: 48em) {
  .sm-visible         { display: inherit;      }
  .sm-hidden          { display: none;         }

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

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

@media (min-width: 62em) {
  .md-visible         { display: inherit;      }
  .md-hidden          { display: none;         }

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

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

@media (min-width: 75em) {
  .lg-visible         { display: inherit;      }
  .lg-hidden          { display: none;         }

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

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

@media (min-width: 91em) {
  .xl-visible         { display: inherit;      }
  .xl-hidden          { display: none;         }

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

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

.p0  { padding:        0; }

.pt0 { padding-top:    0; }

.pr0 { padding-right:  0; }

.pb0 { padding-bottom: 0; }

.pl0 { padding-left:   0; }

.px0 { padding-left:   0; padding-right:  0; }

.py0 { padding-top:    0; padding-bottom: 0; }

.p05  { padding:        0.5rem; }

.pt05 { padding-top:    0.5rem; }

.pr05 { padding-right:  0.5rem; }

.pb05 { padding-bottom: 0.5rem; }

.pl05 { padding-left:   0.5rem; }

.px05 { padding-left:   0.5rem; padding-right:  0.5rem; }

.py05 { padding-top:    0.5rem; padding-bottom: 0.5rem; }

.p1  { padding:        1rem; }

.pt1 { padding-top:    1rem; }

.pr1 { padding-right:  1rem; }

.pb1 { padding-bottom: 1rem; }

.pl1 { padding-left:   1rem; }

.px1 { padding-left:   1rem; padding-right:  1rem; }

.py1 { padding-top:    1rem; padding-bottom: 1rem; }

.p2  { padding:        2rem; }

.pt2 { padding-top:    2rem; }

.pr2 { padding-right:  2rem; }

.pb2 { padding-bottom: 2rem; }

.pl2 { padding-left:   2rem; }

.px2 { padding-left:   2rem; padding-right:  2rem; }

.py2 { padding-top:    2rem; padding-bottom: 2rem; }

.p3  { padding:        3rem; }

.pt3 { padding-top:    3rem; }

.pr3 { padding-right:  3rem; }

.pb3 { padding-bottom: 3rem; }

.pl3 { padding-left:   3rem; }

.px3 { padding-left:   3rem; padding-right:  3rem; }

.py3 { padding-top:    3rem; padding-bottom: 3rem; }

.p4  { padding:        4rem; }

.pt4 { padding-top:    4rem; }

.pr4 { padding-right:  4rem; }

.pb4 { padding-bottom: 4rem; }

.pl4 { padding-left:   4rem; }

.px4 { padding-left:   4rem; padding-right:  4rem; }

.py4 { padding-top:    4rem; padding-bottom: 4rem; }

.p5  { padding:        5rem; }

.pt5 { padding-top:    5rem; }

.pr5 { padding-right:  5rem; }

.pb5 { padding-bottom: 5rem; }

.pl5 { padding-left:   5rem; }

.px5 { padding-left:   5rem; padding-right:  5rem; }

.py5 { padding-top:    5rem; padding-bottom: 5rem; }

.p6  { padding:        6rem; }

.pt6 { padding-top:    6rem; }

.pr6 { padding-right:  6rem; }

.pb6 { padding-bottom: 6rem; }

.pl6 { padding-left:   6rem; }

.px6 { padding-left:   6rem; padding-right:  6rem; }

.py6 { padding-top:    6rem; padding-bottom: 6rem; }

@media (min-width: 30em) {
  .xs-p0  { padding:        0; }
  .xs-pt0 { padding-top:    0; }
  .xs-pr0 { padding-right:  0; }
  .xs-pb0 { padding-bottom: 0; }
  .xs-pl0 { padding-left:   0; }

  .xs-p05  { padding:        0.5rem; }
  .xs-pt05 { padding-top:    0.5rem; }
  .xs-pr05 { padding-right:  0.5rem; }
  .xs-pb05 { padding-bottom: 0.5rem; }
  .xs-pl05 { padding-left:   0.5rem; }

  .xs-p1  { padding:        1rem; }
  .xs-pt1 { padding-top:    1rem; }
  .xs-pr1 { padding-right:  1rem; }
  .xs-pb1 { padding-bottom: 1rem; }
  .xs-pl1 { padding-left:   1rem; }

  .xs-p2  { padding:        2rem; }
  .xs-pt2 { padding-top:    2rem; }
  .xs-pr2 { padding-right:  2rem; }
  .xs-pb2 { padding-bottom: 2rem; }
  .xs-pl2 { padding-left:   2rem; }

  .xs-p3  { padding:        3rem; }
  .xs-pt3 { padding-top:    3rem; }
  .xs-pr3 { padding-right:  3rem; }
  .xs-pb3 { padding-bottom: 3rem; }
  .xs-pl3 { padding-left:   3rem; }

  .xs-p4  { padding:        4rem; }
  .xs-pt4 { padding-top:    4rem; }
  .xs-pr4 { padding-right:  4rem; }
  .xs-pb4 { padding-bottom: 4rem; }
  .xs-pl4 { padding-left:   4rem; }

  .xs-p5  { padding:        5rem; }
  .xs-pt5 { padding-top:    5rem; }
  .xs-pr5 { padding-right:  5rem; }
  .xs-pb5 { padding-bottom: 5rem; }
  .xs-pl5 { padding-left:   5rem; }

  .xs-p6  { padding:        6rem; }
  .xs-pt6 { padding-top:    6rem; }
  .xs-pr6 { padding-right:  6rem; }
  .xs-pb6 { padding-bottom: 6rem; }
  .xs-pl6 { padding-left:   6rem; }

  .xs-px0 { padding-left:   0;                          padding-right:  0;              }
  .xs-px1 { padding-left:   1rem; padding-right:  1rem; }
  .xs-px2 { padding-left:   2rem; padding-right:  2rem; }
  .xs-px3 { padding-left:   3rem; padding-right:  3rem; }
  .xs-px4 { padding-left:   4rem; padding-right:  4rem; }
  .xs-px5 { padding-left:   5rem; padding-right:  5rem; }
  .xs-px6 { padding-left:   6rem; padding-right:  6rem; }

  .xs-py0 { padding-top:   0;                          padding-bottom:  0;              }
  .xs-py1 { padding-top:   1rem; padding-bottom:  1rem; }
  .xs-py2 { padding-top:   2rem; padding-bottom:  2rem; }
  .xs-py3 { padding-top:   3rem; padding-bottom:  3rem; }
  .xs-py4 { padding-top:   4rem; padding-bottom:  4rem; }
  .xs-py5 { padding-top:   5rem; padding-bottom:  5rem; }
  .xs-py6 { padding-top:   6rem; padding-bottom:  6rem; }
}

@media (min-width: 48em) {
  .sm-p0  { padding:        0; }
  .sm-pt0 { padding-top:    0; }
  .sm-pr0 { padding-right:  0; }
  .sm-pb0 { padding-bottom: 0; }
  .sm-pl0 { padding-left:   0; }

  .sm-p05  { padding:        0.5rem; }
  .sm-pt05 { padding-top:    0.5rem; }
  .sm-pr05 { padding-right:  0.5rem; }
  .sm-pb05 { padding-bottom: 0.5rem; }
  .sm-pl05 { padding-left:   0.5rem; }

  .sm-p1  { padding:        1rem; }
  .sm-pt1 { padding-top:    1rem; }
  .sm-pr1 { padding-right:  1rem; }
  .sm-pb1 { padding-bottom: 1rem; }
  .sm-pl1 { padding-left:   1rem; }

  .sm-p2  { padding:        2rem; }
  .sm-pt2 { padding-top:    2rem; }
  .sm-pr2 { padding-right:  2rem; }
  .sm-pb2 { padding-bottom: 2rem; }
  .sm-pl2 { padding-left:   2rem; }

  .sm-p3  { padding:        3rem; }
  .sm-pt3 { padding-top:    3rem; }
  .sm-pr3 { padding-right:  3rem; }
  .sm-pb3 { padding-bottom: 3rem; }
  .sm-pl3 { padding-left:   3rem; }

  .sm-p4  { padding:        4rem; }
  .sm-pt4 { padding-top:    4rem; }
  .sm-pr4 { padding-right:  4rem; }
  .sm-pb4 { padding-bottom: 4rem; }
  .sm-pl4 { padding-left:   4rem; }

  .sm-p5  { padding:        5rem; }
  .sm-pt5 { padding-top:    5rem; }
  .sm-pr5 { padding-right:  5rem; }
  .sm-pb5 { padding-bottom: 5rem; }
  .sm-pl5 { padding-left:   5rem; }

  .sm-p6  { padding:        6rem; }
  .sm-pt6 { padding-top:    6rem; }
  .sm-pr6 { padding-right:  6rem; }
  .sm-pb6 { padding-bottom: 6rem; }
  .sm-pl6 { padding-left:   6rem; }

  .sm-px0 { padding-left:   0;                          padding-right:  0;              }
  .sm-px1 { padding-left:   1rem; padding-right:  1rem; }
  .sm-px2 { padding-left:   2rem; padding-right:  2rem; }
  .sm-px3 { padding-left:   3rem; padding-right:  3rem; }
  .sm-px4 { padding-left:   4rem; padding-right:  4rem; }
  .sm-px5 { padding-left:   5rem; padding-right:  5rem; }
  .sm-px6 { padding-left:   6rem; padding-right:  6rem; }

  .sm-py0 { padding-top:   0;                          padding-bottom:  0;              }
  .sm-py1 { padding-top:   1rem; padding-bottom:  1rem; }
  .sm-py2 { padding-top:   2rem; padding-bottom:  2rem; }
  .sm-py3 { padding-top:   3rem; padding-bottom:  3rem; }
  .sm-py4 { padding-top:   4rem; padding-bottom:  4rem; }
  .sm-py5 { padding-top:   5rem; padding-bottom:  5rem; }
  .sm-py6 { padding-top:   6rem; padding-bottom:  6rem; }
}

@media (min-width: 62em) {
  .md-p0  { padding:        0; }
  .md-pt0 { padding-top:    0; }
  .md-pr0 { padding-right:  0; }
  .md-pb0 { padding-bottom: 0; }
  .md-pl0 { padding-left:   0; }

  .md-p05  { padding:        0.5rem; }
  .md-pt05 { padding-top:    0.5rem; }
  .md-pr05 { padding-right:  0.5rem; }
  .md-pb05 { padding-bottom: 0.5rem; }
  .md-pl05 { padding-left:   0.5rem; }

  .md-p1  { padding:        1rem; }
  .md-pt1 { padding-top:    1rem; }
  .md-pr1 { padding-right:  1rem; }
  .md-pb1 { padding-bottom: 1rem; }
  .md-pl1 { padding-left:   1rem; }

  .md-p2  { padding:        2rem; }
  .md-pt2 { padding-top:    2rem; }
  .md-pr2 { padding-right:  2rem; }
  .md-pb2 { padding-bottom: 2rem; }
  .md-pl2 { padding-left:   2rem; }

  .md-p3  { padding:        3rem; }
  .md-pt3 { padding-top:    3rem; }
  .md-pr3 { padding-right:  3rem; }
  .md-pb3 { padding-bottom: 3rem; }
  .md-pl3 { padding-left:   3rem; }

  .md-p4  { padding:        4rem; }
  .md-pt4 { padding-top:    4rem; }
  .md-pr4 { padding-right:  4rem; }
  .md-pb4 { padding-bottom: 4rem; }
  .md-pl4 { padding-left:   4rem; }

  .md-p5  { padding:        5rem; }
  .md-pt5 { padding-top:    5rem; }
  .md-pr5 { padding-right:  5rem; }
  .md-pb5 { padding-bottom: 5rem; }
  .md-pl5 { padding-left:   5rem; }

  .md-p6  { padding:        6rem; }
  .md-pt6 { padding-top:    6rem; }
  .md-pr6 { padding-right:  6rem; }
  .md-pb6 { padding-bottom: 6rem; }
  .md-pl6 { padding-left:   6rem; }

  .md-px0 { padding-left:   0;                          padding-right:  0;              }
  .md-px1 { padding-left:   1rem; padding-right:  1rem; }
  .md-px2 { padding-left:   2rem; padding-right:  2rem; }
  .md-px3 { padding-left:   3rem; padding-right:  3rem; }
  .md-px4 { padding-left:   4rem; padding-right:  4rem; }
  .md-px5 { padding-left:   5rem; padding-right:  5rem; }
  .md-px6 { padding-left:   6rem; padding-right:  6rem; }

  .md-py0 { padding-top:   0;                          padding-bottom:  0;              }
  .md-py1 { padding-top:   1rem; padding-bottom:  1rem; }
  .md-py2 { padding-top:   2rem; padding-bottom:  2rem; }
  .md-py3 { padding-top:   3rem; padding-bottom:  3rem; }
  .md-py4 { padding-top:   4rem; padding-bottom:  4rem; }
  .md-py5 { padding-top:   5rem; padding-bottom:  5rem; }
  .md-py6 { padding-top:   6rem; padding-bottom:  6rem; }
}

@media (min-width: 75em) {
  .lg-p0  { padding:        0; }
  .lg-pt0 { padding-top:    0; }
  .lg-pr0 { padding-right:  0; }
  .lg-pb0 { padding-bottom: 0; }
  .lg-pl0 { padding-left:   0; }

  .lg-p05  { padding:        0.5rem; }
  .lg-pt05 { padding-top:    0.5rem; }
  .lg-pr05 { padding-right:  0.5rem; }
  .lg-pb05 { padding-bottom: 0.5rem; }
  .lg-pl05 { padding-left:   0.5rem; }

  .lg-p1  { padding:        1rem; }
  .lg-pt1 { padding-top:    1rem; }
  .lg-pr1 { padding-right:  1rem; }
  .lg-pb1 { padding-bottom: 1rem; }
  .lg-pl1 { padding-left:   1rem; }

  .lg-p2  { padding:        2rem; }
  .lg-pt2 { padding-top:    2rem; }
  .lg-pr2 { padding-right:  2rem; }
  .lg-pb2 { padding-bottom: 2rem; }
  .lg-pl2 { padding-left:   2rem; }

  .lg-p3  { padding:        3rem; }
  .lg-pt3 { padding-top:    3rem; }
  .lg-pr3 { padding-right:  3rem; }
  .lg-pb3 { padding-bottom: 3rem; }
  .lg-pl3 { padding-left:   3rem; }

  .lg-p4  { padding:        4rem; }
  .lg-pt4 { padding-top:    4rem; }
  .lg-pr4 { padding-right:  4rem; }
  .lg-pb4 { padding-bottom: 4rem; }
  .lg-pl4 { padding-left:   4rem; }

  .lg-p5  { padding:        5rem; }
  .lg-pt5 { padding-top:    5rem; }
  .lg-pr5 { padding-right:  5rem; }
  .lg-pb5 { padding-bottom: 5rem; }
  .lg-pl5 { padding-left:   5rem; }

  .lg-p6  { padding:        6rem; }
  .lg-pt6 { padding-top:    6rem; }
  .lg-pr6 { padding-right:  6rem; }
  .lg-pb6 { padding-bottom: 6rem; }
  .lg-pl6 { padding-left:   6rem; }

  .lg-px0 { padding-left:   0;                          padding-right:  0;              }
  .lg-px1 { padding-left:   1rem; padding-right:  1rem; }
  .lg-px2 { padding-left:   2rem; padding-right:  2rem; }
  .lg-px3 { padding-left:   3rem; padding-right:  3rem; }
  .lg-px4 { padding-left:   4rem; padding-right:  4rem; }
  .lg-px5 { padding-left:   5rem; padding-right:  5rem; }
  .lg-px6 { padding-left:   6rem; padding-right:  6rem; }

  .lg-py0 { padding-top:   0;                          padding-bottom:  0;              }
  .lg-py1 { padding-top:   1rem; padding-bottom:  1rem; }
  .lg-py2 { padding-top:   2rem; padding-bottom:  2rem; }
  .lg-py3 { padding-top:   3rem; padding-bottom:  3rem; }
  .lg-py4 { padding-top:   4rem; padding-bottom:  4rem; }
  .lg-py5 { padding-top:   5rem; padding-bottom:  5rem; }
  .lg-py6 { padding-top:   6rem; padding-bottom:  6rem; }
}

@media (min-width: 91em) {
  .xl-p0  { padding:        0; }
  .xl-pt0 { padding-top:    0; }
  .xl-pr0 { padding-right:  0; }
  .xl-pb0 { padding-bottom: 0; }
  .xl-pl0 { padding-left:   0; }

  .xl-p05  { padding:        0.5rem; }
  .xl-pt05 { padding-top:    0.5rem; }
  .xl-pr05 { padding-right:  0.5rem; }
  .xl-pb05 { padding-bottom: 0.5rem; }
  .xl-pl05 { padding-left:   0.5rem; }

  .xl-p1  { padding:        1rem; }
  .xl-pt1 { padding-top:    1rem; }
  .xl-pr1 { padding-right:  1rem; }
  .xl-pb1 { padding-bottom: 1rem; }
  .xl-pl1 { padding-left:   1rem; }

  .xl-p2  { padding:        2rem; }
  .xl-pt2 { padding-top:    2rem; }
  .xl-pr2 { padding-right:  2rem; }
  .xl-pb2 { padding-bottom: 2rem; }
  .xl-pl2 { padding-left:   2rem; }

  .xl-p3  { padding:        3rem; }
  .xl-pt3 { padding-top:    3rem; }
  .xl-pr3 { padding-right:  3rem; }
  .xl-pb3 { padding-bottom: 3rem; }
  .xl-pl3 { padding-left:   3rem; }

  .xl-p4  { padding:        4rem; }
  .xl-pt4 { padding-top:    4rem; }
  .xl-pr4 { padding-right:  4rem; }
  .xl-pb4 { padding-bottom: 4rem; }
  .xl-pl4 { padding-left:   4rem; }

  .xl-p5  { padding:        5rem; }
  .xl-pt5 { padding-top:    5rem; }
  .xl-pr5 { padding-right:  5rem; }
  .xl-pb5 { padding-bottom: 5rem; }
  .xl-pl5 { padding-left:   5rem; }

  .xl-p6  { padding:        6rem; }
  .xl-pt6 { padding-top:    6rem; }
  .xl-pr6 { padding-right:  6rem; }
  .xl-pb6 { padding-bottom: 6rem; }
  .xl-pl6 { padding-left:   6rem; }

  .xl-px0 { padding-left:   0;                          padding-right:  0;              }
  .xl-px1 { padding-left:   1rem; padding-right:  1rem; }
  .xl-px2 { padding-left:   2rem; padding-right:  2rem; }
  .xl-px3 { padding-left:   3rem; padding-right:  3rem; }
  .xl-px4 { padding-left:   4rem; padding-right:  4rem; }
  .xl-px5 { padding-left:   5rem; padding-right:  5rem; }
  .xl-px6 { padding-left:   6rem; padding-right:  6rem; }

  .xl-py0 { padding-top:   0;                          padding-bottom:  0;              }
  .xl-py1 { padding-top:   1rem; padding-bottom:  1rem; }
  .xl-py2 { padding-top:   2rem; padding-bottom:  2rem; }
  .xl-py3 { padding-top:   3rem; padding-bottom:  3rem; }
  .xl-py4 { padding-top:   4rem; padding-bottom:  4rem; }
  .xl-py5 { padding-top:   5rem; padding-bottom:  5rem; }
  .xl-py6 { padding-top:   6rem; padding-bottom:  6rem; }
}

.mx-auto { margin-left: auto; margin-right: auto; }

.ml-auto { margin-left: auto  }

.mr-auto { margin-right: auto }

.m0  { margin:        0 }

.mt0 { margin-top:    0 }

.mr0 { margin-right:  0 }

.mb0 { margin-bottom: 0 }

.ml0 { margin-left:   0 }

.mx0 { margin-left:   0; margin-right:  0; }

.my0 { margin-top:    0; margin-bottom: 0; }

.m05  { margin:        0.5rem; }

.mt05 { margin-top:    0.5rem; }

.mr05 { margin-right:  0.5rem; }

.mb05 { margin-bottom: 0.5rem; }

.ml05 { margin-left:   0.5rem; }

.mx05 { margin-left:   0.5rem; margin-right:  0.5rem; }

.my05 { margin-top:    0.5rem; margin-bottom: 0.5rem; }

.m1  { margin:        1rem }

.mt1 { margin-top:    1rem }

.mr1 { margin-right:  1rem }

.mb1 { margin-bottom: 1rem }

.ml1 { margin-left:   1rem }

.mx1 { margin-left:   1rem; margin-right:  1rem; }

.my1 { margin-top:    1rem; margin-bottom: 1rem; }

.mxn1 { margin-left:   -1rem; margin-right:  -1rem; }

.m2  { margin:        2rem }

.mt2 { margin-top:    2rem }

.mr2 { margin-right:  2rem }

.mb2 { margin-bottom: 2rem }

.ml2 { margin-left:   2rem }

.mx2 { margin-left:   2rem; margin-right:  2rem; }

.my2 { margin-top:    2rem; margin-bottom: 2rem; }

.mxn2 { margin-left:   -2rem; margin-right:  -2rem; }

.m3  { margin:        3rem }

.mt3 { margin-top:    3rem }

.mr3 { margin-right:  3rem }

.mb3 { margin-bottom: 3rem }

.ml3 { margin-left:   3rem }

.mx3 { margin-left:   3rem; margin-right:  3rem; }

.my3 { margin-top:    3rem; margin-bottom: 3rem; }

.mxn3 { margin-left:   -3rem; margin-right:  -3rem; }

.m4  { margin:        4rem }

.mt4 { margin-top:    4rem }

.mr4 { margin-right:  4rem }

.mb4 { margin-bottom: 4rem }

.ml4 { margin-left:   4rem }

.mx4 { margin-left:   4rem; margin-right:  4rem; }

.my4 { margin-top:    4rem; margin-bottom: 4rem; }

.mxn4 { margin-left:   -4rem; margin-right:  -4rem; }

.m5  { margin:        5rem }

.mt5 { margin-top:    5rem }

.mr5 { margin-right:  5rem }

.mb5 { margin-bottom: 5rem }

.ml5 { margin-left:   5rem }

.mx5 { margin-left:   5rem; margin-right:  5rem; }

.my5 { margin-top:    5rem; margin-bottom: 5rem; }

.mxn5 { margin-left:   -5rem; margin-right:  -5rem; }

.m6  { margin:        6rem }

.mt6 { margin-top:    6rem }

.mr6 { margin-right:  6rem }

.mb6 { margin-bottom: 6rem }

.ml6 { margin-left:   6rem }

.mx6 { margin-left:   6rem; margin-right:  6rem; }

.my6 { margin-top:    6rem; margin-bottom: 6rem; }

.mxn6 { margin-left:   -6rem; margin-right:  -6rem; }

@media (min-width: 30em) {
  .xs-mx-auto { margin-left: auto; margin-right: auto; }
  .xs-ml-auto { margin-left: auto  }
  .xs-mr-auto { margin-right: auto }

  .xs-m0  { margin:        0 }
  .xs-mt0 { margin-top:    0rem }
  .xs-mr0 { margin-right:  0rem }
  .xs-mb0 { margin-bottom: 0rem }
  .xs-ml0 { margin-left:   0rem }

  .xs-m05  { margin:        0.5rem; }
  .xs-mt05 { margin-top:    0.5rem; }
  .xs-mr05 { margin-right:  0.5rem; }
  .xs-mb05 { margin-bottom: 0.5rem; }
  .xs-ml05 { margin-left:   0.5rem; }

  .xs-m1  { margin:        1rem }
  .xs-mt1 { margin-top:    1rem }
  .xs-mr1 { margin-right:  1rem }
  .xs-mb1 { margin-bottom: 1rem }
  .xs-ml1 { margin-left:   1rem }

  .xs-m2  { margin:        2rem }
  .xs-mt2 { margin-top:    2rem }
  .xs-mr2 { margin-right:  2rem }
  .xs-mb2 { margin-bottom: 2rem }
  .xs-ml2 { margin-left:   2rem }

  .xs-m3 { margin:         3rem }
  .xs-mt3 { margin-top:    3rem }
  .xs-mr3 { margin-right:  3rem }
  .xs-mb3 { margin-bottom: 3rem }
  .xs-ml3 { margin-left:   3rem }

  .xs-m4  { margin:        4rem }
  .xs-mt4 { margin-top:    4rem }
  .xs-mr4 { margin-right:  4rem }
  .xs-mb4 { margin-bottom: 4rem }
  .xs-ml4 { margin-left:   4rem }

  .xs-m5  { margin:        5rem }
  .xs-mt5 { margin-top:    5rem }
  .xs-mr5 { margin-right:  5rem }
  .xs-mb5 { margin-bottom: 5rem }
  .xs-ml5 { margin-left:   5rem }

  .xs-m6  { margin:        6rem }
  .xs-mt6 { margin-top:    6rem }
  .xs-mr6 { margin-right:  6rem }
  .xs-mb6 { margin-bottom: 6rem }
  .xs-ml6 { margin-left:   6rem }

  .xs-mx0 { margin-left:   0;                          margin-right:  0;              }
  .xs-mx1 { margin-left:   1rem; margin-right:  1rem; }
  .xs-mx2 { margin-left:   2rem; margin-right:  2rem; }
  .xs-mx3 { margin-left:   3rem; margin-right:  3rem; }
  .xs-mx4 { margin-left:   4rem; margin-right:  4rem; }
  .xs-mx5 { margin-left:   5rem; margin-right:  5rem; }
  .xs-mx6 { margin-left:   6rem; margin-right:  6rem; }

  .xs-my0 { margin-top:   0;                          margin-bottom:  0;              }
  .xs-my1 { margin-top:   1rem; margin-bottom:  1rem; }
  .xs-my2 { margin-top:   2rem; margin-bottom:  2rem; }
  .xs-my3 { margin-top:   3rem; margin-bottom:  3rem; }
  .xs-my4 { margin-top:   4rem; margin-bottom:  4rem; }
  .xs-my5 { margin-top:   5rem; margin-bottom:  5rem; }
  .xs-my6 { margin-top:   6rem; margin-bottom:  6rem; }

  .xs-mxn1 { margin-left:   -1rem; margin-right:  -1rem; }
  .xs-mxn2 { margin-left:   -2rem; margin-right:  -2rem; }
  .xs-mxn3 { margin-left:   -3rem; margin-right:  -3rem; }
  .xs-mxn4 { margin-left:   -4rem; margin-right:  -4rem; }
  .xs-mxn5 { margin-left:   -5rem; margin-right:  -5rem; }
  .xs-mxn6 { margin-left:   -6rem; margin-right:  -6rem; }
}

@media (min-width: 48em) {
  .sm-mx-auto { margin-left: auto; margin-right: auto; }
  .sm-ml-auto { margin-left: auto  }
  .sm-mr-auto { margin-right: auto }

  .sm-m0  { margin:        0 }
  .sm-mt0 { margin-top:    0rem }
  .sm-mr0 { margin-right:  0rem }
  .sm-mb0 { margin-bottom: 0rem }
  .sm-ml0 { margin-left:   0rem }

  .sm-m05  { margin:        0.5rem; }
  .sm-mt05 { margin-top:    0.5rem; }
  .sm-mr05 { margin-right:  0.5rem; }
  .sm-mb05 { margin-bottom: 0.5rem; }
  .sm-ml05 { margin-left:   0.5rem; }

  .sm-m1  { margin:        1rem }
  .sm-mt1 { margin-top:    1rem }
  .sm-mr1 { margin-right:  1rem }
  .sm-mb1 { margin-bottom: 1rem }
  .sm-ml1 { margin-left:   1rem }

  .sm-m2  { margin:        2rem }
  .sm-mt2 { margin-top:    2rem }
  .sm-mr2 { margin-right:  2rem }
  .sm-mb2 { margin-bottom: 2rem }
  .sm-ml2 { margin-left:   2rem }

  .sm-m3 { margin:         3rem }
  .sm-mt3 { margin-top:    3rem }
  .sm-mr3 { margin-right:  3rem }
  .sm-mb3 { margin-bottom: 3rem }
  .sm-ml3 { margin-left:   3rem }

  .sm-m4  { margin:        4rem }
  .sm-mt4 { margin-top:    4rem }
  .sm-mr4 { margin-right:  4rem }
  .sm-mb4 { margin-bottom: 4rem }
  .sm-ml4 { margin-left:   4rem }

  .sm-m5  { margin:        5rem }
  .sm-mt5 { margin-top:    5rem }
  .sm-mr5 { margin-right:  5rem }
  .sm-mb5 { margin-bottom: 5rem }
  .sm-ml5 { margin-left:   5rem }

  .sm-m6  { margin:        6rem }
  .sm-mt6 { margin-top:    6rem }
  .sm-mr6 { margin-right:  6rem }
  .sm-mb6 { margin-bottom: 6rem }
  .sm-ml6 { margin-left:   6rem }

  .sm-mx0 { margin-left:   0;                          margin-right:  0;              }
  .sm-mx1 { margin-left:   1rem; margin-right:  1rem; }
  .sm-mx2 { margin-left:   2rem; margin-right:  2rem; }
  .sm-mx3 { margin-left:   3rem; margin-right:  3rem; }
  .sm-mx4 { margin-left:   4rem; margin-right:  4rem; }
  .sm-mx5 { margin-left:   5rem; margin-right:  5rem; }
  .sm-mx6 { margin-left:   6rem; margin-right:  6rem; }

  .sm-my0 { margin-top:   0;                          margin-bottom:  0;              }
  .sm-my1 { margin-top:   1rem; margin-bottom:  1rem; }
  .sm-my2 { margin-top:   2rem; margin-bottom:  2rem; }
  .sm-my3 { margin-top:   3rem; margin-bottom:  3rem; }
  .sm-my4 { margin-top:   4rem; margin-bottom:  4rem; }
  .sm-my5 { margin-top:   5rem; margin-bottom:  5rem; }
  .sm-my6 { margin-top:   6rem; margin-bottom:  6rem; }

  .sm-mxn1 { margin-left:   -1rem; margin-right:  -1rem; }
  .sm-mxn2 { margin-left:   -2rem; margin-right:  -2rem; }
  .sm-mxn3 { margin-left:   -3rem; margin-right:  -3rem; }
  .sm-mxn4 { margin-left:   -4rem; margin-right:  -4rem; }
  .sm-mxn5 { margin-left:   -5rem; margin-right:  -5rem; }
  .sm-mxn6 { margin-left:   -6rem; margin-right:  -6rem; }
}

@media (min-width: 62em) {
  .md-mx-auto { margin-left: auto; margin-right: auto; }
  .md-ml-auto { margin-left: auto  }
  .md-mr-auto { margin-right: auto }

  .md-m0  { margin:        0 }
  .md-mt0 { margin-top:    0rem }
  .md-mr0 { margin-right:  0rem }
  .md-mb0 { margin-bottom: 0rem }
  .md-ml0 { margin-left:   0rem }

  .md-m05  { margin:        0.5rem; }
  .md-mt05 { margin-top:    0.5rem; }
  .md-mr05 { margin-right:  0.5rem; }
  .md-mb05 { margin-bottom: 0.5rem; }
  .md-ml05 { margin-left:   0.5rem; }

  .md-m1  { margin:        1rem }
  .md-mt1 { margin-top:    1rem }
  .md-mr1 { margin-right:  1rem }
  .md-mb1 { margin-bottom: 1rem }
  .md-ml1 { margin-left:   1rem }

  .md-m2  { margin:        2rem }
  .md-mt2 { margin-top:    2rem }
  .md-mr2 { margin-right:  2rem }
  .md-mb2 { margin-bottom: 2rem }
  .md-ml2 { margin-left:   2rem }

  .md-m3 { margin:         3rem }
  .md-mt3 { margin-top:    3rem }
  .md-mr3 { margin-right:  3rem }
  .md-mb3 { margin-bottom: 3rem }
  .md-ml3 { margin-left:   3rem }

  .md-m4  { margin:        4rem }
  .md-mt4 { margin-top:    4rem }
  .md-mr4 { margin-right:  4rem }
  .md-mb4 { margin-bottom: 4rem }
  .md-ml4 { margin-left:   4rem }

  .md-m5  { margin:        5rem }
  .md-mt5 { margin-top:    5rem }
  .md-mr5 { margin-right:  5rem }
  .md-mb5 { margin-bottom: 5rem }
  .md-ml5 { margin-left:   5rem }

  .md-m6  { margin:        6rem }
  .md-mt6 { margin-top:    6rem }
  .md-mr6 { margin-right:  6rem }
  .md-mb6 { margin-bottom: 6rem }
  .md-ml6 { margin-left:   6rem }

  .md-mx0 { margin-left:   0;                          margin-right:  0;              }
  .md-mx1 { margin-left:   1rem; margin-right:  1rem; }
  .md-mx2 { margin-left:   2rem; margin-right:  2rem; }
  .md-mx3 { margin-left:   3rem; margin-right:  3rem; }
  .md-mx4 { margin-left:   4rem; margin-right:  4rem; }
  .md-mx5 { margin-left:   5rem; margin-right:  5rem; }
  .md-mx6 { margin-left:   6rem; margin-right:  6rem; }

  .md-my0 { margin-top:   0;                          margin-bottom:  0;              }
  .md-my1 { margin-top:   1rem; margin-bottom:  1rem; }
  .md-my2 { margin-top:   2rem; margin-bottom:  2rem; }
  .md-my3 { margin-top:   3rem; margin-bottom:  3rem; }
  .md-my4 { margin-top:   4rem; margin-bottom:  4rem; }
  .md-my5 { margin-top:   5rem; margin-bottom:  5rem; }
  .md-my6 { margin-top:   6rem; margin-bottom:  6rem; }

  .md-mxn1 { margin-left:   -1rem; margin-right:  -1rem; }
  .md-mxn2 { margin-left:   -2rem; margin-right:  -2rem; }
  .md-mxn3 { margin-left:   -3rem; margin-right:  -3rem; }
  .md-mxn4 { margin-left:   -4rem; margin-right:  -4rem; }
  .md-mxn5 { margin-left:   -5rem; margin-right:  -5rem; }
  .md-mxn6 { margin-left:   -6rem; margin-right:  -6rem; }
}

@media (min-width: 75em) {
  .lg-mx-auto { margin-left: auto; margin-right: auto; }
  .lg-ml-auto { margin-left: auto  }
  .lg-mr-auto { margin-right: auto }

  .lg-m0  { margin:        0 }
  .lg-mt0 { margin-top:    0rem }
  .lg-mr0 { margin-right:  0rem }
  .lg-mb0 { margin-bottom: 0rem }
  .lg-ml0 { margin-left:   0rem }

  .lg-m05  { margin:        0.5rem; }
  .lg-mt05 { margin-top:    0.5rem; }
  .lg-mr05 { margin-right:  0.5rem; }
  .lg-mb05 { margin-bottom: 0.5rem; }
  .lg-ml05 { margin-left:   0.5rem; }

  .lg-m1  { margin:        1rem }
  .lg-mt1 { margin-top:    1rem }
  .lg-mr1 { margin-right:  1rem }
  .lg-mb1 { margin-bottom: 1rem }
  .lg-ml1 { margin-left:   1rem }

  .lg-m2  { margin:        2rem }
  .lg-mt2 { margin-top:    2rem }
  .lg-mr2 { margin-right:  2rem }
  .lg-mb2 { margin-bottom: 2rem }
  .lg-ml2 { margin-left:   2rem }

  .lg-m3 { margin:         3rem }
  .lg-mt3 { margin-top:    3rem }
  .lg-mr3 { margin-right:  3rem }
  .lg-mb3 { margin-bottom: 3rem }
  .lg-ml3 { margin-left:   3rem }

  .lg-m4  { margin:        4rem }
  .lg-mt4 { margin-top:    4rem }
  .lg-mr4 { margin-right:  4rem }
  .lg-mb4 { margin-bottom: 4rem }
  .lg-ml4 { margin-left:   4rem }

  .lg-m5  { margin:        5rem }
  .lg-mt5 { margin-top:    5rem }
  .lg-mr5 { margin-right:  5rem }
  .lg-mb5 { margin-bottom: 5rem }
  .lg-ml5 { margin-left:   5rem }

  .lg-m6  { margin:        6rem }
  .lg-mt6 { margin-top:    6rem }
  .lg-mr6 { margin-right:  6rem }
  .lg-mb6 { margin-bottom: 6rem }
  .lg-ml6 { margin-left:   6rem }

  .lg-mx0 { margin-left:   0;                          margin-right:  0;              }
  .lg-mx1 { margin-left:   1rem; margin-right:  1rem; }
  .lg-mx2 { margin-left:   2rem; margin-right:  2rem; }
  .lg-mx3 { margin-left:   3rem; margin-right:  3rem; }
  .lg-mx4 { margin-left:   4rem; margin-right:  4rem; }
  .lg-mx5 { margin-left:   5rem; margin-right:  5rem; }
  .lg-mx6 { margin-left:   6rem; margin-right:  6rem; }

  .lg-my0 { margin-top:   0;                          margin-bottom:  0;              }
  .lg-my1 { margin-top:   1rem; margin-bottom:  1rem; }
  .lg-my2 { margin-top:   2rem; margin-bottom:  2rem; }
  .lg-my3 { margin-top:   3rem; margin-bottom:  3rem; }
  .lg-my4 { margin-top:   4rem; margin-bottom:  4rem; }
  .lg-my5 { margin-top:   5rem; margin-bottom:  5rem; }
  .lg-my6 { margin-top:   6rem; margin-bottom:  6rem; }

  .lg-mxn1 { margin-left:   -1rem; margin-right:  -1rem; }
  .lg-mxn2 { margin-left:   -2rem; margin-right:  -2rem; }
  .lg-mxn3 { margin-left:   -3rem; margin-right:  -3rem; }
  .lg-mxn4 { margin-left:   -4rem; margin-right:  -4rem; }
  .lg-mxn5 { margin-left:   -5rem; margin-right:  -5rem; }
  .lg-mxn6 { margin-left:   -6rem; margin-right:  -6rem; }
}

@media (min-width: 91em) {
  .xl-mx-auto { margin-left: auto; margin-right: auto; }
  .xl-ml-auto { margin-left: auto  }
  .xl-mr-auto { margin-right: auto }

  .xl-m0  { margin:        0 }
  .xl-mt0 { margin-top:    0rem }
  .xl-mr0 { margin-right:  0rem }
  .xl-mb0 { margin-bottom: 0rem }
  .xl-ml0 { margin-left:   0rem }

  .xl-m05  { margin:        0.5rem; }
  .xl-mt05 { margin-top:    0.5rem; }
  .xl-mr05 { margin-right:  0.5rem; }
  .xl-mb05 { margin-bottom: 0.5rem; }
  .xl-ml05 { margin-left:   0.5rem; }

  .xl-m1  { margin:        1rem }
  .xl-mt1 { margin-top:    1rem }
  .xl-mr1 { margin-right:  1rem }
  .xl-mb1 { margin-bottom: 1rem }
  .xl-ml1 { margin-left:   1rem }

  .xl-m2  { margin:        2rem }
  .xl-mt2 { margin-top:    2rem }
  .xl-mr2 { margin-right:  2rem }
  .xl-mb2 { margin-bottom: 2rem }
  .xl-ml2 { margin-left:   2rem }

  .xl-m3 { margin:         3rem }
  .xl-mt3 { margin-top:    3rem }
  .xl-mr3 { margin-right:  3rem }
  .xl-mb3 { margin-bottom: 3rem }
  .xl-ml3 { margin-left:   3rem }

  .xl-m4  { margin:        4rem }
  .xl-mt4 { margin-top:    4rem }
  .xl-mr4 { margin-right:  4rem }
  .xl-mb4 { margin-bottom: 4rem }
  .xl-ml4 { margin-left:   4rem }

  .xl-m5  { margin:        5rem }
  .xl-mt5 { margin-top:    5rem }
  .xl-mr5 { margin-right:  5rem }
  .xl-mb5 { margin-bottom: 5rem }
  .xl-ml5 { margin-left:   5rem }

  .xl-m6  { margin:        6rem }
  .xl-mt6 { margin-top:    6rem }
  .xl-mr6 { margin-right:  6rem }
  .xl-mb6 { margin-bottom: 6rem }
  .xl-ml6 { margin-left:   6rem }

  .xl-mx0 { margin-left:   0;                          margin-right:  0;              }
  .xl-mx1 { margin-left:   1rem; margin-right:  1rem; }
  .xl-mx2 { margin-left:   2rem; margin-right:  2rem; }
  .xl-mx3 { margin-left:   3rem; margin-right:  3rem; }
  .xl-mx4 { margin-left:   4rem; margin-right:  4rem; }
  .xl-mx5 { margin-left:   5rem; margin-right:  5rem; }
  .xl-mx6 { margin-left:   6rem; margin-right:  6rem; }

  .xl-my0 { margin-top:   0;                          margin-bottom:  0;              }
  .xl-my1 { margin-top:   1rem; margin-bottom:  1rem; }
  .xl-my2 { margin-top:   2rem; margin-bottom:  2rem; }
  .xl-my3 { margin-top:   3rem; margin-bottom:  3rem; }
  .xl-my4 { margin-top:   4rem; margin-bottom:  4rem; }
  .xl-my5 { margin-top:   5rem; margin-bottom:  5rem; }
  .xl-my6 { margin-top:   6rem; margin-bottom:  6rem; }

  .xl-mxn1 { margin-left:   -1rem; margin-right:  -1rem; }
  .xl-mxn2 { margin-left:   -2rem; margin-right:  -2rem; }
  .xl-mxn3 { margin-left:   -3rem; margin-right:  -3rem; }
  .xl-mxn4 { margin-left:   -4rem; margin-right:  -4rem; }
  .xl-mxn5 { margin-left:   -5rem; margin-right:  -5rem; }
  .xl-mxn6 { margin-left:   -6rem; margin-right:  -6rem; }
}

/*Wrapping*/

.no-wrap { white-space: nowrap; }

/*Vertical align*/

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

.align-top       { vertical-align: top;      }

.align-middle    { vertical-align: middle;   }

.align-bottom    { vertical-align: bottom;   }

/*Oveflow*/

.overflow-hidden { overflow: hidden; }

.overflow-scroll { overflow: scroll; }

.overflow-auto   { overflow: auto;   }

/*Float*/

.left  { float: left;  }

.right { float: right; }

/*Transforms*/

.translateY-50  { -webkit-transform: translateY(50%); transform: translateY(50%);  }

.translateY-n50 { -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.translateX-50  { -webkit-transform: translateX(50%); transform: translateX(50%);  }

.translateX-n50 { -webkit-transform: translateX(-50%); transform: translateX(-50%); }

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after { clear: both; }

/*max-width/max-height*/

.max-width-none  { max-width: none;  }

.max-height-none { max-height: none; }

.max-width-100   { max-width: 100%;  }

.max-height-100  { max-height: 100%; }

/*border-radius*/

.border-radius-0    { border-radius: 0      }

.border-radius-100  { border-radius: 100%   }

.border-radius-pill { border-radius: 9999px }

/*z index*/

.z-index-0    { z-index: 0;       }

.z-index-1    { z-index: 1;       }

.z-index-2    { z-index: 2;       }

.z-index-3    { z-index: 3;       }

.z-index-4    { z-index: 4;       }

.z-index-5    { z-index: 5;       }

.z-index-10   { z-index: 10;      }

.z-index-20   { z-index: 20;      }

.z-index-100  { z-index: 100;     }

.z-index-max  { z-index: 999999;  }

@media (min-width: 30em) {
  .xs-no-wrap         { white-space: nowrap;         }

  .xs-align-baseline  { vertical-align: baseline;    }
  .xs-align-top       { vertical-align: top;         }
  .xs-align-middle    { vertical-align: middle;      }
  .xs-align-bottom    { vertical-align: bottom;      }

  .xs-overflow-hidden { overflow: hidden;            }
  .xs-overflow-scroll { overflow: scroll;            }
  .xs-overflow-auto   { overflow: auto;              }

  .xs-left            { float: left;                 }
  .xs-right           { float: right;                }

  .xs-translateY-50  { -webkit-transform: translateY(50%); transform: translateY(50%);  }
  .xs-translateY-n50 { -webkit-transform: translateY(-50%); transform: translateY(-50%); }
  .xs-translateX-50  { -webkit-transform: translateX(50%); transform: translateX(50%);  }
  .xs-translateX-n50 { -webkit-transform: translateX(-50%); transform: translateX(-50%); }

  .xs-max-width-none  { max-width: none;  }
  .xs-max-height-none { max-height: none; }
  .xs-max-width-100   { max-width: 100%;  }
  .xs-max-height-100  { max-height: 100%; }
}

@media (min-width: 48em) {
  .sm-no-wrap         { white-space: nowrap;         }

  .sm-align-baseline  { vertical-align: baseline;    }
  .sm-align-top       { vertical-align: top;         }
  .sm-align-middle    { vertical-align: middle;      }
  .sm-align-bottom    { vertical-align: bottom;      }

  .sm-overflow-hidden { overflow: hidden;            }
  .sm-overflow-scroll { overflow: scroll;            }
  .sm-overflow-auto   { overflow: auto;              }

  .sm-left            { float: left;                 }
  .sm-right           { float: right;                }

  .sm-translateY-50  { -webkit-transform: translateY(50%); transform: translateY(50%);  }
  .sm-translateY-n50 { -webkit-transform: translateY(-50%); transform: translateY(-50%); }
  .sm-translateX-50  { -webkit-transform: translateX(50%); transform: translateX(50%);  }
  .sm-translateX-n50 { -webkit-transform: translateX(-50%); transform: translateX(-50%); }

  .sm-max-width-none  { max-width: none;  }
  .sm-max-height-none { max-height: none; }
  .sm-max-width-100   { max-width: 100%;  }
  .sm-max-height-100  { max-height: 100%; }
}

@media (min-width: 62em) {
  .md-no-wrap         { white-space: nowrap;         }

  .md-align-baseline  { vertical-align: baseline;    }
  .md-align-top       { vertical-align: top;         }
  .md-align-middle    { vertical-align: middle;      }
  .md-align-bottom    { vertical-align: bottom;      }

  .md-overflow-hidden { overflow: hidden;            }
  .md-overflow-scroll { overflow: scroll;            }
  .md-overflow-auto   { overflow: auto;              }

  .md-left            { float: left;                 }
  .md-right           { float: right;                }

  .md-translateY-50  { -webkit-transform: translateY(50%); transform: translateY(50%);  }
  .md-translateY-n50 { -webkit-transform: translateY(-50%); transform: translateY(-50%); }
  .md-translateX-50  { -webkit-transform: translateX(50%); transform: translateX(50%);  }
  .md-translateX-n50 { -webkit-transform: translateX(-50%); transform: translateX(-50%); }

  .md-max-width-none  { max-width: none;  }
  .md-max-height-none { max-height: none; }
  .md-max-width-100   { max-width: 100%;  }
  .md-max-height-100  { max-height: 100%; }
}

@media (min-width: 75em) {
  .lg-no-wrap         { white-space: nowrap;         }

  .lg-align-baseline  { vertical-align: baseline;    }
  .lg-align-top       { vertical-align: top;         }
  .lg-align-middle    { vertical-align: middle;      }
  .lg-align-bottom    { vertical-align: bottom;      }

  .lg-overflow-hidden { overflow: hidden;            }
  .lg-overflow-scroll { overflow: scroll;            }
  .lg-overflow-auto   { overflow: auto;              }

  .lg-left            { float: left;                 }
  .lg-right           { float: right;                }

  .lg-translateY-50  { -webkit-transform: translateY(50%); transform: translateY(50%);  }
  .lg-translateY-n50 { -webkit-transform: translateY(-50%); transform: translateY(-50%); }
  .lg-translateX-50  { -webkit-transform: translateX(50%); transform: translateX(50%);  }
  .lg-translateX-n50 { -webkit-transform: translateX(-50%); transform: translateX(-50%); }

  .lg-max-width-none  { max-width: none;  }
  .lg-max-height-none { max-height: none; }
  .lg-max-width-100   { max-width: 100%;  }
  .lg-max-height-100  { max-height: 100%; }
}

@media (min-width: 91em) {
  .xl-no-wrap         { white-space: nowrap;         }

  .xl-align-baseline  { vertical-align: baseline;    }
  .xl-align-top       { vertical-align: top;         }
  .xl-align-middle    { vertical-align: middle;      }
  .xl-align-bottom    { vertical-align: bottom;      }

  .xl-overflow-hidden { overflow: hidden;            }
  .xl-overflow-scroll { overflow: scroll;            }
  .xl-overflow-auto   { overflow: auto;              }

  .xl-left            { float: left;                 }
  .xl-right           { float: right;                }

  .xl-translateY-50  { -webkit-transform: translateY(50%); transform: translateY(50%);  }
  .xl-translateY-n50 { -webkit-transform: translateY(-50%); transform: translateY(-50%); }
  .xl-translateX-50  { -webkit-transform: translateX(50%); transform: translateX(50%);  }
  .xl-translateX-n50 { -webkit-transform: translateX(-50%); transform: translateX(-50%); }

  .xl-max-width-none  { max-width: none;  }
  .xl-max-height-none { max-height: none; }
  .xl-max-width-100   { max-width: 100%;  }
  .xl-max-height-100  { max-height: 100%; }
}

.border-none   { border: 0; }

.border-all    { border: 0.125rem solid currentcolor        }

.border-top    { border-top: 0.125rem solid currentcolor    }

.border-bottom { border-bottom: 0.125rem solid currentcolor }

.border-left   { border-left: 0.125rem solid currentcolor   }

.border-right  { border-right: 0.125rem solid currentcolor  }

.border-x      {
  border-left: 0.125rem solid currentcolor;
  border-right: 0.125rem solid currentcolor;
}

.border-y {
  border-top: 0.125rem solid currentcolor;
  border-bottom: 0.125rem solid currentcolor;
}

.border-1 { border-width: 0.0625rem }

.border-2 { border-width: 0.125rem }

.border-3 { border-width: 0.1875rem }

.border-4 { border-width: 0.25rem }

.border-6 { border-width: 0.375rem }

.border-8 { border-width: 0.5rem }

.border-transparent { border-color: transparent            }

.border-default     { border-color: #121212 }

.border-current     { border-color: currentcolor           }

.border-inherit     { border-color: inherit                }

.border-primary     { border-color: #2196F3   }

.border-secondary   { border-color: #CFD8DC }

.border-red         { border-color: #F44336         }

.border-pink        { border-color: #E91E63        }

.border-purple      { border-color: #9C27B0      }

.border-indigo      { border-color: #3F51B5      }

.border-blue        { border-color: #2196F3        }

.border-light-blue  { border-color: #03A9F4  }

.border-cyan        { border-color: #00BCD4        }

.border-teal        { border-color: #009688        }

.border-green       { border-color: #4CAF50       }

.border-light-green { border-color: #8BC34A }

.border-lime        { border-color: #CDDC39        }

.border-yellow      { border-color: #FFEB3B      }

.border-amber       { border-color: #FFC107       }

.border-orange      { border-color: #FF9800      }

.border-deep-orange { border-color: #FF5722 }

.border-brown       { border-color: #795548       }

.border-white       { border-color: #FFFFFF }

.border-grey-100  { border-color: #CFD8DC }

.border-grey-200  { border-color: #B0BEC5 }

.border-grey-300  { border-color: #90A4AE }

.border-grey-400  { border-color: #78909C }

.border-grey-500  { border-color: #607D8B }

.border-grey-600  { border-color: #546E7A }

.border-grey-700  { border-color: #455A64 }

.border-grey-800  { border-color: #263238 }

/*
 * background colors
 *
 */

.bg-primary     { background: #2196F3;   color: #FFFFFF;   }

.bg-secondary   { background: #CFD8DC; color: #607D8B; }

.bg-white       { background: #FFFFFF }

.bg-transparent { background: transparent        }

.bg-grey-25   { background: #F7F8F9  }

.bg-grey-50   { background: #ECEFF1  }

.bg-grey-100  { background: #CFD8DC }

.bg-grey-200  { background: #B0BEC5 }

.bg-grey-300  { background: #90A4AE }

.bg-grey-400  { background: #78909C }

.bg-grey-500  { background: #607D8B }

.bg-grey-600  { background: #546E7A }

.bg-grey-700  { background: #455A64 }

.bg-grey-800  { background: #263238 }

.bg-grey-900  { background: #121212 }

.bg-red       { background: #CA1C24       }

.bg-blue      { background: #527EC8      }

.bg-dark-blue { background: #325EA8 }

.bg-yellow    { background: #FDD117    }

/*
 * social media colors
 *
 */

/*
 * text colors
 *
 */

.color-default   { color: #121212 }

.color-inherit   { color: inherit                }

.color-primary   { color: #2196F3   }

.color-secondary { color: #CFD8DC }

.color-white       { color: #FFFFFF }

.color-grey-25   { color: #F7F8F9  }

.color-grey-50   { color: #ECEFF1  }

.color-grey-100  { color: #CFD8DC }

.color-grey-200  { color: #B0BEC5 }

.color-grey-300  { color: #90A4AE }

.color-grey-400  { color: #78909C }

.color-grey-500  { color: #607D8B }

.color-grey-600  { color: #546E7A }

.color-grey-700  { color: #455A64 }

.color-grey-800  { color: #263238 }

.color-grey-900  { color: #121212 }

.color-red       { color: #CA1C24       }

.color-blue      { color: #527EC8      }

.color-dark-blue { color: #325EA8 }

.color-yellow    { color: #FDD117    }

/*
 * SDG colors
 *
 */

.bg-sdg-1  { background: #e5243b }

.bg-sdg-2  { background: #DDA63A }

.bg-sdg-3  { background: #4C9F38 }

.bg-sdg-4  { background: #C5192D }

.bg-sdg-5  { background: #FF3A21 }

.bg-sdg-6  { background: #26BDE2 }

.bg-sdg-7  { background: #FCC30B }

.bg-sdg-8  { background: #A21942 }

.bg-sdg-9  { background: #FD6925 }

.bg-sdg-10 { background: #DD1367 }

.bg-sdg-11 { background: #FD9D24 }

.bg-sdg-12 { background: #BF8B2E }

.bg-sdg-13 { background: #3F7E44 }

.bg-sdg-14 { background: #0A97D9 }

.bg-sdg-15 { background: #56C02B }

.bg-sdg-16 { background: #00689D }

.bg-sdg-17 { background: #19486A }

.color-sdg-1  { color: #e5243b }

.color-sdg-2  { color: #DDA63A }

.color-sdg-3  { color: #4C9F38 }

.color-sdg-4  { color: #C5192D }

.color-sdg-5  { color: #FF3A21 }

.color-sdg-6  { color: #26BDE2 }

.color-sdg-7  { color: #FCC30B }

.color-sdg-8  { color: #A21942 }

.color-sdg-9  { color: #FD6925 }

.color-sdg-10 { color: #DD1367 }

.color-sdg-11 { color: #FD9D24 }

.color-sdg-12 { color: #BF8B2E }

.color-sdg-13 { color: #3F7E44 }

.color-sdg-14 { color: #0A97D9 }

.color-sdg-15 { color: #56C02B }

.color-sdg-16 { color: #00689D }

.color-sdg-17 { color: #19486A }

@media (min-width: 30em) {
  .xs-bg-primary     { background: #2196F3;   color: #FFFFFF;   }
  .xs-bg-secondary   { background: #CFD8DC; color: #607D8B; }
  .xs-bg-white       { background: #FFFFFF }
  .xs-bg-transparent { background: transparent        }

  .xs-bg-grey-100  { background: #CFD8DC }
  .xs-bg-grey-200  { background: #B0BEC5 }
  .xs-bg-grey-300  { background: #90A4AE }
  .xs-bg-grey-400  { background: #78909C }
  .xs-bg-grey-500  { background: #607D8B }
  .xs-bg-grey-600  { background: #546E7A }
  .xs-bg-grey-700  { background: #455A64 }
  .xs-bg-grey-800  { background: #263238 }
  .xs-bg-grey-900  { background: #121212 }

  .xs-color-default   { color: #121212 }
  .xs-color-inherit   { color: inherit                }

  .xs-color-primary   { color: #2196F3   }
  .xs-color-secondary { color: #CFD8DC }

  .xs-color-white       { color: #FFFFFF }

  .xs-color-grey-100  { color: #CFD8DC }
  .xs-color-grey-200  { color: #B0BEC5 }
  .xs-color-grey-300  { color: #90A4AE }
  .xs-color-grey-400  { color: #78909C }
  .xs-color-grey-500  { color: #607D8B }
  .xs-color-grey-600  { color: #546E7A }
  .xs-color-grey-700  { color: #455A64 }
  .xs-color-grey-800  { color: #263238 }
  .xs-color-grey-900  { color: #121212 }

  .xs-bg-sdg-1  { background: #e5243b }
  .xs-bg-sdg-2  { background: #DDA63A }
  .xs-bg-sdg-3  { background: #4C9F38 }
  .xs-bg-sdg-4  { background: #C5192D }
  .xs-bg-sdg-5  { background: #FF3A21 }
  .xs-bg-sdg-6  { background: #26BDE2 }
  .xs-bg-sdg-7  { background: #FCC30B }
  .xs-bg-sdg-8  { background: #A21942 }
  .xs-bg-sdg-9  { background: #FD6925 }
  .xs-bg-sdg-10 { background: #DD1367 }
  .xs-bg-sdg-11 { background: #FD9D24 }
  .xs-bg-sdg-12 { background: #BF8B2E }
  .xs-bg-sdg-13 { background: #3F7E44 }
  .xs-bg-sdg-14 { background: #0A97D9 }
  .xs-bg-sdg-15 { background: #56C02B }
  .xs-bg-sdg-16 { background: #00689D }
  .xs-bg-sdg-17 { background: #19486A }

  .xs-color-sdg-1  { color: #e5243b }
  .xs-color-sdg-2  { color: #DDA63A }
  .xs-color-sdg-3  { color: #4C9F38 }
  .xs-color-sdg-4  { color: #C5192D }
  .xs-color-sdg-5  { color: #FF3A21 }
  .xs-color-sdg-6  { color: #26BDE2 }
  .xs-color-sdg-7  { color: #FCC30B }
  .xs-color-sdg-8  { color: #A21942 }
  .xs-color-sdg-9  { color: #FD6925 }
  .xs-color-sdg-10 { color: #DD1367 }
  .xs-color-sdg-11 { color: #FD9D24 }
  .xs-color-sdg-12 { color: #BF8B2E }
  .xs-color-sdg-13 { color: #3F7E44 }
  .xs-color-sdg-14 { color: #0A97D9 }
  .xs-color-sdg-15 { color: #56C02B }
  .xs-color-sdg-16 { color: #00689D }
  .xs-color-sdg-17 { color: #19486A }

  .xs-bg-red       { background: #CA1C24       }
  .xs-bg-blue      { background: #527EC8      }
  .xs-bg-dark-blue { background: #325EA8 }
  .xs-bg-yellow    { background: #FDD117    }

  .xs-color-red       { color: #CA1C24       }
  .xs-color-blue      { color: #527EC8      }
  .xs-color-dark-blue { color: #325EA8 }
  .xs-color-yellow    { color: #FDD117    }
}

@media (min-width: 48em) {
  .sm-bg-primary     { background: #2196F3;   color: #FFFFFF;   }
  .sm-bg-secondary   { background: #CFD8DC; color: #607D8B; }
  .sm-bg-white       { background: #FFFFFF }
  .sm-bg-transparent { background: transparent        }

  .sm-bg-grey-100  { background: #CFD8DC }
  .sm-bg-grey-200  { background: #B0BEC5 }
  .sm-bg-grey-300  { background: #90A4AE }
  .sm-bg-grey-400  { background: #78909C }
  .sm-bg-grey-500  { background: #607D8B }
  .sm-bg-grey-600  { background: #546E7A }
  .sm-bg-grey-700  { background: #455A64 }
  .sm-bg-grey-800  { background: #263238 }
  .sm-bg-grey-900  { background: #121212 }

  .sm-color-default   { color: #121212 }
  .sm-color-inherit   { color: inherit                }

  .sm-color-primary   { color: #2196F3   }
  .sm-color-secondary { color: #CFD8DC }

  .sm-color-white       { color: #FFFFFF }

  .sm-color-grey-100  { color: #CFD8DC }
  .sm-color-grey-200  { color: #B0BEC5 }
  .sm-color-grey-300  { color: #90A4AE }
  .sm-color-grey-400  { color: #78909C }
  .sm-color-grey-500  { color: #607D8B }
  .sm-color-grey-600  { color: #546E7A }
  .sm-color-grey-700  { color: #455A64 }
  .sm-color-grey-800  { color: #263238 }
  .sm-color-grey-900  { color: #121212 }

  .sm-bg-sdg-1  { background: #e5243b }
  .sm-bg-sdg-2  { background: #DDA63A }
  .sm-bg-sdg-3  { background: #4C9F38 }
  .sm-bg-sdg-4  { background: #C5192D }
  .sm-bg-sdg-5  { background: #FF3A21 }
  .sm-bg-sdg-6  { background: #26BDE2 }
  .sm-bg-sdg-7  { background: #FCC30B }
  .sm-bg-sdg-8  { background: #A21942 }
  .sm-bg-sdg-9  { background: #FD6925 }
  .sm-bg-sdg-10 { background: #DD1367 }
  .sm-bg-sdg-11 { background: #FD9D24 }
  .sm-bg-sdg-12 { background: #BF8B2E }
  .sm-bg-sdg-13 { background: #3F7E44 }
  .sm-bg-sdg-14 { background: #0A97D9 }
  .sm-bg-sdg-15 { background: #56C02B }
  .sm-bg-sdg-16 { background: #00689D }
  .sm-bg-sdg-17 { background: #19486A }

  .sm-color-sdg-1  { color: #e5243b }
  .sm-color-sdg-2  { color: #DDA63A }
  .sm-color-sdg-3  { color: #4C9F38 }
  .sm-color-sdg-4  { color: #C5192D }
  .sm-color-sdg-5  { color: #FF3A21 }
  .sm-color-sdg-6  { color: #26BDE2 }
  .sm-color-sdg-7  { color: #FCC30B }
  .sm-color-sdg-8  { color: #A21942 }
  .sm-color-sdg-9  { color: #FD6925 }
  .sm-color-sdg-10 { color: #DD1367 }
  .sm-color-sdg-11 { color: #FD9D24 }
  .sm-color-sdg-12 { color: #BF8B2E }
  .sm-color-sdg-13 { color: #3F7E44 }
  .sm-color-sdg-14 { color: #0A97D9 }
  .sm-color-sdg-15 { color: #56C02B }
  .sm-color-sdg-16 { color: #00689D }
  .sm-color-sdg-17 { color: #19486A }

  .sm-bg-red       { background: #CA1C24       }
  .sm-bg-blue      { background: #527EC8      }
  .sm-bg-dark-blue { background: #325EA8 }
  .sm-bg-yellow    { background: #FDD117    }

  .sm-color-red       { color: #CA1C24       }
  .sm-color-blue      { color: #527EC8      }
  .sm-color-dark-blue { color: #325EA8 }
  .sm-color-yellow    { color: #FDD117    }
}

@media (min-width: 62em) {
  .md-bg-primary     { background: #2196F3;   color: #FFFFFF;   }
  .md-bg-secondary   { background: #CFD8DC; color: #607D8B; }
  .md-bg-white       { background: #FFFFFF }
  .md-bg-transparent { background: transparent        }

  .md-bg-grey-100  { background: #CFD8DC }
  .md-bg-grey-200  { background: #B0BEC5 }
  .md-bg-grey-300  { background: #90A4AE }
  .md-bg-grey-400  { background: #78909C }
  .md-bg-grey-500  { background: #607D8B }
  .md-bg-grey-600  { background: #546E7A }
  .md-bg-grey-700  { background: #455A64 }
  .md-bg-grey-800  { background: #263238 }
  .md-bg-grey-900  { background: #121212 }

  .md-color-default   { color: #121212 }
  .md-color-inherit   { color: inherit                }

  .md-color-primary   { color: #2196F3   }
  .md-color-secondary { color: #CFD8DC }

  .md-color-white       { color: #FFFFFF }

  .md-color-grey-100  { color: #CFD8DC }
  .md-color-grey-200  { color: #B0BEC5 }
  .md-color-grey-300  { color: #90A4AE }
  .md-color-grey-400  { color: #78909C }
  .md-color-grey-500  { color: #607D8B }
  .md-color-grey-600  { color: #546E7A }
  .md-color-grey-700  { color: #455A64 }
  .md-color-grey-800  { color: #263238 }
  .md-color-grey-900  { color: #121212 }

  .md-bg-sdg-1  { background: #e5243b }
  .md-bg-sdg-2  { background: #DDA63A }
  .md-bg-sdg-3  { background: #4C9F38 }
  .md-bg-sdg-4  { background: #C5192D }
  .md-bg-sdg-5  { background: #FF3A21 }
  .md-bg-sdg-6  { background: #26BDE2 }
  .md-bg-sdg-7  { background: #FCC30B }
  .md-bg-sdg-8  { background: #A21942 }
  .md-bg-sdg-9  { background: #FD6925 }
  .md-bg-sdg-10 { background: #DD1367 }
  .md-bg-sdg-11 { background: #FD9D24 }
  .md-bg-sdg-12 { background: #BF8B2E }
  .md-bg-sdg-13 { background: #3F7E44 }
  .md-bg-sdg-14 { background: #0A97D9 }
  .md-bg-sdg-15 { background: #56C02B }
  .md-bg-sdg-16 { background: #00689D }
  .md-bg-sdg-17 { background: #19486A }

  .md-color-sdg-1  { color: #e5243b }
  .md-color-sdg-2  { color: #DDA63A }
  .md-color-sdg-3  { color: #4C9F38 }
  .md-color-sdg-4  { color: #C5192D }
  .md-color-sdg-5  { color: #FF3A21 }
  .md-color-sdg-6  { color: #26BDE2 }
  .md-color-sdg-7  { color: #FCC30B }
  .md-color-sdg-8  { color: #A21942 }
  .md-color-sdg-9  { color: #FD6925 }
  .md-color-sdg-10 { color: #DD1367 }
  .md-color-sdg-11 { color: #FD9D24 }
  .md-color-sdg-12 { color: #BF8B2E }
  .md-color-sdg-13 { color: #3F7E44 }
  .md-color-sdg-14 { color: #0A97D9 }
  .md-color-sdg-15 { color: #56C02B }
  .md-color-sdg-16 { color: #00689D }
  .md-color-sdg-17 { color: #19486A }

  .md-bg-red       { background: #CA1C24       }
  .md-bg-blue      { background: #527EC8      }
  .md-bg-dark-blue { background: #325EA8 }
  .md-bg-yellow    { background: #FDD117    }

  .md-color-red       { color: #CA1C24       }
  .md-color-blue      { color: #527EC8      }
  .md-color-dark-blue { color: #325EA8 }
  .md-color-yellow    { color: #FDD117    }
}

@media (min-width: 75em) {
  .lg-bg-primary     { background: #2196F3;   color: #FFFFFF;   }
  .lg-bg-secondary   { background: #CFD8DC; color: #607D8B; }
  .lg-bg-white       { background: #FFFFFF }
  .lg-bg-transparent { background: transparent        }

  .lg-bg-grey-100  { background: #CFD8DC }
  .lg-bg-grey-200  { background: #B0BEC5 }
  .lg-bg-grey-300  { background: #90A4AE }
  .lg-bg-grey-400  { background: #78909C }
  .lg-bg-grey-500  { background: #607D8B }
  .lg-bg-grey-600  { background: #546E7A }
  .lg-bg-grey-700  { background: #455A64 }
  .lg-bg-grey-800  { background: #263238 }
  .lg-bg-grey-900  { background: #121212 }

  .lg-color-default   { color: #121212 }
  .lg-color-inherit   { color: inherit                }

  .lg-color-primary   { color: #2196F3   }
  .lg-color-secondary { color: #CFD8DC }

  .lg-color-white       { color: #FFFFFF }

  .lg-color-grey-100  { color: #CFD8DC }
  .lg-color-grey-200  { color: #B0BEC5 }
  .lg-color-grey-300  { color: #90A4AE }
  .lg-color-grey-400  { color: #78909C }
  .lg-color-grey-500  { color: #607D8B }
  .lg-color-grey-600  { color: #546E7A }
  .lg-color-grey-700  { color: #455A64 }
  .lg-color-grey-800  { color: #263238 }
  .lg-color-grey-900  { color: #121212 }

  .lg-bg-sdg-1  { background: #e5243b }
  .lg-bg-sdg-2  { background: #DDA63A }
  .lg-bg-sdg-3  { background: #4C9F38 }
  .lg-bg-sdg-4  { background: #C5192D }
  .lg-bg-sdg-5  { background: #FF3A21 }
  .lg-bg-sdg-6  { background: #26BDE2 }
  .lg-bg-sdg-7  { background: #FCC30B }
  .lg-bg-sdg-8  { background: #A21942 }
  .lg-bg-sdg-9  { background: #FD6925 }
  .lg-bg-sdg-10 { background: #DD1367 }
  .lg-bg-sdg-11 { background: #FD9D24 }
  .lg-bg-sdg-12 { background: #BF8B2E }
  .lg-bg-sdg-13 { background: #3F7E44 }
  .lg-bg-sdg-14 { background: #0A97D9 }
  .lg-bg-sdg-15 { background: #56C02B }
  .lg-bg-sdg-16 { background: #00689D }
  .lg-bg-sdg-17 { background: #19486A }

  .lg-color-sdg-1  { color: #e5243b }
  .lg-color-sdg-2  { color: #DDA63A }
  .lg-color-sdg-3  { color: #4C9F38 }
  .lg-color-sdg-4  { color: #C5192D }
  .lg-color-sdg-5  { color: #FF3A21 }
  .lg-color-sdg-6  { color: #26BDE2 }
  .lg-color-sdg-7  { color: #FCC30B }
  .lg-color-sdg-8  { color: #A21942 }
  .lg-color-sdg-9  { color: #FD6925 }
  .lg-color-sdg-10 { color: #DD1367 }
  .lg-color-sdg-11 { color: #FD9D24 }
  .lg-color-sdg-12 { color: #BF8B2E }
  .lg-color-sdg-13 { color: #3F7E44 }
  .lg-color-sdg-14 { color: #0A97D9 }
  .lg-color-sdg-15 { color: #56C02B }
  .lg-color-sdg-16 { color: #00689D }
  .lg-color-sdg-17 { color: #19486A }

  .lg-bg-red       { background: #CA1C24       }
  .lg-bg-blue      { background: #527EC8      }
  .lg-bg-dark-blue { background: #325EA8 }
  .lg-bg-yellow    { background: #FDD117    }

  .lg-color-red       { color: #CA1C24       }
  .lg-color-blue      { color: #527EC8      }
  .lg-color-dark-blue { color: #325EA8 }
  .lg-color-yellow    { color: #FDD117    }
}

@media (min-width: 91em) {
  .xl-bg-primary     { background: #2196F3;   color: #FFFFFF;   }
  .xl-bg-secondary   { background: #CFD8DC; color: #607D8B; }
  .xl-bg-white       { background: #FFFFFF }
  .xl-bg-transparent { background: transparent        }

  .xl-bg-grey-100  { background: #CFD8DC }
  .xl-bg-grey-200  { background: #B0BEC5 }
  .xl-bg-grey-300  { background: #90A4AE }
  .xl-bg-grey-400  { background: #78909C }
  .xl-bg-grey-500  { background: #607D8B }
  .xl-bg-grey-600  { background: #546E7A }
  .xl-bg-grey-700  { background: #455A64 }
  .xl-bg-grey-800  { background: #263238 }
  .xl-bg-grey-900  { background: #121212 }

  .xl-color-default   { color: #121212 }
  .xl-color-inherit   { color: inherit                }

  .xl-color-primary   { color: #2196F3   }
  .xl-color-secondary { color: #CFD8DC }

  .xl-color-white       { color: #FFFFFF }

  .xl-color-grey-100  { color: #CFD8DC }
  .xl-color-grey-200  { color: #B0BEC5 }
  .xl-color-grey-300  { color: #90A4AE }
  .xl-color-grey-400  { color: #78909C }
  .xl-color-grey-500  { color: #607D8B }
  .xl-color-grey-600  { color: #546E7A }
  .xl-color-grey-700  { color: #455A64 }
  .xl-color-grey-800  { color: #263238 }
  .xl-color-grey-900  { color: #121212 }

  .xl-bg-sdg-1  { background: #e5243b }
  .xl-bg-sdg-2  { background: #DDA63A }
  .xl-bg-sdg-3  { background: #4C9F38 }
  .xl-bg-sdg-4  { background: #C5192D }
  .xl-bg-sdg-5  { background: #FF3A21 }
  .xl-bg-sdg-6  { background: #26BDE2 }
  .xl-bg-sdg-7  { background: #FCC30B }
  .xl-bg-sdg-8  { background: #A21942 }
  .xl-bg-sdg-9  { background: #FD6925 }
  .xl-bg-sdg-10 { background: #DD1367 }
  .xl-bg-sdg-11 { background: #FD9D24 }
  .xl-bg-sdg-12 { background: #BF8B2E }
  .xl-bg-sdg-13 { background: #3F7E44 }
  .xl-bg-sdg-14 { background: #0A97D9 }
  .xl-bg-sdg-15 { background: #56C02B }
  .xl-bg-sdg-16 { background: #00689D }
  .xl-bg-sdg-17 { background: #19486A }

  .xl-color-sdg-1  { color: #e5243b }
  .xl-color-sdg-2  { color: #DDA63A }
  .xl-color-sdg-3  { color: #4C9F38 }
  .xl-color-sdg-4  { color: #C5192D }
  .xl-color-sdg-5  { color: #FF3A21 }
  .xl-color-sdg-6  { color: #26BDE2 }
  .xl-color-sdg-7  { color: #FCC30B }
  .xl-color-sdg-8  { color: #A21942 }
  .xl-color-sdg-9  { color: #FD6925 }
  .xl-color-sdg-10 { color: #DD1367 }
  .xl-color-sdg-11 { color: #FD9D24 }
  .xl-color-sdg-12 { color: #BF8B2E }
  .xl-color-sdg-13 { color: #3F7E44 }
  .xl-color-sdg-14 { color: #0A97D9 }
  .xl-color-sdg-15 { color: #56C02B }
  .xl-color-sdg-16 { color: #00689D }
  .xl-color-sdg-17 { color: #19486A }

  .xl-bg-red       { background: #CA1C24       }
  .xl-bg-blue      { background: #527EC8      }
  .xl-bg-dark-blue { background: #325EA8 }
  .xl-bg-yellow    { background: #FDD117    }

  .xl-color-red       { color: #CA1C24       }
  .xl-color-blue      { color: #527EC8      }
  .xl-color-dark-blue { color: #325EA8 }
  .xl-color-yellow    { color: #FDD117    }
}

.shadow-0 {
  box-shadow: none;
}

.shadow-1 {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.shadow-2 {
  box-shadow: 0 16px 30px rgba(0, 0, 0, .1);
}

/*.shadow-1 {
  box-shadow: 0 0 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
              0 2px 2px rgba(0, 0, 0, var(--shadow-opacity-1)),
              0 1px 3px rgba(0, 0, 0, var(--shadow-opacity-3));
}

.shadow-2 {
  box-shadow: 0 2px 4px rgba(0, 0, 0, var(--shadow-opacity-2)),
              0 3px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
              0 1px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
}

.shadow-3 {
  box-shadow: 0 3px 3px rgba(0, 0, 0, var(--shadow-opacity-2)),
              0 3px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
              0 1px 8px rgba(0, 0, 0, var(--shadow-opacity-3));
}

.shadow-4 {
  box-shadow: 0 2px 4px rgba(0, 0, 0, var(--shadow-opacity-2)),
              0 4px 5px rgba(0, 0, 0, var(--shadow-opacity-1)),
              0 1px 10px rgba(0, 0, 0, var(--shadow-opacity-3));
}

.shadow-5 {
  box-shadow: 0 6px 10px rgba(0, 0, 0, var(--shadow-opacity-2)),
              0 1px 18px rgba(0, 0, 0, var(--shadow-opacity-1)),
              0 3px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
}

.shadow-6 {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, var(--shadow-opacity-2)),
              0 3px 14px 3px rgba(0, 0, 0, var(--shadow-opacity-1)),
              0 4px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
}

.shadow-7 {
  box-shadow: 0 9px 12px 1px rgba(0, 0, 0, var(--shadow-opacity-2)),
              0 3px 16px 2px rgba(0, 0, 0, var(--shadow-opacity-1)),
              0 5px 6px rgba(0, 0, 0, var(--shadow-opacity-3));
}

.shadow-8 {
  box-shadow: 0 12px 17px 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
              0 5px 22px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
              0 7px 8px rgba(0, 0, 0, var(--shadow-opacity-3));
}

.shadow-9 {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
              0 6px 30px 5px rgba(0, 0, 0, var(--shadow-opacity-1)),
              0 8px 10px rgba(0, 0, 0, var(--shadow-opacity-3));
}

.shadow-10 {
  box-shadow: 0 24px 38px 3px rgba(0, 0, 0, var(--shadow-opacity-2)),
              0 9px 46px 8px rgba(0, 0, 0, var(--shadow-opacity-1)),
              0 11px 15px rgba(0, 0, 0, var(--shadow-opacity-3));
}*/

@media (min-width: 30em) {
  .xs-shadow-0 {
    box-shadow: none;
  }
  .xs-shadow-1 {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  }

  .xs-shadow-2 {
    box-shadow: 0 16px 30px rgba(0, 0, 0, .1);
  }

  /*.xs-shadow-1 {
    box-shadow: 0 0 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 2px 2px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 3px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xs-shadow-2 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xs-shadow-3 {
    box-shadow: 0 3px 3px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 8px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xs-shadow-4 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 4px 5px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 10px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xs-shadow-5 {
    box-shadow: 0 6px 10px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 1px 18px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 3px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xs-shadow-6 {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 14px 3px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 4px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xs-shadow-7 {
    box-shadow: 0 9px 12px 1px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 16px 2px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 5px 6px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xs-shadow-8 {
    box-shadow: 0 12px 17px 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 5px 22px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 7px 8px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xs-shadow-9 {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 6px 30px 5px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 8px 10px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xs-shadow-10 {
    box-shadow: 0 24px 38px 3px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 9px 46px 8px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 11px 15px rgba(0, 0, 0, var(--shadow-opacity-3));
  }*/
}

@media (min-width: 48em) {
  .sm-shadow-0 {
    box-shadow: none;
  }
  .sm-shadow-1 {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  }

  .sm-shadow-2 {
    box-shadow: 0 16px 30px rgba(0, 0, 0, .1);
  }

  /*.sm-shadow-1 {
    box-shadow: 0 0 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 2px 2px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 3px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .sm-shadow-2 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .sm-shadow-3 {
    box-shadow: 0 3px 3px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 8px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .sm-shadow-4 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 4px 5px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 10px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .sm-shadow-5 {
    box-shadow: 0 6px 10px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 1px 18px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 3px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .sm-shadow-6 {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 14px 3px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 4px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .sm-shadow-7 {
    box-shadow: 0 9px 12px 1px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 16px 2px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 5px 6px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .sm-shadow-8 {
    box-shadow: 0 12px 17px 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 5px 22px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 7px 8px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .sm-shadow-9 {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 6px 30px 5px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 8px 10px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .sm-shadow-10 {
    box-shadow: 0 24px 38px 3px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 9px 46px 8px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 11px 15px rgba(0, 0, 0, var(--shadow-opacity-3));
  }*/
}

@media (min-width: 62em) {
  .md-shadow-0 {
    box-shadow: none;
  }
  .md-shadow-1 {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  }

  .md-shadow-2 {
    box-shadow: 0 16px 30px rgba(0, 0, 0, .1);
  }

  /*.md-shadow-1 {
    box-shadow: 0 0 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 2px 2px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 3px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .md-shadow-2 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .md-shadow-3 {
    box-shadow: 0 3px 3px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 8px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .md-shadow-4 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 4px 5px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 10px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .md-shadow-5 {
    box-shadow: 0 6px 10px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 1px 18px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 3px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .md-shadow-6 {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 14px 3px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 4px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .md-shadow-7 {
    box-shadow: 0 9px 12px 1px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 16px 2px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 5px 6px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .md-shadow-8 {
    box-shadow: 0 12px 17px 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 5px 22px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 7px 8px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .md-shadow-9 {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 6px 30px 5px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 8px 10px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .md-shadow-10 {
    box-shadow: 0 24px 38px 3px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 9px 46px 8px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 11px 15px rgba(0, 0, 0, var(--shadow-opacity-3));
  }*/
}

@media (min-width: 75em) {
  .lg-shadow-0 {
    box-shadow: none;
  }
  .lg-shadow-1 {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  }

  .lg-shadow-2 {
    box-shadow: 0 16px 30px rgba(0, 0, 0, .1);
  }

  /*.lg-shadow-1 {
    box-shadow: 0 0 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 2px 2px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 3px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .lg-shadow-2 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .lg-shadow-3 {
    box-shadow: 0 3px 3px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 8px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .lg-shadow-4 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 4px 5px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 10px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .lg-shadow-5 {
    box-shadow: 0 6px 10px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 1px 18px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 3px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .lg-shadow-6 {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 14px 3px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 4px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .lg-shadow-7 {
    box-shadow: 0 9px 12px 1px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 16px 2px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 5px 6px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .lg-shadow-8 {
    box-shadow: 0 12px 17px 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 5px 22px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 7px 8px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .lg-shadow-9 {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 6px 30px 5px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 8px 10px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .lg-shadow-10 {
    box-shadow: 0 24px 38px 3px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 9px 46px 8px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 11px 15px rgba(0, 0, 0, var(--shadow-opacity-3));
  }*/
}

@media (min-width: 91em) {
  .xl-shadow-0 {
    box-shadow: none;
  }
  .xl-shadow-1 {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  }

  .xl-shadow-2 {
    box-shadow: 0 16px 30px rgba(0, 0, 0, .1);
  }

  /*.xl-shadow-1 {
    box-shadow: 0 0 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 2px 2px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 3px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xl-shadow-2 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xl-shadow-3 {
    box-shadow: 0 3px 3px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 8px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xl-shadow-4 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 4px 5px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 1px 10px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xl-shadow-5 {
    box-shadow: 0 6px 10px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 1px 18px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 3px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xl-shadow-6 {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 14px 3px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 4px 5px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xl-shadow-7 {
    box-shadow: 0 9px 12px 1px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 3px 16px 2px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 5px 6px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xl-shadow-8 {
    box-shadow: 0 12px 17px 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 5px 22px 4px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 7px 8px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xl-shadow-9 {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 6px 30px 5px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 8px 10px rgba(0, 0, 0, var(--shadow-opacity-3));
  }

  .xl-shadow-10 {
    box-shadow: 0 24px 38px 3px rgba(0, 0, 0, var(--shadow-opacity-2)),
                0 9px 46px 8px rgba(0, 0, 0, var(--shadow-opacity-1)),
                0 11px 15px rgba(0, 0, 0, var(--shadow-opacity-3));
  }*/
}

/*
 * Position
 *
 */

.relative        { position: relative; }

.absolute        { position: absolute; }

.fixed           { position: fixed;    }

.t0 { top:    0; }

.r0 { right:  0; }

.l0 { left:   0; }

.b0 { bottom: 0; }

.t1 { top:    1rem;   }

.r1 { right:  1rem;   }

.l1 { left:   1rem;   }

.b1 { bottom: 1rem;   }

.tn1 { top:    -1rem; }

.rn1 { right:  -1rem; }

.ln1 { left:   -1rem; }

.bn1 { bottom: -1rem; }

.t100 { top:    100%; }

.b100 { bottom: 100%; }

.r100 { right:  100%; }

.l100 { left:   100%; }

.t50 { top:    50%; }

.b50 { bottom: 50%; }

.r50 { right:  50%; }

.l50 { left:   50%; }

.t25 { top:    25%; }

.b25 { bottom: 25%; }

.r25 { right:  25%; }

.l25 { left:   25%; }

.t33 { top:    33%; }

.b33 { bottom: 33%; }

.r33 { right:  33%; }

.l33 { left:   33%; }

@media (min-width: 30em) {
  .xs-relative { position: relative; }
  .xs-absolute { position: absolute; }
  .xs-fixed    { position: fixed;    }

  .xs-t0 { top:    0; }
  .xs-r0 { right:  0; }
  .xs-l0 { left:   0; }
  .xs-b0 { bottom: 0; }

  .xs-t1 { top:    1rem;   }
  .xs-r1 { right:  1rem;   }
  .xs-l1 { left:   1rem;   }
  .xs-b1 { bottom: 1rem;   }

  .xs-tn1 { top:    -1rem; }
  .xs-rn1 { right:  -1rem; }
  .xs-ln1 { left:   -1rem; }
  .xs-bn1 { bottom: -1rem; }

  .xs-t100 { top:    100%; }
  .xs-b100 { bottom: 100%; }
  .xs-r100 { right:  100%; }
  .xs-l100 { left:   100%; }

  .xs-t50 { top:    50%; }
  .xs-b50 { bottom: 50%; }
  .xs-r50 { right:  50%; }
  .xs-l50 { left:   50%; }

  .xs-t25 { top:    25%; }
  .xs-b25 { bottom: 25%; }
  .xs-r25 { right:  25%; }
  .xs-l25 { left:   25%; }

  .xs-t33 { top:    33%; }
  .xs-b33 { bottom: 33%; }
  .xs-r33 { right:  33%; }
  .xs-l33 { left:   33%; }
}

@media (min-width: 48em) {
  .sm-relative { position: relative; }
  .sm-absolute { position: absolute; }
  .sm-fixed    { position: fixed;    }

  .sm-t0 { top:    0; }
  .sm-r0 { right:  0; }
  .sm-l0 { left:   0; }
  .sm-b0 { bottom: 0; }

  .sm-t1 { top:    1rem;   }
  .sm-r1 { right:  1rem;   }
  .sm-l1 { left:   1rem;   }
  .sm-b1 { bottom: 1rem;   }

  .sm-tn1 { top:    -1rem; }
  .sm-rn1 { right:  -1rem; }
  .sm-ln1 { left:   -1rem; }
  .sm-bn1 { bottom: -1rem; }

  .sm-t100 { top:    100%; }
  .sm-b100 { bottom: 100%; }
  .sm-r100 { right:  100%; }
  .sm-l100 { left:   100%; }

  .sm-t50 { top:    50%; }
  .sm-b50 { bottom: 50%; }
  .sm-r50 { right:  50%; }
  .sm-l50 { left:   50%; }

  .sm-t25 { top:    25%; }
  .sm-b25 { bottom: 25%; }
  .sm-r25 { right:  25%; }
  .sm-l25 { left:   25%; }

  .sm-t33 { top:    33%; }
  .sm-b33 { bottom: 33%; }
  .sm-r33 { right:  33%; }
  .sm-l33 { left:   33%; }
}

@media (min-width: 62em) {
  .md-relative { position: relative; }
  .md-absolute { position: absolute; }
  .md-fixed    { position: fixed;    }

  .md-t0 { top:    0; }
  .md-r0 { right:  0; }
  .md-l0 { left:   0; }
  .md-b0 { bottom: 0; }

  .md-t1 { top:    1rem;   }
  .md-r1 { right:  1rem;   }
  .md-l1 { left:   1rem;   }
  .md-b1 { bottom: 1rem;   }

  .md-tn1 { top:    -1rem; }
  .md-rn1 { right:  -1rem; }
  .md-ln1 { left:   -1rem; }
  .md-bn1 { bottom: -1rem; }

  .md-t100 { top:    100%; }
  .md-b100 { bottom: 100%; }
  .md-r100 { right:  100%; }
  .md-l100 { left:   100%; }

  .md-t50 { top:    50%; }
  .md-b50 { bottom: 50%; }
  .md-r50 { right:  50%; }
  .md-l50 { left:   50%; }

  .md-t25 { top:    25%; }
  .md-b25 { bottom: 25%; }
  .md-r25 { right:  25%; }
  .md-l25 { left:   25%; }

  .md-t33 { top:    33%; }
  .md-b33 { bottom: 33%; }
  .md-r33 { right:  33%; }
  .md-l33 { left:   33%; }
}

@media (min-width: 75em) {
  .lg-relative { position: relative; }
  .lg-absolute { position: absolute; }
  .lg-fixed    { position: fixed;    }

  .lg-t0 { top:    0; }
  .lg-r0 { right:  0; }
  .lg-l0 { left:   0; }
  .lg-b0 { bottom: 0; }

  .lg-t1 { top:    1rem;   }
  .lg-r1 { right:  1rem;   }
  .lg-l1 { left:   1rem;   }
  .lg-b1 { bottom: 1rem;   }

  .lg-tn1 { top:    -1rem; }
  .lg-rn1 { right:  -1rem; }
  .lg-ln1 { left:   -1rem; }
  .lg-bn1 { bottom: -1rem; }

  .lg-t100 { top:    100%; }
  .lg-b100 { bottom: 100%; }
  .lg-r100 { right:  100%; }
  .lg-l100 { left:   100%; }

  .lg-t50 { top:    50%; }
  .lg-b50 { bottom: 50%; }
  .lg-r50 { right:  50%; }
  .lg-l50 { left:   50%; }

  .lg-t25 { top:    25%; }
  .lg-b25 { bottom: 25%; }
  .lg-r25 { right:  25%; }
  .lg-l25 { left:   25%; }

  .lg-t33 { top:    33%; }
  .lg-b33 { bottom: 33%; }
  .lg-r33 { right:  33%; }
  .lg-l33 { left:   33%; }
}

@media (min-width: 91em) {
  .xl-relative { position: relative; }
  .xl-absolute { position: absolute; }
  .xl-fixed    { position: fixed;    }

  .xl-t0 { top:    0; }
  .xl-r0 { right:  0; }
  .xl-l0 { left:   0; }
  .xl-b0 { bottom: 0; }

  .xl-t1 { top:    1rem;   }
  .xl-r1 { right:  1rem;   }
  .xl-l1 { left:   1rem;   }
  .xl-b1 { bottom: 1rem;   }

  .xl-tn1 { top:    -1rem; }
  .xl-rn1 { right:  -1rem; }
  .xl-ln1 { left:   -1rem; }
  .xl-bn1 { bottom: -1rem; }

  .xl-t100 { top:    100%; }
  .xl-b100 { bottom: 100%; }
  .xl-r100 { right:  100%; }
  .xl-l100 { left:   100%; }

  .xl-t50 { top:    50%; }
  .xl-b50 { bottom: 50%; }
  .xl-r50 { right:  50%; }
  .xl-l50 { left:   50%; }

  .xl-t25 { top:    25%; }
  .xl-b25 { bottom: 25%; }
  .xl-r25 { right:  25%; }
  .xl-l25 { left:   25%; }

  .xl-t33 { top:    33%; }
  .xl-b33 { bottom: 33%; }
  .xl-r33 { right:  33%; }
  .xl-l33 { left:   33%; }
}

/*
 * Ratios
 *
 */

.ratio-none { height: auto; padding-bottom: 0;       }

.ratio-3-1  { height: 0; padding-bottom: 33.333333%; }

.ratio-2-1  { height: 0; padding-bottom: 50%;        }

.ratio-16-9 { height: 0; padding-bottom: 56.25%;     }

.ratio-3-2  { height: 0; padding-bottom: 66.666666%; }

.ratio-4-3  { height: 0; padding-bottom: 75%;        }

.ratio-1-1  { height: 0; padding-bottom: 100%;       }

.ratio-1-2  { height: 0; padding-bottom: 200%;        }

.ratio-9-16 { height: 0; padding-bottom: 177.777777%; }

.ratio-2-3  { height: 0; padding-bottom: 150%;        }

.ratio-3-4  { height: 0; padding-bottom: 133.333333%; }

@media (min-width: 30em) {
  .xs-ratio-none { height: auto; padding-bottom: 0;       }
  .xs-ratio-3-1  { height: 0; padding-bottom: 33.333333%; }
  .xs-ratio-2-1  { height: 0; padding-bottom: 50%;        }
  .xs-ratio-16-9 { height: 0; padding-bottom: 56.25%;     }
  .xs-ratio-3-2  { height: 0; padding-bottom: 66.666666%; }
  .xs-ratio-4-3  { height: 0; padding-bottom: 75%;        }
  .xs-ratio-1-1  { height: 0; padding-bottom: 100%;       }

  .xs-ratio-1-2  { height: 0; padding-bottom: 200%;        }
  .xs-ratio-9-16 { height: 0; padding-bottom: 177.777777%; }
  .xs-ratio-2-3  { height: 0; padding-bottom: 150%;        }
  .xs-ratio-3-4  { height: 0; padding-bottom: 133.333333%; }
}

@media (min-width: 48em) {
  .sm-ratio-none { height: auto; padding-bottom: 0;       }
  .sm-ratio-3-1  { height: 0; padding-bottom: 33.333333%; }
  .sm-ratio-2-1  { height: 0; padding-bottom: 50%;        }
  .sm-ratio-16-9 { height: 0; padding-bottom: 56.25%;     }
  .sm-ratio-3-2  { height: 0; padding-bottom: 66.666666%; }
  .sm-ratio-4-3  { height: 0; padding-bottom: 75%;        }
  .sm-ratio-1-1  { height: 0; padding-bottom: 100%;       }

  .sm-ratio-1-2  { height: 0; padding-bottom: 200%;        }
  .sm-ratio-9-16 { height: 0; padding-bottom: 177.777777%; }
  .sm-ratio-2-3  { height: 0; padding-bottom: 150%;        }
  .sm-ratio-3-4  { height: 0; padding-bottom: 133.333333%; }
}

@media (min-width: 62em) {
  .md-ratio-none { height: auto; padding-bottom: 0;       }
  .md-ratio-3-1  { height: 0; padding-bottom: 33.333333%; }
  .md-ratio-2-1  { height: 0; padding-bottom: 50%;        }
  .md-ratio-16-9 { height: 0; padding-bottom: 56.25%;     }
  .md-ratio-3-2  { height: 0; padding-bottom: 66.666666%; }
  .md-ratio-4-3  { height: 0; padding-bottom: 75%;        }
  .md-ratio-1-1  { height: 0; padding-bottom: 100%;       }

  .md-ratio-1-2  { height: 0; padding-bottom: 200%;        }
  .md-ratio-9-16 { height: 0; padding-bottom: 177.777777%; }
  .md-ratio-2-3  { height: 0; padding-bottom: 150%;        }
  .md-ratio-3-4  { height: 0; padding-bottom: 133.333333%; }
}

@media (min-width: 75em) {
  .lg-ratio-none { height: auto; padding-bottom: 0;       }
  .lg-ratio-3-1  { height: 0; padding-bottom: 33.333333%; }
  .lg-ratio-2-1  { height: 0; padding-bottom: 50%;        }
  .lg-ratio-16-9 { height: 0; padding-bottom: 56.25%;     }
  .lg-ratio-3-2  { height: 0; padding-bottom: 66.666666%; }
  .lg-ratio-4-3  { height: 0; padding-bottom: 75%;        }
  .lg-ratio-1-1  { height: 0; padding-bottom: 100%;       }

  .lg-ratio-1-2  { height: 0; padding-bottom: 200%;        }
  .lg-ratio-9-16 { height: 0; padding-bottom: 177.777777%; }
  .lg-ratio-2-3  { height: 0; padding-bottom: 150%;        }
  .lg-ratio-3-4  { height: 0; padding-bottom: 133.333333%; }
}

@media (min-width: 91em) {
  .xl-ratio-none { height: auto; padding-bottom: 0;       }
  .xl-ratio-3-1  { height: 0; padding-bottom: 33.333333%; }
  .xl-ratio-2-1  { height: 0; padding-bottom: 50%;        }
  .xl-ratio-16-9 { height: 0; padding-bottom: 56.25%;     }
  .xl-ratio-3-2  { height: 0; padding-bottom: 66.666666%; }
  .xl-ratio-4-3  { height: 0; padding-bottom: 75%;        }
  .xl-ratio-1-1  { height: 0; padding-bottom: 100%;       }

  .xl-ratio-1-2  { height: 0; padding-bottom: 200%;        }
  .xl-ratio-9-16 { height: 0; padding-bottom: 177.777777%; }
  .xl-ratio-2-3  { height: 0; padding-bottom: 150%;        }
  .xl-ratio-3-4  { height: 0; padding-bottom: 133.333333%; }
}

/*
 * Heights
 *
 */

.height-auto  { height: auto;  }

.height-25    { height: 25%;   }

.height-50    { height: 50%;   }

.height-75    { height: 75%;   }

.height-100   { height: 100%;  }

.height-25vh  { height: 25vh;  }

.height-50vh  { height: 50vh;  }

.height-75vh  { height: 75vh;  }

.height-100vh { height: 100vh; }

@media (min-width: 30em) {
  .xs-height-auto  { height: auto;  }

  .xs-height-25    { height: 25%;   }
  .xs-height-50    { height: 50%;   }
  .xs-height-75    { height: 75%;   }
  .xs-height-100   { height: 100%;  }

  .xs-height-25vh  { height: 25vh;  }
  .xs-height-50vh  { height: 50vh;  }
  .xs-height-75vh  { height: 75vh;  }
  .xs-height-100vh { height: 100vh; }
}

@media (min-width: 48em) {
  .sm-height-auto  { height: auto;  }

  .sm-height-25    { height: 25%;   }
  .sm-height-50    { height: 50%;   }
  .sm-height-75    { height: 75%;   }
  .sm-height-100   { height: 100%;  }

  .sm-height-25vh  { height: 25vh;  }
  .sm-height-50vh  { height: 50vh;  }
  .sm-height-75vh  { height: 75vh;  }
  .sm-height-100vh { height: 100vh; }
}

@media (min-width: 62em) {
  .md-height-auto  { height: auto;  }

  .md-height-25    { height: 25%;   }
  .md-height-50    { height: 50%;   }
  .md-height-75    { height: 75%;   }
  .md-height-100   { height: 100%;  }

  .md-height-25vh  { height: 25vh;  }
  .md-height-50vh  { height: 50vh;  }
  .md-height-75vh  { height: 75vh;  }
  .md-height-100vh { height: 100vh; }
}

@media (min-width: 75em) {
  .lg-height-auto  { height: auto;  }

  .lg-height-25    { height: 25%;   }
  .lg-height-50    { height: 50%;   }
  .lg-height-75    { height: 75%;   }
  .lg-height-100   { height: 100%;  }

  .lg-height-25vh  { height: 25vh;  }
  .lg-height-50vh  { height: 50vh;  }
  .lg-height-75vh  { height: 75vh;  }
  .lg-height-100vh { height: 100vh; }
}

@media (min-width: 91em) {
  .xl-height-auto  { height: auto;  }

  .xl-height-25    { height: 25%;   }
  .xl-height-50    { height: 50%;   }
  .xl-height-75    { height: 75%;   }
  .xl-height-100   { height: 100%;  }

  .xl-height-25vh  { height: 25vh;  }
  .xl-height-50vh  { height: 50vh;  }
  .xl-height-75vh  { height: 75vh;  }
  .xl-height-100vh { height: 100vh; }
}

.opacity-100 { opacity: 1;    }

.opacity-90  { opacity: .9;   }

.opacity-80  { opacity: .8;   }

.opacity-70  { opacity: .7;   }

.opacity-60  { opacity: .6;   }

.opacity-50  { opacity: .5;   }

.opacity-40  { opacity: .4;   }

.opacity-30  { opacity: .3;   }

.opacity-20  { opacity: .2;   }

.opacity-10  { opacity: .1;   }

.opacity-0   { opacity: 0;    }

@media (min-width: 30em) {
  .xs-opacity-100 { opacity: 1;    }
  .xs-opacity-90  { opacity: .9;   }
  .xs-opacity-80  { opacity: .8;   }
  .xs-opacity-70  { opacity: .7;   }
  .xs-opacity-60  { opacity: .6;   }
  .xs-opacity-50  { opacity: .5;   }
  .xs-opacity-40  { opacity: .4;   }
  .xs-opacity-30  { opacity: .3;   }
  .xs-opacity-20  { opacity: .2;   }
  .xs-opacity-10  { opacity: .1;   }
  .xs-opacity-0   { opacity: 0;    }
}

@media (min-width: 48em) {
  .sm-opacity-100 { opacity: 1;    }
  .sm-opacity-90  { opacity: .9;   }
  .sm-opacity-80  { opacity: .8;   }
  .sm-opacity-70  { opacity: .7;   }
  .sm-opacity-60  { opacity: .6;   }
  .sm-opacity-50  { opacity: .5;   }
  .sm-opacity-40  { opacity: .4;   }
  .sm-opacity-30  { opacity: .3;   }
  .sm-opacity-20  { opacity: .2;   }
  .sm-opacity-10  { opacity: .1;   }
  .sm-opacity-0   { opacity: 0;    }
}

@media (min-width: 62em) {
  .md-opacity-100 { opacity: 1;    }
  .md-opacity-90  { opacity: .9;   }
  .md-opacity-80  { opacity: .8;   }
  .md-opacity-70  { opacity: .7;   }
  .md-opacity-60  { opacity: .6;   }
  .md-opacity-50  { opacity: .5;   }
  .md-opacity-40  { opacity: .4;   }
  .md-opacity-30  { opacity: .3;   }
  .md-opacity-20  { opacity: .2;   }
  .md-opacity-10  { opacity: .1;   }
  .md-opacity-0   { opacity: 0;    }
}

@media (min-width: 75em) {
  .lg-opacity-100 { opacity: 1;    }
  .lg-opacity-90  { opacity: .9;   }
  .lg-opacity-80  { opacity: .8;   }
  .lg-opacity-70  { opacity: .7;   }
  .lg-opacity-60  { opacity: .6;   }
  .lg-opacity-50  { opacity: .5;   }
  .lg-opacity-40  { opacity: .4;   }
  .lg-opacity-30  { opacity: .3;   }
  .lg-opacity-20  { opacity: .2;   }
  .lg-opacity-10  { opacity: .1;   }
  .lg-opacity-0   { opacity: 0;    }
}

@media (min-width: 91em) {
  .xl-opacity-100 { opacity: 1;    }
  .xl-opacity-90  { opacity: .9;   }
  .xl-opacity-80  { opacity: .8;   }
  .xl-opacity-70  { opacity: .7;   }
  .xl-opacity-60  { opacity: .6;   }
  .xl-opacity-50  { opacity: .5;   }
  .xl-opacity-40  { opacity: .4;   }
  .xl-opacity-30  { opacity: .3;   }
  .xl-opacity-20  { opacity: .2;   }
  .xl-opacity-10  { opacity: .1;   }
  .xl-opacity-0   { opacity: 0;    }
}