:root {
  --space-small: 8px;
  --space-medium: 16px;
  --space-big: 24px;  
}

.u-absolute { position:absolute }
.u-relative { position:relative }
.u-static { position:static }
.u-fixed { position:fixed }
.u-sticky { position:sticky }

.u-hide { display:none }
.u-block { display:block }
.u-inline { display:inline }
.u-inlineBlock { display:inline-block }
.u-flex { display:flex }
.u-row { flex-direction:row }
.u-column { flex-direction:column }
.u-flexRow { display:flex; flex-direction:row }
.u-flexColumn { display:flex; flex-direction:column }
.u-grow { flex-grow:1 }
.u-wrap { flex-wrap:wrap }
.u-hide { display:none }

.u-alignStart { align-items:flex-start }
.u-alignCenter { align-items:center }
.u-alignEnd { align-items:flex-end }
.u-justifyStart { justify-content:flex-start }
.u-justifyCenter { justify-content:center }
.u-justifyEnd { justify-content:flex-end }
.u-spaceEvenly { justify-content:space-evenly }
.u-spaceBetween { justify-content:space-between }
.u-spaceAround { justify-content:space-around }

.u-textLeft { text-align:left }
.u-textCenter { text-align:center }
.u-textRight { text-align:right }
.u-textBlock { text-align:justify }

.u-bold { font-weight:bold }
.u-normal { font-weight:normal }
.u-italic { font-style:italic }
.u-strike { font-style:strike }

.u-noMargin { margin:0 }
.u-noMarginT { margin-top:0px }
.u-noMarginR { margin-right:0px }
.u-noMarginB { margin-bottom:0px }
.u-noMarginL { margin-left:0px }
.u-marginTs { margin-top: var(--space-small) }
.u-marginRs { margin-right: var(--space-small) }
.u-marginBs { margin-bottom: var(--space-small) }
.u-marginLs { margin-left: var(--space-small) }
.u-marginTm { margin-top: var(--space-medium) }
.u-marginRm { margin-right: var(--space-medium) }
.u-marginBm { margin-bottom: var(--space-medium) }
.u-marginLm { margin-left: var(--space-medium) }
.u-marginTb { margin-top: var(--space-big) }
.u-marginRb { margin-right: var(--space-big) }
.u-marginBb { margin-bottom: var(--space-big) }
.u-marginLb { margin-left: var(--space-big) }
.u-margins { margin:var(--space-small) }
.u-marginm { margin:var(--space-medium) }
.u-marginb { margin:var(--space-big) }

.u-noPad { padding:0 }
.u-noPadT { padding-top:0px }
.u-noPadR { padding-right:0px }
.u-noPadB { padding-bottom:0px }
.u-noPadL { padding-left:0px }
.u-padTs { padding-top: var(--space-small) }
.u-padRs { padding-right: var(--space-small) }
.u-padBs { padding-bottom: var(--space-small) }
.u-padLs { padding-left: var(--space-small) }
.u-padTm { padding-top: var(--space-medium) }
.u-padRm { padding-right: var(--space-medium) }
.u-padBm { padding-bottom: var(--space-medium) }
.u-padLm { padding-left: var(--space-medium) }
.u-padTb { padding-top: var(--space-big) }
.u-padRb { padding-right: var(--space-big) }
.u-padBb { padding-bottom: var(--space-big) }
.u-padLb { padding-left: var(--space-big) }
.u-pads { padding:var(--space-small) }
.u-padm { padding:var(--space-medium) }
.u-padb { padding:var(--space-big) }

.u-size1of12 { width:calc(100% / 12) }
.u-size1of8 { width:calc(100% / 8) }
.u-size2of12, .u-size1of6 { width:calc(100% / 6) }
.u-size3of12, .u-size1of4 { width:calc(25%) }
.u-size4of12, .u-size1of3 { width:calc(100% / 3) }
.u-size5of12 { width:calc(100% / 12 * 5) }
.u-size6of12, .u-size1of2 { width:calc(50%) }
.u-size7of12 { width:calc(50%) }
.u-size8of12, .u-size2of3 { width:calc(100% / 3 * 2) }
.u-size9of12, .u-size3of4 { width:calc(75%) }
.u-size10of12 { width:calc(100% / 12 * 10) }
.u-size11of12 { width:calc(100% / 12 * 11) }
.u-size12of12, .u-sizeFull { width:calc(100%) }

