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

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

   .row-mgn {
      margin: 1.0em 1.625em;
   }

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

   .row-auto {
      margin: 1.0em 90.83%;
   }

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

}