/* HELPER / CONVENIENCE CLASSES
   ------------------------------------------------------------------ */
/* text align */
   .al { text-align: left !important; }
   .ar { text-align: right !important; }
   .ac { text-align: center !important; }
   .aj { text-align: justify !important; }

/* vertical align */
   .vt { vertical-align: top !important; }
   .vm { vertical-align: middle !important; }
   .vb { vertical-align: bottom !important; }
   .vbl { vertical-align: baseline !important; }

/* clear */
   .cn { clear: none !important; }
   .cb { clear: both !important; }
   .cl { clear: left !important; }
   .cr { clear: right !important; }

/* float */
   .fn { float: none !important; }
   .fl { float: left !important; }
   .fr { float: right !important; }

/* display */
   .l-dn { display: none !important; }
   .l-db { display: block !important; }
   .l-di { display: inline !important; }
   .l-dib { display: inline-block !important; }

/* visibility */
   .is-visible { visibility: visible !important; }
   .is-invisible { visibility: hidden !important; } /* to hide from screen readers too use .l-dn (display: none;) */

   .is-visually-hidden {
      border: 0;
      padding: 0;
      clip: rect(0 0 0 0);
      width: 1px;
      height: 1px;
      margin: -1px;
      overflow: hidden;
      position: absolute;
      }

/* font sizing */
   .txt-xs { font-size: 10px !important; }
   .txt-s { font-size: 12px !important; }
   .txt-m { font-size: 14px !important; }
   .txt-l { font-size: 16px !important; }
   .txt-xl { font-size: 24px !important; }
   .txt-xxl { font-size: 32px !important; }

/* font color */
   .txt-muted { color: #ccc; }

/* wrapping and overflowing text */
   .nowrap { white-space: nowrap; }

   .ellipsis {
      overflow: hidden;
      white-space: nowrap;
      -o-text-overflow: ellipsis;
      -ms-text-overflow: ellipsis;
      text-overflow: ellipsis; /* or "clip" */
      }

/* background colors */
   .bg-black  { background-color: #000; }
   .bg-dark   { background-color: #999; }
   .bg-medium { background-color: #ccc; }
   .bg-light  { background-color: #eee; }
   .bg-white  { background-color: #fff; }

   * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      }

/* clear floats within a non-floated container for browsers that handle :after (not < IE7) 
   Micro clearfix hack - http://nicolasgallagher.com/micro-clearfix-hack/ */
   .cf:before,
   .cf:after,
   .header:before,
   .header:after,
   .content:before,
   .content:after,
   .footer:before,
   .footer:after,
   .in .fm-v:before,
   .in .fm-v:after,
   .row:before,
   .row:after,
   .col:before,
   .col:after {
      content: " "; /* space is needed for Opera */
      display: table;
      }

   .cf:after,
   .header:after,
   .content:after,
   .footer:after,
   .in .fm-v:after,
   .row:after,
   .col:after { clear: both; } /* cf = clear fix */

   .cf,
   .header,
   .content,
   .footer,
   .in .fm-v,
   .row,
   .col { zoom: 1; } /* For IE 6/7 (trigger hasLayout) */

/* image replacement | http://nicolasgallagher.com/another-css-image-replacement-technique/ */
   .ir {
      border: 0;
      font: 0/0 a;
      text-shadow: none;
      color: transparent;
      background-color: transparent;
      }


/* container helpers - for images and boxes */
   .rounded { box-radius: 3px; border-radius: .25rem; }

   .circular { border-radius: 100%; }

   .framed {
      box-shadow: 0 2px 2px #e9e9e9;
      border: 1px solid #ccc;
     Xpadding: 0.25em; /* use helper spacing classes instead */
     Xdisplay:inline-block; /* TODO: is this needed? */
      }

   .framed--double { border: 3px double #ccc; }