/* To learn how to use BELMU refer to the guide at https://belmu.netlify.com/  */

/* BASE 
   –––– */

/*
 * Fix
 * Version 0.1.1
 * https://github.com/jaydenseric/Fix
*/

*{
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: 1;
  font-family: sans-serif;
}

iframe {
  border: 0;
}

main {
  display: block;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

li {
  display: block;
}

dl {
  margin-top: 0;
  margin-bottom: 0;
}

dd {
  margin-left: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 1.6em;
  margin-bottom: 0.1em;
  font-size: inherit;
}

blockquote {
  margin: 0;
  padding: 0;
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

sup {
  position: relative;
  top: -.5em;
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
}

strong {
  font-weight: bold;
}

figure {
  margin: 0;
}

img {
  border: 0;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

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

button {
  border: 0;
  margin: 0;
  padding: 0;
  text-align: inherit;
  text-transform: inherit;
  font: inherit;
  -webkit-font-smoothing: inherit;
  letter-spacing: inherit;
  background: none;
  cursor: pointer;
  overflow: visible;
}

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

/* -- Colours (HSL Colours are good)
   ––––––––––––––––––––––––––––––––– */

:root{
  --core-white:           0, 100%;
  --core-black:           0, 0%;
  --core-grey:            220, 30%;
  --white:                hsl( var(--core-white),     100% );
  --black:                hsl( var(--core-black),     0%   );

  --grey:			            hsl( var(--core-grey),      60%);
  --grey-900:	            hsl( var(--core-grey),      30%  );
  --grey-800:	            hsl( var(--core-grey),      40%  );
  --grey-700:			        hsl( var(--core-grey),      50%  );
  --grey-600:			        hsl( var(--core-grey),      60%  );
  --grey-500:			        hsl( var(--core-grey),      70%  );
  --grey-400:			        hsl( var(--core-grey),      80%  );
  --grey-300:			        hsl( var(--core-grey),      94%  );
  --grey-200:			        hsl( var(--core-grey),      96%  );
  --grey-100:			        hsl( var(--core-grey),      98%  );

  --black:			          hsl( var(--core-black),     0%   );
  --black-900:	          hsl( var(--core-black),     10%  );
  --black-800:	          hsl( var(--core-black),     20%  );
  --black-700:			      hsl( var(--core-black),     30%  );
  --black-600:			      hsl( var(--core-black),     40%  );
  --black-500:			      hsl( var(--core-black),     50%  );
  --black-400:			      hsl( var(--core-black),     60%  );
  --black-300:			      hsl( var(--core-black),     70%  );
  --black-200:			      hsl( var(--core-black),     80%  );
  --black-100:			      hsl( var(--core-black),     90%  );

  --black-900a:           hsla( var(--core-black), 0%, 0.9 );
  --black-800a:           hsla( var(--core-black), 0%, 0.8 );
  --black-700a:           hsla( var(--core-black), 0%, 0.7 );
  --black-600a:           hsla( var(--core-black), 0%, 0.6 );
  --black-500a:           hsla( var(--core-black), 0%, 0.5 );
  --black-400a:           hsla( var(--core-black), 0%, 0.4 );
  --black-300a:           hsla( var(--core-black), 0%, 0.3 );
  --black-200a:           hsla( var(--core-black), 0%, 0.2 );
  --black-100a:           hsla( var(--core-black), 0%, 0.1 );
  
  --white-900a:           hsla( var(--core-white), 100%, 0.9 );
  --white-800a:           hsla( var(--core-white), 100%, 0.8 );
  --white-700a:           hsla( var(--core-white), 100%, 0.7 );
  --white-600a:           hsla( var(--core-white), 100%, 0.6 );
  --white-500a:           hsla( var(--core-white), 100%, 0.5 );
  --white-400a:           hsla( var(--core-white), 100%, 0.4 );
  --white-300a:           hsla( var(--core-white), 100%, 0.3 );
  --white-200a:           hsla( var(--core-white), 100%, 0.2 );
  --white-100a:           hsla( var(--core-white), 100%, 0.1 );

  --borders-dark:   hsla(var(--black), 0.1);
  --borders-light:  hsla(var(--white), 0.1);

  /* FILTERS (Experimental) */
  --filterwhite: grayscale(100%) brightness(10);
}

/* -- Fonts
   –––––––– */

/* do some font-face calls in here if you need to 
@font-face {
  font-family: "Futura W01";
  src: url("/fonts/FuturaStd-Heavy-subset.woff");
  font-style: normal;
  font-weight: 600;
  text-rendering: optimizeLegibility;
}
*/

/* -- Inputs
   ––––––––– */

.input{
  font-family: var(--bookweight);
  font-size: var(--rem-1);
  font-size: var(--rem-1);

  color: var(--grey-100);
  background: var(--grey-300);

  border-radius: var(--border-radius);
  border: 0;
  padding: calc(var(--spacing) * 0.66667) var(--spacing);
 
  -webkit-transition: var(--transition-all);
 
  transition: var(--transition-all);
}

.input:focus{
  outline: none;
}

.input:hover{
  background: var(--grey-100);
}

.disabled .input{
  pointer-events: none;
  opacity: 0.3;
}

/* -- Typography
   ––––––––––––– */

:root{
  --sans: sans-serif;
  --bookweight: 500;
  --heavyweight: 600;
  --boldweight: 700;
  --extraboldweight: 800;

  /* Font size helpers */
  --rem-2: 32px;
  --rem-2: 2rem;
  --rem-1: 16px;
  --rem-1: 1rem;
  --rem-1-2: 19.2px;
  --rem-1-2: 1.2rem;
  --rem-09: 14.4px;
  --rem-09: 0.9rem;
  --rem-085: 13.6px;
  --rem-085: 0.85rem;
  --rem-08: 12.8px;
  --rem-08: 0.8rem;
  --rem-075: 11.2px;
  --rem-075: 0.7rem;
  --rem-07: 11.2px;
  --rem-07: 0.7rem;
  --rem-06: 9.6px;
  --rem-06: 0.6rem;
}

body{
  font-family: var(--sans);
  font-weight: var(--bookweight);
}

h1, h2, h3, h4, h5, h6{
  font-weight: var(--boldweight);
  color: var(--black);
  margin-bottom: var(--spacing);
}

p{
  margin: var(--spacing) 0;
}

h1{
  font-size: var(--rem-2);
  font-size: var(--rem-2);
}

h2{
  font-size: var(--rem-1-2);
  font-size: var(--rem-1-2);
}

h3{
  font-size: var(--rem-1);
  font-size: var(--rem-1);
}

h4{
  font-size: var(--rem-08);
  font-size: var(--rem-08);
}

h5{
  font-size: var(--rem-07);
  font-size: var(--rem-07);
}

h6{
  font-size: var(--rem-07);
  font-size: var(--rem-07);
}

p{
  font-family: var(--sans);
  font-weight: var(--bookweight);
}

label{
  display: block;
  font-family: var(--sans);
  font-weight: var(--heavyweight);
  font-size: var(--rem-08);
  font-size: var(--rem-08);
  color: var(--black);
  margin-bottom: calc(var(--spacing) * 0.5);
}

a:link, a:active, a:link {
  color: var(--primary);
}

/* -- Vars
   ––––––– */

:root{
  --spacing: 15px;
  --spacing: 0.9375rem;
  --border-radius: 4.8px;
  --border-radius: 0.3rem;
  --transition-all: 0.36s all;
}

/*
@styleguide

@title Base 
<h1 class="-upcase -lightweight">
Base
</h1>
<p>Base contains a normalize in the form of fix (https://github.com/jaydenseric/Fix). Base typography, forms and variables declared here.</p>
*/

/* ENGINE 
   –––––– */

/* -- Icons
   –––––––– */

/*
@styleguide

@title Engine
<h1 class="-upcase -lightweight">
Engine
</h1>
<p>The ideal is to have no Engine and just go completely vanila. But when you need things like svg icons, or other useful mixins you can define them here and build with postcss.</p>
*/

/* -- Triangles
   –––––––––––– */

/* todo: make this work 
@define-mixin tirangle, $direction, $colour: var(--black){
  border-radius: 2rem;
  &:before {
    content: "";
    position: absolute;
    top: 7px;
    left: -10px;
    display: block;
    border: 5px solid $colour;
    border-color:  transparent $colour transparent transparent;
  }
}*/

/* LAYOUT 
   –––––– */

/* -- Grid
   ––––––– */

.grid{
  display: block;
  clear: both;
}

.grid .col{
  float: left;
  border: 0.5em solid #fff;
}

@supports (display: grid){
  .grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(10% - 1em), 1fr));
    grid-gap: 1em 1em;
    grid-auto-flow: dense;
  }
  .grid .col{
    float: none;
    border: 0;
  }
  .grid.gutterless{
    grid-template-columns: repeat(auto-fit, minmax(10%, 1fr));
    grid-gap: 0;
  }

  .grid-12{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(8.3333% - 1em), 1fr));
    grid-gap: 1em 1em;
    grid-auto-flow: dense;
  }
  .grid-12s.gutterless{
    grid-template-columns: repeat(auto-fit, minmax(8.3333%, 1fr));
    grid-gap: 0;
  }

  .grid-16{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(6.25% - 1em), 1fr));
    grid-gap: 1em 1em;
    grid-auto-flow: dense;
  }
  .grid-16.gutterless{
    grid-template-columns: repeat(auto-fit, minmax(6.25%, 1fr));
    grid-gap: 0;
  }

  .grid-auto{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 1em 1em;
    grid-auto-flow: dense;
  }

  /* experimental features */
  @media (max-width: 34em) {
    .grid.mq-small-full > .col, 
    .grid-12.mq-small-full > .col, 
    .grid-16.mq-small-full > .col{
      grid-column: 1 / -1 !important;
      width: auto !important;
      margin: 0 !important;
    }

    .grid.mq-small-half > .col{
      grid-column: span 5 !important;
    } 
    .grid-12.mq-small-half > .col{
      grid-column: span 6 !important;
    }
    .grid-16.mq-small-half > .col{
      grid-column: span 8 !important;
    }
    .grid.mq-small-full > .col, 
    .grid-12.mq-small-full > .col, 
    .grid-16.mq-small-full > .col{
      width: auto !important;
      margin: 0 !important;
    }
  }
}

