/* https://github.com/hankchizljaw/modern-css-reset */
/* Box sizing rules */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
video {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
         -o-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
* {
  --rhythm: 1.5rem;
  --rhythm-quadruple: calc(4 * var(--rhythm));
  --rhythm-triple: calc(3 * var(--rhythm));
  --rhythm-double: calc(2 * var(--rhythm));
  --rhythm-half: calc((1/2) * var(--rhythm));
  --rhythm-third: calc((1/3) * var(--rhythm));
  --rhythm-fourth: calc((1/4) * var(--rhythm));
  --rhythm-sixth: calc((1/6) * var(--rhythm));
  --rhythm-eighth: calc((1/8) * var(--rhythm));
  --rhythm-twelfth: calc((1/12) * var(--rhythm));
  --rhythm-sixteenth: calc((1/16) * var(--rhythm));
  --line-height: var(--sub-rhythm, var(--rhythm));
  --line-height-ratio: 1.5;
  --font-size: calc(var(--line-height) / var(--line-height-ratio));
}

html {
  --border-radius: 3px;
  --color-primary-tint1: hsl(350, 80%, 60%);
  --color-primary: hsl(350, 80%, 45%);
  --color-primary-shade1: hsl(350, 80%, 35%);
  --color-accent-tint1: hsl(170, 80%, 60%);
  --color-accent: hsl(170, 80%, 45%);
  --color-accent-shade1: hsl(170, 80%, 35%);
  --color-link: hsl(230, 60%, 50%);
  --color-link-visited: hsl(290, 60%, 50%);
  --color-link-hover: hsl(230, 80%, 60%);
  --color-link-active: hsl(350, 60%, 50%);
  --color-neutral-tint4: hsl(170, 10%, 98%);
  --color-neutral-tint3: hsl(170, 10%, 94%);
  --color-neutral-tint2: hsl(170, 10%, 85%);
  --color-neutral-tint1: hsl(170, 10%, 68%);
  --color-neutral: hsl(170, 10%, 55%);
  --color-neutral-shade1: hsl(170, 10%, 41%);
  --color-neutral-shade2: hsl(170, 10%, 30%);
  --color-neutral-shade3: hsl(170, 10%, 18%);
  --color-neutral-shade4: hsl(170, 10%, 2%);
  --color-red: hsl(350, 80%, 35%);
  --color-orange: hsl(27, 86%, 47%);
  --color-green: hsl(113, 94%, 28%);
  --color-white: white;
  --color-black: black;
  --color-background: var(--color-white);
  --color-background-light: hsl(41, 59%, 65%);
  --focus-outline: var(--rhythm-twelfth) dotted var(--color-accent);
  --focus-outline-offset: var(--rhythm-twelfth);
  --font-family: "Avenir", "Avenir Next", "Helvetica Neue", "Segoe UI", "Verdana", sans-serif;
  --font-mono: "Consolas", "Monaco", "Courier New", monospace;
  --font-heading: var(--font-family);
  --font-body: var(--font-family);
}

body {
  font-size: var(--font-size);
  line-height: var(--line-height);
}

/* Base and typography

Markup:
<div>
  <h1>Headline 1</h1>
  <p>
    Paragraph
  </p>
  <h2>Headline 2</h2>
  <ul>
    <li>Unordered item</li>
    <li>Unordered item</li>
  </ul>
  <h3>Headline 3</h3>
  <ol>
    <li>Ordered item</li>
    <li>Ordered item</li>
  </ol>
  <h4>Headline 4</h4>
<pre>
  Preformatted
</pre>
  <h5>Headline 5</h5>
  <blockquote>
    Blockquote
  </blockquote>
  <h6>Headline 6</h6>
  <table>
    <tr>
      <th>Table Header</th>
      <th>Table Header</th>
    </tr>
    <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
  </table>
</div>

*/
:focus {
  outline: var(--rhythm-twelfth) dotted hsl(170, 80%, 45%);
  outline: var(--focus-outline);
  outline-offset: var(--rhythm-twelfth);
  outline-offset: var(--focus-outline-offset);
}

html {
  overflow-x: hidden;
}

body {
  background-color: white;
  background-color: var(--color-white);
  color: black;
  color: var(--color-black);
  font-family: "Avenir", "Avenir Next", "Helvetica Neue", "Segoe UI", "Verdana", sans-serif;
  font-family: var(--font-body);
  position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Avenir", "Avenir Next", "Helvetica Neue", "Segoe UI", "Verdana", sans-serif;
  font-family: var(--font-heading);
  font-size: var(--font-size);
  line-height: var(--line-height);
  margin: var(--rhythm) 0;
}

h1 {
  --line-height-ratio: 1.1;
  --sub-rhythm: var(--rhythm-double);
  font-weight: 700;
  margin-bottom: var(--rhythm);
}

h2 {
  --line-height-ratio: 1.8;
  --sub-rhythm: var(--rhythm-double);
}

h3 {
  --line-height-ratio: 2;
  --sub-rhythm: var(--rhythm-double);
  font-weight: 700;
}

h4 {
  --line-height-ratio: 1.8;
  --sub-rhythm: var(--rhythm-double);
}

h5 {
  font-weight: 700;
}

p {
  margin-bottom: var(--rhythm);
}

form {
  margin: var(--rhythm) 0;
}

pre,
code,
samp,
kbd {
  background-color: hsl(41, 59%, 65%);
  background-color: var(--color-background-light);
  font-size: var(--font-size);
  color: hsl(350, 80%, 45%);
  color: var(--color-primary);
  font-family: "Consolas", "Monaco", "Courier New", monospace;
  font-family: var(--font-mono);
  line-height: 1;
}

code,
samp,
kbd {
  border-radius: 3px;
  border-radius: var(--border-radius);
  overflow-y: hidden;
  overflow-x: auto;
  padding: var(--rhythm-sixth);
}

pre {
  border-radius: 3px;
  border-radius: var(--border-radius);
  line-height: var(--line-height);
  overflow-y: hidden;
  overflow-x: auto;
  padding: var(--rhythm-half);
  margin: 0 0 var(--rhythm);
}

pre code,
pre samp,
pre kbd {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

a:link {
  color: hsl(230, 60%, 50%);
  color: var(--color-link);
}

a:visited {
  color: hsl(290, 60%, 50%);
  color: var(--color-link-visited);
}

a:hover,
a:focus {
  color: hsl(230, 80%, 60%);
  color: var(--color-link-hover);
}

a:active {
  color: hsl(350, 60%, 50%);
  color: var(--color-link-active);
}

hr {
  height: var(--rhythm-double);
  margin-bottom: var(--rhythm);
  position: relative;
}

hr::before {
  background-color: black;
  background-color: var(--color-black);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: 50%;
  width: 100%;
}

ol,
ul {
  margin: 0 0 var(--rhythm) var(--rhythm);
}

ol {
  list-style-type: decimal;
}

ol ol {
  margin-bottom: 0;
}

ul {
  list-style-type: disc;
}

ul ul {
  margin-bottom: 0;
}

dt {
  font-style: italic;
}

dd {
  margin-left: var(--rhythm);
}

blockquote {
  margin: 0 0 var(--rhythm) var(--rhythm-half);
  border-left: var(--rhythm-eighth) solid hsl(170, 80%, 45%);
  border-left: var(--rhythm-eighth) solid var(--color-accent);
  padding: var(--rhythm) var(--rhythm-half);
}

blockquote p:last-child {
  margin-bottom: 0;
}

figure {
  margin: 0 auto var(--rhythm);
}

small,
sub,
sup,
caption,
figcaption {
  font-size: calc(2 * var(--rhythm-third));
  vertical-align: top;
}

sub,
sup {
  position: relative;
}

sub {
  top: var(--rhythm-third);
}

sup {
  bottom: var(--rhythm-third);
}

caption,
figcaption {
  font-style: italic;
  text-align: center;
}

em,
cite,
i {
  font-style: italic;
}

strong,
var,
b {
  font-weight: bold;
}

q::before {
  content: "'";
}

q::after {
  content: "'";
}

q > q {
  font-style: italic;
}

dfn,
abbr {
  border-bottom: var(--rhythm-sixteenth) dotted hsl(170, 80%, 45%);
  border-bottom: var(--rhythm-sixteenth) dotted var(--color-accent);
  cursor: default;
}

table {
  border-radius: 3px;
  border-radius: var(--border-radius);
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: var(--rhythm);
  width: 100%;
}

table th {
  text-align: left;
}

table th,
table td {
  padding: 0 var(--rhythm-fourth);
}

input,
label,
select,
button,
textarea {
  color: hsl(170, 80%, 45%);
  color: var(--color-accent);
  display: block;
  padding: var(--rhythm-half);
  resize: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Firefox detection for keeping exact rhythm */
@-moz-document url-prefix() {
  select {
    line-height: calc(var(--rhythm) - 2px);
  }
}
label {
  color: hsl(170, 80%, 45%);
  color: var(--color-accent);
  padding: 0;
}

/* Utility classes

Markup:
<div class="{{utility_class}}">
    Example Text
</div>

.disabled                - Disable an Element
.clearfix                - Clear floats to keep the parent container in shape
.f-none                  - float: none;
.f-left                  - float: left;
.f-right                 - float: right;
.ta-left                 - text-align: left;
.ta-center               - text-align: center;
.ta-right                - text-align: right;

*/
.disabled {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}

.f-none {
  float: none;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.clearfix {
  clear: both;
  overflow: hidden;
}

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

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

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

/* Type utility classes

Markup:
<div class="type {{modifier_class}}">
    <p>Text</p>
</div>

.fw-light            - Changes the type to be 300 weight
.fw-normal           - Changes the type to be 400 weight
.fw-bold             - Changes the type to be 700 weight
.fs-small            - Small font-size
.fs-base             - Base font-size
.fs-large            - Large font-size

*/
.fw-light {
  font-weight: 300;
}

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

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

.fs-small,
.fs-base,
.fs-large {
  font-size: var(--font-size);
  line-height: var(--line-height);
}

.fs-small {
  --sub-rhythm: calc(.75 * var(--rhythm));
}

.fs-base {
  --sub-rhythm: initial;
}

.fs-large {
  --sub-rhythm: calc(1.25 * var(--rhythm));
}

/* Margin utility classes

Markup:
<h1 class="{{modifier_class}}">
    no margins
</h1>

.m-zero - Remove margins
.mt-zero - Remove top margin only
.mb-zero - Remove bottom margin only

*/
.m-zero {
  margin: 0;
}

.mt-zero {
  margin-top: 0;
}

.mb-zero {
  margin-bottom: 0;
}

/* Padding utility classes

Markup:
<h1 class="{{modifier_class}}">
    no padding
</h1>

.m-zero - Remove margins
.mt-zero - Remove top margin only
.mb-zero - Remove bottom margin only

*/
.p-zero {
  padding: 0;
}

.pt-zero {
  padding-top: 0;
}

.pb-zero {
  padding-bottom: 0;
}

.red {
  color: hsl(350, 80%, 35%);
  color: var(--color-red);
}

.green {
  color: hsl(113, 94%, 28%);
  color: var(--color-green);
}

.orange {
  color: hsl(27, 86%, 47%);
  color: var(--color-orange);
}

.grey {
  color: hsl(170, 10%, 68%);
  color: var(--color-neutral-tint1);
}

/* Wrappers

Markup:
<div class="wrapper {{modifier_class}}">
    Wrapper
</div>

.-thin - A max-width of 45rem
.-wide - A max-width of 80rem
.-flush - No vertical or horizontal spacing

Styleguide 6.0

*/
.wrapper {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
  max-width: 75rem;
  padding: var(--rhythm-double) var(--rhythm-half);
  width: 100%;
}

.wrapper.-thin {
  max-width: 45rem;
  padding: var(--rhythm) var(--rhythm-half);
}

.wrapper.-wide {
  max-width: 80rem;
  padding: var(--rhythm-triple) var(--rhythm-half);
}

.wrapper.-flush {
  padding: 0 var(--rhythm-half);
}

/* Grid

Markup:
<div class="grid {{modifier_class}}">
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
</div>

.-medium - start at 45rem
.-large - start at 80rem

*/
.grid {
  --columns: auto-fit;
  display: grid;
  -webkit-column-gap: var(--rhythm);
     -moz-column-gap: var(--rhythm);
          column-gap: var(--rhythm);
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}

@media (max-width: 69rem) {
  .grid {
    --columns: 2;
  }

  .grid.-medium {
    display: block;
  }
}
@media (max-width: 51rem) {
  .grid {
    --columns: 1;
  }

  .grid.-large {
    display: block;
  }
}
/* Usage:
  <div class="flex-grid">
  <div class="col-3">
    ... stuff
    </div>
    <div class="col-9">
    ... more stuff
    </div>
  </div>
*/
.flex-grid {
  text-align: left;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.flex-grid.align-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex-grid.align-right {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.flex-grid.align-left {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

[class*=col-] {
  text-align: left;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}
[class*=col-].gutter {
  padding-left: var(--rhythm);
  padding-right: var(--rhythm);
  padding-bottom: var(--rhythm);
}

.col-1 {
  width: 4.1666666667%;
}

.push-1 {
  margin-left: 4.1666666667%;
}

.pull-1 {
  margin-right: 4.1666666667%;
}

.col-2 {
  width: 8.3333333333%;
}

.push-2 {
  margin-left: 8.3333333333%;
}

.pull-2 {
  margin-right: 8.3333333333%;
}

.col-3 {
  width: 12.5%;
}

.push-3 {
  margin-left: 12.5%;
}

.pull-3 {
  margin-right: 12.5%;
}

.col-4 {
  width: 16.6666666667%;
}

.push-4 {
  margin-left: 16.6666666667%;
}

.pull-4 {
  margin-right: 16.6666666667%;
}

.col-5 {
  width: 20.8333333333%;
}

.push-5 {
  margin-left: 20.8333333333%;
}

.pull-5 {
  margin-right: 20.8333333333%;
}

.col-6 {
  width: 25%;
}

.push-6 {
  margin-left: 25%;
}

.pull-6 {
  margin-right: 25%;
}

.col-7 {
  width: 29.1666666667%;
}

.push-7 {
  margin-left: 29.1666666667%;
}

.pull-7 {
  margin-right: 29.1666666667%;
}

.col-8 {
  width: 33.3333333333%;
}

.push-8 {
  margin-left: 33.3333333333%;
}

.pull-8 {
  margin-right: 33.3333333333%;
}

.col-9 {
  width: 37.5%;
}

.push-9 {
  margin-left: 37.5%;
}

.pull-9 {
  margin-right: 37.5%;
}

.col-10 {
  width: 41.6666666667%;
}

.push-10 {
  margin-left: 41.6666666667%;
}

.pull-10 {
  margin-right: 41.6666666667%;
}

.col-11 {
  width: 45.8333333333%;
}

.push-11 {
  margin-left: 45.8333333333%;
}

.pull-11 {
  margin-right: 45.8333333333%;
}

.col-12 {
  width: 50%;
}

.push-12 {
  margin-left: 50%;
}

.pull-12 {
  margin-right: 50%;
}

.col-13 {
  width: 54.1666666667%;
}

.push-13 {
  margin-left: 54.1666666667%;
}

.pull-13 {
  margin-right: 54.1666666667%;
}

.col-14 {
  width: 58.3333333333%;
}

.push-14 {
  margin-left: 58.3333333333%;
}

.pull-14 {
  margin-right: 58.3333333333%;
}

.col-15 {
  width: 62.5%;
}

.push-15 {
  margin-left: 62.5%;
}

.pull-15 {
  margin-right: 62.5%;
}

.col-16 {
  width: 66.6666666667%;
}

.push-16 {
  margin-left: 66.6666666667%;
}

.pull-16 {
  margin-right: 66.6666666667%;
}

.col-17 {
  width: 70.8333333333%;
}

.push-17 {
  margin-left: 70.8333333333%;
}

.pull-17 {
  margin-right: 70.8333333333%;
}

.col-18 {
  width: 75%;
}

.push-18 {
  margin-left: 75%;
}

.pull-18 {
  margin-right: 75%;
}

.col-19 {
  width: 79.1666666667%;
}

.push-19 {
  margin-left: 79.1666666667%;
}

.pull-19 {
  margin-right: 79.1666666667%;
}

.col-20 {
  width: 83.3333333333%;
}

.push-20 {
  margin-left: 83.3333333333%;
}

.pull-20 {
  margin-right: 83.3333333333%;
}

.col-21 {
  width: 87.5%;
}

.push-21 {
  margin-left: 87.5%;
}

.pull-21 {
  margin-right: 87.5%;
}

.col-22 {
  width: 91.6666666667%;
}

.push-22 {
  margin-left: 91.6666666667%;
}

.pull-22 {
  margin-right: 91.6666666667%;
}

.col-23 {
  width: 95.8333333333%;
}

.push-23 {
  margin-left: 95.8333333333%;
}

.pull-23 {
  margin-right: 95.8333333333%;
}

.col-24 {
  width: 100%;
}

.push-24 {
  margin-left: 100%;
}

.pull-24 {
  margin-right: 100%;
}

@media (max-width: 2000px) {
  .wide-col-1 {
    width: 4.1666666667%;
  }

  .wide-col-2 {
    width: 8.3333333333%;
  }

  .wide-col-3 {
    width: 12.5%;
  }

  .wide-col-4 {
    width: 16.6666666667%;
  }

  .wide-col-5 {
    width: 20.8333333333%;
  }

  .wide-col-6 {
    width: 25%;
  }

  .wide-col-7 {
    width: 29.1666666667%;
  }

  .wide-col-8 {
    width: 33.3333333333%;
  }

  .wide-col-9 {
    width: 37.5%;
  }

  .wide-col-10 {
    width: 41.6666666667%;
  }

  .wide-col-11 {
    width: 45.8333333333%;
  }

  .wide-col-12 {
    width: 50%;
  }

  .wide-col-13 {
    width: 54.1666666667%;
  }

  .wide-col-14 {
    width: 58.3333333333%;
  }

  .wide-col-15 {
    width: 62.5%;
  }

  .wide-col-16 {
    width: 66.6666666667%;
  }

  .wide-col-17 {
    width: 70.8333333333%;
  }

  .wide-col-18 {
    width: 75%;
  }

  .wide-col-19 {
    width: 79.1666666667%;
  }

  .wide-col-20 {
    width: 83.3333333333%;
  }

  .wide-col-21 {
    width: 87.5%;
  }

  .wide-col-22 {
    width: 91.6666666667%;
  }

  .wide-col-23 {
    width: 95.8333333333%;
  }

  .wide-col-24 {
    width: 100%;
  }

  .wide-push-0 {
    margin-left: 0%;
  }

  .wide-pull-0 {
    margin-right: 0%;
  }

  .wide-push-1 {
    margin-left: 4.1666666667%;
  }

  .wide-pull-1 {
    margin-right: 4.1666666667%;
  }

  .wide-push-2 {
    margin-left: 8.3333333333%;
  }

  .wide-pull-2 {
    margin-right: 8.3333333333%;
  }

  .wide-push-3 {
    margin-left: 12.5%;
  }

  .wide-pull-3 {
    margin-right: 12.5%;
  }

  .wide-push-4 {
    margin-left: 16.6666666667%;
  }

  .wide-pull-4 {
    margin-right: 16.6666666667%;
  }

  .wide-push-5 {
    margin-left: 20.8333333333%;
  }

  .wide-pull-5 {
    margin-right: 20.8333333333%;
  }

  .wide-push-6 {
    margin-left: 25%;
  }

  .wide-pull-6 {
    margin-right: 25%;
  }

  .wide-push-7 {
    margin-left: 29.1666666667%;
  }

  .wide-pull-7 {
    margin-right: 29.1666666667%;
  }

  .wide-push-8 {
    margin-left: 33.3333333333%;
  }

  .wide-pull-8 {
    margin-right: 33.3333333333%;
  }

  .wide-push-9 {
    margin-left: 37.5%;
  }

  .wide-pull-9 {
    margin-right: 37.5%;
  }

  .wide-push-10 {
    margin-left: 41.6666666667%;
  }

  .wide-pull-10 {
    margin-right: 41.6666666667%;
  }

  .wide-push-11 {
    margin-left: 45.8333333333%;
  }

  .wide-pull-11 {
    margin-right: 45.8333333333%;
  }

  .wide-push-12 {
    margin-left: 50%;
  }

  .wide-pull-12 {
    margin-right: 50%;
  }

  .wide-push-13 {
    margin-left: 54.1666666667%;
  }

  .wide-pull-13 {
    margin-right: 54.1666666667%;
  }

  .wide-push-14 {
    margin-left: 58.3333333333%;
  }

  .wide-pull-14 {
    margin-right: 58.3333333333%;
  }

  .wide-push-15 {
    margin-left: 62.5%;
  }

  .wide-pull-15 {
    margin-right: 62.5%;
  }

  .wide-push-16 {
    margin-left: 66.6666666667%;
  }

  .wide-pull-16 {
    margin-right: 66.6666666667%;
  }

  .wide-push-17 {
    margin-left: 70.8333333333%;
  }

  .wide-pull-17 {
    margin-right: 70.8333333333%;
  }

  .wide-push-18 {
    margin-left: 75%;
  }

  .wide-pull-18 {
    margin-right: 75%;
  }

  .wide-push-19 {
    margin-left: 79.1666666667%;
  }

  .wide-pull-19 {
    margin-right: 79.1666666667%;
  }

  .wide-push-20 {
    margin-left: 83.3333333333%;
  }

  .wide-pull-20 {
    margin-right: 83.3333333333%;
  }

  .wide-push-21 {
    margin-left: 87.5%;
  }

  .wide-pull-21 {
    margin-right: 87.5%;
  }

  .wide-push-22 {
    margin-left: 91.6666666667%;
  }

  .wide-pull-22 {
    margin-right: 91.6666666667%;
  }

  .wide-push-23 {
    margin-left: 95.8333333333%;
  }

  .wide-pull-23 {
    margin-right: 95.8333333333%;
  }

  .wide-push-24 {
    margin-left: 100%;
  }

  .wide-pull-24 {
    margin-right: 100%;
  }
}
@media (max-width: 1150px) {
  .medium-col-1 {
    width: 4.1666666667%;
  }

  .medium-col-2 {
    width: 8.3333333333%;
  }

  .medium-col-3 {
    width: 12.5%;
  }

  .medium-col-4 {
    width: 16.6666666667%;
  }

  .medium-col-5 {
    width: 20.8333333333%;
  }

  .medium-col-6 {
    width: 25%;
  }

  .medium-col-7 {
    width: 29.1666666667%;
  }

  .medium-col-8 {
    width: 33.3333333333%;
  }

  .medium-col-9 {
    width: 37.5%;
  }

  .medium-col-10 {
    width: 41.6666666667%;
  }

  .medium-col-11 {
    width: 45.8333333333%;
  }

  .medium-col-12 {
    width: 50%;
  }

  .medium-col-13 {
    width: 54.1666666667%;
  }

  .medium-col-14 {
    width: 58.3333333333%;
  }

  .medium-col-15 {
    width: 62.5%;
  }

  .medium-col-16 {
    width: 66.6666666667%;
  }

  .medium-col-17 {
    width: 70.8333333333%;
  }

  .medium-col-18 {
    width: 75%;
  }

  .medium-col-19 {
    width: 79.1666666667%;
  }

  .medium-col-20 {
    width: 83.3333333333%;
  }

  .medium-col-21 {
    width: 87.5%;
  }

  .medium-col-22 {
    width: 91.6666666667%;
  }

  .medium-col-23 {
    width: 95.8333333333%;
  }

  .medium-col-24 {
    width: 100%;
  }

  .medium-push-0 {
    margin-left: 0%;
  }

  .medium-pull-0 {
    margin-right: 0%;
  }

  .medium-push-1 {
    margin-left: 4.1666666667%;
  }

  .medium-pull-1 {
    margin-right: 4.1666666667%;
  }

  .medium-push-2 {
    margin-left: 8.3333333333%;
  }

  .medium-pull-2 {
    margin-right: 8.3333333333%;
  }

  .medium-push-3 {
    margin-left: 12.5%;
  }

  .medium-pull-3 {
    margin-right: 12.5%;
  }

  .medium-push-4 {
    margin-left: 16.6666666667%;
  }

  .medium-pull-4 {
    margin-right: 16.6666666667%;
  }

  .medium-push-5 {
    margin-left: 20.8333333333%;
  }

  .medium-pull-5 {
    margin-right: 20.8333333333%;
  }

  .medium-push-6 {
    margin-left: 25%;
  }

  .medium-pull-6 {
    margin-right: 25%;
  }

  .medium-push-7 {
    margin-left: 29.1666666667%;
  }

  .medium-pull-7 {
    margin-right: 29.1666666667%;
  }

  .medium-push-8 {
    margin-left: 33.3333333333%;
  }

  .medium-pull-8 {
    margin-right: 33.3333333333%;
  }

  .medium-push-9 {
    margin-left: 37.5%;
  }

  .medium-pull-9 {
    margin-right: 37.5%;
  }

  .medium-push-10 {
    margin-left: 41.6666666667%;
  }

  .medium-pull-10 {
    margin-right: 41.6666666667%;
  }

  .medium-push-11 {
    margin-left: 45.8333333333%;
  }

  .medium-pull-11 {
    margin-right: 45.8333333333%;
  }

  .medium-push-12 {
    margin-left: 50%;
  }

  .medium-pull-12 {
    margin-right: 50%;
  }

  .medium-push-13 {
    margin-left: 54.1666666667%;
  }

  .medium-pull-13 {
    margin-right: 54.1666666667%;
  }

  .medium-push-14 {
    margin-left: 58.3333333333%;
  }

  .medium-pull-14 {
    margin-right: 58.3333333333%;
  }

  .medium-push-15 {
    margin-left: 62.5%;
  }

  .medium-pull-15 {
    margin-right: 62.5%;
  }

  .medium-push-16 {
    margin-left: 66.6666666667%;
  }

  .medium-pull-16 {
    margin-right: 66.6666666667%;
  }

  .medium-push-17 {
    margin-left: 70.8333333333%;
  }

  .medium-pull-17 {
    margin-right: 70.8333333333%;
  }

  .medium-push-18 {
    margin-left: 75%;
  }

  .medium-pull-18 {
    margin-right: 75%;
  }

  .medium-push-19 {
    margin-left: 79.1666666667%;
  }

  .medium-pull-19 {
    margin-right: 79.1666666667%;
  }

  .medium-push-20 {
    margin-left: 83.3333333333%;
  }

  .medium-pull-20 {
    margin-right: 83.3333333333%;
  }

  .medium-push-21 {
    margin-left: 87.5%;
  }

  .medium-pull-21 {
    margin-right: 87.5%;
  }

  .medium-push-22 {
    margin-left: 91.6666666667%;
  }

  .medium-pull-22 {
    margin-right: 91.6666666667%;
  }

  .medium-push-23 {
    margin-left: 95.8333333333%;
  }

  .medium-pull-23 {
    margin-right: 95.8333333333%;
  }

  .medium-push-24 {
    margin-left: 100%;
  }

  .medium-pull-24 {
    margin-right: 100%;
  }
}
@media (max-width: 918px) {
  .small-col-1 {
    width: 4.1666666667%;
  }

  .small-col-2 {
    width: 8.3333333333%;
  }

  .small-col-3 {
    width: 12.5%;
  }

  .small-col-4 {
    width: 16.6666666667%;
  }

  .small-col-5 {
    width: 20.8333333333%;
  }

  .small-col-6 {
    width: 25%;
  }

  .small-col-7 {
    width: 29.1666666667%;
  }

  .small-col-8 {
    width: 33.3333333333%;
  }

  .small-col-9 {
    width: 37.5%;
  }

  .small-col-10 {
    width: 41.6666666667%;
  }

  .small-col-11 {
    width: 45.8333333333%;
  }

  .small-col-12 {
    width: 50%;
  }

  .small-col-13 {
    width: 54.1666666667%;
  }

  .small-col-14 {
    width: 58.3333333333%;
  }

  .small-col-15 {
    width: 62.5%;
  }

  .small-col-16 {
    width: 66.6666666667%;
  }

  .small-col-17 {
    width: 70.8333333333%;
  }

  .small-col-18 {
    width: 75%;
  }

  .small-col-19 {
    width: 79.1666666667%;
  }

  .small-col-20 {
    width: 83.3333333333%;
  }

  .small-col-21 {
    width: 87.5%;
  }

  .small-col-22 {
    width: 91.6666666667%;
  }

  .small-col-23 {
    width: 95.8333333333%;
  }

  .small-col-24 {
    width: 100%;
  }

  .small-push-0 {
    margin-left: 0%;
  }

  .small-pull-0 {
    margin-right: 0%;
  }

  .small-push-1 {
    margin-left: 4.1666666667%;
  }

  .small-pull-1 {
    margin-right: 4.1666666667%;
  }

  .small-push-2 {
    margin-left: 8.3333333333%;
  }

  .small-pull-2 {
    margin-right: 8.3333333333%;
  }

  .small-push-3 {
    margin-left: 12.5%;
  }

  .small-pull-3 {
    margin-right: 12.5%;
  }

  .small-push-4 {
    margin-left: 16.6666666667%;
  }

  .small-pull-4 {
    margin-right: 16.6666666667%;
  }

  .small-push-5 {
    margin-left: 20.8333333333%;
  }

  .small-pull-5 {
    margin-right: 20.8333333333%;
  }

  .small-push-6 {
    margin-left: 25%;
  }

  .small-pull-6 {
    margin-right: 25%;
  }

  .small-push-7 {
    margin-left: 29.1666666667%;
  }

  .small-pull-7 {
    margin-right: 29.1666666667%;
  }

  .small-push-8 {
    margin-left: 33.3333333333%;
  }

  .small-pull-8 {
    margin-right: 33.3333333333%;
  }

  .small-push-9 {
    margin-left: 37.5%;
  }

  .small-pull-9 {
    margin-right: 37.5%;
  }

  .small-push-10 {
    margin-left: 41.6666666667%;
  }

  .small-pull-10 {
    margin-right: 41.6666666667%;
  }

  .small-push-11 {
    margin-left: 45.8333333333%;
  }

  .small-pull-11 {
    margin-right: 45.8333333333%;
  }

  .small-push-12 {
    margin-left: 50%;
  }

  .small-pull-12 {
    margin-right: 50%;
  }

  .small-push-13 {
    margin-left: 54.1666666667%;
  }

  .small-pull-13 {
    margin-right: 54.1666666667%;
  }

  .small-push-14 {
    margin-left: 58.3333333333%;
  }

  .small-pull-14 {
    margin-right: 58.3333333333%;
  }

  .small-push-15 {
    margin-left: 62.5%;
  }

  .small-pull-15 {
    margin-right: 62.5%;
  }

  .small-push-16 {
    margin-left: 66.6666666667%;
  }

  .small-pull-16 {
    margin-right: 66.6666666667%;
  }

  .small-push-17 {
    margin-left: 70.8333333333%;
  }

  .small-pull-17 {
    margin-right: 70.8333333333%;
  }

  .small-push-18 {
    margin-left: 75%;
  }

  .small-pull-18 {
    margin-right: 75%;
  }

  .small-push-19 {
    margin-left: 79.1666666667%;
  }

  .small-pull-19 {
    margin-right: 79.1666666667%;
  }

  .small-push-20 {
    margin-left: 83.3333333333%;
  }

  .small-pull-20 {
    margin-right: 83.3333333333%;
  }

  .small-push-21 {
    margin-left: 87.5%;
  }

  .small-pull-21 {
    margin-right: 87.5%;
  }

  .small-push-22 {
    margin-left: 91.6666666667%;
  }

  .small-pull-22 {
    margin-right: 91.6666666667%;
  }

  .small-push-23 {
    margin-left: 95.8333333333%;
  }

  .small-pull-23 {
    margin-right: 95.8333333333%;
  }

  .small-push-24 {
    margin-left: 100%;
  }

  .small-pull-24 {
    margin-right: 100%;
  }
}
@media (max-width: 480px) {
  .mob-col-1 {
    width: 4.1666666667%;
  }

  .mob-col-2 {
    width: 8.3333333333%;
  }

  .mob-col-3 {
    width: 12.5%;
  }

  .mob-col-4 {
    width: 16.6666666667%;
  }

  .mob-col-5 {
    width: 20.8333333333%;
  }

  .mob-col-6 {
    width: 25%;
  }

  .mob-col-7 {
    width: 29.1666666667%;
  }

  .mob-col-8 {
    width: 33.3333333333%;
  }

  .mob-col-9 {
    width: 37.5%;
  }

  .mob-col-10 {
    width: 41.6666666667%;
  }

  .mob-col-11 {
    width: 45.8333333333%;
  }

  .mob-col-12 {
    width: 50%;
  }

  .mob-col-13 {
    width: 54.1666666667%;
  }

  .mob-col-14 {
    width: 58.3333333333%;
  }

  .mob-col-15 {
    width: 62.5%;
  }

  .mob-col-16 {
    width: 66.6666666667%;
  }

  .mob-col-17 {
    width: 70.8333333333%;
  }

  .mob-col-18 {
    width: 75%;
  }

  .mob-col-19 {
    width: 79.1666666667%;
  }

  .mob-col-20 {
    width: 83.3333333333%;
  }

  .mob-col-21 {
    width: 87.5%;
  }

  .mob-col-22 {
    width: 91.6666666667%;
  }

  .mob-col-23 {
    width: 95.8333333333%;
  }

  .mob-col-24 {
    width: 100%;
  }

  .mob-push-0 {
    margin-left: 0%;
  }

  .mob-pull-0 {
    margin-right: 0%;
  }

  .mob-push-1 {
    margin-left: 4.1666666667%;
  }

  .mob-pull-1 {
    margin-right: 4.1666666667%;
  }

  .mob-push-2 {
    margin-left: 8.3333333333%;
  }

  .mob-pull-2 {
    margin-right: 8.3333333333%;
  }

  .mob-push-3 {
    margin-left: 12.5%;
  }

  .mob-pull-3 {
    margin-right: 12.5%;
  }

  .mob-push-4 {
    margin-left: 16.6666666667%;
  }

  .mob-pull-4 {
    margin-right: 16.6666666667%;
  }

  .mob-push-5 {
    margin-left: 20.8333333333%;
  }

  .mob-pull-5 {
    margin-right: 20.8333333333%;
  }

  .mob-push-6 {
    margin-left: 25%;
  }

  .mob-pull-6 {
    margin-right: 25%;
  }

  .mob-push-7 {
    margin-left: 29.1666666667%;
  }

  .mob-pull-7 {
    margin-right: 29.1666666667%;
  }

  .mob-push-8 {
    margin-left: 33.3333333333%;
  }

  .mob-pull-8 {
    margin-right: 33.3333333333%;
  }

  .mob-push-9 {
    margin-left: 37.5%;
  }

  .mob-pull-9 {
    margin-right: 37.5%;
  }

  .mob-push-10 {
    margin-left: 41.6666666667%;
  }

  .mob-pull-10 {
    margin-right: 41.6666666667%;
  }

  .mob-push-11 {
    margin-left: 45.8333333333%;
  }

  .mob-pull-11 {
    margin-right: 45.8333333333%;
  }

  .mob-push-12 {
    margin-left: 50%;
  }

  .mob-pull-12 {
    margin-right: 50%;
  }

  .mob-push-13 {
    margin-left: 54.1666666667%;
  }

  .mob-pull-13 {
    margin-right: 54.1666666667%;
  }

  .mob-push-14 {
    margin-left: 58.3333333333%;
  }

  .mob-pull-14 {
    margin-right: 58.3333333333%;
  }

  .mob-push-15 {
    margin-left: 62.5%;
  }

  .mob-pull-15 {
    margin-right: 62.5%;
  }

  .mob-push-16 {
    margin-left: 66.6666666667%;
  }

  .mob-pull-16 {
    margin-right: 66.6666666667%;
  }

  .mob-push-17 {
    margin-left: 70.8333333333%;
  }

  .mob-pull-17 {
    margin-right: 70.8333333333%;
  }

  .mob-push-18 {
    margin-left: 75%;
  }

  .mob-pull-18 {
    margin-right: 75%;
  }

  .mob-push-19 {
    margin-left: 79.1666666667%;
  }

  .mob-pull-19 {
    margin-right: 79.1666666667%;
  }

  .mob-push-20 {
    margin-left: 83.3333333333%;
  }

  .mob-pull-20 {
    margin-right: 83.3333333333%;
  }

  .mob-push-21 {
    margin-left: 87.5%;
  }

  .mob-pull-21 {
    margin-right: 87.5%;
  }

  .mob-push-22 {
    margin-left: 91.6666666667%;
  }

  .mob-pull-22 {
    margin-right: 91.6666666667%;
  }

  .mob-push-23 {
    margin-left: 95.8333333333%;
  }

  .mob-pull-23 {
    margin-right: 95.8333333333%;
  }

  .mob-push-24 {
    margin-left: 100%;
  }

  .mob-pull-24 {
    margin-right: 100%;
  }
}
/* Buttons

Markup:
<button class="button {{modifier_class}}">Button</button>

.-secondary - A button with secondary colors
.-outlined - An outlined button
.-link - A button that looks like a link
.-block - Block level button
.-large - A large button
.-small - A small button
.-small.-outlined - A small, outlined button

*/
.button {
  --border-color: transparent;
  --border-color-hover: transparent;
  --border-thickness: var(--rhythm-twelfth);
  --background-color: var(--color-primary);
  --background-color-hover: var(--color-primary-shade1);
  --text-color: var(--color-black);
  --text-color-hover: var(--color-white);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  background-color: var(--background-color);
  border: var(--border-thickness) solid var(--border-color);
  border-radius: 3px;
  border-radius: var(--border-radius);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: var(--text-color);
  cursor: pointer;
  display: inline-block;
  font-size: var(--font-size);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: var(--rhythm);
  max-width: 100%;
  min-height: calc(2 * var(--rhythm));
  padding: calc(5 * var(--rhythm-twelfth)) var(--rhythm);
  text-align: center;
  -webkit-transition-duration: 250ms;
       -o-transition-duration: 250ms;
          transition-duration: 250ms;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: auto;
  vertical-align: middle;
}

.button::-moz-focus-inner {
  border: 0;
}

.button:link,
.button:visited {
  color: var(--text-color);
  text-decoration: none;
}

.button:focus,
.button:hover {
  background-color: var(--background-color-hover);
  border-color: var(--border-color-hover);
  color: var(--text-color-hover);
}

.button:active {
  background-color: var(--background-color);
  color: var(--text-color);
}

.button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.button.-outlined {
  --background-color: transparent;
  --background-color-hover: var(--color-primary-shade1);
  --border-color: var(--color-primary);
  --border-color-hover: var(--color-primary-shade1);
  --text-color: var(--color-primary);
}

.button.-secondary {
  --background-color: var(--color-neutral-tint2);
  --background-color-hover: var(--color-neutral-tint1);
  --border-color: var(--color-neutral-tint2);
  --border-color-hover: var(--color-neutral-tint1);
  --text-color: var(--color-neutral-shade3);
  --text-color-hover: var(--color-neutral-shade3);
}

.button.-link {
  --background-color: transparent;
  --background-color-hover: transparent;
  --border-color: transparent;
  --border-color-hover: transparent;
  --text-color: var(--color-link);
  --text-color-hover: var(--color-link-hover);
  text-decoration: underline;
}

.button.-block {
  display: block;
  width: 100%;
}

.button.-small {
  --sub-rhythm: calc(14 * var(--rhythm-sixteenth));
  --border-thickness: var(--rhythm-sixteenth);
  font-size: var(--font-size);
  line-height: var(--line-height);
  margin-top: calc(-2 * var(--rhythm-sixteenth));
  min-height: var(--sub-rhythm);
  padding: 0 var(--rhythm-half);
}

.button.-large {
  --sub-rhythm: calc(1.5 * var(--rhythm));
  --border-thickness: var(--rhythm-eighth);
  font-size: var(--font-size);
  line-height: var(--line-height);
  min-height: calc(3 * var(--rhythm));
  padding: calc(3 * var(--rhythm-eighth)) calc(2 * var(--rhythm));
}

/* Forms

Markup:
<form>
    <label class="field">
        <input type="text" />
        <span class="label">Name</span>
    </label>
    <label class="field -inline">
        <input type="radio" name="example" />
        <span class="label">Cone</span>
    </label>
    <label class="field -inline">
        <input type="radio" name="example" />
        <span class="label">Bowl</span>
    </label>
    <label for="select" class="field">
        <select name="select">
            <option disabled="disabled" selected="selected">Flavors</option>
            <option>Chocolate</option>
            <option>Vanilla</option>
        </select>
        <span class="label">Favorite Ice Cream</span>
    </label>
    <label class="field">
        <textarea></textarea>
        <span class="label">Comments</span>
    </label>
    <label class="field">
        <input type="checkbox" />
        <span class="label">
            I consent to my ice cream flavors being saved into a database for
            eternity and understand and acknowledge this will have consequences
            for all of my decendants for decades to come.
        </span>
    </label>
</form>

*/
.field [disabled] + *,
[disabled] {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}

.field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: var(--rhythm);
  position: relative;
  text-align: left;
}

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

.field [type=checkbox] + .label,
.field [type=radio] + .label {
  color: hsl(170, 10%, 2%);
  color: var(--color-neutral-shade4);
  cursor: pointer;
  display: inline-block;
  padding-left: var(--rhythm);
}

.field *:not([type=radio]):not([type=checkbox]) + .label {
  font-size: var(--rhythm-half);
  position: absolute;
  left: var(--rhythm-sixteenth);
  line-height: 1;
  padding: var(--rhythm-fourth) var(--rhythm-fourth) 0;
  right: var(--rhythm-sixteenth);
  top: 0;
}

.field input,
.field textarea,
.field select {
  background-color: hsl(170, 10%, 98%);
  background-color: var(--color-neutral-tint4);
  border: 1px solid hsl(170, 10%, 41%);
  border: 1px solid var(--color-neutral-shade1);
  border-radius: 3px;
  border-radius: var(--border-radius);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: -2px;
  padding: calc(7 * var(--rhythm-eighth)) var(--rhythm-fourth) var(--rhythm-eighth);
  position: relative;
  width: 100%;
}

.field select {
  z-index: 1;
}

/* Select

Markup:
<label class="field {{modifier_class}}">
    <select>
        <option disabled="disabled" selected="selected">Select</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <span class="label">Select Label</span>
</label>

*/
.field select + .label::after {
  content: "";
  border-left: var(--rhythm-fourth) solid transparent;
  border-right: var(--rhythm-fourth) solid transparent;
  border-top: var(--rhythm-fourth) solid hsl(170, 10%, 41%);
  border-top: var(--rhythm-fourth) solid var(--color-neutral-shade1);
  bottom: calc(-2 * var(--rhythm-third));
  height: 0;
  pointer-events: none;
  position: absolute;
  right: var(--rhythm-half);
  width: 0;
}

.field option[disabled] {
  background-color: hsl(170, 10%, 94%);
  background-color: var(--color-neutral-tint3);
  color: hsl(170, 10%, 30%);
  color: var(--color-neutral-shade2);
}

.field.-inline {
  display: inline-block;
  margin-right: var(--rhythm-half);
}

.field [type=checkbox],
.field [type=radio] {
  opacity: 0;
  position: absolute;
  z-index: 0;
}

.field [type=checkbox] + .label::before,
.field [type=radio] + .label::before {
  background-color: hsl(170, 10%, 98%);
  background-color: var(--color-neutral-tint4);
  border: 2px solid hsl(170, 10%, 41%);
  border: 2px solid var(--color-neutral-shade1);
  content: "";
  height: var(--rhythm-half);
  left: 0;
  position: absolute;
  top: var(--rhythm-eighth);
  -webkit-transform: translateY(var(--rhythm-sixteenth));
      -ms-transform: translateY(var(--rhythm-sixteenth));
          transform: translateY(var(--rhythm-sixteenth));
  width: var(--rhythm-half);
}

.field [type=checkbox] + .label::after,
.field [type=radio] + .label::after {
  background-color: hsl(350, 80%, 45%);
  background-color: var(--color-primary);
  border: 2px solid transparent;
  color: hsl(170, 10%, 98%);
  color: var(--color-neutral-tint4);
  height: var(--rhythm-fourth);
  left: var(--rhythm-eighth);
  position: absolute;
  top: var(--rhythm-fourth);
  -webkit-transform: translateY(var(--rhythm-sixteenth));
      -ms-transform: translateY(var(--rhythm-sixteenth));
          transform: translateY(var(--rhythm-sixteenth));
  width: var(--rhythm-fourth);
}

/* Checkbox

Markup:
<label class="field {{modifier_class}}">
    <input type="checkbox" />
    <span class="label">Checkbox</span>
</label>

*/
.field [type=checkbox] + .label::before,
.field [type=checkbox] + .label::after {
  border-radius: 3px;
  border-radius: var(--border-radius);
}

/* Radio

Markup:
<label class="field {{modifier_class}}">
    <input type="radio" />
    <span class="label">Radio</span>
</label>

*/
.field [type=radio] + .label::before,
.field [type=radio] + .label::after {
  border-radius: var(--rhythm);
}

.field [type=radio]:focus + .label::before,
.field [type=checkbox]:focus + .label::before {
  outline: var(--rhythm-twelfth) dotted hsl(170, 80%, 45%);
  outline: var(--focus-outline);
  outline-offset: var(--rhythm-twelfth);
  outline-offset: var(--focus-outline-offset);
}

.field [type=checkbox]:checked + .label::after,
.field [type=radio]:checked + .label::after {
  content: "";
}

/* Input and text areas

Markup:
<label class="field {{modifier_class}}">
    <input type="text" />
    <span class="label">Input</span>
</label>
<label class="field {{modifier_class}}">
    <textarea></textarea>
    <span class="label">Textarea</span>
</label>

*/
.field textarea {
  margin-top: 0;
  min-height: calc(4 * var(--rhythm));
}

.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: var(--rhythm);
}

.footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: var(--rhythm);
}

.nav:not(:last-child) {
  margin-right: calc(3 * var(--rhythm));
}
.nav ul {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.nav li {
  list-style: none;
}
.nav li:not(:last-child) {
  margin-right: var(--rhythm);
}

.hero {
  position: relative;
}

.page {
  display: block;
}