.u-height1of12 { height:calc(100% / 12) }
.u-height2of12, .u-height1of6 { height:calc(100% / 6) }
.u-height3of12, .u-height1of4 { height:calc(25%) }
.u-height4of12, .u-height1of3 { height:calc(100% / 3) }
.u-height5of12 { height:calc(100% / 12 * 5) }
.u-height6of12, .u-height1of2 { height:calc(50%) }
.u-height7of12 { height:calc(50%) }
.u-height8of12, .u-height2of3 { height:calc(100% / 3 * 2) }
.u-height9of12, .u-height3of4 { height:calc(75%) }
.u-height10of12 { height:calc(100% / 12 * 10) }
.u-height11of12 { height:calc(100% / 12 * 11) }
.u-height12of12, .u-heightFull { height:calc(100%) }

@media( max-width:1280px ){
  .u-md-absolute { position:absolute }
  .u-md-relative { position:relative }
  .u-md-static { position:static }
  .u-md-fixed { position:fixed }
  .u-md-sticky { position:sticky }
  
  .u-md-hide { display:none }
  .u-md-block { display:block }
  .u-md-inline { display:inline }
  .u-md-inlineBlock { display:inline-block }
  .u-md-flex { display:flex }
  .u-md-row { flex-direction:row }
  .u-md-column { flex-direction:column }
  .u-md-flexRow { display:flex; flex-direction:row }
  .u-md-flexColumn { display:flex; flex-direction:column }
  .u-md-grow { flex-grow:1 }
  .u-md-wrap { flex-wrap:wrap }

  .u-md-alignStart { align-items:flex-start }
  .u-md-alignCenter { align-items:center }
  .u-md-alignEnd { align-items:flex-end }
  .u-md-justifyStart { justify-content:flex-start }
  .u-md-justifyCenter { justify-content:center }
  .u-md-justifyEnd { justify-content:flex-end }
  .u-md-spaceBetween { justify-content:space-between }
  .u-md-spaceAround { justify-content:space-around }

  .u-md-textLeft { text-align:left }
  .u-md-textCenter { text-align:center }
  .u-md-textRight { text-align:right }
  .u-md-textBlock { text-align:justify }

  .u-md-bold { font-weight:bold }
  .u-md-normal { font-weight:normal }
  .u-md-italic { font-style:italic }
  .u-md-strike { font-style:strike }

  .u-md-noMargin { margin:0 }
  .u-md-noMarginT { margin-top:0px }
  .u-md-noMarginR { margin-right:0px }
  .u-md-noMarginB { margin-bottom:0px }
  .u-md-noMarginL { margin-left:0px }
  .u-md-marginTs { margin-top: var(--space-small) }
  .u-md-marginRs { margin-right: var(--space-small) }
  .u-md-marginBs { margin-bottom: var(--space-small) }
  .u-md-marginLs { margin-left: var(--space-small) }
  .u-md-marginTm { margin-top: var(--space-medium) }
  .u-md-marginRm { margin-right: var(--space-medium) }
  .u-md-marginBm { margin-bottom: var(--space-medium) }
  .u-md-marginLm { margin-left: var(--space-medium) }
  .u-md-marginTb { margin-top: var(--space-big) }
  .u-md-marginRb { margin-right: var(--space-big) }
  .u-md-marginBb { margin-bottom: var(--space-big) }
  .u-md-marginLb { margin-left: var(--space-big) }
  .u-md-margins { margin:var(--space-small) }
  .u-md-marginm { margin:var(--space-medium) }
  .u-md-marginb { margin:var(--space-big) }
  
  .u-md-noPad { padding:0 }
  .u-md-noPadT { padding-top:0px }
  .u-md-noPadR { padding-right:0px }
  .u-md-noPadB { padding-bottom:0px }
  .u-md-noPadL { padding-left:0px }
  .u-md-padTs { padding-top: var(--space-small) }
  .u-md-padRs { padding-right: var(--space-small) }
  .u-md-padBs { padding-bottom: var(--space-small) }
  .u-md-padLs { padding-left: var(--space-small) }
  .u-md-padTm { padding-top: var(--space-medium) }
  .u-md-padRm { padding-right: var(--space-medium) }
  .u-md-padBm { padding-bottom: var(--space-medium) }
  .u-md-padLm { padding-left: var(--space-medium) }
  .u-md-padTb { padding-top: var(--space-big) }
  .u-md-padRb { padding-right: var(--space-big) }
  .u-md-padBb { padding-bottom: var(--space-big) }
  .u-md-padLb { padding-left: var(--space-big) }
  .u-md-pads { padding:var(--space-small) }
  .u-md-padm { padding:var(--space-medium) }
  .u-md-padb { padding:var(--space-big) }
  
  .u-md-size1of12 { width:calc(100% / 12) }
  .u-md-size1of8 { width:calc(100% / 8) }
  .u-md-size2of12, .u-md-size1of6 { width:calc(100% / 6) }
  .u-md-size3of12, .u-md-size1of4 { width:calc(25%) }
  .u-md-size4of12, .u-md-size1of3 { width:calc(100% / 3) }
  .u-md-size5of12 { width:calc(100% / 12 * 5) }
  .u-md-size6of12, .u-md-size1of2 { width:calc(50%) }
  .u-md-size7of12 { width:calc(50%) }
  .u-md-size8of12, .u-md-size2of3 { width:calc(100% / 3 * 2) }
  .u-md-size9of12, .u-md-size3of4 { width:calc(75%) }
  .u-md-size10of12 { width:calc(100% / 12 * 10) }
  .u-md-size11of12 { width:calc(100% / 12 * 11) }
  .u-md-size12of12, .u-md-sizeFull { width:calc(100%) }
  
  .u-md-height1of12 { height:calc(100% / 12) }
  .u-md-height2of12, .u-md-height1of6 { height:calc(100% / 6) }
  .u-md-height3of12, .u-md-height1of4 { height:calc(25%) }
  .u-md-height4of12, .u-md-height1of3 { height:calc(100% / 3) }
  .u-md-height5of12 { height:calc(100% / 12 * 5) }
  .u-md-height6of12, .u-md-height1of2 { height:calc(50%) }
  .u-md-height7of12 { height:calc(50%) }
  .u-md-height8of12, .u-md-height2of3 { height:calc(100% / 3 * 2) }
  .u-md-height9of12, .u-md-height3of4 { height:calc(75%) }
  .u-md-height10of12 { height:calc(100% / 12 * 10) }
  .u-md-height11of12 { height:calc(100% / 12 * 11) }
  .u-md-height12of12, .u-md-heightFull { height:calc(100%) }
}

