/*!
 * 1990KB Grid System.
 * The responsive CSS flexbox grid system by 1990KB.
 *
 * @version 2.4.4
 *
 * @author Kevin Brand
 * @mail   kevin@1990kb.de
 * @url    https://1990kb.de
 *
 * Copyright (c) Kevin Brand
 *
 * @license GPLv3 or later
 *          https://www.gnu.org/licenses/gpl-3.0.html
 */
/*
 * convert pixel values to rem values.
 *
 * @param {unitless} $pixel the unitless pixel value
 * @param {unitless} $base  the unitless root font size for the calculation.
                            defaults to `$grid-base-font-size`
 *
 * @return {rem} rem value
 */
/**
 * format a number.
 *
 * @uses sass:math
 +
 * @param {number} $number   the (unitless) number to format
 * @param {number} $decimals the (unitless) number of decimals after the `.`
 */
/**
 * returns the `calc()` formular that calculates the column width
 * based on the number of grid columns, column span, and (vertical) gap width.
 *
 * @since 2.4.0
 *
 * @param {unitless} $grid-columns the max number of grid columns
 * @param {unitless} $column-span  the current column span
 * @param {unit}     $gap          the size of the (vertical) gaps
 *
 * @return {calc()}
 */
/**
 * returns the `calc()` formular that calculates the column offset
 * based on the number of grid columns, offset span, and (vertical) gap width.
 *
 * @since 2.4.0
 *
 * @param {unitless} $grid-columns the max number of grid columns
 * @param {unitless} $offset-span  the current column offset span
 * @param {unit}     $gap          the size of the (vertical) gaps
 *
 * @return {calc()}
*/
.grid {
  --grid-width: auto;
  --grid-max-width: none;
  display: block;
  width: var(--grid-width);
  max-width: var(--grid-max-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.grid.fullsize {
  --grid-width: 100%;
  --grid-max-width: none;
}
.grid::before, .grid::after {
  content: "";
  display: table;
  width: 100%;
  height: 0;
}
.grid.-debug, .grid.-debug .row, .grid.-debug .col {
  background-color: rgba(255, 0, 255, 0.1);
  outline: 1px solid transparent;
  outline-offset: -1px;
}
.grid.-debug:hover {
  outline-color: mediumseagreen;
  background-color: rgba(60, 179, 113, 0.1);
}
.grid.-debug .row:hover {
  outline-color: deepskyblue;
  background-color: rgba(0, 191, 255, 0.1);
}
.grid.-debug .col:hover {
  outline-color: #f0f;
}
.grid.-debug .col {
  min-height: 50px;
  outline-color: rgba(255, 0, 255, 0.25);
}

.row {
  --grid-columns: 12;
  --vertical-gutter-width: 30px;
  --horizontal-gutter-width: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  box-sizing: border-box;
  gap: var(--horizontal-gutter-width) var(--vertical-gutter-width);
}
.row + .row {
  margin-top: var(--horizontal-gutter-width);
}
.row > .col {
  --column-span: var(--grid-columns);
  --column-offset-span: 0;
  display: block;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: calc((100% - ( ( var(--grid-columns) - 1 ) * var(--vertical-gutter-width))) * ( var(--column-span) / var(--grid-columns) ) + (var(--column-span) - 1) * var(--vertical-gutter-width));
  margin-left: calc((100% - ( ( var(--grid-columns) - 1 ) * var(--vertical-gutter-width))) * ( var(--column-offset-span) / var(--grid-columns) ) + var(--column-offset-span) * var(--vertical-gutter-width));
}
.row > .col > *:not(.row):nth-child(1) {
  margin-top: 0;
}
.row > .col > *:not(.row):nth-last-child(1) {
  margin-bottom: 0;
}
.row.top {
  align-items: flex-start;
}
.row.middle {
  align-items: center;
}
.row.bottom {
  align-items: flex-end;
}
.row.left {
  justify-content: flex-start;
}
.row.center {
  justify-content: center;
}
.row.right {
  justify-content: flex-end;
}

/*
 * prints the grid elements for each breakpoint.
 * - @media rules
 * - grid sizes
 * - column gutters
 * - column sizes
 *
 * @since 2.2.3 preferred row gutter classes are now: `gutter-v-normal`
 *              `gutter-v-small` and `gutter-v-none`. the old
 *              row gutter classes are still available for back compat (for now).
 * @since 2.3.0 column gutters are now handled by css custom properties (css vars) for both
 *              directions: vertical and horizontal. this allows themes to override gutters
 *              for each direction individually.
 * @since 2.3.1 grid sizes, column gutters and column sizes are now controled via CSS variables.
 *
 * @param map $breakpoints the breakpoints map
 *                         @see the default '$flxbx-breakpoints' map
 */
/* wrap a content of CSS into media rules (@media).
 * if $media-rule is empty or false no @media rule is applied
 *
 * @access private.
 *
 * @param string|bool $media-rule valid media rule css string (without the '@media' @-rule)
 */
/*
GRID BREAKPOINT "desktop"

  - columns:                         12
  - grid width:                      90%
  - grid max width:                  70.5rem
  - vertical gutter width:           1.5rem
  - vertical gutter width (small):   0.25rem
  - horizontal gutter width:         1.5rem
  - horizontal gutter width (small): 0.25rem
*/
@media all and (min-width: 75em) {
  .grid {
    --grid-width: 90%;
    --grid-max-width: 70.5rem ;
  }
  .row {
    --grid-columns: 12;
    --vertical-gutter-width: 1.5rem;
    --horizontal-gutter-width: 1.5rem;
  }
  .row > .col.desktop-1 {
    --column-span: 1;
  }
  .row > .col.offset-desktop-1 {
    --column-offset-span: 1;
  }
  .row > .col.desktop-2 {
    --column-span: 2;
  }
  .row > .col.offset-desktop-2 {
    --column-offset-span: 2;
  }
  .row > .col.desktop-3 {
    --column-span: 3;
  }
  .row > .col.offset-desktop-3 {
    --column-offset-span: 3;
  }
  .row > .col.desktop-4 {
    --column-span: 4;
  }
  .row > .col.offset-desktop-4 {
    --column-offset-span: 4;
  }
  .row > .col.desktop-5 {
    --column-span: 5;
  }
  .row > .col.offset-desktop-5 {
    --column-offset-span: 5;
  }
  .row > .col.desktop-6 {
    --column-span: 6;
  }
  .row > .col.offset-desktop-6 {
    --column-offset-span: 6;
  }
  .row > .col.desktop-7 {
    --column-span: 7;
  }
  .row > .col.offset-desktop-7 {
    --column-offset-span: 7;
  }
  .row > .col.desktop-8 {
    --column-span: 8;
  }
  .row > .col.offset-desktop-8 {
    --column-offset-span: 8;
  }
  .row > .col.desktop-9 {
    --column-span: 9;
  }
  .row > .col.offset-desktop-9 {
    --column-offset-span: 9;
  }
  .row > .col.desktop-10 {
    --column-span: 10;
  }
  .row > .col.offset-desktop-10 {
    --column-offset-span: 10;
  }
  .row > .col.desktop-11 {
    --column-span: 11;
  }
  .row > .col.offset-desktop-11 {
    --column-offset-span: 11;
  }
  .row > .col.desktop-12 {
    --column-span: 12;
  }
  .row > .col.offset-desktop-12 {
    --column-offset-span: 12;
  }
  .row.normal-gutter,
  .row.gutter-v-normal {
    --vertical-gutter-width: 1.5rem;
  }
  .row.normal-gutter,
  .row.gutter-h-normal {
    --horizontal-gutter-width: 1.5rem;
  }
  .row.small-gutter,
  .row.gutter-v-small {
    --vertical-gutter-width: 0.25rem;
  }
  .row.small-gutter,
  .row.gutter-h-small {
    --horizontal-gutter-width: 0.25rem;
  }
  .row.no-gutter,
  .row.gutter-v-none {
    --vertical-gutter-width: 0px;
  }
  .row.no-gutter,
  .row.gutter-h-none {
    --horizontal-gutter-width: 0px;
  }
  .hide-desktop,
  .col.hide-desktop {
    display: none !important;
  }
  .order-desktop-1,
  .col.order-desktop-1 {
    order: 1;
  }
  .order-desktop-2,
  .col.order-desktop-2 {
    order: 2;
  }
  .order-desktop-3,
  .col.order-desktop-3 {
    order: 3;
  }
  .order-desktop-4,
  .col.order-desktop-4 {
    order: 4;
  }
  .order-desktop-5,
  .col.order-desktop-5 {
    order: 5;
  }
  .order-desktop-6,
  .col.order-desktop-6 {
    order: 6;
  }
  .order-desktop-7,
  .col.order-desktop-7 {
    order: 7;
  }
  .order-desktop-8,
  .col.order-desktop-8 {
    order: 8;
  }
  .order-desktop-9,
  .col.order-desktop-9 {
    order: 9;
  }
  .order-desktop-10,
  .col.order-desktop-10 {
    order: 10;
  }
  .order-desktop-11,
  .col.order-desktop-11 {
    order: 11;
  }
  .order-desktop-12,
  .col.order-desktop-12 {
    order: 12;
  }
}
/*
GRID BREAKPOINT "tablet"

  - columns:                         12
  - grid width:                      90%
  - grid max width:                  56.25rem
  - vertical gutter width:           1.875rem
  - vertical gutter width (small):   0.3125rem
  - horizontal gutter width:         1.875rem
  - horizontal gutter width (small): 0.3125rem
*/
@media all and (min-width: 56.25em) and (max-width: 74.9375em) {
  .grid {
    --grid-width: 90%;
    --grid-max-width: 56.25rem ;
  }
  .row {
    --grid-columns: 12;
    --vertical-gutter-width: 1.875rem;
    --horizontal-gutter-width: 1.875rem;
  }
  .row > .col.tablet-1 {
    --column-span: 1;
  }
  .row > .col.offset-tablet-1 {
    --column-offset-span: 1;
  }
  .row > .col.tablet-2 {
    --column-span: 2;
  }
  .row > .col.offset-tablet-2 {
    --column-offset-span: 2;
  }
  .row > .col.tablet-3 {
    --column-span: 3;
  }
  .row > .col.offset-tablet-3 {
    --column-offset-span: 3;
  }
  .row > .col.tablet-4 {
    --column-span: 4;
  }
  .row > .col.offset-tablet-4 {
    --column-offset-span: 4;
  }
  .row > .col.tablet-5 {
    --column-span: 5;
  }
  .row > .col.offset-tablet-5 {
    --column-offset-span: 5;
  }
  .row > .col.tablet-6 {
    --column-span: 6;
  }
  .row > .col.offset-tablet-6 {
    --column-offset-span: 6;
  }
  .row > .col.tablet-7 {
    --column-span: 7;
  }
  .row > .col.offset-tablet-7 {
    --column-offset-span: 7;
  }
  .row > .col.tablet-8 {
    --column-span: 8;
  }
  .row > .col.offset-tablet-8 {
    --column-offset-span: 8;
  }
  .row > .col.tablet-9 {
    --column-span: 9;
  }
  .row > .col.offset-tablet-9 {
    --column-offset-span: 9;
  }
  .row > .col.tablet-10 {
    --column-span: 10;
  }
  .row > .col.offset-tablet-10 {
    --column-offset-span: 10;
  }
  .row > .col.tablet-11 {
    --column-span: 11;
  }
  .row > .col.offset-tablet-11 {
    --column-offset-span: 11;
  }
  .row > .col.tablet-12 {
    --column-span: 12;
  }
  .row > .col.offset-tablet-12 {
    --column-offset-span: 12;
  }
  .row.normal-gutter,
  .row.gutter-v-normal {
    --vertical-gutter-width: 1.875rem;
  }
  .row.normal-gutter,
  .row.gutter-h-normal {
    --horizontal-gutter-width: 1.875rem;
  }
  .row.small-gutter,
  .row.gutter-v-small {
    --vertical-gutter-width: 0.3125rem;
  }
  .row.small-gutter,
  .row.gutter-h-small {
    --horizontal-gutter-width: 0.3125rem;
  }
  .row.no-gutter,
  .row.gutter-v-none {
    --vertical-gutter-width: 0px;
  }
  .row.no-gutter,
  .row.gutter-h-none {
    --horizontal-gutter-width: 0px;
  }
  .hide-tablet,
  .col.hide-tablet {
    display: none !important;
  }
  .order-tablet-1,
  .col.order-tablet-1 {
    order: 1;
  }
  .order-tablet-2,
  .col.order-tablet-2 {
    order: 2;
  }
  .order-tablet-3,
  .col.order-tablet-3 {
    order: 3;
  }
  .order-tablet-4,
  .col.order-tablet-4 {
    order: 4;
  }
  .order-tablet-5,
  .col.order-tablet-5 {
    order: 5;
  }
  .order-tablet-6,
  .col.order-tablet-6 {
    order: 6;
  }
  .order-tablet-7,
  .col.order-tablet-7 {
    order: 7;
  }
  .order-tablet-8,
  .col.order-tablet-8 {
    order: 8;
  }
  .order-tablet-9,
  .col.order-tablet-9 {
    order: 9;
  }
  .order-tablet-10,
  .col.order-tablet-10 {
    order: 10;
  }
  .order-tablet-11,
  .col.order-tablet-11 {
    order: 11;
  }
  .order-tablet-12,
  .col.order-tablet-12 {
    order: 12;
  }
}
/*
GRID BREAKPOINT "phablet"

  - columns:                         12
  - grid width:                      90%
  - grid max width:                  37.5rem
  - vertical gutter width:           1.25rem
  - vertical gutter width (small):   0.3125rem
  - horizontal gutter width:         1.25rem
  - horizontal gutter width (small): 0.3125rem
*/
@media all and (min-width: 37.5em) and (max-width: 56.1875em) {
  .grid {
    --grid-width: 90%;
    --grid-max-width: 37.5rem ;
  }
  .row {
    --grid-columns: 12;
    --vertical-gutter-width: 1.25rem;
    --horizontal-gutter-width: 1.25rem;
  }
  .row > .col.phablet-1 {
    --column-span: 1;
  }
  .row > .col.offset-phablet-1 {
    --column-offset-span: 1;
  }
  .row > .col.phablet-2 {
    --column-span: 2;
  }
  .row > .col.offset-phablet-2 {
    --column-offset-span: 2;
  }
  .row > .col.phablet-3 {
    --column-span: 3;
  }
  .row > .col.offset-phablet-3 {
    --column-offset-span: 3;
  }
  .row > .col.phablet-4 {
    --column-span: 4;
  }
  .row > .col.offset-phablet-4 {
    --column-offset-span: 4;
  }
  .row > .col.phablet-5 {
    --column-span: 5;
  }
  .row > .col.offset-phablet-5 {
    --column-offset-span: 5;
  }
  .row > .col.phablet-6 {
    --column-span: 6;
  }
  .row > .col.offset-phablet-6 {
    --column-offset-span: 6;
  }
  .row > .col.phablet-7 {
    --column-span: 7;
  }
  .row > .col.offset-phablet-7 {
    --column-offset-span: 7;
  }
  .row > .col.phablet-8 {
    --column-span: 8;
  }
  .row > .col.offset-phablet-8 {
    --column-offset-span: 8;
  }
  .row > .col.phablet-9 {
    --column-span: 9;
  }
  .row > .col.offset-phablet-9 {
    --column-offset-span: 9;
  }
  .row > .col.phablet-10 {
    --column-span: 10;
  }
  .row > .col.offset-phablet-10 {
    --column-offset-span: 10;
  }
  .row > .col.phablet-11 {
    --column-span: 11;
  }
  .row > .col.offset-phablet-11 {
    --column-offset-span: 11;
  }
  .row > .col.phablet-12 {
    --column-span: 12;
  }
  .row > .col.offset-phablet-12 {
    --column-offset-span: 12;
  }
  .row.normal-gutter,
  .row.gutter-v-normal {
    --vertical-gutter-width: 1.25rem;
  }
  .row.normal-gutter,
  .row.gutter-h-normal {
    --horizontal-gutter-width: 1.25rem;
  }
  .row.small-gutter,
  .row.gutter-v-small {
    --vertical-gutter-width: 0.3125rem;
  }
  .row.small-gutter,
  .row.gutter-h-small {
    --horizontal-gutter-width: 0.3125rem;
  }
  .row.no-gutter,
  .row.gutter-v-none {
    --vertical-gutter-width: 0px;
  }
  .row.no-gutter,
  .row.gutter-h-none {
    --horizontal-gutter-width: 0px;
  }
  .hide-phablet,
  .col.hide-phablet {
    display: none !important;
  }
  .order-phablet-1,
  .col.order-phablet-1 {
    order: 1;
  }
  .order-phablet-2,
  .col.order-phablet-2 {
    order: 2;
  }
  .order-phablet-3,
  .col.order-phablet-3 {
    order: 3;
  }
  .order-phablet-4,
  .col.order-phablet-4 {
    order: 4;
  }
  .order-phablet-5,
  .col.order-phablet-5 {
    order: 5;
  }
  .order-phablet-6,
  .col.order-phablet-6 {
    order: 6;
  }
  .order-phablet-7,
  .col.order-phablet-7 {
    order: 7;
  }
  .order-phablet-8,
  .col.order-phablet-8 {
    order: 8;
  }
  .order-phablet-9,
  .col.order-phablet-9 {
    order: 9;
  }
  .order-phablet-10,
  .col.order-phablet-10 {
    order: 10;
  }
  .order-phablet-11,
  .col.order-phablet-11 {
    order: 11;
  }
  .order-phablet-12,
  .col.order-phablet-12 {
    order: 12;
  }
}
/*
GRID BREAKPOINT "phone"

  - columns:                         12
  - grid width:                      90%
  - grid max width:                  
  - vertical gutter width:           1.25rem
  - vertical gutter width (small):   0.3125rem
  - horizontal gutter width:         1.25rem
  - horizontal gutter width (small): 0.3125rem
*/
@media all and (max-width: 37.4375em) {
  .grid {
    --grid-width: 90%;
  }
  .row {
    --grid-columns: 12;
    --vertical-gutter-width: 1.25rem;
    --horizontal-gutter-width: 1.25rem;
  }
  .row > .col.phone-1 {
    --column-span: 1;
  }
  .row > .col.offset-phone-1 {
    --column-offset-span: 1;
  }
  .row > .col.phone-2 {
    --column-span: 2;
  }
  .row > .col.offset-phone-2 {
    --column-offset-span: 2;
  }
  .row > .col.phone-3 {
    --column-span: 3;
  }
  .row > .col.offset-phone-3 {
    --column-offset-span: 3;
  }
  .row > .col.phone-4 {
    --column-span: 4;
  }
  .row > .col.offset-phone-4 {
    --column-offset-span: 4;
  }
  .row > .col.phone-5 {
    --column-span: 5;
  }
  .row > .col.offset-phone-5 {
    --column-offset-span: 5;
  }
  .row > .col.phone-6 {
    --column-span: 6;
  }
  .row > .col.offset-phone-6 {
    --column-offset-span: 6;
  }
  .row > .col.phone-7 {
    --column-span: 7;
  }
  .row > .col.offset-phone-7 {
    --column-offset-span: 7;
  }
  .row > .col.phone-8 {
    --column-span: 8;
  }
  .row > .col.offset-phone-8 {
    --column-offset-span: 8;
  }
  .row > .col.phone-9 {
    --column-span: 9;
  }
  .row > .col.offset-phone-9 {
    --column-offset-span: 9;
  }
  .row > .col.phone-10 {
    --column-span: 10;
  }
  .row > .col.offset-phone-10 {
    --column-offset-span: 10;
  }
  .row > .col.phone-11 {
    --column-span: 11;
  }
  .row > .col.offset-phone-11 {
    --column-offset-span: 11;
  }
  .row > .col.phone-12 {
    --column-span: 12;
  }
  .row > .col.offset-phone-12 {
    --column-offset-span: 12;
  }
  .row.normal-gutter,
  .row.gutter-v-normal {
    --vertical-gutter-width: 1.25rem;
  }
  .row.normal-gutter,
  .row.gutter-h-normal {
    --horizontal-gutter-width: 1.25rem;
  }
  .row.small-gutter,
  .row.gutter-v-small {
    --vertical-gutter-width: 0.3125rem;
  }
  .row.small-gutter,
  .row.gutter-h-small {
    --horizontal-gutter-width: 0.3125rem;
  }
  .row.no-gutter,
  .row.gutter-v-none {
    --vertical-gutter-width: 0px;
  }
  .row.no-gutter,
  .row.gutter-h-none {
    --horizontal-gutter-width: 0px;
  }
  .hide-phone,
  .col.hide-phone {
    display: none !important;
  }
  .order-phone-1,
  .col.order-phone-1 {
    order: 1;
  }
  .order-phone-2,
  .col.order-phone-2 {
    order: 2;
  }
  .order-phone-3,
  .col.order-phone-3 {
    order: 3;
  }
  .order-phone-4,
  .col.order-phone-4 {
    order: 4;
  }
  .order-phone-5,
  .col.order-phone-5 {
    order: 5;
  }
  .order-phone-6,
  .col.order-phone-6 {
    order: 6;
  }
  .order-phone-7,
  .col.order-phone-7 {
    order: 7;
  }
  .order-phone-8,
  .col.order-phone-8 {
    order: 8;
  }
  .order-phone-9,
  .col.order-phone-9 {
    order: 9;
  }
  .order-phone-10,
  .col.order-phone-10 {
    order: 10;
  }
  .order-phone-11,
  .col.order-phone-11 {
    order: 11;
  }
  .order-phone-12,
  .col.order-phone-12 {
    order: 12;
  }
}