@charset "UTF-8";

/* ============================================================
     SiteUP! (c) J. Alejandro Ceballos Z.
       Name: siteup-base.css - Build 2503
    License: MIT - https://tldrlegal.com/license/mit-license
             --------------------------------------------------
   Based on: https://html.spec.whatwg.org/multipage/rendering.html
             https://siteuptools.org
   ============================================================ */

/*
    Scale used: 0.125, 0.25, 0.375, 0.625, 1.0, 1.625, 2.625, 4.35, 6.975
                em for data blocks , rem for text elements
    Breakpoints:
            < 360px         (N)ano              Watches, devices
        360px - 479px       (T)iny              Old mobiles, mobile portait
        480px - 767px       (S)mall             Mobile landscape, tablet portait
        768px - 1023px      (M)edium            Tablet landscape, small desktop
        1024px - 1919px     (L)arge             Medium desktop, large desktop
            1920px <=       (W)ide              Extralarge desktops, wide screends
    Practical breakpoints:
        360px - 767px       practical-(S)mall   Mobiles
        768px - 1279px      practical-(M)edium  Tablets (*default)
        1280px <=           practical-(L)arge   Desktops
*/

/* ============================================================ [ Non-replaced elements */

/* ------------------------------------------------------------ [ page

    Default:
        html, body { display: block; }
*/
html {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body {
   font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Open Sans', sans-serif;
   font-weight: 300;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   line-height: 1.625;
   font-size: 100%;
}

/* ------------------------------------------------------------ [ flow content

    Default:
        address, blockquote, center, dialog, div, figure, figcaption, footer, form,
        header, hr, legend, listing, main, p, plaintext, pre, search, xmp { display: block; }
        blockquote, figure, listing, p, plaintext, pre, xmp { margin-block: 1em; }
        blockquote, figure { margin-inline: 40px; }
        address { font-style: italic; }
        listing, plaintext, pre, xmp { font-family: monospace; white-space: pre; }
*/
div {
   margin: 0;
   padding: 0;
}

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

listing,
plaintext,
pre,
xmp {
   font-family: ui-monospace, 'Source Code Pro', Menlo, Consolas, monospace;
   overflow: auto;
}

p {
   line-height: 1.625;
   text-indent: 0;
   orphans: 3;
   widows: 3;
}

code,
kbd {
   margin: 1.625rem
}

blockquote {
   margin-left: 1.625rem;
   padding-left: 0.625rem;
   border-left: 1px solid #999;
}

figcaption {
   font-weight: 400;
}

/* ------------------------------------------------------------ [ phrase content

    Default:
        cite, dfn, em, i, var { font-style: italic; }
        b, strong { font-weight: bolder; }
        code, kbd, samp, tt { font-family: monospace; }
        big { font-size: larger; }
        small { font-size: smaller; }
        sub { vertical-align: sub; }
        sup { vertical-align: super; }
        sub, sup { line-height: normal; font-size: smaller; }
        :link { color: #0000EE; }
        :visited { color: #551A8B; }
        :link:active, :visited:active { color: #FF0000; }
        :link, :visited { text-decoration: underline; cursor: pointer; }
        :focus-visible { outline: auto; }
        mark { background: yellow; color: black; }
        abbr[title], acronym[title] { text-decoration: dotted underline; }
        ins, u { text-decoration: underline; }
        del, s, strike { text-decoration: line-through; }
        q::before { content: open-quote; }
        q::after { content: close-quote; }
        br { display-outside: newline; }
        nobr { white-space: nowrap; }
        wbr { display-outside: break-opportunity; }
        nobr wbr { white-space: normal; }
*/
abbr,
acronym {
   font-family: source-sans-pro, Montserrat, Oxygen, Ubuntu, 'Helvetica Neue', sans-serif;
   cursor: help;
}

code,
kbd,
samp,
tt {
   font-family: 'Nimbus Mono PS', 'Courier New', monospace;
}

em,
i {
   font-style: italic;
}

strong,
b {
   font-weight: 700;
}

big,
.big {
   /* larger */
   font-size: 1.125rem;
}

small,
.small {
   /* smaller */
   font-size: 0.875rem;
}

cite {
   font-style: italic;
   word-wrap: break-word;
   white-space: pre;
}

sub,
sup {
   /* smaller */
   font-size: 0.875em;
   vertical-align: baseline;
}

sup {
   vertical-align: super;
}

sub {
   vertical-align: sub;
}

.text-bold {
   font-weight: bold;
}

.text-italic {
   font-style: italic;
}

.text-kbd {
   font-family: monospace;
}

.text-under {
   text-decoration: underline;
}

.text-stroke {
   text-decoration: line-through;
}

.text-blink {
   text-decoration: blink;
}

.text-lower {
   text-transform: lowercase;
}

.text-upper {
   text-transform: uppercase;
}

.text-capital {
   text-transform: capitalize;
}

.text-caps {
   font-variant: small-caps;
}

.text-left {
   text-align: left;
}

.text-right {
   text-align: right;
}

.text-center {
   text-align: center;
}

.text-justify {
   text-align: justify;
}

.font-tiny {
   font-size: 0.375rem;
}

.font-small {
   font-size: 0.625rem;
}

.font-medium {
   font-size: 1.625rem;
}

.font-large {
   font-size: 2.625rem;
}

.font-wide {
   font-size: 4.35rem;
}

.font-dinamic {
   font-size: 1.0rem;
}

a,
:link {
   font-family: source-sans-pro, Montserrat, Oxygen, Ubuntu, 'Helvetica Neue', sans-serif;
   font-weight: 400;
   text-decoration: none;
   cursor: pointer;
}

:link:active,
:visited:active {
   text-decoration: dotted;
}

:link,
:visited {
   text-decoration: none;
}

:focus-visible {
   outline: auto;
}

br.clear {
   clear: both;
}

.br-no:before,
.br-no:after {
   display: block;
   content: "";
}

.br-no:after {
   clear: both;
}

/* ------------------------------------------------------------ [ section and headers

    Default:
        article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section { display: block; }
        h1 { margin-block: 0.67em; font-size: 2.00em; font-weight: bold; }
        h2 { margin-block: 0.83em; font-size: 1.50em; font-weight: bold; }
        h3 { margin-block: 1.00em; font-size: 1.17em; font-weight: bold; }
        h4 { margin-block: 1.33em; font-size: 1.00em; font-weight: bold; }
        h5 { margin-block: 1.67em; font-size: 0.83em; font-weight: bold; }
        h6 { margin-block: 2.33em; font-size: 0.67em; font-weight: bold; }
*/
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: source-sans-pro, Montserrat, Oxygen, Ubuntu, 'Helvetica Neue', sans-serif;
   font-weight: 500;
   color: #222;
}

h1 {
   margin-block: 0.375em;
   font-size: 4.25rem;
}

h2 {
   margin-block: 0.625em;
   font-size: 2.625rem;
}

h3 {
   margin-block: 1.0em;
   font-size: 1.625rem;
}

h4 {
   margin-block: 1.625em;
   font-size: 1.0rem;
}

h5 {
   margin-block: 2.625em;
   font-size: 0.625rem;
}

h6 {
   margin-block: 4.25em;
   font-size: 0.375rem;
}


/* ------------------------------------------------------------ [ lists

    Default:
        dir, dd, dl, dt, menu, ol, ul { display: block; }
        li { display: list-item; text-align: match-parent; }
        dir, dl, menu, ol, ul { margin-block: 1em; }
        :is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) { margin-block: 0;  }
        dd { margin-inline-start: 40px; }
        dir, menu, ol, ul { padding-inline-start: 40px; }
        ol, ul, menu { counter-reset: list-item; }
        ol { list-style-type: decimal; }
        dir, menu, ul { list-style-type: disc; }
        :is(dir, menu, ol, ul) :is(dir, menu, ul) { list-style-type: circle; }
        :is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) { list-style-type: square; }
*/
ul,
ol,
dl {
   line-height: 1.625;
}

dd,
dl,
dt,
ol,
ul {
   margin-block: 1.125rem;
   list-style-position: outside;
   padding-inline-start: 1.0rem;
}

:is(dd, dl, dt, ol, ul):is(dd, dl, dt, ol, ul) {
   margin-block: 0.125rem;
}

dt {
   margin-bottom: 0.25rem;
   font-family: source-sans-pro, Montserrat, Oxygen, Ubuntu, 'Helvetica Neue', sans-serif;
   font-weight: 400;
}

li {
   margin-bottom: 0.375rem;
}

dd {
   margin-bottom: 0.625rem;
}

.list-inline {
   list-style: none;
}

.list-inline>li {
   display: inline-block;
   padding: 0 0.125rem 0 0.125rem;
}

.list-nobullet {
   list-style: none;
}

.list-nobullet>li {
   list-style: none;
}

/* ------------------------------------------------------------ [ forms and buttons

    Default:
        margin:0.325rem; padding:0.125rem;  margin-right(spacer):0.875rem
        form { margin-block-end: 1em; }
        input, button { display: inline-block; }
        input, select, button, textarea {
            letter-spacing: initial;
            word-spacing: initial;
            line-height: initial;
            text-transform: initial;
            text-indent: initial;
            text-shadow: initial;
            appearance: auto;
            }
        input:not([type=image i], [type=range i], [type=checkbox i], [type=radio i]) {
            overflow: clip !important;
            overflow-clip-margin: 0 !important;
            }
        input, select, textarea { text-align: initial; }
        :autofill { field-sizing: fixed !important; }
        input[type=hidden i], input[type=file i], input[type=image i] { appearance: none; }
        input:is([type=radio i], [type=checkbox i], [type=reset i], [type=button i], [type=submit i],
            [type=color i], [type=search i]), select, button { box-sizing: border-box; }
        textarea { white-space: pre-wrap; }
        fieldset {
            display: block;
            margin-inline: 2px;
            border: groove 2px ThreeDFace;
            padding-block: 0.35em 0.625em;
            padding-inline: 0.75em;
            min-inline-size: min-content;
            }
        legend { padding-inline: 2px; }
*/
form {
   margin-block: 1.125rem;
}

/* button */
[type='submit'],
[type='reset'],
button,
.button {
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
   padding: 0.625rem;
   vertical-align: middle;
   line-height: 1.125;
   border-radius: 0.625rem;
   text-transform: capitalize;
   font-weight: 400;
}

/* details and summary */

