zebra-scss/dist/css/zebra.css

A customizable CSS grid system based on the BEM methodology

/* Import the Zebra partial */
/*******************/
/* IMPORT SETTINGS */
/*******************/
/******************/
/* ZEBRA NOTES */
/******************/
/* NOTES END */
/***********************/
/* RESPONSIVE SETTINGS */
/***********************/
/* RESPONSIVE SETTINGS END */
/**************************/
/* BROWSER RESET SETTINGS */
/**************************/
/* BROWSER RESET SETTINGS END */
/*******************/
/* HELPER SETTINGS */
/*******************/
/* HELPER SETTINGS END */
/*******************/
/* HIDDEN SETTINGS */
/*******************/
/* HIDDEN SETTINGS END */
/*******************/
/* COLUMN SETTINGS */
/*******************/
/* COLUMN SETTINGS END */
/************************/
/* POSITIONING SETTINGS */
/************************/
/* POSITIONING SETTINGS END */
/******************************/
/* BACKGROUND EXTEND SETTINGS */
/******************************/
/* BACKGROUND SETTINGS END */
/********************/
/* SPACING SETTINGS */
/********************/
/* SPACING SETTINGS END */
/*****************/
/* GRID SETTINGS */
/*****************/
/* GRID SETTINGS END */
/*******************/
/* GUTTER SETTINGS */
/*******************/
/* GUTTER SETTINGS END */
/******************/
/* DEBUG SETTINGS */
/******************/
/* DEBUG SETTINGS END */
/************************/
/* ZEBRA SETTINGS CHECK */
/************************/
/* ZEBRA SETTINGS CHECK END */
/***************/
/* ZEBRA DEBUG */
/***************/
/* ZEBRA DEBUG END */
/* IMPORT SETTINGS END */
/*************************/
/* RESPONSIVE PROPERTIES */
/*************************/
/* RESPONSIVE PROPERTIES END */
/*****************/
/* BROWSER RESET */
/*****************/
body {
  margin: 0; }

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

html {
  box-sizing: border-box; }

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

/* BROWSER RESET END */
/******************/
/* HELPER CLASSES */
/******************/
.site-wrapper {
  display: block;
  max-width: 1280px;
  margin: 0 auto; }

.clearfix:after {
  content: "";
  display: block;
  clear: both; }

/* HELPER CLASSES END */
/**********************/
/* MEDIA QUERY MIXINS */
/**********************/
/* MEDIA QUERIES END*/
/*********************************/
/* ROWS AND ROW MODIFIER CLASSES */
/*********************************/
.row {
  margin-right: auto;
  margin-left: auto;
  font-size: 0; }
  .row--contained {
    max-width: 1280px; }
  .row--full {
    width: 100%; }
  .row--flex {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: row;
    flex-direction: row; }
    .row--flex .col--stretch {
      -ms-flex: 1 1 auto;
      flex: 1 1 auto; }
  .row--justify-l {
    -ms-flex-pack: start;
    justify-content: flex-start; }
  .row--justify-c {
    -ms-flex-pack: center;
    justify-content: center; }
  .row--justify-r {
    -ms-flex-pack: end;
    justify-content: flex-end; }
  .row--align-l {
    -ms-flex-align: start;
    align-items: flex-start; }
  .row--align-c {
    -ms-flex-align: center;
    align-items: center; }
  .row--align-r {
    -ms-flex-align: end;
    align-items: flex-end; }

/* ROWS AND ROW MODIFIERS END */
/**************************************/
/* COLUMN AND COLUMN MODIFIER CLASSES */
/**************************************/
[class*='col--1'] {
  display: inline-block;
  vertical-align: top;
  font-size: 18px; }

[class*='col--2'] {
  display: inline-block;
  vertical-align: top;
  font-size: 18px; }

[class*='col--3'] {
  display: inline-block;
  vertical-align: top;
  font-size: 18px; }

[class*='col--4'] {
  display: inline-block;
  vertical-align: top;
  font-size: 18px; }

[class*='col--5'] {
  display: inline-block;
  vertical-align: top;
  font-size: 18px; }

[class*='col--6'] {
  display: inline-block;
  vertical-align: top;
  font-size: 18px; }

[class*='col--7'] {
  display: inline-block;
  vertical-align: top;
  font-size: 18px; }

[class*='col--8'] {
  display: inline-block;
  vertical-align: top;
  font-size: 18px; }

[class*='col--9'] {
  display: inline-block;
  vertical-align: top;
  font-size: 18px; }

.col--1-5 {
  width: 20%; }

.col--2-5 {
  width: 40%; }

.col--3-5 {
  width: 60%; }

.col--4-5 {
  width: 80%; }

.col--5-5 {
  width: 100%; }

.col--1-8 {
  width: 12.5%; }

.col--2-8 {
  width: 25%; }

.col--3-8 {
  width: 37.5%; }

.col--4-8 {
  width: 50%; }

.col--5-8 {
  width: 62.5%; }

.col--6-8 {
  width: 75%; }

.col--7-8 {
  width: 87.5%; }

.col--8-8 {
  width: 100%; }

.col--1-12 {
  width: 8.33333%; }

.col--2-12 {
  width: 16.66667%; }

.col--3-12 {
  width: 25%; }

.col--4-12 {
  width: 33.33333%; }

.col--5-12 {
  width: 41.66667%; }

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

.col--7-12 {
  width: 58.33333%; }

.col--8-12 {
  width: 66.66667%; }

.col--9-12 {
  width: 75%; }

.col--10-12 {
  width: 83.33333%; }

.col--11-12 {
  width: 91.66667%; }

