/* ======================
   u-(tilities) namespace 
   ====================== */

.u-block {display:block}
.u-pointer, .u-pointer:hover { cursor: pointer; }

.u-fit { padding-left: 0 !important; padding-right: 0 !important; }
.u-off { opacity: 0.3; cursor: default !important }
.u-elli { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top } /* vertical align: trick to avoid overflow+hidden's space */

[class*='u-grid-'] {  vertical-align: top; position: relative; }

.u-grid-0 { display: none }
.u-grid-1 { display: inline-block; width: 8.3333% }
.u-grid-2 { display: inline-block; width: 16.6666% }
.u-grid-3 { display: inline-block; width: 25% }
.u-grid-4 { display: inline-block; width: 33.3333%; }
.u-grid-5 { display: inline-block; width: 41.6666% }
.u-grid-6 { display: inline-block; width: 50% }
.u-grid-7 { display: inline-block; width: 58.333% }
.u-grid-8 { display: inline-block; width: 66.6666% }
.u-grid-9 { display: inline-block; width: 75% }
.u-grid-10 { display: inline-block; width: 83.3333% }
.u-grid-11 { display: inline-block; width: 91.6666% }
.u-grid-12 { display: block; width: 100% }

.u-grid-r { text-align: right }

.u-grid-10pc { display: inline-block; width: 10% }
.u-grid-20pc { display: inline-block; width: 20% }
.u-grid-30pc { display: inline-block; width: 30% }
.u-grid-70pc { display: inline-block; width: 70% }
.u-grid-80pc { display: inline-block; width: 80% }
.u-grid-90pc { display: inline-block; width: 90% }

.u-grid-table { display: table; }
.u-grid-table > [class*='u-grid-']{ display: table-cell; }

.u-gutter--xs { width: calc(100% + 1rem); margin-left:-0.5rem;}
.u-gutter--s { width: calc(100% + 2rem); margin-left:-1rem;}
.u-gutter--m, .u-gutter { width: calc(100% + 3rem); margin-left: -1.5rem; }
.u-gutter--l { width: calc(100% + 4rem); margin-left: -2rem; }

.u-gutter--xs > [class*='u-grid-'] { border:0.5rem solid transparent; border-top:0px; border-bottom-width:1rem; background-clip: padding-box; }
.u-gutter--s  > [class*='u-grid-']{ border:1rem solid transparent; border-top:0px; border-bottom-width:2rem; background-clip: padding-box; }
.u-gutter--m > [class*='u-grid-'], .u-gutter  > [class*='u-grid-']{ border:1.5rem solid transparent; border-top:0px; border-bottom-width:3rem; background-clip: padding-box; }
.u-gutter--l  > [class*='u-grid-']{ border:2rem solid transparent; border-top:0px; border-bottom-width:4rem; background-clip: padding-box; }

.u-text--uppercase { text-transform: uppercase; }
.u-text--normal { text-transform: inherit !important; }
.u-text--lowercase { text-transform: lowercase; }

.u-text--nowrap { white-space: nowrap; }
.u-text--break { word-break: break-all; }
.u-text--underline { text-decoration: underline; }
.u-text--reverse{ unicode-bidi: bidi-override; direction: rtl; }

.u-text--light { opacity:0.7 }

.u-text--justify { text-align: justify !important; }
.u-text--center { text-align: center !important; }
.u-text--right { text-align: right !important; }
.u-text--left { text-align: left !important; }

.u-text--justify--last { text-align-last: justify !important; }
.u-text--center--last { text-align-last: center !important; }
.u-text--right--last { text-align-last: right !important; }
.u-text--left--last { text-align-last: left !important; }

.u-text--xs { font-size: 0.9rem; }
.u-text--s { font-size: 1.2rem; }
.u-text--m { font-size: 1.8rem; }
.u-text--l { font-size: 2.3rem; }
.u-text--xl { font-size: 3.2rem; }
input:not([type="checkbox"]):not([type="radio"]).u-text--xl { height: 5rem; }  

.u-size--h100 { height: 100%; }
.u-size--w100{ width: 100%; }

/* Size */
.u-scale--xs { transform:scale(0.3); transform-origin: 0 0; }
.u-scale--s { transform:scale(0.7); transform-origin: 0 0; } 
.u-scale--l { transform:scale(1.4); transform-origin: 0 0; } 
.u-scale--xl { transform:scale(2); transform-origin: 0 0; }