/* input text entry widget: text, telephone, url, email, password */
[type='text'],
[type='tel'],
[type='url'],
[type='email'],
[type='password'] {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   height: 1.625rem;
   padding: 0.125rem;
   margin-right: 0.875rem;
   line-height: 1.125;
   border-radius: 0.375em;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

/* input domain specific widget: date, month, week, time, local date and time, number */
[type='date'],
[type='month'],
[type='week'],
[type='time'],
[type='datetime-local'],
[type='number'] {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   height: 1.625rem;
   padding: 0.125rem;
   line-height: 1.125;
   border-radius: 0.125em;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

/* input control: range, color, meter, progress */

/* checkbox and radio */
[type='checkbox'],
[type='radio'] {
   margin: 0.625rem;
}

[type='checkbox']:readonly,
[type='radio']:readonly {
   cursor: not-allowed;
}

[type='checkbox']+label,
[type='radio']+label {
   vertical-align: baseline;
   margin-right: 0.625rem;
}

/* file upload*/
[type='file'] {
   margin: 0.625em;
}

/* select */
select {
   height: 6.975rem;
}

select:not([multiple]) {
   height: 2.625rem;
}

optgroup,
option {
   height: 1.625rem;
}

select,
optgroup,
option {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   padding: 0.125rem;
}

optgroup {
   margin: 0.375rem;
}

option:checked {
   font-weight: 400;
}

/* textarea */
textarea {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   height: 4.35rem;
   min-height: 2.625rem;
   padding: 0.125rem;
   margin-right: 1rem;
   line-height: 1.125;
   border-radius: 0.125em;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

/* other*/
input:disabled,
textarea:disabled,
fieldset[disabled] {
   opacity: 0.8;
   cursor: not-allowed;
}

label {
   display: block;
   margin: 0.375rem 0;
   font-variant: small-caps;
}

[type='checkbox']+label,
[type='radio']+label {
   display: inline-block;
}

::placeholder,
::-ms-input-placeholder,
::-webkit-input-placeholder,
::-moz-placeholder {
   color: #999;
}

fieldset {
   margin: 1.625em;
}

legend {
   font-size: 0.625rem;
}

/* ------------------------------------------------------------ [ hr

    Default:
        hr {
            color: gray;
            border-style: inset;
            border-width: 1px;
            margin-block: 0.5em;
            margin-inline: auto;
            overflow: hidden;
            }
*/
hr {
   clear: both;
   height: 0;
   width: 86%;
   margin-left: auto;
   margin-right: auto;
   border: 0;
   border-style: inset;
   border-bottom: #999 1px solid;
}

/* ============================================================ [ Replaced elements (audio, canvas, embed, iframe, img, input, object, video) */

/* ------------------------------------------------------------ [ embed

    Default:
        iframe { border: 2px inset; }
        video { object-fit: contain; }
*/
iframe {
   border: 1px #ccc solid;
}

/* ------------------------------------------------------------ [ images
*/
img {
   display: inline-block;
   vertical-align: baseline;
   max-width: 100%;
   height: auto;
   -ms-interpolation-mode: bicubic;
   page-break-inside: avoid;
}

a img {
   border: 0;
}

figure {
   margin-block: 0.625rem;
   margin-inline: 1.625rem
}

/* ============================================================ [ Structure */

/* ------------------------------------------------------------ [ tables and div.tablealike

    Default:
        table { display: table; }
        caption { display: table-caption; }
        colgroup, colgroup[hidden] { display: table-column-group; }
        col, col[hidden] { display: table-column; }
        thead, thead[hidden] { display: table-header-group; }
        tbody, tbody[hidden] { display: table-row-group; }
        tfoot, tfoot[hidden] { display: table-footer-group; }
        tr, tr[hidden] { display: table-row; }
        td, th { display: table-cell; }
        table {
            box-sizing: border-box;
            border-spacing: 2px;
            border-collapse: separate;
            text-indent: initial;
            }
        td, th { padding: 1px; }
        td[nowrap], th[nowrap] { white-space: nowrap; }
        table[border] { border-style: outset; }
        :is(table, thead, tbody, tfoot, tr) > form { display: none !important; }
*/

/* div class as table */
.caption {
   display: table-caption;
}

.table {
   display: table;
}

.thead {
   display: table-header-group;
}

.tbody {
   display: table-row-group;
}

.tfoot {
   display: table-footer-group;
}

.tr {
   display: table-row;
}

.th,
.td {
   display: table-cell;
}

/* appereance */
table,
.table {
   margin: 0.625rem;
   border-collapse: separate;
   border-spacing: 0.625em;
}

.table-h thead>tr,
.table-h .thead>.tr {
   border-bottom: 1px solid #666;
}

.table-v tr>th:first,
.table-v .tr>.th:first {
   border-right: 1px solid #666;
   text-align: right;
}

th,
.th,
td,
.td {
   padding: 0.375rem;
   vertical-align: top;
}

th,
.th {
   font-weight: 500;
   color: #222;
}

table tfoot>tr,
.table .tfoot>.tr {
   border-top: 1px solid #666;
}

/* style */
.table-nopad th,
.table-nopad .th,
.table-nopad td,
.table-nopad .td {
   padding: 0;
}

.table-pad th,
.table-pad .th,
.table-pad td,
.table-pad .td {
   padding: 0.625rem;
}

/* ------------------------------------------------------------ [ row column
*/
.row {
   margin: 0;
   padding: 0;
   width: 100%;
}

.row:before,
.row:after {
   display: block;
   /*table*/
   content: "";
}

.row:after {
   clear: both;
}

/*  t:97.76%, s:90.83%, (86.78%), m:81.67%, l:76.97%, w:72.11%*/

/*
    row: 100% width
    row-fix: 96.78% width
    row-sec: fixed px width, set to lower breakpoint (responsive)
    row-flex: % of width (responsive)
    row-mgn: fixed em area around, changes on  (responsive)
    row-mgnside: similar to row-mgn, but no top or bottom margin (responsive)
    row-auto: % on width, fixed mgn on top and  (responsive)
    row-equal: set same size of columns (flex)
    row-pad: set padding inside columns (pad)
*/

.row-fix,
.row-sec,
.row-flex {
   margin-left: auto;
   margin-right: auto;
   width: 86.78%;
}

.row-mgn {
   margin: 1.625em 2.625em;
}

.row-mgnside {
   margin: 0 2.625em;
}

.row-auto {
   margin: 1.625em 86.78%;
}

.row-equal {
   display: flex;
}

.row-equal>.col {
   align-items: stretch;
}

.row-pad>.col {
   padding: 0.625em;
}

.col {
   min-height: 100%;
   float: left;
   margin: 0;
   padding: 0;
}

/* base12 */
.col-1 {
   width: 8.3333333%;
}

.col-2 {
   width: 16.6666666%;
}

.col-3 {
   width: 25%;
}

.col-4 {
   width: 33.3333333%;
}

.col-5 {
   width: 41.6666666%;
}

.col-6 {
   width: 50%;
}

.col-7 {
   width: 58.3333333%;
}

.col-8 {
   width: 66.6666666%;
}

.col-9 {
   width: 75%;
}

.col-10 {
   width: 83.3333333%;
}

.col-11 {
   width: 91.6666666%;
}

.col-push1 {
   left: 8.3333333%;
   right: auto;
   position: relative;
}

.col-push2 {
   left: 16.6666666%;
   right: auto;
   position: relative;
}

.col-push3 {
   left: 25%;
   right: auto;
   position: relative;
}

.col-push4 {
   left: 33.3333333%;
   right: auto;
   position: relative;
}

.col-push5 {
   left: 41.6666666%;
   right: auto;
   position: relative;
}

.col-push6 {
   left: 50%;
   right: auto;
   position: relative;
}

.col-push7 {
   left: 58.3333333%;
   right: auto;
   position: relative;
}

.col-push8 {
   left: 66.6666666%;
   right: auto;
   position: relative;
}

.col-push9 {
   left: 75%;
   right: auto;
   position: relative;
}

.col-push10 {
   left: 83.3333333%;
   right: auto;
   position: relative;
}

.col-push11 {
   left: 91.6666666%;
   right: auto;
   position: relative;
}

.col-pull1 {
   right: 8.3333333%;
   left: auto;
   position: relative;
}

.col-pull2 {
   right: 16.6666666%;
   left: auto;
   position: relative;
}

.col-pull3 {
   right: 25%;
   left: auto;
   position: relative;
}

.col-pull4 {
   right: 33.3333333%;
   left: auto;
   position: relative;
}

.col-pull5 {
   right: 41.6666666%;
   left: auto;
   position: relative;
}

.col-pull6 {
   right: 50%;
   left: auto;
   position: relative;
}

.col-pull7 {
   right: 58.3333333%;
   left: auto;
   position: relative;
}

.col-pull8 {
   right: 66.6666666%;
   left: auto;
   position: relative;
}

.col-pull9 {
   right: 75%;
   left: auto;
   position: relative;
}

.col-pull10 {
   right: 83.3333333%;
   left: auto;
   position: relative;
}

.col-pull11 {
   right: 91.6666666%;
   left: auto;
   position: relative;
}

.col-off1 {
   margin-left: 8.3333333%;
}

.col-off2 {
   margin-left: 16.6666666%;
}

.col-off3 {
   margin-left: 25%;
}

.col-off4 {
   margin-left: 33.3333333%;
}

.col-off5 {
   margin-left: 41.6666666%;
}

.col-off6 {
   margin-left: 50%;
}

.col-off7 {
   margin-left: 58.3333333%;
}

.col-off8 {
   margin-left: 66.6666666%;
}

.col-off9 {
   margin-left: 75%;
}

.col-off10 {
   margin-left: 83.3333333%;
}

.col-off11 {
   margin-left: 91.6666666%;
}

.col-nooff {
   margin-left: 0;
}

/* base5 */
.col-1of5 {
   width: 20%;
}

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

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

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

.col-push1of5 {
   left: 20%;
   right: auto;
   position: relative;
}

.col-push2of5 {
   left: 40%;
   right: auto;
   position: relative;
}

.col-push3of5 {
   left: 60%;
   right: auto;
   position: relative;
}

.col-push4of5 {
   left: 80%;
   right: auto;
   position: relative;
}

.col-pull1of5 {
   right: 20%;
   left: auto;
   position: relative;
}

.col-pull2of5 {
   right: 40%;
   left: auto;
   position: relative;
}

.col-pull3of5 {
   right: 60%;
   left: auto;
   position: relative;
}

.col-pull4of5 {
   right: 80%;
   left: auto;
   position: relative;
}

.col-off1of5 {
   margin-left: 20%;
}

.col-off2of5 {
   margin-left: 40%;
}

.col-off3of5 {
   margin-left: 60%;
}

.col-off4of5 {
   margin-left: 80%;
}

/* base7 */
.col-1of7 {
   width: 14.2857142%;
}

.col-2of7 {
   width: 28.5714285%;
}

.col-3of7 {
   width: 42.8571428%;
}

.col-4of7 {
   width: 57.1428571%;
}

.col-5of7 {
   width: 71.4285714%;
}

.col-6of7 {
   width: 85.7142857%;
}

.col-push1of7 {
   left: 14.2857142%;
   right: auto;
   position: relative;
}

.col-push2of7 {
   left: 28.5714285%;
   right: auto;
   position: relative;
}

.col-push3of7 {
   left: 42.8571428%;
   right: auto;
   position: relative;
}

.col-push4of7 {
   left: 57.1428571%;
   right: auto;
   position: relative;
}

.col-push5of7 {
   left: 71.4285714%;
   right: auto;
   position: relative;
}

.col-push6of7 {
   left: 85.7142857%;
   right: auto;
   position: relative;
}

.col-pull1of7 {
   right: 14.2857142%;
   left: auto;
   position: relative;
}

.col-pull2of7 {
   right: 28.5714285%;
   left: auto;
   position: relative;
}

.col-pull3of7 {
   right: 42.8571428%;
   left: auto;
   position: relative;
}

.col-pull4of7 {
   right: 57.1428571%;
   left: auto;
   position: relative;
}

.col-pull5of7 {
   right: 71.4285714%;
   left: auto;
   position: relative;
}

.col-pull6of7 {
   right: 85.7142857%;
   left: auto;
   position: relative;
}

.col-off1of7 {
   margin-left: 14.2857142%;
}

.col-off2of7 {
   margin-left: 28.5714285%;
}

.col-off3of7 {
   margin-left: 42.8571428%;
}

.col-off4of7 {
   margin-left: 57.1428571%;
}

.col-off5of7 {
   margin-left: 71.4285714%;
}

.col-off6of7 {
   margin-left: 85.7142857%;
}

/* ------------------------------------------------------------ [ grid.cell (config for 12)
*/
.grid {
   display: grid;
}

.grid-inline,
.grid-collapsed {
   display: inline-grid;
}

.grid-1 {
   grid-template-columns: auto;
}

.grid-2 {
   grid-template-columns: auto auto;
}

.grid-3 {
   grid-template-columns: auto auto auto;
}

.grid-4 {
   grid-template-columns: auto auto auto auto;
}

.grid-5 {
   grid-template-columns: auto auto auto auto auto;
}

.grid-6 {
   grid-template-columns: auto auto auto auto auto auto;
}

.grid-7 {
   grid-template-columns: auto auto auto auto auto auto auto;
}

.grid-8 {
   grid-template-columns: auto auto auto auto auto auto auto auto;
}

.grid-9 {
   grid-template-columns: auto auto auto auto auto auto auto auto auto;
}

.grid-10 {
   grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
}

.grid-11 {
   grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;
}

.grid-12 {
   grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
}

.grid-nogap {
   grid-gap: none;
}

.grid-gaptiny {
   grid-gap: 0.25em;
}

.grid-gapsmall {
   grid-gap: 0.375em;
}

.grid-gapmedium {
   grid-gap: 0.625em;
}

.grid-gap {
   grid-gap: 1.0em;
}

.grid-gaplarge {
   grid-gap: 1.625em;
}

.grid-gapwide {
   grid-gap: 2.625em;
}

.grid-center,
.grid-centerx {
   justify-content: center;
}

.grid-justify,
.grid-justifyx {
   justify-content: space-around;
}

.grid-spaced,
.grid-spacedx {
   justify-content: space-evenly;
}

.grid-extreme,
.grid-extremex {
   justify-content: space-between;
}

.grid-center,
.grid-centery {
   align-content: center;
}

.grid-justify,
.grid-justifyy {
   align-content: space-around;
}

.grid-spaced,
.grid-spacedy {
   align-content: space-evenly;
}

.grid-extreme,
.grid-extremey {
   align-content: space-between;
}

.grid-top {
   align-content: start;
}

.grid-right {
   justify-content: end;
}

.grid-bottom {
   align-content: end;
}

.grid-left {
   justify-content: start;
}

.grid>.cell,
.grid-inline>.cell,
.grid-collapsed>.cell {
   padding: 0.625rem;
}

.grid-nopad>.cell {
   padding: 0;
}

.cell-colspan2 {
   grid-column: span 2;
}

.cell-colspan3 {
   grid-column: span 3;
}

.cell-colspan4 {
   grid-column: span 4;
}

.cell-colspan5 {
   grid-column: span 5;
}

.cell-colspan6 {
   grid-column: span 6;
}

.cell-colspan7 {
   grid-column: span 7;
}

.cell-colspan8 {
   grid-column: span 8;
}

.cell-colspan9 {
   grid-column: span 9;
}

.cell-colspan10 {
   grid-column: span 10;
}

.cell-colspan11 {
   grid-column: span 11;
}

.cell-colspan12 {
   grid-column: span 12;
}

.cell-rowspan2 {
   grid-row: span 2;
}

.cell-rowspan3 {
   grid-row: span 3;
}

.cell-rowspan4 {
   grid-row: span 4;
}

.cell-rowspan5 {
   grid-row: span 5;
}

.cell-rowspan6 {
   grid-row: span 6;
}

.cell-rowspan7 {
   grid-row: span 7;
}

.cell-rowspan8 {
   grid-row: span 8;
}

.cell-rowspan9 {
   grid-row: span 9;
}

.cell-rowspan10 {
   grid-row: span 10;
}

.cell-rowspan11 {
   grid-row: span 11;
}

.cell-rowspan12 {
   grid-row: span 12;
}

/* ------------------------------------------------------------ [ flex (dynamic grid)
*/
.flex {
   display: flex;
}

.flex-row {
   flex-flow: row;
}

.flex-column {
   flex-flow: column;
}

.flex-wrap {
   flex-wrap: wrap;
}

.flex-nowrap {
   flex-wrap: nowrap;
}

.flex-start {
   justify-content: flex-start;
}

.flex-center {
   justify-content: center;
}

.flex-end {
   justify-content: flex-end;
}

.flex-around {
   justify-content: space-around;
}

.flex-justify {
   justify-content: space-between;
}

.flex-alternate {
   justify-content: space-evenly;
}

.flex-middle {
   align-items: center;
}

.flex-stretch {
   align-items: stretch;
}

.flex-grow {
   flex-grow: 1;
}

.flex-nogrow {
   flex-grow: 0;
}

.flex-shrink {
   flex-shrink: 1;
}

.flex-noshrink {
   flex-shrink: 0;
}

/* ------------------------------------------------------------ [ margin, padding and containers
*/
.mgn {
   margin: 1.625em;
}

.mgn-top {
   margin-top: 1.625em;
}

.mgn-right {
   margin-right: 1.625em;
}

.mgn-bottom {
   margin-bottom: 1.625em;
}

.mgn-left {
   margin-left: 1.625em;
}

.mgn-tiny {
   margin: 0.375em;
}

.mgn-small {
   margin: 0.625em;
}

.mgn-medium {
   margin: 1.0em;
}

.mgn-large {
   margin: 2.625em;
}

.mgn-wide {
   margin: 4.35em;
}

.mgn-auto {
   margin: 6.25%;
}

.mgn-no,
.container-no {
   margin: 0;
}

.mgn-notop,
.container-notop {
   margin-top: 0;
}

.mgn-noright,
.container-noright {
   margin-right: 0;
}

.mgn-nobottom,
.container-nobottom {
   margin-bottom: 0;
}

.mgn-noleft,
.container-noleft {
   margin-left: 0;
}

.mgn-noblock {
   margin-block: 0;
}

.pad {
   padding: 1.625em;
}

.pad-top {
   padding-top: 1.625em;
}

.pad-right {
   padding-right: 1.625em;
}

.pad-bottom {
   padding-bottom: 1.625em;
}

.pad-left {
   padding-left: 1.625em;
}

.pad-tiny {
   padding: 0.375em;
}

.pad-small {
   padding: 0.625em;
}

.pad-medium {
   padding: 1.0em;
}

.pad-large {
   padding: 2.625em;
}

.pad-wide {
   padding: 4.35em;
}

.pad-auto {
   padding: 6.25%;
}

.pad-no,
.container-no {
   padding: 0;
}

.pad-notop,
.container-notop {
   padding-top: 0;
}

.pad-noright,
.container-noright {
   padding-right: 0;
}

.pad-nobottom,
.container-nobottom {
   padding-bottom: 0;
}

.pad-noleft,
.container-noleft {
   padding-left: 0;
}

.container {
   margin: 5.0%;
   padding: 5.0%;
}

.container-center {
   margin: 5.0% auto;
   padding: 5.0%;
}

.container-tiny {
   margin: 0.625%;
   padding: 0.625%;
}

.container-small {
   margin: 1.875%;
   padding: 1.875%;
}

.container-medium {
   margin: 3.125%;
   padding: 3.125%;
}

.container-large {
   margin: 8.125%;
   padding: 8.125%;
}

.container-wide {
   margin: 13.125%;
   padding: 13.125%;
}

/* ------------------------------------------------------------ [ position and dimension
*/
.left {
   float: left;
}

.right {
   float: right;
}

.center {
   margin-left: auto;
   margin-right: auto;
}

.top {
   vertical-align: top;
}

.middle {
   vertical-align: middle;
}

.bottom {
   vertical-align: bottom;
}

.size-10w {
   width: 10%;
}

.size-20w {
   width: 20%;
}

.size-25w {
   width: 25%;
}

.size-30w {
   width: 30%;
}

.size-33w {
   width: 33.3333333333333333333333%;
}

.size-40w {
   width: 40%;
}

.size-50x,
.size-half,
.size-halfw {
   width: 50%;
}

.size-60w {
   width: 60%;
}

.size-66w {
   width: 66.6666666666666666666666%;
}

.size-70w {
   width: 70%;
}

.size-75w {
   width: 75%;
}

.size-80w {
   width: 80%;
}

.size-90w {
   width: 90%;
}

.size-100w,
.size-full,
.size-fullw {
   width: 100%;
}

.size-10h {
   height: 10%;
}

.size-20h {
   height: 20%;
}

.size-25h {
   height: 25%;
}

.size-30h {
   height: 30%;
}

.size-33h {
   height: 33.3333333333333333333333%;
}

.size-40h {
   height: 40%;
}

.size-50x,
.size-half,
.size-halfw {
   height: 50%;
}

.size-60h {
   height: 60%;
}

.size-66h {
   height: 66.6666666666666666666666%;
}

.size-70h {
   height: 70%;
}

.size-75h {
   height: 75%;
}

.size-80h {
   height: 80%;
}

.size-90h {
   height: 90%;
}

.size-100h,
.size-full,
.size-fullh {
   height: 100%;
}

/* view units vh (dvh, lvh, svh) /  vw (dvw, lvw, svw)  */
.size-fullv,
.size-fullvw {
   width: 100svw;
}

.size-fullv,
.size-fullvh {
   height: 100svh;
}

.size-halfv,
.size-halfvw {
   width: 50svw;
}

.size-halfv,
.size-halfvh {
   height: 50svh;
}

/* ============================================================ [ Effects */

/* ------------------------------------------------------------ [ border, round
*/
.round-no {
   border-radius: 0;
}

.round-tiny {
   border-radius: 0.125em;
}

.round-small {
   border-radius: 0.25em;
}

.round-medium {
   border-radius: 0.375em;
}

.round {
   border-radius: 0.625em;
}

.round-large {
   border-radius: 1.0em;
}

.round-wide {
   border-radius: 1.625em;
}

.round-quarter {
   border-radius: 12.5%;
}

.round-half {
   border-radius: 25%;
}

.round-full {
   border-radius: 50%;
}

.round-topleft {
   border-top-left-radius: 0.625em;
}

.round-topright {
   border-top-right-radius: 0.625em;
}

.round-bottomleft {
   border-bottom-left-radius: 0.625em;
}

.round-bottomright {
   border-bottom-right-radius: 0.625em;
}

.border-no {
   border: 0;
}

.border-tiny {
   border: 1px #666 solid;
}

.border {
   border: 0.125em #666 solid;
}

.border-small {
   border: 0.25em #666 solid;
}

.border-medium {
   border: 0.375em #666 solid;
}

.border-large {
   border: 0.625em #666 solid;
}

.border-wide {
   border: 1.0em #666 solid;
}

.border-top {
   border-top: 0.125em #666 solid;
}

.border-right {
   border-right: 0.125em #666 solid;
}

.border-bottom {
   border-bottom: 0.125em #666 solid;
}

.border-left {
   border-left: 0.125em #666 solid;
}

/* ------------------------------------------------------------ [ visibility
*/
.show {
   display: block;
}

.hide {
   display: none;
}

@media (orientation:landscape) {
   .show-h {
      display: block;
   }

   .hide-h {
      display: none;
   }

}

@media (orientation:portrait) {
   .show-v {
      display: block;
   }

   .hide-v {
      display: none;
   }

}

/* ------------------------------------------------------------ [ notification
*/
.bkg-critical {
   background-color: #914;
}

.bkg-danger {
   background-color: #d02;
}

.bkg-alert {
   background-color: #f73;
}

.bkg-warning {
   background-color: #fc2;
}

.bkg-success {
   background-color: #0b2;
}

.bkg-inform {
   background-color: #05e;
}

.bkg-note {
   background-color: #ccc;
}

.text-critical {
   color: #914;
}

.text-danger {
   color: #d02;
}

.text-alert {
   color: #f73;
}

.text-warning {
   color: #fc2;
}

.text-success {
   color: #0b2;
}

.text-inform {
   color: #05e;
}

.border-critical {
   border-color: #914;
}

.border-danger {
   border-color: #d02;
}

.border-alert {
   border-color: #f73;
}

.border-warning {
   border-color: #fc2;
}

.border-success {
   border-color: #0b2;
}

.border-inform {
   border-color: #05e;
}

.bkg-note {
   color: #ccc;
}

.note {
   color: #999;
}

.error {
   border: 0.2em solid #900;
}