@charset "UTF-8";

/* ============================================================
     SiteUP! (c) J. Alejandro Ceballos Z.
       Name: siteup-practical-s.css - Build 2403
       Uses: siteup-base.css
    License: MIT - https://tldrlegal.com/license/mit-license
   ============================================================ */


@media (min-width:360px) {

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

/* ------------------------------------------------------------ [ margin, padding and containers
*/
    .mgn-s { margin:1.625em; }
    .mgn-stop { margin-top:1.625em; }
    .mgn-sright { margin-right:1.625em; }
    .mgn-sbottom { margin-bottom:1.625em; }
    .mgn-sleft { margin-left:1.625em; }

    .mgn-stiny { margin:0.375em; }
    .mgn-ssmall { margin:0.625em; }
    .mgn-smedium { margin:1.0em; }
    .mgn-slarge { margin:2.625em; }
    .mgn-swide { margin:4.35em; }
    .mgn-sauto { margin:6.25%; }

    .mgn-sno, .container-sno { margin:0; }
    .mgn-snotop, .container-snotop { margin-top:0; }
    .mgn-snoright, .container-snoright { margin-right:0; }
    .mgn-snobottom, .container-snobottom { margin-bottom:0; }
    .mgn-snoleft, .container-snoleft { margin-left:0; }

    .pad-s { padding:1.625em; }
    .pad-stop { padding-top:1.625em; }
    .pad-sright { padding-right:1.625em; }
    .pad-sbottom { padding-bottom:1.625em; }
    .pad-sleft { padding-left:1.625em; }

    .pad-stiny { padding:0.375em; }
    .pad-ssmall { padding:0.625em; }
    .pad-smedium { padding:1.0em; }
    .pad-slarge { padding:2.625em; }
    .pad-swide { padding:4.35em; }
    .pad-sauto { padding:6.25%; }

    .pad-sno, .container-sno { padding:0; }
    .pad-snotop, .container-snotop { padding-top:0; }
    .pad-snoright, .container-snoright { padding-right:0; }
    .pad-snobottom, .container-snobottom { padding-bottom:0; }
    .pad-snoleft, .container-snoleft { padding-left:0; }

    .container-s { margin:8.125%; padding:8.125%; }
    .container-stiny { margin:1.875%; padding: 1.875%; }
    .container-ssmall { margin:3.125%; padding:3.125%; }
    .container-smedium { margin:5.0%; padding:5.0%; }
    .container-slarge { margin:13.125%; padding:13.125%; }
    .container-swide { margin:21.75%; padding:21.75%; }

/* ------------------------------------------------------------ [ position and dimension
*/
    .left-s { float:left; }
    .right-s { float:right; }
    .center-s { margin-left:auto; margin-right:auto; }
    .top-s { vertical-align:top;  }
    .middle-s { vertical-align:middle; }
    .bottom-s { vertical-align:bottom; }

    .size-s20w { width:20%; }
    .size-s25w { width:25%; }
    .size-s33w { width:33.3333333333333333333333%; }
    .size-s40w { width:40%; }
    .size-s50x, .size-shalf, .size-shalfw { width:50%; }
    .size-s60w { width:60%; }
    .size-s66w { width:66.6666666666666666666666%; }
    .size-s75w { width:75%; }
    .size-s80w { width:80%; }
    .size-s100w, .size-sfull, .size-sfullw { width:100%; }

    .size-s20h { height:20%; }
    .size-s25h { height:25%; }
    .size-s33h { height:33.3333333333333333333333%; }
    .size-s40h { height:40%; }
    .size-s50x,.size-shalf,.size-shalfw { height:50%; }
    .size-s60h { height:60%; }
    .size-s66h { height:66.6666666666666666666666%; }
    .size-s75h { height:75%; }
    .size-s80h { height:80%; }
    .size-s100h, .size-sfull, .size-sfullw { height:100%; }

    .size-sfullv, .size-sfullvw { width:100vw; }
    .size-sfullv, .size-sfullvh { height:100vh; }
    .size-shalfv, .size-shalfvw { width:50vw; }
    .size-shalfv, .size-shalfvh { height:50vh; }

/* ------------------------------------------------------------ [ row column
*/
    .row-sec { margin-left:auto; margin-right:auto; width:360px; }
    .row-smgn { margin-left:auto; margin-right:auto; width:86.78%; }
    .row-smgntiny { margin-left:auto; margin-right:auto; width:97.76%; }
    .row-smgnsmall { margin-left:auto; margin-right:auto; width:90.83%; }
    .row-smgnmedium { margin-left:auto; margin-right:auto; width:81.67%; }
    .row-smgnlarge { margin-left:auto; margin-right:auto; width:76.97%; }
    .row-smgnwide { margin-left:auto; margin-right:auto; width:72.11%; }

    /* base12 */
    .col-s1 { width:8.3333333333333333333333%; }
    .col-s2 { width:16.6666666666666666666666%; }
    .col-s3 { width:25%; }
    .col-s4 { width:33.3333333333333333333333%; }
    .col-s5 { width:41.6666666666666666666666%; }
    .col-s6 { width:50%; }
    .col-s7 { width:58.3333333333333333333333%; }
    .col-s8 { width:66.6666666666666666666666%; }
    .col-s9 { width:75%; }
    .col-s10 { width:83.3333333333333333333333%; }
    .col-s11 { width:91.6666666666666666666666%; }
    .col-spush1 { left:8.3333333333333333333333%; right:auto; position:relative; }
    .col-spush2 { left:16.6666666666666666666666%; right:auto; position:relative; }
    .col-spush3 { left:25%; right:auto; position:relative; }
    .col-spush4 { left:33.3333333333333333333333%; right:auto; position:relative; }
    .col-spush5 { left:41.6666666666666666666666%; right:auto; position:relative; }
    .col-spush6 { left:50%; right:auto; position:relative; }
    .col-spush7 { left:58.3333333333333333333333%; right:auto; position:relative; }
    .col-spush8 { left:66.6666666666666666666666%; right:auto; position:relative; }
    .col-spush9 { left:75%; right:auto; position:relative; }
    .col-spush10 { left:83.3333333333333333333333%; right:auto; position:relative; }
    .col-spush11 { left:91.6666666666666666666666%; right:auto; position:relative; }
    .col-spull1 { right:8.3333333333333333333333%; left:auto; position:relative; }
    .col-spull2 { right:16.6666666666666666666666%; left:auto; position:relative; }
    .col-spull3 { right:25%; left:auto; position:relative; }
    .col-spull4 { right:33.3333333333333333333333%; left:auto; position:relative; }
    .col-spull5 { right:41.6666666666666666666666%; left:auto; position:relative; }
    .col-spull6 { right:50%; left:auto; position:relative; }
    .col-spull7 { right:58.3333333333333333333333%; left:auto; position:relative; }
    .col-spull8 { right:66.6666666666666666666666%; left:auto; position:relative; }
    .col-spull9 { right:75%; left:auto; position:relative; }
    .col-spull10 { right:83.3333333333333333333333%; left:auto; position:relative; }
    .col-spull11 { right:91.6666666666666666666666%; left:auto; position:relative; }
    .col-soff1 { margin-left:8.3333333333333333333333%; }
    .col-soff2 { margin-left:16.6666666666666666666666%; }
    .col-soff3 { margin-left:25%; }
    .col-soff4 { margin-left:33.3333333333333333333333%; }
    .col-soff5 { margin-left:41.6666666666666666666666%; }
    .col-soff6 { margin-left:50%; }
    .col-soff7 { margin-left:58.3333333333333333333333%; }
    .col-soff8 { margin-left:66.6666666666666666666666%; }
    .col-soff9 { margin-left:75%; }
    .col-soff10 { margin-left:83.3333333333333333333333%; }
    .col-soff11 { margin-left:91.6666666666666666666666%; }
    .col-snooff { margin-left:0; }

    /* base5 */
    .col-s1of5 { width:20%; }
    .col-s2of5 { width:40%; }
    .col-s3of5 { width:60%; }
    .col-s4of5 { width:80%; }
    .col-spush1of5 { left:20%; right:auto; position:relative; }
    .col-spush2of5 { left:40%; right:auto; position:relative; }
    .col-spush3of5 { left:60%; right:auto; position:relative; }
    .col-spush4of5 { left:80%; right:auto; position:relative; }
    .col-spull1of5 { right:20%; left:auto; position:relative; }
    .col-spull2of5 { right:40%; left:auto; position:relative; }
    .col-spull3of5 { right:60%; left:auto; position:relative; }
    .col-spull4of5 { right:80%; left:auto; position:relative; }
    .col-soff1of5 { margin-left:20%; }
    .col-soff2of5 { margin-left:40%; }
    .col-soff3of5 { margin-left:60%; }
    .col-soff4of5 { margin-left:80%; }

    /* base7 */
    .col-s1of7 { width:14.2857142857142857142857%; }
    .col-s2of7 { width:28.5714285714285714285714%; }
    .col-s3of7 { width:42.8571428571428571428571%; }
    .col-s4of7 { width:57.1428571428571428571429%; }
    .col-s5of7 { width:71.4285714285714285714286%; }
    .col-s6of7 { width:85.7142857142857142857143%; }
    .col-spush1of7 { left:14.2857142857142857142857%; right:auto; position:relative; }
    .col-spush2of7 { left:28.5714285714285714285714%; right:auto; position:relative; }
    .col-spush3of7 { left:42.8571428571428571428571%; right:auto; position:relative; }
    .col-spush4of7 { left:57.1428571428571428571429%; right:auto; position:relative; }
    .col-spush5of7 { left:71.4285714285714285714286%; right:auto; position:relative; }
    .col-spush6of7 { left:85.7142857142857142857143%; right:auto; position:relative; }
    .col-spull1of7 { right:14.2857142857142857142857%; left:auto; position:relative; }
    .col-spull2of7 { right:28.5714285714285714285714%; left:auto; position:relative; }
    .col-spull3of7 { right:42.8571428571428571428571%; left:auto; position:relative; }
    .col-spull4of7 { right:57.1428571428571428571429%; left:auto; position:relative; }
    .col-spull5of7 { right:71.4285714285714285714286%; left:auto; position:relative; }
    .col-spull6of7 { right:85.7142857142857142857143%; left:auto; position:relative; }
    .col-soff1of7 { margin-left:14.2857142857142857142857%; }
    .col-soff2of7 { margin-left:28.5714285714285714285714%; }
    .col-soff3of7 { margin-left:42.8571428571428571428571%; }
    .col-soff4of7 { margin-left:57.1428571428571428571429%; }
    .col-soff5of7 { margin-left:71.4285714285714285714286%; }
    .col-soff6of7 { margin-left:85.7142857142857142857143%; }

/* ------------------------------------------------------------ [ grid.cell (base12)
*/
    .grid-sinline, .grid-scollapsed { display:inline-grid; }
    .grid-s1 { grid-template-columns:auto; }
    .grid-s2 { grid-template-columns:auto auto; }
    .grid-s3 { grid-template-columns:auto auto auto; }
    .grid-s4 { grid-template-columns:auto auto auto auto; }
    .grid-s5 { grid-template-columns:auto auto auto auto auto; }
    .grid-s6 { grid-template-columns:auto auto auto auto auto auto; }
    .grid-s7 { grid-template-columns:auto auto auto auto auto auto auto; }
    .grid-s8 { grid-template-columns:auto auto auto auto auto auto auto auto; }
    .grid-s9 { grid-template-columns:auto auto auto auto auto auto auto auto auto; }
    .grid-s10 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto; }
    .grid-s11 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto; }
    .grid-s12 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto auto; }
    .grid-snogap { grid-gap:none; }
    .grid-gap { grid-gap:0.625em; }
    .grid-gapsmall { grid-gap:0.125em; }
    .grid-gapbig { grid-gap:1.125em; }
    .grid-scenter, .grid-scenterx { justify-content:center; }
    .grid-sjustify, .grid-sjustifyx { justify-content:space-around; }
    .grid-sspaced, .grid-sspacedx { justify-content:space-evenly; }
    .grid-sexteme, .grid-sextemex { justify-content:space-between; }
    .grid-scenter, .grid-scentery { align-content:center; }
    .grid-sjustify, .grid-sjustifyy { align-content:space-around; }
    .grid-sspaced, .grid-sspacedy { align-content:space-evenly; }
    .grid-sexteme, .grid-sextemey { align-content:space-between; }
    .grid-stop { align-content:start; }
    .grid-sright { justify-content:end; }
    .grid-sbottom { align-content:end; }
    .grid-sleft { justify-content:start; }
    .grid > .cell, .grid-sinline > .cell, .grid-scollapsed > .cell { padding:1.125em; }
    .grid-snopad > .cell { padding:0; }