.col--12-12 {
  width: 100%; }

.col--auto {
  display: inline-block;
  vertical-align: top;
  width: auto; }

.col--auto, .col--stretch {
  font-size: 18px; }

.col--left {
  float: left; }

.col--right {
  float: right; }

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

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

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

.col--flex-col, .col--flex-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .col--flex-col > *, .col--flex-row > * {
    -ms-flex-positive: 1;
    flex-grow: 1; }

.col--flex-col {
  -ms-flex-direction: column;
  flex-direction: column; }
  .col--flex-col > .row {
    margin-right: 0;
    margin-left: 0; }

.col--flex-row {
  -ms-flex-direction: row;
  flex-direction: row; }

@media all and (min-width: 435px) {
  .col__xs--1-5 {
    width: 20%; }
  .col__xs--2-5 {
    width: 40%; }
  .col__xs--3-5 {
    width: 60%; }
  .col__xs--4-5 {
    width: 80%; }
  .col__xs--5-5 {
    width: 100%; }
  .col__xs--1-8 {
    width: 12.5%; }
  .col__xs--2-8 {
    width: 25%; }
  .col__xs--3-8 {
    width: 37.5%; }
  .col__xs--4-8 {
    width: 50%; }
  .col__xs--5-8 {
    width: 62.5%; }
  .col__xs--6-8 {
    width: 75%; }
  .col__xs--7-8 {
    width: 87.5%; }
  .col__xs--8-8 {
    width: 100%; }
  .col__xs--1-12 {
    width: 8.33333%; }
  .col__xs--2-12 {
    width: 16.66667%; }
  .col__xs--3-12 {
    width: 25%; }
  .col__xs--4-12 {
    width: 33.33333%; }
  .col__xs--5-12 {
    width: 41.66667%; }
  .col__xs--6-12 {
    width: 50%; }
  .col__xs--7-12 {
    width: 58.33333%; }
  .col__xs--8-12 {
    width: 66.66667%; }
  .col__xs--9-12 {
    width: 75%; }
  .col__xs--10-12 {
    width: 83.33333%; }
  .col__xs--11-12 {
    width: 91.66667%; }
  .col__xs--12-12 {
    width: 100%; } }

@media all and (min-width: 500px) {
  .col__s--1-5 {
    width: 20%; }
  .col__s--2-5 {
    width: 40%; }
  .col__s--3-5 {
    width: 60%; }
  .col__s--4-5 {
    width: 80%; }
  .col__s--5-5 {
    width: 100%; }
  .col__s--1-8 {
    width: 12.5%; }
  .col__s--2-8 {
    width: 25%; }
  .col__s--3-8 {
    width: 37.5%; }
  .col__s--4-8 {
    width: 50%; }
  .col__s--5-8 {
    width: 62.5%; }
  .col__s--6-8 {
    width: 75%; }
  .col__s--7-8 {
    width: 87.5%; }
  .col__s--8-8 {
    width: 100%; }
  .col__s--1-12 {
    width: 8.33333%; }
  .col__s--2-12 {
    width: 16.66667%; }
  .col__s--3-12 {
    width: 25%; }
  .col__s--4-12 {
    width: 33.33333%; }
  .col__s--5-12 {
    width: 41.66667%; }
  .col__s--6-12 {
    width: 50%; }
  .col__s--7-12 {
    width: 58.33333%; }
  .col__s--8-12 {
    width: 66.66667%; }
  .col__s--9-12 {
    width: 75%; }
  .col__s--10-12 {
    width: 83.33333%; }
  .col__s--11-12 {
    width: 91.66667%; }
  .col__s--12-12 {
    width: 100%; } }

@media all and (min-width: 599px) {
  .col__m--1-5 {
    width: 20%; }
  .col__m--2-5 {
    width: 40%; }
  .col__m--3-5 {
    width: 60%; }
  .col__m--4-5 {
    width: 80%; }
  .col__m--5-5 {
    width: 100%; }
  .col__m--1-8 {
    width: 12.5%; }
  .col__m--2-8 {
    width: 25%; }
  .col__m--3-8 {
    width: 37.5%; }
  .col__m--4-8 {
    width: 50%; }
  .col__m--5-8 {
    width: 62.5%; }
  .col__m--6-8 {
    width: 75%; }
  .col__m--7-8 {
    width: 87.5%; }
  .col__m--8-8 {
    width: 100%; }
  .col__m--1-12 {
    width: 8.33333%; }
  .col__m--2-12 {
    width: 16.66667%; }
  .col__m--3-12 {
    width: 25%; }
  .col__m--4-12 {
    width: 33.33333%; }
  .col__m--5-12 {
    width: 41.66667%; }
  .col__m--6-12 {
    width: 50%; }
  .col__m--7-12 {
    width: 58.33333%; }
  .col__m--8-12 {
    width: 66.66667%; }
  .col__m--9-12 {
    width: 75%; }
  .col__m--10-12 {
    width: 83.33333%; }
  .col__m--11-12 {
    width: 91.66667%; }
  .col__m--12-12 {
    width: 100%; } }

