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

@license Creative Commons: BY 4.0
This work is licensed under a Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

FLXBX [12-COLUMNS] Version: 2.1.1
THE 12 COLUMN FLEXBOX GRID BY 1990KB

Copyright (c) 2016 Kevin Brand

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

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



/* ------ START FLEXBOX GRID DISTANCES ------ */

.grid .row > .col {margin-top: 0px;}
.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: 0px;}
.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: 50px;}

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

.grid .row .col > .row {margin-top: 0px;}

section + section {margin-top: 100px;}

.grid { max-width: 1200px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.grid.fullsize { width: 94%; max-width: 100%;}
.grid.o .col { outline: 1px solid rgba(255, 0, 255, 0.3); outline-offset: -1px; }
.grid.o .col:hover { outline-color: #f0f; }

.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; }
.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; }


/* Big Desktop
 ====================================================================== */

@media only screen and (min-width: 1921px) {

.grid { max-width: 1800px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.grid.fullsize { width: 100%; max-width: 95%;}
    
}

/* Desktop
====================================================================== */

@media screen and (min-width: 1201px) { .grid { width: 94%; }
    
  .row, .row.normal-gutter { margin-left: -50px; }
  .row > .col, .row.normal-gutter > .col { margin-left: 50px; }
  .row > .col.desktop-1, .row.normal-gutter > .col.desktop-1 { -webkit-flex-basis: calc(8.33333% - 50px); -ms-flex-preferred-size: calc(8.33333% - 50px); flex-basis: calc(8.33333% - 50px); width: calc(8.33333% - 50px); max-width: calc(8.33333% - 50px); }
  .row > .col.desktop-2, .row.normal-gutter > .col.desktop-2 { -webkit-flex-basis: calc(16.66667% - 50px); -ms-flex-preferred-size: calc(16.66667% - 50px); flex-basis: calc(16.66667% - 50px); width: calc(16.66667% - 50px); max-width: calc(16.66667% - 50px); }
  .row > .col.desktop-3, .row.normal-gutter > .col.desktop-3 { -webkit-flex-basis: calc(25% - 50px); -ms-flex-preferred-size: calc(25% - 50px); flex-basis: calc(25% - 50px); width: calc(25% - 50px); max-width: calc(25% - 50px); }
  .row > .col.desktop-4, .row.normal-gutter > .col.desktop-4 { -webkit-flex-basis: calc(33.33333% - 50px); -ms-flex-preferred-size: calc(33.33333% - 50px); flex-basis: calc(33.33333% - 50px); width: calc(33.33333% - 50px); max-width: calc(33.33333% - 50px); }
  .row > .col.desktop-5, .row.normal-gutter > .col.desktop-5 { -webkit-flex-basis: calc(41.66667% - 50px); -ms-flex-preferred-size: calc(41.66667% - 50px); flex-basis: calc(41.66667% - 50px); width: calc(41.66667% - 50px); max-width: calc(41.66667% - 50px); }
  .row > .col.desktop-6, .row.normal-gutter > .col.desktop-6 { -webkit-flex-basis: calc(50% - 50px); -ms-flex-preferred-size: calc(50% - 50px); flex-basis: calc(50% - 50px); width: calc(50% - 50px); max-width: calc(50% - 50px); }
  .row > .col.desktop-7, .row.normal-gutter > .col.desktop-7 { -webkit-flex-basis: calc(58.33333% - 50px); -ms-flex-preferred-size: calc(58.33333% - 50px); flex-basis: calc(58.33333% - 50px); width: calc(58.33333% - 50px); max-width: calc(58.33333% - 50px); }
  .row > .col.desktop-8, .row.normal-gutter > .col.desktop-8 { -webkit-flex-basis: calc(66.66667% - 50px); -ms-flex-preferred-size: calc(66.66667% - 50px); flex-basis: calc(66.66667% - 50px); width: calc(66.66667% - 50px); max-width: calc(66.66667% - 50px); }
  .row > .col.desktop-9, .row.normal-gutter > .col.desktop-9 { -webkit-flex-basis: calc(75% - 50px); -ms-flex-preferred-size: calc(75% - 50px); flex-basis: calc(75% - 50px); width: calc(75% - 50px); max-width: calc(75% - 50px); }
  .row > .col.desktop-10, .row.normal-gutter > .col.desktop-10 { -webkit-flex-basis: calc(83.33333% - 50px); -ms-flex-preferred-size: calc(83.33333% - 50px); flex-basis: calc(83.33333% - 50px); width: calc(83.33333% - 50px); max-width: calc(83.33333% - 50px); }
  .row > .col.desktop-11, .row.normal-gutter > .col.desktop-11 { -webkit-flex-basis: calc(91.66667% - 50px); -ms-flex-preferred-size: calc(91.66667% - 50px); flex-basis: calc(91.66667% - 50px); width: calc(91.66667% - 50px); max-width: calc(91.66667% - 50px); }
  .row > .col.desktop-12, .row.normal-gutter > .col.desktop-12 { -webkit-flex-basis: calc(100% - 50px); -ms-flex-preferred-size: calc(100% - 50px); flex-basis: calc(100% - 50px); width: calc(100% - 50px); max-width: calc(100% - 50px); }
  .row.small-gutter { margin-left: -5px; }
  .row.small-gutter > .col { margin-left: 5px; }
  .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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: calc(100% - 5px); max-width: calc(100% - 5px); }
  .row.no-gutter { margin-left: 0; }
  .row.no-gutter > .col { margin-left: 0; }
  .row.no-gutter > .col.desktop-1 { -webkit-flex-basis: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; width: 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%; width: 16.66667%; max-width: 16.66667%; }
  .row.no-gutter > .col.desktop-3 { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; width: 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%; width: 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%; width: 41.66667%; max-width: 41.66667%; }
  .row.no-gutter > .col.desktop-6 { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; width: 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%; width: 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%; width: 66.66667%; max-width: 66.66667%; }
  .row.no-gutter > .col.desktop-9 { -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; width: 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%; width: 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%; width: 91.66667%; max-width: 91.66667%; }
  .row.no-gutter > .col.desktop-12 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; width: 100%; max-width: 100%; }
  .hide-desktop, .col.hide-desktop { display: none; } }
    

/* Special
 ====================================================================== */

@media screen and (min-width: 851px) and (max-width: 1280px) {

  section + section {margin-top: 50px;}
  .grid + .grid {margin-top: 25px;}
    
}


/* Tablet
    ====================================================================== */

@media screen and (min-width: 851px) and (max-width: 1200px) {
    
  .grid { width: 90%; }  
  .grid .row > .col {margin-top: 25px;}
  .grid .row {margin-top: -25px;}
  
  .row, .row.normal-gutter { margin-left: -25px; }
  .row > .col, .row.normal-gutter > .col { margin-left: 25px; }
  .row > .col.tablet-1, .row.normal-gutter > .col.tablet-1 { -webkit-flex-basis: calc(8.33333% - 25px); -ms-flex-preferred-size: calc(8.33333% - 25px); flex-basis: calc(8.33333% - 25px); width: calc(8.33333% - 25px); max-width: calc(8.33333% - 25px); }
  .row > .col.tablet-2, .row.normal-gutter > .col.tablet-2 { -webkit-flex-basis: calc(16.66667% - 25px); -ms-flex-preferred-size: calc(16.66667% - 25px); flex-basis: calc(16.66667% - 25px); width: calc(16.66667% - 25px); max-width: calc(16.66667% - 25px); }
  .row > .col.tablet-3, .row.normal-gutter > .col.tablet-3 { -webkit-flex-basis: calc(25% - 25px); -ms-flex-preferred-size: calc(25% - 25px); flex-basis: calc(25% - 25px); width: calc(25% - 25px); max-width: calc(25% - 25px); }
  .row > .col.tablet-4, .row.normal-gutter > .col.tablet-4 { -webkit-flex-basis: calc(33.33333% - 25px); -ms-flex-preferred-size: calc(33.33333% - 25px); flex-basis: calc(33.33333% - 25px); width: calc(33.33333% - 25px); max-width: calc(33.33333% - 25px); }
  .row > .col.tablet-5, .row.normal-gutter > .col.tablet-5 { -webkit-flex-basis: calc(41.66667% - 25px); -ms-flex-preferred-size: calc(41.66667% - 25px); flex-basis: calc(41.66667% - 25px); width: calc(41.66667% - 25px); max-width: calc(41.66667% - 25px); }
  .row > .col.tablet-6, .row.normal-gutter > .col.tablet-6 { -webkit-flex-basis: calc(50% - 25px); -ms-flex-preferred-size: calc(50% - 25px); flex-basis: calc(50% - 25px); width: calc(50% - 25px); max-width: calc(50% - 25px); }
  .row > .col.tablet-7, .row.normal-gutter > .col.tablet-7 { -webkit-flex-basis: calc(58.33333% - 25px); -ms-flex-preferred-size: calc(58.33333% - 25px); flex-basis: calc(58.33333% - 25px); width: calc(58.33333% - 25px); max-width: calc(58.33333% - 25px); }
  .row > .col.tablet-8, .row.normal-gutter > .col.tablet-8 { -webkit-flex-basis: calc(66.66667% - 25px); -ms-flex-preferred-size: calc(66.66667% - 25px); flex-basis: calc(66.66667% - 25px); width: calc(66.66667% - 25px); max-width: calc(66.66667% - 25px); }
  .row > .col.tablet-9, .row.normal-gutter > .col.tablet-9 { -webkit-flex-basis: calc(75% - 25px); -ms-flex-preferred-size: calc(75% - 25px); flex-basis: calc(75% - 25px); width: calc(75% - 25px); max-width: calc(75% - 25px); }
  .row > .col.tablet-10, .row.normal-gutter > .col.tablet-10 { -webkit-flex-basis: calc(83.33333% - 25px); -ms-flex-preferred-size: calc(83.33333% - 25px); flex-basis: calc(83.33333% - 25px); width: calc(83.33333% - 25px); max-width: calc(83.33333% - 25px); }
  .row > .col.tablet-11, .row.normal-gutter > .col.tablet-11 { -webkit-flex-basis: calc(91.66667% - 25px); -ms-flex-preferred-size: calc(91.66667% - 25px); flex-basis: calc(91.66667% - 25px); width: calc(91.66667% - 25px); max-width: calc(91.66667% - 25px); }
  .row > .col.tablet-12, .row.normal-gutter > .col.tablet-12 { -webkit-flex-basis: calc(100% - 25px); -ms-flex-preferred-size: calc(100% - 25px); flex-basis: calc(100% - 25px); width: calc(100% - 25px); max-width: calc(100% - 25px); }
  .row.small-gutter { margin-left: -5px; }
  .row.small-gutter > .col { margin-left: 5px; }
  .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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: calc(100% - 5px); max-width: calc(100% - 5px); }
  .row.no-gutter { margin-left: 0; }
  .row.no-gutter > .col { margin-left: 0; }
  .row.no-gutter > .col.tablet-1 { -webkit-flex-basis: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; width: 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%; width: 16.66667%; max-width: 16.66667%; }
  .row.no-gutter > .col.tablet-3 { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; width: 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%; width: 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%; width: 41.66667%; max-width: 41.66667%; }
  .row.no-gutter > .col.tablet-6 { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; width: 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%; width: 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%; width: 66.66667%; max-width: 66.66667%; }
  .row.no-gutter > .col.tablet-9 { -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; width: 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%; width: 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%; width: 91.66667%; max-width: 91.66667%; }
  .row.no-gutter > .col.tablet-12 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; width: 100%; max-width: 100%; }
  .hide-tablet, .col.hide-tablet { display: none; } }

/* Phablet
    ====================================================================== */

@media screen and (min-width: 544px) and (max-width: 850px) { 
    
  .grid { width: 90%; }
  
  .grid .row > .col {margin-top: 25px;}
  .grid .row {margin-top: -25px;}
  .grid + .grid {margin-top: -25px;}
  section + section {margin-top: 25px;}    
  
  .row, .row.normal-gutter { margin-left: -25px; }
  .row > .col, .row.normal-gutter > .col { margin-left: 25px; }
  .row > .col.phablet-1, .row.normal-gutter > .col.phablet-1 { -webkit-flex-basis: calc(8.33333% - 25px); -ms-flex-preferred-size: calc(8.33333% - 25px); flex-basis: calc(8.33333% - 25px); width: calc(8.33333% - 25px); max-width: calc(8.33333% - 25px); }
  .row > .col.phablet-2, .row.normal-gutter > .col.phablet-2 { -webkit-flex-basis: calc(16.66667% - 25px); -ms-flex-preferred-size: calc(16.66667% - 25px); flex-basis: calc(16.66667% - 25px); width: calc(16.66667% - 25px); max-width: calc(16.66667% - 25px); }
  .row > .col.phablet-3, .row.normal-gutter > .col.phablet-3 { -webkit-flex-basis: calc(25% - 25px); -ms-flex-preferred-size: calc(25% - 25px); flex-basis: calc(25% - 25px); width: calc(25% - 25px); max-width: calc(25% - 25px); }
  .row > .col.phablet-4, .row.normal-gutter > .col.phablet-4 { -webkit-flex-basis: calc(33.33333% - 25px); -ms-flex-preferred-size: calc(33.33333% - 25px); flex-basis: calc(33.33333% - 25px); width: calc(33.33333% - 25px); max-width: calc(33.33333% - 25px); }
  .row > .col.phablet-5, .row.normal-gutter > .col.phablet-5 { -webkit-flex-basis: calc(41.66667% - 25px); -ms-flex-preferred-size: calc(41.66667% - 25px); flex-basis: calc(41.66667% - 25px); width: calc(41.66667% - 25px); max-width: calc(41.66667% - 25px); }
  .row > .col.phablet-6, .row.normal-gutter > .col.phablet-6 { -webkit-flex-basis: calc(50% - 25px); -ms-flex-preferred-size: calc(50% - 25px); flex-basis: calc(50% - 25px); width: calc(50% - 25px); max-width: calc(50% - 25px); }
  .row > .col.phablet-7, .row.normal-gutter > .col.phablet-7 { -webkit-flex-basis: calc(58.33333% - 25px); -ms-flex-preferred-size: calc(58.33333% - 25px); flex-basis: calc(58.33333% - 25px); width: calc(58.33333% - 25px); max-width: calc(58.33333% - 25px); }
  .row > .col.phablet-8, .row.normal-gutter > .col.phablet-8 { -webkit-flex-basis: calc(66.66667% - 25px); -ms-flex-preferred-size: calc(66.66667% - 25px); flex-basis: calc(66.66667% - 25px); width: calc(66.66667% - 25px); max-width: calc(66.66667% - 25px); }
  .row > .col.phablet-9, .row.normal-gutter > .col.phablet-9 { -webkit-flex-basis: calc(75% - 25px); -ms-flex-preferred-size: calc(75% - 25px); flex-basis: calc(75% - 25px); width: calc(75% - 25px); max-width: calc(75% - 25px); }
  .row > .col.phablet-10, .row.normal-gutter > .col.phablet-10 { -webkit-flex-basis: calc(83.33333% - 25px); -ms-flex-preferred-size: calc(83.33333% - 25px); flex-basis: calc(83.33333% - 25px); width: calc(83.33333% - 25px); max-width: calc(83.33333% - 25px); }
  .row > .col.phablet-11, .row.normal-gutter > .col.phablet-11 { -webkit-flex-basis: calc(91.66667% - 25px); -ms-flex-preferred-size: calc(91.66667% - 25px); flex-basis: calc(91.66667% - 25px); width: calc(91.66667% - 25px); max-width: calc(91.66667% - 25px); }
  .row > .col.phablet-12, .row.normal-gutter > .col.phablet-12 { -webkit-flex-basis: calc(100% - 25px); -ms-flex-preferred-size: calc(100% - 25px); flex-basis: calc(100% - 25px); width: calc(100% - 25px); max-width: calc(100% - 25px); }
  .row.small-gutter { margin-left: -5px; }
  .row.small-gutter > .col { margin-left: 5px; }
  .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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: calc(100% - 5px); max-width: calc(100% - 5px); }
  .row.no-gutter { margin-left: 0; }
  .row.no-gutter > .col { margin-left: 0; }
  .row.no-gutter > .col.phablet-1 { -webkit-flex-basis: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; width: 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%; width: 16.66667%; max-width: 16.66667%; }
  .row.no-gutter > .col.phablet-3 { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; width: 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%; width: 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%; width: 41.66667%; max-width: 41.66667%; }
  .row.no-gutter > .col.phablet-6 { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; width: 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%; width: 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%; width: 66.66667%; max-width: 66.66667%; }
  .row.no-gutter > .col.phablet-9 { -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; width: 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%; width: 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%; width: 91.66667%; max-width: 91.66667%; }
  .row.no-gutter > .col.phablet-12 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; width: 100%; max-width: 100%; }
  .hide-phablet, .col.hide-phablet { display: none; } }
  
/* Phone
    ====================================================================== */

@media screen and (max-width: 543px) {
    
  .grid { width: 88%; }
    
  .grid .row > .col {margin-top: 25px;}
  .grid .row {margin-top: 0px;}
  .grid + .grid {margin-top: -50px;}
  section + section {margin-top: 0;}
    
  .row, .row.normal-gutter { margin-left: -20px; }
  .row > .col, .row.normal-gutter > .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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: calc(100% - 20px); max-width: calc(100% - 20px); }
  .row.small-gutter { margin-left: -5px; }
  .row.small-gutter > .col { margin-left: 5px; }
  .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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: 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); width: calc(100% - 5px); max-width: calc(100% - 5px); }
    
    
  .row.no-gutter { margin-left: 0; }
  .row.no-gutter > .col { margin-left: 0; }
  .row.no-gutter > .col.phone-1 { -webkit-flex-basis: 8.33333%; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; width: 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%; width: 16.66667%; max-width: 16.66667%; }
  .row.no-gutter > .col.phone-3 { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; width: 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%; width: 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%; width: 41.66667%; max-width: 41.66667%; }
  .row.no-gutter > .col.phone-6 { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; width: 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%; width: 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%; width: 66.66667%; max-width: 66.66667%; }
  .row.no-gutter > .col.phone-9 { -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; width: 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%; width: 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%; width: 91.66667%; max-width: 91.66667%; }
  .row.no-gutter > .col.phone-12 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; width: 100%; max-width: 100%; }
  .hide-phone, .col.hide-phone { display: none; } }