@framebridge/basscss/css/basscss-important.css

Low-level CSS toolkit

/*! Basscss | http://basscss.com | MIT License */

.h00{ font-size: 4rem!important }
.h0{ font-size: 3rem!important }
.h1{ font-size: 2rem!important }
.h2{ font-size: 1.5rem!important }
.h3{ font-size: 1.25rem!important }
.h4{ font-size: 1rem!important }
.h5{ font-size: .875rem!important }
.h6{ font-size: .75rem!important }

.font-family-inherit{ font-family:inherit!important }
.font-size-inherit{ font-size:inherit!important }
.text-decoration-none{ text-decoration:none!important }

.bold{ font-weight: bold!important; font-weight: bold!important }
.regular{ font-weight:normal!important }
.italic{ font-style:italic!important }
.caps{ text-transform:uppercase!important; letter-spacing: .2em!important; }

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

.nowrap{ white-space:nowrap!important }
.break-word{ word-wrap:break-word!important }

.line-height-1{ line-height: 1!important }
.line-height-2{ line-height: 1.125!important }
.line-height-3{ line-height: 1.25!important }
.line-height-4{ line-height: 1.5!important }

.list-style-none{ list-style:none!important }
.underline{ text-decoration:underline!important }

.truncate{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.list-reset{
  list-style:none!important;
  padding-left:0!important;
}

.inline{ display:inline!important }
.block{ display:block!important }
.inline-block{ display:inline-block!important }
.table{ display:table!important }
.table-cell{ display:table-cell!important }

.overflow-hidden{ overflow:hidden!important }
.overflow-scroll{ overflow:scroll!important }
.overflow-auto{ overflow:auto!important }

.clearfix:before,
.clearfix:after{
  content:" "!important;
  display:table!important
}
.clearfix:after{ clear:both!important }

.left{ float:left!important }
.right{ float:right!important }

.fit{ max-width:100%!important }

.max-width-1{ max-width: 24rem!important }
.max-width-2{ max-width: 32rem!important }
.max-width-3{ max-width: 48rem!important }
.max-width-4{ max-width: 64rem!important }

.border-box{ box-sizing:border-box!important }

.align-baseline{ vertical-align:baseline!important }
.align-top{ vertical-align:top!important }
.align-middle{ vertical-align:middle!important }
.align-bottom{ vertical-align:bottom!important }

.m0{ margin:0!important }
.mt0{ margin-top:0!important }
.mr0{ margin-right:0!important }
.mb0{ margin-bottom:0!important }
.ml0{ margin-left:0!important }
.mx0{ margin-left:0!important; margin-right:0!important }
.my0{ margin-top:0!important; margin-bottom:0!important }

.m1{ margin: .5rem!important }
.mt1{ margin-top: .5rem!important }
.mr1{ margin-right: .5rem!important }
.mb1{ margin-bottom: .5rem!important }
.ml1{ margin-left: .5rem!important }
.mx1{ margin-left: .5rem!important; margin-right: .5rem!important }
.my1{ margin-top: .5rem!important; margin-bottom: .5rem!important }

.m2{ margin: 1rem!important }
.mt2{ margin-top: 1rem!important }
.mr2{ margin-right: 1rem!important }
.mb2{ margin-bottom: 1rem!important }
.ml2{ margin-left: 1rem!important }
.mx2{ margin-left: 1rem!important; margin-right: 1rem!important }
.my2{ margin-top: 1rem!important; margin-bottom: 1rem!important }

.m3{ margin: 2rem!important }
.mt3{ margin-top: 2rem!important }
.mr3{ margin-right: 2rem!important }
.mb3{ margin-bottom: 2rem!important }
.ml3{ margin-left: 2rem!important }
.mx3{ margin-left: 2rem!important; margin-right: 2rem!important }
.my3{ margin-top: 2rem!important; margin-bottom: 2rem!important }

.m4{ margin: 4rem!important }
.mt4{ margin-top: 4rem!important }
.mr4{ margin-right: 4rem!important }
.mb4{ margin-bottom: 4rem!important }
.ml4{ margin-left: 4rem!important }
.mx4{ margin-left: 4rem!important; margin-right: 4rem!important }
.my4{ margin-top: 4rem!important; margin-bottom: 4rem!important }

.mxn1{ margin-left: -0.5rem!important; margin-right: -0.5rem!important; }
.mxn2{ margin-left: -1rem!important; margin-right: -1rem!important; }
.mxn3{ margin-left: -2rem!important; margin-right: -2rem!important; }
.mxn4{ margin-left: -4rem!important; margin-right: -4rem!important; }

.m-auto{ margin:auto!important; }
.mt-auto{ margin-top:auto!important }
.mr-auto{ margin-right:auto!important }
.mb-auto{ margin-bottom:auto!important }
.ml-auto{ margin-left:auto!important }
.mx-auto{ margin-left:auto!important; margin-right:auto!important; }
.my-auto{ margin-top:auto!important; margin-bottom:auto!important; }

.p0{ padding:0!important }
.pt0{ padding-top:0!important }
.pr0{ padding-right:0!important }
.pb0{ padding-bottom:0!important }
.pl0{ padding-left:0!important }
.px0{ padding-left:0!important; padding-right:0!important }
.py0{ padding-top:0!important;  padding-bottom:0!important }

.p1{ padding: .5rem!important }
.pt1{ padding-top: .5rem!important }
.pr1{ padding-right: .5rem!important }
.pb1{ padding-bottom: .5rem!important }
.pl1{ padding-left: .5rem!important }
.py1{ padding-top: .5rem!important; padding-bottom: .5rem!important }
.px1{ padding-left: .5rem!important; padding-right: .5rem!important }

.p2{ padding: 1rem!important }
.pt2{ padding-top: 1rem!important }
.pr2{ padding-right: 1rem!important }
.pb2{ padding-bottom: 1rem!important }
.pl2{ padding-left: 1rem!important }
.py2{ padding-top: 1rem!important; padding-bottom: 1rem!important }
.px2{ padding-left: 1rem!important; padding-right: 1rem!important }

.p3{ padding: 2rem!important }
.pt3{ padding-top: 2rem!important }
.pr3{ padding-right: 2rem!important }
.pb3{ padding-bottom: 2rem!important }
.pl3{ padding-left: 2rem!important }
.py3{ padding-top: 2rem!important; padding-bottom: 2rem!important }
.px3{ padding-left: 2rem!important; padding-right: 2rem!important }

.p4{ padding: 4rem!important }
.pt4{ padding-top: 4rem!important }
.pr4{ padding-right: 4rem!important }
.pb4{ padding-bottom: 4rem!important }
.pl4{ padding-left: 4rem!important }
.py4{ padding-top: 4rem!important; padding-bottom: 4rem!important }
.px4{ padding-left: 4rem!important; padding-right: 4rem!important }

.col{
  float:left!important;
  box-sizing:border-box!important;
}

.col-right{
  float:right!important;
  box-sizing:border-box!important;
}

.col-1{
  width:8.33333%!important;
}

.col-2{
  width:16.66667%!important;
}

.col-3{
  width:25%!important;
}

.col-4{
  width:33.33333%!important;
}

.col-5{
  width:41.66667%!important;
}

.col-6{
  width:50%!important;
}

.col-7{
  width:58.33333%!important;
}

.col-8{
  width:66.66667%!important;
}

.col-9{
  width:75%!important;
}

.col-10{
  width:83.33333%!important;
}

.col-11{
  width:91.66667%!important;
}

.col-12{
  width:100%!important;
}
@media (min-width: 40em){

  .sm-col{
    float:left!important;
    box-sizing:border-box!important;
  }

  .sm-col-right{
    float:right!important;
    box-sizing:border-box!important;
  }

  .sm-col-1{
    width:8.33333%!important;
  }

  .sm-col-2{
    width:16.66667%!important;
  }

  .sm-col-3{
    width:25%!important;
  }

  .sm-col-4{
    width:33.33333%!important;
  }

  .sm-col-5{
    width:41.66667%!important;
  }

  .sm-col-6{
    width:50%!important;
  }

  .sm-col-7{
    width:58.33333%!important;
  }

  .sm-col-8{
    width:66.66667%!important;
  }

  .sm-col-9{
    width:75%!important;
  }

  .sm-col-10{
    width:83.33333%!important;
  }

  .sm-col-11{
    width:91.66667%!important;
  }

  .sm-col-12{
    width:100%!important;
  }

}
@media (min-width: 52em){

  .md-col{
    float:left!important;
    box-sizing:border-box!important;
  }

  .md-col-right{
    float:right!important;
    box-sizing:border-box!important;
  }

  .md-col-1{
    width:8.33333%!important;
  }

  .md-col-2{
    width:16.66667%!important;
  }

  .md-col-3{
    width:25%!important;
  }

  .md-col-4{
    width:33.33333%!important;
  }

  .md-col-5{
    width:41.66667%!important;
  }

  .md-col-6{
    width:50%!important;
  }

  .md-col-7{
    width:58.33333%!important;
  }

  .md-col-8{
    width:66.66667%!important;
  }

  .md-col-9{
    width:75%!important;
  }

  .md-col-10{
    width:83.33333%!important;
  }

  .md-col-11{
    width:91.66667%!important;
  }

  .md-col-12{
    width:100%!important;
  }

}
@media (min-width: 64em){

  .lg-col{
    float:left!important;
    box-sizing:border-box!important;
  }

  .lg-col-right{
    float:right!important;
    box-sizing:border-box!important;
  }

  .lg-col-1{
    width:8.33333%!important;
  }

  .lg-col-2{
    width:16.66667%!important;
  }

  .lg-col-3{
    width:25%!important;
  }

  .lg-col-4{
    width:33.33333%!important;
  }

  .lg-col-5{
    width:41.66667%!important;
  }

  .lg-col-6{
    width:50%!important;
  }

  .lg-col-7{
    width:58.33333%!important;
  }

  .lg-col-8{
    width:66.66667%!important;
  }

  .lg-col-9{
    width:75%!important;
  }

  .lg-col-10{
    width:83.33333%!important;
  }

  .lg-col-11{
    width:91.66667%!important;
  }

  .lg-col-12{
    width:100%!important;
  }

}
.flex{ display:-ms-flexbox!important; display:flex!important }

@media (min-width: 40em){
  .sm-flex{ display:-ms-flexbox!important; display:flex!important }
}

@media (min-width: 52em){
  .md-flex{ display:-ms-flexbox!important; display:flex!important }
}

@media (min-width: 64em){
  .lg-flex{ display:-ms-flexbox!important; display:flex!important }
}

.flex-column{ -ms-flex-direction:column!important; flex-direction:column!important }
.flex-wrap{ -ms-flex-wrap:wrap!important; flex-wrap:wrap!important }

.items-start{ -ms-flex-align:start!important; align-items:flex-start!important }
.items-end{ -ms-flex-align:end!important; align-items:flex-end!important }
.items-center{ -ms-flex-align:center!important; align-items:center!important }
.items-baseline{ -ms-flex-align:baseline!important; align-items:baseline!important }
.items-stretch{ -ms-flex-align:stretch!important; align-items:stretch!important }

.self-start{ -ms-flex-item-align:start!important; align-self:flex-start!important }
.self-end{ -ms-flex-item-align:end!important; align-self:flex-end!important }
.self-center{ -ms-flex-item-align:center!important; -ms-grid-row-align:center!important; align-self:center!important }
.self-baseline{ -ms-flex-item-align:baseline!important; align-self:baseline!important }
.self-stretch{ -ms-flex-item-align:stretch!important; -ms-grid-row-align:stretch!important; align-self:stretch!important }

.justify-start{ -ms-flex-pack:start!important; justify-content:flex-start!important }
.justify-end{ -ms-flex-pack:end!important; justify-content:flex-end!important }
.justify-center{ -ms-flex-pack:center!important; justify-content:center!important }
.justify-between{ -ms-flex-pack:justify!important; justify-content:space-between!important }
.justify-around{ -ms-flex-pack:distribute!important; justify-content:space-around!important }
.justify-evenly{ -ms-flex-pack:space-evenly!important; justify-content:space-evenly!important }

.content-start{ -ms-flex-line-pack:start!important; align-content:flex-start!important }
.content-end{ -ms-flex-line-pack:end!important; align-content:flex-end!important }
.content-center{ -ms-flex-line-pack:center!important; align-content:center!important }
.content-between{ -ms-flex-line-pack:justify!important; align-content:space-between!important }
.content-around{ -ms-flex-line-pack:distribute!important; align-content:space-around!important }
.content-stretch{ -ms-flex-line-pack:stretch!important; align-content:stretch!important }
.flex-auto{
  -ms-flex:1 1 auto!important;
      flex:1 1 auto!important;
  min-width:0!important;
  min-height:0!important;
}
.flex-none{ -ms-flex:none!important; flex:none!important }

.order-0{ -ms-flex-order:0!important; order:0!important }
.order-1{ -ms-flex-order:1!important; order:1!important }
.order-2{ -ms-flex-order:2!important; order:2!important }
.order-3{ -ms-flex-order:3!important; order:3!important }
.order-last{ -ms-flex-order:99999!important; order:99999!important }

.relative{ position:relative!important }
.absolute{ position:absolute!important }
.fixed{ position:fixed!important }

.top-0{ top:0!important }
.right-0{ right:0!important }
.bottom-0{ bottom:0!important }
.left-0{ left:0!important }

.z1{ z-index: 1!important }
.z2{ z-index: 2!important }
.z3{ z-index: 3!important }
.z4{ z-index: 4!important }

.border{
  border-style:solid!important;
  border-width: 1px!important;
}

.border-top{
  border-top-style:solid!important;
  border-top-width: 1px!important;
}

.border-right{
  border-right-style:solid!important;
  border-right-width: 1px!important;
}

.border-bottom{
  border-bottom-style:solid!important;
  border-bottom-width: 1px!important;
}

.border-left{
  border-left-style:solid!important;
  border-left-width: 1px!important;
}

.border-none{ border:0!important }

.rounded{ border-radius: 3px!important }
.circle{ border-radius:50%!important }

.rounded-top{ border-radius: 3px 3px 0 0!important }
.rounded-right{ border-radius: 0 3px 3px 0!important }
.rounded-bottom{ border-radius: 0 0 3px 3px!important }
.rounded-left{ border-radius: 3px 0 0 3px!important }

.not-rounded{ border-radius:0!important }

.hide{
  position:absolute !important;
  height:1px!important;
  width:1px!important;
  overflow:hidden!important;
  clip:rect(1px, 1px, 1px, 1px)!important;
}

@media (max-width: 40em){
  .xs-hide{ display:none !important }
}

@media (min-width: 40em) and (max-width: 51.9375em){
  .sm-hide{ display:none !important }
}

@media (min-width: 52em) and (max-width: 63.9375em){
  .md-hide{ display:none !important }
}

@media (min-width: 64em){
  .lg-hide{ display:none !important }
}

.display-none{ display:none !important }