/*
@styleguide

@title Layout Grid
<h1 class="-upcase -lightweight">
Layout
</h1>
<div class="grid mq-small-half">
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">Hi I'm a column!</div>
  </div>
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">Hi I'm a column!</div>
  </div>
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">Hi I'm a column!</div>
  </div>
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">Hi I'm a column!</div>
  </div>
</div> 
<div class="grid -m-top-3 mq-small-full">
  <div class="col -span-cols-8">
    <div class="-bg-grey-300 -h-100 -p-all-1">Hi I'm an 80% column!</div>
  </div>
  <div class="col -span-cols-2">
    <div class="-bg-grey-300 -h-100 -p-all-1">Hi I'm a 20% column!</div>
  </div>
  <div class="col -w-100 m-top-1">
    <div class="-bg-grey-300 -p-all-1">Hi I'm a 100% column!</div>
  </div>
  <div class="col -w-80 -offset-left-20 m-top-1">
    <div class="-bg-grey-300 -p-all-1">Hi I'm an offset colum</div>
  </div>
</div>

<strong>12 column grid</strong>
<div class="grid-12 mq-small-full">
  <div class="col -span-cols-9">
    <div class="-bg-grey-300 -h-100 -p-all-1">9 cols</div>
  </div>
  <div class="col -span-cols-3">
    <div class="-bg-grey-300 -h-100 -p-all-1">3 cols!</div>
  </div>
</div>

<strong>16 column grid</strong>
<div class="grid-16 mq-small-full">
  <div class="col -span-cols-4">
    <div class="-bg-grey-300 -h-100 -p-all-1">4 cols</div>
  </div>
  <div class="col -span-cols-4">
    <div class="-bg-grey-300 -h-100 -p-all-1">4 cols</div>
  </div>
  <div class="col -span-cols-4">
    <div class="-bg-grey-300 -h-100 -p-all-1">4 cols</div>
  </div>
  <div class="col -span-cols-1">
    <div class="-bg-grey-300 -h-100 -p-all-1">1 col</div>
  </div>
   <div class="col -span-cols-1">
    <div class="-bg-grey-300 -h-100 -p-all-1">1 col</div>
  </div>
   <div class="col -span-cols-1">
    <div class="-bg-grey-300 -h-100 -p-all-1">1 col</div>
  </div>
   <div class="col -span-cols-1">
    <div class="-bg-grey-300 -h-100 -p-all-1">1 col</div>
  </div>
  <div class="col -span-cols-2">
    <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div>
  </div>
  <div class="col -span-cols-2">
    <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div>
  </div>
  <div class="col -span-cols-2">
    <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div>
  </div>
  <div class="col -span-cols-2">
    <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div>
  </div>
  <div class="col -span-cols-2">
    <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div>
  </div>
  <div class="col -span-cols-2">
    <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div>
  </div>
  <div class="col -span-cols-2">
    <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div>
  </div>
  <div class="col -span-cols-2">
    <div class="-bg-grey-300 -h-100 -p-all-1">2 cols</div>
  </div>
</div>

<strong>Fixed Width</strong>
<div class="grid">
  <div class="col -w-100">
    <div class="-bg-grey-300 -p-all-1 grid mq-small-full">
      <div class="col -w-10">
        <div class="-bg-grey-100 -p-all-1">1</div>
      </div>
      <div class="col -w-10">
        <div class="-bg-grey-100 -p-all-1">2</div>
      </div>
      <div class="col -w-10">
        <div class="-bg-grey-100 -p-all-1">3</div>
      </div>
      <div class="col -w-10">
        <div class="-bg-grey-100 -p-all-1">4</div>
      </div>
      <div class="col -w-10">
        <div class="-bg-grey-100 -p-all-1">5</div>
      </div>
      <div class="col -w-10">
        <div class="-bg-grey-100 -p-all-1">6</div>
      </div>
      <div class="col -w-10">
        <div class="-bg-grey-100 -p-all-1">7</div>
      </div>
      <div class="col -w-10">
        <div class="-bg-grey-100 -p-all-1">8</div>
      </div>
      <div class="col -w-10">
        <div class="-bg-grey-100 -p-all-1">9</div>
      </div>
      <div class="col -w-10">
        <div class="-bg-grey-100 -p-all-1">10</div>
      </div>
    </div>
  </div>
  <div class="col -w-10">
    <div class="-bg-grey-300 -p-all-1">1</div>
  </div>
  <div class="col -w-10">
    <div class="-bg-grey-300 -p-all-1">2</div>
  </div>
  <div class="col -w-10">
    <div class="-bg-grey-300 -p-all-1">3</div>
  </div>
  <div class="col -w-10">
    <div class="-bg-grey-300 -p-all-1">4</div>
  </div>
  <div class="col -w-10">
    <div class="-bg-grey-300 -p-all-1">5</div>
  </div>
  <div class="col -w-10">
    <div class="-bg-grey-300 -p-all-1">6</div>
  </div>
  <div class="col -w-10">
    <div class="-bg-grey-300 -p-all-1">7</div>
  </div>
  <div class="col -w-10">
    <div class="-bg-grey-300 -p-all-1">8</div>
  </div>
  <div class="col -w-10">
    <div class="-bg-grey-300 -p-all-1">9</div>
  </div>
  <div class="col -w-10">
    <div class="-bg-grey-300 -p-all-1">10</div>
  </div>
</div>

<strong>Auto Width</strong>
<div class="grid-auto">
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">1</div>
  </div>
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">2</div>
  </div>
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">3</div>
  </div>
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">4</div>
  </div>
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">5</div>
  </div>
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">6</div>
  </div>
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">7</div>
  </div>
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">8</div>
  </div>
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">9</div>
  </div>
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">10</div>
  </div>
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">11</div>
  </div>
  <div class="col">
    <div class="-bg-grey-300 -p-all-1">12</div>
  </div>
</div>

<strong>Gutterless Grid</strong>
<div class="grid gutterless">
  <div class="col -w-80">
    <div class="-bg-grey-300 -p-all-1">Hi I'm an 80% column!</div>
  </div>
  <div class="col -w-20">
    <div class="-bg-grey-100 -p-all-1">Hi I'm a 20% column!</div>
  </div>
  <div class="col -w-100">
    <div class="-bg-grey-500 -p-all-1">Hi I'm a 100% column!</div>
  </div>
</div>
*/

