grid.css

.grid{list-style:none;margin-left:-20px}.grid>.grid__col--2-of-2,.grid>.grid__col--3-of-3,.grid>.grid__col--4-of-4,.grid>.grid__col--5-of-5,.grid>.grid__col--6-of-6,.grid>.grid__col--8-of-8,.grid>.grid__col--12-of-12{width:100%}.grid>.grid__col--1-of-2,.grid>.grid__col--2-of-4,.grid>.grid__col--3-of-6,.grid>.grid__col--4-of-8,.grid>.grid__col--6-of-12{width:50%}.grid>.grid__col--1-of-3,.grid>.grid__col--2-of-6,.grid>.grid__col--4-of-12{width:33.33333%}.grid>.grid__col--2-of-3,.grid>.grid__col--4-of-6,.grid>.grid__col--8-of-12{width:66.66667%}.grid>.grid__col--1-of-4,.grid>.grid__col--2-of-8,.grid>.grid__col--3-of-12{width:25%}.grid>.grid__col--3-of-4,.grid>.grid__col--6-of-8,.grid>.grid__col--9-of-12{width:75%}.grid>.grid__col--push-2-of-2,.grid>.grid__col--push-3-of-3,.grid>.grid__col--push-4-of-4,.grid>.grid__col--push-5-of-5,.grid>.grid__col--push-6-of-6,.grid>.grid__col--push-8-of-8,.grid>.grid__col--push-12-of-12{margin-left:100%}.grid>.grid__col--push-1-of-2,.grid>.grid__col--push-2-of-4,.grid>.grid__col--push-3-of-6,.grid>.grid__col--push-4-of-8,.grid>.grid__col--push-6-of-12{margin-left:50%}.grid>.grid__col--push-1-of-3,.grid>.grid__col--push-2-of-6,.grid>.grid__col--push-4-of-12{margin-left:33.33333%}.grid>.grid__col--push-2-of-3,.grid>.grid__col--push-4-of-6,.grid>.grid__col--push-8-of-12{margin-left:66.66667%}.grid>.grid__col--push-1-of-4,.grid>.grid__col--push-2-of-8,.grid>.grid__col--push-3-of-12{margin-left:25%}.grid>.grid__col--push-3-of-4,.grid>.grid__col--push-6-of-8,.grid>.grid__col--push-9-of-12{margin-left:75%}.grid>.grid__col--pull-2-of-2,.grid>.grid__col--pull-3-of-3,.grid>.grid__col--pull-4-of-4,.grid>.grid__col--pull-5-of-5,.grid>.grid__col--pull-6-of-6,.grid>.grid__col--pull-8-of-8,.grid>.grid__col--pull-12-of-12{margin-left:-100%}.grid>.grid__col--pull-1-of-2,.grid>.grid__col--pull-2-of-4,.grid>.grid__col--pull-3-of-6,.grid>.grid__col--pull-4-of-8,.grid>.grid__col--pull-6-of-12{margin-left:-50%}.grid>.grid__col--pull-1-of-3,.grid>.grid__col--pull-2-of-6,.grid>.grid__col--pull-4-of-12{margin-left:-33.33333%}.grid>.grid__col--pull-2-of-3,.grid>.grid__col--pull-4-of-6,.grid>.grid__col--pull-8-of-12{margin-left:-66.66667%}.grid>.grid__col--pull-1-of-4,.grid>.grid__col--pull-2-of-8,.grid>.grid__col--pull-3-of-12{margin-left:-25%}.grid>.grid__col--pull-3-of-4,.grid>.grid__col--pull-6-of-8,.grid>.grid__col--pull-9-of-12{margin-left:-75%}.grid>.grid__col--1-of-5{width:20%}.grid>.grid__col--push-1-of-5{margin-left:20%}.grid>.grid__col--pull-1-of-5{margin-left:-20%}.grid>.grid__col--2-of-5{width:40%}.grid>.grid__col--push-2-of-5{margin-left:40%}.grid>.grid__col--pull-2-of-5{margin-left:-40%}.grid>.grid__col--3-of-5{width:60%}.grid>.grid__col--push-3-of-5{margin-left:60%}.grid>.grid__col--pull-3-of-5{margin-left:-60%}.grid>.grid__col--4-of-5{width:80%}.grid>.grid__col--push-4-of-5{margin-left:80%}.grid>.grid__col--pull-4-of-5{margin-left:-80%}.grid>.grid__col--1-of-6{width:16.66667%}.grid>.grid__col--push-1-of-6{margin-left:16.66667%}.grid>.grid__col--pull-1-of-6{margin-left:-16.66667%}.grid>.grid__col--5-of-6{width:83.33333%}.grid>.grid__col--push-5-of-6{margin-left:83.33333%}.grid>.grid__col--pull-5-of-6{margin-left:-83.33333%}.grid>.grid__col--1-of-8{width:12.5%}.grid>.grid__col--push-1-of-8{margin-left:12.5%}.grid>.grid__col--pull-1-of-8{margin-left:-12.5%}.grid>.grid__col--3-of-8{width:37.5%}.grid>.grid__col--push-3-of-8{margin-left:37.5%}.grid>.grid__col--pull-3-of-8{margin-left:-37.5%}.grid>.grid__col--5-of-8{width:62.5%}.grid>.grid__col--push-5-of-8{margin-left:62.5%}.grid>.grid__col--pull-5-of-8{margin-left:-62.5%}.grid>.grid__col--7-of-8{width:87.5%}.grid>.grid__col--push-7-of-8{margin-left:87.5%}.grid>.grid__col--pull-7-of-8{margin-left:-87.5%}.grid>.grid__col--1-of-12{width:8.33333%}.grid>.grid__col--push-1-of-12{margin-left:8.33333%}.grid>.grid__col--pull-1-of-12{margin-left:-8.33333%}.grid>.grid__col--2-of-12{width:16.66667%}.grid>.grid__col--push-2-of-12{margin-left:16.66667%}.grid>.grid__col--pull-2-of-12{margin-left:-16.66667%}.grid>.grid__col--5-of-12{width:41.66667%}.grid>.grid__col--push-5-of-12{margin-left:41.66667%}.grid>.grid__col--pull-5-of-12{margin-left:-41.66667%}.grid>.grid__col--7-of-12{width:58.33333%}.grid>.grid__col--push-7-of-12{margin-left:58.33333%}.grid>.grid__col--pull-7-of-12{margin-left:-58.33333%}.grid>.grid__col--10-of-12{width:83.33333%}.grid>.grid__col--push-10-of-12{margin-left:83.33333%}.grid>.grid__col--pull-10-of-12{margin-left:-83.33333%}.grid>.grid__col--11-of-12{width:91.66667%}.grid>.grid__col--push-11-of-12{margin-left:91.66667%}.grid>.grid__col--pull-11-of-12{margin-left:-91.66667%}.grid .grid__col{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;margin-right:-.25em;min-height:1px;padding-left:20px;vertical-align:top}@media (max-width: 700px){.grid .grid__col{display:block;margin-left:0;margin-right:0;width:auto}}@media (max-width: 700px) and (min-width: 480px){.grid .grid__col[class*="grid__col--m-"]{display:inline-block;margin-right:-.24em}.grid .grid__col.grid__col--m-1-of-2,.grid .grid__col.grid__col--m-2-of-4{width:50%}.grid .grid__col.grid__col--m-1-of-3{width:33.33333%}.grid .grid__col.grid__col--m-1-of-3{width:66.66667%}.grid .grid__col.grid__col--m-1-of-4{width:25%}.grid .grid__col.grid__col--m-3-of-4{width:75%}}@media (max-width: 480px){.grid .grid__col[class*="grid__col--s-"]{display:inline-block;margin-right:-.24em}.grid .grid__col.grid__col--s-1-of-2,.grid .grid__col.grid__col--s-2-of-4{width:50%}.grid .grid__col.grid__col--s-1-of-3{width:33.33333%}.grid .grid__col.grid__col--s-1-of-3{width:66.66667%}.grid .grid__col.grid__col--s-1-of-4{width:25%}.grid .grid__col.grid__col--s-3-of-4{width:75%}}.grid .grid__col--centered{display:block;margin-left:auto;margin-right:auto}.grid .grid__col--d-first{float:left}.grid .grid__col--d-last{float:right}.grid.grid--no-gutter{margin-left:0;width:100%}.grid.grid--no-gutter>*{padding-left:0}.grid.grid--no-gutter .grid__col--span-all{margin-left:0;width:100%}.grid .grid__col--ab{vertical-align:bottom}.grid .grid__col--am{vertical-align:middle}

