@charset "UTF-8";

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

/*
   Scale used:

      Name/(letter)  Font (text)    Space (blocks) Screen size
      (N)ano         0.125rem       0.25em         320px - 479px
      (T)iny         0.25rem        0.375em        480px - 639px
      (S)mall        0.375rem       0.625em        640px - 767px
      (M)edium       0.625rem       1.0em          768px - 1023px
      Base           1.0rem         1.625em
      (L)arge        1.625rem       2.625em        1024px - 1279px
      (W)ide         2.625rem       4.35em         1280px - 1919px
      (B)road        4.35rem        6.975em        1920px - 2048ox
      (G)iant        6.975rem       11.325em       2560px <=

   Practical breakpoints:
      400px - 799px           practical-(S)mall   Mobiles
      800px - 1199px          practical-(M)edium  Tablets (*default)
      1200px <=               practical-(L)arge   Desktops

   Other (letter) notation:
      (V)ertical  (H)orizontal
*/

/* ============================================================ [ Root values */

:root {
   /* Typo size/weight/line height */
   --font-nano: 0.125rem;
   --font-tiny: 0.25rem;
   --font-small: 0.375rem;
   --font-medium: 0.625rem;
   --font-base: 1.0rem;
   --font-large: 1.625rem;
   --font-wide: 2.625rem;
   --font-broad: 4.35rem;
   --font-giant: 6.975rem;

   --weight-light: 300;
   --weight-normal: 400;
   --weight-medium: 500;
   --weight-bold: 700;

   --line-height: 1.625;

   /* Spacing / Radius */
   --spacing-xnano: 0.125em;
   --spacing-nano: 0.25em;
   --spacing-tiny: 0.375em;
   --spacing-small: 0.625em;
   --spacing-medium: 1.0em;
   --spacing-base: 1.625em;
   --spacing-large: 2.625em;
   --spacing-wide: 4.35em;
   --spacing-broad: 6.975em;
   --spacing-giant: 11.325em;

   /* Colors */
   --color-text: #111;
   --color-gray: #888;
   --color-bkg: #eee;
   --color-critical: #914;
   --color-danger: #d02;
   --color-alert: #f73;
   --color-warning: #fc2;
   --color-success: #0b2;
   --color-inform: #05e;
   --color-note: #ccc;
}

/* ============================================================ [ 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: var(--weight-light);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   line-height: var(--line-height);
   font-size: 100%;
   background-color: var(--color-bkg);
   color: var(--color-text);
   margin: 0;
   padding: 0;
}

/* ------------------------------------------------------------ [ 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: var(--line-height);
   text-indent: 0;
   orphans: 3;
   widows: 3;
}

code,
kbd {
   margin: var(--font-medium)
}

blockquote {
   margin-left: var(--font-medium);
   padding-left: var(--font-small);
   border-left: var(--spacing-base) solid var(--color-note);
}

figcaption {
   font-weight: var(--weight-normal);
}

/* ------------------------------------------------------------ [ 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: var(--weight-bold);
}

big,
.big {
   font-size: calc(var(--font-base) + var(--font-nano));
}

small,
.small {
   font-size: calc(var(--font-base) - var(--font-nano));
}

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

sub,
sup {
   font-size: calc(var(--font-base) - var(--font-nano));
   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: var(--font-tiny);
}

.font-small {
   font-size: var(--font-small);
}

.font-medium {
   font-size: var(--font-medium);
}

.font-large {
   font-size: var(--font-large);
}

.font-wide {
   font-size: var(--font-wide);
}

.font-dinamic {
   font-size: var(--font-base);
}

a,
:link {
   font-family: source-sans-pro, Montserrat, Oxygen, Ubuntu, 'Helvetica Neue', sans-serif;
   font-weight: var(--weight-normal);
   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: var(--weight-medium);
   color: var(--color-text);
}

h1 {
   margin-block: var(--spacing-tiny);
   font-size: var(--font-large);
}

h2 {
   margin-block: var(--spacing-small);
   font-size: var(--font-medium);
}

h3 {
   margin-block: var(--spacing-medium);
   font-size: var(--font-base);
}

h4 {
   margin-block: var(--spacing-base);
   font-size: var(--font-small);
}

h5 {
   margin-block: var(--spacing-large);
   font-size: var(--font-tiny);
}

h6 {
   margin-block: var(--spacing-wide);
   font-size: var(--font-nano);
}


/* ------------------------------------------------------------ [ 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: var(--line-height);
}

dd,
dl,
dt,
ol,
ul {
   margin-block: var(--spacing-base);
   list-style-position: outside;
   padding-inline-start: var(--font-base);
}

:is(dd, dl, dt, ol, ul):is(dd, dl, dt, ol, ul) {
   margin-block: var(--spacing-xnano);
}

dt {
   margin-bottom: var(--font-nano);
   font-family: source-sans-pro, Montserrat, Oxygen, Ubuntu, 'Helvetica Neue', sans-serif;
   font-weight: var(--weight-normal);
}

li {
   margin-bottom: var(--font-tiny);
}

dd {
   margin-bottom: var(--font-small);
}

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

.list-inline>li {
   display: inline-block;
   padding: 0 var(--spacing-xnano) 0 var(--spacing-xnano);
}

.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 var(--spacing-small);
            padding-inline: 0.75em;
            min-inline-size: min-content;
            }
        legend { padding-inline: 2px; }
*/
form {
   margin-block: var(--font-small);
}

/* button */
[type='submit'],
[type='reset'],
button,
.button {
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
   padding: var(--spacing-small);
   vertical-align: middle;
   line-height: var(--line-height);
   border-radius: var(--font-small);
   text-transform: capitalize;
   font-weight: var(--weight-normal);
}

/* 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: var(--font-medium);
   padding: var(--spacing-xnano);
   margin-right: var(--spacing-medium);
   line-height: var(--line-height);
   border-radius: var(--spacing-tiny);
   -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: var(--font-medium);
   padding: var(--spacing-xnano);
   line-height: var(--line-height);
   border-radius: var(--spacing-xnano);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

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

/* checkbox and radio */
[type='checkbox'],
[type='radio'] {
   margin: var(--font-small);
}

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

[type='checkbox']+label,
[type='radio']+label {
   vertical-align: baseline;
   margin-right: var(--font-small);
}

/* file upload*/
[type='file'] {
   margin: var(--spacing-small);
}

/* select */
select {
   height: var(--font-broad);
}

select:not([multiple]) {
   height: var(--font-large);
}

optgroup,
option {
   height: var(--font-medium);
}

select,
optgroup,
option {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   padding: var(--spacing-xnano)
}

optgroup {
   margin: var(--font-tiny);
}

option:checked {
   font-weight: var(--weight-normal);
}

/* textarea */
textarea {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   height: var(--font-wide);
   min-height: var(--font-large);
   padding: var(--spacing-xnano);
   margin-right: var(--spacing-medium);
   line-height: var(--line-height);
   border-radius: var(--spacing-xnano);
   -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: var(--font-tiny) 0;
   font-variant: small-caps;
}

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

::placeholder,
::-ms-input-placeholder,
::-webkit-input-placeholder,
::-moz-placeholder {
   color: var(--color-note);
}

fieldset {
   margin: var(--spacing-base);
}

legend {
   font-size: var(--font-small);
}

/* ------------------------------------------------------------ [ 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: var(--spacing-xnano) var(--color-gray) solid;
}

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

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

    Default:
        iframe { border: 2px inset; }
        video { object-fit: contain; }
*/
iframe {
   border: var(--spacing-xnano) var(--color-note) 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: var(--font-small);
   margin-inline: var(--font-medium)
}

