@charset "UTF-8";

/* ============================================================
     SiteUP! (c) J. Alejandro Ceballos Z.
       Name: siteup-base.css - Build 2412
    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
        1280px <=           practical-(L)arge   Desktops
    On media:
        Set default for Tiny, modify for medium and wide
*/


/* ============================================================ [ 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; 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 { font-size:162%; }
    small, .small { font-size:62%; }
    cite { font-style:italic; word-wrap:break-word; white-space:pre; }
    sub, sup { font-size:0.625rem; 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.25rem; }
    .font-small { font-size:0.375rem; }
    .font-medium { font-size:0.625rem; }
    .font-large { font-size:1.625rem; }
    .font-wide { font-size:2.625rem; }

    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.375rem; font-size:4.25rem; }
    h2 { margin-block: 0.625rem; font-size:2.625rem; }
    h3 { margin-block: 1.0rem; font-size:1.625rem; }
    h4 { margin-block: 1.625rem; font-size:1.0rem; }
    h5 { margin-block: 2.625rem; font-size:0.625rem; }
    h6 { margin-block: 4.25rem; 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.625rem;}
    :is(dd, dl, dt, ol, ul ) :is(dd, dl, dt, ol, ul ) { margin-block: 0.125rem;  }
    dt { margin-bottom:0.25rem; 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 { display:inline-block; 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 { margin:0.375rem 0; font-variant: small-caps; }
    label, span.label { display:block; }
    ::placeholder, ::-ms-input-placeholder, ::-webkit-input-placeholder, ::-moz-placeholder { color:#999; }
    fieldset { margin:1.625rem; }
    legend { font-size:0.625em; }


/* ------------------------------------------------------------ [ 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; }
    .row-flex { display:flex; }
    .row-auto { margin-left:auto; margin-right:auto; width:92.308%; }
    .row-fix { margin-left:0.625em; margin-right:0.625em; }
    .col { min-height:100%; float:left; margin:0; padding:0; }
    .row-pad > .col { padding: 0.625em; }

    /* base12 */
    .col-1 { width:8.3333333333333333333333%; }
    .col-2 { width:16.6666666666666666666666%; }
    .col-3 { width:25%; }
    .col-4 { width:33.3333333333333333333333%; }
    .col-5 { width:41.6666666666666666666666%; }
    .col-6 { width:50%; }
    .col-7 { width:58.3333333333333333333333%; }
    .col-8 { width:66.6666666666666666666666%; }
    .col-9 { width:75%; }
    .col-10 { width:83.3333333333333333333333%; }
    .col-11 { width:91.6666666666666666666666%; }
    .col-push1 { left:8.3333333333333333333333%; right:auto; position:relative; }
    .col-push2 { left:16.6666666666666666666666%; right:auto; position:relative; }
    .col-push3 { left:25%; right:auto; position:relative; }
    .col-push4 { left:33.3333333333333333333333%; right:auto; position:relative; }
    .col-push5 { left:41.6666666666666666666666%; right:auto; position:relative; }
    .col-push6 { left:50%; right:auto; position:relative; }
    .col-push7 { left:58.3333333333333333333333%; right:auto; position:relative; }
    .col-push8 { left:66.6666666666666666666666%; right:auto; position:relative; }
    .col-push9 { left:75%; right:auto; position:relative; }
    .col-push10 { left:83.3333333333333333333333%; right:auto; position:relative; }
    .col-push11 { left:91.6666666666666666666666%; right:auto; position:relative; }
    .col-pull1 { right:8.3333333333333333333333%; left:auto; position:relative; }
    .col-pull2 { right:16.6666666666666666666666%; left:auto; position:relative; }
    .col-pull3 { right:25%; left:auto; position:relative; }
    .col-pull4 { right:33.3333333333333333333333%; left:auto; position:relative; }
    .col-pull5 { right:41.6666666666666666666666%; left:auto; position:relative; }
    .col-pull6 { right:50%; left:auto; position:relative; }
    .col-pull7 { right:58.3333333333333333333333%; left:auto; position:relative; }
    .col-pull8 { right:66.6666666666666666666666%; left:auto; position:relative; }
    .col-pull9 { right:75%; left:auto; position:relative; }
    .col-pull10 { right:83.3333333333333333333333%; left:auto; position:relative; }
    .col-pull11 { right:91.6666666666666666666666%; left:auto; position:relative; }
    .col-off1 { margin-left:8.3333333333333333333333%; }
    .col-off2 { margin-left:16.6666666666666666666666%; }
    .col-off3 { margin-left:25%; }
    .col-off4 { margin-left:33.3333333333333333333333%; }
    .col-off5 { margin-left:41.6666666666666666666666%; }
    .col-off6 { margin-left:50%; }
    .col-off7 { margin-left:58.3333333333333333333333%; }
    .col-off8 { margin-left:66.6666666666666666666666%; }
    .col-off9 { margin-left:75%; }
    .col-off10 { margin-left:83.3333333333333333333333%; }
    .col-off11 { margin-left:91.6666666666666666666666%; }
    .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.2857142857142857142857%; }
    .col-2of7 { width:28.5714285714285714285714%; }
    .col-3of7 { width:42.8571428571428571428571%; }
    .col-4of7 { width:57.1428571428571428571429%; }
    .col-5of7 { width:71.4285714285714285714286%; }
    .col-6of7 { width:85.7142857142857142857143%; }
    .col-push1of7 { left:14.2857142857142857142857%; right:auto; position:relative; }
    .col-push2of7 { left:28.5714285714285714285714%; right:auto; position:relative; }
    .col-push3of7 { left:42.8571428571428571428571%; right:auto; position:relative; }
    .col-push4of7 { left:57.1428571428571428571429%; right:auto; position:relative; }
    .col-push5of7 { left:71.4285714285714285714286%; right:auto; position:relative; }
    .col-push6of7 { left:85.7142857142857142857143%; right:auto; position:relative; }
    .col-pull1of7 { right:14.2857142857142857142857%; left:auto; position:relative; }
    .col-pull2of7 { right:28.5714285714285714285714%; left:auto; position:relative; }
    .col-pull3of7 { right:42.8571428571428571428571%; left:auto; position:relative; }
    .col-pull4of7 { right:57.1428571428571428571429%; left:auto; position:relative; }
    .col-pull5of7 { right:71.4285714285714285714286%; left:auto; position:relative; }
    .col-pull6of7 { right:85.7142857142857142857143%; left:auto; position:relative; }
    .col-off1of7 { margin-left:14.2857142857142857142857%; }
    .col-off2of7 { margin-left:28.5714285714285714285714%; }
    .col-off3of7 { margin-left:42.8571428571428571428571%; }
    .col-off4of7 { margin-left:57.1428571428571428571429%; }
    .col-off5of7 { margin-left:71.4285714285714285714286%; }
    .col-off6of7 { margin-left:85.7142857142857142857143%; }

