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

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

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

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

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

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

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

   .mgn-ltiny {
      margin: 0.375em;
   }

   .mgn-lsmall {
      margin: 0.625em;
   }

   .mgn-lmedium {
      margin: 1.0em;
   }

   .mgn-llarge {
      margin: 2.625em;
   }

   .mgn-lwide {
      margin: 4.35em;
   }

   .mgn-lauto {
      margin: 6.25%;
   }

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

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

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

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

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

   .pad-l {
      padding: 1.625em;
   }

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

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

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

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

   .pad-ltiny {
      padding: 0.375em;
   }

   .pad-lsmall {
      padding: 0.625em;
   }

   .pad-lmedium {
      padding: 1.0em;
   }

   .pad-llarge {
      padding: 2.625em;
   }

   .pad-lwide {
      padding: 4.35em;
   }

   .pad-lauto {
      padding: 6.25%;
   }

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

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

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

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

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

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

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

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

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

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

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

   /* ------------------------------------------------------------ [ position and dimension
	*/
   .left-l {
      float: left;
   }

   .right-l {
      float: right;
   }

   .center-l {
      margin-eft: 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
	*/
   .row-sec {
      width: 1024px;
   }

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

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

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

   .row-auto {
      margin: 4.35em 76.97%;
   }

   /* 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-eft: 8.3333333333333333333333%;
   }

   .col-loff2 {
      margin-eft: 16.6666666666666666666666%;
   }

   .col-loff3 {
      margin-eft: 25%;
   }

   .col-loff4 {
      margin-eft: 33.3333333333333333333333%;
   }

   .col-loff5 {
      margin-eft: 41.6666666666666666666666%;
   }

   .col-loff6 {
      margin-eft: 50%;
   }

   .col-loff7 {
      margin-eft: 58.3333333333333333333333%;
   }

   .col-loff8 {
      margin-eft: 66.6666666666666666666666%;
   }

   .col-loff9 {
      margin-eft: 75%;
   }

   .col-loff10 {
      margin-eft: 83.3333333333333333333333%;
   }

   .col-loff11 {
      margin-eft: 91.6666666666666666666666%;
   }

   .col-lnooff {
      margin-eft: 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-eft: 20%;
   }

   .col-loff2of5 {
      margin-eft: 40%;
   }

   .col-loff3of5 {
      margin-eft: 60%;
   }

   .col-loff4of5 {
      margin-eft: 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-eft: 14.2857142857142857142857%;
   }

   .col-loff2of7 {
      margin-eft: 28.5714285714285714285714%;
   }

   .col-loff3of7 {
      margin-eft: 42.8571428571428571428571%;
   }

   .col-loff4of7 {
      margin-eft: 57.1428571428571428571429%;
   }

   .col-loff5of7 {
      margin-eft: 71.4285714285714285714286%;
   }

   .col-loff6of7 {
      margin-eft: 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-lcritical {
      background-color: #914;
   }

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

   .text-lcritical {
      color: #914;
   }

   .text-ldanger {
      color: #d02;
   }

   .text-lalert {
      color: #f73;
   }

   .text-lwarning {
      color: #fc2;
   }

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

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

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

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

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

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

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

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

   .bkg-lnote {
      color: #ccc;
   }

   .lnote {
      color: #999;
   }

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

}