@charset "UTF-8";

/* ============================================================
     SiteUP! (c) J. Alejandro Ceballos Z.
       Name: siteup-base.css - Build 2503 - Modified 2602
    License: MIT - https://tldrlegal.com/license/mit-license
             --------------------------------------------------
   Based on: https://html.spec.whatwg.org/multipage/rendering.html
   ---------------------------------------------------------
   Global styles / fundational / mandatory
   Mobile-first (apply to all resolutions)
   ============================================================ */

/*
   Scale used:

      Name/(letter)  Font (text)    Space (blocks) Screen size
      (xn)ano        0.1rem         0.14em         <= 320px
      (N)ano         0.14rem        0.24em         320px - 479px
      (T)iny         0.24rem        0.38em         480px - 639px     (css)
      (S)mall        0.38rem        0.62em         640px - 767px     (css)
      (M)edium       0.62rem        1.0em          768px - 1023px    (css)
      Base           1.0rem         1.62em
      (L)arge        1.62rem        2.62em         1024px - 1279px   (css)
      (W)ide         2.62rem        4.24em         1280px - 1919px   (css)
      (B)road        4.24rem        6.86em         1920px - 2048ox
      (G)iant        6.86rem        11.1em         2560px <=

   Practical breakpoints:
            <= 767px          base                 Mobiles (*default)
      768px - 1023px          practical-(S)mall    Tablets
      1024px - 1439px         practical-(M)edium   Desktop
      1440px <=               practical-(L)arge    Widescreen


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

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

:root {
   /* Typo size/weight/line height */
   --font-nano: 0.14rem;
   --font-tiny: 0.24rem;
   --font-small: 0.38rem;
   --font-medium: 0.62rem;
   --font-base: 1.0rem;
   --font-large: 1.62rem;
   --font-wide: 2.62rem;
   --font-broad: 4.24rem;
   --font-giant: 6.86rem;

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

   --line-medium: 1.38;
   --line-base: 1.62;

   /* Elements spacing/radius */
   --space-xnano: 0.14em;
   --space-nano: 0.24em;
   --space-tiny: 0.38em;
   --space-small: 0.62em;
   --space-medium: 1.0em;
   --space-base: 1.62em;
   --space-large: 2.62em;
   --space-wide: 4.24em;
   --space-broad: 6.86em;
   --space-giant: 11.1em;

   /* Colors bw scale/neutral/message */
   --color-black: #000;
   --color-lightblack: #111;
   --color-darkgray: #484848;
   --color-gray: #7f7f7f;
   --color-lightgray: #868686;
   --color-darkwhite: #eee;
   --color-white: #fff;

   --color-bone: #F9F6EE;
   --color-greige: #B0A99F;
   --color-taupe: #B8A99A;
   --color-midnight: #0B121E;

   --color-critical: #914;
   --color-danger: #d02;
   --color-alert: #f73;
   --color-warning: #fc2;
   --color-success: #0b2;
   --color-inform: #05e;
   --color-note: #c0c0c0;
}

/* ============================================================ [ 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, "Helvetica Neue", Arial, sans-serif;
   font-weight: var(--weight-light);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   line-height: var(--line-base);
   font-size: 100%;
   background-color: var(--color-darkwhite);
   color: var(--color-lightblack);
   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-base);
   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(--space-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: ui-monospace, SFMono-Regular, "Cascadia Code", "Segoe UI Mono", "Roboto Mono", Menlo, Monaco, Consolas, 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;
}

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

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

a,
:link {
   font-weight: var(--weight-medium);
   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,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
   font-weight: var(--weight-bold);
   line-height: var(--line-medium);
}

h1,
.h1 {
   margin-block: var(--space-nano);
   font-size: var(--font-broad);
}

h2,
.h2 {
   margin-block: var(--space-small);
   font-size: var(--font-wide);
}

h3,
.h3 {
   margin-block: var(--space-medium);
   font-size: var(--font-large);
}

h4,
.h4 {
   margin-block: var(--space-base);
   font-size: var(--font-base);
}

h5,
.h5 {
   margin-block: var(--space-large);
   font-size: var(--font-small);
}

h6,
.h6 {
   margin-block: var(--space-wide);
   font-size: var(--font-nano);
}

.subh1,
.subh2,
.subh3,
.subh4,
.subh5 {
   font-family: source-sans-pro, Montserrat, Oxygen, Ubuntu, 'Helvetica Neue', sans-serif;
   font-weight: var(--weight-medium);
}

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

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

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

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

.subh5 {
   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-base);
}

dd,
dl,
dt,
ol,
ul {
   margin-block: var(--space-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(--space-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(--space-nano);
}

.list-block {
   display: block;
}

.list-block>li {
   display: list-item;
   padding: 0 var(--space-nano);
}

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

/* buttons */

button,
.button,
[type='submit'],
[type='reset'],
[type='button'] {
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
   padding: var(--space-small) var(--space-base);
   vertical-align: middle;
   line-height: var(--line-base);
   border: var(--space-xnano) solid var(--color-gray);
   font-weight: var(--weight-medium);
}

/*[type='image']*/

/* input text entry */

[type='email'],
[type='number'],
[type='password'],
[type='search'],
[type='tel'],
[type='text'],
[type='url'] {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   height: var(--space-large);
   width: calc(var(--space-giant) + var(--space-wide));
   padding: var(--space-small);
   margin: auto var(--space-small);
   border: var(--space-xnano) solid var(--color-gray);
}

/* input time entry */

