When u-
means style=
There are fashions in CSS usage, and I don't always keep up with them. Structural markup like BEM block--element-modifier
is currently gaining ground.
Lurking within frameworks that follow BEM-like ideas, such as SUIT and Skeleton, along with the structure, are so-called 'utility classes' that use the prefix u-
and do things like:
.u-full-width {
width: 100%;
box-sizing: border-box; }
.u-max-full-width {
max-width: 100%;
box-sizing: border-box; }
This seems a reasonable compromise between marking up for structure and for layout, but it creeps over time. Look at the markup on Twitter and Medium and see how many u-
classes they have.
In practice they are ways to inject inline styles onto elements without having to explicitly structure them. Which seems fair enough on one level - things like .u-hide{display:none!important}
or .u-textColorRed{color:#cc5454!important}
seem handy, but in practice they are crossing a line.
I'd suggest if you are going to do this kind of thing, use a prefix of hack-
or style-
instead. That way your code saying
<article class="u-sizeViewHeightMin100 postArticle postArticle--full" lang="en"> <header class="container u-size740 is-underMetabar"> <div class="row u-showOnMobile"> <div class="col u-xs-size12of12 u-xs-bottom10">
would say
<article class="style-sizeViewHeightMin100 postArticle postArticle--full" lang="en"> <header class="container style-size740 is-underMetabar"> <div class="row style-showOnMobile"> <div class="col style-xs-size12of12 style-xs-bottom10">
which is more honest, and will gzip to the same size. It would prevent the temptation to do class=".style-textUppercase"
when style=text-transform:uppercase
is there.
Why am I bothered about using u-
like this? When we defined microformats-2, we came up with short prefixes for classes to indicate parsing rules, as a way to avoid the parsers needing knowledge of the per-type field names (which was a problem with microformats-1).
We used h-
for an object (like h-entry
), p-
for a text property (like p-entry
), dt-
for a date (like dt-published
), e-
for an HTML property (like e-content
) and u-
for a URL property (like u-photo
). They define rules on how to look for the properties in the HTML.
Structural markup like BEM coexists well with microformat classes — I was able to map the BBC Recipe site to h-recipe
by simple translation rules — for example: this Lasagne becomes a recipe card
However the dual usage of u-
classes does cause potential confusion.
We have a suggested parsing rule to mitigate this, but it would be better if we could avoid the clash of worldviews. That said, there is no real chance of namespace collision - the indieweb uses microformats to indicate properties like u-photo, u-url, u-like-of, u-in-reply-to
which won't collide with styling directives like u-size1of10, u-size5of12 or u-xs-size80x80 u-sm-size80x80 u-md-size80x80 u-lg-size80x80
.
If your code has grown hundreds of utility classes like this, changing them to a style-
prefix may be a good way to prune them back.
Those u- classes in full
Twitter has 244
.u-after1of10{margin-right:10%!important}.u-after1of8{margin-right:12.5%!important}.u-after1of6,.u-after2of12{margin-right:16.666666666666664%!important}.u-after1of5,.u-after2of10{margin-right:20%!important}.u-after1of4,.u-after2of8,.u-after3of12{margin-right:25%!important}.u-after3of10{margin-right:30%!important}.u-after1of3,.u-after2of6,.u-after4of12{margin-right:33.33333333333333%!important}.u-after3of8{margin-right:37.5%!important}.u-after2of5,.u-after4of10{margin-right:40%!important}.u-after5of12{margin-right:41.66666666666667%!important}.u-after1of2,.u-after2of4,.u-after3of6,.u-after4of8,.u-after5of10,.u-after6of12{margin-right:50%!important}.u-after7of12{margin-right:58.333333333333336%!important}.u-after3of5,.u-after6of10{margin-right:60%!important}.u-after5of8{margin-right:62.5%!important}.u-after2of3,.u-after4of6,.u-after8of12{margin-right:66.66666666666666%!important}.u-after7of10{margin-right:70%!important}.u-after3of4,.u-after6of8,.u-after9of12{margin-right:75%!important}.u-after4of5,.u-after8of10{margin-right:80%!important}.u-after5of6,.u-after10of12{margin-right:83.33333333333334%!important}.u-after7of8{margin-right:87.5%!important}.u-after9of10{margin-right:90%!important}.u-after11of12{margin-right:91.66666666666666%!important}.u-alignTop{vertical-align:top!important}.u-alignMiddle{vertical-align:middle!important}.u-alignBaseline{vertical-align:baseline!important}.u-alignBottom{vertical-align:bottom!important}.u-before1of12{margin-left:8.333333333333332%!important}.u-before1of10{margin-left:10%!important}.u-before1of8{margin-left:12.5%!important}.u-before1of6,.u-before2of12{margin-left:16.666666666666664%!important}.u-before1of5,.u-before2of10{margin-left:20%!important}.u-before1of4,.u-before2of8,.u-before3of12{margin-left:25%!important}.u-before3of10{margin-left:30%!important}.u-before1of3,.u-before2of6,.u-before4of12{margin-left:33.33333333333333%!important}.u-before3of8{margin-left:37.5%!important}.u-before2of5,.u-before4of10{margin-left:40%!important}.u-before5of12{margin-left:41.66666666666667%!important}.u-before1of2,.u-before2of4,.u-before3of6,.u-before4of8,.u-before5of10,.u-before6of12{margin-left:50%!important}.u-before7of12{margin-left:58.333333333333336%!important}.u-before3of5,.u-before6of10{margin-left:60%!important}.u-before5of8{margin-left:62.5%!important}.u-before2of3,.u-before4of6,.u-before8of12{margin-left:66.66666666666666%!important}.u-before7of10{margin-left:70%!important}.u-before3of4,.u-before6of8,.u-before9of12{margin-left:75%!important}.u-before4of5,.u-before8of10{margin-left:80%!important}.u-before5of6,.u-before10of12{margin-left:83.33333333333334%!important}.u-before7of8{margin-left:87.5%!important}.u-before9of10{margin-left:90%!important}.u-before11of12{margin-left:91.66666666666666%!important}.u-chromeOverflowFix{-webkit-transform:translateZ(0);transform:translateZ(0)}.ms-windows .u-chromeOverflowFix{-webkit-transform:none!important;-ms-transform:none!important;transform:none!important}.u-borderRadiusInherit{border-radius:inherit!important}.u-block{display:block!important}.u-hidden,.u-emptyHide:empty{display:none!important}.u-hiddenVisually{border:0!important;clip:rect(1px,1px,1px,1px)!important;font-size:1px!important;height:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.u-inline{display:inline!important}.u-inlineBlock{display:inline-block!important;max-width:100%}.u-table{display:table!important}.u-tableCell{display:table-cell!important}.u-tableRow{display:table-row!important}.u-flexColumn{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.u-flexRow{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-moz-box-orient:horizontal;-moz-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.u-flexGrow{-webkit-flex:1 1 auto;-moz-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.u-dir[dir="rtl"]{direction:rtl!important;text-align:right!important;unicode-bidi:embed}.u-dir[dir="ltr"]{direction:ltr!important;text-align:left!important;unicode-bidi:embed}.u-cf:before,.u-cf:after{content:" ";display:table}.u-cf:after{clear:both}.u-nbfc{overflow:hidden!important}.u-nbfcAlt{display:table-cell!important;width:10000px!important}.u-floatLeft{float:left!important}.u-floatRight{float:right!important}/*! suit-utils-link v0.2.0 | MIT License | github.com/suitcss */.u-linkClean,.u-linkClean:hover,.u-linkClean:focus,.u-linkClean:active{text-decoration:none!important}.u-linkComplex,.u-linkComplex:hover,.u-linkComplex:focus,.u-linkComplex:active{text-decoration:none!important}.u-linkComplex:hover .u-linkComplex-target,.u-linkComplex:focus .u-linkComplex-target,.u-linkComplex:active .u-linkComplex-target{text-decoration:underline!important}.u-linkBlock,.u-linkBlock:hover,.u-linkBlock:focus,.u-linkBlock:active{display:block!important;text-decoration:none!important}.u-noTransitions{transition:none!important;transition-property:none!important;-webkit-animation-duration:0s!important;animation-duration:0s!important;-webkit-transform:none!important;-ms-transform:none!important;transform:none!important}.u-posAbsolute{position:absolute!important}.u-posAbsoluteCenter{bottom:0!important;left:0!important;margin:auto!important;position:absolute!important;right:0!important;top:0!important}.u-posFixed{position:fixed!important;-webkit-backface-visibility:hidden;backface-visibility:hidden}.u-posRelative{position:relative!important}.u-posStatic{position:static!important}.u-scrollY{overflow-y:scroll!important}.u-sizeFit,.u-sizeFitAlt{display:block!important;float:left!important;width:auto!important}.u-sizeFitAlt{float:right!important}.u-sizeFill{display:block!important;overflow:hidden!important;width:auto!important}.u-sizeFillAlt{display:table-cell!important;max-width:100%!important;width:10000px!important}.u-sizeFull{-moz-box-sizing:border-box!important;box-sizing:border-box!important;display:block!important;width:100%!important}.u-size1of12{width:8.333333333333332%!important}.u-size1of10{width:10%!important}.u-size1of8{width:12.5%!important}.u-size1of6,.u-size2of12{width:16.666666666666664%!important}.u-size1of5,.u-size2of10{width:20%!important}.u-size1of4,.u-size2of8,.u-size3of12{width:25%!important}.u-size3of10{width:30%!important}.u-size1of3,.u-size2of6,.u-size4of12{width:33.33333333333333%!important}.u-size3of8{width:37.5%!important}.u-size2of5,.u-size4of10{width:40%!important}.u-size5of12{width:41.66666666666667%!important}.u-size1of2,.u-size2of4,.u-size3of6,.u-size4of8,.u-size5of10,.u-size6of12{width:50%!important}.u-size7of12{width:58.333333333333336%!important}.u-size3of5,.u-size6of10{width:60%!important}.u-size5of8{width:62.5%!important}.u-size2of3,.u-size4of6,.u-size8of12{width:66.66666666666666%!important}.u-size7of10{width:70%!important}.u-size3of4,.u-size6of8,.u-size9of12{width:75%!important}.u-size4of5,.u-size8of10{width:80%!important}.u-size5of6,.u-size10of12{width:83.33333333333334%!important}.u-size7of8{width:87.5%!important}.u-size9of10{width:90%!important}.u-size11of12{width:91.66666666666666%!important}@media screen and (min-width:1236px){.u-lg-sizeFit,.u-lg-sizeFitAlt{display:block!important;float:left!important;width:auto!important}.u-lg-sizeFitAlt{float:right!important}.u-lg-sizeFill{display:block!important;overflow:hidden!important;width:auto!important}.u-lg-sizeFillAlt{display:table-cell!important;max-width:100%!important;width:10000px!important}.u-lg-sizeFull{-moz-box-sizing:border-box!important;box-sizing:border-box!important;display:block!important;width:100%!important}.u-lg-size1of12{width:8.333333333333332%!important}.u-lg-size1of10{width:10%!important}.u-lg-size1of8{width:12.5%!important}.u-lg-size1of6,.u-lg-size2of12{width:16.666666666666664%!important}.u-lg-size1of5,.u-lg-size2of10{width:20%!important}.u-lg-size1of4,.u-lg-size2of8,.u-lg-size3of12{width:25%!important}.u-lg-size3of10{width:30%!important}.u-lg-size1of3,.u-lg-size2of6,.u-lg-size4of12{width:33.33333333333333%!important}.u-lg-size3of8{width:37.5%!important}.u-lg-size2of5,.u-lg-size4of10{width:40%!important}.u-lg-size5of12{width:41.66666666666667%!important}.u-lg-size1of2,.u-lg-size2of4,.u-lg-size3of6,.u-lg-size4of8,.u-lg-size5of10,.u-lg-size6of12{width:50%!important}.u-lg-size7of12{width:58.333333333333336%!important}.u-lg-size3of5,.u-lg-size6of10{width:60%!important}.u-lg-size5of8{width:62.5%!important}.u-lg-size2of3,.u-lg-size4of6,.u-lg-size8of12{width:66.66666666666666%!important}.u-lg-size7of10{width:70%!important}.u-lg-size3of4,.u-lg-size6of8,.u-lg-size9of12{width:75%!important}.u-lg-size4of5,.u-lg-size8of10{width:80%!important}.u-lg-size5of6,.u-lg-size10of12{width:83.33333333333334%!important}.u-lg-size7of8{width:87.5%!important}.u-lg-size9of10{width:90%!important}.u-lg-size11of12{width:91.66666666666666%!important}}.u-mb10{margin-bottom:10px!important}.u-mb50{margin-bottom:50px!important}.u-textBreak{word-wrap:break-word!important}.u-textCenter{text-align:center!important}.u-textLeft{text-align:left!important}.u-textRight{text-align:right!important}.u-textInheritColor{color:inherit!important}.u-textNoWrap{white-space:nowrap!important}.u-textTruncate{max-width:100%;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;word-wrap:normal!important}.u-textUppercase{text-transform:uppercase!important}@font-face{font-family:'rosettaicons';
Medium has 389
.u-flexCenter{display:-ms-flexbox!important;display:flex!important;-ms-flex-align:center!important;align-items:center!important}.u-flexBottom{display:-ms-flexbox!important;display:flex!important;-ms-flex-align:bottom!important;align-items:bottom!important}.u-flexEnd{display:-ms-flexbox!important;display:flex!important;-ms-flex-align:end!important;align-items:flex-end!important}.u-alignMiddle .u-alignBlock,.u-alignMiddle:before{display:inline-block!important;vertical-align:middle!important}.u-alignBottom:before,.u-alignMiddle:before{content:''!important;height:100%!important}.u-alignBottom .u-alignBlock,.u-alignBottom:before{display:inline-block!important;vertical-align:bottom!important}.u-floatLeft{float:left!important}.u-floatRight{float:right!important}.u-verticalAlignTop{vertical-align:top!important}.u-verticalAlignMiddle{vertical-align:middle!important}.u-verticalAlignBottom{vertical-align:bottom!important}.u-verticalAlignBaseline{vertical-align:baseline!important}@media (min-width:992px){.u-sm-floatNone{float:none!important}}.u-disablePointerEvents{pointer-events:none!important}.u-noUserSelect{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important;-webkit-tap-highlight-color:transparent!important}.u-preventScroll{overflow:hidden!important;height:100%!important}.u-overflowX{overflow-x:scroll!important;overflow-y:hidden!important;white-space:nowrap!important;-webkit-overflow-scrolling:touch!important;-ms-overflow-style:-ms-autohiding-scrollbar!important}.u-inlineBlock{display:inline-block!important}.u-block{display:block!important}.u-hide{display:none!important}.u-zeroSize{overflow:hidden;width:0!important;height:0!important}.u-flex{display:-ms-flexbox!important;display:flex!important}.u-flex0{-ms-flex:0 0 auto;flex:0 0 auto}.u-flex1{-ms-flex:1 1 auto;flex:1 1 auto}.u-table{display:table!important}.u-table:before{height:auto!important;display:inherit!important}.u-tableCell{display:table-cell!important}@media screen and (min-width:992px){.u-showOnTablet{display:none!important}}@media screen and (min-width:768px){.u-showOnMobile,.u-showOnTabletMini,.u-showOnTabletPortrait{display:none!important}}@media screen and (max-width:1199px) and (min-width:992px){.u-hideOnlyOnNetbook{display:none!important}}@media screen and (max-width:1199px){.u-md-hide{display:none!important}}@media screen and (max-width:991px){.u-sm-hide{display:none!important}}@media screen and (max-width:767px){.u-xs-hide{display:none!important}.u-blockOnMobile{display:block!important}}.u-clearfix:after,.u-clearfix:before{display:table;content:" "}.u-clearfix:after{clear:both}.u-foreground{position:relative!important;z-index:100!important}.u-background{z-index:70!important}.u-borderBox{box-sizing:border-box!important}.u-positionRelative{position:relative!important}.u-positionAbsolute{position:absolute!important}.u-positionAbsolute0{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important}@media screen and (max-width:767px){.u-xs-backgroundImageNone{background-image:none!important}}.u-xs-left12of12{margin-left:100%!important}.u-xs-left11of12{margin-left:91.66666667%!important}.u-xs-left10of12{margin-left:83.33333333%!important}.u-xs-left9of12{margin-left:75%!important}.u-xs-left8of12{margin-left:66.66666667%!important}.u-xs-left7of12{margin-left:58.33333333%!important}.u-xs-left6of12{margin-left:50%!important}.u-xs-left5of12{margin-left:41.66666667%!important}.u-xs-left4of12{margin-left:33.33333333%!important}.u-xs-left3of12{margin-left:25%!important}.u-xs-left2of12{margin-left:16.66666667%!important}.u-xs-left1of12{margin-left:8.33333333%!important}.u-xs-left0of12{margin-left:0!important}.u-xs-top10{padding-top:10px}.u-xs-top20{padding-top:20px}.u-xs-top30{padding-top:30px}.u-xs-top40{padding-top:40px}.u-xs-bottom10{padding-bottom:10px}.u-xs-bottom20{padding-bottom:20px}.u-xs-bottom30{padding-bottom:30px}.u-xs-bottom40{padding-bottom:40px}.u-xs-left10{padding-left:10px}.u-xs-left20{padding-left:20px}.u-xs-left30{padding-left:30px}.u-xs-left40{padding-left:40px}.u-xs-right10{padding-right:10px}.u-xs-right20{padding-right:20px}.u-xs-right30{padding-right:30px}.u-xs-right40{padding-right:40px}@media (min-width:768px){.u-sm-left12of12{margin-left:100%!important}.u-sm-left11of12{margin-left:91.66666667%!important}.u-sm-left10of12{margin-left:83.33333333%!important}.u-sm-left9of12{margin-left:75%!important}.u-sm-left8of12{margin-left:66.66666667%!important}.u-sm-left7of12{margin-left:58.33333333%!important}.u-sm-left6of12{margin-left:50%!important}.u-sm-left5of12{margin-left:41.66666667%!important}.u-sm-left4of12{margin-left:33.33333333%!important}.u-sm-left3of12{margin-left:25%!important}.u-sm-left2of12{margin-left:16.66666667%!important}.u-sm-left1of12{margin-left:8.33333333%!important}.u-sm-left0of12{margin-left:0!important}.u-sm-top10{padding-top:10px}.u-sm-top20{padding-top:20px}.u-sm-top30{padding-top:30px}.u-sm-top40{padding-top:40px}.u-sm-bottom10{padding-bottom:10px}.u-sm-bottom20{padding-bottom:20px}.u-sm-bottom30{padding-bottom:30px}.u-sm-bottom40{padding-bottom:40px}.u-sm-left10{padding-left:10px}.u-sm-left20{padding-left:20px}.u-sm-left30{padding-left:30px}.u-sm-left40{padding-left:40px}.u-sm-right10{padding-right:10px}.u-sm-right20{padding-right:20px}.u-sm-right30{padding-right:30px}.u-sm-right40{padding-right:40px}}@media (min-width:992px){.u-md-left12of12{margin-left:100%!important}.u-md-left11of12{margin-left:91.66666667%!important}.u-md-left10of12{margin-left:83.33333333%!important}.u-md-left9of12{margin-left:75%!important}.u-md-left8of12{margin-left:66.66666667%!important}.u-md-left7of12{margin-left:58.33333333%!important}.u-md-left6of12{margin-left:50%!important}.u-md-left5of12{margin-left:41.66666667%!important}.u-md-left4of12{margin-left:33.33333333%!important}.u-md-left3of12{margin-left:25%!important}.u-md-left2of12{margin-left:16.66666667%!important}.u-md-left1of12{margin-left:8.33333333%!important}.u-md-left0of12{margin-left:0!important}.u-md-top10{padding-top:10px}.u-md-top20{padding-top:20px}.u-md-top30{padding-top:30px}.u-md-top40{padding-top:40px}.u-md-bottom10{padding-bottom:10px}.u-md-bottom20{padding-bottom:20px}.u-md-bottom30{padding-bottom:30px}.u-md-bottom40{padding-bottom:40px}.u-md-left10{padding-left:10px}.u-md-left20{padding-left:20px}.u-md-left30{padding-left:30px}.u-md-left40{padding-left:40px}.u-md-right10{padding-right:10px}.u-md-right20{padding-right:20px}.u-md-right30{padding-right:30px}.u-md-right40{padding-right:40px}}@media (min-width:1200px){.u-lg-left12of12{margin-left:100%!important}.u-lg-left11of12{margin-left:91.66666667%!important}.u-lg-left10of12{margin-left:83.33333333%!important}.u-lg-left9of12{margin-left:75%!important}.u-lg-left8of12{margin-left:66.66666667%!important}.u-lg-left7of12{margin-left:58.33333333%!important}.u-lg-left6of12{margin-left:50%!important}.u-lg-left5of12{margin-left:41.66666667%!important}.u-lg-left4of12{margin-left:33.33333333%!important}.u-lg-left3of12{margin-left:25%!important}.u-lg-left2of12{margin-left:16.66666667%!important}.u-lg-left1of12{margin-left:8.33333333%!important}.u-lg-left0of12{margin-left:0!important}.u-lg-top10{padding-top:10px}.u-lg-top20{padding-top:20px}.u-lg-top30{padding-top:30px}.u-lg-top40{padding-top:40px}.u-lg-bottom10{padding-bottom:10px}.u-lg-bottom20{padding-bottom:20px}.u-lg-bottom30{padding-bottom:30px}.u-lg-bottom40{padding-bottom:40px}.u-lg-left10{padding-left:10px}.u-lg-left20{padding-left:20px}.u-lg-left30{padding-left:30px}.u-lg-left40{padding-left:40px}.u-lg-right10{padding-right:10px}.u-lg-right20{padding-right:20px}.u-lg-right30{padding-right:30px}.u-lg-right40{padding-right:40px}}.u-size320{max-width:320px!important}.u-size520{max-width:520px!important}.u-size640{max-width:640px!important}.u-size660{max-width:660px!important}.u-size740{max-width:740px!important}.u-size920{max-width:920px!important}.u-size1000{max-width:1000px!important}.u-size1040{max-width:1040px!important}.u-size1140{max-width:1140px!important}.u-height18{height:18px!important}.u-height24{height:24px!important}.u-width300{width:300px}.u-minWidth200{min-width:200px!important}.u-minHeight28{min-height:28px!important}.u-minHeight31{min-height:31px!important}.u-marginTopNegative2{margin-top:-2px!important}.u-marginTop10{margin-top:10px!important}.u-marginLeft10{margin-left:10px!important}.u-marginLeft15{margin-left:15px!important}.u-marginRight10{margin-right:10px!important}.u-marginRight15{margin-right:15px!important}.u-marginRight25{margin-right:25px!important}.u-paddingLeft10{padding-left:10px!important}.u-paddingRight10{padding-right:10px!important}.u-xs-size100x100{width:100px!important;height:100px!important}.u-xs-size80x80{width:80px!important;height:80px!important}.u-xs-size60x60{width:60px!important;height:60px!important}.u-xs-size48x48{width:48px!important;height:48px!important}.u-xs-size36x36{width:36px!important;height:36px!important}.u-xs-size32x32{width:32px!important;height:32px!important}@media (min-width:768px){.u-sm-size100x100{width:100px!important;height:100px!important}.u-sm-size80x80{width:80px!important;height:80px!important}.u-sm-size60x60{width:60px!important;height:60px!important}.u-sm-size48x48{width:48px!important;height:48px!important}.u-sm-size36x36{width:36px!important;height:36px!important}.u-sm-size32x32{width:32px!important;height:32px!important}}@media (min-width:992px){.u-md-size100x100{width:100px!important;height:100px!important}.u-md-size80x80{width:80px!important;height:80px!important}.u-md-size60x60{width:60px!important;height:60px!important}.u-md-size48x48{width:48px!important;height:48px!important}.u-md-size36x36{width:36px!important;height:36px!important}.u-md-size32x32{width:32px!important;height:32px!important}}@media (min-width:1200px){.u-lg-size100x100{width:100px!important;height:100px!important}.u-lg-size80x80{width:80px!important;height:80px!important}.u-lg-size60x60{width:60px!important;height:60px!important}.u-lg-size48x48{width:48px!important;height:48px!important}.u-lg-size36x36{width:36px!important;height:36px!important}.u-lg-size32x32{width:32px!important;height:32px!important}}.u-sizeAuto{width:auto!important;max-width:auto!important}.u-sizeFull,.u-sizeFullWidth{width:100%!important}.u-sizeFull,.u-sizeFullHeight{height:100%!important}.u-sizeHalfWidth{max-width:50%!important}@media screen and (max-width:767px){.u-xs-sizeFullWidth{max-width:100%!important}}.u-sizeViewHeight100{height:100vh!important;box-sizing:border-box}.u-sizeViewHeightMin100{min-height:100vh!important;box-sizing:border-box}.u-xs-size10of12,.u-xs-size11of12,.u-xs-size12of12,.u-xs-size1of12,.u-xs-size2of12,.u-xs-size3of12,.u-xs-size4of12,.u-xs-size5of12,.u-xs-size6of12,.u-xs-size7of12,.u-xs-size8of12,.u-xs-size9of12{float:left!important}.u-xs-size12of12{width:100%!important}.u-xs-size11of12{width:91.66666667%!important}.u-xs-size10of12{width:83.33333333%!important}.u-xs-size9of12{width:75%!important}.u-xs-size8of12{width:66.66666667%!important}.u-xs-size7of12{width:58.33333333%!important}.u-xs-size6of12{width:50%!important}.u-xs-size5of12{width:41.66666667%!important}.u-xs-size4of12{width:33.33333333%!important}.u-xs-size3of12{width:25%!important}.u-xs-size2of12{width:16.66666667%!important}.u-xs-size1of12{width:8.33333333%!important}@media all and (min-width:768px){.u-sm-size10of12,.u-sm-size11of12,.u-sm-size12of12,.u-sm-size1of12,.u-sm-size2of12,.u-sm-size3of12,.u-sm-size4of12,.u-sm-size5of12,.u-sm-size6of12,.u-sm-size7of12,.u-sm-size8of12,.u-sm-size9of12{float:left!important}.u-sm-size12of12{width:100%!important}.u-sm-size11of12{width:91.66666667%!important}.u-sm-size10of12{width:83.33333333%!important}.u-sm-size9of12{width:75%!important}.u-sm-size8of12{width:66.66666667%!important}.u-sm-size7of12{width:58.33333333%!important}.u-sm-size6of12{width:50%!important}.u-sm-size5of12{width:41.66666667%!important}.u-sm-size4of12{width:33.33333333%!important}.u-sm-size3of12{width:25%!important}.u-sm-size2of12{width:16.66666667%!important}.u-sm-size1of12{width:8.33333333%!important}}@media all and (min-width:992px){.u-md-size10of12,.u-md-size11of12,.u-md-size12of12,.u-md-size1of12,.u-md-size2of12,.u-md-size3of12,.u-md-size4of12,.u-md-size5of12,.u-md-size6of12,.u-md-size7of12,.u-md-size8of12,.u-md-size9of12{float:left!important}.u-md-size12of12{width:100%!important}.u-md-size11of12{width:91.66666667%!important}.u-md-size10of12{width:83.33333333%!important}.u-md-size9of12{width:75%!important}.u-md-size8of12{width:66.66666667%!important}.u-md-size7of12{width:58.33333333%!important}.u-md-size6of12{width:50%!important}.u-md-size5of12{width:41.66666667%!important}.u-md-size4of12{width:33.33333333%!important}.u-md-size3of12{width:25%!important}.u-md-size2of12{width:16.66666667%!important}.u-md-size1of12{width:8.33333333%!important}}@media all and (min-width:1200px){.u-lg-size10of12,.u-lg-size11of12,.u-lg-size12of12,.u-lg-size1of12,.u-lg-size2of12,.u-lg-size3of12,.u-lg-size4of12,.u-lg-size5of12,.u-lg-size6of12,.u-lg-size7of12,.u-lg-size8of12,.u-lg-size9of12{float:left!important}.u-lg-size12of12{width:100%!important}.u-lg-size11of12{width:91.66666667%!important}.u-lg-size10of12{width:83.33333333%!important}.u-lg-size9of12{width:75%!important}.u-lg-size8of12{width:66.66666667%!important}.u-lg-size7of12{width:58.33333333%!important}.u-lg-size6of12{width:50%!important}.u-lg-size5of12{width:41.66666667%!important}.u-lg-size4of12{width:33.33333333%!important}.u-lg-size3of12{width:25%!important}.u-lg-size2of12{width:16.66666667%!important}.u-lg-size1of12{width:8.33333333%!important}}.u-backgroundWhite{background:#fff!important}.u-backgroundGrayLightest{background:#fafafa!important}.u-backgroundGrayLight{background:#f0f0f0!important}.u-backgroundSizeCover{background-size:cover!important}.u-borderTopLighter{border-top:1px solid rgba(0,0,0,.15)!important}.u-borderBottomLighter{border-bottom:1px solid rgba(0,0,0,.15)!important}.u-borderTopLightest{border-top:1px solid rgba(0,0,0,.05)!important}.u-borderBottomLightest{border-bottom:1px solid rgba(0,0,0,.05)!important}.u-borderBottomRed{border-bottom:1px solid #cc5454!important}.u-transitionSeries:nth-child(2){transition-delay:30ms!important}.u-transitionSeries:nth-child(3){transition-delay:60ms!important}.u-transitionSeries:nth-child(4){transition-delay:90ms!important}.u-animationSeries:nth-child(2){animation-delay:.1s!important}.u-animationSeries:nth-child(3){animation-delay:.2s!important}.u-opaque{opacity:1!important}.u-invisible{visibility:hidden!important}.u-overflowHidden{overflow:hidden!important}.u-overflowVisible{overflow:visible!important}.u-fadeLeft:before{content:''!important;position:absolute!important;z-index:900;pointer-events:none;top:0!important;left:0!important;background-image:linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%)!important;width:65px!important;height:45px!important}.u-fadeRight:after{content:''!important;position:absolute!important;z-index:900;pointer-events:none;top:0!important;right:0!important;background-image:linear-gradient(to right,rgba(255,255,255,0) 0,#fff 100%)!important;width:65px!important;height:45px!important}.u-hideOutline{outline:0!important}.u-round{border-radius:999em}.u-borderRadius3{border-radius:3px!important}.u-cursorPointer{cursor:pointer!important}.u-textColorYellow{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;letter-spacing:0;font-weight:700;font-style:normal;color:#e7af0e!important}.u-textColorRed{color:#cc5454!important}.u-textColorLight{color:rgba(0,0,0,.3)!important}.u-textColorNormal{color:rgba(0,0,0,.44)!important}.u-textColorDark{color:rgba(0,0,0,.6)!important}.u-textColorDarker{color:rgba(0,0,0,.8)!important}.u-textColorDarkest{color:rgba(0,0,0,.9)!important}.u-experimental{font-size:14px;text-align:center;background:#fafafa;padding:20px 40px}.u-textScreenReader{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;color:rgba(255,255,255,0)!important;pointer-events:none!important}.u-textUnderline{text-decoration:underline!important}.u-textUppercase{text-transform:uppercase!important}.u-uiTextBold{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif!important;letter-spacing:0!important;font-weight:700!important;font-style:normal!important}.u-uiTextSemibold{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif!important;letter-spacing:0!important;font-weight:600!important;font-style:normal!important}.u-uiTextMedium{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif!important;letter-spacing:0!important;font-weight:500!important;font-style:normal!important}.u-uiTextRegular{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif!important;letter-spacing:0!important;font-weight:400!important;font-style:normal!important}.u-fontSizeMicro{font-size:11px!important}.u-fontSizeSmallest{font-size:12px!important}.u-fontSizeSmaller{font-size:14px!important}.u-fontSizeSmall{font-size:16px!important}.u-fontSizeBase{font-size:18px!important}.u-fontSizeLarge{font-size:24px!important}.u-fontWeightThin{font-weight:300!important}.u-lineHeightBase{line-height:1.4!important}.u-lineHeight18{line-height:18px!important}.u-lineHeight16{line-height:16px!important}.u-lineHeightTighter{line-height:1.1!important}.u-letterSpacing003{letter-spacing:.03em!important}.u-textAlignCenter{text-align:center!important}.u-textAlignRight{text-align:right!important}.u-textAlignLeft{text-align:left!important}.u-noWrap{white-space:nowrap!important}.u-normalWrap{white-space:normal!important}.u-noWrapWithEllipsis{white-space:nowrap!important;text-overflow:ellipsis!important;overflow:hidden!important}.u-lineClamp2{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}@media screen and (max-width:767px){.u-normalWrapOnMobile{white-space:normal!important}.u-lineClamp2OnMobile{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}@media (min-width:992px){.u-sm-textAlignCenter{text-align:center!important}.u-sm-textAlignRight{text-align:right!important}.u-sm-textAlignLeft{text-align:left!important}.u-sm-fontSizeLarge{font-size:24px!important}}.u-transition--fadeOut100{visibility:hidden;opacity:0;transition:visibility 0s linear .1s,opacity .1s 0s}