/* Position */
.u-center { margin-left: auto; margin-right: auto; }
.u-ovfl { overflow: hidden; }
.u-flo.right { float: right; }
.u-flo.left { float: left; }
.u-flo--right { float: right; }
.u-flo--left { float: left; }
.u-rel { position: relative; }
.u-fix { float: none; position: fixed; z-index: 1}
.u-abs { float: none; position: absolute !important; z-index: 1 }
.u-abs.left, .u-fix.left { left: 0; }
.u-abs.left.rel, .u-fix.left.rel { left: inherit; }
.u-abs.right, .u-fix.right { right: 0; }
.u-abs.right.rel, .u-fix.right.rel { right: inherit; }
.u-abs.center, .u-fix.center { left:50% !important; -webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%); }
.u-abs.top, .u-fix.top { top: 0; }
.u-abs.bottom, .u-fix.bottom { bottom: 0; }
.u-abs.middle, .u-fix.middle { top: 50% !important; -webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%); }
.u-abs.middle.center, .u-fix.middle.center { -webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%); }

/* ??? */
.u-ver--middle:before, .u-ver--middle:last-child, .u-ver--middle { vertical-align: middle; }
.u-ver--bottom:before, .u-ver--bottom:last-child, .u-ver--bottom { vertical-align: bottom; margin-bottom: 0px !important; padding-bottom: 0px !important; }
.u-ver--top:before, .u-ver--top:first-child:not(.o-button), .u-ver--top:not(.o-button) { vertical-align: top; margin-top: 0px !important; padding-top: 0px !important; }
table.u-ver--top td { vertical-align: top; }
table.u-ver--bottom td { vertical-align: bottom; }
table.u-ver--middle td { vertical-align: middle; }

.u-padding--s { padding: 0.5rem !important;}
.u-padding--m, .u-padding { padding: 1rem !important;}
.u-padding--l { padding: 2rem !important;}
.u-padding--xl { padding: 3rem !important;}
.u-padding--xxl { padding: 5rem !important;}
.u-padding--vertical { padding-left: 1rem !important; padding-right: 1rem !important;}
.u-padding--vertical--s { padding-left: 0.5rem !important; padding-right: 0.51rem !important;}
.u-padding--horizontal { padding-top: 1rem !important; padding-bottom: 1rem !important;}
.u-padding--horizontal--s { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;}
.u-padding--bottom--s { padding-bottom: 0.5rem !important;}
.u-padding--bottom--m, .u-padding--bottom { padding-bottom: 1rem !important;}
.u-padding--bottom--l { padding-bottom: 2rem !important;}
.u-padding--bottom--xl { padding-bottom: 3rem !important;}
.u-padding--bottom--xxl { padding-bottom: 5rem !important;}
.u-padding--top--s { padding-top: 0.5rem !important;}
.u-padding--top--m, .u-padding--top { padding-top: 1rem !important;}
.u-padding--top--l { padding-top: 2rem !important;}
.u-padding--top--xl { padding-top: 3rem !important;}
.u-padding--top--xxl { padding-top: 5rem !important;}
.u-padding--left--s { padding-left: 0.5rem !important;}
.u-padding--left--m, .u-padding--left { padding-left: 1rem !important;}
.u-padding--left--l { padding-left: 2rem !important;}
.u-padding--left--xl { padding-left: 3rem !important;}
.u-padding--left--xxl { padding-left: 5rem !important;}
.u-padding--right--s { padding-right: 0.5rem !important;}
.u-padding--right--m, .u-padding--right { padding-right: 1rem !important;}
.u-padding--right--l { padding-right: 2rem !important;}
.u-padding--right--xl { padding-right: 3rem !important;}
.u-padding--right--xxl { padding-right: 5rem !important;}

.u-padding--s .u-abs.left:not(.u-force), .u-padding--s .u-fix.left:not(.u-force) { left: 0.5rem; }
.u-padding--s .u-abs.right:not(.u-force), .u-padding--s .u-fix.right:not(.u-force) { right: 0.5rem; }
.u-padding--m .u-abs.left:not(.u-force), .u-padding--m .u-fix.left:not(.u-force), .u-padding .u-abs.left:not(.u-force), .u-padding .u-fix.left:not(.u-force) { left: 1rem; }
.u-padding--m .u-abs.right:not(.u-force), .u-padding--m .u-fix.right:not(.u-force), .u-padding .u-abs.right:not(.u-force), .u-padding .u-fix.right:not(.u-force) { right: 1rem; }
.u-padding--l .u-abs.left:not(.u-force), .u-padding--l .u-fix.left:not(.u-force) { left: 2rem; }
.u-padding--l .u-abs.right:not(.u-force), .u-padding--l .u-fix.right:not(.u-force) { right: 2rem; }
.u-padding--xl .u-abs.left:not(.u-force), .u-padding--xl .u-fix.left:not(.u-force) { left: 3rem; }
.u-padding--xl .u-abs.right:not(.u-force), .u-padding--xl .u-fix.right:not(.u-force) { right: 3rem; }
.u-padding--xxl .u-abs.left:not(.u-force), .u-padding--xl .u-fix.left:not(.u-force) { left: 5rem; }
.u-padding--xxl .u-abs.right:not(.u-force), .u-padding--xl .u-fix.right:not(.u-force) { right: 5rem; }

.u-margin--s { margin: 1rem !important;}
.u-margin--m, .u-margin { margin: 2rem !important;}
.u-margin--l { margin: 3rem !important;}
.u-margin--xl { margin: 5rem !important;}
.u-margin--vertical { margin-left: 2rem !important; margin-right: 2rem !important;}
.u-margin--horizontal { margin-top: 2rem !important; margin-bottom: 2rem !important;}
.u-margin--bottom--xs { margin-bottom: 0.5rem !important;}
.u-margin--bottom--s { margin-bottom: 1rem !important;}
.u-margin--bottom--m, .u-margin--bottom { margin-bottom: 2rem !important;}
.u-margin--bottom--l { margin-bottom: 3rem !important;}
.u-margin--bottom--xl { margin-bottom: 5rem !important;}
.u-margin--top--s { margin-top: 1rem !important;}
.u-margin--top--m, .u-margin--top { margin-top: 2rem !important;}
.u-margin--top--l { margin-top: 3rem !important;}
.u-margin--top--xl { margin-top: 5rem !important;}
.u-margin--left--s { margin-left: 1rem !important;}
.u-margin--left--m, .u-margin--left { margin-left: 2rem !important;}
.u-margin--left--l { margin-left: 3rem !important;}
.u-margin--left--xl { margin-left: 5rem !important;}
.u-margin--right--s { margin-right: 1rem !important;}
.u-margin--right--m, .u-margin--right { margin-right: 2rem !important;}
.u-margin--right--l { margin-right: 3rem !important;}
.u-margin--right--xl { margin-right: 5rem !important;}

.u-inlineblock { display: inline-block !important; }
.u-inlineblock > li { display: inline-block; }

.u-invisible { visibility: hidden !important; }

.u-clear { clear: both; }
.u-clear:after { content: ""; display: block; clear: both; }

.u-none { display: none; }
.u-none--empty:empty{ display: none; }

.u-fx--blur{ -webkit-filter: blur(1px); filter: blur(1px); }

.u-bg--inside { background-clip: padding-box; }
.u-bg--cover { background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; }
.u-bg--contain { background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; }

.u-fixed { table-layout:fixed }
.u-width-auto {width:auto}

.u-sticky { position: sticky; position: -webkit-sticky; }

/* =============
   no- namespace 
================ */

.no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.no--events, .no-events :hover, .no--events:hover{ cursor: inherit !important; pointer-events: none !important; transition: none !important; }
.no-list { list-style: none !important; }

.no-margin { margin: 0 !important; }
.no-margin--top { margin-top: 0 !important; }
.no-margin--bottom { margin-bottom: 0 !important; }
.no-margin--left { margin-left: 0 !important; }
.no-margin--right { margin-right: 0 !important; }
.no-margin--horizontal { margin-top: 0 !important; margin-bottom: 0 !important;}
.no-margin--vertical { margin-left: 0 !important; margin-right: 0 !important;}

.no-padding { padding: 0 !important; }
.no-padding--top { padding-top: 0 !important; }
.no-padding--bottom { padding-bottom: 0 !important; }
.no-padding--left { padding-left: 0 !important; }
.no-padding--right { padding-right: 0 !important; }
.no-padding--horizontal { padding-top: 0 !important; padding-bottom: 0 !important;}
.no-padding--vertical { padding-left: 0 !important; padding-right: 0 !important;}

.no-color { color: initial !important; }
.no-background { background-color: transparent !important; background:none !important;}