@media( max-width:600px ){
  .u-sm-absolute { position:absolute }
  .u-sm-relative { position:relative }
  .u-sm-static { position:static }
  .u-sm-fixed { position:fixed }
  .u-sm-sticky { position:sticky }
  
  .u-sm-hide { display:none }
  .u-sm-block { display:block }
  .u-sm-inline { display:inline }
  .u-sm-inlineBlock { display:inline-block }
  .u-sm-flex { display:flex }
  .u-sm-row { flex-direction:row }
  .u-sm-column { flex-direction:column }
  .u-sm-flexRow { display:flex; flex-direction:row }
  .u-sm-flexColumn { display:flex; flex-direction:column }
  .u-sm-grow { flex-grow:1 }
  .u-sm-wrap { flex-wrap:wrap }
  
  .u-sm-alignStart { align-items:flex-start }
  .u-sm-alignCenter { align-items:center }
  .u-sm-alignEnd { align-items:flex-end }
  .u-sm-justifyStart { justify-content:flex-start }
  .u-sm-justifyCenter { justify-content:center }
  .u-sm-justifyEnd { justify-content:flex-end }
  .u-sm-spaceBetween { justify-content:space-between }
  .u-sm-spaceAround { justify-content:space-around }

  .u-sm-textLeft { text-align:left }
  .u-sm-textCenter { text-align:center }
  .u-sm-textRight { text-align:right }
  .u-sm-textBlock { text-align:justify }

  .u-sm-bold { font-weight:bold }
  .u-sm-normal { font-weight:normal }
  .u-sm-italic { font-style:italic }
  .u-sm-strike { font-style:strike }
  
  .u-sm-noMargin { margin:0 }
  .u-sm-noMarginT { margin-top:0px }
  .u-sm-noMarginR { margin-right:0px }
  .u-sm-noMarginB { margin-bottom:0px }
  .u-sm-noMarginL { margin-left:0px }
  .u-sm-marginTs { margin-top: var(--space-small) }
  .u-sm-marginRs { margin-right: var(--space-small) }
  .u-sm-marginBs { margin-bottom: var(--space-small) }
  .u-sm-marginLs { margin-left: var(--space-small) }
  .u-sm-marginTm { margin-top: var(--space-medium) }
  .u-sm-marginRm { margin-right: var(--space-medium) }
  .u-sm-marginBm { margin-bottom: var(--space-medium) }
  .u-sm-marginLm { margin-left: var(--space-medium) }
  .u-sm-marginTb { margin-top: var(--space-big) }
  .u-sm-marginRb { margin-right: var(--space-big) }
  .u-sm-marginBb { margin-bottom: var(--space-big) }
  .u-sm-marginLb { margin-left: var(--space-big) }
  .u-sm-margins { margin:var(--space-small) }
  .u-sm-marginm { margin:var(--space-medium) }
  .u-sm-marginb { margin:var(--space-big) }
  
  .u-sm-noPad { padding:0 }
  .u-sm-noPadT { padding-top:0px }
  .u-sm-noPadR { padding-right:0px }
  .u-sm-noPadB { padding-bottom:0px }
  .u-sm-noPadL { padding-left:0px }
  .u-sm-padTs { padding-top: var(--space-small) }
  .u-sm-padRs { padding-right: var(--space-small) }
  .u-sm-padBs { padding-bottom: var(--space-small) }
  .u-sm-padLs { padding-left: var(--space-small) }
  .u-sm-padTm { padding-top: var(--space-medium) }
  .u-sm-padRm { padding-right: var(--space-medium) }
  .u-sm-padBm { padding-bottom: var(--space-medium) }
  .u-sm-padLm { padding-left: var(--space-medium) }
  .u-sm-padTb { padding-top: var(--space-big) }
  .u-sm-padRb { padding-right: var(--space-big) }
  .u-sm-padBb { padding-bottom: var(--space-big) }
  .u-sm-padLb { padding-left: var(--space-big) }
  .u-sm-pads { padding:var(--space-small) }
  .u-sm-padm { padding:var(--space-medium) }
  .u-sm-padb { padding:var(--space-big) }
  
  .u-sm-size1of12 { width:calc(100% / 12) }
  .u-sm-size1of8 { width:calc(100% / 8) }
  .u-sm-size2of12, .u-sm-size1of6 { width:calc(100% / 6) }
  .u-sm-size3of12, .u-sm-size1of4 { width:calc(25%) }
  .u-sm-size4of12, .u-sm-size1of3 { width:calc(100% / 3) }
  .u-sm-size5of12 { width:calc(100% / 12 * 5) }
  .u-sm-size6of12, .u-sm-size1of2 { width:calc(50%) }
  .u-sm-size7of12 { width:calc(50%) }
  .u-sm-size8of12, .u-sm-size2of3 { width:calc(100% / 3 * 2) }
  .u-sm-size9of12, .u-sm-size3of4 { width:calc(75%) }
  .u-sm-size10of12 { width:calc(100% / 12 * 10) }
  .u-sm-size11of12 { width:calc(100% / 12 * 11) }
  .u-sm-size12of12, .u-sm-sizeFull { width:calc(100%) }
  
  .u-sm-height1of12 { height:calc(100% / 12) }
  .u-sm-height2of12, .u-sm-height1of6 { height:calc(100% / 6) }
  .u-sm-height3of12, .u-sm-height1of4 { height:calc(25%) }
  .u-sm-height4of12, .u-sm-height1of3 { height:calc(100% / 3) }
  .u-sm-height5of12 { height:calc(100% / 12 * 5) }
  .u-sm-height6of12, .u-sm-height1of2 { height:calc(50%) }
  .u-sm-height7of12 { height:calc(50%) }
  .u-sm-height8of12, .u-sm-height2of3 { height:calc(100% / 3 * 2) }
  .u-sm-height9of12, .u-sm-height3of4 { height:calc(75%) }
  .u-sm-height10of12 { height:calc(100% / 12 * 10) }
  .u-sm-height11of12 { height:calc(100% / 12 * 11) }
  .u-sm-height12of12, .u-sm-heightFull { height:calc(100%) }
}