@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 {
		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;
	}

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

}