/*!
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

FLXBX (12-COL)
THE 12 COLUMN FLEXBOX GRID BY 1990KB

Version:  2.1.0

Author:   Kevin Brand
Mail:     kevin@1990kb.de
Web:      http://1990kb.de

Copyright by Kevin Brand.

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*/

/* ------ START FLEXBOX GRID DISTANCES ------ */
.grid .row > .col {margin-top: 20px;}
.grid .row > .col .col-inner > *:not(.row):nth-child(1) {margin-top: 0;}
.grid .row > .col .col-inner > *:not(.row):nth-last-child(1) {margin-bottom: 0;}

.grid .row[class*="small-gutter"] > .col {margin-top: 5px;}

.grid .row[class*="no-gutter"] > .col {margin-top: 0;}

.grid .row {margin-top: -20px;}
.grid .row + .row {margin-top: 0px;}
.grid .row + .row[class*="small-gutter"] {margin-top: 0px;}
.grid .row + .row[class*="no-gutter"] {margin-top: 0;}

.grid .row[class*="small-gutter"] {margin-top: -5px;}

.grid .row[class*="no-gutter"] {margin-top: 0;}

.grid + .grid {margin-top: 20px;}

.grid[class*="fullsize"] + .grid[class*="fullsize"] {margin-top: 0px;}

/* ------ END FLEXBOX GRID DISTANCES ------ */

.grid { max-width: 1650px; margin-left: auto; margin-right: auto; box-sizing: border-box; }

