@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 */

   /* ------------------------------------------------------------ [ phrase content
			*/
   .font-dinamic {
      font-size: 1.0rem;
   }

   /* ------------------------------------------------------------ [ margin, padding and containers
	*/
   .mgn-m {
      margin: 1.625em;
   }

   .mgn-mtop {
      margin-top: 1.625em;
   }

   .mgn-mright {
      margin-right: 1.625em;
   }

   .mgn-mbottom {
      margin-bottom: 1.625em;
   }

   .mgn-mleft {
      margin-left: 1.625em;
   }

   .mgn-mtiny {
      margin: 0.375em;
   }

   .mgn-msmall {
      margin: 0.625em;
   }

   .mgn-mmedium {
      margin: 1.0em;
   }

   .mgn-mlarge {
      margin: 2.625em;
   }

   .mgn-mwide {
      margin: 4.35em;
   }

   .mgn-mauto {
      margin: 6.25%;
   }

   .mgn-mno,
   .container-mno {
      margin: 0;
   }

   .mgn-mnotop,
   .container-mnotop {
      margin-top: 0;
   }

   .mgn-mnoright,
   .container-mnoright {
      margin-right: 0;
   }

   .mgn-mnobottom,
   .container-mnobottom {
      margin-bottom: 0;
   }

   .mgn-mnoleft,
   .container-mnoleft {
      margin-left: 0;
   }

   .pad-m {
      padding: 1.625em;
   }

   .pad-mtop {
      padding-top: 1.625em;
   }

   .pad-mright {
      padding-right: 1.625em;
   }

   .pad-mbottom {
      padding-bottom: 1.625em;
   }

   .pad-mleft {
      padding-left: 1.625em;
   }

   .pad-mtiny {
      padding: 0.375em;
   }

   .pad-msmall {
      padding: 0.625em;
   }

   .pad-mmedium {
      padding: 1.0em;
   }

   .pad-mlarge {
      padding: 2.625em;
   }

   .pad-mwide {
      padding: 4.35em;
   }

   .pad-mauto {
      padding: 6.25%;
   }

   .pad-mno,
   .container-mno {
      padding: 0;
   }

   .pad-mnotop,
   .container-mnotop {
      padding-top: 0;
   }

   .pad-mnoright,
   .container-mnoright {
      padding-right: 0;
   }

   .pad-mnobottom,
   .container-mnobottom {
      padding-bottom: 0;
   }

   .pad-mnoleft,
   .container-mnoleft {
      padding-left: 0;
   }

   .container-m {
      margin: 8.125%;
      padding: 8.125%;
   }

   .container-mtiny {
      margin: 1.875%;
      padding: 1.875%;
   }

   .container-msmall {
      margin: 3.125%;
      padding: 3.125%;
   }

   .container-mmedium {
      margin: 5.0%;
      padding: 5.0%;
   }

   .container-mlarge {
      margin: 13.125%;
      padding: 13.125%;
   }

   .container-mwide {
      margin: 21.75%;
      padding: 21.75%;
   }

   /* ------------------------------------------------------------ [ 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
	*/
   .row-sec {
      width: 768px;
   }

   .row-flex {
      margin-left: auto;
      margin-right: auto;
      width: 81.67%;
   }

   .row-mgn {
      margin: 2.625em 4.35em;
   }

   .row-mgnside {
      margin: 0 4.35em;
   }

   .row-auto {
      margin: 2.625em 81.67%;
   }

   /* 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-mcritical {
      background-color: #914;
   }

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

   .text-mcritical {
      color: #914;
   }

   .text-mdanger {
      color: #d02;
   }

   .text-malert {
      color: #f73;
   }

   .text-mwarning {
      color: #fc2;
   }

   .text-msuccess {
      color: #0b2;
   }

   .text-minform {
      color: #05e;
   }

   .border-mcritical {
      border-color: #914;
   }

   .border-mdanger {
      border-color: #d02;
   }

   .border-malert {
      border-color: #f73;
   }

   .border-mwarning {
      border-color: #fc2;
   }

   .border-msuccess {
      border-color: #0b2;
   }

   .border-minform {
      border-color: #05e;
   }


   .bkg-mnote {
      color: #ccc;
   }

   .mnote {
      color: #999;
   }

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

}