/* -- Flex
   ––––––– */

.flex{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap
  /*padding-top: 1px;*/
}

.flex.gutterless .item{
  padding: 0;
}

.flex .item{
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  padding: calc(var(--spacing) * 0.5);
}

.flex .item.gutterless{
  padding: 0;
}

/*
@styleguide

@title Flex
<div class="flex">
  <div class="item">
    <div class="-bg-grey-300 -p-all-1">Hi I'm a item!</div>
  </div>
  <div class="item">
    <div class="-bg-grey-300 -p-all-1">Hi I'm a item!</div>
  </div>
  <div class="item">
    <div class="-bg-grey-300 -p-all-1">Hi I'm a item!</div>
  </div>
  <div class="item">
    <div class="-bg-grey-300 -p-all-1">Hi I'm a item!</div>
  </div>
</div> 

<strong>Gutterless Flex</strong>
<div class="flex gutterless">
  <div class="item -w-80">
    <div class="-bg-grey-300 -p-all-1">Hi I'm an 80% item!</div>
  </div>
  <div class="item -w-20">
    <div class="-bg-grey-100 -p-all-1">Hi I'm a 20% item!</div>
  </div>
  <div class="item -w-100">
    <div class="-bg-grey-500 -p-all-1">Hi I'm a 100% item!</div>
  </div>
</div>
*/

/* MODULE 
   –––––– */

/*
@styleguide

@title Module
<h1 class="-upcase -lightweight">
Module
</h1>
<p>CSS for your Modules/Molecules live here, What is a molecule in css? - check out Brad Frost's pattern lab (http://patternlab.io/)</p>
*/

/* UTILITY 
   ––––––– */

/* -- Display
   –––––––––– */

.-d-block{
  display: block;
}

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

.-d-flex{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-direction: row;
      flex-direction: row;
}

/* -- Colours
   –––––––––– */

.-white                         { color: var(--white);              }

.-bg-white                      { background: var(--white);         }

.-bg-grey                       { background: var(--grey);          }

.-bg-grey-100                   { background: var(--grey-100);      }

.-bg-grey-200                   { background: var(--grey-200);      }

.-bg-grey-300                   { background: var(--grey-300);      }

.-bg-grey-500                   { background: var(--grey-500);      }

.-bg-grey-900                   { background: var(--grey-900);      }

/*
@styleguide

@title Utility
<h1 class="-upcase -lightweight">
Utility
</h1>
All Utility classes go here.
<p>Where are my Utilities? </p>
*/

/* -- Floats
   ––––––––– */

.-float-right{
  float: right;
}

.-float-left{
  float: left;
}

/* -- Percentages
   –––––––––––––– */

/* WIDTHS, HEIGHTS & OFFSETS */

.-w-10 {
    width: 10%;
  }

@supports (display: grid){
    .-w-10 {
        width: 10% !important
      }
    .-w-10.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 1;
  }
    
    .-h-10 {
      height: 10% !important
    }
    
    .-h-10.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 1;
  }
  
    .-vw-10 {
      width: 10% !important;
    }
    .-vh-10 {
      height: 10% !important;
    }
        .-offset-top-10 {
          grid-column-start: 1;
        }
        .-m-offset-top-10 {
          margin-top: 10%;
        }
        .-offset-right-10 {
          grid-column-start: 1;
        }
        .-m-offset-right-10 {
          margin-right: 10%;
        }
        .-offset-bottom-10 {
          grid-column-start: 1;
        }
        .-m-offset-bottom-10 {
          margin-bottom: 10%;
        }
        .-offset-left-10 {
          grid-column-start: 1;
        }
        .-m-offset-left-10 {
          margin-left: 10%;
        }
    }

.-w-12 {
    width: 12%;
  }

@supports (display: grid){
    .-w-12 {
        width: 12% !important
      }
    .-w-12.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 1.2000000000000002;
  }
    
    .-h-12 {
      height: 12% !important
    }
    
    .-h-12.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 1.2000000000000002;
  }
  
    .-vw-12 {
      width: 12% !important;
    }
    .-vh-12 {
      height: 12% !important;
    }
        .-offset-top-12 {
          grid-column-start: 1.2000000000000002;
        }
        .-m-offset-top-12 {
          margin-top: 12%;
        }
        .-offset-right-12 {
          grid-column-start: 1.2000000000000002;
        }
        .-m-offset-right-12 {
          margin-right: 12%;
        }
        .-offset-bottom-12 {
          grid-column-start: 1.2000000000000002;
        }
        .-m-offset-bottom-12 {
          margin-bottom: 12%;
        }
        .-offset-left-12 {
          grid-column-start: 1.2000000000000002;
        }
        .-m-offset-left-12 {
          margin-left: 12%;
        }
    }

.-w-14 {
    width: 14%;
  }

@supports (display: grid){
    .-w-14 {
        width: 14% !important
      }
    .-w-14.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 1.4000000000000001;
  }
    
    .-h-14 {
      height: 14% !important
    }
    
    .-h-14.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 1.4000000000000001;
  }
  
    .-vw-14 {
      width: 14% !important;
    }
    .-vh-14 {
      height: 14% !important;
    }
        .-offset-top-14 {
          grid-column-start: 1.4000000000000001;
        }
        .-m-offset-top-14 {
          margin-top: 14%;
        }
        .-offset-right-14 {
          grid-column-start: 1.4000000000000001;
        }
        .-m-offset-right-14 {
          margin-right: 14%;
        }
        .-offset-bottom-14 {
          grid-column-start: 1.4000000000000001;
        }
        .-m-offset-bottom-14 {
          margin-bottom: 14%;
        }
        .-offset-left-14 {
          grid-column-start: 1.4000000000000001;
        }
        .-m-offset-left-14 {
          margin-left: 14%;
        }
    }

.-w-15 {
    width: 15%;
  }

@supports (display: grid){
    .-w-15 {
        width: 15% !important
      }
    .-w-15.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 1.5;
  }
    
    .-h-15 {
      height: 15% !important
    }
    
    .-h-15.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 1.5;
  }
  
    .-vw-15 {
      width: 15% !important;
    }
    .-vh-15 {
      height: 15% !important;
    }
        .-offset-top-15 {
          grid-column-start: 1.5;
        }
        .-m-offset-top-15 {
          margin-top: 15%;
        }
        .-offset-right-15 {
          grid-column-start: 1.5;
        }
        .-m-offset-right-15 {
          margin-right: 15%;
        }
        .-offset-bottom-15 {
          grid-column-start: 1.5;
        }
        .-m-offset-bottom-15 {
          margin-bottom: 15%;
        }
        .-offset-left-15 {
          grid-column-start: 1.5;
        }
        .-m-offset-left-15 {
          margin-left: 15%;
        }
    }

.-w-18 {
    width: 18%;
  }

@supports (display: grid){
    .-w-18 {
        width: 18% !important
      }
    .-w-18.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 1.8;
  }
    
    .-h-18 {
      height: 18% !important
    }
    
    .-h-18.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 1.8;
  }
  
    .-vw-18 {
      width: 18% !important;
    }
    .-vh-18 {
      height: 18% !important;
    }
        .-offset-top-18 {
          grid-column-start: 1.8;
        }
        .-m-offset-top-18 {
          margin-top: 18%;
        }
        .-offset-right-18 {
          grid-column-start: 1.8;
        }
        .-m-offset-right-18 {
          margin-right: 18%;
        }
        .-offset-bottom-18 {
          grid-column-start: 1.8;
        }
        .-m-offset-bottom-18 {
          margin-bottom: 18%;
        }
        .-offset-left-18 {
          grid-column-start: 1.8;
        }
        .-m-offset-left-18 {
          margin-left: 18%;
        }
    }

.-w-20 {
    width: 20%;
  }

@supports (display: grid){
    .-w-20 {
        width: 20% !important
      }
    .-w-20.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 2;
  }
    
    .-h-20 {
      height: 20% !important
    }
    
    .-h-20.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 2;
  }
  
    .-vw-20 {
      width: 20% !important;
    }
    .-vh-20 {
      height: 20% !important;
    }
        .-offset-top-20 {
          grid-column-start: 2;
        }
        .-m-offset-top-20 {
          margin-top: 20%;
        }
        .-offset-right-20 {
          grid-column-start: 2;
        }
        .-m-offset-right-20 {
          margin-right: 20%;
        }
        .-offset-bottom-20 {
          grid-column-start: 2;
        }
        .-m-offset-bottom-20 {
          margin-bottom: 20%;
        }
        .-offset-left-20 {
          grid-column-start: 2;
        }
        .-m-offset-left-20 {
          margin-left: 20%;
        }
    }

.-w-22 {
    width: 22%;
  }

@supports (display: grid){
    .-w-22 {
        width: 22% !important
      }
    .-w-22.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 2.2;
  }
    
    .-h-22 {
      height: 22% !important
    }
    
    .-h-22.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 2.2;
  }
  
    .-vw-22 {
      width: 22% !important;
    }
    .-vh-22 {
      height: 22% !important;
    }
        .-offset-top-22 {
          grid-column-start: 2.2;
        }
        .-m-offset-top-22 {
          margin-top: 22%;
        }
        .-offset-right-22 {
          grid-column-start: 2.2;
        }
        .-m-offset-right-22 {
          margin-right: 22%;
        }
        .-offset-bottom-22 {
          grid-column-start: 2.2;
        }
        .-m-offset-bottom-22 {
          margin-bottom: 22%;
        }
        .-offset-left-22 {
          grid-column-start: 2.2;
        }
        .-m-offset-left-22 {
          margin-left: 22%;
        }
    }

.-w-24 {
    width: 24%;
  }

@supports (display: grid){
    .-w-24 {
        width: 24% !important
      }
    .-w-24.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 2.4000000000000004;
  }
    
    .-h-24 {
      height: 24% !important
    }
    
    .-h-24.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 2.4000000000000004;
  }
  
    .-vw-24 {
      width: 24% !important;
    }
    .-vh-24 {
      height: 24% !important;
    }
        .-offset-top-24 {
          grid-column-start: 2.4000000000000004;
        }
        .-m-offset-top-24 {
          margin-top: 24%;
        }
        .-offset-right-24 {
          grid-column-start: 2.4000000000000004;
        }
        .-m-offset-right-24 {
          margin-right: 24%;
        }
        .-offset-bottom-24 {
          grid-column-start: 2.4000000000000004;
        }
        .-m-offset-bottom-24 {
          margin-bottom: 24%;
        }
        .-offset-left-24 {
          grid-column-start: 2.4000000000000004;
        }
        .-m-offset-left-24 {
          margin-left: 24%;
        }
    }

