/* =================================================================== 
 *
 *  Typerite Base Stylesheet
 *  Template Ver. 1.1.0
 *  03-15-2021
 *  ------------------------------------------------------------------
 *
 *  TOC:
 *  # imports 
 *  # normalize
 *  # basic/base setup styles
 *      ## Media
 *      ## Typography resets 
 *      ## links
 *      ## inputs
 *  # grid
 *      ## medium screen devices
 *      ## tablets
 *      ## mobile devices
 *      ## small mobile devices
 *  # block grids
 *      ## block grids - medium screen devices
 *      ## block grids - tablets
 *      ## block grids - mobile devices
 *      ## block grids - small mobile devices
 *  # MISC
 *
 * =================================================================== */


/* ===================================================================
 * # imports 
 *
 * ------------------------------------------------------------------- */
 @import url("https://fonts.googleapis.com/css?family=Heebo:300,400,500,600,700|Lora:400,400i,700,700i|IBM+Plex+Sans:300,400,400i,600,700,900");


 /* ==========================================================================
  * # normalize
  * normalize.css v8.0.1 | MIT License |
  * github.com/necolas/normalize.css
  *
  * -------------------------------------------------------------------------- */
 
 /* ------------------------------------------------------------------- 
  * ## document
  * ------------------------------------------------------------------- */
 /* 1. Correct the line height in all browsers.
  * 2. Prevent adjustments of font size after orientation changes in iOS.*/
 html {
     line-height              : 1.15;
     /* 1 */
     -webkit-text-size-adjust : 100%;
     /* 2 */
 }
 
 /* ------------------------------------------------------------------- 
  * ## sections
  * ------------------------------------------------------------------- */
 /* Remove the margin in all browsers. */
 body {
     margin : 0;
 }
 
 /* Render the `main` element consistently in IE. */
 main {
     display : block;
 }
 
 /* Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari. */
 h1 {
     font-size : 2em;
     margin    : 0.67em 0;
 }
 
 /* ------------------------------------------------------------------- 
  * ## grouping
  * ------------------------------------------------------------------- */
 /* 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE. */
 hr {
     box-sizing : content-box;
     /* 1 */
     height     : 0;
     /* 1 */
     overflow   : visible;
     /* 2 */
 }
 
 /* 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers. */
 pre {
     font-family : monospace, monospace;
     /* 1 */
     font-size   : 1em;
     /* 2 */
 }
 
 /* ------------------------------------------------------------------- 
  * ## text-level semantics
  * ------------------------------------------------------------------- */
 /* Remove the gray background on active links in IE 10. */
 a {
     background-color : transparent;
 }
 
 /* 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
 abbr[title] {
     border-bottom   : none;
     /* 1 */
     text-decoration : underline;
     /* 2 */
     text-decoration : underline dotted;
     /* 2 */
 }
 
 /* Add the correct font weight in Chrome, Edge, and Safari. */
 b,
 strong {
     font-weight : bolder;
 }
 
 /* 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers. */
 code,
 kbd,
 samp {
     font-family : monospace, monospace;
     /* 1 */
     font-size   : 1em;
     /* 2 */
 }
 
 /* Add the correct font size in all browsers. */
 small {
     font-size : 80%;
 }
 
 /* Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers. */
 sub,
 sup {
     font-size      : 75%;
     line-height    : 0;
     position       : relative;
     vertical-align : baseline;
 }
 
 sub {
     bottom : -0.25em;
 }
 
 sup {
     top : -0.5em;
 }
 
 /* ------------------------------------------------------------------- 
  * ## embedded content
  * ------------------------------------------------------------------- */
 /* Remove the border on images inside links in IE 10. */
 img {
     border-style : none;
 }
 
 /* ------------------------------------------------------------------- 
  * ## forms
  * ------------------------------------------------------------------- */
 /* 1. Change the font styles in all browsers.
  * 2. Remove the margin in Firefox and Safari. */
 button,
 input,
 optgroup,
 select,
 textarea {
     font-family : inherit;
     /* 1 */
     font-size   : 100%;
     /* 1 */
     line-height : 1.15;
     /* 1 */
     margin      : 0;
     /* 2 */
 }
 
 /* Show the overflow in IE.
  * 1. Show the overflow in Edge. */
 button,
 input {
     /* 1 */
     overflow : visible;
 }
 
 /* Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox. */
 button,
 select {
     /* 1 */
     text-transform : none;
 }
 
 /* Correct the inability to style clickable types in iOS and Safari. */
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
     -webkit-appearance : button;
 }
 
 /* Remove the inner border and padding in Firefox. */
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
     border-style : none;
     padding      : 0;
 }
 
 /* Restore the focus styles unset by the previous rule. */
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
     outline : 1px dotted ButtonText;
 }
 
 /* Correct the padding in Firefox. */
 fieldset {
     padding : 0.35em 0.75em 0.625em;
 }
 
 /* 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  * 3. Remove the padding so developers are not caught out when they zero out
  *    `fieldset` elements in all browsers. */
 legend {
     box-sizing  : border-box;
     /* 1 */
     color       : inherit;
     /* 2 */
     display     : table;
     /* 1 */
     max-width   : 100%;
     /* 1 */
     padding     : 0;
     /* 3 */
     white-space : normal;
     /* 1 */
 }
 
 /* Add the correct vertical alignment in Chrome, Firefox, and Opera. */
 progress {
     vertical-align : baseline;
 }
 
 /* Remove the default vertical scrollbar in IE 10+. */
 textarea {
     overflow : auto;
 }
 
 /* 1. Add the correct box sizing in IE 10.
  * 2. Remove the padding in IE 10. */
 [type="checkbox"],
 [type="radio"] {
     box-sizing : border-box;
     /* 1 */
     padding    : 0;
     /* 2 */
 }
 
 /* Correct the cursor style of increment and decrement buttons in Chrome. */
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
     height : auto;
 }
 
 /* 1. Correct the odd appearance in Chrome and Safari.
  * 2. Correct the outline style in Safari. */
 [type="search"] {
     -webkit-appearance : textfield;
     /* 1 */
     outline-offset     : -2px;
     /* 2 */
 }
 
 /* Remove the inner padding in Chrome and Safari on macOS. */
 [type="search"]::-webkit-search-decoration {
     -webkit-appearance : none;
 }
 
 /* 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari. */
 ::-webkit-file-upload-button {
     -webkit-appearance : button;
     /* 1 */
     font               : inherit;
     /* 2 */
 }
 
 /* ------------------------------------------------------------------- 
  * ## interactive
  * ------------------------------------------------------------------- */
 /* Add the correct display in Edge, IE 10+, and Firefox. */
 details {
     display : block;
 }
 
 /* Add the correct display in all browsers. */
 summary {
     display : list-item;
 }
 
 /* ------------------------------------------------------------------- 
  * ## misc
  * ------------------------------------------------------------------- */
 /* Add the correct display in IE 10+. */
 template {
     display : none;
 }
 
 /* Add the correct display in IE 10. */
 [hidden] {
     display : none;
 }
 
 
 /* ===================================================================
  * # basic/base setup styles
  *
  * ------------------------------------------------------------------- */
 html {
     font-size  : 62.5%;
     box-sizing : border-box;
 }
 
 *,
 *::before,
 *::after {
     box-sizing : inherit;
 }
 
 body {
     font-weight                : normal;
     line-height                : 1;
     word-wrap                  : break-word;
     -moz-font-smoothing        : grayscale;
     -moz-osx-font-smoothing    : grayscale;
     -webkit-font-smoothing     : antialiased;
     -webkit-overflow-scrolling : touch;
     -webkit-text-size-adjust   : none;
 }
 
 /* ------------------------------------------------------------------- 
  * ## Media
  * ------------------------------------------------------------------- */
 svg,
 img,
 video embed,
 iframe,
 object {
     max-width : 100%;
     height    : auto;
 }
 
 /* ------------------------------------------------------------------- 
  * ## Typography resets 
  * ------------------------------------------------------------------- */
 div,
 dl,
 dt,
 dd,
 ul,
 ol,
 li,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 pre,
 form,
 p,
 blockquote,
 th,
 td {
     margin  : 0;
     padding : 0;
     text-align: left!important;
     color: #155711!important;
 }
 
 p {
     font-size      : inherit;
     text-rendering : optimizeLegibility;
     text-align: left!important;
 }
 
 em,
 i {
     font-style  : italic;
     line-height : inherit;
 }
 
 strong,
 b {
     font-weight : bold;
     line-height : inherit;
 }
 
 small {
     font-size   : 60%;
     line-height : inherit;
 }
 
 ol,
 ul {
     list-style : none;
 }
 
 li {
     display : block;
 }
 
 /* ------------------------------------------------------------------- 
  * ## links
  * ------------------------------------------------------------------- */
 a {
     text-decoration : none;
     line-height     : inherit;
 }
 
 a img {
     border : none;
 }
 
 /* ------------------------------------------------------------------- 
  * ## inputs
  * ------------------------------------------------------------------- */
 fieldset {
     margin  : 0;
     padding : 0;
 }
 
 input[type="email"],
 input[type="number"],
 input[type="search"],
 input[type="text"],
 input[type="tel"],
 input[type="url"],
 input[type="password"],
 textarea {
     -webkit-appearance : none;
     -moz-appearance    : none;
     appearance         : none;
 }
 
 
 /* ===================================================================
  * # grid v2.0.1
  *
  *   -----------------------------------------------------------------
  * - Grid breakpoints are based on MAXIMUM WIDTH media queries, 
  *   meaning they apply to that one breakpoint and ALL THOSE BELOW IT.
  * - Grid columns without a specified width will automatically layout 
  *   as equal width columns.
  * ------------------------------------------------------------------- */
 
 /* rows
  * ------------------------------------- */
 .row {
     width             : 89%;
     max-width         : 1200px;
     margin            : 0 auto;
     display           : -ms-flexbox;
     display           : -webkit-flex;
     display           : flex;
     -webkit-flex-flow : row wrap;
     -ms-flex-flow     : row wrap;
     flex-flow         : row wrap;
 }
 
 .row .row {
     width        : auto;
     max-width    : none;
     margin-left  : -20px;
     margin-right : -20px;
 }
 
 /* columns
  * -------------------------------------- */
 .column {
     -webkit-flex : 1 1 0%;
     -ms-flex     : 1 1 0%;
     flex         : 1 1 0%;
     padding      : 0 20px;
 }
 
 .collapse>.column,
 .column.collapse {
     padding : 0;
 }
 
 /* flex row containers utility classes
  * ----------------------------------------- */
 .row.row-wrap {
     -webkit-flex-wrap : wrap;
     -ms-flex-wrap     : wrap;
     flex-wrap         : wrap;
 }
 
 .row.row-nowrap {
     -webkit-flex-wrap : nowrap;
     -ms-flex-wrap     : none;
     flex-wrap         : nowrap;
 }
 
 .row.row-top {
     -webkit-align-items : flex-start;
     -ms-flex-align      : start;
     align-items         : flex-start;
 }
 
 .row.row-bottom {
     -webkit-align-items : flex-end;
     -ms-flex-align      : end;
     align-items         : flex-end;
 }
 
 .row.row-center {
     -webkit-align-items : center;
     -ms-flex-align      : center;
     align-items         : center;
 }
 
 .row.row-stretch {
     -webkit-align-items : stretch;
     -ms-flex-align      : stretch;
     align-items         : stretch;
 }
 
 .row.row-baseline {
     -webkit-align-items : baseline;
     -ms-flex-align      : baseline;
     align-items         : baseline;
 }
 
 /* flex item utility alignment classes
  * ----------------------------------------- */
 .align-center {
     margin              : auto;
     -webkit-align-self  : center;
     -ms-flex-item-align : center;
     align-self          : center;
 }
 
 .align-left {
     margin-right        : auto;
     -webkit-align-self  : center;
     -ms-flex-item-align : center;
     align-self          : center;
 }
 
 .align-right {
     margin-left         : auto;
     -webkit-align-self  : center;
     -ms-flex-item-align : center;
     align-self          : center;
 }
 
 .align-x-center {
     margin-right : auto;
     margin-left  : auto;
 }
 
 .align-x-left {
     margin-right : auto;
 }
 
 .align-x-right {
     margin-left : auto;
 }
 
 .align-y-center {
     -webkit-align-self  : center;
     -ms-flex-item-align : center;
     align-self          : center;
 }
 
 .align-y-top {
     -webkit-align-self  : flex-start;
     -ms-flex-item-align : start;
     align-self          : flex-start;
 }
 
 .align-y-bottom {
     -webkit-align-self  : flex-end;
     -ms-flex-item-align : end;
     align-self          : flex-end;
 }
 
 /* large screen column widths 
  * -------------------------------------- */
 .large-1 {
     -webkit-flex : 0 0 8.33333%;
     -ms-flex     : 0 0 8.33333%;
     flex         : 0 0 8.33333%;
     max-width    : 8.33333%;
 }
 
 .large-2 {
     -webkit-flex : 0 0 16.66667%;
     -ms-flex     : 0 0 16.66667%;
     flex         : 0 0 16.66667%;
     max-width    : 16.66667%;
 }
 
 .large-3 {
     -webkit-flex : 0 0 25%;
     -ms-flex     : 0 0 25%;
     flex         : 0 0 25%;
     max-width    : 25%;
 }
 
 .large-4 {
     -webkit-flex : 0 0 33.33333%;
     -ms-flex     : 0 0 33.33333%;
     flex         : 0 0 33.33333%;
     max-width    : 33.33333%;
 }
 
 .large-5 {
     -webkit-flex : 0 0 41.66667%;
     -ms-flex     : 0 0 41.66667%;
     flex         : 0 0 41.66667%;
     max-width    : 41.66667%;
 }
 
 .large-6,
 .large-half {
     -webkit-flex : 0 0 50%;
     -ms-flex     : 0 0 50%;
     flex         : 0 0 50%;
     max-width    : 50%;
 }
 
 .large-7 {
     -webkit-flex : 0 0 58.33333%;
     -ms-flex     : 0 0 58.33333%;
     flex         : 0 0 58.33333%;
     max-width    : 58.33333%;
 }
 
 .large-8 {
     -webkit-flex : 0 0 66.66667%;
     -ms-flex     : 0 0 66.66667%;
     flex         : 0 0 66.66667%;
     max-width    : 66.66667%;
 }
 
 .large-9 {
     -webkit-flex : 0 0 75%;
     -ms-flex     : 0 0 75%;
     flex         : 0 0 75%;
     max-width    : 75%;
 }
 
 .large-10 {
     -webkit-flex : 0 0 83.33333%;
     -ms-flex     : 0 0 83.33333%;
     flex         : 0 0 83.33333%;
     max-width    : 83.33333%;
 }
 
 .large-11 {
     -webkit-flex : 0 0 91.66667%;
     -ms-flex     : 0 0 91.66667%;
     flex         : 0 0 91.66667%;
     max-width    : 91.66667%;
 }
 
 .large-12,
 .large-full {
     -webkit-flex : 0 0 100%;
     -ms-flex     : 0 0 100%;
     flex         : 0 0 100%;
     max-width    : 100%;
 }
 
 /* ------------------------------------------------------------------- 
  * ## medium screen devices
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .row .row {
         margin-left  : -16px;
         margin-right : -16px;
     }
 
     .column {
         padding : 0 16px;
     }
 
     .medium-1 {
         -webkit-flex : 0 0 8.33333%;
         -ms-flex     : 0 0 8.33333%;
         flex         : 0 0 8.33333%;
         max-width    : 8.33333%;
     }
 
     .medium-2 {
         -webkit-flex : 0 0 16.66667%;
         -ms-flex     : 0 0 16.66667%;
         flex         : 0 0 16.66667%;
         max-width    : 16.66667%;
     }
 
     .medium-3 {
         -webkit-flex : 0 0 25%;
         -ms-flex     : 0 0 25%;
         flex         : 0 0 25%;
         max-width    : 25%;
     }
 
     .medium-4 {
         -webkit-flex : 0 0 33.33333%;
         -ms-flex     : 0 0 33.33333%;
         flex         : 0 0 33.33333%;
         max-width    : 33.33333%;
     }
 
     .medium-5 {
         -webkit-flex : 0 0 41.66667%;
         -ms-flex     : 0 0 41.66667%;
         flex         : 0 0 41.66667%;
         max-width    : 41.66667%;
     }
 
     .medium-6,
     .medium-half {
         -webkit-flex : 0 0 50%;
         -ms-flex     : 0 0 50%;
         flex         : 0 0 50%;
         max-width    : 50%;
     }
 
     .medium-7 {
         -webkit-flex : 0 0 58.33333%;
         -ms-flex     : 0 0 58.33333%;
         flex         : 0 0 58.33333%;
         max-width    : 58.33333%;
     }
 
     .medium-8 {
         -webkit-flex : 0 0 66.66667%;
         -ms-flex     : 0 0 66.66667%;
         flex         : 0 0 66.66667%;
         max-width    : 66.66667%;
     }
 
     .medium-9 {
         -webkit-flex : 0 0 75%;
         -ms-flex     : 0 0 75%;
         flex         : 0 0 75%;
         max-width    : 75%;
     }
 
     .medium-10 {
         -webkit-flex : 0 0 83.33333%;
         -ms-flex     : 0 0 83.33333%;
         flex         : 0 0 83.33333%;
         max-width    : 83.33333%;
     }
 
     .medium-11 {
         -webkit-flex : 0 0 91.66667%;
         -ms-flex     : 0 0 91.66667%;
         flex         : 0 0 91.66667%;
         max-width    : 91.66667%;
     }
 
     .medium-12,
     .medium-full {
         -webkit-flex : 0 0 100%;
         -ms-flex     : 0 0 100%;
         flex         : 0 0 100%;
         max-width    : 100%;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## tablets
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
     .tab-1 {
         -webkit-flex : 0 0 8.33333%;
         -ms-flex     : 0 0 8.33333%;
         flex         : 0 0 8.33333%;
         max-width    : 8.33333%;
     }
 
     .tab-2 {
         -webkit-flex : 0 0 16.66667%;
         -ms-flex     : 0 0 16.66667%;
         flex         : 0 0 16.66667%;
         max-width    : 16.66667%;
     }
 
     .tab-3 {
         -webkit-flex : 0 0 25%;
         -ms-flex     : 0 0 25%;
         flex         : 0 0 25%;
         max-width    : 25%;
     }
 
     .tab-4 {
         -webkit-flex : 0 0 33.33333%;
         -ms-flex     : 0 0 33.33333%;
         flex         : 0 0 33.33333%;
         max-width    : 33.33333%;
     }
 
     .tab-5 {
         -webkit-flex : 0 0 41.66667%;
         -ms-flex     : 0 0 41.66667%;
         flex         : 0 0 41.66667%;
         max-width    : 41.66667%;
     }
 
     .tab-6,
     .tab-half {
         -webkit-flex : 0 0 50%;
         -ms-flex     : 0 0 50%;
         flex         : 0 0 50%;
         max-width    : 50%;
     }
 
     .tab-7 {
         -webkit-flex : 0 0 58.33333%;
         -ms-flex     : 0 0 58.33333%;
         flex         : 0 0 58.33333%;
         max-width    : 58.33333%;
     }
 
     .tab-8 {
         -webkit-flex : 0 0 66.66667%;
         -ms-flex     : 0 0 66.66667%;
         flex         : 0 0 66.66667%;
         max-width    : 66.66667%;
     }
 
     .tab-9 {
         -webkit-flex : 0 0 75%;
         -ms-flex     : 0 0 75%;
         flex         : 0 0 75%;
         max-width    : 75%;
     }
 
     .tab-10 {
         -webkit-flex : 0 0 83.33333%;
         -ms-flex     : 0 0 83.33333%;
         flex         : 0 0 83.33333%;
         max-width    : 83.33333%;
     }
 
     .tab-11 {
         -webkit-flex : 0 0 91.66667%;
         -ms-flex     : 0 0 91.66667%;
         flex         : 0 0 91.66667%;
         max-width    : 91.66667%;
     }
 
     .tab-12,
     .tab-full {
         -webkit-flex : 0 0 100%;
         -ms-flex     : 0 0 100%;
         flex         : 0 0 100%;
         max-width    : 100%;
     }
 
     .hide-on-tablet {
         display : none;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## mobile devices 
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 600px) {
     .row {
         width         : 100%;
         padding-left  : 25px;
         padding-right : 25px;
     }
 
     .row .row {
         margin-left   : -10px;
         margin-right  : -10px;
         padding-left  : 0;
         padding-right : 0;
     }
 
     .column {
         padding : 0 10px;
     }
 
     .mob-1 {
         -webkit-flex : 0 0 8.33333%;
         -ms-flex     : 0 0 8.33333%;
         flex         : 0 0 8.33333%;
         max-width    : 8.33333%;
     }
 
     .mob-2 {
         -webkit-flex : 0 0 16.66667%;
         -ms-flex     : 0 0 16.66667%;
         flex         : 0 0 16.66667%;
         max-width    : 16.66667%;
     }
 
     .mob-3 {
         -webkit-flex : 0 0 25%;
         -ms-flex     : 0 0 25%;
         flex         : 0 0 25%;
         max-width    : 25%;
     }
 
     .mob-4 {
         -webkit-flex : 0 0 33.33333%;
         -ms-flex     : 0 0 33.33333%;
         flex         : 0 0 33.33333%;
         max-width    : 33.33333%;
     }
 
     .mob-5 {
         -webkit-flex : 0 0 41.66667%;
         -ms-flex     : 0 0 41.66667%;
         flex         : 0 0 41.66667%;
         max-width    : 41.66667%;
     }
 
     .mob-6,
     .mob-half {
         -webkit-flex : 0 0 50%;
         -ms-flex     : 0 0 50%;
         flex         : 0 0 50%;
         max-width    : 50%;
     }
 
     .mob-7 {
         -webkit-flex : 0 0 58.33333%;
         -ms-flex     : 0 0 58.33333%;
         flex         : 0 0 58.33333%;
         max-width    : 58.33333%;
     }
 
     .mob-8 {
         -webkit-flex : 0 0 66.66667%;
         -ms-flex     : 0 0 66.66667%;
         flex         : 0 0 66.66667%;
         max-width    : 66.66667%;
     }
 
     .mob-9 {
         -webkit-flex : 0 0 75%;
         -ms-flex     : 0 0 75%;
         flex         : 0 0 75%;
         max-width    : 75%;
     }
 
     .mob-10 {
         -webkit-flex : 0 0 83.33333%;
         -ms-flex     : 0 0 83.33333%;
         flex         : 0 0 83.33333%;
         max-width    : 83.33333%;
     }
 
     .mob-11 {
         -webkit-flex : 0 0 91.66667%;
         -ms-flex     : 0 0 91.66667%;
         flex         : 0 0 91.66667%;
         max-width    : 91.66667%;
     }
 
     .mob-12,
     .mob-full {
         -webkit-flex : 0 0 100%;
         -ms-flex     : 0 0 100%;
         flex         : 0 0 100%;
         max-width    : 100%;
     }
 
     .hide-on-mobile {
         display : none;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## small mobile devices <= 400px
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 400px) {
     .row {
         padding-left  : 22px;
         padding-right : 22px;
     }
 
     .row .row {
         margin-left  : 0;
         margin-right : 0;
     }
 
     .column {
         -webkit-flex : 0 0 100%;
         -ms-flex     : 0 0 100%;
         flex         : 0 0 100%;
         max-width    : 100%;
         width        : 100%;
         margin-left  : 0;
         margin-right : 0;
         padding      : 0;
     }
 }
 
 
 /* ===================================================================
  * # block grids
  *
  * -------------------------------------------------------------------
  * Equally-sized columns define at parent/row level.
  * ------------------------------------------------------------------- */
 .block-large-1-8>.column {
     -webkit-flex : 0 0 12.5%;
     -ms-flex     : 0 0 12.5%;
     flex         : 0 0 12.5%;
     max-width    : 12.5%;
 }
 
 .block-large-1-6>.column {
     -webkit-flex : 0 0 16.66667%;
     -ms-flex     : 0 0 16.66667%;
     flex         : 0 0 16.66667%;
     max-width    : 16.66667%;
 }
 
 .block-large-1-5>.column {
     -webkit-flex : 0 0 20%;
     -ms-flex     : 0 0 20%;
     flex         : 0 0 20%;
     max-width    : 20%;
 }
 
 .block-large-1-4>.column {
     -webkit-flex : 0 0 25%;
     -ms-flex     : 0 0 25%;
     flex         : 0 0 25%;
     max-width    : 25%;
 }
 
 .block-large-1-3>.column {
     -webkit-flex : 0 0 33.33333%;
     -ms-flex     : 0 0 33.33333%;
     flex         : 0 0 33.33333%;
     max-width    : 33.33333%;
 }
 
 .block-large-1-2>.column {
     -webkit-flex : 0 0 50%;
     -ms-flex     : 0 0 50%;
     flex         : 0 0 50%;
     max-width    : 50%;
 }
 
 .block-large-full>.column {
     -webkit-flex : 0 0 100%;
     -ms-flex     : 0 0 100%;
     flex         : 0 0 100%;
     max-width    : 100%;
 }
 
 /* ------------------------------------------------------------------- 
  * ## block grids - medium screen devices
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .block-medium-1-8>.column {
         -webkit-flex : 0 0 12.5%;
         -ms-flex     : 0 0 12.5%;
         flex         : 0 0 12.5%;
         max-width    : 12.5%;
     }
 
     .block-medium-1-6>.column {
         -webkit-flex : 0 0 16.66667%;
         -ms-flex     : 0 0 16.66667%;
         flex         : 0 0 16.66667%;
         max-width    : 16.66667%;
     }
 
     .block-medium-1-5>.column {
         -webkit-flex : 0 0 20%;
         -ms-flex     : 0 0 20%;
         flex         : 0 0 20%;
         max-width    : 20%;
     }
 
     .block-medium-1-4>.column {
         -webkit-flex : 0 0 25%;
         -ms-flex     : 0 0 25%;
         flex         : 0 0 25%;
         max-width    : 25%;
     }
 
     .block-medium-1-3>.column {
         -webkit-flex : 0 0 33.33333%;
         -ms-flex     : 0 0 33.33333%;
         flex         : 0 0 33.33333%;
         max-width    : 33.33333%;
     }
 
     .block-medium-1-2>.column {
         -webkit-flex : 0 0 50%;
         -ms-flex     : 0 0 50%;
         flex         : 0 0 50%;
         max-width    : 50%;
     }
 
     .block-medium-full>.column {
         -webkit-flex : 0 0 100%;
         -ms-flex     : 0 0 100%;
         flex         : 0 0 100%;
         max-width    : 100%;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## block grids - tablets
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
     .block-tab-1-8>.column {
         -webkit-flex : 0 0 12.5%;
         -ms-flex     : 0 0 12.5%;
         flex         : 0 0 12.5%;
         max-width    : 12.5%;
     }
 
     .block-tab-1-6>.column {
         -webkit-flex : 0 0 16.66667%;
         -ms-flex     : 0 0 16.66667%;
         flex         : 0 0 16.66667%;
         max-width    : 16.66667%;
     }
 
     .block-tab-1-5>.column {
         -webkit-flex : 0 0 20%;
         -ms-flex     : 0 0 20%;
         flex         : 0 0 20%;
         max-width    : 20%;
     }
 
     .block-tab-1-4>.column {
         -webkit-flex : 0 0 25%;
         -ms-flex     : 0 0 25%;
         flex         : 0 0 25%;
         max-width    : 25%;
     }
 
     .block-tab-1-3>.column {
         -webkit-flex : 0 0 33.33333%;
         -ms-flex     : 0 0 33.33333%;
         flex         : 0 0 33.33333%;
         max-width    : 33.33333%;
     }
 
     .block-tab-1-2>.column {
         -webkit-flex : 0 0 50%;
         -ms-flex     : 0 0 50%;
         flex         : 0 0 50%;
         max-width    : 50%;
     }
 
     .block-tab-full>.column {
         -webkit-flex : 0 0 100%;
         -ms-flex     : 0 0 100%;
         flex         : 0 0 100%;
         max-width    : 100%;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## block grids - mobile devices
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 600px) {
     .block-mob-1-8>.column {
         -webkit-flex : 0 0 12.5%;
         -ms-flex     : 0 0 12.5%;
         flex         : 0 0 12.5%;
         max-width    : 12.5%;
     }
 
     .block-mob-1-6>.column {
         -webkit-flex : 0 0 16.66667%;
         -ms-flex     : 0 0 16.66667%;
         flex         : 0 0 16.66667%;
         max-width    : 16.66667%;
     }
 
     .block-mob-1-5>.column {
         -webkit-flex : 0 0 20%;
         -ms-flex     : 0 0 20%;
         flex         : 0 0 20%;
         max-width    : 20%;
     }
 
     .block-mob-1-4>.column {
         -webkit-flex : 0 0 25%;
         -ms-flex     : 0 0 25%;
         flex         : 0 0 25%;
         max-width    : 25%;
     }
 
     .block-mob-1-3>.column {
         -webkit-flex : 0 0 33.33333%;
         -ms-flex     : 0 0 33.33333%;
         flex         : 0 0 33.33333%;
         max-width    : 33.33333%;
     }
 
     .block-mob-1-2>.column {
         -webkit-flex : 0 0 50%;
         -ms-flex     : 0 0 50%;
         flex         : 0 0 50%;
         max-width    : 50%;
     }
 
     .block-mob-full>.column {
         -webkit-flex : 0 0 100%;
         -ms-flex     : 0 0 100%;
         flex         : 0 0 100%;
         max-width    : 100%;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## block grids - small mobile devices <= 400px
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 400px) {
     .stack>.column {
         -webkit-flex : 0 0 100%;
         -ms-flex     : 0 0 100%;
         flex         : 0 0 100%;
         max-width    : 100%;
         width        : 100%;
         margin-left  : 0;
         margin-right : 0;
         padding      : 0;
     }
 }
 
 
 /* ===================================================================
  * # MISC
  *
  * ------------------------------------------------------------------- */
 .group:after {
     content : "";
     display : table;
     clear   : both;
 }
 
 /* misc helper classes
  * -------------------------------------- */
 .is-hidden {
     display : none;
 }
 
 .is-invisible {
     visibility : hidden;
 }
 
 .antialiased {
     -webkit-font-smoothing  : antialiased;
     -moz-osx-font-smoothing : grayscale;
 }
 
 .overflow-hidden {
     overflow : hidden;
 }
 
 .remove-bottom {
     margin-bottom : 0;
 }
 
 .add-half-bottom {
     margin-bottom : 1.6rem !important;
 }
 
 .add-bottom {
     margin-bottom : 3.2rem !important;
 }
 
 .no-border {
     border : none;
 }
 
 .full-width {
     width : 100%;
 }
 
 .text-center {
     text-align : center;
 }
 
 .text-left {
     text-align : left;
 }
 
 .text-right {
     text-align : right;
 }
 
 .pull-left {
     float : left;
 }
 
 .pull-right {
     float : right;
 }