@media all and (min-width: 768px) {
  .col__l--1-5 {
    width: 20%; }
  .col__l--2-5 {
    width: 40%; }
  .col__l--3-5 {
    width: 60%; }
  .col__l--4-5 {
    width: 80%; }
  .col__l--5-5 {
    width: 100%; }
  .col__l--1-8 {
    width: 12.5%; }
  .col__l--2-8 {
    width: 25%; }
  .col__l--3-8 {
    width: 37.5%; }
  .col__l--4-8 {
    width: 50%; }
  .col__l--5-8 {
    width: 62.5%; }
  .col__l--6-8 {
    width: 75%; }
  .col__l--7-8 {
    width: 87.5%; }
  .col__l--8-8 {
    width: 100%; }
  .col__l--1-12 {
    width: 8.33333%; }
  .col__l--2-12 {
    width: 16.66667%; }
  .col__l--3-12 {
    width: 25%; }
  .col__l--4-12 {
    width: 33.33333%; }
  .col__l--5-12 {
    width: 41.66667%; }
  .col__l--6-12 {
    width: 50%; }
  .col__l--7-12 {
    width: 58.33333%; }
  .col__l--8-12 {
    width: 66.66667%; }
  .col__l--9-12 {
    width: 75%; }
  .col__l--10-12 {
    width: 83.33333%; }
  .col__l--11-12 {
    width: 91.66667%; }
  .col__l--12-12 {
    width: 100%; } }

@media all and (min-width: 1024px) {
  .col__xl--1-5 {
    width: 20%; }
  .col__xl--2-5 {
    width: 40%; }
  .col__xl--3-5 {
    width: 60%; }
  .col__xl--4-5 {
    width: 80%; }
  .col__xl--5-5 {
    width: 100%; }
  .col__xl--1-8 {
    width: 12.5%; }
  .col__xl--2-8 {
    width: 25%; }
  .col__xl--3-8 {
    width: 37.5%; }
  .col__xl--4-8 {
    width: 50%; }
  .col__xl--5-8 {
    width: 62.5%; }
  .col__xl--6-8 {
    width: 75%; }
  .col__xl--7-8 {
    width: 87.5%; }
  .col__xl--8-8 {
    width: 100%; }
  .col__xl--1-12 {
    width: 8.33333%; }
  .col__xl--2-12 {
    width: 16.66667%; }
  .col__xl--3-12 {
    width: 25%; }
  .col__xl--4-12 {
    width: 33.33333%; }
  .col__xl--5-12 {
    width: 41.66667%; }
  .col__xl--6-12 {
    width: 50%; }
  .col__xl--7-12 {
    width: 58.33333%; }
  .col__xl--8-12 {
    width: 66.66667%; }
  .col__xl--9-12 {
    width: 75%; }
  .col__xl--10-12 {
    width: 83.33333%; }
  .col__xl--11-12 {
    width: 91.66667%; }
  .col__xl--12-12 {
    width: 100%; } }

/* COLUMN AND COLUMN MODIFIERS END */
/*****************************/
/* BACKGROUND EXTEND CLASSES */
/*****************************/
.bg-ext {
  position: relative; }
  .bg-ext:before, .bg-ext:after {
    content: "";
    position: absolute;
    top: 0;
    width: 1280px;
    height: 100%;
    background: inherit; }
  .bg-ext:before {
    right: 100%; }
  .bg-ext:after {
    left: 100%; }
  .bg-ext--l, .bg-ext--r {
    position: relative; }
  .bg-ext--l {
    background-position: left top; }
    .bg-ext--l:before {
      content: "";
      position: absolute;
      top: 0;
      width: 1280px;
      height: 100%;
      background: inherit;
      right: 100%;
      background-position: right top; }
  .bg-ext--r {
    background-position: right top; }
    .bg-ext--r:after {
      content: "";
      position: absolute;
      top: 0;
      width: 1280px;
      height: 100%;
      background: inherit;
      left: 100%;
      background-position: left top; }
  .bg-ext .bg-ext {
    z-index: 1; }
    .bg-ext .bg-ext--l, .bg-ext .bg-ext--r {
      z-index: 1; }

@media all and (min-width: 435px) {
  .bg-ext__xs {
    position: relative; }
    .bg-ext__xs:before, .bg-ext__xs:after {
      content: "";
      position: absolute;
      top: 0;
      width: 1280px;
      height: 100%;
      background: inherit; }
    .bg-ext__xs:before {
      right: 100%; }
    .bg-ext__xs:after {
      left: 100%; }
    .bg-ext__xs--l, .bg-ext__xs--r {
      position: relative; }
    .bg-ext__xs--l {
      position: relative;
      background-position: left top; }
      .bg-ext__xs--l:before {
        content: "";
        position: absolute;
        top: 0;
        width: 1280px;
        height: 100%;
        background: inherit;
        right: 100%;
        background-position: right top; }
    .bg-ext__xs--r {
      position: relative;
      background-position: right top; }
      .bg-ext__xs--r:after {
        content: "";
        position: absolute;
        top: 0;
        width: 1280px;
        height: 100%;
        background: inherit;
        left: 100%;
        background-position: left top; }
    .bg-ext__xs--none:before, .bg-ext__xs--none:after {
      display: none; } }

@media all and (min-width: 500px) {
  .bg-ext__s {
    position: relative; }
    .bg-ext__s:before, .bg-ext__s:after {
      content: "";
      position: absolute;
      top: 0;
      width: 1280px;
      height: 100%;
      background: inherit; }
    .bg-ext__s:before {
      right: 100%; }
    .bg-ext__s:after {
      left: 100%; }
    .bg-ext__s--l, .bg-ext__s--r {
      position: relative; }
    .bg-ext__s--l {
      position: relative;
      background-position: left top; }
      .bg-ext__s--l:before {
        content: "";
        position: absolute;
        top: 0;
        width: 1280px;
        height: 100%;
        background: inherit;
        right: 100%;
        background-position: right top; }
    .bg-ext__s--r {
      position: relative;
      background-position: right top; }
      .bg-ext__s--r:after {
        content: "";
        position: absolute;
        top: 0;
        width: 1280px;
        height: 100%;
        background: inherit;
        left: 100%;
        background-position: left top; }
    .bg-ext__s--none:before, .bg-ext__s--none:after {
      display: none; } }