/* ------------------------------------------------------------ [ border, round
*/
    .round-s { border-radius:0.875em; }
    .round-sno { border-radius:0; }
    .round-ssmall { border-radius:0.375em; }
    .round-sbig { border-radius:1.125em; }
    .round-squarter { border-radius:12.5%; }
    .round-shalf { border-radius:25%; }
    .round-sfull { border-radius:50%; }

    .border-s { border:0.375em #666 solid; }
    .border-sno { border:0; }
    .border-ssmall { border:0.125em #666 solid; }
    .border-smedium { border:0.625em #666 solid; }
    .border-sbig { border:0.875em #666 solid; }

/* ------------------------------------------------------------ [ visibility
*/
    .hide-s, .show-m, .show-l { display:none; }
    .show-s, .hide-m, .hide-l { display:block; }

    @media (orientation:landscape) {
        .show-sh { display:block; }
        .hide-sh { display:none; }
        }

    @media (orientation:portrait) {
        .show-sv { display:block; }
        .hide-sv { display:none; }
        }

/* ------------------------------------------------------------ [ notification
*/
    .bkg-scritical { background-color:#914; }
    .bkg-sdanger { background-color:#d02; }
    .bkg-salert { background-color:#f73; }
    .bkg-swarning { background-color:#fc2; }
    .bkg-ssuccess { background-color:#0b2; }
    .bkg-sinform { background-color:#05e; }
    .bkg-snote { background-color:#ccc; }

    .text-scritical { color:#914; }
    .text-sdanger { color:#d02; }
    .text-salert { color:#f73; }
    .text-swarning { color:#fc2; }
    .text-ssuccess { color:#0b2; }
    .text-sinform { color:#05e; }

    .border-scritical { border-color:#914; }
    .border-sdanger { border-color:#d02; }
    .border-salert { border-color:#f73; }
    .border-swarning { border-color:#fc2; }
    .border-ssuccess { border-color:#0b2; }
    .border-sinform { border-color:#05e; }

    .snote { color:#ccc; }
    .serror { border:0.2em solid #900; }

    }