/* ============================================================ [ 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: var(--font-small);
   border-collapse: separate;
   border-spacing: var(--spacing-small);
}

.table-h thead>tr,
.table-h .thead>.tr {
   border-bottom: var(--spacing-xnano) var(--color-gray) solid;
}

.table-v tr>th:first,
.table-v .tr>.th:first {
   border-right: var(--spacing-xnano) var(--color-gray) solid;
   text-align: right;
}

th,
.th,
td,
.td {
   padding: var(--spacing-tiny);
   vertical-align: top;
}

th,
.th {
   font-weight: var(--weight-medium);
   color: var(--color-text);
}

table tfoot>tr,
.table .tfoot>.tr {
   border-top: var(--spacing-xnano) var(--color-gray) solid;
}

/* 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: var(--spacing-small);
}

/* ------------------------------------------------------------ [ 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-mgn\w*: % of width
   row-sec: fixed px width, set to lower breakpoint (responsive)
   row-auto: % on width; smaller screen bigger row (responsive)
   row-dinamic: similar to row-auto, but based on 5% decrements (responsive)
   row-equal: set same size of columns (flex)
   row-pad\w*: set padding inside columns (pad)
*/

.row-mgn,
.row-mgntiny,
.row-mgnsmall,
.row-mgnmedium,
.row-mgnlarge,
.row-mgnwide,
.row-sec,
.row-auto,
.row-dinamic {
   margin-left: auto;
   margin-right: auto;
   width: 86.78%;
}

.row-mgntiny {
   width: 97.76%;
}

.row-mgnsmall {
   width: 90.83%;
}

.row-mgnmedium {
   width: 81.67%;
}

.row-mgnlarge {
   width: 76.97%;
}

.row-mgnwide {
   width: 72.11%;
}

.row-dinamic {
   width: 90%;
}

.row-equal {
   display: flex;
}

.row-equal>.col {
   align-items: stretch;
   /* display:flex*/
}

.row-padtiny>.col {
   padding: var(--spacing-nano);
}

.row-padsmall>.col {
   padding: var(--spacing-tiny);
}

.row-pad>.col {
   padding: var(--spacing-small);
}

.row-padmedium>.col {
   padding: var(--spacing-medium);
}

.row-padlarge>.col {
   padding: var(--spacing-base);
}

.row-padwide>.col {
   padding: var(--spacing-large);
}

.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-12,
.col-5of5,
.col-7of7 {
   width: 100%;
}

.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-push12,
.col-push5of5,
.col-push7of7 {
   left: 100%;
   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-pull12,
.col-pull5o5,
.col-pull7of7 {
   right: 100%;
   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-off12,
.col-off5of5,
.col-off7of7 {
   margin-left: 100%;
}

.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: repeat(1, 1fr);
}

.grid-2 {
   grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
   grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
   grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
   grid-template-columns: repeat(5, 1fr);
}

.grid-6 {
   grid-template-columns: repeat(6, 1fr);
}

.grid-7 {
   grid-template-columns: repeat(7, 1fr);
}

.grid-8 {
   grid-template-columns: repeat(8 1fr);
}

.grid-9 {
   grid-template-columns: repeat(9, 1fr);
}

.grid-10 {
   grid-template-columns: repeat(10, 1fr);
}

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

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

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

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

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

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

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

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

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

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

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

.grid-gaptiny {
   grid-gap: var(--spacing-nano);
}

.grid-gapsmall {
   grid-gap: var(--spacing-tiny);
}

.grid-gapmedium {
   grid-gap: var(--spacing-small);
}

.grid-gap {
   grid-gap: var(--spacing-medium);
}

.grid-gaplarge {
   grid-gap: var(--spacing-base);
}

.grid-gapwide {
   grid-gap: var(--spacing-large);
}

.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: var(--spacing-small);
}

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

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

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

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

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

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

.flex-alignh-start,
.flex-alignh-left {
   justify-content: flex-start;
}

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

.flex-alignh-end,
.flex-alignh-right {
   justify-content: flex-end;
}

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

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

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

.flex-alignv-start,
.flex-alignv-top {
   align-items: flex-start;
}

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

.flex-alignv-baseline {
   align-items: baseline;
}

.flex-alignh-end,
.flex-alignh-bottom {
   align-items: flex-end;
}

.flex-spacev-expand,
.flex-spacev-stretch {
   align-items: stretch;
}

/* flex content ? */

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

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

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

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

/* ------------------------------------------------------------ [ margin, padding and containers
*/
.mgn {
   margin: var(--spacing-base);
}

.mgn-top {
   margin-top: var(--spacing-base);
}

.mgn-right {
   margin-right: var(--spacing-base);
}

.mgn-bottom {
   margin-bottom: var(--spacing-base);
}

.mgn-left {
   margin-left: var(--spacing-base);
}

.mgn-tiny {
   margin: var(--spacing-tiny);
}

.mgn-small {
   margin: var(--spacing-small);
}

.mgn-medium {
   margin: var(--spacing-medium);
}

.mgn-large {
   margin: var(--spacing-large);
}

.mgn-wide {
   margin: var(--spacing-wide);
}

.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: var(--spacing-base);
}

.pad-top {
   padding-top: var(--spacing-base);
}

.pad-right {
   padding-right: var(--spacing-base);
}

.pad-bottom {
   padding-bottom: var(--spacing-base);
}

.pad-left {
   padding-left: var(--spacing-base);
}

.pad-tiny {
   padding: var(--spacing-tiny);
}

.pad-small {
   padding: var(--spacing-small);
}

.pad-medium {
   padding: var(--spacing-medium);
}

.pad-large {
   padding: var(--spacing-large);
}

.pad-wide {
   padding: var(--spacing-wide);
}

.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-tiny {
   border-radius: var(--spacing-xnano);
}

.round-small {
   border-radius: var(--spacing-nano);
}

.round-medium {
   border-radius: var(--spacing-tiny);
}

.round {
   border-radius: var(--spacing-small);
}

.round-large {
   border-radius: var(--spacing-medium);
}

.round-wide {
   border-radius: var(--spacing-base);
}

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

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

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

.round-topleft {
   border-top-left-radius: var(--spacing-small);
}

.round-topright {
   border-top-right-radius: var(--spacing-small);
}

.round-bottomleft {
   border-bottom-left-radius: var(--spacing-small);
}

.round-bottomright {
   border-bottom-right-radius: var(--spacing-small);
}

.round-no {
   border-radius: 0;
}

.border-small {
   border: var(--spacing-xnano) var(--color-gray) solid;
}

.border-medium {
   border: var(--spacing-nano) var(--color-gray) solid;
}

.border {
   border: var(--spacing-tiny) var(--color-gray) solid;
}

.border-large {
   border: var(--spacing-small) var(--color-gray) solid;
}

.border-wide {
   border: var(--spacing-medium) var(--color-gray) solid;
}

.border-top {
   border-top: var(--spacing-tiny) var(--color-gray) solid;
}

.border-right {
   border-right: var(--spacing-tiny) var(--color-gray) solid;
}

.border-bottom {
   border-bottom: var(--spacing-tiny) var(--color-gray) solid;
}

.border-left {
   border-left: var(--spacing-tiny) var(--color-gray) solid;
}

.border-no {
   border: 0;
}

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

.hide {
   display: none;
   /* visibility: hidden; */
}

@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: var(--color-critical);
}

.bkg-danger {
   background-color: var(--color-danger);
}

.bkg-alert {
   background-color: var(--color-alert);
}

.bkg-warning {
   background-color: var(--color-warning);
}

.bkg-success {
   background-color: var(--color-success);
}

.bkg-inform {
   background-color: var(--color-inform);
}

.bkg-note {
   background-color: var(--color-note);
}

.text-critical {
   color: var(--color-critical);
}

.text-danger {
   color: var(--color-danger);
}

.text-alert {
   color: var(--color-alert);
}

.text-warning {
   color: var(--color-warning);
}

.text-success {
   color: var(--color-success);
}

.text-inform {
   color: var(--color-inform);
}

.border-critical {
   border-color: var(--color-critical);
}

.border-danger {
   border-color: var(--color-danger);
}

.border-alert {
   border-color: var(--color-alert);
}

.border-warning {
   border-color: var(--color-warning);
}

.border-success {
   border-color: var(--color-success);
}

.border-inform {
   border-color: var(--color-inform);
}

.border-note {
   border-color: var(--color-note);
}

.note {
   color: var(--color-note);
}

.error {
   border: var(--spacing-xnano) var(--color-critical) solid;
}