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

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

}