.row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; box-sizing: border-box; }
.row .col { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; box-sizing: border-box; width: 100%; }
.row.top { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; }
.row.middle { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
.row.bottom { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; }
.row.left { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; }
.row.center { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
.row.right { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; }
.row.small-gutter { margin-left: -5px; }
.row.small-gutter .col { margin-left: 5px; }
.row.no-gutter { margin-left: 0; }
.row.no-gutter .col { margin-left: 0; }

.grid { width: 95%; }

.grid.fullsize { width: 100%; max-width: none; }

.row { margin-left: -20px; }
.row .col { margin-left: 20px; }

.row .col.desktop-1, .row.normal-gutter .col.desktop-1 { -webkit-flex-basis: calc(8.33333% - 20px); -ms-flex-preferred-size: calc(8.33333% - 20px); flex-basis: calc(8.33333% - 20px); max-width: calc(8.33333% - 20px); }
.row .col.desktop-2, .row.normal-gutter .col.desktop-2 { -webkit-flex-basis: calc(16.66667% - 20px); -ms-flex-preferred-size: calc(16.66667% - 20px); flex-basis: calc(16.66667% - 20px); max-width: calc(16.66667% - 20px); }
.row .col.desktop-3, .row.normal-gutter .col.desktop-3 { -webkit-flex-basis: calc(25% - 20px); -ms-flex-preferred-size: calc(25% - 20px); flex-basis: calc(25% - 20px); max-width: calc(25% - 20px); }
.row .col.desktop-4, .row.normal-gutter .col.desktop-4 { -webkit-flex-basis: calc(33.33333% - 20px); -ms-flex-preferred-size: calc(33.33333% - 20px); flex-basis: calc(33.33333% - 20px); max-width: calc(33.33333% - 20px); }
.row .col.desktop-5, .row.normal-gutter .col.desktop-5 { -webkit-flex-basis: calc(41.66667% - 20px); -ms-flex-preferred-size: calc(41.66667% - 20px); flex-basis: calc(41.66667% - 20px); max-width: calc(41.66667% - 20px); }
.row .col.desktop-6, .row.normal-gutter .col.desktop-6 { -webkit-flex-basis: calc(50% - 20px); -ms-flex-preferred-size: calc(50% - 20px); flex-basis: calc(50% - 20px); max-width: calc(50% - 20px); }
.row .col.desktop-7, .row.normal-gutter .col.desktop-7 { -webkit-flex-basis: calc(58.33333% - 20px); -ms-flex-preferred-size: calc(58.33333% - 20px); flex-basis: calc(58.33333% - 20px); max-width: calc(58.33333% - 20px); }
.row .col.desktop-8, .row.normal-gutter .col.desktop-8 { -webkit-flex-basis: calc(66.66667% - 20px); -ms-flex-preferred-size: calc(66.66667% - 20px); flex-basis: calc(66.66667% - 20px); max-width: calc(66.66667% - 20px); }
.row .col.desktop-9, .row.normal-gutter .col.desktop-9 { -webkit-flex-basis: calc(75% - 20px); -ms-flex-preferred-size: calc(75% - 20px); flex-basis: calc(75% - 20px); max-width: calc(75% - 20px); }
.row .col.desktop-10, .row.normal-gutter .col.desktop-10 { -webkit-flex-basis: calc(83.33333% - 20px); -ms-flex-preferred-size: calc(83.33333% - 20px); flex-basis: calc(83.33333% - 20px); max-width: calc(83.33333% - 20px); }
.row .col.desktop-11, .row.normal-gutter .col.desktop-11 { -webkit-flex-basis: calc(91.66667% - 20px); -ms-flex-preferred-size: calc(91.66667% - 20px); flex-basis: calc(91.66667% - 20px); max-width: calc(91.66667% - 20px); }
.row .col.desktop-12, .row.normal-gutter .col.desktop-12 { -webkit-flex-basis: calc(100% - 20px); -ms-flex-preferred-size: calc(100% - 20px); flex-basis: calc(100% - 20px); max-width: calc(100% - 20px); }

.row.small-gutter .col.desktop-1 { -webkit-flex-basis: calc(8.33333% - 5px); -ms-flex-preferred-size: calc(8.33333% - 5px); flex-basis: calc(8.33333% - 5px); max-width: calc(8.33333% - 5px); }
.row.small-gutter .col.desktop-2 { -webkit-flex-basis: calc(16.66667% - 5px); -ms-flex-preferred-size: calc(16.66667% - 5px); flex-basis: calc(16.66667% - 5px); max-width: calc(16.66667% - 5px); }
.row.small-gutter .col.desktop-3 { -webkit-flex-basis: calc(25% - 5px); -ms-flex-preferred-size: calc(25% - 5px); flex-basis: calc(25% - 5px); max-width: calc(25% - 5px); }
.row.small-gutter .col.desktop-4 { -webkit-flex-basis: calc(33.33333% - 5px); -ms-flex-preferred-size: calc(33.33333% - 5px); flex-basis: calc(33.33333% - 5px); max-width: calc(33.33333% - 5px); }
.row.small-gutter .col.desktop-5 { -webkit-flex-basis: calc(41.66667% - 5px); -ms-flex-preferred-size: calc(41.66667% - 5px); flex-basis: calc(41.66667% - 5px); max-width: calc(41.66667% - 5px); }
.row.small-gutter .col.desktop-6 { -webkit-flex-basis: calc(50% - 5px); -ms-flex-preferred-size: calc(50% - 5px); flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); }
.row.small-gutter .col.desktop-7 { -webkit-flex-basis: calc(58.33333% - 5px); -ms-flex-preferred-size: calc(58.33333% - 5px); flex-basis: calc(58.33333% - 5px); max-width: calc(58.33333% - 5px); }
.row.small-gutter .col.desktop-8 { -webkit-flex-basis: calc(66.66667% - 5px); -ms-flex-preferred-size: calc(66.66667% - 5px); flex-basis: calc(66.66667% - 5px); max-width: calc(66.66667% - 5px); }
.row.small-gutter .col.desktop-9 { -webkit-flex-basis: calc(75% - 5px); -ms-flex-preferred-size: calc(75% - 5px); flex-basis: calc(75% - 5px); max-width: calc(75% - 5px); }
.row.small-gutter .col.desktop-10 { -webkit-flex-basis: calc(83.33333% - 5px); -ms-flex-preferred-size: calc(83.33333% - 5px); flex-basis: calc(83.33333% - 5px); max-width: calc(83.33333% - 5px); }
.row.small-gutter .col.desktop-11 { -webkit-flex-basis: calc(91.66667% - 5px); -ms-flex-preferred-size: calc(91.66667% - 5px); flex-basis: calc(91.66667% - 5px); max-width: calc(91.66667% - 5px); }
.row.small-gutter .col.desktop-12 { -webkit-flex-basis: calc(100% - 5px); -ms-flex-preferred-size: calc(100% - 5px); flex-basis: calc(100% - 5px); max-width: calc(100% - 5px); }

.row.no-gutter .col.desktop-1 { -webkit-flex-basis: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; }
.row.no-gutter .col.desktop-2 { -webkit-flex-basis: 16.66667%; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; }
.row.no-gutter .col.desktop-3 { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; }
.row.no-gutter .col.desktop-4 { -webkit-flex-basis: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; }
.row.no-gutter .col.desktop-5 { -webkit-flex-basis: 41.66667%; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; }
.row.no-gutter .col.desktop-6 { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; }
.row.no-gutter .col.desktop-7 { -webkit-flex-basis: 58.33333%; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; }
.row.no-gutter .col.desktop-8 { -webkit-flex-basis: 66.66667%; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; }
.row.no-gutter .col.desktop-9 { -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; }
.row.no-gutter .col.desktop-10 { -webkit-flex-basis: 83.33333%; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; }
.row.no-gutter .col.desktop-11 { -webkit-flex-basis: 91.66667%; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; }
.row.no-gutter .col.desktop-12 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; }