@charset "UTF-8";
/*-----------------------------------*\

  $VARIABLES

\*-----------------------------------*/
/*-----------------------------------*\

  $RESET

\*-----------------------------------*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative; }

p, ul, ol, table, hr, pre {
  margin-bottom: 1.4444rem; }

/*-----------------------------------*\

  $LIB

  Imports third-party styles

\*-----------------------------------*/
/*-----------------------------------*\

  $TOAST-GRID

  An insane grid.
  You'd be mad to use it.

  Usage
  =====

  Assuming default values:

  <div class="grid">
    <div class="grid__col grid__col--1-of-2">
      A half-width column.
    </div>
    <div class="grid__col grid__col--1-of-4 grid__col--pull-1-of-4">
      A quarter, pulled left by its own width. You get this, right?
    </div>
  </div>


  Customisation
  =============

  $grid-namespace and $grid-column-namespace
  adjusts the class names for the grid. With
  default values, grid wrappers have a class
  of '.grid' and columns '.grid__col'.

  $col-groups(n) adjusts column divisions.
  For example, $col-groups(12) will produce
  a 12-column grid. $col-groups(3,6,8)
  will produce a 3-, 6-, and 8-column grid.

  $gutter-width is—you guessed it—the gutter
  width. Accepts any unit.

  That's it. Have fun.

\*-----------------------------------*/
.grid {
  list-style: none;
  margin-left: -20px; }
  .grid > .grid__col--2-of-2, .grid > .grid__col--3-of-3, .grid > .grid__col--4-of-4, .grid > .grid__col--5-of-5, .grid > .grid__col--6-of-6, .grid > .grid__col--8-of-8, .grid > .grid__col--12-of-12 {
    width: 100%; }
  .grid > .grid__col--1-of-2, .grid > .grid__col--2-of-4, .grid > .grid__col--3-of-6, .grid > .grid__col--4-of-8, .grid > .grid__col--6-of-12 {
    width: 50%; }
  .grid > .grid__col--1-of-3, .grid > .grid__col--2-of-6, .grid > .grid__col--4-of-12 {
    width: 33.33333%; }
  .grid > .grid__col--2-of-3, .grid > .grid__col--4-of-6, .grid > .grid__col--8-of-12 {
    width: 66.66667%; }
  .grid > .grid__col--1-of-4, .grid > .grid__col--2-of-8, .grid > .grid__col--3-of-12 {
    width: 25%; }
  .grid > .grid__col--3-of-4, .grid > .grid__col--6-of-8, .grid > .grid__col--9-of-12 {
    width: 75%; }
  .grid > .grid__col--push-2-of-2, .grid > .grid__col--push-3-of-3, .grid > .grid__col--push-4-of-4, .grid > .grid__col--push-5-of-5, .grid > .grid__col--push-6-of-6, .grid > .grid__col--push-8-of-8, .grid > .grid__col--push-12-of-12 {
    margin-left: 100%; }
  .grid > .grid__col--push-1-of-2, .grid > .grid__col--push-2-of-4, .grid > .grid__col--push-3-of-6, .grid > .grid__col--push-4-of-8, .grid > .grid__col--push-6-of-12 {
    margin-left: 50%; }
  .grid > .grid__col--push-1-of-3, .grid > .grid__col--push-2-of-6, .grid > .grid__col--push-4-of-12 {
    margin-left: 33.33333%; }
  .grid > .grid__col--push-2-of-3, .grid > .grid__col--push-4-of-6, .grid > .grid__col--push-8-of-12 {
    margin-left: 66.66667%; }
  .grid > .grid__col--push-1-of-4, .grid > .grid__col--push-2-of-8, .grid > .grid__col--push-3-of-12 {
    margin-left: 25%; }
  .grid > .grid__col--push-3-of-4, .grid > .grid__col--push-6-of-8, .grid > .grid__col--push-9-of-12 {
    margin-left: 75%; }
  .grid > .grid__col--pull-2-of-2, .grid > .grid__col--pull-3-of-3, .grid > .grid__col--pull-4-of-4, .grid > .grid__col--pull-5-of-5, .grid > .grid__col--pull-6-of-6, .grid > .grid__col--pull-8-of-8, .grid > .grid__col--pull-12-of-12 {
    margin-left: -100%; }
  .grid > .grid__col--pull-1-of-2, .grid > .grid__col--pull-2-of-4, .grid > .grid__col--pull-3-of-6, .grid > .grid__col--pull-4-of-8, .grid > .grid__col--pull-6-of-12 {
    margin-left: -50%; }
  .grid > .grid__col--pull-1-of-3, .grid > .grid__col--pull-2-of-6, .grid > .grid__col--pull-4-of-12 {
    margin-left: -33.33333%; }
  .grid > .grid__col--pull-2-of-3, .grid > .grid__col--pull-4-of-6, .grid > .grid__col--pull-8-of-12 {
    margin-left: -66.66667%; }
  .grid > .grid__col--pull-1-of-4, .grid > .grid__col--pull-2-of-8, .grid > .grid__col--pull-3-of-12 {
    margin-left: -25%; }
  .grid > .grid__col--pull-3-of-4, .grid > .grid__col--pull-6-of-8, .grid > .grid__col--pull-9-of-12 {
    margin-left: -75%; }
  .grid > .grid__col--1-of-5 {
    width: 20%; }
  .grid > .grid__col--push-1-of-5 {
    margin-left: 20%; }
  .grid > .grid__col--pull-1-of-5 {
    margin-left: -20%; }
  .grid > .grid__col--2-of-5 {
    width: 40%; }
  .grid > .grid__col--push-2-of-5 {
    margin-left: 40%; }
  .grid > .grid__col--pull-2-of-5 {
    margin-left: -40%; }
  .grid > .grid__col--3-of-5 {
    width: 60%; }
  .grid > .grid__col--push-3-of-5 {
    margin-left: 60%; }
  .grid > .grid__col--pull-3-of-5 {
    margin-left: -60%; }
  .grid > .grid__col--4-of-5 {
    width: 80%; }
  .grid > .grid__col--push-4-of-5 {
    margin-left: 80%; }
  .grid > .grid__col--pull-4-of-5 {
    margin-left: -80%; }
  .grid > .grid__col--1-of-6 {
    width: 16.66667%; }
  .grid > .grid__col--push-1-of-6 {
    margin-left: 16.66667%; }
  .grid > .grid__col--pull-1-of-6 {
    margin-left: -16.66667%; }
  .grid > .grid__col--5-of-6 {
    width: 83.33333%; }
  .grid > .grid__col--push-5-of-6 {
    margin-left: 83.33333%; }
  .grid > .grid__col--pull-5-of-6 {
    margin-left: -83.33333%; }
  .grid > .grid__col--1-of-8 {
    width: 12.5%; }
  .grid > .grid__col--push-1-of-8 {
    margin-left: 12.5%; }
  .grid > .grid__col--pull-1-of-8 {
    margin-left: -12.5%; }
  .grid > .grid__col--3-of-8 {
    width: 37.5%; }
  .grid > .grid__col--push-3-of-8 {
    margin-left: 37.5%; }
  .grid > .grid__col--pull-3-of-8 {
    margin-left: -37.5%; }
  .grid > .grid__col--5-of-8 {
    width: 62.5%; }
  .grid > .grid__col--push-5-of-8 {
    margin-left: 62.5%; }
  .grid > .grid__col--pull-5-of-8 {
    margin-left: -62.5%; }
  .grid > .grid__col--7-of-8 {
    width: 87.5%; }
  .grid > .grid__col--push-7-of-8 {
    margin-left: 87.5%; }
  .grid > .grid__col--pull-7-of-8 {
    margin-left: -87.5%; }
  .grid > .grid__col--1-of-12 {
    width: 8.33333%; }
  .grid > .grid__col--push-1-of-12 {
    margin-left: 8.33333%; }
  .grid > .grid__col--pull-1-of-12 {
    margin-left: -8.33333%; }
  .grid > .grid__col--2-of-12 {
    width: 16.66667%; }
  .grid > .grid__col--push-2-of-12 {
    margin-left: 16.66667%; }
  .grid > .grid__col--pull-2-of-12 {
    margin-left: -16.66667%; }
  .grid > .grid__col--5-of-12 {
    width: 41.66667%; }
  .grid > .grid__col--push-5-of-12 {
    margin-left: 41.66667%; }
  .grid > .grid__col--pull-5-of-12 {
    margin-left: -41.66667%; }
  .grid > .grid__col--7-of-12 {
    width: 58.33333%; }
  .grid > .grid__col--push-7-of-12 {
    margin-left: 58.33333%; }
  .grid > .grid__col--pull-7-of-12 {
    margin-left: -58.33333%; }
  .grid > .grid__col--10-of-12 {
    width: 83.33333%; }
  .grid > .grid__col--push-10-of-12 {
    margin-left: 83.33333%; }
  .grid > .grid__col--pull-10-of-12 {
    margin-left: -83.33333%; }
  .grid > .grid__col--11-of-12 {
    width: 91.66667%; }
  .grid > .grid__col--push-11-of-12 {
    margin-left: 91.66667%; }
  .grid > .grid__col--pull-11-of-12 {
    margin-left: -91.66667%; }
  .grid .grid__col {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    margin-right: -.25em;
    min-height: 1px;
    padding-left: 20px;
    vertical-align: top; }
    @media (max-width: 700px) {
      .grid .grid__col {
        display: block;
        margin-left: 0;
        margin-right: 0;
        width: auto; } }
    @media (max-width: 700px) and (min-width: 480px) {
      .grid .grid__col[class*="grid__col--m-"] {
        display: inline-block;
        margin-right: -.24em; }
      .grid .grid__col.grid__col--m-1-of-2, .grid .grid__col.grid__col--m-2-of-4 {
        width: 50%; }
      .grid .grid__col.grid__col--m-1-of-3 {
        width: 33.33333%; }
      .grid .grid__col.grid__col--m-1-of-3 {
        width: 66.66667%; }
      .grid .grid__col.grid__col--m-1-of-4 {
        width: 25%; }
      .grid .grid__col.grid__col--m-3-of-4 {
        width: 75%; } }
    @media (max-width: 480px) {
      .grid .grid__col[class*="grid__col--s-"] {
        display: inline-block;
        margin-right: -.24em; }
      .grid .grid__col.grid__col--s-1-of-2, .grid .grid__col.grid__col--s-2-of-4 {
        width: 50%; }
      .grid .grid__col.grid__col--s-1-of-3 {
        width: 33.33333%; }
      .grid .grid__col.grid__col--s-1-of-3 {
        width: 66.66667%; }
      .grid .grid__col.grid__col--s-1-of-4 {
        width: 25%; }
      .grid .grid__col.grid__col--s-3-of-4 {
        width: 75%; } }
  .grid .grid__col--centered {
    display: block;
    margin-left: auto;
    margin-right: auto; }
  .grid .grid__col--d-first {
    float: left; }
  .grid .grid__col--d-last {
    float: right; }
  .grid.grid--no-gutter {
    margin-left: 0;
    width: 100%; }
    .grid.grid--no-gutter > * {
      padding-left: 0; }
    .grid.grid--no-gutter .grid__col--span-all {
      margin-left: 0;
      width: 100%; }
  .grid .grid__col--ab {
    vertical-align: bottom; }
  .grid .grid__col--am {
    vertical-align: middle; }

/*-----------------------------------*\

  $TYPE

\*-----------------------------------*/
h1, .alpha {
  margin-bottom: 2.8888rem;
  font-size: 1.4444rem;
  font-weight: 700;
  line-height: 1;
  orphans: 3;
  widows: 3; }
  @media (max-width: 700px) {
    h1, .alpha {
      margin-bottom: 1.4444rem;
      font-size: 1.73328rem; } }

h2, .beta {
  padding-top: 0.7222rem;
  margin-bottom: 0.7222rem;
  font-size: 1.384615385rem;
  font-weight: 400;
  line-height: .96;
  orphans: 3;
  widows: 3; }

h3, .gamma {
  padding-top: 0.7222rem;
  margin-bottom: 0.7222rem;
  line-height: 1.4444; }

code, pre {
  font: 83.333%/1.5333 "Source Code Pro", Monaco, monospace;
  background-color: #f6f7f8;
  border-radius: .25em; }

pre {
  overflow: scroll;
  padding: 1.4444rem; }
  pre i {
    font-style: normal;
    color: #c26262; }
  pre b {
    color: #b5bd68; }
  pre cite {
    color: #999;
  }

.promo {
  text-align: center; }

a {
  text-decoration: underline;
  color: inherit; }
  a:hover {
    color: #33a3ff; }

/*-----------------------------------*\

  $BUTTONS

\*-----------------------------------*/
.butt {
  display: inline-block;
  margin: 0.7222rem;
  padding: 0.7222rem 1.4444rem;
  border-radius: .25em;
  box-shadow: inset 0 0 0 1px #33a3ff;
  text-decoration: none;
  color: #33a3ff; }
  .butt:hover {
    color: #33a3ff; }

.butt--primary {
  background-color: #33a3ff;
  color: #fff; }
  .butt--primary:hover {
    color: #fff; }

/*-----------------------------------*\

  $MAIN

\*-----------------------------------*/
html {
  font: 112.5%/1.444444444 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: white;
  color: #47525d; }
  @media (max-width: 700px) {
    html {
      font-size: 93.75%; } }

/*-----------------------------------*\

  $PAGE

\*-----------------------------------*/
.site__header {
  padding-bottom: 1.4444rem;
  margin-bottom: 1.4444rem;
  box-shadow: inset 0 -2px #30261b; }

.site__title {
  margin-bottom: 0; }

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.4444rem; }

.grid--demo [class*="-of-2"] {
  height: 1.4444rem;
  margin-bottom: 1.4444rem;
  background-clip: content-box;
  background-color: rgba(123, 137, 148, 0.06); }

.grid--demo [class*="-of-3"] {
  height: 1.4444rem;
  margin-bottom: 1.4444rem;
  background-clip: content-box;
  background-color: rgba(123, 137, 148, 0.09); }

.grid--demo [class*="-of-4"] {
  height: 1.4444rem;
  margin-bottom: 1.4444rem;
  background-clip: content-box;
  background-color: rgba(123, 137, 148, 0.12); }

.grid--demo [class*="-of-5"] {
  height: 1.4444rem;
  margin-bottom: 1.4444rem;
  background-clip: content-box;
  background-color: rgba(123, 137, 148, 0.15); }

.grid--demo [class*="-of-6"] {
  height: 1.4444rem;
  margin-bottom: 1.4444rem;
  background-clip: content-box;
  background-color: rgba(123, 137, 148, 0.18); }

.grid--demo [class*="-of-8"] {
  height: 1.4444rem;
  margin-bottom: 1.4444rem;
  background-clip: content-box;
  background-color: rgba(123, 137, 148, 0.24); }

.grid--demo [class*="-of-12"] {
  height: 1.4444rem;
  margin-bottom: 1.4444rem;
  background-clip: content-box;
  background-color: rgba(123, 137, 148, 0.36); }

.grid--demo * {
  white-space: nowrap; }
  .grid--demo *:after {
    content: attr(class);
    bottom: 100%;
    left: 50%;
    padding: 0.3611rem 0.7222rem;
    position: absolute;
    -webkit-transform: translateX(-50%) rotate(3deg);
    width: auto;
    z-index: 2;
    font: 83.333%/1.5333 "Source Code Pro", Monaco, monospace;
    background-color: rgba(71, 82, 93, 0.8);
    border-radius: .25em;
    color: #fff;
    opacity: 0;
    -webkit-transition: 0.3s cubic-bezier(0.905, -0.25, 0.52, 1.41);
    pointer-events: none; }
  .grid--demo *:hover:after {
    margin-bottom: 0.7222rem;
    opacity: 1;
    -webkit-transform: translateX(-50%); }
  .grid--demo *:before {
    content: '';
    bottom: 100%;
    left: 50%;
    margin-bottom: -1.4444rem;
    position: absolute;
    -webkit-transform: translateX(-50%) rotate(3deg);
    z-index: 2;
    border: 0.7222rem solid transparent;
    border-top-color: rgba(71, 82, 93, 0.8);
    opacity: 0;
    -webkit-transition: 0.3s cubic-bezier(0.905, -0.25, 0.52, 1.41);
    pointer-events: none; }
  .grid--demo *:hover:before {
    margin-bottom: -0.7222rem;
    opacity: 1;
    -webkit-transform: translateX(-50%); }
@media (max-width: 700px) {
  .grid--demo {
    display: none; } }

/*-----------------------------------*\

  $FOOTER

\*-----------------------------------*/
.site__footer {
  background-color: #47525d;
  background-image: linear-gradient(rgba(200, 255, 255, 0), rgba(200, 255, 255, 0.1));
  color: rgba(236, 237, 237, 0.8); }
  .site__footer a:hover {
    color: #33a3ff; }
  .site__footer :last-child {
    margin-bottom: 0; }

.test {
  font: 83.333%/1.5333;
  background-color: #f6f7f8;
  border-radius: .25em;
  padding: 1.4444rem; }

.test.supported-browser {
  background-color: #8FDD9C;
}
.test.unsupported-browser {
  background-color: #DD242B;
  color: black;
}