@charset "UTF-8";

/* ============================================================
     SiteUP! (c) J. Alejandro Ceballos Z.
       Name: siteup-practical-s.css - Build 2403
       Uses: siteup-base.css
    License: MIT - https://tldrlegal.com/license/mit-license
   ============================================================ */
@media (min-width:360px) {

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

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

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

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

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

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

	.mgn-stiny {
		margin: 0.375em;
	}

	.mgn-ssmall {
		margin: 0.625em;
	}

	.mgn-smedium {
		margin: 1.0em;
	}

	.mgn-slarge {
		margin: 2.625em;
	}

	.mgn-swide {
		margin: 4.35em;
	}

	.mgn-sauto {
		margin: 6.25%;
	}

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

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

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

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

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

	.pad-s {
		padding: 1.625em;
	}

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

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

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

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

	.pad-stiny {
		padding: 0.375em;
	}

	.pad-ssmall {
		padding: 0.625em;
	}

	.pad-smedium {
		padding: 1.0em;
	}

	.pad-slarge {
		padding: 2.625em;
	}

	.pad-swide {
		padding: 4.35em;
	}

	.pad-sauto {
		padding: 6.25%;
	}

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

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

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

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

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

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

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

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

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

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

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

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

	.right-s {
		float: right;
	}

	.center-s {
		margin-left: auto;
		margin-right: auto;
	}

	.top-s {
		vertical-align: top;
	}

	.middle-s {
		vertical-align: middle;
	}

	.bottom-s {
		vertical-align: bottom;
	}

	.size-s20w {
		width: 20%;
	}

	.size-s25w {
		width: 25%;
	}

	.size-s33w {
		width: 33.3333333333333333333333%;
	}

	.size-s40w {
		width: 40%;
	}

	.size-s50x, .size-shalf, .size-shalfw {
		width: 50%;
	}

	.size-s60w {
		width: 60%;
	}

	.size-s66w {
		width: 66.6666666666666666666666%;
	}

	.size-s75w {
		width: 75%;
	}

	.size-s80w {
		width: 80%;
	}

	.size-s100w, .size-sfull, .size-sfullw {
		width: 100%;
	}

	.size-s20h {
		height: 20%;
	}

	.size-s25h {
		height: 25%;
	}

	.size-s33h {
		height: 33.3333333333333333333333%;
	}

	.size-s40h {
		height: 40%;
	}

	.size-s50x, .size-shalf, .size-shalfw {
		height: 50%;
	}

	.size-s60h {
		height: 60%;
	}

	.size-s66h {
		height: 66.6666666666666666666666%;
	}

	.size-s75h {
		height: 75%;
	}

	.size-s80h {
		height: 80%;
	}

	.size-s100h, .size-sfull, .size-sfullw {
		height: 100%;
	}

	.size-sfullv, .size-sfullvw {
		width: 100vw;
	}

	.size-sfullv, .size-sfullvh {
		height: 100vh;
	}

	.size-shalfv, .size-shalfvw {
		width: 50vw;
	}

	.size-shalfv, .size-shalfvh {
		height: 50vh;
	}

	/* ------------------------------------------------------------ [ row column
	*/
	.row-sec {
		width: 360px;
	}

	/* base12 */
	.col-s1 {
		width: 8.3333333333333333333333%;
	}

	.col-s2 {
		width: 16.6666666666666666666666%;
	}

	.col-s3 {
		width: 25%;
	}

	.col-s4 {
		width: 33.3333333333333333333333%;
	}

	.col-s5 {
		width: 41.6666666666666666666666%;
	}

	.col-s6 {
		width: 50%;
	}

	.col-s7 {
		width: 58.3333333333333333333333%;
	}

	.col-s8 {
		width: 66.6666666666666666666666%;
	}

	.col-s9 {
		width: 75%;
	}

	.col-s10 {
		width: 83.3333333333333333333333%;
	}

	.col-s11 {
		width: 91.6666666666666666666666%;
	}

	.col-spush1 {
		left: 8.3333333333333333333333%;
		right: auto;
		position: relative;
	}

	.col-spush2 {
		left: 16.6666666666666666666666%;
		right: auto;
		position: relative;
	}

	.col-spush3 {
		left: 25%;
		right: auto;
		position: relative;
	}

	.col-spush4 {
		left: 33.3333333333333333333333%;
		right: auto;
		position: relative;
	}

	.col-spush5 {
		left: 41.6666666666666666666666%;
		right: auto;
		position: relative;
	}

	.col-spush6 {
		left: 50%;
		right: auto;
		position: relative;
	}

	.col-spush7 {
		left: 58.3333333333333333333333%;
		right: auto;
		position: relative;
	}

	.col-spush8 {
		left: 66.6666666666666666666666%;
		right: auto;
		position: relative;
	}

	.col-spush9 {
		left: 75%;
		right: auto;
		position: relative;
	}

	.col-spush10 {
		left: 83.3333333333333333333333%;
		right: auto;
		position: relative;
	}

	.col-spush11 {
		left: 91.6666666666666666666666%;
		right: auto;
		position: relative;
	}

	.col-spull1 {
		right: 8.3333333333333333333333%;
		left: auto;
		position: relative;
	}

	.col-spull2 {
		right: 16.6666666666666666666666%;
		left: auto;
		position: relative;
	}

	.col-spull3 {
		right: 25%;
		left: auto;
		position: relative;
	}

	.col-spull4 {
		right: 33.3333333333333333333333%;
		left: auto;
		position: relative;
	}

	.col-spull5 {
		right: 41.6666666666666666666666%;
		left: auto;
		position: relative;
	}

	.col-spull6 {
		right: 50%;
		left: auto;
		position: relative;
	}

	.col-spull7 {
		right: 58.3333333333333333333333%;
		left: auto;
		position: relative;
	}

	.col-spull8 {
		right: 66.6666666666666666666666%;
		left: auto;
		position: relative;
	}

	.col-spull9 {
		right: 75%;
		left: auto;
		position: relative;
	}

	.col-spull10 {
		right: 83.3333333333333333333333%;
		left: auto;
		position: relative;
	}

	.col-spull11 {
		right: 91.6666666666666666666666%;
		left: auto;
		position: relative;
	}

	.col-soff1 {
		margin-left: 8.3333333333333333333333%;
	}

	.col-soff2 {
		margin-left: 16.6666666666666666666666%;
	}

	.col-soff3 {
		margin-left: 25%;
	}

	.col-soff4 {
		margin-left: 33.3333333333333333333333%;
	}

	.col-soff5 {
		margin-left: 41.6666666666666666666666%;
	}

	.col-soff6 {
		margin-left: 50%;
	}

	.col-soff7 {
		margin-left: 58.3333333333333333333333%;
	}

	.col-soff8 {
		margin-left: 66.6666666666666666666666%;
	}

	.col-soff9 {
		margin-left: 75%;
	}

	.col-soff10 {
		margin-left: 83.3333333333333333333333%;
	}

	.col-soff11 {
		margin-left: 91.6666666666666666666666%;
	}

	.col-snooff {
		margin-left: 0;
	}

	/* base5 */
	.col-s1of5 {
		width: 20%;
	}

	.col-s2of5 {
		width: 40%;
	}

	.col-s3of5 {
		width: 60%;
	}

	.col-s4of5 {
		width: 80%;
	}

	.col-spush1of5 {
		left: 20%;
		right: auto;
		position: relative;
	}

	.col-spush2of5 {
		left: 40%;
		right: auto;
		position: relative;
	}

	.col-spush3of5 {
		left: 60%;
		right: auto;
		position: relative;
	}

	.col-spush4of5 {
		left: 80%;
		right: auto;
		position: relative;
	}

	.col-spull1of5 {
		right: 20%;
		left: auto;
		position: relative;
	}

	.col-spull2of5 {
		right: 40%;
		left: auto;
		position: relative;
	}

	.col-spull3of5 {
		right: 60%;
		left: auto;
		position: relative;
	}

	.col-spull4of5 {
		right: 80%;
		left: auto;
		position: relative;
	}

	.col-soff1of5 {
		margin-left: 20%;
	}

	.col-soff2of5 {
		margin-left: 40%;
	}

	.col-soff3of5 {
		margin-left: 60%;
	}

	.col-soff4of5 {
		margin-left: 80%;
	}

	/* base7 */
	.col-s1of7 {
		width: 14.2857142857142857142857%;
	}

	.col-s2of7 {
		width: 28.5714285714285714285714%;
	}

	.col-s3of7 {
		width: 42.8571428571428571428571%;
	}

	.col-s4of7 {
		width: 57.1428571428571428571429%;
	}

	.col-s5of7 {
		width: 71.4285714285714285714286%;
	}

	.col-s6of7 {
		width: 85.7142857142857142857143%;
	}

	.col-spush1of7 {
		left: 14.2857142857142857142857%;
		right: auto;
		position: relative;
	}

	.col-spush2of7 {
		left: 28.5714285714285714285714%;
		right: auto;
		position: relative;
	}

	.col-spush3of7 {
		left: 42.8571428571428571428571%;
		right: auto;
		position: relative;
	}

	.col-spush4of7 {
		left: 57.1428571428571428571429%;
		right: auto;
		position: relative;
	}

	.col-spush5of7 {
		left: 71.4285714285714285714286%;
		right: auto;
		position: relative;
	}

	.col-spush6of7 {
		left: 85.7142857142857142857143%;
		right: auto;
		position: relative;
	}

	.col-spull1of7 {
		right: 14.2857142857142857142857%;
		left: auto;
		position: relative;
	}

	.col-spull2of7 {
		right: 28.5714285714285714285714%;
		left: auto;
		position: relative;
	}

	.col-spull3of7 {
		right: 42.8571428571428571428571%;
		left: auto;
		position: relative;
	}

	.col-spull4of7 {
		right: 57.1428571428571428571429%;
		left: auto;
		position: relative;
	}

	.col-spull5of7 {
		right: 71.4285714285714285714286%;
		left: auto;
		position: relative;
	}

	.col-spull6of7 {
		right: 85.7142857142857142857143%;
		left: auto;
		position: relative;
	}

	.col-soff1of7 {
		margin-left: 14.2857142857142857142857%;
	}

	.col-soff2of7 {
		margin-left: 28.5714285714285714285714%;
	}

	.col-soff3of7 {
		margin-left: 42.8571428571428571428571%;
	}

	.col-soff4of7 {
		margin-left: 57.1428571428571428571429%;
	}

	.col-soff5of7 {
		margin-left: 71.4285714285714285714286%;
	}

	.col-soff6of7 {
		margin-left: 85.7142857142857142857143%;
	}

	/* ------------------------------------------------------------ [ grid.cell (base12)
	*/
	.grid-sinline, .grid-scollapsed {
		display: inline-grid;
	}

	.grid-s1 {
		grid-template-columns: auto;
	}

	.grid-s2 {
		grid-template-columns: auto auto;
	}

	.grid-s3 {
		grid-template-columns: auto auto auto;
	}

	.grid-s4 {
		grid-template-columns: auto auto auto auto;
	}

	.grid-s5 {
		grid-template-columns: auto auto auto auto auto;
	}

	.grid-s6 {
		grid-template-columns: auto auto auto auto auto auto;
	}

	.grid-s7 {
		grid-template-columns: auto auto auto auto auto auto auto;
	}

	.grid-s8 {
		grid-template-columns: auto auto auto auto auto auto auto auto;
	}

	.grid-s9 {
		grid-template-columns: auto auto auto auto auto auto auto auto auto;
	}

	.grid-s10 {
		grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
	}

	.grid-s11 {
		grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;
	}

	.grid-s12 {
		grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
	}

	.grid-snogap {
		grid-gap: none;
	}

	.grid-gap {
		grid-gap: 0.625em;
	}

	.grid-gapsmall {
		grid-gap: 0.125em;
	}

	.grid-gapbig {
		grid-gap: 1.125em;
	}

	.grid-scenter, .grid-scenterx {
		justify-content: center;
	}

	.grid-sjustify, .grid-sjustifyx {
		justify-content: space-around;
	}

	.grid-sspaced, .grid-sspacedx {
		justify-content: space-evenly;
	}

	.grid-sexteme, .grid-sextemex {
		justify-content: space-between;
	}

	.grid-scenter, .grid-scentery {
		align-content: center;
	}

	.grid-sjustify, .grid-sjustifyy {
		align-content: space-around;
	}

	.grid-sspaced, .grid-sspacedy {
		align-content: space-evenly;
	}

	.grid-sexteme, .grid-sextemey {
		align-content: space-between;
	}

	.grid-stop {
		align-content: start;
	}

	.grid-sright {
		justify-content: end;
	}

	.grid-sbottom {
		align-content: end;
	}

	.grid-sleft {
		justify-content: start;
	}

	.grid > .cell, .grid-sinline > .cell, .grid-scollapsed > .cell {
		padding: 1.125em;
	}

	.grid-snopad > .cell {
		padding: 0;
	}

	/* ------------------------------------------------------------ [ border, round
	*/
	.round-s {
		border-radius: 0.875em;
	}

	.round-sno {
		border-radius: 0;
	}

	.round-ssmall {
		border-radius: 0.375em;
	}

	.round-sbig {
		border-radius: 1.125em;
	}

	.round-squarter {
		border-radius: 12.5%;
	}

	.round-shalf {
		border-radius: 25%;
	}

	.round-sfull {
		border-radius: 50%;
	}

	.border-s {
		border: 0.375em #666 solid;
	}

	.border-sno {
		border: 0;
	}

	.border-ssmall {
		border: 0.125em #666 solid;
	}

	.border-smedium {
		border: 0.625em #666 solid;
	}

	.border-sbig {
		border: 0.875em #666 solid;
	}

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

	.show-s, .hide-m, .hide-l {
		display: block;
	}

	@media (orientation:landscape) {
		.show-sh {
			display: block;
		}

		.hide-sh {
			display: none;
		}

	}

	@media (orientation:portrait) {
		.show-sv {
			display: block;
		}

		.hide-sv {
			display: none;
		}

	}

	/* ------------------------------------------------------------ [ notification
	*/
	.bkg-scritical {
		background-color: #914;
	}

	.bkg-sdanger {
		background-color: #d02;
	}

	.bkg-salert {
		background-color: #f73;
	}

	.bkg-swarning {
		background-color: #fc2;
	}

	.bkg-ssuccess {
		background-color: #0b2;
	}

	.bkg-sinform {
		background-color: #05e;
	}

	.bkg-snote {
		background-color: #ccc;
	}

	.text-scritical {
		color: #914;
	}

	.text-sdanger {
		color: #d02;
	}

	.text-salert {
		color: #f73;
	}

	.text-swarning {
		color: #fc2;
	}

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

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

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

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

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

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

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

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

	.bkg-snote {
		color: #ccc;
	}

	.snote {
		color: #999;
	}

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

}