[type='date'],
[type='datetime-local'],
[type='month'],
[type='time'],
[type='week'] {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   height: var(--space-large);
   width: calc(var(--space-giant) + var(--space-wide));
   padding: var(--space-small);
   margin: auto var(--space-small);
   border: var(--space-xnano) solid var(--color-gray);
}

/* input control widget */

[type='color'] {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   height: var(--space-large);
   width: var(--space-large);
   border: var(--space-xnano) solid var(--color-gray);
   padding: calc(var(--space-nano) + var(--space-xnano));
}

/* no me admitió fusionar estos dos */
[type='color']::-webkit-color-swatch {
   border: none;
}

[type='color']::-moz-color-swatch {
   border: none;
}

[type='range'] {
   width: calc(var(--space-giant) + var(--space-wide));
}

/* input system interface */

[type='file'] {
   vertical-align: middle;
   padding: var(--space-small);
   margin: auto var(--space-small);
   border: var(--space-xnano) solid var(--color-gray);
}

/* checkbox and radio */

[type='checkbox'],
[type='radio'] {
   vertical-align: middle;
   padding: var(--space-small);
   margin: auto var(--space-small);
   border: var(--space-xnano) solid var(--color-gray);
}

/* select */

select {
   height: var(--space-large);
   width: calc(var(--space-giant) + var(--space-wide));
   padding: var(--space-small);
   margin: auto var(--space-small);
   border: var(--space-xnano) solid var(--color-gray);
}

select[multiple] {
   height: var(--space-wide);
}

optgroup {
   font-weight: var(--weight-bold);
   height: var(--space-base);
}

option {
   padding: var(--space-xnano);
}

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

/* textarea */

textarea {
   width: calc(var(--space-giant) + var(--space-large));
   height: var(--space-large);
   padding: var(--space-small);
   margin: auto var(--space-small);
   border: var(--space-xnano) solid var(--color-gray);
   line-height: var(--line-base);
}

/* other*/

label {
   display: block;
   margin: var(--space-regular) 0;
}

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

fieldset {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   width: calc(var(--space-giant) + var(--space-base));
   min-height: var(--space-large);
   padding: var(--space-base);
   margin: var(--space-small);
   border: var(--space-xnano) solid var(--color-gray);
}

legend {
   font-weight: var(--weight-medium);
}

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

button.rounded,
.button.rounded,
input.rounded,
select.rounded,
textarea.rounded,
fieldset.rounded {
   border-radius: var(--space-medium);
}

[type='color'].rounded {
   border-radius: 50%;
   overflow: hidden;
}

[type='color'].rounded::-webkit-color-swatch-wrapper {
   padding: 0;
}

[type='color'].rounded::-webkit-color-swatch {
   border-radius: 50%;
}

[type='color'].rounded::-moz-color-swatch {
   border-radius: 50%;
}

/* ------------------------------------------------------------ [ 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;
   margin: var(--space-base) auto;
   border: 0;
   border-style: inset;
   border-bottom: var(--space-xnano) solid var(--color-gray);
}

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

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

    Default:
        iframe { border: 2px inset; }
        video { object-fit: contain; }
*/
iframe {
   border: var(--space-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(--space-small);
}

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

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

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

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

table tfoot>tr,
.table .tfoot>.tr {
   border-top: var(--space-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(--space-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(--space-nano);
}

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

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

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

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

.row-padwide>.col {
   padding: var(--space-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
*/
.grid {
   display: 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-gaptiny {
   grid-gap: var(--space-nano);
}

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

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

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

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

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

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

/* grid on inline axis (cols) */

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

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

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

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

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

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

/* grid contents (rows)*/

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

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

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

.grid-vjustify,
.grid-vspace-around {
   align-content: space-around;
}

.grid-vextreme,
.grid-vspace-between {
   align-content: space-between;
}

.grid-vspaced,
.grid-vspace-evenly {
   align-content: space-evenly;
}

/* items on cells */

.grid-items-start {
   align-items: start;
}

.grid-items-center {
   align-items: center;
}

.grid-items-end {
   align-items: flex-end;
}

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

.grid-items-baseline {
   align-items: baseline;
}

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

.grid-items-middle {
   justify-items: center;
}

.grid-items-right {
   justify-items: right;
}

.grid-items-flexstart {
   justify-items: flex-start;
}

.grid-items-flexend {
   justify-items: flex-end;
}

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

.grid>.cell,
.grid-inline>.cell,
.grid-collapsed>.cell {
   padding: var(--space-small);
}

.cell-colspan1 {
   grid-column: span 1;
}

.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-rowspan1 {
   grid-row: span 1;
}

.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-axis-row {
   flex-direction: row;
}

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

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

.flex-axis-col.flex-axis-reverse {
   flex-direction: column-reverse;
}

/* items on main axis (flex-direction) */

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

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

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

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

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

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

/* lines in cross axis (flex-wrap: wrap) */

.flex-arrange-start {
   align-content: flex-start;
}

.flex-arrange-center {
   align-content: center;
}

.flex-arrange-end {
   align-content: flex-end;
}

.flex-gap-stretch {
   align-content: stretch;
}

.flex-gap-around {
   align-content: space-around;
}

.flex-gap-between {
   align-content: space-between;
}

/* items on secondary axis */

.flex-aligntransv-start {
   align-items: flex-start;
}

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

.flex-aligntransv-end {
   align-items: flex-end;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mgn-wide {
   margin: var(--space-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(--space-base);
}

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

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

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

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

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

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

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

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

.pad-wide {
   padding: var(--space-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(--space-xnano);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.border-left {
   border-left: var(--space-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;
   }
}

:disabled {
   opacity: 0.625;
}


/* ------------------------------------------------------------ [ 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(--space-xnano) var(--color-critical) solid;
}