@media all and (min-width: 599px) {
  .bg-ext__m {
    position: relative; }
    .bg-ext__m:before, .bg-ext__m:after {
      content: "";
      position: absolute;
      top: 0;
      width: 1280px;
      height: 100%;
      background: inherit; }
    .bg-ext__m:before {
      right: 100%; }
    .bg-ext__m:after {
      left: 100%; }
    .bg-ext__m--l, .bg-ext__m--r {
      position: relative; }
    .bg-ext__m--l {
      position: relative;
      background-position: left top; }
      .bg-ext__m--l:before {
        content: "";
        position: absolute;
        top: 0;
        width: 1280px;
        height: 100%;
        background: inherit;
        right: 100%;
        background-position: right top; }
    .bg-ext__m--r {
      position: relative;
      background-position: right top; }
      .bg-ext__m--r:after {
        content: "";
        position: absolute;
        top: 0;
        width: 1280px;
        height: 100%;
        background: inherit;
        left: 100%;
        background-position: left top; }
    .bg-ext__m--none:before, .bg-ext__m--none:after {
      display: none; } }

@media all and (min-width: 768px) {
  .bg-ext__l {
    position: relative; }
    .bg-ext__l:before, .bg-ext__l:after {
      content: "";
      position: absolute;
      top: 0;
      width: 1280px;
      height: 100%;
      background: inherit; }
    .bg-ext__l:before {
      right: 100%; }
    .bg-ext__l:after {
      left: 100%; }
    .bg-ext__l--l, .bg-ext__l--r {
      position: relative; }
    .bg-ext__l--l {
      position: relative;
      background-position: left top; }
      .bg-ext__l--l:before {
        content: "";
        position: absolute;
        top: 0;
        width: 1280px;
        height: 100%;
        background: inherit;
        right: 100%;
        background-position: right top; }
    .bg-ext__l--r {
      position: relative;
      background-position: right top; }
      .bg-ext__l--r:after {
        content: "";
        position: absolute;
        top: 0;
        width: 1280px;
        height: 100%;
        background: inherit;
        left: 100%;
        background-position: left top; }
    .bg-ext__l--none:before, .bg-ext__l--none:after {
      display: none; } }

@media all and (min-width: 1024px) {
  .bg-ext__xl {
    position: relative; }
    .bg-ext__xl:before, .bg-ext__xl:after {
      content: "";
      position: absolute;
      top: 0;
      width: 1280px;
      height: 100%;
      background: inherit; }
    .bg-ext__xl:before {
      right: 100%; }
    .bg-ext__xl:after {
      left: 100%; }
    .bg-ext__xl--l, .bg-ext__xl--r {
      position: relative; }
    .bg-ext__xl--l {
      position: relative;
      background-position: left top; }
      .bg-ext__xl--l:before {
        content: "";
        position: absolute;
        top: 0;
        width: 1280px;
        height: 100%;
        background: inherit;
        right: 100%;
        background-position: right top; }
    .bg-ext__xl--r {
      position: relative;
      background-position: right top; }
      .bg-ext__xl--r:after {
        content: "";
        position: absolute;
        top: 0;
        width: 1280px;
        height: 100%;
        background: inherit;
        left: 100%;
        background-position: left top; }
    .bg-ext__xl--none:before, .bg-ext__xl--none:after {
      display: none; } }

/* BACKGROUND EXTENDS END */
/****************************/
/* PADDING & MARGIN CLASSES */
/****************************/
.p--10 {
  padding: 10px; }

.p--t-10 {
  padding-top: 10px; }

.p--r-10 {
  padding-right: 10px; }

.p--b-10 {
  padding-bottom: 10px; }

.p--l-10 {
  padding-left: 10px; }

.p--x-10 {
  padding-left: 10px;
  padding-right: 10px; }

.p--y-10 {
  padding-top: 10px;
  padding-bottom: 10px; }

.p--25 {
  padding: 25px; }

.p--t-25 {
  padding-top: 25px; }

.p--r-25 {
  padding-right: 25px; }

.p--b-25 {
  padding-bottom: 25px; }

.p--l-25 {
  padding-left: 25px; }

.p--x-25 {
  padding-left: 25px;
  padding-right: 25px; }

.p--y-25 {
  padding-top: 25px;
  padding-bottom: 25px; }

@media all and (min-width: 435px) {
  .p__xs--10 {
    padding: 10px; }
  .p__xs--t-10 {
    padding-top: 10px; }
  .p__xs--r-10 {
    padding-right: 10px; }
  .p__xs--b-10 {
    padding-bottom: 10px; }
  .p__xs--l-10 {
    padding-left: 10px; }
  .p__xs--x-10 {
    padding-left: 10px;
    padding-right: 10px; }
  .p__xs--y-10 {
    padding-top: 10px;
    padding-bottom: 10px; }
  .p__xs--25 {
    padding: 25px; }
  .p__xs--t-25 {
    padding-top: 25px; }
  .p__xs--r-25 {
    padding-right: 25px; }
  .p__xs--b-25 {
    padding-bottom: 25px; }
  .p__xs--l-25 {
    padding-left: 25px; }
  .p__xs--x-25 {
    padding-left: 25px;
    padding-right: 25px; }
  .p__xs--y-25 {
    padding-top: 25px;
    padding-bottom: 25px; } }

