/*
  Lots of inspiration from http://tachyons.io
  Thank you
*/

@font-face {
  font-family: 'Ginestra';
  src: url(/build/webfonts/Ginestra-Bold.woff2) format('woff2'),
       url(/build/webfonts/Ginestra-Bold.woff) format('woff'),
       url(/build/webfonts/Ginestra-Bold.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Ginestra';
  src: url(/build/webfonts/Ginestra-Black.woff2) format('woff2'),
       url(/build/webfonts/Ginestra-Black.woff) format('woff'),
       url(/build/webfonts/Ginestra-Black.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}

/*
 * Web Fonts from colophon-foundry.org
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Colophon Foundry. The fonts are protected under domestic and international trademark and
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2019 Colophon Foundry
 *
 * Licenced to ANNA VILA ROSÀS ESTUDIO DE COMUNICACION SL
 */

@font-face {
  font-family: 'Basis Grotesque';
  src: url(/build/webfonts/basis-grotesque-regular.eot);
  src: url(/build/webfonts/basis-grotesque-regular.eot?#iefix) format('embedded-opentype'),
       url(/build/webfonts/basis-grotesque-regular.woff2) format('woff2'),
       url(/build/webfonts/basis-grotesque-regular.woff) format('woff'),
       url(/build/webfonts/basis-grotesque-regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Basis Grotesque Off-white';
  src: url(/build/webfonts/basis-grotesque-off-white.eot);
  src: url(/build/webfonts/basis-grotesque-off-white.eot?#iefix) format('embedded-opentype'),
       url(/build/webfonts/basis-grotesque-off-white.woff2) format('woff2'),
       url(/build/webfonts/basis-grotesque-off-white.woff) format('woff'),
       url(/build/webfonts/basis-grotesque-off-white.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

/*
  Media queries
*/

/*
  Do not use unitless values in custom properties that will be used in calc()
*/

:root {
  /*
    Base unit
  */
  --unit: 1.25; /* line-height for font-size 3 */

  /*
    Type

    Mov
    ---
    2.500em  - 1 50pt 66.666667px
    1.400em  - 2 28pt 37.333333px
    1        - 3 20pt 26.666667px
    0.750em  - 4 15pt 20px

    Desk
    ----
    2.833em – 0 85pt 113.333333px
    2.167em – 1 65pt 86.666667px
    1.500em – 2 45pt 60px
    1       – 3 30pt 40px
    0.533em – 4 16pt 21.333333px
  */
  --font-0: 2.5rem;
  --line-height-0: 1.1;
  --font-1: 2.5rem;
  --line-height-1: 1.1;
  --font-2: 1.4rem;
  --line-height-2: 1.1;
  --font-3: 1rem; /* base */
  --line-height-3: 1.2;
  --font-4: 0.75rem;
  --line-height-4: 1.3333;
  --font-5: 0.75rem;
  --line-height-5: 1.3333;

  --family-off-white: 'Ginestra', 'Basis Grotesque Off-white', Helvetica, sans-serif;

  --measure: 27em;
  --measure-wide: 34em;
  --measure-narrow: 19em;

  /*
    Spacing
    Using an eight step powers of 1.5
  */
  --scale-1: 0.2rem;
  --scale-2: 0.44rem;
  --scale-3: 1rem;
  --scale-4: 1.5rem;
  --scale-5: 2.25rem;
  --scale-6: 3.38rem;
  --scale-7: 5.06rem;

  --spacing-none: 0;
  --spacing-extra-small: calc(1.25 * 0.2rem);
  --spacing-extra-small: calc(1.25 * var(--scale-1));
  --spacing-small: calc(1.25 * 0.67rem);
  --spacing-medium: calc(1.25 * 1rem);
  --spacing-medium: calc(1.25 * var(--scale-3));
  --spacing-large: calc(1.25 * 1.5rem);
  --spacing-large: calc(1.25 * var(--scale-4));
  --spacing-extra-large: calc(1.25 * 2.25rem);
  --spacing-extra-large: calc(1.25 * var(--scale-5));
  --spacing-extra-extra-large: calc(1.25 * 3.38rem);
  --spacing-extra-extra-large: calc(1.25 * var(--scale-6));
  --spacing-extra-extra-extra-large: calc(1.25 * 5.06rem);
  --spacing-extra-extra-extra-large: calc(1.25 * var(--scale-7));

  /*
    Color
  */
  --black: rgb(0, 0, 0);
  --white: rgb(255, 255, 255);
  --grey: rgb(249, 249, 249);
  --grey: rgb(246, 245, 243); /* new */
  --grey-dark: rgb(46, 46, 44);
  --yellow: rgb(255, 221, 111);
  --yellow-light: rgb(244, 232, 149);
  --blue: rgb(41, 71, 219);

  /*
    Time
  */

  --time-immediate: 100ms;
  --time-fast: 300ms;
  --time-slower: 600ms;
  --time-deliberate: 900ms;
  --time-extra-deliberate: 1350ms;

  /*
    Misc.
  */
}

@media screen and (min-width: 60em) {
  :root {
    --unit: 1.75;

    --font-0: 2.833rem;
    --line-height-0: 1;
    --font-1: 2.167rem;
    --line-height-1: 1.1;
    --font-2: 1.500rem;
    --line-height-2: 1.1;
    --font-3: 1rem; /* base */
    --line-height-3: 1.175;
    --font-4: 0.581rem;
    --line-height-4: 1.25;
    --font-5: 0.533rem;
    --line-height-5: 1.25;

    --spacing-none: 0;
    --spacing-extra-small: calc(1.75 * 0.2rem);
    --spacing-extra-small: calc(1.75 * var(--scale-1));
    --spacing-small: calc(1.75 * 0.44rem);
    --spacing-small: calc(1.75 * var(--scale-2));
    --spacing-medium: calc(1.75 * 1rem);
    --spacing-medium: calc(1.75 * var(--scale-3));
    --spacing-large: calc(1.75 * 1.5rem);
    --spacing-large: calc(1.75 * var(--scale-4));
    --spacing-extra-large: calc(1.75 * 2.25rem);
    --spacing-extra-large: calc(1.75 * var(--scale-5));
    --spacing-extra-extra-large: calc(1.75 * 3.38rem);
    --spacing-extra-extra-large: calc(1.75 * var(--scale-6));
    --spacing-extra-extra-extra-large: calc(1.75 * 5.06rem);
    --spacing-extra-extra-extra-large: calc(1.75 * var(--scale-7));
  }
}

html {
  font-family: 'Ginestra', 'Basis Grotesque', Helvetica, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 143.8%;
  line-height: 1.25;
  line-height: var(--unit);
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  color: rgb(41, 71, 219);
  color: var(--blue);
}

@media screen and (max-width: 40em) {
  html {
    font-size: 	118.8%;
  }
}

@media screen and (min-width: 60em) {
  html {
    font-size: 	193.8%;
  }
}

@media screen and (min-width: 95em) {
  html {
    font-size: 239.4%;
  }
}

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

body {
  margin: 0;
  scroll-behavior: smooth;
}

body.is-transitioning {
  scroll-behavior: auto;
  cursor: wait;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.2;
  line-height: var(--line-height-3);
}

strong,
b {
  font-weight: normal;
}

em,
i {
  font-style: normal;
}

cite {
  font-style: normal;
}

ul,
ol {
  list-style: none;
  padding-left: 0;
}

li + li,
br {
  margin-top: 0;
}

figure {
  margin-left: 0;
  margin-right: 0;
}

img {
  max-width: 100%;
  vertical-align: middle;
}

a {
  color: rgb(41, 71, 219);
  color: var(--blue);
  text-decoration: none;
}

hr {
  border: none;
  height: 1px;
}

video {
  display: block;
}

progress {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  border: none;
  border-radius: 0;
  display: block;
  color: rgb(41, 71, 219);
  color: var(--blue);
  background-color: transparent;
  width: 100%;
  height: 3px;
}

progress::-webkit-progress-value { background: rgb(41, 71, 219); background: var(--blue); }

progress::-moz-progress-bar { background: rgb(41, 71, 219); background: var(--blue); }

progress::-webkit-progress-bar { background: transparent; }

/*
  :focus trick by @leaverou
  https://twitter.com/leaverou/status/1045768279753666562?lang=ca
*/

:focus:not(.focus-visible) { outline: none; }

:focus:not(:focus-visible) { outline: none; }

/*
  Axiomatic CSS and Lobotomized Owls
  https://alistapart.com/article/axiomatic-css-and-lobotomized-owls
*/

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
blockquote,
figure,
table {
  margin-bottom: 0;
}

*:first-child {
  margin-top: 0;
}

* + * {
  margin-top: 1.25em;
}

@media screen and (min-width: 60em) {
  * + * {
    margin-top: 1.75em;
  }

  .f4 * + h1,
  .f4 * + h2,
  .f4 * + h3,
  .f4 * + h4,
  .f4 * + h5,
  .f4 * + h6,
  .f4 * + p,
  .f4 * + ul,
  .f4 * + ol,
  .f4 * + blockquote,
  .f4 * + figure,
  .f4 * + table {
    margin-top: 1.25em;
  }
}

/* objectFitVideos() */

* + object-fit {
  margin-top: 0;
}

/* IE11 */

main,
header,
nav,
footer {
  display: block;
}

/*
  Copy/pasted core swiper.css to reduce bundle size
  (could have imported core.less from node_modules
  but didn't want to setup Webpack to handle less files)

  @import url('swiper/dist/css/swiper.css');
*/

.swiper-container {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-container-no-flexbox .swiper-slide {
  float: left;
}

.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position:relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  box-sizing: content-box;
}

.swiper-container-android .swiper-slide, .swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
          transform: translate3d(0px, 0, 0);
}

.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */

.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
  height: auto;
}

.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: height, -webkit-transform;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform;
}

/* IE10 Windows Phone 8 Fixes */

.swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper {
  touch-action: pan-y;
}

.swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper {
  touch-action: pan-x;
}

/*
  Modules
*/

/* 
  Debug

  - outline
*/

.debug * { outline: 1px solid gold; }

@media screen and (min-width: 40em) {
  .debug * { outline: 1px solid cyan; }
}

@media screen and (min-width: 60em) {
  .debug * { outline: 1px solid magenta; }
}

@media screen and (min-width: 78em) {
  .debug * { outline: 1px solid purple; }
}

/*
  All things related to typography

  - font-size
  - line-height
  - letter-spacing
*/

.f0 {
  font-size: 2.5rem;
  font-size: var(--font-0);
  font-weight: bold;
  line-height: 1.1;
  line-height: var(--line-height-0);
  letter-spacing: 0;
}

.f1 {
  font-size: 2.5rem;
  font-size: var(--font-1);
  font-weight: bold;
  line-height: 1.1;
  line-height: var(--line-height-1);
  letter-spacing: 0;
}

.f2 {
  font-size: 1.4rem;
  font-size: var(--font-2);
  line-height: 1.1;
  line-height: var(--line-height-2);
  letter-spacing: 0.0125em;
}

.f3 {
  font-size: 1rem;
  font-size: var(--font-3);
  line-height: 1.2;
  line-height: var(--line-height-3);
  letter-spacing: 0;
}

.f4 {
  font-size: 0.75rem;
  font-size: var(--font-4);
  line-height: 1.3333;
  line-height: var(--line-height-4);
  letter-spacing: 0;
}

.f5 {
  font-size: 0.75rem;
  font-size: var(--font-5);
  line-height: 1.3333;
  line-height: var(--line-height-5);
  letter-spacing: 0;
}

.off-white { font-family: 'Ginestra', 'Basis Grotesque Off-white', Helvetica, sans-serif; font-family: var(--family-off-white); }

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

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

.line-height-09 { line-height: 0.9; }

.line-height-loose { line-height: 1.45; }

@media screen and (max-width: 40em) {
  .sm\:f0 {
    font-size: 2.5rem;
    font-size: var(--font-0);
    line-height: 1.1;
    line-height: var(--line-height-0);
    letter-spacing: 0;
  }
  .sm\:f1 {
    font-size: 2.5rem;
    font-size: var(--font-1);
    line-height: 1.1;
    line-height: var(--line-height-1);
    letter-spacing: 0;
  }
  .sm\:f2 {
    font-size: 1.4rem;
    font-size: var(--font-2);
    line-height: 1.1;
    line-height: var(--line-height-2);
    letter-spacing: 0.0125em;
  }
  .sm\:f3 {
    font-size: 1rem;
    font-size: var(--font-3);
    line-height: 1.2;
    line-height: var(--line-height-3);
    letter-spacing: 0;
  }
  .sm\:f4 {
    font-size: 0.75rem;
    font-size: var(--font-4);
    line-height: 1.3333;
    line-height: var(--line-height-4);
    letter-spacing: 0;
  }
}

@media screen and (min-width: 40em) {
  .ns\:f0 {
    font-size: 2.5rem;
    font-size: var(--font-0);
    line-height: 1.1;
    line-height: var(--line-height-0);
    letter-spacing: 0;
  }
  .ns\:f1 {
    font-size: 2.5rem;
    font-size: var(--font-1);
    line-height: 1.1;
    line-height: var(--line-height-1);
    letter-spacing: 0;
  }
  .ns\:f2 {
    font-size: 1.4rem;
    font-size: var(--font-2);
    line-height: 1.1;
    line-height: var(--line-height-2);
    letter-spacing: 0.0125em;
  }
  .ns\:f3 {
    font-size: 1rem;
    font-size: var(--font-3);
    line-height: 1.2;
    line-height: var(--line-height-3);
    letter-spacing: 0;
  }
  .ns\:f4 {
    font-size: 0.75rem;
    font-size: var(--font-4);
    line-height: 1.3333;
    line-height: var(--line-height-4);
    letter-spacing: 0;
  }
}

@media screen and (min-width: 60em) {
  .md\:f0 {
    font-size: 2.5rem;
    font-size: var(--font-0);
    line-height: 1.1;
    line-height: var(--line-height-0);
    letter-spacing: 0;
  }
  .md\:f1 {
    font-size: 2.5rem;
    font-size: var(--font-1);
    line-height: 1.1;
    line-height: var(--line-height-1);
    letter-spacing: 0;
  }
  .md\:f1 {
    font-size: 2.5rem;
    font-size: var(--font-1);
    line-height: 1.1;
    line-height: var(--line-height-1);
    letter-spacing: 0;
  }
  .md\:f2 {
    font-size: 1.4rem;
    font-size: var(--font-2);
    line-height: 1.1;
    line-height: var(--line-height-2);
    letter-spacing: 0.0125em;
  }
  .md\:f3 {
    font-size: 1rem;
    font-size: var(--font-3);
    line-height: 1.2;
    line-height: var(--line-height-3);
    letter-spacing: 0;
  }
  .md\:f4 {
    font-size: 0.75rem;
    font-size: var(--font-4);
    line-height: 1.3333;
    line-height: var(--line-height-4);
    letter-spacing: 0;
  }
}

@media screen and (min-width: 78em) {
  .lg\:f0 {
    font-size: 2.5rem;
    font-size: var(--font-0);
    line-height: 1.1;
    line-height: var(--line-height-0);
    letter-spacing: 0;
  }
  .lg\:f1 {
    font-size: 2.5rem;
    font-size: var(--font-1);
    line-height: 1.1;
    line-height: var(--line-height-1);
    letter-spacing: 0;
  }
  .lg\:f2 {
    font-size: 1.4rem;
    font-size: var(--font-2);
    line-height: 1.1;
    line-height: var(--line-height-2);
    letter-spacing: 0.0125em;
  }
  .lg\:f3 {
    font-size: 1rem;
    font-size: var(--font-3);
    line-height: 1.2;
    line-height: var(--line-height-3);
    letter-spacing: 0;
  }
  .lg\:f4 {
    font-size: 0.75rem;
    font-size: var(--font-4);
    line-height: 1.3333;
    line-height: var(--line-height-4);
    letter-spacing: 0;
  }
}

/*
  Color

  - color
  - background-color
  - stroke
  - fill
  - opacity
  - filter
*/

.bg-transparent { background-color: transparent; }

.bg-black,
[data-background="black"] { background-color: rgb(0, 0, 0); background-color: var(--black); }

.bg-white,
[data-background="white"] { background-color: rgb(255, 255, 255); background-color: var(--white); }

.bg-grey,
[data-background="grey"] { background-color: rgb(246, 245, 243); background-color: var(--grey); }

.bg-grey-dark,
[data-background="grey-dark"] { background-color: rgb(46, 46, 44); background-color: var(--grey-dark); }

.bg-yellow-light,
[data-background="yellow-light"] { background-color: rgb(244, 232, 149); background-color: var(--yellow-light); }

.bg-yellow,
[data-background="yellow"] { background-color: rgb(255, 221, 111); background-color: var(--yellow); }

.bg-safe { background-color: rgb(0, 0, 0); background-color: var(--black); }

.bg-black .bg-safe,
[data-background="black"] .bg-safe { background-color: rgb(255, 255, 255); background-color: var(--white); }

.white,
.white a,
.bg-black,
.bg-black a,
.bg-grey-dark,
.bg-grey-dark a,
[data-background="black"],
[data-background="black"] a {
  color: rgb(255, 255, 255);
  color: var(--white);
  font-family: 'Ginestra', 'Basis Grotesque Off-white', Helvetica, sans-serif;
  font-family: var(--family-off-white);
}

.black,
.black a,
.bg-white,
.bg-white a,
[data-background="white"],
[data-background="white"] a { color: rgb(41, 71, 219); color: var(--blue) }

a.white {
  color: rgb(255, 255, 255);
  color: var(--white);
  font-family: 'Ginestra', 'Basis Grotesque Off-white', Helvetica, sans-serif;
  font-family: var(--family-off-white);
}

a.black { color: rgb(41, 71, 219); color: var(--blue); }

.o-0 { opacity: 0; }

.o-05 { opacity: 0.05; }

.o-50 { opacity: 0.5; }

.o-100 { opacity: 1; }

.invert { -webkit-filter: invert(100%); filter: invert(100%); }

/* 
  Layout

  - z-index
  - display
  - position
  - text-align
  - object-fit
  - object-position
*/

.z0 { z-index: 0; }

.z1 { z-index: 1; }

.z2 { z-index: 2; }

.z3 { z-index: 3; }

.z4 { z-index: 4; }

.z5 { z-index: 5; }

.z6 { z-index: 6; }

.z7 { z-index: 7; }

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

.none { display: none; }

.inline { display: inline; }

.block { display: block; }

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

.static { position: static; }

.relative { position: relative; }

.absolute { position: absolute; }

.fixed { position: fixed; }

.left { text-align: left; }

.right { text-align: right; }

.center { text-align: center; }

.float-right { float: right; }

.object-fit-cover {
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

.object-fit-contain {
  object-fit: contain;
  font-family: 'object-fit: contain;';
}

.object-pos-center-top {
  object-position: center top;
  font-family: 'object-position: center top;';
}

@media screen and (min-width: 40em) {
  .ns\:none { display: none; }
  .ns\:inline { display: inline; }
  .ns\:block{ display: block; }
  .ns\:inline-block { display: inline-block; }

  .ns\:static { position: static; }
  .ns\:relative { position: relative; }
  .ns\:absolute { position: absolute; }
  .ns\:fixed { position: fixed; }

  .ns\:left { text-align: left; }
  .ns\:right { text-align: right; }
  .ns\:center { text-align: center; }

  .ns\:object-fit-cover {
    object-fit: cover;
    font-family: 'object-fit: cover;';
  }
  .ns\:object-fit-contain {
    object-fit: contain;
    font-family: 'object-fit: contain;';
  }
  .ns\:object-pos-center-top {
    object-position: center top;
    font-family: 'object-position: center top;';
  }
}

@media screen and (min-width: 60em) {
  .md\:none { display: none; }
  .md\:inline { display: inline; }
  .md\:block{ display: block; }
  .md\:inline-block { display: inline-block; }

  .md\:static { position: static; }
  .md\:relative { position: relative; }
  .md\:absolute { position: absolute; }
  .md\:fixed { position: fixed; }

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

  .md\:object-fit-cover {
    object-fit: cover;
    font-family: 'object-fit: cover;';
  }
  .md\:object-fit-contain {
    object-fit: contain;
    font-family: 'object-fit: contain;';
  }
  .md\:object-pos-center-top {
    object-position: center top;
    font-family: 'object-position: center top;';
  }
}

@media screen and (min-width: 78em) {
  .lg\:none { display: none; }
  .lg\:inline { display: inline; }
  .lg\:block{ display: block; }
  .lg\:inline-block { display: inline-block; }

  .lg\:static { position: static; }
  .lg\:relative { position: relative; }
  .lg\:absolute { position: absolute; }
  .lg\:fixed { position: fixed; }

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

  .lg\:object-fit-cover {
    object-fit: cover;
    font-family: 'object-fit: cover;';
  }
  .lg\:object-fit-contain {
    object-fit: contain;
    font-family: 'object-fit: contain;';
  }
  .lg\:object-pos-center-top {
    object-position: center top;
    font-family: 'object-position: center top;';
  }
}

/* 
  Size

  - width
  - height
  - max-width

  - .container
  - .measure
  - .measure-wide
  - .measure-narrow
  - .w0
  - .w-MODIFIER
  - .h0
  - .h-MODIFIER
*/

.container { max-width: 39rem; }

.container-narrow { max-width: 31rem; }

.measure { max-width: 27em; max-width: var(--measure); }

.measure-wide { max-width: 34em; max-width: var(--measure-wide); }

.measure-narrow { max-width: 19em; max-width: var(--measure-narrow); }

.w1 { width: calc(1.25 * 0.2rem); width: var(--spacing-extra-small); }

.w2 { width: calc(1.25 * 0.67rem); width: var(--spacing-small); }

.w3 { width: calc(1.25 * 1rem); width: var(--spacing-medium); }

.w4 { width: calc(1.25 * 1.5rem); width: var(--spacing-large); }

.w5 { width: calc(1.25 * 2.25rem); width: var(--spacing-extra-large); }

.w6 { width: calc(1.25 * 3.38rem); width: var(--spacing-extra-extra-large); }

.w7 { width: calc(1.25 * 5.06rem); width: var(--spacing-extra-extra-extra-large); }

.w-icon { width: 1.125rem; }

.w-6 { width: 6%; }

.w-10 { width: 10%; }

.w-20 { width: 20%; }

.w-25 { width: 25%; }

.w-30 { width: 30%; }

.w-33 { width: 33%; }

.w-34 { width: 34%; }

.w-40 { width: 40%; }

.w-50 { width: 50%; }

.w-60 { width: 60%; }

.w-70 { width: 70%; }

.w-75 { width: 75%; }

.w-80 { width: 80%; }

.w-90 { width: 90%; }

.w-100 { width: 100%; }

.w-third { width: calc(100% / 3); }

.w-two-thirds { width: calc(100% / 1.5); }

.w-auto { width: auto; }

.mw-70 { max-width: 70%; }

.h-100 { height: 100%; }

.h-100v { height: 100vh; }

.h-auto { height: auto; }

.h0 { height: 0; }

@media screen and (min-width: 40em) {
  .ns\:w-10 { width: 10%; }
  .ns\:w-20 { width: 20%; }
  .ns\:w-25 { width: 25%; }
  .ns\:w-30 { width: 30%; }
  .ns\:w-33 { width: 33%; }
  .ns\:w-34 { width: 34%; }
  .ns\:w-40 { width: 40%; }
  .ns\:w-50 { width: 50%; }
  .ns\:w-60 { width: 60%; }
  .ns\:w-70 { width: 70%; }
  .ns\:w-75 { width: 75%; }
  .ns\:w-80 { width: 80%; }
  .ns\:w-90 { width: 90%; }
  .ns\:w-100 { width: 100%; }
  
  .ns\:w-third { width: calc(100% / 3); }
  .ns\:w-two-thirds { width: calc(100% / 1.5); }
  .ns\:w-auto { width: auto; }

  .ns\:h-100 { height: 100%; }
  .ns\:h-100v { height: 100vh; }
  .ns\:h-auto { height: auto; }

  .ns\:h0 { height: 0; }

  .ns\:measure { max-width: 27em; max-width: var(--measure); }
  .ns\:measure-wide { max-width: 34em; max-width: var(--measure-wide); }
  .ns\:measure-narrow { max-width: 19em; max-width: var(--measure-narrow); }
}

@media screen and (min-width: 60em) {
  .w-icon { width: 0.5rem; }

  .md\:w-10 { width: 10%; }
  .md\:w-20 { width: 20%; }
  .md\:w-25 { width: 25%; }
  .md\:w-30 { width: 30%; }
  .md\:w-33 { width: 33%; }
  .md\:w-34 { width: 34%; }
  .md\:w-40 { width: 40%; }
  .md\:w-50 { width: 50%; }
  .md\:w-60 { width: 60%; }
  .md\:w-70 { width: 70%; }
  .md\:w-75 { width: 75%; }
  .md\:w-80 { width: 80%; }
  .md\:w-90 { width: 90%; }
  .md\:w-100 { width: 100%; }
  
  .md\:w-third { width: calc(100% / 3); }
  .md\:w-two-thirds { width: calc(100% / 1.5); }
  .md\:w-auto { width: auto; }

  .md\:h-100 { height: 100%; }
  .md\:h-100v { height: 100vh; }
  .md\:h-auto { height: auto; }

  .md\:h0 { height: 0; }

  .md\:measure { max-width: 27em; max-width: var(--measure); }  
  .md\:measure-wide { max-width: 34em; max-width: var(--measure-wide); }  
  .md\:measure-narrow { max-width: 19em; max-width: var(--measure-narrow); }
}

@media screen and (min-width: 78em) {
  .lg\:w-10 { width: 10%; }
  .lg\:w-20 { width: 20%; }
  .lg\:w-25 { width: 25%; }
  .lg\:w-30 { width: 30%; }
  .lg\:w-33 { width: 33%; }
  .lg\:w-34 { width: 34%; }
  .lg\:w-40 { width: 40%; }
  .lg\:w-50 { width: 50%; }
  .lg\:w-60 { width: 60%; }
  .lg\:w-70 { width: 70%; }
  .lg\:w-75 { width: 75%; }
  .lg\:w-80 { width: 80%; }
  .lg\:w-90 { width: 90%; }
  .lg\:w-100 { width: 100%; }
  
  .lg\:w-third { width: calc(100% / 3); }
  .lg\:w-two-thirds { width: calc(100% / 1.5); }
  .lg\:w-auto { width: auto; }

  .lg\:h-100 { height: 100%; }
  .lg\:h-100v { height: 100vh; }
  .lg\:h-auto { height: auto; }

  .lg\:h0 { height: 0; }

  .lg\:measure { max-width: 27em; max-width: var(--measure); }  
  .lg\:measure-wide { max-width: 34em; max-width: var(--measure-wide); }  
  .lg\:measure-narrow { max-width: 19em; max-width: var(--measure-narrow); }
}

/*
  Margin and padding

  Some classes are missing intentionally to
  encourage single direction margins.

  - padding
  - margin
*/

.p0 { padding: 0; padding: var(--spacing-none); }

.p1 { padding: calc(1.25 * 0.2rem); padding: var(--spacing-extra-small); }

.p2 { padding: calc(1.25 * 0.67rem); padding: var(--spacing-small); }

.p3 { padding: calc(1.25 * 1rem); padding: var(--spacing-medium); }

.p4 { padding: calc(1.25 * 1.5rem); padding: var(--spacing-large); }

.p5 { padding: calc(1.25 * 2.25rem); padding: var(--spacing-extra-large); }

.p6 { padding: calc(1.25 * 3.38rem); padding: var(--spacing-extra-extra-large); }

.p7 { padding: calc(1.25 * 5.06rem); padding: var(--spacing-extra-extra-extra-large); }

.pl0 { padding-left: 0; padding-left: var(--spacing-none); }

.pl1 { padding-left: calc(1.25 * 0.2rem); padding-left: var(--spacing-extra-small); }

.pl2 { padding-left: calc(1.25 * 0.67rem); padding-left: var(--spacing-small); }

.pl3 { padding-left: calc(1.25 * 1rem); padding-left: var(--spacing-medium); }

.pl4 { padding-left: calc(1.25 * 1.5rem); padding-left: var(--spacing-large); }

.pl5 { padding-left: calc(1.25 * 2.25rem); padding-left: var(--spacing-extra-large); }

.pl6 { padding-left: calc(1.25 * 3.38rem); padding-left: var(--spacing-extra-extra-large); }

.pl7 { padding-left: calc(1.25 * 5.06rem); padding-left: var(--spacing-extra-extra-extra-large); }

.pr0 { padding-right: 0; padding-right: var(--spacing-none); }

.pr1 { padding-right: calc(1.25 * 0.2rem); padding-right: var(--spacing-extra-small); }

.pr2 { padding-right: calc(1.25 * 0.67rem); padding-right: var(--spacing-small); }

.pr3 { padding-right: calc(1.25 * 1rem); padding-right: var(--spacing-medium); }

.pr4 { padding-right: calc(1.25 * 1.5rem); padding-right: var(--spacing-large); }

.pr5 { padding-right: calc(1.25 * 2.25rem); padding-right: var(--spacing-extra-large); }

.pr6 { padding-right: calc(1.25 * 3.38rem); padding-right: var(--spacing-extra-extra-large); }

.pr7 { padding-right: calc(1.25 * 5.06rem); padding-right: var(--spacing-extra-extra-extra-large); }

.pt0 { padding-top: 0; padding-top: var(--spacing-none); }

.pt1 { padding-top: calc(1.25 * 0.2rem); padding-top: var(--spacing-extra-small); }

.pt2 { padding-top: calc(1.25 * 0.67rem); padding-top: var(--spacing-small); }

.pt3 { padding-top: calc(1.25 * 1rem); padding-top: var(--spacing-medium); }

.pt4 { padding-top: calc(1.25 * 1.5rem); padding-top: var(--spacing-large); }

.pt5 { padding-top: calc(1.25 * 2.25rem); padding-top: var(--spacing-extra-large); }

.pt6 { padding-top: calc(1.25 * 3.38rem); padding-top: var(--spacing-extra-extra-large); }

.pt7 { padding-top: calc(1.25 * 5.06rem); padding-top: var(--spacing-extra-extra-extra-large); }

.pb0 { padding-bottom: 0; padding-bottom: var(--spacing-none); }

.pb1 { padding-bottom: calc(1.25 * 0.2rem); padding-bottom: var(--spacing-extra-small); }

.pb2 { padding-bottom: calc(1.25 * 0.67rem); padding-bottom: var(--spacing-small); }

.pb3 { padding-bottom: calc(1.25 * 1rem); padding-bottom: var(--spacing-medium); }

.pb4 { padding-bottom: calc(1.25 * 1.5rem); padding-bottom: var(--spacing-large); }

.pb5 { padding-bottom: calc(1.25 * 2.25rem); padding-bottom: var(--spacing-extra-large); }

.pb6 { padding-bottom: calc(1.25 * 3.38rem); padding-bottom: var(--spacing-extra-extra-large); }

.pb7 { padding-bottom: calc(1.25 * 5.06rem); padding-bottom: var(--spacing-extra-extra-extra-large); }

.pb-square { padding-bottom: 100%; }

.pb-almost-square { padding-bottom: 87%; }

.pb-landscape { padding-bottom: 60.15%; }

.pb-portrait { padding-bottom: 125%; }

.px0 {
  padding-left: 0;
  padding-left: var(--spacing-none);
  padding-right: 0;
  padding-right: var(--spacing-none);
}

.px1 {
  padding-left: calc(1.25 * 0.2rem);
  padding-left: var(--spacing-extra-small);
  padding-right: calc(1.25 * 0.2rem);
  padding-right: var(--spacing-extra-small);
}

.px2 {
  padding-left: calc(1.25 * 0.67rem);
  padding-left: var(--spacing-small);
  padding-right: calc(1.25 * 0.67rem);
  padding-right: var(--spacing-small);
}

.px3 {
  padding-left: calc(1.25 * 1rem);
  padding-left: var(--spacing-medium);
  padding-right: calc(1.25 * 1rem);
  padding-right: var(--spacing-medium);
}

.px4 {
  padding-left: calc(1.25 * 1.5rem);
  padding-left: var(--spacing-large);
  padding-right: calc(1.25 * 1.5rem);
  padding-right: var(--spacing-large);
}

.px5 {
  padding-left: calc(1.25 * 2.25rem);
  padding-left: var(--spacing-extra-large);
  padding-right: calc(1.25 * 2.25rem);
  padding-right: var(--spacing-extra-large);
}

.px6 {
  padding-left: calc(1.25 * 3.38rem);
  padding-left: var(--spacing-extra-extra-large);
  padding-right: calc(1.25 * 3.38rem);
  padding-right: var(--spacing-extra-extra-large);
}

.px7 {
  padding-left: calc(1.25 * 5.06rem);
  padding-left: var(--spacing-extra-extra-extra-large);
  padding-right: calc(1.25 * 5.06rem);
  padding-right: var(--spacing-extra-extra-extra-large);
}

.mt0 { margin-top: 0; margin-top: var(--spacing-none); }

.mt1 { margin-top: calc(1.25 * 0.2rem); margin-top: var(--spacing-extra-small); }

.mt2 { margin-top: calc(1.25 * 0.67rem); margin-top: var(--spacing-small); }

.mt3 { margin-top: calc(1.25 * 1rem); margin-top: var(--spacing-medium); }

.mt4 { margin-top: calc(1.25 * 1.5rem); margin-top: var(--spacing-large); }

.mt5 { margin-top: calc(1.25 * 2.25rem); margin-top: var(--spacing-extra-large); }

.mt6 { margin-top: calc(1.25 * 3.38rem); margin-top: var(--spacing-extra-extra-large); }

.mt7 { margin-top: calc(1.25 * 5.06rem); margin-top: var(--spacing-extra-extra-extra-large); }

.ml-0 { margin-left: calc(-1 * 0); margin-left: calc(-1 * var(--spacing-none)); }

.ml-1 { margin-left: calc(-1 * calc(1.25 * 0.2rem)); margin-left: calc(-1 * var(--spacing-extra-small)); }

.ml-2 { margin-left: calc(-1 * calc(1.25 * 0.67rem)); margin-left: calc(-1 * var(--spacing-small)); }

.ml-3 { margin-left: calc(-1 * calc(1.25 * 1rem)); margin-left: calc(-1 * var(--spacing-medium)); }

.ml-4 { margin-left: calc(-1 * calc(1.25 * 1.5rem)); margin-left: calc(-1 * var(--spacing-large)); }

.ml-5 { margin-left: calc(-1 * calc(1.25 * 2.25rem)); margin-left: calc(-1 * var(--spacing-extra-large)); }

.ml-6 { margin-left: calc(-1 * calc(1.25 * 3.38rem)); margin-left: calc(-1 * var(--spacing-extra-extra-large)); }

.ml-7 { margin-left: calc(-1 * calc(1.25 * 5.06rem)); margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }

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

@media screen and (min-width: 40em) {
  .ns\:p0 { padding: 0; padding: var(--spacing-none); }
  .ns\:p1 { padding: calc(1.25 * 0.2rem); padding: var(--spacing-extra-small); }
  .ns\:p2 { padding: calc(1.25 * 0.67rem); padding: var(--spacing-small); }
  .ns\:p3 { padding: calc(1.25 * 1rem); padding: var(--spacing-medium); }
  .ns\:p4 { padding: calc(1.25 * 1.5rem); padding: var(--spacing-large); }
  .ns\:p5 { padding: calc(1.25 * 2.25rem); padding: var(--spacing-extra-large); }
  .ns\:p6 { padding: calc(1.25 * 3.38rem); padding: var(--spacing-extra-extra-large); }
  .ns\:p7 { padding: calc(1.25 * 5.06rem); padding: var(--spacing-extra-extra-extra-large); }

  .ns\:pl0 { padding-left: 0; padding-left: var(--spacing-none); }
  .ns\:pl1 { padding-left: calc(1.25 * 0.2rem); padding-left: var(--spacing-extra-small); }
  .ns\:pl2 { padding-left: calc(1.25 * 0.67rem); padding-left: var(--spacing-small); }
  .ns\:pl3 { padding-left: calc(1.25 * 1rem); padding-left: var(--spacing-medium); }
  .ns\:pl4 { padding-left: calc(1.25 * 1.5rem); padding-left: var(--spacing-large); }
  .ns\:pl5 { padding-left: calc(1.25 * 2.25rem); padding-left: var(--spacing-extra-large); }
  .ns\:pl6 { padding-left: calc(1.25 * 3.38rem); padding-left: var(--spacing-extra-extra-large); }
  .ns\:pl7 { padding-left: calc(1.25 * 5.06rem); padding-left: var(--spacing-extra-extra-extra-large); }

  .ns\:pr0 { padding-right: 0; padding-right: var(--spacing-none); }
  .ns\:pr1 { padding-right: calc(1.25 * 0.2rem); padding-right: var(--spacing-extra-small); }
  .ns\:pr2 { padding-right: calc(1.25 * 0.67rem); padding-right: var(--spacing-small); }
  .ns\:pr3 { padding-right: calc(1.25 * 1rem); padding-right: var(--spacing-medium); }
  .ns\:pr4 { padding-right: calc(1.25 * 1.5rem); padding-right: var(--spacing-large); }
  .ns\:pr5 { padding-right: calc(1.25 * 2.25rem); padding-right: var(--spacing-extra-large); }
  .ns\:pr6 { padding-right: calc(1.25 * 3.38rem); padding-right: var(--spacing-extra-extra-large); }
  .ns\:pr7 { padding-right: calc(1.25 * 5.06rem); padding-right: var(--spacing-extra-extra-extra-large); }

  .ns\:pt0 { padding-top: 0; padding-top: var(--spacing-none); }
  .ns\:pt1 { padding-top: calc(1.25 * 0.2rem); padding-top: var(--spacing-extra-small); }
  .ns\:pt2 { padding-top: calc(1.25 * 0.67rem); padding-top: var(--spacing-small); }
  .ns\:pt3 { padding-top: calc(1.25 * 1rem); padding-top: var(--spacing-medium); }
  .ns\:pt4 { padding-top: calc(1.25 * 1.5rem); padding-top: var(--spacing-large); }
  .ns\:pt5 { padding-top: calc(1.25 * 2.25rem); padding-top: var(--spacing-extra-large); }
  .ns\:pt6 { padding-top: calc(1.25 * 3.38rem); padding-top: var(--spacing-extra-extra-large); }
  .ns\:pt7 { padding-top: calc(1.25 * 5.06rem); padding-top: var(--spacing-extra-extra-extra-large); }

  .ns\:pb0 { padding-bottom: 0; padding-bottom: var(--spacing-none); }
  .ns\:pb1 { padding-bottom: calc(1.25 * 0.2rem); padding-bottom: var(--spacing-extra-small); }
  .ns\:pb2 { padding-bottom: calc(1.25 * 0.67rem); padding-bottom: var(--spacing-small); }
  .ns\:pb3 { padding-bottom: calc(1.25 * 1rem); padding-bottom: var(--spacing-medium); }
  .ns\:pb4 { padding-bottom: calc(1.25 * 1.5rem); padding-bottom: var(--spacing-large); }
  .ns\:pb5 { padding-bottom: calc(1.25 * 2.25rem); padding-bottom: var(--spacing-extra-large); }
  .ns\:pb6 { padding-bottom: calc(1.25 * 3.38rem); padding-bottom: var(--spacing-extra-extra-large); }
  .ns\:pb7 { padding-bottom: calc(1.25 * 5.06rem); padding-bottom: var(--spacing-extra-extra-extra-large); }

  .ns\:pb-square { padding-bottom: 100%; }
  .ns\:pb-almost-square { padding-bottom: 87%; }
  .ns\:pb-landscape { padding-bottom: 60.15%; }
  .ns\:pb-portrait { padding-bottom: 125%; }

  .ns\:px0 {
    padding-left: 0;
    padding-left: var(--spacing-none);
    padding-right: 0;
    padding-right: var(--spacing-none);
  }
  .ns\:px1 {
    padding-left: calc(1.25 * 0.2rem);
    padding-left: var(--spacing-extra-small);
    padding-right: calc(1.25 * 0.2rem);
    padding-right: var(--spacing-extra-small);
  }
  .ns\:px2 {
    padding-left: calc(1.25 * 0.67rem);
    padding-left: var(--spacing-small);
    padding-right: calc(1.25 * 0.67rem);
    padding-right: var(--spacing-small);
  }
  .ns\:px3 {
    padding-left: calc(1.25 * 1rem);
    padding-left: var(--spacing-medium);
    padding-right: calc(1.25 * 1rem);
    padding-right: var(--spacing-medium);
  }
  .ns\:px4 {
    padding-left: calc(1.25 * 1.5rem);
    padding-left: var(--spacing-large);
    padding-right: calc(1.25 * 1.5rem);
    padding-right: var(--spacing-large);
  }
  .ns\:px5 {
    padding-left: calc(1.25 * 2.25rem);
    padding-left: var(--spacing-extra-large);
    padding-right: calc(1.25 * 2.25rem);
    padding-right: var(--spacing-extra-large);
  }
  .ns\:px6 {
    padding-left: calc(1.25 * 3.38rem);
    padding-left: var(--spacing-extra-extra-large);
    padding-right: calc(1.25 * 3.38rem);
    padding-right: var(--spacing-extra-extra-large);
  }
  .ns\:px7 {
    padding-left: calc(1.25 * 5.06rem);
    padding-left: var(--spacing-extra-extra-extra-large);
    padding-right: calc(1.25 * 5.06rem);
    padding-right: var(--spacing-extra-extra-extra-large);
  }

  .ns\:mt0 { margin-top: 0; margin-top: var(--spacing-none); }
  .ns\:mt1 { margin-top: calc(1.25 * 0.2rem); margin-top: var(--spacing-extra-small); }
  .ns\:mt2 { margin-top: calc(1.25 * 0.67rem); margin-top: var(--spacing-small); }
  .ns\:mt3 { margin-top: calc(1.25 * 1rem); margin-top: var(--spacing-medium); }
  .ns\:mt4 { margin-top: calc(1.25 * 1.5rem); margin-top: var(--spacing-large); }
  .ns\:mt5 { margin-top: calc(1.25 * 2.25rem); margin-top: var(--spacing-extra-large); }
  .ns\:mt6 { margin-top: calc(1.25 * 3.38rem); margin-top: var(--spacing-extra-extra-large); }
  .ns\:mt7 { margin-top: calc(1.25 * 5.06rem); margin-top: var(--spacing-extra-extra-extra-large); }

  .ns\:ml-0 { margin-left: calc(-1 * 0); margin-left: calc(-1 * var(--spacing-none)); }
  .ns\:ml-1 { margin-left: calc(-1 * calc(1.25 * 0.2rem)); margin-left: calc(-1 * var(--spacing-extra-small)); }
  .ns\:ml-2 { margin-left: calc(-1 * calc(1.25 * 0.67rem)); margin-left: calc(-1 * var(--spacing-small)); }
  .ns\:ml-3 { margin-left: calc(-1 * calc(1.25 * 1rem)); margin-left: calc(-1 * var(--spacing-medium)); }
  .ns\:ml-4 { margin-left: calc(-1 * calc(1.25 * 1.5rem)); margin-left: calc(-1 * var(--spacing-large)); }
  .ns\:ml-5 { margin-left: calc(-1 * calc(1.25 * 2.25rem)); margin-left: calc(-1 * var(--spacing-extra-large)); }
  .ns\:ml-6 { margin-left: calc(-1 * calc(1.25 * 3.38rem)); margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
  .ns\:ml-7 { margin-left: calc(-1 * calc(1.25 * 5.06rem)); margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }

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

@media screen and (min-width: 60em) {
  .md\:p0 { padding: 0; padding: var(--spacing-none); }
  .md\:p1 { padding: calc(1.25 * 0.2rem); padding: var(--spacing-extra-small); }
  .md\:p2 { padding: calc(1.25 * 0.67rem); padding: var(--spacing-small); }
  .md\:p3 { padding: calc(1.25 * 1rem); padding: var(--spacing-medium); }
  .md\:p4 { padding: calc(1.25 * 1.5rem); padding: var(--spacing-large); }
  .md\:p5 { padding: calc(1.25 * 2.25rem); padding: var(--spacing-extra-large); }
  .md\:p6 { padding: calc(1.25 * 3.38rem); padding: var(--spacing-extra-extra-large); }
  .md\:p7 { padding: calc(1.25 * 5.06rem); padding: var(--spacing-extra-extra-extra-large); }

  .md\:pl0 { padding-left: 0; padding-left: var(--spacing-none); }
  .md\:pl1 { padding-left: calc(1.25 * 0.2rem); padding-left: var(--spacing-extra-small); }
  .md\:pl2 { padding-left: calc(1.25 * 0.67rem); padding-left: var(--spacing-small); }
  .md\:pl3 { padding-left: calc(1.25 * 1rem); padding-left: var(--spacing-medium); }
  .md\:pl4 { padding-left: calc(1.25 * 1.5rem); padding-left: var(--spacing-large); }
  .md\:pl5 { padding-left: calc(1.25 * 2.25rem); padding-left: var(--spacing-extra-large); }
  .md\:pl6 { padding-left: calc(1.25 * 3.38rem); padding-left: var(--spacing-extra-extra-large); }
  .md\:pl7 { padding-left: calc(1.25 * 5.06rem); padding-left: var(--spacing-extra-extra-extra-large); }

  .md\:pr0 { padding-right: 0; padding-right: var(--spacing-none); }
  .md\:pr1 { padding-right: calc(1.25 * 0.2rem); padding-right: var(--spacing-extra-small); }
  .md\:pr2 { padding-right: calc(1.25 * 0.67rem); padding-right: var(--spacing-small); }
  .md\:pr3 { padding-right: calc(1.25 * 1rem); padding-right: var(--spacing-medium); }
  .md\:pr4 { padding-right: calc(1.25 * 1.5rem); padding-right: var(--spacing-large); }
  .md\:pr5 { padding-right: calc(1.25 * 2.25rem); padding-right: var(--spacing-extra-large); }
  .md\:pr6 { padding-right: calc(1.25 * 3.38rem); padding-right: var(--spacing-extra-extra-large); }
  .md\:pr7 { padding-right: calc(1.25 * 5.06rem); padding-right: var(--spacing-extra-extra-extra-large); }

  .md\:pt0 { padding-top: 0; padding-top: var(--spacing-none); }
  .md\:pt1 { padding-top: calc(1.25 * 0.2rem); padding-top: var(--spacing-extra-small); }
  .md\:pt2 { padding-top: calc(1.25 * 0.67rem); padding-top: var(--spacing-small); }
  .md\:pt3 { padding-top: calc(1.25 * 1rem); padding-top: var(--spacing-medium); }
  .md\:pt4 { padding-top: calc(1.25 * 1.5rem); padding-top: var(--spacing-large); }
  .md\:pt5 { padding-top: calc(1.25 * 2.25rem); padding-top: var(--spacing-extra-large); }
  .md\:pt6 { padding-top: calc(1.25 * 3.38rem); padding-top: var(--spacing-extra-extra-large); }
  .md\:pt7 { padding-top: calc(1.25 * 5.06rem); padding-top: var(--spacing-extra-extra-extra-large); }

  .md\:pb0 { padding-bottom: 0; padding-bottom: var(--spacing-none); }
  .md\:pb1 { padding-bottom: calc(1.25 * 0.2rem); padding-bottom: var(--spacing-extra-small); }
  .md\:pb2 { padding-bottom: calc(1.25 * 0.67rem); padding-bottom: var(--spacing-small); }
  .md\:pb3 { padding-bottom: calc(1.25 * 1rem); padding-bottom: var(--spacing-medium); }
  .md\:pb4 { padding-bottom: calc(1.25 * 1.5rem); padding-bottom: var(--spacing-large); }
  .md\:pb5 { padding-bottom: calc(1.25 * 2.25rem); padding-bottom: var(--spacing-extra-large); }
  .md\:pb6 { padding-bottom: calc(1.25 * 3.38rem); padding-bottom: var(--spacing-extra-extra-large); }
  .md\:pb7 { padding-bottom: calc(1.25 * 5.06rem); padding-bottom: var(--spacing-extra-extra-extra-large); }

  .md\:pb-square { padding-bottom: 100%; }
  .md\:pb-almost-square { padding-bottom: 87%; }
  .md\:pb-landscape { padding-bottom: 60.15%; }
  .md\:pb-portrait { padding-bottom: 125%; }

  .md\:px0 {
    padding-left: 0;
    padding-left: var(--spacing-none);
    padding-right: 0;
    padding-right: var(--spacing-none);
  }

  .md\:px1 {
    padding-left: calc(1.25 * 0.2rem);
    padding-left: var(--spacing-extra-small);
    padding-right: calc(1.25 * 0.2rem);
    padding-right: var(--spacing-extra-small);
  }
  .md\:px2 {
    padding-left: calc(1.25 * 0.67rem);
    padding-left: var(--spacing-small);
    padding-right: calc(1.25 * 0.67rem);
    padding-right: var(--spacing-small);
  }
  .md\:px3 {
    padding-left: calc(1.25 * 1rem);
    padding-left: var(--spacing-medium);
    padding-right: calc(1.25 * 1rem);
    padding-right: var(--spacing-medium);
  }
  .md\:px4 {
    padding-left: calc(1.25 * 1.5rem);
    padding-left: var(--spacing-large);
    padding-right: calc(1.25 * 1.5rem);
    padding-right: var(--spacing-large);
  }
  .md\:px5 {
    padding-left: calc(1.25 * 2.25rem);
    padding-left: var(--spacing-extra-large);
    padding-right: calc(1.25 * 2.25rem);
    padding-right: var(--spacing-extra-large);
  }
  .md\:px6 {
    padding-left: calc(1.25 * 3.38rem);
    padding-left: var(--spacing-extra-extra-large);
    padding-right: calc(1.25 * 3.38rem);
    padding-right: var(--spacing-extra-extra-large);
  }
  .md\:px7 {
    padding-left: calc(1.25 * 5.06rem);
    padding-left: var(--spacing-extra-extra-extra-large);
    padding-right: calc(1.25 * 5.06rem);
    padding-right: var(--spacing-extra-extra-extra-large);
  }

  .md\:mt0 { margin-top: 0; margin-top: var(--spacing-none); }
  .md\:mt1 { margin-top: calc(1.25 * 0.2rem); margin-top: var(--spacing-extra-small); }
  .md\:mt2 { margin-top: calc(1.25 * 0.67rem); margin-top: var(--spacing-small); }
  .md\:mt3 { margin-top: calc(1.25 * 1rem); margin-top: var(--spacing-medium); }
  .md\:mt4 { margin-top: calc(1.25 * 1.5rem); margin-top: var(--spacing-large); }
  .md\:mt5 { margin-top: calc(1.25 * 2.25rem); margin-top: var(--spacing-extra-large); }
  .md\:mt6 { margin-top: calc(1.25 * 3.38rem); margin-top: var(--spacing-extra-extra-large); }
  .md\:mt7 { margin-top: calc(1.25 * 5.06rem); margin-top: var(--spacing-extra-extra-extra-large); }

  .md\:ml-0 { margin-left: calc(-1 * 0); margin-left: calc(-1 * var(--spacing-none)); }
  .md\:ml-1 { margin-left: calc(-1 * calc(1.25 * 0.2rem)); margin-left: calc(-1 * var(--spacing-extra-small)); }
  .md\:ml-2 { margin-left: calc(-1 * calc(1.25 * 0.67rem)); margin-left: calc(-1 * var(--spacing-small)); }
  .md\:ml-3 { margin-left: calc(-1 * calc(1.25 * 1rem)); margin-left: calc(-1 * var(--spacing-medium)); }
  .md\:ml-4 { margin-left: calc(-1 * calc(1.25 * 1.5rem)); margin-left: calc(-1 * var(--spacing-large)); }
  .md\:ml-5 { margin-left: calc(-1 * calc(1.25 * 2.25rem)); margin-left: calc(-1 * var(--spacing-extra-large)); }
  .md\:ml-6 { margin-left: calc(-1 * calc(1.25 * 3.38rem)); margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
  .md\:ml-7 { margin-left: calc(-1 * calc(1.25 * 5.06rem)); margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }

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

@media screen and (min-width: 78em) {
  .lg\:p0 { padding: 0; padding: var(--spacing-none); }
  .lg\:p1 { padding: calc(1.25 * 0.2rem); padding: var(--spacing-extra-small); }
  .lg\:p2 { padding: calc(1.25 * 0.67rem); padding: var(--spacing-small); }
  .lg\:p3 { padding: calc(1.25 * 1rem); padding: var(--spacing-medium); }
  .lg\:p4 { padding: calc(1.25 * 1.5rem); padding: var(--spacing-large); }
  .lg\:p5 { padding: calc(1.25 * 2.25rem); padding: var(--spacing-extra-large); }
  .lg\:p6 { padding: calc(1.25 * 3.38rem); padding: var(--spacing-extra-extra-large); }
  .lg\:p7 { padding: calc(1.25 * 5.06rem); padding: var(--spacing-extra-extra-extra-large); }

  .lg\:pl0 { padding-left: 0; padding-left: var(--spacing-none); }
  .lg\:pl1 { padding-left: calc(1.25 * 0.2rem); padding-left: var(--spacing-extra-small); }
  .lg\:pl2 { padding-left: calc(1.25 * 0.67rem); padding-left: var(--spacing-small); }
  .lg\:pl3 { padding-left: calc(1.25 * 1rem); padding-left: var(--spacing-medium); }
  .lg\:pl4 { padding-left: calc(1.25 * 1.5rem); padding-left: var(--spacing-large); }
  .lg\:pl5 { padding-left: calc(1.25 * 2.25rem); padding-left: var(--spacing-extra-large); }
  .lg\:pl6 { padding-left: calc(1.25 * 3.38rem); padding-left: var(--spacing-extra-extra-large); }
  .lg\:pl7 { padding-left: calc(1.25 * 5.06rem); padding-left: var(--spacing-extra-extra-extra-large); }

  .lg\:pr0 { padding-right: 0; padding-right: var(--spacing-none); }
  .lg\:pr1 { padding-right: calc(1.25 * 0.2rem); padding-right: var(--spacing-extra-small); }
  .lg\:pr2 { padding-right: calc(1.25 * 0.67rem); padding-right: var(--spacing-small); }
  .lg\:pr3 { padding-right: calc(1.25 * 1rem); padding-right: var(--spacing-medium); }
  .lg\:pr4 { padding-right: calc(1.25 * 1.5rem); padding-right: var(--spacing-large); }
  .lg\:pr5 { padding-right: calc(1.25 * 2.25rem); padding-right: var(--spacing-extra-large); }
  .lg\:pr6 { padding-right: calc(1.25 * 3.38rem); padding-right: var(--spacing-extra-extra-large); }
  .lg\:pr7 { padding-right: calc(1.25 * 5.06rem); padding-right: var(--spacing-extra-extra-extra-large); }

  .lg\:pt0 { padding-top: 0; padding-top: var(--spacing-none); }
  .lg\:pt1 { padding-top: calc(1.25 * 0.2rem); padding-top: var(--spacing-extra-small); }
  .lg\:pt2 { padding-top: calc(1.25 * 0.67rem); padding-top: var(--spacing-small); }
  .lg\:pt3 { padding-top: calc(1.25 * 1rem); padding-top: var(--spacing-medium); }
  .lg\:pt4 { padding-top: calc(1.25 * 1.5rem); padding-top: var(--spacing-large); }
  .lg\:pt5 { padding-top: calc(1.25 * 2.25rem); padding-top: var(--spacing-extra-large); }
  .lg\:pt6 { padding-top: calc(1.25 * 3.38rem); padding-top: var(--spacing-extra-extra-large); }
  .lg\:pt7 { padding-top: calc(1.25 * 5.06rem); padding-top: var(--spacing-extra-extra-extra-large); }

  .lg\:pb0 { padding-bottom: 0; padding-bottom: var(--spacing-none); }
  .lg\:pb1 { padding-bottom: calc(1.25 * 0.2rem); padding-bottom: var(--spacing-extra-small); }
  .lg\:pb2 { padding-bottom: calc(1.25 * 0.67rem); padding-bottom: var(--spacing-small); }
  .lg\:pb3 { padding-bottom: calc(1.25 * 1rem); padding-bottom: var(--spacing-medium); }
  .lg\:pb4 { padding-bottom: calc(1.25 * 1.5rem); padding-bottom: var(--spacing-large); }
  .lg\:pb5 { padding-bottom: calc(1.25 * 2.25rem); padding-bottom: var(--spacing-extra-large); }
  .lg\:pb6 { padding-bottom: calc(1.25 * 3.38rem); padding-bottom: var(--spacing-extra-extra-large); }
  .lg\:pb7 { padding-bottom: calc(1.25 * 5.06rem); padding-bottom: var(--spacing-extra-extra-extra-large); }

  .lg\:pb-square { padding-bottom: 100%; }
  .lg\:pb-almost-square { padding-bottom: 87%; }
  .lg\:pb-landscape { padding-bottom: 60.15%; }
  .lg\:pb-portrait { padding-bottom: 125%; }

  .lg\:px0 {
    padding-left: 0;
    padding-left: var(--spacing-none);
    padding-right: 0;
    padding-right: var(--spacing-none);
  }
  .lg\:px1 {
    padding-left: calc(1.25 * 0.2rem);
    padding-left: var(--spacing-extra-small);
    padding-right: calc(1.25 * 0.2rem);
    padding-right: var(--spacing-extra-small);
  }
  .lg\:px2 {
    padding-left: calc(1.25 * 0.67rem);
    padding-left: var(--spacing-small);
    padding-right: calc(1.25 * 0.67rem);
    padding-right: var(--spacing-small);
  }
  .lg\:px3 {
    padding-left: calc(1.25 * 1rem);
    padding-left: var(--spacing-medium);
    padding-right: calc(1.25 * 1rem);
    padding-right: var(--spacing-medium);
  }
  .lg\:px4 {
    padding-left: calc(1.25 * 1.5rem);
    padding-left: var(--spacing-large);
    padding-right: calc(1.25 * 1.5rem);
    padding-right: var(--spacing-large);
  }
  .lg\:px5 {
    padding-left: calc(1.25 * 2.25rem);
    padding-left: var(--spacing-extra-large);
    padding-right: calc(1.25 * 2.25rem);
    padding-right: var(--spacing-extra-large);
  }
  .lg\:px6 {
    padding-left: calc(1.25 * 3.38rem);
    padding-left: var(--spacing-extra-extra-large);
    padding-right: calc(1.25 * 3.38rem);
    padding-right: var(--spacing-extra-extra-large);
  }
  .lg\:px7 {
    padding-left: calc(1.25 * 5.06rem);
    padding-left: var(--spacing-extra-extra-extra-large);
    padding-right: calc(1.25 * 5.06rem);
    padding-right: var(--spacing-extra-extra-extra-large);
  }

  .lg\:mt0 { margin-top: 0; margin-top: var(--spacing-none); }
  .lg\:mt1 { margin-top: calc(1.25 * 0.2rem); margin-top: var(--spacing-extra-small); }
  .lg\:mt2 { margin-top: calc(1.25 * 0.67rem); margin-top: var(--spacing-small); }
  .lg\:mt3 { margin-top: calc(1.25 * 1rem); margin-top: var(--spacing-medium); }
  .lg\:mt4 { margin-top: calc(1.25 * 1.5rem); margin-top: var(--spacing-large); }
  .lg\:mt5 { margin-top: calc(1.25 * 2.25rem); margin-top: var(--spacing-extra-large); }
  .lg\:mt6 { margin-top: calc(1.25 * 3.38rem); margin-top: var(--spacing-extra-extra-large); }
  .lg\:mt7 { margin-top: calc(1.25 * 5.06rem); margin-top: var(--spacing-extra-extra-extra-large); }

  .lg\:ml-0 { margin-left: calc(-1 * 0); margin-left: calc(-1 * var(--spacing-none)); }
  .lg\:ml-1 { margin-left: calc(-1 * calc(1.25 * 0.2rem)); margin-left: calc(-1 * var(--spacing-extra-small)); }
  .lg\:ml-2 { margin-left: calc(-1 * calc(1.25 * 0.67rem)); margin-left: calc(-1 * var(--spacing-small)); }
  .lg\:ml-3 { margin-left: calc(-1 * calc(1.25 * 1rem)); margin-left: calc(-1 * var(--spacing-medium)); }
  .lg\:ml-4 { margin-left: calc(-1 * calc(1.25 * 1.5rem)); margin-left: calc(-1 * var(--spacing-large)); }
  .lg\:ml-5 { margin-left: calc(-1 * calc(1.25 * 2.25rem)); margin-left: calc(-1 * var(--spacing-extra-large)); }
  .lg\:ml-6 { margin-left: calc(-1 * calc(1.25 * 3.38rem)); margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
  .lg\:ml-7 { margin-left: calc(-1 * calc(1.25 * 5.06rem)); margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }

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

/* 
  Coordinates

  - top
  - right
  - bottom
  - left
*/

.t0 { top: 0; }

.r0 { right: 0; }

.b0 { bottom: 0; }

.l0 { left: 0; }

.t-3 { top: calc(-1 * calc(1.25 * 1rem)); top: calc(-1 * var(--spacing-medium)); }

.t-4 { top: calc(-1 * calc(1.25 * 1.5rem)); top: calc(-1 * var(--spacing-large)); }

.t2 { top: calc(1.25 * 0.67rem); top: var(--spacing-small); }

.r2 { right: calc(1.25 * 0.67rem); right: var(--spacing-small); }

.t2-tight { top: calc(calc(1.25 * 0.67rem) * 0.85); top: calc(var(--spacing-small) * 0.85); }

.r2-tight { right: calc(calc(1.25 * 0.67rem) * 0.85); right: calc(var(--spacing-small) * 0.85); }

.l-50 { left: 50% }

@media screen and (min-width: 40em) {
  .ns\:t0 { top: 0; }
  .ns\:r0 { right: 0; }
  .ns\:b0 { bottom: 0; }
  .ns\:l0 { left: 0; }

  .ns\:t-3 { top: calc(-1 * calc(1.25 * 1rem)); top: calc(-1 * var(--spacing-medium)); }
  .ns\:t-4 { top: calc(-1 * calc(1.25 * 1.5rem)); top: calc(-1 * var(--spacing-large)); }
}

@media screen and (min-width: 60em) {
  .md\:t0 { top: 0; }
  .md\:r0 { right: 0; }
  .md\:b0 { bottom: 0; }
  .md\:l0 { left: 0; }

  .md\:t-3 { top: calc(-1 * calc(1.25 * 1rem)); top: calc(-1 * var(--spacing-medium)); }
  .md\:t-4 { top: calc(-1 * calc(1.25 * 1.5rem)); top: calc(-1 * var(--spacing-large)); }
}

@media screen and (min-width: 78em) {
  .lg\:t0 { top: 0; }
  .lg\:r0 { right: 0; }
  .lg\:b0 { bottom: 0; }
  .lg\:l0 { left: 0; }

  .lg\:t-3 { top: calc(-1 * calc(1.25 * 1rem)); top: calc(-1 * var(--spacing-medium)); }
  .lg\:t-4 { top: calc(-1 * calc(1.25 * 1.5rem)); top: calc(-1 * var(--spacing-large)); }
}

/*
  Flexbox
*/

.flex { display: flex; }

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

.wrap { flex-wrap: wrap; }

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

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

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

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

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

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

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

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

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

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

.justify-even {
  justify-content: space-around;
  /* Edge fails */
  /* justify-content: space-evenly; */
}

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

@media screen and (min-width: 40em) {
  .ns\:flex { display: flex; }
  .ns\:flex-inline { display: inline-flex; }

  .ns\:direction-reverse { flex-direction: row-reverse; } 
  .ns\:direction-column { flex-direction: column; }
  .ns\:direction-column-reverse { flex-direction: column-reverse; }

  .ns\:justify-between { justify-content: space-between; }
  .ns\:justify-center { justify-content: center; }
  .ns\:justify-start { justify-content: start; }
  .ns\:justify-center { justify-content: center; }
  .ns\:justify-around { justify-content: space-around; }
  .ns\:justify-even {
    justify-content: space-around;
    justify-content: space-evenly;
  }
}

@media screen and (min-width: 60em) {
  .md\:flex { display: flex; }
  .md\:flex-inline { display: inline-flex; }

  .md\:direction-reverse { flex-direction: row-reverse; } 
  .md\:direction-column { flex-direction: column; }
  .md\:direction-column-reverse { flex-direction: column-reverse; }

  .md\:justify-between { justify-content: space-between; }
  .md\:justify-center { justify-content: center; }
  .md\:justify-start { justify-content: start; }
  .md\:justify-center { justify-content: center; }
  .md\:justify-around { justify-content: space-around; }
  .md\:justify-even {
    justify-content: space-around;
    justify-content: space-evenly;
  }
}

@media screen and (min-width: 78em) {
  .lg\:flex { display: flex; }
  .lg\:flex-inline { display: inline-flex; }

  .lg\:direction-reverse { flex-direction: row-reverse; } 
  .lg\:direction-column { flex-direction: column; }
  .lg\:direction-column-reverse { flex-direction: column-reverse; }

  .lg\:justify-between { justify-content: space-between; }
  .lg\:justify-center { justify-content: center; }
  .lg\:justify-start { justify-content: start; }
  .lg\:justify-center { justify-content: center; }
  .lg\:justify-around { justify-content: space-around; }
  .lg\:justify-even {
    justify-content: space-around;
    justify-content: space-evenly;
  }
}

/*
  Transforms

  - transform
*/

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

/*
  Animation

  - transition
  - transitionable props
*/

/* Presets */

.js-ok .transition-color {
  transition-property: color;
  transition-duration: 600ms;
  transition-duration: var(--time-slower);
  transition-timing-function: linear;
}

.js-ok .transition-background {
  transition-property: background;
  transition-duration: 300ms;
  transition-duration: var(--time-fast);
  transition-timing-function: linear;
}

.js-ok .transition-appear {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 900ms;
  transition-duration: var(--time-deliberate);
  transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
}

.js-ok .transition-appear.trigger {
  opacity: 1;
}

.js-ok .transition-appear-05 {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 900ms;
  transition-duration: var(--time-deliberate);
  transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
}

.js-ok .transition-appear-05.trigger {
  opacity: 0.05;
}

.js-ok .transition-appear-fancy {
  opacity: 0;
  -webkit-transform: translateY(calc(1.25 * 1rem));
          transform: translateY(calc(1.25 * 1rem));
  -webkit-transform: translateY(var(--spacing-medium));
          transform: translateY(var(--spacing-medium));
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: 1350ms;
  transition-duration: var(--time-extra-deliberate);
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.js-ok .transition-appear-fancy.trigger {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.js-ok .transition-hide {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-duration: var(--time-fast);
  transition-timing-function: linear;
}

.js-ok .transition-hide.trigger {
  opacity: 0;
}

.js-ok .transition-invert {
  -webkit-filter: invert(94.5%);
          filter: invert(94.5%);
  transition-property: -webkit-filter;
  transition-property: filter;
  transition-property: filter, -webkit-filter;
  transition-duration: 300ms;
  transition-duration: var(--time-fast);
  transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
}

.js-ok .transition-invert.trigger {
  -webkit-filter: invert(100%);
          filter: invert(100%);
}

@media screen and (min-width: 60em) {
  .js-ok .md\:transition-appear {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 900ms;
    transition-duration: var(--time-deliberate);
    transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  .js-ok .md\:transition-appear.trigger {
    opacity: 1;
  }
  
  .js-ok .md\:transition-hide {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 300ms;
    transition-duration: var(--time-fast);
    transition-timing-function: linear;
  }
  .js-ok .md\:transition-hide.trigger {
    opacity: 0;
  }
}

.js-ok .delay1 { transition-delay: 0.2s; }

.js-ok .delay2 { transition-delay: 0.3s; }

.js-ok .delay3 { transition-delay: 0.44s; }

.js-ok .delay4 { transition-delay: 0.67s; }

.js-ok .delay5 { transition-delay: 1s; }

.js-ok .delay6 { transition-delay: 1.5s; }

.js-ok .delay7 { transition-delay: 2.25s; }

.js-ok .duration-immediate { transition-duration: 100ms; transition-duration: var(--time-immediate); }

.js-ok .duration-fast { transition-duration: 300ms; transition-duration: var(--time-fast); }

.js-ok .duration-slower { transition-duration: 600ms; transition-duration: var(--time-slower); }

.js-ok .duration-deliberate { transition-duration: 900ms; transition-duration: var(--time-deliberate); }

/*
  Compound

  Class declarations with many properties.
*/

.fit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.reset {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  border-radius: 0;
  background: transparent;
}

@media screen and (min-width: 60em) {
  .md\:vertical-divider::after {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: currentColor;
    opacity: 0.5;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

/* https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/*
  Mainly utilities and hard to categorize
*/

.cursor-default { cursor: default; }

.cursor-pointer { cursor: pointer; }

.cursor-grab { cursor: -webkit-grab; cursor: grab; }

.cursor-cross { cursor: crosshair; }

.quotes::before { content: '\201C'; }

.quotes::after { content: '\201D'; }

.appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.pointer-none { pointer-events: none; }

.overflow-hidden { overflow: hidden; }

.border { border: 0.066em solid currentColor; }

/*
  Underline tricky stuff
  Some hovers here!

  This is messed up :(
*/

.underline,
a.underline,
.underline-children a,
.underline-children strong,
.underline-children-strong strong {
  background-image: linear-gradient(120deg, currentColor 0%, currentColor 100%);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  transition: background-size 300ms ease-in-out;
  transition: background-size var(--time-fast) ease-in-out;
}

@media screen and (min-width: 60em) {
  .f0.underline,
  .f0.underline-children a,
  .f0.underline-children strong,
  .f1.underline,
  .f1.underline-children a,
  .f1.underline-children strong {
    background-size: 100% 0.066em; 
    background-position: 0 95%;
  }
  .f2.underline,
  .f2.underline-children a,
  .f2.underline-children strong {
    background-size: 95% 0.066em;
    background-position: 0 95%;
  }
  .f3.underline,
  .f3.underline-children a,
  .f3.underline-children strong {
    background-size: 100% 3px;
  }
  .f4.underline,
  .f4.underline-children a,
  .f4.underline-children strong {
    background-size: 100% 2px;
  }
}

/* Hovers */

@media (hover: hover) {
  a.underline:hover,
  .underline-children a:hover {
    background-size: 0% 2px;
  }
  
  a.f0.underline:hover,
  .f0.underline-children a:hover,
  a.f1.underline:hover,
  .f1.underline-children a:hover,
  a.f2.underline:hover,
  .f2.underline-children a:hover {
    background-size: 0% 0.066em;
  }

  .hover-underline,
  .hover-underline-children a {
    background-image: linear-gradient(120deg, currentColor 0%, currentColor 100%);
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: 0 100%;
    transition: background-size 300ms ease-in-out;
    transition: background-size var(--time-fast) ease-in-out;
  }
  .hover-underline:hover,
  .hover-underline-children a:hover {
    background-size: 100% 2px;
  }
  .f0.hover-underline,
  .f0.hover-underline-children a,
  .f1.hover-underline,
  .f1.hover-underline-children a,
  .f2.hover-underline,
  .f2.hover-underline-children a {
    background-position: 0 95%;
  }
}

@media screen and (min-width: 40em) and (hover: hover) {
  .ns\:f4 a.underline {
    transition: background-size 300ms ease-in-out;
    transition: background-size var(--time-fast) ease-in-out;
  }

  .ns\:f4 .hover-underline {
    background-size: 0% 2px;
    /* !important because it conflicts with transition-color on a parent */
    transition-property: background-size, color !important;
    transition-duration: 300ms !important;
    transition-duration: var(--time-fast) !important;
    transition-timing-function: ease-in-out !important;
  }
  .ns\:f4 .hover-underline:hover {
    background-size: 100% 2px;
  }
}

@media screen and (min-width: 60em) and (hover: hover) {
  a.f0.underline:hover,
  .f0.underline-children a:hover,
  a.f1.underline:hover,
  .f1.underline-children a:hover,
  a.f2.underline:hover,
  .f2.underline-children a:hover {
    background-size: 0% 0.066em;
    background-position: 0 95%;
  }
  a.f3.underline:hover,
  .f3.underline-children a:hover {
    background-size: 0% 3px;
  }
  a.f4.underline:hover,
  a.f4:hover .underline,
  .f4.underline-children a:hover {
    background-size: 0% 2px;
  }

  .f0.hover-underline,
  .f1.hover-underline,
  .f2.hover-underline {
    background-size: 0% 0.066em;
    transition: background-size 300ms ease-in-out;
    transition: background-size var(--time-fast) ease-in-out;
  }
  .f0.hover-underline:hover,
  .f1.hover-underline:hover,
  .f2.hover-underline:hover {
    background-size: 100% 0.066em;
  }
  .f3.hover-underline {
    background-size: 0% 3px;
    transition: background-size 300ms ease-in-out;
    transition: background-size var(--time-fast) ease-in-out;
  }
  .f3.hover-underline:hover {
    background-size: 100% 3px;
  }
  .f4.hover-underline {
    background-size: 0% 2px;
    transition: background-size 300ms ease-in-out;
    transition: background-size var(--time-fast) ease-in-out;
  }
  .f4.hover-underline:hover {
    background-size: 100% 2px;
  }
}

/*
  Awful naming, not atomic!
*/

.hide-when-no-hover {
  display: none;
}

@media (hover: hover) {
  .hide-when-no-hover {
    display: unset;
  }

  .hover-appear-some {
    opacity: 0;
    transition: opacity 300ms;
    transition: opacity var(--time-fast);
  }
  *:hover + .hover-appear-some,
  *:hover > .hover-appear-some {
    opacity: 0.2;
  }
  
  .hover-hide-some {
    opacity: 1;
    transition: opacity 300ms;
    transition: opacity var(--time-fast);
  }
  *:hover + .hover-hide-some,
  *:hover > .hover-hide-some {
    opacity: 0.5;
  }
}

/* Toggleable menu, not atomic! */

[href="#menu"] > svg {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
}

#menu:target {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.menu {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  transition: opacity 600ms cubic-bezier(0.17, 0.84, 0.44, 1);
  transition: opacity var(--time-slower) cubic-bezier(0.17, 0.84, 0.44, 1);
}

.is-menu-hidden .menu {
  display: none;
}

.is-menu-toggling .menu {
  opacity: 0;
}

.is-menu-toggling.is-menu-open .menu {
  opacity: 1;
}

/* Close button */

.menu::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(1.25 * 1rem);
  top: var(--spacing-medium);
  left: calc(1.25 * 1rem);
  left: var(--spacing-medium);
  width: 28px;
  height: 28px;
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  background-color: transparent;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgaWQ9IkNhcGFfMSIgeD0iMCIgeT0iMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8c3R5bGU+CiAgICAuc3Qwe2ZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2Utd2lkdGg6Mi43NTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmR9CiAgPC9zdHlsZT4KICA8cGF0aCBkPSJNMTggNiA2IDE4TTYgNmwxMiAxMiIgY2xhc3M9InN0MCIvPgo8L3N2Zz4K);
  background-repeat: no-repeat;
  cursor: pointer;
}

@media screen and (min-width: 40em) {
  .menu {
    max-width: 12rem;
  }
}

@media screen and (min-width: 60em) {
  .menu::after {
    top: calc(1.25 * 0.67rem);
    top: var(--spacing-small);
    left: calc(1.25 * 0.67rem);
    left: var(--spacing-small);
  }
}

/* Popup kind of alert, not atomic! */

.alert {
  position: fixed;
  z-index: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 90vh;
  opacity: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
  transition: opacity 300ms;
  transition: opacity var(--time-fast);
}

.alert:target,
.alert.is-open {
  opacity: 1;
  z-index: 10;
  pointer-events: all;
}

/* http://tobiasahlin.com/spinkit/ */

.spinner {
  width: 1rem;
  height: 1rem;
  margin: 100px auto;
  background-color: rgb(46, 46, 44);
  background-color: var(--grey-dark);

  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}