.-w-25 {
    width: 25%;
  }

@supports (display: grid){
    .-w-25 {
        width: 25% !important
      }
    .-w-25.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 2.5;
  }
    
    .-h-25 {
      height: 25% !important
    }
    
    .-h-25.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 2.5;
  }
  
    .-vw-25 {
      width: 25% !important;
    }
    .-vh-25 {
      height: 25% !important;
    }
        .-offset-top-25 {
          grid-column-start: 2.5;
        }
        .-m-offset-top-25 {
          margin-top: 25%;
        }
        .-offset-right-25 {
          grid-column-start: 2.5;
        }
        .-m-offset-right-25 {
          margin-right: 25%;
        }
        .-offset-bottom-25 {
          grid-column-start: 2.5;
        }
        .-m-offset-bottom-25 {
          margin-bottom: 25%;
        }
        .-offset-left-25 {
          grid-column-start: 2.5;
        }
        .-m-offset-left-25 {
          margin-left: 25%;
        }
    }

.-w-30 {
    width: 30%;
  }

@supports (display: grid){
    .-w-30 {
        width: 30% !important
      }
    .-w-30.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 3;
  }
    
    .-h-30 {
      height: 30% !important
    }
    
    .-h-30.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 3;
  }
  
    .-vw-30 {
      width: 30% !important;
    }
    .-vh-30 {
      height: 30% !important;
    }
        .-offset-top-30 {
          grid-column-start: 3;
        }
        .-m-offset-top-30 {
          margin-top: 30%;
        }
        .-offset-right-30 {
          grid-column-start: 3;
        }
        .-m-offset-right-30 {
          margin-right: 30%;
        }
        .-offset-bottom-30 {
          grid-column-start: 3;
        }
        .-m-offset-bottom-30 {
          margin-bottom: 30%;
        }
        .-offset-left-30 {
          grid-column-start: 3;
        }
        .-m-offset-left-30 {
          margin-left: 30%;
        }
    }

.-w-40 {
    width: 40%;
  }

@supports (display: grid){
    .-w-40 {
        width: 40% !important
      }
    .-w-40.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 4;
  }
    
    .-h-40 {
      height: 40% !important
    }
    
    .-h-40.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 4;
  }
  
    .-vw-40 {
      width: 40% !important;
    }
    .-vh-40 {
      height: 40% !important;
    }
        .-offset-top-40 {
          grid-column-start: 4;
        }
        .-m-offset-top-40 {
          margin-top: 40%;
        }
        .-offset-right-40 {
          grid-column-start: 4;
        }
        .-m-offset-right-40 {
          margin-right: 40%;
        }
        .-offset-bottom-40 {
          grid-column-start: 4;
        }
        .-m-offset-bottom-40 {
          margin-bottom: 40%;
        }
        .-offset-left-40 {
          grid-column-start: 4;
        }
        .-m-offset-left-40 {
          margin-left: 40%;
        }
    }

.-w-50 {
    width: 50%;
  }

@supports (display: grid){
    .-w-50 {
        width: 50% !important
      }
    .-w-50.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 5;
  }
    
    .-h-50 {
      height: 50% !important
    }
    
    .-h-50.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 5;
  }
  
    .-vw-50 {
      width: 50% !important;
    }
    .-vh-50 {
      height: 50% !important;
    }
        .-offset-top-50 {
          grid-column-start: 5;
        }
        .-m-offset-top-50 {
          margin-top: 50%;
        }
        .-offset-right-50 {
          grid-column-start: 5;
        }
        .-m-offset-right-50 {
          margin-right: 50%;
        }
        .-offset-bottom-50 {
          grid-column-start: 5;
        }
        .-m-offset-bottom-50 {
          margin-bottom: 50%;
        }
        .-offset-left-50 {
          grid-column-start: 5;
        }
        .-m-offset-left-50 {
          margin-left: 50%;
        }
    }

.-w-58 {
    width: 58%;
  }

@supports (display: grid){
    .-w-58 {
        width: 58% !important
      }
    .-w-58.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 5.800000000000001;
  }
    
    .-h-58 {
      height: 58% !important
    }
    
    .-h-58.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 5.800000000000001;
  }
  
    .-vw-58 {
      width: 58% !important;
    }
    .-vh-58 {
      height: 58% !important;
    }
        .-offset-top-58 {
          grid-column-start: 5.800000000000001;
        }
        .-m-offset-top-58 {
          margin-top: 58%;
        }
        .-offset-right-58 {
          grid-column-start: 5.800000000000001;
        }
        .-m-offset-right-58 {
          margin-right: 58%;
        }
        .-offset-bottom-58 {
          grid-column-start: 5.800000000000001;
        }
        .-m-offset-bottom-58 {
          margin-bottom: 58%;
        }
        .-offset-left-58 {
          grid-column-start: 5.800000000000001;
        }
        .-m-offset-left-58 {
          margin-left: 58%;
        }
    }

.-w-60 {
    width: 60%;
  }

@supports (display: grid){
    .-w-60 {
        width: 60% !important
      }
    .-w-60.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 6;
  }
    
    .-h-60 {
      height: 60% !important
    }
    
    .-h-60.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 6;
  }
  
    .-vw-60 {
      width: 60% !important;
    }
    .-vh-60 {
      height: 60% !important;
    }
        .-offset-top-60 {
          grid-column-start: 6;
        }
        .-m-offset-top-60 {
          margin-top: 60%;
        }
        .-offset-right-60 {
          grid-column-start: 6;
        }
        .-m-offset-right-60 {
          margin-right: 60%;
        }
        .-offset-bottom-60 {
          grid-column-start: 6;
        }
        .-m-offset-bottom-60 {
          margin-bottom: 60%;
        }
        .-offset-left-60 {
          grid-column-start: 6;
        }
        .-m-offset-left-60 {
          margin-left: 60%;
        }
    }

.-w-70 {
    width: 70%;
  }

@supports (display: grid){
    .-w-70 {
        width: 70% !important
      }
    .-w-70.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 7;
  }
    
    .-h-70 {
      height: 70% !important
    }
    
    .-h-70.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 7;
  }
  
    .-vw-70 {
      width: 70% !important;
    }
    .-vh-70 {
      height: 70% !important;
    }
        .-offset-top-70 {
          grid-column-start: 7;
        }
        .-m-offset-top-70 {
          margin-top: 70%;
        }
        .-offset-right-70 {
          grid-column-start: 7;
        }
        .-m-offset-right-70 {
          margin-right: 70%;
        }
        .-offset-bottom-70 {
          grid-column-start: 7;
        }
        .-m-offset-bottom-70 {
          margin-bottom: 70%;
        }
        .-offset-left-70 {
          grid-column-start: 7;
        }
        .-m-offset-left-70 {
          margin-left: 70%;
        }
    }