@media all and (min-width: 500px) {
  .p__s--10 {
    padding: 10px; }
  .p__s--t-10 {
    padding-top: 10px; }
  .p__s--r-10 {
    padding-right: 10px; }
  .p__s--b-10 {
    padding-bottom: 10px; }
  .p__s--l-10 {
    padding-left: 10px; }
  .p__s--x-10 {
    padding-left: 10px;
    padding-right: 10px; }
  .p__s--y-10 {
    padding-top: 10px;
    padding-bottom: 10px; }
  .p__s--25 {
    padding: 25px; }
  .p__s--t-25 {
    padding-top: 25px; }
  .p__s--r-25 {
    padding-right: 25px; }
  .p__s--b-25 {
    padding-bottom: 25px; }
  .p__s--l-25 {
    padding-left: 25px; }
  .p__s--x-25 {
    padding-left: 25px;
    padding-right: 25px; }
  .p__s--y-25 {
    padding-top: 25px;
    padding-bottom: 25px; } }

@media all and (min-width: 599px) {
  .p__m--10 {
    padding: 10px; }
  .p__m--t-10 {
    padding-top: 10px; }
  .p__m--r-10 {
    padding-right: 10px; }
  .p__m--b-10 {
    padding-bottom: 10px; }
  .p__m--l-10 {
    padding-left: 10px; }
  .p__m--x-10 {
    padding-left: 10px;
    padding-right: 10px; }
  .p__m--y-10 {
    padding-top: 10px;
    padding-bottom: 10px; }
  .p__m--25 {
    padding: 25px; }
  .p__m--t-25 {
    padding-top: 25px; }
  .p__m--r-25 {
    padding-right: 25px; }
  .p__m--b-25 {
    padding-bottom: 25px; }
  .p__m--l-25 {
    padding-left: 25px; }
  .p__m--x-25 {
    padding-left: 25px;
    padding-right: 25px; }
  .p__m--y-25 {
    padding-top: 25px;
    padding-bottom: 25px; } }

@media all and (min-width: 768px) {
  .p__l--10 {
    padding: 10px; }
  .p__l--t-10 {
    padding-top: 10px; }
  .p__l--r-10 {
    padding-right: 10px; }
  .p__l--b-10 {
    padding-bottom: 10px; }
  .p__l--l-10 {
    padding-left: 10px; }
  .p__l--x-10 {
    padding-left: 10px;
    padding-right: 10px; }
  .p__l--y-10 {
    padding-top: 10px;
    padding-bottom: 10px; }
  .p__l--25 {
    padding: 25px; }
  .p__l--t-25 {
    padding-top: 25px; }
  .p__l--r-25 {
    padding-right: 25px; }
  .p__l--b-25 {
    padding-bottom: 25px; }
  .p__l--l-25 {
    padding-left: 25px; }
  .p__l--x-25 {
    padding-left: 25px;
    padding-right: 25px; }
  .p__l--y-25 {
    padding-top: 25px;
    padding-bottom: 25px; } }

@media all and (min-width: 1024px) {
  .p__xl--10 {
    padding: 10px; }
  .p__xl--t-10 {
    padding-top: 10px; }
  .p__xl--r-10 {
    padding-right: 10px; }
  .p__xl--b-10 {
    padding-bottom: 10px; }
  .p__xl--l-10 {
    padding-left: 10px; }
  .p__xl--x-10 {
    padding-left: 10px;
    padding-right: 10px; }
  .p__xl--y-10 {
    padding-top: 10px;
    padding-bottom: 10px; }
  .p__xl--25 {
    padding: 25px; }
  .p__xl--t-25 {
    padding-top: 25px; }
  .p__xl--r-25 {
    padding-right: 25px; }
  .p__xl--b-25 {
    padding-bottom: 25px; }
  .p__xl--l-25 {
    padding-left: 25px; }
  .p__xl--x-25 {
    padding-left: 25px;
    padding-right: 25px; }
  .p__xl--y-25 {
    padding-top: 25px;
    padding-bottom: 25px; } }

.m--10 {
  margin: 10px; }

.m--t-10 {
  margin-top: 10px; }

.m--r-10 {
  margin-right: 10px; }

.m--b-10 {
  margin-bottom: 10px; }

.m--l-10 {
  margin-left: 10px; }

.m--x-10 {
  margin-left: 10px;
  margin-right: 10px; }

.m--y-10 {
  margin-top: 10px;
  margin-bottom: 10px; }

.m--25 {
  margin: 25px; }

.m--t-25 {
  margin-top: 25px; }

.m--r-25 {
  margin-right: 25px; }

.m--b-25 {
  margin-bottom: 25px; }

.m--l-25 {
  margin-left: 25px; }

.m--x-25 {
  margin-left: 25px;
  margin-right: 25px; }

.m--y-25 {
  margin-top: 25px;
  margin-bottom: 25px; }

@media all and (min-width: 435px) {
  .m__xs--10 {
    margin: 10px; }
  .m__xs--t-10 {
    margin-top: 10px; }
  .m__xs--r-10 {
    margin-right: 10px; }
  .m__xs--b-10 {
    margin-bottom: 10px; }
  .m__xs--l-10 {
    margin-left: 10px; }
  .m__xs--x-10 {
    margin-left: 10px;
    margin-right: 10px; }
  .m__xs--y-10 {
    margin-top: 10px;
    margin-bottom: 10px; }
  .m__xs--25 {
    margin: 25px; }
  .m__xs--t-25 {
    margin-top: 25px; }
  .m__xs--r-25 {
    margin-right: 25px; }
  .m__xs--b-25 {
    margin-bottom: 25px; }
  .m__xs--l-25 {
    margin-left: 25px; }
  .m__xs--x-25 {
    margin-left: 25px;
    margin-right: 25px; }
  .m__xs--y-25 {
    margin-top: 25px;
    margin-bottom: 25px; } }