/* ------------------------------------------------------------ [ grid.cell (base12)
*/
    .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-exteme, .grid-extemex { 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-exteme, .grid-extemey { 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; }

/* ------------------------------------------------------------ [ dynamic grid
*/


/* ------------------------------------------------------------ [ margin, padding and containers
*/
    .mgn-no { margin:0; }
    .container-tiny { margin: 0.25rem; }
    .mgn-tiny, .container-small { margin:0.375em; }
    .mgn-small, .container-medium { margin:0.625em; }
    .mgn-medium, .container { margin:1.0em; }
    .mgn, .container-large { margin:1.625em; }
    .mgn-large, .container-wide { margin:2.625em; }
    .mgn-wide { margin:4.35em; }

    .mgn-notop, .container-notop { margin-top:0; }
    .mgn-top { margin-top:1.625em; }
    .mgn-noright, .container-noright { margin-right:0; }
    .mgn-right { margin-right:1.625em; }
    .mgn-nobottom, .container-nobottom { margin-bottom:0; }
    .mgn-bottom { margin-bottom:1.625em; }
    .mgn-noleft, .container-noleft { margin-left:0; }
    .mgn-left { margin-left:1.625em; }

    .mgn-flex { margin: 6.25%; }

    .pad-no { padding:0; }
    .container-tiny { padding: 0.25rem; }
    .pad-tiny, .container-small { padding:0.375em; }
    .pad-small, .container-medium { padding:0.625em; }
    .pad-medium, .container { padding:1.0em; }
    .pad, .container-large { padding:1.625em; }
    .pad-large, .container-wide { padding:2.625em; }
    .pad-wide { padding:4.35em; }

    .pad-notop, .container-notop { padding-top:0; }
    .pad-top { padding-top:1.625em; }
    .pad-noright, .container-noright { padding-right:0; }
    .pad-right { padding-right:1.625em; }
    .pad-nobottom, .container-nobottom { padding-bottom:0; }
    .pad-bottom { padding-bottom:1.625em; }
    .pad-noleft, .container-noleft { padding-left:0; }
    .pad-left { padding-left:1.625em; }

    .pad-flex { padding: 6.25%; }


/* ------------------------------------------------------------ [ 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-20w { width:20%; }
    .size-25w { width:25%; }
    .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-75w { width:75%; }
    .size-80w { width:80%; }
    .size-100w, .size-full, .size-fullw { width:100%; }

    .size-20h { height:20%; }
    .size-25h { height:25%; }
    .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-75h { height:75%; }
    .size-80h { height:80%; }
    .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%; }

    .border-no { border:0; }
    .border-small { border:0.125em #666 solid; }
    .border-medium { border:0.25em #666 solid; }
    .border { border:0.375em #666 solid; }
    .border-large { border:0.625em #666 solid; }
    .border-wide { border:1.0em #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 { background-color:#914; }
    .text-danger { color:#d02; }
    .text-alert { color:#f73; }
    .text-warning { color:#fc2; }
    .text-success { color:#0b2; }
    .text-inform { color:#05e; }

    .border-critical { background-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; }

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