.-w-75 {
    width: 75%;
  }

@supports (display: grid){
    .-w-75 {
        width: 75% !important
      }
    .-w-75.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 7.5;
  }
    
    .-h-75 {
      height: 75% !important
    }
    
    .-h-75.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 7.5;
  }
  
    .-vw-75 {
      width: 75% !important;
    }
    .-vh-75 {
      height: 75% !important;
    }
        .-offset-top-75 {
          grid-column-start: 7.5;
        }
        .-m-offset-top-75 {
          margin-top: 75%;
        }
        .-offset-right-75 {
          grid-column-start: 7.5;
        }
        .-m-offset-right-75 {
          margin-right: 75%;
        }
        .-offset-bottom-75 {
          grid-column-start: 7.5;
        }
        .-m-offset-bottom-75 {
          margin-bottom: 75%;
        }
        .-offset-left-75 {
          grid-column-start: 7.5;
        }
        .-m-offset-left-75 {
          margin-left: 75%;
        }
    }

.-w-80 {
    width: 80%;
  }

@supports (display: grid){
    .-w-80 {
        width: 80% !important
      }
    .-w-80.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 8;
  }
    
    .-h-80 {
      height: 80% !important
    }
    
    .-h-80.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 8;
  }
  
    .-vw-80 {
      width: 80% !important;
    }
    .-vh-80 {
      height: 80% !important;
    }
        .-offset-top-80 {
          grid-column-start: 8;
        }
        .-m-offset-top-80 {
          margin-top: 80%;
        }
        .-offset-right-80 {
          grid-column-start: 8;
        }
        .-m-offset-right-80 {
          margin-right: 80%;
        }
        .-offset-bottom-80 {
          grid-column-start: 8;
        }
        .-m-offset-bottom-80 {
          margin-bottom: 80%;
        }
        .-offset-left-80 {
          grid-column-start: 8;
        }
        .-m-offset-left-80 {
          margin-left: 80%;
        }
    }

.-w-90 {
    width: 90%;
  }

@supports (display: grid){
    .-w-90 {
        width: 90% !important
      }
    .-w-90.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 9;
  }
    
    .-h-90 {
      height: 90% !important
    }
    
    .-h-90.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 9;
  }
  
    .-vw-90 {
      width: 90% !important;
    }
    .-vh-90 {
      height: 90% !important;
    }
        .-offset-top-90 {
          grid-column-start: 9;
        }
        .-m-offset-top-90 {
          margin-top: 90%;
        }
        .-offset-right-90 {
          grid-column-start: 9;
        }
        .-m-offset-right-90 {
          margin-right: 90%;
        }
        .-offset-bottom-90 {
          grid-column-start: 9;
        }
        .-m-offset-bottom-90 {
          margin-bottom: 90%;
        }
        .-offset-left-90 {
          grid-column-start: 9;
        }
        .-m-offset-left-90 {
          margin-left: 90%;
        }
    }

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

@supports (display: grid){
    .-w-100 {
        width: 100% !important
      }
    .-w-100.col:not(.-fixed){
    width: auto !important;
    grid-column-end: span 10;
  }
    
    .-h-100 {
      height: 100% !important
    }
    
    .-h-100.col:not(.-fixed){
    height: auto !important;
    grid-row-end: span 10;
  }
  
    .-vw-100 {
      width: 100% !important;
    }
    .-vh-100 {
      height: 100% !important;
    }
        .-offset-top-100 {
          grid-column-start: 10;
        }
        .-m-offset-top-100 {
          margin-top: 100%;
        }
        .-offset-right-100 {
          grid-column-start: 10;
        }
        .-m-offset-right-100 {
          margin-right: 100%;
        }
        .-offset-bottom-100 {
          grid-column-start: 10;
        }
        .-m-offset-bottom-100 {
          margin-bottom: 100%;
        }
        .-offset-left-100 {
          grid-column-start: 10;
        }
        .-m-offset-left-100 {
          margin-left: 100%;
        }
    }

@supports (display: grid){
  .-w-100{
    grid-column: 1 / -1 !important;
  }
}

.-span-cols-1{
    width: 10%;
  }

@supports (display: grid){
    .-span-cols-1{
      width: auto;
      grid-column-end: span 1;
    }
    .-span-rows-1{
      grid-row-end: span span 1;
    }
  }

.-span-cols-2{
    width: 20%;
  }

@supports (display: grid){
    .-span-cols-2{
      width: auto;
      grid-column-end: span 2;
    }
    .-span-rows-2{
      grid-row-end: span span 2;
    }
  }

.-span-cols-3{
    width: 30%;
  }

@supports (display: grid){
    .-span-cols-3{
      width: auto;
      grid-column-end: span 3;
    }
    .-span-rows-3{
      grid-row-end: span span 3;
    }
  }

.-span-cols-4{
    width: 40%;
  }

@supports (display: grid){
    .-span-cols-4{
      width: auto;
      grid-column-end: span 4;
    }
    .-span-rows-4{
      grid-row-end: span span 4;
    }
  }

.-span-cols-5{
    width: 50%;
  }

@supports (display: grid){
    .-span-cols-5{
      width: auto;
      grid-column-end: span 5;
    }
    .-span-rows-5{
      grid-row-end: span span 5;
    }
  }

.-span-cols-6{
    width: 60%;
  }

@supports (display: grid){
    .-span-cols-6{
      width: auto;
      grid-column-end: span 6;
    }
    .-span-rows-6{
      grid-row-end: span span 6;
    }
  }

.-span-cols-7{
    width: 70%;
  }

@supports (display: grid){
    .-span-cols-7{
      width: auto;
      grid-column-end: span 7;
    }
    .-span-rows-7{
      grid-row-end: span span 7;
    }
  }

.-span-cols-8{
    width: 80%;
  }

@supports (display: grid){
    .-span-cols-8{
      width: auto;
      grid-column-end: span 8;
    }
    .-span-rows-8{
      grid-row-end: span span 8;
    }
  }

.-span-cols-9{
    width: 90%;
  }

@supports (display: grid){
    .-span-cols-9{
      width: auto;
      grid-column-end: span 9;
    }
    .-span-rows-9{
      grid-row-end: span span 9;
    }
  }

.-span-cols-10{
    width: 100%;
  }

@supports (display: grid){
    .-span-cols-10{
      width: auto;
      grid-column-end: span 10;
    }
    .-span-rows-10{
      grid-row-end: span span 10;
    }
  }

.-span-cols-11{
    width: 110%;
  }

@supports (display: grid){
    .-span-cols-11{
      width: auto;
      grid-column-end: span 11;
    }
    .-span-rows-11{
      grid-row-end: span span 11;
    }
  }

.-span-cols-12{
    width: 120%;
  }