@media all and (min-width: 500px) {
  .m__s--10 {
    margin: 10px; }
  .m__s--t-10 {
    margin-top: 10px; }
  .m__s--r-10 {
    margin-right: 10px; }
  .m__s--b-10 {
    margin-bottom: 10px; }
  .m__s--l-10 {
    margin-left: 10px; }
  .m__s--x-10 {
    margin-left: 10px;
    margin-right: 10px; }
  .m__s--y-10 {
    margin-top: 10px;
    margin-bottom: 10px; }
  .m__s--25 {
    margin: 25px; }
  .m__s--t-25 {
    margin-top: 25px; }
  .m__s--r-25 {
    margin-right: 25px; }
  .m__s--b-25 {
    margin-bottom: 25px; }
  .m__s--l-25 {
    margin-left: 25px; }
  .m__s--x-25 {
    margin-left: 25px;
    margin-right: 25px; }
  .m__s--y-25 {
    margin-top: 25px;
    margin-bottom: 25px; } }

@media all and (min-width: 599px) {
  .m__m--10 {
    margin: 10px; }
  .m__m--t-10 {
    margin-top: 10px; }
  .m__m--r-10 {
    margin-right: 10px; }
  .m__m--b-10 {
    margin-bottom: 10px; }
  .m__m--l-10 {
    margin-left: 10px; }
  .m__m--x-10 {
    margin-left: 10px;
    margin-right: 10px; }
  .m__m--y-10 {
    margin-top: 10px;
    margin-bottom: 10px; }
  .m__m--25 {
    margin: 25px; }
  .m__m--t-25 {
    margin-top: 25px; }
  .m__m--r-25 {
    margin-right: 25px; }
  .m__m--b-25 {
    margin-bottom: 25px; }
  .m__m--l-25 {
    margin-left: 25px; }
  .m__m--x-25 {
    margin-left: 25px;
    margin-right: 25px; }
  .m__m--y-25 {
    margin-top: 25px;
    margin-bottom: 25px; } }

@media all and (min-width: 768px) {
  .m__l--10 {
    margin: 10px; }
  .m__l--t-10 {
    margin-top: 10px; }
  .m__l--r-10 {
    margin-right: 10px; }
  .m__l--b-10 {
    margin-bottom: 10px; }
  .m__l--l-10 {
    margin-left: 10px; }
  .m__l--x-10 {
    margin-left: 10px;
    margin-right: 10px; }
  .m__l--y-10 {
    margin-top: 10px;
    margin-bottom: 10px; }
  .m__l--25 {
    margin: 25px; }
  .m__l--t-25 {
    margin-top: 25px; }
  .m__l--r-25 {
    margin-right: 25px; }
  .m__l--b-25 {
    margin-bottom: 25px; }
  .m__l--l-25 {
    margin-left: 25px; }
  .m__l--x-25 {
    margin-left: 25px;
    margin-right: 25px; }
  .m__l--y-25 {
    margin-top: 25px;
    margin-bottom: 25px; } }

@media all and (min-width: 1024px) {
  .m__xl--10 {
    margin: 10px; }
  .m__xl--t-10 {
    margin-top: 10px; }
  .m__xl--r-10 {
    margin-right: 10px; }
  .m__xl--b-10 {
    margin-bottom: 10px; }
  .m__xl--l-10 {
    margin-left: 10px; }
  .m__xl--x-10 {
    margin-left: 10px;
    margin-right: 10px; }
  .m__xl--y-10 {
    margin-top: 10px;
    margin-bottom: 10px; }
  .m__xl--25 {
    margin: 25px; }
  .m__xl--t-25 {
    margin-top: 25px; }
  .m__xl--r-25 {
    margin-right: 25px; }
  .m__xl--b-25 {
    margin-bottom: 25px; }
  .m__xl--l-25 {
    margin-left: 25px; }
  .m__xl--x-25 {
    margin-left: 25px;
    margin-right: 25px; }
  .m__xl--y-25 {
    margin-top: 25px;
    margin-bottom: 25px; } }

/* PADDING & MARGIN CLASSES END */
/****************/
/* GRID CLASSES */
/****************/
[class*="grid--"] > * {
  display: inline-block;
  vertical-align: top; }

.grid--1 {
  font-size: 0; }
  .grid--1 > * {
    width: 100%;
    font-size: 18px; }

.grid-dynamic--1 .grid {
  font-size: 0; }
  .grid-dynamic--1 .grid > * {
    width: 100%;
    font-size: 18px; }

.grid--2 {
  font-size: 0; }
  .grid--2 > * {
    width: 50%;
    font-size: 18px; }

.grid-dynamic--2 .grid {
  font-size: 0; }
  .grid-dynamic--2 .grid > * {
    width: 50%;
    font-size: 18px; }

.grid--3 {
  font-size: 0; }
  .grid--3 > * {
    width: 33.33333%;
    font-size: 18px; }

.grid-dynamic--3 .grid {
  font-size: 0; }
  .grid-dynamic--3 .grid > * {
    width: 33.33333%;
    font-size: 18px; }

.grid--4 {
  font-size: 0; }
  .grid--4 > * {
    width: 25%;
    font-size: 18px; }

.grid-dynamic--4 .grid {
  font-size: 0; }
  .grid-dynamic--4 .grid > * {
    width: 25%;
    font-size: 18px; }

