@charset "UTF-8";

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


@media (min-width:1280px) {

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

/* ------------------------------------------------------------ [ margin, padding and containers
*/
    .mgn-l, .mgn-ltop, .container-l, .container-ltop { margin-top:1.625em; }
    .mgn-l, .mgn-lright, .container-l, .container-lright { margin-right:1.125em; }
    .mgn-l, .mgn-lbottom, .container-l, .container-lbottom { margin-bottom:1.625em; }
    .mgn-l, .mgn-lleft, .container-l, .container-lleft { margin-left:1.625em; }
    .mgn-lno { margin:0; }
    .mgn-lflex, .container-lflex { margin:3.75%; }
    .mgn-lsmall, .container-lsmall { margin:0.875em }
    .mgn-lbig, .container-lbig { margin:2.375em }

    .pad-l, .pad-ltop, .container-l, .container-ltop { padding-top:1.625em; }
    .pad-l, .pad-lright, .container-l, .container-lright { padding-right:1.625em; }
    .pad-l, .pad-lbottom, .container-l, .container-lbottom { padding-bottom:1.625em; }
    .pad-l, .pad-lleft, .container-l, .container-lleft { padding-left:1.625em; }
    .pad-lno { padding:0; }
    .pad-lflex, .container-lflex { padding:3.75%; }
    .pad-lsmall, .container-lsmall { padding:0.875em }
    .pad-lbig, .container-lbig { padding:2.375em }

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

    .size-l20w { width:20%; }
    .size-l25w { width:25%; }
    .size-l33w { width:33.3333333333333333333333%; }
    .size-l40w { width:40%; }
    .size-l50x, .size-lhalf, .size-lhalfw { width:50%; }
    .size-l60w { width:60%; }
    .size-l66w { width:66.6666666666666666666666%; }
    .size-l75w { width:75%; }
    .size-l80w { width:80%; }
    .size-l100w, .size-lfull, .size-lfullw { width:100%; }

    .size-l20h { height:20%; }
    .size-l25h { height:25%; }
    .size-l33h { height:33.3333333333333333333333%; }
    .size-l40h { height:40%; }
    .size-l50x,.size-lhalf,.size-lhalfw { height:50%; }
    .size-l60h { height:60%; }
    .size-l66h { height:66.6666666666666666666666%; }
    .size-l75h { height:75%; }
    .size-l80h { height:80%; }
    .size-l100h, .size-lfull, .size-lfullw { height:100%; }

    .size-lfullv, .size-lfullvw { width:100vw; }
    .size-lfullv, .size-lfullvh { height:100vh; }
    .size-lhalfv, .size-lhalfvw { width:50vw; }
    .size-lhalfv, .size-lhalfvh { height:50vh; }

/* ------------------------------------------------------------ [ row column
*/
    /* base12 */
    .col-l1 { width:8.3333333333333333333333%; }
    .col-l2 { width:16.6666666666666666666666%; }
    .col-l3 { width:25%; }
    .col-l4 { width:33.3333333333333333333333%; }
    .col-l5 { width:41.6666666666666666666666%; }
    .col-l6 { width:50%; }
    .col-l7 { width:58.3333333333333333333333%; }
    .col-l8 { width:66.6666666666666666666666%; }
    .col-l9 { width:75%; }
    .col-l10 { width:83.3333333333333333333333%; }
    .col-l11 { width:91.6666666666666666666666%; }
    .col-lpush1 { left:8.3333333333333333333333%; right:auto; position:relative; }
    .col-lpush2 { left:16.6666666666666666666666%; right:auto; position:relative; }
    .col-lpush3 { left:25%; right:auto; position:relative; }
    .col-lpush4 { left:33.3333333333333333333333%; right:auto; position:relative; }
    .col-lpush5 { left:41.6666666666666666666666%; right:auto; position:relative; }
    .col-lpush6 { left:50%; right:auto; position:relative; }
    .col-lpush7 { left:58.3333333333333333333333%; right:auto; position:relative; }
    .col-lpush8 { left:66.6666666666666666666666%; right:auto; position:relative; }
    .col-lpush9 { left:75%; right:auto; position:relative; }
    .col-lpush10 { left:83.3333333333333333333333%; right:auto; position:relative; }
    .col-lpush11 { left:91.6666666666666666666666%; right:auto; position:relative; }
    .col-lpull1 { right:8.3333333333333333333333%; left:auto; position:relative; }
    .col-lpull2 { right:16.6666666666666666666666%; left:auto; position:relative; }
    .col-lpull3 { right:25%; left:auto; position:relative; }
    .col-lpull4 { right:33.3333333333333333333333%; left:auto; position:relative; }
    .col-lpull5 { right:41.6666666666666666666666%; left:auto; position:relative; }
    .col-lpull6 { right:50%; left:auto; position:relative; }
    .col-lpull7 { right:58.3333333333333333333333%; left:auto; position:relative; }
    .col-lpull8 { right:66.6666666666666666666666%; left:auto; position:relative; }
    .col-lpull9 { right:75%; left:auto; position:relative; }
    .col-lpull10 { right:83.3333333333333333333333%; left:auto; position:relative; }
    .col-lpull11 { right:91.6666666666666666666666%; left:auto; position:relative; }
    .col-loff1 { margin-left:8.3333333333333333333333%; }
    .col-loff2 { margin-left:16.6666666666666666666666%; }
    .col-loff3 { margin-left:25%; }
    .col-loff4 { margin-left:33.3333333333333333333333%; }
    .col-loff5 { margin-left:41.6666666666666666666666%; }
    .col-loff6 { margin-left:50%; }
    .col-loff7 { margin-left:58.3333333333333333333333%; }
    .col-loff8 { margin-left:66.6666666666666666666666%; }
    .col-loff9 { margin-left:75%; }
    .col-loff10 { margin-left:83.3333333333333333333333%; }
    .col-loff11 { margin-left:91.6666666666666666666666%; }
    .col-lnooff { margin-left:0; }

    /* base5 */
    .col-l1of5 { width:20%; }
    .col-l2of5 { width:40%; }
    .col-l3of5 { width:60%; }
    .col-l4of5 { width:80%; }
    .col-lpush1of5 { left:20%; right:auto; position:relative; }
    .col-lpush2of5 { left:40%; right:auto; position:relative; }
    .col-lpush3of5 { left:60%; right:auto; position:relative; }
    .col-lpush4of5 { left:80%; right:auto; position:relative; }
    .col-lpull1of5 { right:20%; left:auto; position:relative; }
    .col-lpull2of5 { right:40%; left:auto; position:relative; }
    .col-lpull3of5 { right:60%; left:auto; position:relative; }
    .col-lpull4of5 { right:80%; left:auto; position:relative; }
    .col-loff1of5 { margin-left:20%; }
    .col-loff2of5 { margin-left:40%; }
    .col-loff3of5 { margin-left:60%; }
    .col-loff4of5 { margin-left:80%; }

    /* base7 */
    .col-l1of7 { width:14.2857142857142857142857%; }
    .col-l2of7 { width:28.5714285714285714285714%; }
    .col-l3of7 { width:42.8571428571428571428571%; }
    .col-l4of7 { width:57.1428571428571428571429%; }
    .col-l5of7 { width:71.4285714285714285714286%; }
    .col-l6of7 { width:85.7142857142857142857143%; }
    .col-lpush1of7 { left:14.2857142857142857142857%; right:auto; position:relative; }
    .col-lpush2of7 { left:28.5714285714285714285714%; right:auto; position:relative; }
    .col-lpush3of7 { left:42.8571428571428571428571%; right:auto; position:relative; }
    .col-lpush4of7 { left:57.1428571428571428571429%; right:auto; position:relative; }
    .col-lpush5of7 { left:71.4285714285714285714286%; right:auto; position:relative; }
    .col-lpush6of7 { left:85.7142857142857142857143%; right:auto; position:relative; }
    .col-lpull1of7 { right:14.2857142857142857142857%; left:auto; position:relative; }
    .col-lpull2of7 { right:28.5714285714285714285714%; left:auto; position:relative; }
    .col-lpull3of7 { right:42.8571428571428571428571%; left:auto; position:relative; }
    .col-lpull4of7 { right:57.1428571428571428571429%; left:auto; position:relative; }
    .col-lpull5of7 { right:71.4285714285714285714286%; left:auto; position:relative; }
    .col-lpull6of7 { right:85.7142857142857142857143%; left:auto; position:relative; }
    .col-loff1of7 { margin-left:14.2857142857142857142857%; }
    .col-loff2of7 { margin-left:28.5714285714285714285714%; }
    .col-loff3of7 { margin-left:42.8571428571428571428571%; }
    .col-loff4of7 { margin-left:57.1428571428571428571429%; }
    .col-loff5of7 { margin-left:71.4285714285714285714286%; }
    .col-loff6of7 { margin-left:85.7142857142857142857143%; }

/* ------------------------------------------------------------ [ grid.cell (base12)
*/
    .grid-linline, .grid-lcollapsed { display:inline-grid; }
    .grid-l1 { grid-template-columns:auto; }
    .grid-l2 { grid-template-columns:auto auto; }
    .grid-l3 { grid-template-columns:auto auto auto; }
    .grid-l4 { grid-template-columns:auto auto auto auto; }
    .grid-l5 { grid-template-columns:auto auto auto auto auto; }
    .grid-l6 { grid-template-columns:auto auto auto auto auto auto; }
    .grid-l7 { grid-template-columns:auto auto auto auto auto auto auto; }
    .grid-l8 { grid-template-columns:auto auto auto auto auto auto auto auto; }
    .grid-l9 { grid-template-columns:auto auto auto auto auto auto auto auto auto; }
    .grid-l10 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto; }
    .grid-l11 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto; }
    .grid-l12 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto auto; }
    .grid-lnogap { grid-gap:none; }
    .grid-gap { grid-gap:0.625em; }
    .grid-gapsmall { grid-gap:0.125em; }
    .grid-gapbig { grid-gap:1.125em; }
    .grid-lcenter, .grid-lcenterx { justify-content:center; }
    .grid-ljustify, .grid-ljustifyx { justify-content:space-around; }
    .grid-lspaced, .grid-lspacedx { justify-content:space-evenly; }
    .grid-lexteme, .grid-lextemex { justify-content:space-between; }
    .grid-lcenter, .grid-lcentery { align-content:center; }
    .grid-ljustify, .grid-ljustifyy { align-content:space-around; }
    .grid-lspaced, .grid-lspacedy { align-content:space-evenly; }
    .grid-lexteme, .grid-lextemey { align-content:space-between; }
    .grid-ltop { align-content:start; }
    .grid-lright { justify-content:end; }
    .grid-lbottom { align-content:end; }
    .grid-lleft { justify-content:start; }
    .grid > .cell, .grid-linline > .cell, .grid-lcollapsed > .cell { padding:1.125em; }
    .grid-lnopad > .cell { padding:0; }

/* ------------------------------------------------------------ [ border, round
*/
    .round-l { border-radius:0.875em; }
    .round-lno { border-radius:0; }
    .round-lsmall { border-radius:0.375em; }
    .round-lbig { border-radius:1.125em; }
    .round-lquarter { border-radius:12.5%; }
    .round-lhalf { border-radius:25%; }
    .round-lfull { border-radius:50%; }

    .border-l { border:0.375em #666 solid; }
    .border-lno { border:0; }
    .border-lsmall { border:0.125em #666 solid; }
    .border-lmedium { border:0.625em #666 solid; }
    .border-lbig { border:0.875em #666 solid; }

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

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

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

/* ------------------------------------------------------------ [ notification
*/
    .bkg-ldanger { background-color:#d02; }
    .bkg-lalert { background-color:#f73; }
    .bkg-lwarning { background-color:#fc2; }
    .bkg-lsuccess { background-color:#0b2; }
    .bkg-linform { background-color:#05e; }
    .bkg-lnote { 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; }

    }