@supports (display: grid){
    .-span-cols-12{
      width: auto;
      grid-column-end: span 12;
    }
    .-span-rows-12{
      grid-row-end: span span 12;
    }
  }

.-span-cols-13{
    width: 130%;
  }

@supports (display: grid){
    .-span-cols-13{
      width: auto;
      grid-column-end: span 13;
    }
    .-span-rows-13{
      grid-row-end: span span 13;
    }
  }

.-span-cols-14{
    width: 140%;
  }

@supports (display: grid){
    .-span-cols-14{
      width: auto;
      grid-column-end: span 14;
    }
    .-span-rows-14{
      grid-row-end: span span 14;
    }
  }

.-span-cols-15{
    width: 150%;
  }

@supports (display: grid){
    .-span-cols-15{
      width: auto;
      grid-column-end: span 15;
    }
    .-span-rows-15{
      grid-row-end: span span 15;
    }
  }

.-span-cols-16{
    width: 160%;
  }

@supports (display: grid){
    .-span-cols-16{
      width: auto;
      grid-column-end: span 16;
    }
    .-span-rows-16{
      grid-row-end: span span 16;
    }
  }

/* -- Positioning
   –––––––––––––– */

.-pos-fixed, .-fixed{
  position: fixed;
}

.-pos-absolute{
  position: absolute;
}

.-pos-relative{
  position: relative;
}

/* POSITIONING HELPERS */

.-t-0, .-top-0{
  top: 0;
}

.-r-0, .-right-0{
  right: 0;
}

.-b-0, .-bottom-0{
  bottom: 0;
}

.-l-0, .-left-0{
  left: 0;
}

.-top-half: calc(var(--spacing) * 0.5);

.-top-1: calc(var(--spacing) * 1);

.-top-2: calc(var(--spacing) * 2);

.-top-3: calc(var(--spacing) * 3);

.-top-4: calc(var(--spacing) * 4);

.-top-5: calc(var(--spacing) * 5);

.-right-half: calc(var(--spacing) * 0.5);

.-right-1: calc(var(--spacing) * 1);

.-right-2: calc(var(--spacing) * 2);

.-right-3: calc(var(--spacing) * 3);

.-right-4: calc(var(--spacing) * 4);

.-right-5: calc(var(--spacing) * 5);

.-bottom-half: calc(var(--spacing) * 0.5);

.-bottom-1: calc(var(--spacing) * 1);

.-bottom-2: calc(var(--spacing) * 2);

.-bottom-3: calc(var(--spacing) * 3);

.-bottom-4: calc(var(--spacing) * 4);

.-bottom-5: calc(var(--spacing) * 5);

.-left-half: calc(var(--spacing) * 0.5);

.-left-1: calc(var(--spacing) * 1);

.-left-2: calc(var(--spacing) * 2);

.-left-3: calc(var(--spacing) * 3);

.-left-4: calc(var(--spacing) * 4);

.-left-5: calc(var(--spacing) * 5);

/* -- Spacing
   –––––––––– */

.-m-all{
  margin: var(--spacing);
}

.-p-all{
  padding: var(--spacing);
}

.-m-0, .-m-all-0{
  margin: 0 !important;
}

.-p-0, .-p-all-0{
  padding: 0 !important;
}

.-m-auto {
    margin: auto;
}

.-p-top-half {padding-top:  calc(var(--spacing) * 0.5);}

.-m-top-half {margin-top:   calc(var(--spacing) * 0.5);}

.-p-top-1 {padding-top:     calc(var(--spacing) * 1);}

.-m-top-1 {margin-top:      calc(var(--spacing) * 1);}

.-p-top-2 {padding-top:     calc(var(--spacing) * 2);}

.-m-top-2 {margin-top:      calc(var(--spacing) * 2);}

.-p-top-3 {padding-top:     calc(var(--spacing) * 3);}

.-m-top-3 {margin-top:      calc(var(--spacing) * 3);}

.-p-top-4 {padding-top:     calc(var(--spacing) * 4);}

.-m-top-4 {margin-top:      calc(var(--spacing) * 4);}

.-p-top-5 {padding-top:     calc(var(--spacing) * 5);}

.-m-top-5 {margin-top:      calc(var(--spacing) * 5);}

.-p-right-half {padding-right:  calc(var(--spacing) * 0.5);}

.-m-right-half {margin-right:   calc(var(--spacing) * 0.5);}

.-p-right-1 {padding-right:     calc(var(--spacing) * 1);}

.-m-right-1 {margin-right:      calc(var(--spacing) * 1);}

.-p-right-2 {padding-right:     calc(var(--spacing) * 2);}

.-m-right-2 {margin-right:      calc(var(--spacing) * 2);}

.-p-right-3 {padding-right:     calc(var(--spacing) * 3);}

.-m-right-3 {margin-right:      calc(var(--spacing) * 3);}

.-p-right-4 {padding-right:     calc(var(--spacing) * 4);}

.-m-right-4 {margin-right:      calc(var(--spacing) * 4);}

.-p-right-5 {padding-right:     calc(var(--spacing) * 5);}

.-m-right-5 {margin-right:      calc(var(--spacing) * 5);}

.-p-bottom-half {padding-bottom:  calc(var(--spacing) * 0.5);}

.-m-bottom-half {margin-bottom:   calc(var(--spacing) * 0.5);}

.-p-bottom-1 {padding-bottom:     calc(var(--spacing) * 1);}

.-m-bottom-1 {margin-bottom:      calc(var(--spacing) * 1);}

.-p-bottom-2 {padding-bottom:     calc(var(--spacing) * 2);}

.-m-bottom-2 {margin-bottom:      calc(var(--spacing) * 2);}

.-p-bottom-3 {padding-bottom:     calc(var(--spacing) * 3);}

.-m-bottom-3 {margin-bottom:      calc(var(--spacing) * 3);}

.-p-bottom-4 {padding-bottom:     calc(var(--spacing) * 4);}

.-m-bottom-4 {margin-bottom:      calc(var(--spacing) * 4);}

.-p-bottom-5 {padding-bottom:     calc(var(--spacing) * 5);}

.-m-bottom-5 {margin-bottom:      calc(var(--spacing) * 5);}

.-p-left-half {padding-left:  calc(var(--spacing) * 0.5);}

.-m-left-half {margin-left:   calc(var(--spacing) * 0.5);}

.-p-left-1 {padding-left:     calc(var(--spacing) * 1);}

.-m-left-1 {margin-left:      calc(var(--spacing) * 1);}

.-p-left-2 {padding-left:     calc(var(--spacing) * 2);}

.-m-left-2 {margin-left:      calc(var(--spacing) * 2);}

.-p-left-3 {padding-left:     calc(var(--spacing) * 3);}

.-m-left-3 {margin-left:      calc(var(--spacing) * 3);}

.-p-left-4 {padding-left:     calc(var(--spacing) * 4);}

.-m-left-4 {margin-left:      calc(var(--spacing) * 4);}