.grid--flex {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

@media all and (min-width: 435px) {
  .grid__xs--1 > * {
    width: 100%; }
  .grid-dynamic__xs--1 .grid > * {
    width: 100%; }
  .grid__xs--2 > * {
    width: 50%; }
  .grid-dynamic__xs--2 .grid > * {
    width: 50%; }
  .grid__xs--3 > * {
    width: 33.33333%; }
  .grid-dynamic__xs--3 .grid > * {
    width: 33.33333%; }
  .grid__xs--4 > * {
    width: 25%; }
  .grid-dynamic__xs--4 .grid > * {
    width: 25%; } }

@media all and (min-width: 500px) {
  .grid__s--1 > * {
    width: 100%; }
  .grid-dynamic__s--1 .grid > * {
    width: 100%; }
  .grid__s--2 > * {
    width: 50%; }
  .grid-dynamic__s--2 .grid > * {
    width: 50%; }
  .grid__s--3 > * {
    width: 33.33333%; }
  .grid-dynamic__s--3 .grid > * {
    width: 33.33333%; }
  .grid__s--4 > * {
    width: 25%; }
  .grid-dynamic__s--4 .grid > * {
    width: 25%; } }

@media all and (min-width: 599px) {
  .grid__m--1 > * {
    width: 100%; }
  .grid-dynamic__m--1 .grid > * {
    width: 100%; }
  .grid__m--2 > * {
    width: 50%; }
  .grid-dynamic__m--2 .grid > * {
    width: 50%; }
  .grid__m--3 > * {
    width: 33.33333%; }
  .grid-dynamic__m--3 .grid > * {
    width: 33.33333%; }
  .grid__m--4 > * {
    width: 25%; }
  .grid-dynamic__m--4 .grid > * {
    width: 25%; } }

@media all and (min-width: 768px) {
  .grid__l--1 > * {
    width: 100%; }
  .grid-dynamic__l--1 .grid > * {
    width: 100%; }
  .grid__l--2 > * {
    width: 50%; }
  .grid-dynamic__l--2 .grid > * {
    width: 50%; }
  .grid__l--3 > * {
    width: 33.33333%; }
  .grid-dynamic__l--3 .grid > * {
    width: 33.33333%; }
  .grid__l--4 > * {
    width: 25%; }
  .grid-dynamic__l--4 .grid > * {
    width: 25%; } }

@media all and (min-width: 1024px) {
  .grid__xl--1 > * {
    width: 100%; }
  .grid-dynamic__xl--1 .grid > * {
    width: 100%; }
  .grid__xl--2 > * {
    width: 50%; }
  .grid-dynamic__xl--2 .grid > * {
    width: 50%; }
  .grid__xl--3 > * {
    width: 33.33333%; }
  .grid-dynamic__xl--3 .grid > * {
    width: 33.33333%; }
  .grid__xl--4 > * {
    width: 25%; }
  .grid-dynamic__xl--4 .grid > * {
    width: 25%; } }

/* GRID CLASSES END */
/******************/
/* GUTTER CLASSES */
/******************/
.gutters--10 {
  margin: -5px; }
  .gutters--10 > * {
    padding: 5px;
    box-sizing: border-box; }

.gutters--x-10 {
  margin-left: -5px;
  margin-right: -5px; }
  .gutters--x-10 > * {
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box; }

.gutters--y-10 {
  margin-top: -5px;
  margin-bottom: -5px; }
  .gutters--y-10 > * {
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box; }

.gutters--25 {
  margin: -13px; }
  .gutters--25 > * {
    padding: 13px;
    box-sizing: border-box; }

.gutters--x-25 {
  margin-left: -13px;
  margin-right: -13px; }
  .gutters--x-25 > * {
    padding-left: 13px;
    padding-right: 13px;
    box-sizing: border-box; }

.gutters--y-25 {
  margin-top: -13px;
  margin-bottom: -13px; }
  .gutters--y-25 > * {
    padding-top: 13px;
    padding-bottom: 13px;
    box-sizing: border-box; }

@media all and (min-width: 435px) {
  .gutters__xs--10 {
    margin: -5px; }
    .gutters__xs--10 > * {
      padding: 5px;
      box-sizing: border-box; }
  .gutters__xs--x-10 {
    margin-left: -5px;
    margin-right: -5px; }
    .gutters__xs--x-10 > * {
      padding-left: 5px;
      padding-right: 5px;
      box-sizing: border-box; }
  .gutters__xs--y-10 {
    margin-top: -5px;
    margin-bottom: -5px; }
    .gutters__xs--y-10 > * {
      padding-top: 5px;
      padding-bottom: 5px;
      box-sizing: border-box; }
  .gutters__xs--25 {
    margin: -13px; }
    .gutters__xs--25 > * {
      padding: 13px;
      box-sizing: border-box; }
  .gutters__xs--x-25 {
    margin-left: -13px;
    margin-right: -13px; }
    .gutters__xs--x-25 > * {
      padding-left: 13px;
      padding-right: 13px;
      box-sizing: border-box; }
  .gutters__xs--y-25 {
    margin-top: -13px;
    margin-bottom: -13px; }
    .gutters__xs--y-25 > * {
      padding-top: 13px;
      padding-bottom: 13px;
      box-sizing: border-box; } }

@media all and (min-width: 500px) {
  .gutters__s--10 {
    margin: -5px; }
    .gutters__s--10 > * {
      padding: 5px;
      box-sizing: border-box; }
  .gutters__s--x-10 {
    margin-left: -5px;
    margin-right: -5px; }
    .gutters__s--x-10 > * {
      padding-left: 5px;
      padding-right: 5px;
      box-sizing: border-box; }
  .gutters__s--y-10 {
    margin-top: -5px;
    margin-bottom: -5px; }
    .gutters__s--y-10 > * {
      padding-top: 5px;
      padding-bottom: 5px;
      box-sizing: border-box; }
  .gutters__s--25 {
    margin: -13px; }
    .gutters__s--25 > * {
      padding: 13px;
      box-sizing: border-box; }
  .gutters__s--x-25 {
    margin-left: -13px;
    margin-right: -13px; }
    .gutters__s--x-25 > * {
      padding-left: 13px;
      padding-right: 13px;
      box-sizing: border-box; }
  .gutters__s--y-25 {
    margin-top: -13px;
    margin-bottom: -13px; }
    .gutters__s--y-25 > * {
      padding-top: 13px;
      padding-bottom: 13px;
      box-sizing: border-box; } }

@media all and (min-width: 599px) {
  .gutters__m--10 {
    margin: -5px; }
    .gutters__m--10 > * {
      padding: 5px;
      box-sizing: border-box; }
  .gutters__m--x-10 {
    margin-left: -5px;
    margin-right: -5px; }
    .gutters__m--x-10 > * {
      padding-left: 5px;
      padding-right: 5px;
      box-sizing: border-box; }
  .gutters__m--y-10 {
    margin-top: -5px;
    margin-bottom: -5px; }
    .gutters__m--y-10 > * {
      padding-top: 5px;
      padding-bottom: 5px;
      box-sizing: border-box; }
  .gutters__m--25 {
    margin: -13px; }
    .gutters__m--25 > * {
      padding: 13px;
      box-sizing: border-box; }
  .gutters__m--x-25 {
    margin-left: -13px;
    margin-right: -13px; }
    .gutters__m--x-25 > * {
      padding-left: 13px;
      padding-right: 13px;
      box-sizing: border-box; }
  .gutters__m--y-25 {
    margin-top: -13px;
    margin-bottom: -13px; }
    .gutters__m--y-25 > * {
      padding-top: 13px;
      padding-bottom: 13px;
      box-sizing: border-box; } }

@media all and (min-width: 768px) {
  .gutters__l--10 {
    margin: -5px; }
    .gutters__l--10 > * {
      padding: 5px;
      box-sizing: border-box; }
  .gutters__l--x-10 {
    margin-left: -5px;
    margin-right: -5px; }
    .gutters__l--x-10 > * {
      padding-left: 5px;
      padding-right: 5px;
      box-sizing: border-box; }
  .gutters__l--y-10 {
    margin-top: -5px;
    margin-bottom: -5px; }
    .gutters__l--y-10 > * {
      padding-top: 5px;
      padding-bottom: 5px;
      box-sizing: border-box; }
  .gutters__l--25 {
    margin: -13px; }
    .gutters__l--25 > * {
      padding: 13px;
      box-sizing: border-box; }
  .gutters__l--x-25 {
    margin-left: -13px;
    margin-right: -13px; }
    .gutters__l--x-25 > * {
      padding-left: 13px;
      padding-right: 13px;
      box-sizing: border-box; }
  .gutters__l--y-25 {
    margin-top: -13px;
    margin-bottom: -13px; }
    .gutters__l--y-25 > * {
      padding-top: 13px;
      padding-bottom: 13px;
      box-sizing: border-box; } }

@media all and (min-width: 1024px) {
  .gutters__xl--10 {
    margin: -5px; }
    .gutters__xl--10 > * {
      padding: 5px;
      box-sizing: border-box; }
  .gutters__xl--x-10 {
    margin-left: -5px;
    margin-right: -5px; }
    .gutters__xl--x-10 > * {
      padding-left: 5px;
      padding-right: 5px;
      box-sizing: border-box; }
  .gutters__xl--y-10 {
    margin-top: -5px;
    margin-bottom: -5px; }
    .gutters__xl--y-10 > * {
      padding-top: 5px;
      padding-bottom: 5px;
      box-sizing: border-box; }
  .gutters__xl--25 {
    margin: -13px; }
    .gutters__xl--25 > * {
      padding: 13px;
      box-sizing: border-box; }
  .gutters__xl--x-25 {
    margin-left: -13px;
    margin-right: -13px; }
    .gutters__xl--x-25 > * {
      padding-left: 13px;
      padding-right: 13px;
      box-sizing: border-box; }
  .gutters__xl--y-25 {
    margin-top: -13px;
    margin-bottom: -13px; }
    .gutters__xl--y-25 > * {
      padding-top: 13px;
      padding-bottom: 13px;
      box-sizing: border-box; } }

/* GUTTER CLASSES END */
/******************/
/* HIDDEN CLASSES */
/******************/
.hidden {
  display: none; }

@media all and (max-width: 435px) {
  .hidden__xs--down {
    display: none; } }

@media all and (min-width: 435px) {
  .hidden__xs--up {
    display: none; } }

@media all and (max-width: 500px) {
  .hidden__s--down {
    display: none; } }

@media all and (min-width: 500px) {
  .hidden__s--up {
    display: none; } }

@media all and (max-width: 599px) {
  .hidden__m--down {
    display: none; } }

@media all and (min-width: 599px) {
  .hidden__m--up {
    display: none; } }

@media all and (max-width: 768px) {
  .hidden__l--down {
    display: none; } }

@media all and (min-width: 768px) {
  .hidden__l--up {
    display: none; } }

@media all and (max-width: 1024px) {
  .hidden__xl--down {
    display: none; } }

@media all and (min-width: 1024px) {
  .hidden__xl--up {
    display: none; } }

/* HIDDEN CLASSES END */

/*# sourceMappingURL=zebra.css.map */