@media only screen and (min-width: 2000px)  {
.grid { max-width: 82%; }
}

@media screen and (min-width: 871px) and (max-width: 1199px) { 
  .grid { width: 95%; }
  .grid.fullsize { width: 100%; max-width: none; }
  .row { margin-left: -20px; }
  .row .col { margin-left: 20px; }
  .row .col.tablet-1, .row.normal-gutter .col.tablet-1 { -webkit-flex-basis: calc(8.33333% - 20px); -ms-flex-preferred-size: calc(8.33333% - 20px); flex-basis: calc(8.33333% - 20px); max-width: calc(8.33333% - 20px); }
  .row .col.tablet-2, .row.normal-gutter .col.tablet-2 { -webkit-flex-basis: calc(16.66667% - 20px); -ms-flex-preferred-size: calc(16.66667% - 20px); flex-basis: calc(16.66667% - 20px); max-width: calc(16.66667% - 20px); }
  .row .col.tablet-3, .row.normal-gutter .col.tablet-3 { -webkit-flex-basis: calc(25% - 20px); -ms-flex-preferred-size: calc(25% - 20px); flex-basis: calc(25% - 20px); max-width: calc(25% - 20px); }
  .row .col.tablet-4, .row.normal-gutter .col.tablet-4 { -webkit-flex-basis: calc(33.33333% - 20px); -ms-flex-preferred-size: calc(33.33333% - 20px); flex-basis: calc(33.33333% - 20px); max-width: calc(33.33333% - 20px); }
  .row .col.tablet-5, .row.normal-gutter .col.tablet-5 { -webkit-flex-basis: calc(41.66667% - 20px); -ms-flex-preferred-size: calc(41.66667% - 20px); flex-basis: calc(41.66667% - 20px); max-width: calc(41.66667% - 20px); }
  .row .col.tablet-6, .row.normal-gutter .col.tablet-6 { -webkit-flex-basis: calc(50% - 20px); -ms-flex-preferred-size: calc(50% - 20px); flex-basis: calc(50% - 20px); max-width: calc(50% - 20px); }
  .row .col.tablet-7, .row.normal-gutter .col.tablet-7 { -webkit-flex-basis: calc(58.33333% - 20px); -ms-flex-preferred-size: calc(58.33333% - 20px); flex-basis: calc(58.33333% - 20px); max-width: calc(58.33333% - 20px); }
  .row .col.tablet-8, .row.normal-gutter .col.tablet-8 { -webkit-flex-basis: calc(66.66667% - 20px); -ms-flex-preferred-size: calc(66.66667% - 20px); flex-basis: calc(66.66667% - 20px); max-width: calc(66.66667% - 20px); }
  .row .col.tablet-9, .row.normal-gutter .col.tablet-9 { -webkit-flex-basis: calc(75% - 20px); -ms-flex-preferred-size: calc(75% - 20px); flex-basis: calc(75% - 20px); max-width: calc(75% - 20px); }
  .row .col.tablet-10, .row.normal-gutter .col.tablet-10 { -webkit-flex-basis: calc(83.33333% - 20px); -ms-flex-preferred-size: calc(83.33333% - 20px); flex-basis: calc(83.33333% - 20px); max-width: calc(83.33333% - 20px); }
  .row .col.tablet-11, .row.normal-gutter .col.tablet-11 { -webkit-flex-basis: calc(91.66667% - 20px); -ms-flex-preferred-size: calc(91.66667% - 20px); flex-basis: calc(91.66667% - 20px); max-width: calc(91.66667% - 20px); }
  .row .col.tablet-12, .row.normal-gutter .col.tablet-12 { -webkit-flex-basis: calc(100% - 20px); -ms-flex-preferred-size: calc(100% - 20px); flex-basis: calc(100% - 20px); max-width: calc(100% - 20px); }
  .row.small-gutter .col.tablet-1 { -webkit-flex-basis: calc(8.33333% - 5px); -ms-flex-preferred-size: calc(8.33333% - 5px); flex-basis: calc(8.33333% - 5px); max-width: calc(8.33333% - 5px); }
  .row.small-gutter .col.tablet-2 { -webkit-flex-basis: calc(16.66667% - 5px); -ms-flex-preferred-size: calc(16.66667% - 5px); flex-basis: calc(16.66667% - 5px); max-width: calc(16.66667% - 5px); }
  .row.small-gutter .col.tablet-3 { -webkit-flex-basis: calc(25% - 5px); -ms-flex-preferred-size: calc(25% - 5px); flex-basis: calc(25% - 5px); max-width: calc(25% - 5px); }
  .row.small-gutter .col.tablet-4 { -webkit-flex-basis: calc(33.33333% - 5px); -ms-flex-preferred-size: calc(33.33333% - 5px); flex-basis: calc(33.33333% - 5px); max-width: calc(33.33333% - 5px); }
  .row.small-gutter .col.tablet-5 { -webkit-flex-basis: calc(41.66667% - 5px); -ms-flex-preferred-size: calc(41.66667% - 5px); flex-basis: calc(41.66667% - 5px); max-width: calc(41.66667% - 5px); }
  .row.small-gutter .col.tablet-6 { -webkit-flex-basis: calc(50% - 5px); -ms-flex-preferred-size: calc(50% - 5px); flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); }
  .row.small-gutter .col.tablet-7 { -webkit-flex-basis: calc(58.33333% - 5px); -ms-flex-preferred-size: calc(58.33333% - 5px); flex-basis: calc(58.33333% - 5px); max-width: calc(58.33333% - 5px); }
  .row.small-gutter .col.tablet-8 { -webkit-flex-basis: calc(66.66667% - 5px); -ms-flex-preferred-size: calc(66.66667% - 5px); flex-basis: calc(66.66667% - 5px); max-width: calc(66.66667% - 5px); }
  .row.small-gutter .col.tablet-9 { -webkit-flex-basis: calc(75% - 5px); -ms-flex-preferred-size: calc(75% - 5px); flex-basis: calc(75% - 5px); max-width: calc(75% - 5px); }
  .row.small-gutter .col.tablet-10 { -webkit-flex-basis: calc(83.33333% - 5px); -ms-flex-preferred-size: calc(83.33333% - 5px); flex-basis: calc(83.33333% - 5px); max-width: calc(83.33333% - 5px); }
  .row.small-gutter .col.tablet-11 { -webkit-flex-basis: calc(91.66667% - 5px); -ms-flex-preferred-size: calc(91.66667% - 5px); flex-basis: calc(91.66667% - 5px); max-width: calc(91.66667% - 5px); }
  .row.small-gutter .col.tablet-12 { -webkit-flex-basis: calc(100% - 5px); -ms-flex-preferred-size: calc(100% - 5px); flex-basis: calc(100% - 5px); max-width: calc(100% - 5px); }
  .row.no-gutter .col.tablet-1 { -webkit-flex-basis: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; }
  .row.no-gutter .col.tablet-2 { -webkit-flex-basis: 16.66667%; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; }
  .row.no-gutter .col.tablet-3 { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; }
  .row.no-gutter .col.tablet-4 { -webkit-flex-basis: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; }
  .row.no-gutter .col.tablet-5 { -webkit-flex-basis: 41.66667%; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; }
  .row.no-gutter .col.tablet-6 { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; }
  .row.no-gutter .col.tablet-7 { -webkit-flex-basis: 58.33333%; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; }
  .row.no-gutter .col.tablet-8 { -webkit-flex-basis: 66.66667%; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; }
  .row.no-gutter .col.tablet-9 { -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; }
  .row.no-gutter .col.tablet-10 { -webkit-flex-basis: 83.33333%; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; }
  .row.no-gutter .col.tablet-11 { -webkit-flex-basis: 91.66667%; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; }
  .row.no-gutter .col.tablet-12 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } }

@media screen and (min-width: 544px) and (max-width: 870px) { 
  .grid { width: 95%; }
  .grid.fullsize { width: 100%; max-width: none; }
  .row { margin-left: -20px; }
  .row .col { margin-left: 20px; }
  .row .col.phablet-1, .row.normal-gutter .col.phablet-1 { -webkit-flex-basis: calc(8.33333% - 20px); -ms-flex-preferred-size: calc(8.33333% - 20px); flex-basis: calc(8.33333% - 20px); max-width: calc(8.33333% - 20px); }
  .row .col.phablet-2, .row.normal-gutter .col.phablet-2 { -webkit-flex-basis: calc(16.66667% - 20px); -ms-flex-preferred-size: calc(16.66667% - 20px); flex-basis: calc(16.66667% - 20px); max-width: calc(16.66667% - 20px); }
  .row .col.phablet-3, .row.normal-gutter .col.phablet-3 { -webkit-flex-basis: calc(25% - 20px); -ms-flex-preferred-size: calc(25% - 20px); flex-basis: calc(25% - 20px); max-width: calc(25% - 20px); }
  .row .col.phablet-4, .row.normal-gutter .col.phablet-4 { -webkit-flex-basis: calc(33.33333% - 20px); -ms-flex-preferred-size: calc(33.33333% - 20px); flex-basis: calc(33.33333% - 20px); max-width: calc(33.33333% - 20px); }
  .row .col.phablet-5, .row.normal-gutter .col.phablet-5 { -webkit-flex-basis: calc(41.66667% - 20px); -ms-flex-preferred-size: calc(41.66667% - 20px); flex-basis: calc(41.66667% - 20px); max-width: calc(41.66667% - 20px); }
  .row .col.phablet-6, .row.normal-gutter .col.phablet-6 { -webkit-flex-basis: calc(50% - 20px); -ms-flex-preferred-size: calc(50% - 20px); flex-basis: calc(50% - 20px); max-width: calc(50% - 20px); }
  .row .col.phablet-7, .row.normal-gutter .col.phablet-7 { -webkit-flex-basis: calc(58.33333% - 20px); -ms-flex-preferred-size: calc(58.33333% - 20px); flex-basis: calc(58.33333% - 20px); max-width: calc(58.33333% - 20px); }
  .row .col.phablet-8, .row.normal-gutter .col.phablet-8 { -webkit-flex-basis: calc(66.66667% - 20px); -ms-flex-preferred-size: calc(66.66667% - 20px); flex-basis: calc(66.66667% - 20px); max-width: calc(66.66667% - 20px); }
  .row .col.phablet-9, .row.normal-gutter .col.phablet-9 { -webkit-flex-basis: calc(75% - 20px); -ms-flex-preferred-size: calc(75% - 20px); flex-basis: calc(75% - 20px); max-width: calc(75% - 20px); }
  .row .col.phablet-10, .row.normal-gutter .col.phablet-10 { -webkit-flex-basis: calc(83.33333% - 20px); -ms-flex-preferred-size: calc(83.33333% - 20px); flex-basis: calc(83.33333% - 20px); max-width: calc(83.33333% - 20px); }
  .row .col.phablet-11, .row.normal-gutter .col.phablet-11 { -webkit-flex-basis: calc(91.66667% - 20px); -ms-flex-preferred-size: calc(91.66667% - 20px); flex-basis: calc(91.66667% - 20px); max-width: calc(91.66667% - 20px); }
  .row .col.phablet-12, .row.normal-gutter .col.phablet-12 { -webkit-flex-basis: calc(100% - 20px); -ms-flex-preferred-size: calc(100% - 20px); flex-basis: calc(100% - 20px); max-width: calc(100% - 20px); }
  .row.small-gutter .col.phablet-1 { -webkit-flex-basis: calc(8.33333% - 5px); -ms-flex-preferred-size: calc(8.33333% - 5px); flex-basis: calc(8.33333% - 5px); max-width: calc(8.33333% - 5px); }
  .row.small-gutter .col.phablet-2 { -webkit-flex-basis: calc(16.66667% - 5px); -ms-flex-preferred-size: calc(16.66667% - 5px); flex-basis: calc(16.66667% - 5px); max-width: calc(16.66667% - 5px); }
  .row.small-gutter .col.phablet-3 { -webkit-flex-basis: calc(25% - 5px); -ms-flex-preferred-size: calc(25% - 5px); flex-basis: calc(25% - 5px); max-width: calc(25% - 5px); }
  .row.small-gutter .col.phablet-4 { -webkit-flex-basis: calc(33.33333% - 5px); -ms-flex-preferred-size: calc(33.33333% - 5px); flex-basis: calc(33.33333% - 5px); max-width: calc(33.33333% - 5px); }
  .row.small-gutter .col.phablet-5 { -webkit-flex-basis: calc(41.66667% - 5px); -ms-flex-preferred-size: calc(41.66667% - 5px); flex-basis: calc(41.66667% - 5px); max-width: calc(41.66667% - 5px); }
  .row.small-gutter .col.phablet-6 { -webkit-flex-basis: calc(50% - 5px); -ms-flex-preferred-size: calc(50% - 5px); flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); }
  .row.small-gutter .col.phablet-7 { -webkit-flex-basis: calc(58.33333% - 5px); -ms-flex-preferred-size: calc(58.33333% - 5px); flex-basis: calc(58.33333% - 5px); max-width: calc(58.33333% - 5px); }
  .row.small-gutter .col.phablet-8 { -webkit-flex-basis: calc(66.66667% - 5px); -ms-flex-preferred-size: calc(66.66667% - 5px); flex-basis: calc(66.66667% - 5px); max-width: calc(66.66667% - 5px); }
  .row.small-gutter .col.phablet-9 { -webkit-flex-basis: calc(75% - 5px); -ms-flex-preferred-size: calc(75% - 5px); flex-basis: calc(75% - 5px); max-width: calc(75% - 5px); }
  .row.small-gutter .col.phablet-10 { -webkit-flex-basis: calc(83.33333% - 5px); -ms-flex-preferred-size: calc(83.33333% - 5px); flex-basis: calc(83.33333% - 5px); max-width: calc(83.33333% - 5px); }
  .row.small-gutter .col.phablet-11 { -webkit-flex-basis: calc(91.66667% - 5px); -ms-flex-preferred-size: calc(91.66667% - 5px); flex-basis: calc(91.66667% - 5px); max-width: calc(91.66667% - 5px); }
  .row.small-gutter .col.phablet-12 { -webkit-flex-basis: calc(100% - 5px); -ms-flex-preferred-size: calc(100% - 5px); flex-basis: calc(100% - 5px); max-width: calc(100% - 5px); }
  .row.no-gutter .col.phablet-1 { -webkit-flex-basis: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; }
  .row.no-gutter .col.phablet-2 { -webkit-flex-basis: 16.66667%; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; }
  .row.no-gutter .col.phablet-3 { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; }
  .row.no-gutter .col.phablet-4 { -webkit-flex-basis: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; }
  .row.no-gutter .col.phablet-5 { -webkit-flex-basis: 41.66667%; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; }
  .row.no-gutter .col.phablet-6 { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; }
  .row.no-gutter .col.phablet-7 { -webkit-flex-basis: 58.33333%; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; }
  .row.no-gutter .col.phablet-8 { -webkit-flex-basis: 66.66667%; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; }
  .row.no-gutter .col.phablet-9 { -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; }
  .row.no-gutter .col.phablet-10 { -webkit-flex-basis: 83.33333%; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; }
  .row.no-gutter .col.phablet-11 { -webkit-flex-basis: 91.66667%; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; }
  .row.no-gutter .col.phablet-12 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } }

@media screen and (max-width: 543px) { 
  .grid { width: 95%; }
  .grid.fullsize { width: 100%; max-width: none; }
  .row { margin-left: -20px; }
  .row .col { margin-left: 20px; }
  .row .col.phone-1, .row.normal-gutter .col.phone-1 { -webkit-flex-basis: calc(8.33333% - 20px); -ms-flex-preferred-size: calc(8.33333% - 20px); flex-basis: calc(8.33333% - 20px); max-width: calc(8.33333% - 20px); }
  .row .col.phone-2, .row.normal-gutter .col.phone-2 { -webkit-flex-basis: calc(16.66667% - 20px); -ms-flex-preferred-size: calc(16.66667% - 20px); flex-basis: calc(16.66667% - 20px); max-width: calc(16.66667% - 20px); }
  .row .col.phone-3, .row.normal-gutter .col.phone-3 { -webkit-flex-basis: calc(25% - 20px); -ms-flex-preferred-size: calc(25% - 20px); flex-basis: calc(25% - 20px); max-width: calc(25% - 20px); }
  .row .col.phone-4, .row.normal-gutter .col.phone-4 { -webkit-flex-basis: calc(33.33333% - 20px); -ms-flex-preferred-size: calc(33.33333% - 20px); flex-basis: calc(33.33333% - 20px); max-width: calc(33.33333% - 20px); }
  .row .col.phone-5, .row.normal-gutter .col.phone-5 { -webkit-flex-basis: calc(41.66667% - 20px); -ms-flex-preferred-size: calc(41.66667% - 20px); flex-basis: calc(41.66667% - 20px); max-width: calc(41.66667% - 20px); }
  .row .col.phone-6, .row.normal-gutter .col.phone-6 { -webkit-flex-basis: calc(50% - 20px); -ms-flex-preferred-size: calc(50% - 20px); flex-basis: calc(50% - 20px); max-width: calc(50% - 20px); }
  .row .col.phone-7, .row.normal-gutter .col.phone-7 { -webkit-flex-basis: calc(58.33333% - 20px); -ms-flex-preferred-size: calc(58.33333% - 20px); flex-basis: calc(58.33333% - 20px); max-width: calc(58.33333% - 20px); }
  .row .col.phone-8, .row.normal-gutter .col.phone-8 { -webkit-flex-basis: calc(66.66667% - 20px); -ms-flex-preferred-size: calc(66.66667% - 20px); flex-basis: calc(66.66667% - 20px); max-width: calc(66.66667% - 20px); }
  .row .col.phone-9, .row.normal-gutter .col.phone-9 { -webkit-flex-basis: calc(75% - 20px); -ms-flex-preferred-size: calc(75% - 20px); flex-basis: calc(75% - 20px); max-width: calc(75% - 20px); }
  .row .col.phone-10, .row.normal-gutter .col.phone-10 { -webkit-flex-basis: calc(83.33333% - 20px); -ms-flex-preferred-size: calc(83.33333% - 20px); flex-basis: calc(83.33333% - 20px); max-width: calc(83.33333% - 20px); }
  .row .col.phone-11, .row.normal-gutter .col.phone-11 { -webkit-flex-basis: calc(91.66667% - 20px); -ms-flex-preferred-size: calc(91.66667% - 20px); flex-basis: calc(91.66667% - 20px); max-width: calc(91.66667% - 20px); }
  .row .col.phone-12, .row.normal-gutter .col.phone-12 { -webkit-flex-basis: calc(100% - 20px); -ms-flex-preferred-size: calc(100% - 20px); flex-basis: calc(100% - 20px); max-width: calc(100% - 20px); }
  .row.small-gutter .col.phone-1 { -webkit-flex-basis: calc(8.33333% - 5px); -ms-flex-preferred-size: calc(8.33333% - 5px); flex-basis: calc(8.33333% - 5px); max-width: calc(8.33333% - 5px); }
  .row.small-gutter .col.phone-2 { -webkit-flex-basis: calc(16.66667% - 5px); -ms-flex-preferred-size: calc(16.66667% - 5px); flex-basis: calc(16.66667% - 5px); max-width: calc(16.66667% - 5px); }
  .row.small-gutter .col.phone-3 { -webkit-flex-basis: calc(25% - 5px); -ms-flex-preferred-size: calc(25% - 5px); flex-basis: calc(25% - 5px); max-width: calc(25% - 5px); }
  .row.small-gutter .col.phone-4 { -webkit-flex-basis: calc(33.33333% - 5px); -ms-flex-preferred-size: calc(33.33333% - 5px); flex-basis: calc(33.33333% - 5px); max-width: calc(33.33333% - 5px); }
  .row.small-gutter .col.phone-5 { -webkit-flex-basis: calc(41.66667% - 5px); -ms-flex-preferred-size: calc(41.66667% - 5px); flex-basis: calc(41.66667% - 5px); max-width: calc(41.66667% - 5px); }
  .row.small-gutter .col.phone-6 { -webkit-flex-basis: calc(50% - 5px); -ms-flex-preferred-size: calc(50% - 5px); flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); }
  .row.small-gutter .col.phone-7 { -webkit-flex-basis: calc(58.33333% - 5px); -ms-flex-preferred-size: calc(58.33333% - 5px); flex-basis: calc(58.33333% - 5px); max-width: calc(58.33333% - 5px); }
  .row.small-gutter .col.phone-8 { -webkit-flex-basis: calc(66.66667% - 5px); -ms-flex-preferred-size: calc(66.66667% - 5px); flex-basis: calc(66.66667% - 5px); max-width: calc(66.66667% - 5px); }
  .row.small-gutter .col.phone-9 { -webkit-flex-basis: calc(75% - 5px); -ms-flex-preferred-size: calc(75% - 5px); flex-basis: calc(75% - 5px); max-width: calc(75% - 5px); }
  .row.small-gutter .col.phone-10 { -webkit-flex-basis: calc(83.33333% - 5px); -ms-flex-preferred-size: calc(83.33333% - 5px); flex-basis: calc(83.33333% - 5px); max-width: calc(83.33333% - 5px); }
  .row.small-gutter .col.phone-11 { -webkit-flex-basis: calc(91.66667% - 5px); -ms-flex-preferred-size: calc(91.66667% - 5px); flex-basis: calc(91.66667% - 5px); max-width: calc(91.66667% - 5px); }
  .row.small-gutter .col.phone-12 { -webkit-flex-basis: calc(100% - 5px); -ms-flex-preferred-size: calc(100% - 5px); flex-basis: calc(100% - 5px); max-width: calc(100% - 5px); }
  .row.no-gutter .col.phone-1 { -webkit-flex-basis: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; }
  .row.no-gutter .col.phone-2 { -webkit-flex-basis: 16.66667%; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; }
  .row.no-gutter .col.phone-3 { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; }
  .row.no-gutter .col.phone-4 { -webkit-flex-basis: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; }
  .row.no-gutter .col.phone-5 { -webkit-flex-basis: 41.66667%; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; }
  .row.no-gutter .col.phone-6 { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; }
  .row.no-gutter .col.phone-7 { -webkit-flex-basis: 58.33333%; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; }
  .row.no-gutter .col.phone-8 { -webkit-flex-basis: 66.66667%; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; }
  .row.no-gutter .col.phone-9 { -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; }
  .row.no-gutter .col.phone-10 { -webkit-flex-basis: 83.33333%; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; }
  .row.no-gutter .col.phone-11 { -webkit-flex-basis: 91.66667%; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; }
  .row.no-gutter .col.phone-12 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } }