@charset "UTF-8";

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


@media (min-width:768px) {

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

/* ------------------------------------------------------------ [ margin, padding and containers
*/
    .mgn-m, .mgn-mtop, .container-m, .container-mtop { margin-top:1.625em; }
    .mgn-m, .mgn-mright, .container-m, .container-mright { margin-right:1.125em; }
    .mgn-m, .mgn-mbottom, .container-m, .container-mbottom { margin-bottom:1.625em; }
    .mgn-m, .mgn-mleft, .container-m, .container-mleft { margin-left:1.625em; }
    .mgn-mno { margin:0; }
    .mgn-mflex, .container-mflex { margin:3.75%; }
    .mgn-msmall, .container-msmall { margin:0.875em }
    .mgn-mbig, .container-mbig { margin:2.375em }

    .pad-m, .pad-mtop, .container-m, .container-mtop { padding-top:1.625em; }
    .pad-m, .pad-mright, .container-m, .container-mright { padding-right:1.625em; }
    .pad-m, .pad-mbottom, .container-m, .container-mbottom { padding-bottom:1.625em; }
    .pad-m, .pad-mleft, .container-m, .container-mleft { padding-left:1.625em; }
    .pad-mno { padding:0; }
    .pad-mflex, .container-mflex { padding:3.75%; }
    .pad-msmall, .container-msmall { padding:0.875em }
    .pad-mbig, .container-mbig { padding:2.375em }

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

    .size-m20w { width:20%; }
    .size-m25w { width:25%; }
    .size-m33w { width:33.3333333333333333333333%; }
    .size-m40w { width:40%; }
    .size-m50x, .size-mhalf, .size-mhalfw { width:50%; }
    .size-m60w { width:60%; }
    .size-m66w { width:66.6666666666666666666666%; }
    .size-m75w { width:75%; }
    .size-m80w { width:80%; }
    .size-m100w, .size-mfull, .size-mfullw { width:100%; }

    .size-m20h { height:20%; }
    .size-m25h { height:25%; }
    .size-m33h { height:33.3333333333333333333333%; }
    .size-m40h { height:40%; }
    .size-m50x,.size-mhalf,.size-mhalfw { height:50%; }
    .size-m60h { height:60%; }
    .size-m66h { height:66.6666666666666666666666%; }
    .size-m75h { height:75%; }
    .size-m80h { height:80%; }
    .size-m100h, .size-mfull, .size-mfullw { height:100%; }

    .size-mfullv, .size-mfullvw { width:100vw; }
    .size-mfullv, .size-mfullvh { height:100vh; }
    .size-mhalfv, .size-mhalfvw { width:50vw; }
    .size-mhalfv, .size-mhalfvh { height:50vh; }

/* ------------------------------------------------------------ [ row column
*/
    /* base12 */
    .col-m1 { width:8.3333333333333333333333%; }
    .col-m2 { width:16.6666666666666666666666%; }
    .col-m3 { width:25%; }
    .col-m4 { width:33.3333333333333333333333%; }
    .col-m5 { width:41.6666666666666666666666%; }
    .col-m6 { width:50%; }
    .col-m7 { width:58.3333333333333333333333%; }
    .col-m8 { width:66.6666666666666666666666%; }
    .col-m9 { width:75%; }
    .col-m10 { width:83.3333333333333333333333%; }
    .col-m11 { width:91.6666666666666666666666%; }
    .col-mpush1 { left:8.3333333333333333333333%; right:auto; position:relative; }
    .col-mpush2 { left:16.6666666666666666666666%; right:auto; position:relative; }
    .col-mpush3 { left:25%; right:auto; position:relative; }
    .col-mpush4 { left:33.3333333333333333333333%; right:auto; position:relative; }
    .col-mpush5 { left:41.6666666666666666666666%; right:auto; position:relative; }
    .col-mpush6 { left:50%; right:auto; position:relative; }
    .col-mpush7 { left:58.3333333333333333333333%; right:auto; position:relative; }
    .col-mpush8 { left:66.6666666666666666666666%; right:auto; position:relative; }
    .col-mpush9 { left:75%; right:auto; position:relative; }
    .col-mpush10 { left:83.3333333333333333333333%; right:auto; position:relative; }
    .col-mpush11 { left:91.6666666666666666666666%; right:auto; position:relative; }
    .col-mpull1 { right:8.3333333333333333333333%; left:auto; position:relative; }
    .col-mpull2 { right:16.6666666666666666666666%; left:auto; position:relative; }
    .col-mpull3 { right:25%; left:auto; position:relative; }
    .col-mpull4 { right:33.3333333333333333333333%; left:auto; position:relative; }
    .col-mpull5 { right:41.6666666666666666666666%; left:auto; position:relative; }
    .col-mpull6 { right:50%; left:auto; position:relative; }
    .col-mpull7 { right:58.3333333333333333333333%; left:auto; position:relative; }
    .col-mpull8 { right:66.6666666666666666666666%; left:auto; position:relative; }
    .col-mpull9 { right:75%; left:auto; position:relative; }
    .col-mpull10 { right:83.3333333333333333333333%; left:auto; position:relative; }
    .col-mpull11 { right:91.6666666666666666666666%; left:auto; position:relative; }
    .col-moff1 { margin-left:8.3333333333333333333333%; }
    .col-moff2 { margin-left:16.6666666666666666666666%; }
    .col-moff3 { margin-left:25%; }
    .col-moff4 { margin-left:33.3333333333333333333333%; }
    .col-moff5 { margin-left:41.6666666666666666666666%; }
    .col-moff6 { margin-left:50%; }
    .col-moff7 { margin-left:58.3333333333333333333333%; }
    .col-moff8 { margin-left:66.6666666666666666666666%; }
    .col-moff9 { margin-left:75%; }
    .col-moff10 { margin-left:83.3333333333333333333333%; }
    .col-moff11 { margin-left:91.6666666666666666666666%; }
    .col-mnooff { margin-left:0; }

    /* base5 */
    .col-m1of5 { width:20%; }
    .col-m2of5 { width:40%; }
    .col-m3of5 { width:60%; }
    .col-m4of5 { width:80%; }
    .col-mpush1of5 { left:20%; right:auto; position:relative; }
    .col-mpush2of5 { left:40%; right:auto; position:relative; }
    .col-mpush3of5 { left:60%; right:auto; position:relative; }
    .col-mpush4of5 { left:80%; right:auto; position:relative; }
    .col-mpull1of5 { right:20%; left:auto; position:relative; }
    .col-mpull2of5 { right:40%; left:auto; position:relative; }
    .col-mpull3of5 { right:60%; left:auto; position:relative; }
    .col-mpull4of5 { right:80%; left:auto; position:relative; }
    .col-moff1of5 { margin-left:20%; }
    .col-moff2of5 { margin-left:40%; }
    .col-moff3of5 { margin-left:60%; }
    .col-moff4of5 { margin-left:80%; }

    /* base7 */
    .col-m1of7 { width:14.2857142857142857142857%; }
    .col-m2of7 { width:28.5714285714285714285714%; }
    .col-m3of7 { width:42.8571428571428571428571%; }
    .col-m4of7 { width:57.1428571428571428571429%; }
    .col-m5of7 { width:71.4285714285714285714286%; }
    .col-m6of7 { width:85.7142857142857142857143%; }
    .col-mpush1of7 { left:14.2857142857142857142857%; right:auto; position:relative; }
    .col-mpush2of7 { left:28.5714285714285714285714%; right:auto; position:relative; }
    .col-mpush3of7 { left:42.8571428571428571428571%; right:auto; position:relative; }
    .col-mpush4of7 { left:57.1428571428571428571429%; right:auto; position:relative; }
    .col-mpush5of7 { left:71.4285714285714285714286%; right:auto; position:relative; }
    .col-mpush6of7 { left:85.7142857142857142857143%; right:auto; position:relative; }
    .col-mpull1of7 { right:14.2857142857142857142857%; left:auto; position:relative; }
    .col-mpull2of7 { right:28.5714285714285714285714%; left:auto; position:relative; }
    .col-mpull3of7 { right:42.8571428571428571428571%; left:auto; position:relative; }
    .col-mpull4of7 { right:57.1428571428571428571429%; left:auto; position:relative; }
    .col-mpull5of7 { right:71.4285714285714285714286%; left:auto; position:relative; }
    .col-mpull6of7 { right:85.7142857142857142857143%; left:auto; position:relative; }
    .col-moff1of7 { margin-left:14.2857142857142857142857%; }
    .col-moff2of7 { margin-left:28.5714285714285714285714%; }
    .col-moff3of7 { margin-left:42.8571428571428571428571%; }
    .col-moff4of7 { margin-left:57.1428571428571428571429%; }
    .col-moff5of7 { margin-left:71.4285714285714285714286%; }
    .col-moff6of7 { margin-left:85.7142857142857142857143%; }

/* ------------------------------------------------------------ [ grid.cell (base12)
*/
    .grid-minline, .grid-mcollapsed { display:inline-grid; }
    .grid-m1 { grid-template-columns:auto; }
    .grid-m2 { grid-template-columns:auto auto; }
    .grid-m3 { grid-template-columns:auto auto auto; }
    .grid-m4 { grid-template-columns:auto auto auto auto; }
    .grid-m5 { grid-template-columns:auto auto auto auto auto; }
    .grid-m6 { grid-template-columns:auto auto auto auto auto auto; }
    .grid-m7 { grid-template-columns:auto auto auto auto auto auto auto; }
    .grid-m8 { grid-template-columns:auto auto auto auto auto auto auto auto; }
    .grid-m9 { grid-template-columns:auto auto auto auto auto auto auto auto auto; }
    .grid-m10 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto; }
    .grid-m11 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto; }
    .grid-m12 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto auto; }
    .grid-mnogap { grid-gap:none; }
    .grid-gap { grid-gap:0.625em; }
    .grid-gapsmall { grid-gap:0.125em; }
    .grid-gapbig { grid-gap:1.125em; }
    .grid-mcenter, .grid-mcenterx { justify-content:center; }
    .grid-mjustify, .grid-mjustifyx { justify-content:space-around; }
    .grid-mspaced, .grid-mspacedx { justify-content:space-evenly; }
    .grid-mexteme, .grid-mextemex { justify-content:space-between; }
    .grid-mcenter, .grid-mcentery { align-content:center; }
    .grid-mjustify, .grid-mjustifyy { align-content:space-around; }
    .grid-mspaced, .grid-mspacedy { align-content:space-evenly; }
    .grid-mexteme, .grid-mextemey { align-content:space-between; }
    .grid-mtop { align-content:start; }
    .grid-mright { justify-content:end; }
    .grid-mbottom { align-content:end; }
    .grid-mleft { justify-content:start; }
    .grid > .cell, .grid-minline > .cell, .grid-mcollapsed > .cell { padding:1.125em; }
    .grid-mnopad > .cell { padding:0; }

/* ------------------------------------------------------------ [ border, round
*/
    .round-m { border-radius:0.875em; }
    .round-mno { border-radius:0; }
    .round-msmall { border-radius:0.375em; }
    .round-mbig { border-radius:1.125em; }
    .round-mquarter { border-radius:12.5%; }
    .round-mhalf { border-radius:25%; }
    .round-mfull { border-radius:50%; }

    .border-m { border:0.375em #666 solid; }
    .border-mno { border:0; }
    .border-msmall { border:0.125em #666 solid; }
    .border-mmedium { border:0.625em #666 solid; }
    .border-mbig { border:0.875em #666 solid; }

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

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

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

/* ------------------------------------------------------------ [ notification
*/
    .bkg-mdanger { background-color:#d02; }
    .bkg-malert { background-color:#f73; }
    .bkg-mwarning { background-color:#fc2; }
    .bkg-msuccess { background-color:#0b2; }
    .bkg-minform { background-color:#05e; }
    .bkg-mnote { 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; }

}