@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, .mgn-stop, .container-s, .container-stop { margin-top:1.625em; }
    .mgn-s, .mgn-sright, .container-s, .container-sright { margin-right:1.125em; }
    .mgn-s, .mgn-sbottom, .container-s, .container-sbottom { margin-bottom:1.625em; }
    .mgn-s, .mgn-sleft, .container-s, .container-sleft { margin-left:1.625em; }
    .mgn-sno { margin:0; }
    .mgn-sflex, .container-sflex { margin:3.75%; }
    .mgn-ssmall, .container-ssmall { margin:0.875em }
    .mgn-sbig, .container-sbig { margin:2.375em }

    .pad-s, .pad-stop, .container-s, .container-stop { padding-top:1.625em; }
    .pad-s, .pad-sright, .container-s, .container-sright { padding-right:1.625em; }
    .pad-s, .pad-sbottom, .container-s, .container-sbottom { padding-bottom:1.625em; }
    .pad-s, .pad-sleft, .container-s, .container-sleft { padding-left:1.625em; }
    .pad-sno { padding:0; }
    .pad-sflex, .container-sflex { padding:3.75%; }
    .pad-ssmall, .container-ssmall { padding:0.875em }
    .pad-sbig, .container-sbig { padding:2.375em }

/* ------------------------------------------------------------ [ 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
*/
    /* 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-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; }

    .danger { color:#d02; }
    .alert { color:#f73; }
    .warning { color:#fc2; }
    .success { color:#0b2; }
    .inform { color:#05e; }
    .note { color:#ccc; }

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

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

    }