.-p-left-5 {padding-left:     calc(var(--spacing) * 5);}

.-m-left-5 {margin-left:      calc(var(--spacing) * 5);}

/* padding */

.-p-all-half{
  padding: calc(var(--spacing) * 0.5);
}

.-p-all-1{
  padding: var(--spacing);
}

.-p-all-2{
  padding: calc(var(--spacing) * 2);
}

.-p-all-3{
  padding: calc(var(--spacing) * 3);
}

.-p-all-4{
  padding: calc(var(--spacing) * 4);
}

.-p-all-5{
  padding: calc(var(--spacing) * 5);
}

.-p-x-half{
  padding-left:  calc(var(--spacing) * 0.5);
  padding-right: calc(var(--spacing) * 0.5);
}

.-p-x-1{
  padding-left:  calc(var(--spacing) * 1);
  padding-right: calc(var(--spacing) * 1);
}

.-p-x-2{
  padding-left:  calc(var(--spacing) * 2);
  padding-right: calc(var(--spacing) * 2);
}

.-p-x-3{
  padding-left:  calc(var(--spacing) * 3);
  padding-right: calc(var(--spacing) * 3);
}

.-p-x-4{
  padding-left:  calc(var(--spacing) * 4);
  padding-right: calc(var(--spacing) * 4);
}

.-p-y-half{
  padding-top:    calc(var(--spacing) * 0.5);
  padding-bottom: calc(var(--spacing) * 0.5);
}

.-p-y-1{
  padding-top:    calc(var(--spacing) * 1);
  padding-bottom: calc(var(--spacing) * 1);
}

.-p-y-2{
  padding-top:    calc(var(--spacing) * 2);
  padding-bottom: calc(var(--spacing) * 2);
}

.-p-y-3{
  padding-top:    calc(var(--spacing) * 3);
  padding-bottom: calc(var(--spacing) * 3);
}

.-p-y-4{
  padding-top:    calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 4);
}

/* margin */

.-m-all-half{
  margin: calc(var(--spacing) * 0.5);
}

.-m-all-1{
  margin: var(--spacing);
}

.-m-all-2{
  margin: calc(var(--spacing) * 2);
}

.-m-all-3{
  margin: calc(var(--spacing) * 3);
}

.-m-all-4{
  margin: calc(var(--spacing) * 4);
}

.-m-all-5{
  margin: calc(var(--spacing) * 5);
}

.-m-x-half{
  margin-left:  calc(var(--spacing) * 0.5);
  margin-right: calc(var(--spacing) * 0.5);
}

.-m-x-1{
  margin-left:  calc(var(--spacing) * 1);
  margin-right: calc(var(--spacing) * 1);
}

.-m-x-2{
  margin-left:  calc(var(--spacing) * 2);
  margin-right: calc(var(--spacing) * 2);
}

.-m-x-3{
  margin-left:  calc(var(--spacing) * 3);
  margin-right: calc(var(--spacing) * 3);
}

.-m-x-4{
  margin-left:  calc(var(--spacing) * 4);
  margin-right: calc(var(--spacing) * 4);
}

.-m-y-half{
  margin-top:    calc(var(--spacing) * 0.5);
  margin-bottom: calc(var(--spacing) * 0.5);
}

.-m-y-1{
  margin-top:    calc(var(--spacing) * 1);
  margin-bottom: calc(var(--spacing) * 1);
}

.-m-y-2{
  margin-top:    calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 2);
}

.-m-y-3{
  margin-top:    calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 3);
}

.-m-y-4{
  margin-top:    calc(var(--spacing) * 4);
  margin-bottom: calc(var(--spacing) * 4);
}

/* Text classes
   –––––––––––– */

/* FONT WEIGHTS */

.-lightweight{
  font-weight: 300;
}

.-bookweight{
  font-weight: 500;
}

.-heavyweight{
  font-weight: 600;
}

.-boldweight{
  font-weight: 700;
}

.-extraboldweight{
  font-weight: 800;
}

.-upcase{
  text-transform: uppercase;
}

.-nocase{
  text-transform: none;
}

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

.-lineheight-1-2{
  line-height: 1.2em;
}

.-lineheight-1-3{
  line-height: 1.3em;
}

.-lineheight-1-4{
  line-height: 1.4em;
}

.-lineheight-1-5{
  line-height: 24px;
  line-height: 1.5rem;
}

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

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

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

/* -- Typesizes
   –––––––––––– */

.-rem-3 {
  font-size: 48px;
  font-size: 3rem;
}

.-rem-2 {
  font-size: 32px;
  font-size: 2rem;
}

.-rem-1-75 {
  font-size: 28px;
  font-size: 1.75rem;
}

.-rem-1-5 {
  font-size: 24px;
  font-size: 1.5rem;
}

.-rem-1-2 {
  font-size: 19.2px;
  font-size: 1.2rem;
}

.-rem-1 {
  font-size: 16px;
  font-size: 1rem;
}

.-rem-09 {
  font-size: 14.4px;
  font-size: 0.9rem;
}

.-rem-085 {
  font-size: 13.6px;
  font-size: 0.85rem;
}

.-rem-08 {
  font-size: 12.8px;
  font-size: 0.8rem;
}

.-rem-075 {
  font-size: 11.2px;
  font-size: 0.7rem;
}

.-rem-07 {
  font-size: 11.2px;
  font-size: 0.7rem;
}

.-rem-06 {
  font-size: 9.6px;
  font-size: 0.6rem;
}

/* Ems */

.-em-3 {
  font-size: 3em;
}

.-em-2 {
  font-size: 2em;
}

.-em-1-75 {
  font-size: 1.75em;
}

.-em-1-5 {
  font-size: 1.5em;
}

.-em-1-2 {
  font-size: 1.2em;
}

.-em-1 {
  font-size: 1em;
}

.-em-09 {
  font-size: 0.9em;
}

.-em-085 {
  font-size: 0.85em;
}

.-em-08 {
  font-size: 0.8em;
}

.-em-075 {
  font-size: 0.7em;
}

.-em-07 {
  font-size: 0.7em;
}

.-em-06 {
  font-size: 0.6em;
}

.unsupported, .ie11, .ie10, .ie678{
  display: none;
}

@supports not (display: grid) {
  .unsupported{
    display: block;
  }
}

@media all and (-ms-high-contrast:none){
  .ie10 {display: block;} /* IE10 */
  *::-ms-backdrop, .ie11 {display: block;} /* IE11 */
}

@media \0screen\,screen\9 {
    .ie678 {display: block;}
}

/* override/set vars here */

:root{
  /* sans typeface */
  --sans: 'Lato', sans-serif;

  /* colours (main HSL values) */
  --core-secondary: 148, 40%;
  --core-primary: 192, 56%;
  --core-highlight: 350, 98%;
}

/* END of css */