/**
 * Settings
 */
/**
 * Colors
 */
/**
 * Base
 */
/**
 * Typography
 */
/**
 * Buttons
 */
/**
 * Forms
 */
/*doc
# Base CSS

Our base CSS includes normalization, helper classes, and abstractions that should
form the underlying structure of all web projects. It's been built with [OOCSS](http://oocss.org/)
principles in mind and uses the [BEM](http://bem.info/method/) naming convention.
Some work is pulled directly form [Inuit.css]( https://github.com/csswizardry/inuit.css)
or has been highly influenced by it and similar frameworks, like [Suit](http://suitcss.github.io/).
The following outlines all of the pieces included as part of this base.
*/
/**
 * Base
 */
/**
 * Helpers
 */
/*------------------------------------*\
    $DEFAULTS
\*------------------------------------*/
/**
 * inuit.css’ default variables. Redefine these in your `_vars.scss` file (found
 * in the inuit.css-web-template) to override them.
 */
/*------------------------------------*\
    $DEBUG
\*------------------------------------*/
/**
 * Debug mode will visually highlight any potential markup/accessibility quirks
 * in the browser. Set to `true` or `false`.
 */
/*------------------------------------*\
    $BORDER-BOX
\*------------------------------------*/
/**
 * Do you want all elements to adopt `box-sizing:border-box;` as per
 * paulirish.com/2012/box-sizing-border-box-ftw ?
 */
/*------------------------------------*\
    $BASE
\*------------------------------------*/
/**
 * Base stuff
 */
/**
 * Base font-family.
 */
/**
 * Default colour for objects’ borders etc.
 */
/*------------------------------------*\
    $RESPONSIVE
\*------------------------------------*/
/**
 * Responsiveness?
 */
/**
 * Responsiveness for widescreen/high resolution desktop monitors and beyond?
 * Note: `$responsive` variable above must be set to true before enabling this.
 */
/**
 * Responsive push and pull produce a LOT of code, only turn them on if you
 * definitely need them.
 */
/**
 * Note: `$push` variable above must be set to true before enabling these.
 */
/**
 * Note: `$pull` variable above must be set to true before enabling these.
 */
/**
 * Tell inuit.css when breakpoints start.
 */
/*------------------------------------*\
    $FONT-SIZES
\*------------------------------------*/
/**
 * Font-sizes (in pixels). Refer to relevant sections for their implementations.
 */
/*------------------------------------*\
    $QUOTES
\*------------------------------------*/
/**
 * English quote marks?
 */
/**
 * If you want English quotes then please do not edit these; they’re only here
 * because Sass needs them.
 */
/**
 * If you need non-English quotes, please alter the following values accordingly:
 */
/*------------------------------------*\
    $BRAND
\*------------------------------------*/
/**
 * Brand stuff
 */
/**
 * How big would you like round corners to be by default?
 */
/*------------------------------------*\
    $OBJECTS AND ABSTRACTIONS
\*------------------------------------*/
/**
 * Which objects and abstractions would you like to use?
 */
/*------------------------------------*\
    $FRAMEWORK
\*------------------------------------*/
/**
 * inuit.css will work these next ones out for use within the framework.
 *
 * Assign our `$base-line-height` to a new spacing var for more transparency.
 */
/*!
 * inuitcss, by @csswizardry
 *
 * github.com/inuitcss | inuitcss.com
 */
/*doc
## SASS Mixins and Functions
----------------------------

Defined below are a set of mixins and functions that you can use within your
SASS code to ease development:
*/
/*------------------------------------*\
    $ARROWS
\*------------------------------------*/
/**
 * It is a common design treatment to give an element a triangular points-out
 * arrow, we typically build these with CSS. These following classes allow us to
 * generate these arbitrarily with a mixin, `@arrow()`.
 */
/**
 * Forms the basis for any/all CSS arrows.
 */
/**
 * Define individual edges so we can combine what we need, when we need.
 */
/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/**
 * Create a fully formed type style (sizing and vertical rhythm) by passing in a
 * single value, e.g.:
 *
   `@include font-size(10px);`
 *
 * Thanks to @redclov3r for the `line-height` Sass:
 * twitter.com/redclov3r/status/250301539321798657
 */
/**
 * Style any number of headings in one fell swoop, e.g.:
 *
   .foo{
       @include headings(1, 3){
           color:#BADA55;
       }
    }
 *
 * With thanks to @lar_zzz, @paranoida, @rowanmanning and ultimately
 * @thierrylemoulec for refining and improving my initial mixin.
 */
/**
 * Create vendor-prefixed CSS in one go, e.g.
 *
   `@include vendor(border-radius, 4px);`
 *
 */
/**
 * Create CSS keyframe animations for all vendors in one go, e.g.:
 *
   .foo{
       @include vendor(animation, shrink 3s);
   }

   @include keyframe(shrink){
       from{
           font-size:5em;
       }
   }
 *
 * Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
 */
/**
 * Force overly long spans of text to truncate, e.g.:
 *
   `@include truncate(100%);`
 *
 * Where `$truncation-boundary` is a united measurement.
 */
/**
 * CSS arrows!!! But... before you read on, you might want to grab a coffee...
 *
 * This mixin creates a CSS arrow on a given element. We can have the arrow
 * appear in one of 12 locations, thus:
 *
 *       01    02    03
 *    +------------------+
 * 12 |                  | 04
 *    |                  |
 * 11 |                  | 05
 *    |                  |
 * 10 |                  | 06
 *    +------------------+
 *       09    08    07
 *
 * You pass this position in along with a desired arrow color and optional
 * border color, for example:
 *
 * `@include arrow(top, left, red)`
 *
 * for just a single, red arrow, or:
 *
 * `@include arrow(bottom, center, red, black)`
 *
 * which will create a red triangle with a black border which sits at the bottom
 * center of the element. Call the mixin thus:
 *
   .foo{
       background-color:#BADA55;
       border:1px solid #ACE;
       @include arrow(top, left, #BADA55, #ACE);
   }
 *
 */
/**
 * Media query mixin.
 *
 * It’s not great practice to define solid breakpoints up-front, preferring to
 * modify your design when it needs it, rather than assuming you’ll want a
 * change at ‘mobile’. However, as inuit.css is required to take a hands off
 * approach to design decisions, this is the closest we can get to baked-in
 * responsiveness. It’s flexible enough to allow you to set your own breakpoints
 * but solid enough to be frameworkified.
 *
 * We define some broad breakpoints in our vars file that are picked up here
 * for use in a simple media query mixin. Our options are:
 *
 * palm
 * lap
 * lap-and-up
 * portable
 * desk
 * desk-wide
 *
 * Not using a media query will, naturally, serve styles to all devices.
 *
 * `@include media-query(palm){ [styles here] }`
 *
 * We work out your end points for you:
 */
/*doc
#### `@include font-size($font-size, $line-height: true)`

Creates a fully formed type style (sizing and vertical rhythm). `$font-size` is
the size of the font you'd like to set. When `$line-height` is `true`, a line
height will be set based on the `$font-size` and the `$base-line-height` of
the project. When `$line-height` is set to a value, like `24px`, a unitless
line height will be created. When set to `false`, no line height is included.
*/
/*doc
#### `@include vendor($property, $value)`

A mixin to create vendor-prefixed CSS. [More information](https://github.com/csswizardry/inuit.css/blob/v5.0.1/generic/_mixins.scss#L49-L61)

#### `@include keyframe($animation-name)`

Create CSS keyframe animations for all vendors by passing the animation content
to this mixin with the specified animation name. [More information](https://github.com/csswizardry/inuit.css/blob/v5.0.1/generic/_mixins.scss#L64-L99)

#### `@include arrow($edge, $location, $color, $border-color: $color)`

Create a CSS arrow on a given element. [More information](https://github.com/csswizardry/inuit.css/blob/v5.0.1/generic/_mixins.scss#L117-L258)

```scss
@include arrow(top, left, #000);
```

#### `@include quarter($number)`

Quarters the `$number` and rounds to the nearest integer.

#### `@include halve($number)`

Halves the `$number` and rounds to the nearest integer.

#### `@include double($number)`

Doubles the `$number` and rounds to the nearest integer.

#### `@include quadruple($number)`

Quadruple's the `$number` and rounds to the nearest integer.
*/
/*doc
#### `@include media-query($type)`

A helper to only show the passed-in content for the specified media query type
(specified by the [`$media-breakpoints`](#media-breakpoints) variable mapping).

```scss
h1 {
  @include font-size(30px);

  @include media-query(palm) {
    @include font-size(20px);
  }
}
```
*/
/*doc
## Generic Styles
-----------------

We use Nicolas Gallagher's [Normalize.css](https://github.com/necolas/normalize.css/)
in addition to Inuit.css' [generic reset](https://github.com/inuitcss/generic.reset)
to form the base of our styling.

We set `box-sizing: border-box` for all elements on the page in order to [reduce
confusion](http://www.paulirish.com/2012/box-sizing-border-box-ftw/) when dealing
with element width and padding.

We achieve a consistent [vertical rhythm](http://csswizardry.com/2012/06/single-direction-margin-declarations)
and generic element styling using Inuit.css' [shared module](https://github.com/inuitcss/generic.shared).
*/
/* ==========================================================================
   Normalize.scss settings
   ========================================================================== */
/**
 * Includes legacy browser support IE6/7
 *
 * Set to false if you want to drop support for IE6 and IE7
 */
/* Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *  user zoom.
 * 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *  `em` units.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active, a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Addresses styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * 1. Remove border when inside `a` element in IE 8/9/10.
 * 2. Improves image quality when scaled in IE 7.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *  Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 * 4. Improves appearance and consistency in all browsers.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *  and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *  `input` and others.
 * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
 *  Known issue: inner spacing remains in IE 6.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 *  Known issue: excess padding remains in IE 6.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *  (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 * 3. Corrects text not wrapping in Firefox 3.
 * 4. Corrects alignment displayed oddly in IE 6/7.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

/*------------------------------------*\
    #RESET
\*------------------------------------*/
/**
 * As well as using normalize.css, it is often advantageous to remove all
 * margins from certain elements.
 */
body,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul,
form, fieldset, legend,
table, th, td, caption,
hr {
  margin: 0;
  padding: 0; }

/**
 * Give a help cursor to elements that give extra info on `:hover`.
 */
abbr[title],
dfn[title] {
  cursor: help; }

/**
 * Remove underlines from potentially troublesome elements.
 */
u,
ins {
  text-decoration: none; }

/**
 * Apply faux underlines to inserted text via `border-bottom`.
 */
ins {
  border-bottom: 1px solid; }

/*------------------------------------*\
    #BOX-SIZING
\*------------------------------------*/
/**
 * Set the global `box-sizing` state to `border-box`.
 */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*doc
### Page

The default font size and line height are set using the `$base-font-size`
and `$base-line-height` variables, respectively.

The background color and font color are similarly specified with the
`$base-background-color` and `$base-text-color` variables.
*/
/*------------------------------------*\
    #PAGE
\*------------------------------------*/
/**
 * High-, page-level styling.
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 */
html {
  font-size: 0.875em;
  /* [1] */
  line-height: 1.71429;
  /* [1] */
  background-color: white;
  color: #333333;
  overflow-y: scroll;
  /* [2] */
  /*min-height: 100%;*/
  /* [3] */ }

/*------------------------------------*\
    #SHARED
\*------------------------------------*/
/**
 * Where `margin-bottom` is concerned,this value will be the same as the
 * base line-height. This allows us to keep a consistent vertical rhythm.
 * As per: csswizardry.com/2012/06/single-direction-margin-declarations
 */
h1, h2, h3, h4, h5, h6, hgroup,
ul, ol, dl,
blockquote, p, address,
table,
fieldset, figure,
pre {
  margin-bottom: 24px;
  margin-bottom: 1.71429rem; }

/**
 * Where `margin-left` is concerned we want to try and indent certain elements
 * by a consistent amount. Define that amount once,here.
 */
ul, ol, dd {
  margin-left: 48px;
  margin-left: 3.42857rem; }

/*doc
### Headings and smallprint

Headings 1-6, specified by the variables `$h1-font-size` to `$h6-font-size`,
are set up along with corresponding abstract Greek-alphabet classes for use
throughout the page: `.alpha`, `.beta`, `.gamma`, `.delta`, `.epsilon`, `.zeta`.
In addition, a series of classes for small and massive type are included --
`.giga`, `.mega` and `.kilo` for large text and `.milli` and `.micro` for small text.

```html
<p class="giga">.giga</p>
<p class="mega">.mega</p>
<p class="kilo">.kilo</p>
<p class="alpha">.alpha</p>
<p class="beta">.beta</p>
<p class="gamma">.gamma</p>
<p class="delta">.delta</p>
<p class="epsilon">.epsilon</p>
<p class="zeta">.zeta</p>
<p class="milli">.milli</p>
<p class="micro">.micro</p>
```
*/
.giga {
  font-size: 96px;
  font-size: 6.85714rem;
  line-height: 1; }

.mega {
  font-size: 72px;
  font-size: 5.14286rem;
  line-height: 1; }

.kilo {
  font-size: 48px;
  font-size: 3.42857rem;
  line-height: 1; }

h1, .alpha {
  font-size: 50px;
  font-size: 3.57143rem;
  line-height: 1.16; }

h2, .beta {
  font-size: 28px;
  font-size: 2rem;
  line-height: 1.25; }

h3, .gamma {
  font-size: 20px;
  font-size: 1.42857rem;
  line-height: 1.5; }

h4, .delta {
  font-size: 16px;
  font-size: 1.14286rem;
  line-height: 1.5; }

h5, .epsilon {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1.42857; }

h6, .zeta {
  font-size: 13px;
  font-size: 0.92857rem;
  line-height: 1.38462; }

small, .milli {
  font-size: 12px;
  font-size: 0.85714rem;
  line-height: 2; }

.micro {
  font-size: 10px;
  font-size: 0.71429rem;
  line-height: 2.4; }

/*------------------------------------*\
    #LISTS
\*------------------------------------*/
/**
 * Remove extra vertical spacing when nesting lists.
 */
li > ul,
li > ol {
  margin-bottom: 0; }

/*doc
### Images

By default, images have a fluid width (`max-width: 100%`) unless a `width` or `height`
is explicitly defined as an attribute on the tag.
*/
/*------------------------------------*\
    #IMAGES
\*------------------------------------*/
/**
 * 1. Fluid images for responsive purposes.
 * 2. Offset `alt` text from surrounding copy.
 */
img {
  max-width: 100%;
  /* [1] */
  font-style: italic;
  /* [2] */ }

/**
 * If a `width` and/or `height` attribute have been explicitly defined, let’s
 * not make the image fluid.
 */
img[width],
img[height] {
  max-width: none; }

/*doc
### Media Breakpoints

The following breakpoints are specified by default. They are set with the
`$media-breakpoints` variable.

Media Type    | Minimum Width | Maximum Width
------------- | ------------- | -------------
`palm`        |               | 575px
`lap`         | 576px         | 768px
`portable`    |               | 768px
`desk`        | 769px         | 1280px
`desk-and-up` | 769px         |
`desk-wide`   | 1281px        |
*/
/*doc
## Helper Classes
-----------------
*/
/*doc
### Widths

A series of width helper classes that you can use to size things like the layout
system. Each width can be specific to a media query breakpoint by prefixing
the width class with the media type. For example, a `.one-half` class specified
for a `palm` device type would be `.palm-one-half`.

```html
<div class="one-twelfth push-tiny--bottom doc-box">.one-twelfth</div>
<div class="one-sixth push-tiny--bottom doc-box">.one-sixth</div>
<div class="one-quarter push-tiny--bottom doc-box">.one-quarter</div>
<div class="one-third push-tiny--bottom doc-box">.one-third</div>
<div class="five-twelfths push-tiny--bottom doc-box">.five-twelfths</div>
<div class="one-half push-tiny--bottom doc-box">.one-half</div>
<div class="seven-twelfths push-tiny--bottom doc-box">.seven-twelfths</div>
<div class="two-thirds push-tiny--bottom doc-box">.two-thirds</div>
<div class="three-quarters push-tiny--bottom doc-box">.three-quarters</div>
<div class="five-sixths push-tiny--bottom doc-box">.five-sixths</div>
<div class="eleven-twelfths push-tiny--bottom doc-box">.eleven-twelfths</div>
<div class="one-whole push-tiny--bottom doc-box">.one-whole</div>
```
*/
/**
* Whole
*/
.one-whole {
  width: 100% !important; }

/**
* Halves
*/
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths {
  width: 50% !important; }

/**
* Thirds
*/
.one-third, .two-sixths, .four-twelfths {
  width: 33.333% !important; }

.two-thirds, .four-sixths, .eight-twelfths {
  width: 66.666% !important; }

/**
* Quarters
*/
.one-quarter, .two-eighths, .three-twelfths {
  width: 25% !important; }

.three-quarters, .six-eighths, .nine-twelfths {
  width: 75% !important; }

/**
* Fifths
*/
.one-fifth, .two-tenths {
  width: 20% !important; }

.two-fifths, .four-tenths {
  width: 40% !important; }

.three-fifths, .six-tenths {
  width: 60% !important; }

.four-fifths, .eight-tenths {
  width: 80% !important; }

/**
* Sixths
*/
.one-sixth, .two-twelfths {
  width: 16.666% !important; }

.five-sixths, .ten-twelfths {
  width: 83.333% !important; }

/**
* Eighths
*/
.one-eighth {
  width: 12.5% !important; }

.three-eighths {
  width: 37.5% !important; }

.five-eighths {
  width: 62.5% !important; }

.seven-eighths {
  width: 87.5% !important; }

/**
* Tenths
*/
.one-tenth {
  width: 10% !important; }

.three-tenths {
  width: 30% !important; }

.seven-tenths {
  width: 70% !important; }

.nine-tenths {
  width: 90% !important; }

/**
* Twelfths
*/
.one-twelfth {
  width: 8.333% !important; }

.five-twelfths {
  width: 41.666% !important; }

.seven-twelfths {
  width: 58.333% !important; }

.eleven-twelfths {
  width: 91.666% !important; }

@media only screen and (max-width: 575px) {
  /**
  * Whole
  */
  .palm-one-whole {
    width: 100% !important; }

  /**
  * Halves
  */
  .palm-one-half, .palm-two-quarters, .palm-three-sixths, .palm-four-eighths, .palm-five-tenths, .palm-six-twelfths {
    width: 50% !important; }

  /**
  * Thirds
  */
  .palm-one-third, .palm-two-sixths, .palm-four-twelfths {
    width: 33.333% !important; }

  .palm-two-thirds, .palm-four-sixths, .palm-eight-twelfths {
    width: 66.666% !important; }

  /**
  * Quarters
  */
  .palm-one-quarter, .palm-two-eighths, .palm-three-twelfths {
    width: 25% !important; }

  .palm-three-quarters, .palm-six-eighths, .palm-nine-twelfths {
    width: 75% !important; }

  /**
  * Fifths
  */
  .palm-one-fifth, .palm-two-tenths {
    width: 20% !important; }

  .palm-two-fifths, .palm-four-tenths {
    width: 40% !important; }

  .palm-three-fifths, .palm-six-tenths {
    width: 60% !important; }

  .palm-four-fifths, .palm-eight-tenths {
    width: 80% !important; }

  /**
  * Sixths
  */
  .palm-one-sixth, .palm-two-twelfths {
    width: 16.666% !important; }

  .palm-five-sixths, .palm-ten-twelfths {
    width: 83.333% !important; }

  /**
  * Eighths
  */
  .palm-one-eighth {
    width: 12.5% !important; }

  .palm-three-eighths {
    width: 37.5% !important; }

  .palm-five-eighths {
    width: 62.5% !important; }

  .palm-seven-eighths {
    width: 87.5% !important; }

  /**
  * Tenths
  */
  .palm-one-tenth {
    width: 10% !important; }

  .palm-three-tenths {
    width: 30% !important; }

  .palm-seven-tenths {
    width: 70% !important; }

  .palm-nine-tenths {
    width: 90% !important; }

  /**
  * Twelfths
  */
  .palm-one-twelfth {
    width: 8.333% !important; }

  .palm-five-twelfths {
    width: 41.666% !important; }

  .palm-seven-twelfths {
    width: 58.333% !important; }

  .palm-eleven-twelfths {
    width: 91.666% !important; } }
@media only screen and (min-width: 576px) and (max-width: 768px) {
  /**
  * Whole
  */
  .lap-one-whole {
    width: 100% !important; }

  /**
  * Halves
  */
  .lap-one-half, .lap-two-quarters, .lap-three-sixths, .lap-four-eighths, .lap-five-tenths, .lap-six-twelfths {
    width: 50% !important; }

  /**
  * Thirds
  */
  .lap-one-third, .lap-two-sixths, .lap-four-twelfths {
    width: 33.333% !important; }

  .lap-two-thirds, .lap-four-sixths, .lap-eight-twelfths {
    width: 66.666% !important; }

  /**
  * Quarters
  */
  .lap-one-quarter, .lap-two-eighths, .lap-three-twelfths {
    width: 25% !important; }

  .lap-three-quarters, .lap-six-eighths, .lap-nine-twelfths {
    width: 75% !important; }

  /**
  * Fifths
  */
  .lap-one-fifth, .lap-two-tenths {
    width: 20% !important; }

  .lap-two-fifths, .lap-four-tenths {
    width: 40% !important; }

  .lap-three-fifths, .lap-six-tenths {
    width: 60% !important; }

  .lap-four-fifths, .lap-eight-tenths {
    width: 80% !important; }

  /**
  * Sixths
  */
  .lap-one-sixth, .lap-two-twelfths {
    width: 16.666% !important; }

  .lap-five-sixths, .lap-ten-twelfths {
    width: 83.333% !important; }

  /**
  * Eighths
  */
  .lap-one-eighth {
    width: 12.5% !important; }

  .lap-three-eighths {
    width: 37.5% !important; }

  .lap-five-eighths {
    width: 62.5% !important; }

  .lap-seven-eighths {
    width: 87.5% !important; }

  /**
  * Tenths
  */
  .lap-one-tenth {
    width: 10% !important; }

  .lap-three-tenths {
    width: 30% !important; }

  .lap-seven-tenths {
    width: 70% !important; }

  .lap-nine-tenths {
    width: 90% !important; }

  /**
  * Twelfths
  */
  .lap-one-twelfth {
    width: 8.333% !important; }

  .lap-five-twelfths {
    width: 41.666% !important; }

  .lap-seven-twelfths {
    width: 58.333% !important; }

  .lap-eleven-twelfths {
    width: 91.666% !important; } }
@media only screen and (max-width: 768px) {
  /**
  * Whole
  */
  .portable-one-whole {
    width: 100% !important; }

  /**
  * Halves
  */
  .portable-one-half, .portable-two-quarters, .portable-three-sixths, .portable-four-eighths, .portable-five-tenths, .portable-six-twelfths {
    width: 50% !important; }

  /**
  * Thirds
  */
  .portable-one-third, .portable-two-sixths, .portable-four-twelfths {
    width: 33.333% !important; }

  .portable-two-thirds, .portable-four-sixths, .portable-eight-twelfths {
    width: 66.666% !important; }

  /**
  * Quarters
  */
  .portable-one-quarter, .portable-two-eighths, .portable-three-twelfths {
    width: 25% !important; }

  .portable-three-quarters, .portable-six-eighths, .portable-nine-twelfths {
    width: 75% !important; }

  /**
  * Fifths
  */
  .portable-one-fifth, .portable-two-tenths {
    width: 20% !important; }

  .portable-two-fifths, .portable-four-tenths {
    width: 40% !important; }

  .portable-three-fifths, .portable-six-tenths {
    width: 60% !important; }

  .portable-four-fifths, .portable-eight-tenths {
    width: 80% !important; }

  /**
  * Sixths
  */
  .portable-one-sixth, .portable-two-twelfths {
    width: 16.666% !important; }

  .portable-five-sixths, .portable-ten-twelfths {
    width: 83.333% !important; }

  /**
  * Eighths
  */
  .portable-one-eighth {
    width: 12.5% !important; }

  .portable-three-eighths {
    width: 37.5% !important; }

  .portable-five-eighths {
    width: 62.5% !important; }

  .portable-seven-eighths {
    width: 87.5% !important; }

  /**
  * Tenths
  */
  .portable-one-tenth {
    width: 10% !important; }

  .portable-three-tenths {
    width: 30% !important; }

  .portable-seven-tenths {
    width: 70% !important; }

  .portable-nine-tenths {
    width: 90% !important; }

  /**
  * Twelfths
  */
  .portable-one-twelfth {
    width: 8.333% !important; }

  .portable-five-twelfths {
    width: 41.666% !important; }

  .portable-seven-twelfths {
    width: 58.333% !important; }

  .portable-eleven-twelfths {
    width: 91.666% !important; } }
@media only screen and (min-width: 769px) and (max-width: 1280px) {
  /**
  * Whole
  */
  .desk-one-whole {
    width: 100% !important; }

  /**
  * Halves
  */
  .desk-one-half, .desk-two-quarters, .desk-three-sixths, .desk-four-eighths, .desk-five-tenths, .desk-six-twelfths {
    width: 50% !important; }

  /**
  * Thirds
  */
  .desk-one-third, .desk-two-sixths, .desk-four-twelfths {
    width: 33.333% !important; }

  .desk-two-thirds, .desk-four-sixths, .desk-eight-twelfths {
    width: 66.666% !important; }

  /**
  * Quarters
  */
  .desk-one-quarter, .desk-two-eighths, .desk-three-twelfths {
    width: 25% !important; }

  .desk-three-quarters, .desk-six-eighths, .desk-nine-twelfths {
    width: 75% !important; }

  /**
  * Fifths
  */
  .desk-one-fifth, .desk-two-tenths {
    width: 20% !important; }

  .desk-two-fifths, .desk-four-tenths {
    width: 40% !important; }

  .desk-three-fifths, .desk-six-tenths {
    width: 60% !important; }

  .desk-four-fifths, .desk-eight-tenths {
    width: 80% !important; }

  /**
  * Sixths
  */
  .desk-one-sixth, .desk-two-twelfths {
    width: 16.666% !important; }

  .desk-five-sixths, .desk-ten-twelfths {
    width: 83.333% !important; }

  /**
  * Eighths
  */
  .desk-one-eighth {
    width: 12.5% !important; }

  .desk-three-eighths {
    width: 37.5% !important; }

  .desk-five-eighths {
    width: 62.5% !important; }

  .desk-seven-eighths {
    width: 87.5% !important; }

  /**
  * Tenths
  */
  .desk-one-tenth {
    width: 10% !important; }

  .desk-three-tenths {
    width: 30% !important; }

  .desk-seven-tenths {
    width: 70% !important; }

  .desk-nine-tenths {
    width: 90% !important; }

  /**
  * Twelfths
  */
  .desk-one-twelfth {
    width: 8.333% !important; }

  .desk-five-twelfths {
    width: 41.666% !important; }

  .desk-seven-twelfths {
    width: 58.333% !important; }

  .desk-eleven-twelfths {
    width: 91.666% !important; } }
@media only screen and (min-width: 769px) {
  /**
  * Whole
  */
  .desk-and-up-one-whole {
    width: 100% !important; }

  /**
  * Halves
  */
  .desk-and-up-one-half, .desk-and-up-two-quarters, .desk-and-up-three-sixths, .desk-and-up-four-eighths, .desk-and-up-five-tenths, .desk-and-up-six-twelfths {
    width: 50% !important; }

  /**
  * Thirds
  */
  .desk-and-up-one-third, .desk-and-up-two-sixths, .desk-and-up-four-twelfths {
    width: 33.333% !important; }

  .desk-and-up-two-thirds, .desk-and-up-four-sixths, .desk-and-up-eight-twelfths {
    width: 66.666% !important; }

  /**
  * Quarters
  */
  .desk-and-up-one-quarter, .desk-and-up-two-eighths, .desk-and-up-three-twelfths {
    width: 25% !important; }

  .desk-and-up-three-quarters, .desk-and-up-six-eighths, .desk-and-up-nine-twelfths {
    width: 75% !important; }

  /**
  * Fifths
  */
  .desk-and-up-one-fifth, .desk-and-up-two-tenths {
    width: 20% !important; }

  .desk-and-up-two-fifths, .desk-and-up-four-tenths {
    width: 40% !important; }

  .desk-and-up-three-fifths, .desk-and-up-six-tenths {
    width: 60% !important; }

  .desk-and-up-four-fifths, .desk-and-up-eight-tenths {
    width: 80% !important; }

  /**
  * Sixths
  */
  .desk-and-up-one-sixth, .desk-and-up-two-twelfths {
    width: 16.666% !important; }

  .desk-and-up-five-sixths, .desk-and-up-ten-twelfths {
    width: 83.333% !important; }

  /**
  * Eighths
  */
  .desk-and-up-one-eighth {
    width: 12.5% !important; }

  .desk-and-up-three-eighths {
    width: 37.5% !important; }

  .desk-and-up-five-eighths {
    width: 62.5% !important; }

  .desk-and-up-seven-eighths {
    width: 87.5% !important; }

  /**
  * Tenths
  */
  .desk-and-up-one-tenth {
    width: 10% !important; }

  .desk-and-up-three-tenths {
    width: 30% !important; }

  .desk-and-up-seven-tenths {
    width: 70% !important; }

  .desk-and-up-nine-tenths {
    width: 90% !important; }

  /**
  * Twelfths
  */
  .desk-and-up-one-twelfth {
    width: 8.333% !important; }

  .desk-and-up-five-twelfths {
    width: 41.666% !important; }

  .desk-and-up-seven-twelfths {
    width: 58.333% !important; }

  .desk-and-up-eleven-twelfths {
    width: 91.666% !important; } }
@media only screen and (min-width: 1281px) {
  /**
  * Whole
  */
  .desk-wide-one-whole {
    width: 100% !important; }

  /**
  * Halves
  */
  .desk-wide-one-half, .desk-wide-two-quarters, .desk-wide-three-sixths, .desk-wide-four-eighths, .desk-wide-five-tenths, .desk-wide-six-twelfths {
    width: 50% !important; }

  /**
  * Thirds
  */
  .desk-wide-one-third, .desk-wide-two-sixths, .desk-wide-four-twelfths {
    width: 33.333% !important; }

  .desk-wide-two-thirds, .desk-wide-four-sixths, .desk-wide-eight-twelfths {
    width: 66.666% !important; }

  /**
  * Quarters
  */
  .desk-wide-one-quarter, .desk-wide-two-eighths, .desk-wide-three-twelfths {
    width: 25% !important; }

  .desk-wide-three-quarters, .desk-wide-six-eighths, .desk-wide-nine-twelfths {
    width: 75% !important; }

  /**
  * Fifths
  */
  .desk-wide-one-fifth, .desk-wide-two-tenths {
    width: 20% !important; }

  .desk-wide-two-fifths, .desk-wide-four-tenths {
    width: 40% !important; }

  .desk-wide-three-fifths, .desk-wide-six-tenths {
    width: 60% !important; }

  .desk-wide-four-fifths, .desk-wide-eight-tenths {
    width: 80% !important; }

  /**
  * Sixths
  */
  .desk-wide-one-sixth, .desk-wide-two-twelfths {
    width: 16.666% !important; }

  .desk-wide-five-sixths, .desk-wide-ten-twelfths {
    width: 83.333% !important; }

  /**
  * Eighths
  */
  .desk-wide-one-eighth {
    width: 12.5% !important; }

  .desk-wide-three-eighths {
    width: 37.5% !important; }

  .desk-wide-five-eighths {
    width: 62.5% !important; }

  .desk-wide-seven-eighths {
    width: 87.5% !important; }

  /**
  * Tenths
  */
  .desk-wide-one-tenth {
    width: 10% !important; }

  .desk-wide-three-tenths {
    width: 30% !important; }

  .desk-wide-seven-tenths {
    width: 70% !important; }

  .desk-wide-nine-tenths {
    width: 90% !important; }

  /**
  * Twelfths
  */
  .desk-wide-one-twelfth {
    width: 8.333% !important; }

  .desk-wide-five-twelfths {
    width: 41.666% !important; }

  .desk-wide-seven-twelfths {
    width: 58.333% !important; }

  .desk-wide-eleven-twelfths {
    width: 91.666% !important; } }
/*doc
### Element Layout
*/
/*doc
#### `.clearfix`

Makes an element contain floated children.

```html
<div class="clearfix doc-box">
  <div class="float--left doc-box doc-box--highlight">Floated Left</div>
  <div class="float--right doc-box doc-box--highlight">Floated Right</div>
</div>
```
*/
/*------------------------------------*\
    #CLEARFIX
\*------------------------------------*/
/**
 * Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
 * Extend the clearfix class with Sass to avoid the `.clearfix` class appearing
 * over and over in your markup.
 */
.clearfix:after, .cf:after, .nav:after, .list--horizontal:after, .pagination:after {
  content: "";
  display: table;
  clear: both; }

/*doc
#### `.float--left` and `.float--right`

Pulls elements left or right within a container.

```html
<div class="doc-box">
  <div class="float--left doc-box doc-box--highlight">Floated Left</div>
  <div class="float--right doc-box doc-box--highlight">Floated Right</div>
  <p>Some text outside the floats that will wrap under them.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut tincidunt nulla. Suspendisse semper, nisl vitae ultricies vulputate, metus tortor tincidunt neque, sed feugiat lacus ipsum eu neque.</p>
</div>
```
*/
.float--left {
  float: left !important; }

.float--right {
  float: right !important; }

/*doc
#### `.block-context`

Creates a [new block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context).
It will contain floated children and it will not wrap under floats. If you don't
want to hide overflow, use `.block-context-overflow`.

```html
<div class="doc-box">
  <div class="float--left doc-box doc-box--highlight">Floated Left</div>
  <div class="block-context">
    <p>This text will not wrap under the float.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut tincidunt nulla. Suspendisse semper, nisl vitae ultricies vulputate, metus tortor tincidunt neque, sed feugiat lacus ipsum eu neque.</p>
  </div>
</div>
```
*/
/**
 * Pulled from SUIT
 * https://github.com/suitcss/utils-layout/blob/0.3.0/layout.css#L25-L37
 */
.block-context {
  overflow: hidden !important; }

/*doc
#### `.block-context-overflow`

Similar to `.block-context` but allows for overflow content.

*This breaks down in some browsers when elements within this element exceed its width.*

```html
<div class="doc-box">
  <div class="float--left doc-box doc-box--highlight">Floated Left</div>
  <div class="block-context-overflow">
    <p>This text will not wrap under the float.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut tincidunt nulla. Suspendisse semper, nisl vitae ultricies vulputate, metus tortor tincidunt neque, sed feugiat lacus ipsum eu neque.</p>
  </div>
</div>
```
*/
/**
 * Pulled from SUIT
 * https://github.com/suitcss/utils-layout/blob/0.3.0/layout.css#L39-L54
 */
.block-context-overflow {
  display: table-cell !important;
  width: 10000px !important; }

/*doc
#### `.center-block`

Position a block-level element in the center of its parent. This should be used
sparingly. You'll likely want to use the [layout system](#layout-system-a-k-a-grids-)
instead.

```html
<div class="doc-box">
  <div class="center-block one-half doc-box doc-box--highlight"></div>
</div>
```
*/
.center-block {
  display: block;
  margin: 0 auto; }

/*doc
### Display

- `.display--block`
- `.display--inline`
- `.display--inline-block`
- `.display--table`
- `.display--table-row`
- `.display--table-cell`

```html
<div class="display--block doc-box doc-box--highlight">Block display</div>
<div class="doc-box"><div class="display--inline doc-box doc-box--highlight">Inline display</div></div>
<div class="doc-box"><div class="display--inline-block doc-box doc-box--highlight">Inline-Block display</div></div>
<div class="doc-box">
  <div class="display--table">
    <div class="display--table-row">
      <div class="display--table-cell doc-box doc-box--highlight">Table cell</div>
      <div class="display--table-cell doc-box doc-box--highlight">Table cell</div>
    </div>
  </div>
</div>
```
*/
.display--block {
  display: block !important; }

.display--inline {
  display: inline !important; }

.display--inline-block {
  display: inline-block !important; }

.display--table {
  display: table !important; }

.display--table-row {
  display: table-row !important; }

.display--table-cell {
  display: table-cell !important; }

/*doc
#### Visibility

Show/hide elements on the page either globally or by a specific media query breakpoint.

- `.visible`
- `.hidden`
- `.visible--{media-query}`
- `.hidden--{media-query}`

```html
<div class="doc-box visible--palm">This will only be visible on palm devices</div>
<div class="doc-box hidden--palm">This will not be visible on palm devices</div>
```
*/
.visible {
  display: block !important; }

.hidden {
  display: none !important; }

.visible--palm {
  display: none !important; }

@media only screen and (max-width: 575px) {
  .hidden--palm {
    display: none !important; }

  .visible--palm {
    display: block !important; } }
.visible--lap {
  display: none !important; }

@media only screen and (min-width: 576px) and (max-width: 768px) {
  .hidden--lap {
    display: none !important; }

  .visible--lap {
    display: block !important; } }
.visible--portable {
  display: none !important; }

@media only screen and (max-width: 768px) {
  .hidden--portable {
    display: none !important; }

  .visible--portable {
    display: block !important; } }
.visible--desk {
  display: none !important; }

@media only screen and (min-width: 769px) and (max-width: 1280px) {
  .hidden--desk {
    display: none !important; }

  .visible--desk {
    display: block !important; } }
.visible--desk-and-up {
  display: none !important; }

@media only screen and (min-width: 769px) {
  .hidden--desk-and-up {
    display: none !important; }

  .visible--desk-and-up {
    display: block !important; } }
.visible--desk-wide {
  display: none !important; }

@media only screen and (min-width: 1281px) {
  .hidden--desk-wide {
    display: none !important; }

  .visible--desk-wide {
    display: block !important; } }
/*doc
### Spacing

A set of spacing helper classes used to add/remove both margin and padding.

Margin is added with `.push` and padding is added with `.soft`. Variants of these
also exist and can be specified with a prefix of one of the following: `-tiny`,
`-small`, `-large`, and `-huge` (e.g. `.push-small` or `.soft-huge`).

Margin and padding can be removed using the classes `.flush` and `.hard`, respectively.

All of these classes can target a specific side (or sides) of the element using
the following modifiers: `--top`, `--right`, `--bottom`, `--left`, `--ends`, and
`--sides`. For example: `.push--top` or `.soft-huge--ends`.

```html
<div class="doc-box">
  <div class="soft push--bottom doc-box doc-box--highlight">`.soft` with `.push--bottom`</div>
  <div class="soft--top soft-small--sides doc-box doc-box--highlight">`.soft--top` with `.soft-small--sides`</div>
</div>
```
*/
/**
 * Margin
 */
.push-tiny, .side-nav__item a, .side-nav li a {
  margin: 6px !important; }

.push-tiny--top, .push-tiny--ends {
  margin-top: 6px !important; }

.push-tiny--right, .push-tiny--sides {
  margin-right: 6px !important; }

.push-tiny--bottom, .push-tiny--ends {
  margin-bottom: 6px !important; }

.push-tiny--left, .push-tiny--sides {
  margin-left: 6px !important; }

.push-small {
  margin: 12px !important; }

.push-small--top, .push-small--ends {
  margin-top: 12px !important; }

.push-small--right, .push-small--sides {
  margin-right: 12px !important; }

.push-small--bottom, .push-small--ends {
  margin-bottom: 12px !important; }

.push-small--left, .push-small--sides {
  margin-left: 12px !important; }

.push {
  margin: 24px !important; }

.push--top, .push--ends {
  margin-top: 24px !important; }

.push--right, .push--sides {
  margin-right: 24px !important; }

.push--bottom, .push--ends {
  margin-bottom: 24px !important; }

.push--left, .push--sides {
  margin-left: 24px !important; }

.push-large {
  margin: 36px !important; }

.push-large--top, .push-large--ends {
  margin-top: 36px !important; }

.push-large--right, .push-large--sides {
  margin-right: 36px !important; }

.push-large--bottom, .push-large--ends {
  margin-bottom: 36px !important; }

.push-large--left, .push-large--sides {
  margin-left: 36px !important; }

.push-huge {
  margin: 48px !important; }

.push-huge--top, .push-huge--ends {
  margin-top: 48px !important; }

.push-huge--right, .push-huge--sides {
  margin-right: 48px !important; }

.push-huge--bottom, .push-huge--ends {
  margin-bottom: 48px !important; }

.push-huge--left, .push-huge--sides {
  margin-left: 48px !important; }

.flush {
  margin: 0 !important; }

.flush--top, .flush--ends {
  margin-top: 0 !important; }

.flush--right, .flush--sides {
  margin-right: 0 !important; }

.flush--bottom, .flush--ends {
  margin-bottom: 0 !important; }

.flush--left, .flush--sides {
  margin-left: 0 !important; }

/**
 * Padding
 */
.soft-tiny {
  padding: 6px !important; }

.soft-tiny--top, .soft-tiny--ends {
  padding-top: 6px !important; }

.soft-tiny--right, .soft-tiny--sides {
  padding-right: 6px !important; }

.soft-tiny--bottom, .soft-tiny--ends {
  padding-bottom: 6px !important; }

.soft-tiny--left, .soft-tiny--sides {
  padding-left: 6px !important; }

.soft-small {
  padding: 12px !important; }

.soft-small--top, .soft-small--ends {
  padding-top: 12px !important; }

.soft-small--right, .soft-small--sides {
  padding-right: 12px !important; }

.soft-small--bottom, .soft-small--ends {
  padding-bottom: 12px !important; }

.soft-small--left, .soft-small--sides, .side-nav__item a, .side-nav li a {
  padding-left: 12px !important; }

.soft {
  padding: 24px !important; }

.soft--top, .soft--ends {
  padding-top: 24px !important; }

.soft--right, .soft--sides {
  padding-right: 24px !important; }

.soft--bottom, .soft--ends {
  padding-bottom: 24px !important; }

.soft--left, .soft--sides {
  padding-left: 24px !important; }

.soft-large {
  padding: 36px !important; }

.soft-large--top, .soft-large--ends {
  padding-top: 36px !important; }

.soft-large--right, .soft-large--sides {
  padding-right: 36px !important; }

.soft-large--bottom, .soft-large--ends {
  padding-bottom: 36px !important; }

.soft-large--left, .soft-large--sides {
  padding-left: 36px !important; }

.soft-huge {
  padding: 48px !important; }

.soft-huge--top, .soft-huge--ends {
  padding-top: 48px !important; }

.soft-huge--right, .soft-huge--sides, .side-nav {
  padding-right: 48px !important; }

.soft-huge--bottom, .soft-huge--ends {
  padding-bottom: 48px !important; }

.soft-huge--left, .soft-huge--sides, .side-nav {
  padding-left: 48px !important; }

.hard {
  padding: 0 !important; }

.hard--top, .hard--ends {
  padding-top: 0 !important; }

.hard--right, .hard--sides {
  padding-right: 0 !important; }

.hard--bottom, .hard--ends {
  padding-bottom: 0 !important; }

.hard--left, .hard--sides {
  padding-left: 0 !important; }

/*doc
### Gutter

The gutter helpers are very similar to the [spacing classes](#spacing) - with modifiers
like `.soft-gutter--top` and `.push-gutter--sides` - except that the spacing automatically
changes based on the current browser size. The spacing sizes are exactly the same
as those used for gutters in the [layout system](#layout-system-a-k-a-grids-).

```html
<div class="doc-box">
  <div class="soft-gutter push-gutter--bottom doc-box doc-box--highlight">`.soft-gutter` with `.push-gutter--bottom`</div>
  <div class="soft-gutter--top soft-gutter--sides doc-box doc-box--highlight">`.soft-gutter--top` with `.soft-gutter--sides`</div>
</div>
```
*/
.soft-gutter {
  padding: 24px !important; }

.soft-gutter--top {
  padding-top: 24px !important; }

.soft-gutter--right {
  padding-right: 24px !important; }

.soft-gutter--bottom {
  padding-bottom: 24px !important; }

.soft-gutter--left {
  padding-left: 24px !important; }

.soft-gutter--ends {
  padding-top: 24px !important;
  padding-bottom: 24px !important; }

.soft-gutter--sides {
  padding-right: 24px !important;
  padding-left: 24px !important; }

.push-gutter {
  margin: 24px !important; }

.push-gutter--top {
  margin-top: 24px !important; }

.push-gutter--right {
  margin-right: 24px !important; }

.push-gutter--bottom {
  margin-bottom: 24px !important; }

.push-gutter--left {
  margin-left: 24px !important; }

.push-gutter--ends {
  margin-top: 24px !important;
  margin-bottom: 24px !important; }

.push-gutter--sides {
  margin-right: 24px !important;
  margin-left: 24px !important; }

@media only screen and (max-width: 575px) {
  .soft-gutter {
    padding: 18px !important; }

  .soft-gutter--top {
    padding-top: 18px !important; }

  .soft-gutter--right {
    padding-right: 18px !important; }

  .soft-gutter--bottom {
    padding-bottom: 18px !important; }

  .soft-gutter--left {
    padding-left: 18px !important; }

  .soft-gutter--ends {
    padding-top: 18px !important;
    padding-bottom: 18px !important; }

  .soft-gutter--sides {
    padding-right: 18px !important;
    padding-left: 18px !important; }

  .push-gutter {
    margin: 18px !important; }

  .push-gutter--top {
    margin-top: 18px !important; }

  .push-gutter--right {
    margin-right: 18px !important; }

  .push-gutter--bottom {
    margin-bottom: 18px !important; }

  .push-gutter--left {
    margin-left: 18px !important; }

  .push-gutter--ends {
    margin-top: 18px !important;
    margin-bottom: 18px !important; }

  .push-gutter--sides {
    margin-right: 18px !important;
    margin-left: 18px !important; } }
@media only screen and (min-width: 576px) and (max-width: 768px) {
  .soft-gutter {
    padding: 24px !important; }

  .soft-gutter--top {
    padding-top: 24px !important; }

  .soft-gutter--right {
    padding-right: 24px !important; }

  .soft-gutter--bottom {
    padding-bottom: 24px !important; }

  .soft-gutter--left {
    padding-left: 24px !important; }

  .soft-gutter--ends {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }

  .soft-gutter--sides {
    padding-right: 24px !important;
    padding-left: 24px !important; }

  .push-gutter {
    margin: 24px !important; }

  .push-gutter--top {
    margin-top: 24px !important; }

  .push-gutter--right {
    margin-right: 24px !important; }

  .push-gutter--bottom {
    margin-bottom: 24px !important; }

  .push-gutter--left {
    margin-left: 24px !important; }

  .push-gutter--ends {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }

  .push-gutter--sides {
    margin-right: 24px !important;
    margin-left: 24px !important; } }
@media only screen and (min-width: 769px) and (max-width: 1280px) {
  .soft-gutter {
    padding: 24px !important; }

  .soft-gutter--top {
    padding-top: 24px !important; }

  .soft-gutter--right {
    padding-right: 24px !important; }

  .soft-gutter--bottom {
    padding-bottom: 24px !important; }

  .soft-gutter--left {
    padding-left: 24px !important; }

  .soft-gutter--ends {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }

  .soft-gutter--sides {
    padding-right: 24px !important;
    padding-left: 24px !important; }

  .push-gutter {
    margin: 24px !important; }

  .push-gutter--top {
    margin-top: 24px !important; }

  .push-gutter--right {
    margin-right: 24px !important; }

  .push-gutter--bottom {
    margin-bottom: 24px !important; }

  .push-gutter--left {
    margin-left: 24px !important; }

  .push-gutter--ends {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }

  .push-gutter--sides {
    margin-right: 24px !important;
    margin-left: 24px !important; } }
@media only screen and (min-width: 1281px) {
  .soft-gutter {
    padding: 36px !important; }

  .soft-gutter--top {
    padding-top: 36px !important; }

  .soft-gutter--right {
    padding-right: 36px !important; }

  .soft-gutter--bottom {
    padding-bottom: 36px !important; }

  .soft-gutter--left {
    padding-left: 36px !important; }

  .soft-gutter--ends {
    padding-top: 36px !important;
    padding-bottom: 36px !important; }

  .soft-gutter--sides {
    padding-right: 36px !important;
    padding-left: 36px !important; }

  .push-gutter {
    margin: 36px !important; }

  .push-gutter--top {
    margin-top: 36px !important; }

  .push-gutter--right {
    margin-right: 36px !important; }

  .push-gutter--bottom {
    margin-bottom: 36px !important; }

  .push-gutter--left {
    margin-left: 36px !important; }

  .push-gutter--ends {
    margin-top: 36px !important;
    margin-bottom: 36px !important; }

  .push-gutter--sides {
    margin-right: 36px !important;
    margin-left: 36px !important; } }
/*doc
### Text

- `.text--center`
- `.text--left`
- `.text--right`

```html
<div class="text--left doc-box push-tiny--bottom">Some left-aligned text</div>
<div class="text--center doc-box push-tiny--bottom">Some center-aligned text</div>
<div class="text--right doc-box push-tiny--bottom">Some right-aligned text</div>
```
*/
.text--left {
  text-align: left !important; }

.text--right {
  text-align: right !important; }

.text--center {
  text-align: center !important; color:#fff;padding-bottom:10px; }

/*doc
- `.text--uppercase`
- `.text--lowercase`
- `.text--capitalize`
- `.text--none`

```html
<div class="doc-box">
  <span class="text--uppercase">Uppercase Text</span>
  <span class="text--lowercase">Lowercase Text</span>
  <span class="text--capitalize">capitalize text</span>
</div>
```
*/
.text--uppercase {
  text-transform: uppercase !important; }

.text--lowercase {
  text-transform: lowercase !important; }

.text--capitalize {
  text-transform: capitalize !important; }

.text--none {
  text-transform: none !important; }

/*doc
- `.text--break`
- `.text--nowrap`
- `.text--truncate`

```html
<div class="layout">
   <div class="layout__item one-third">
     <div class="doc-box text--nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae placerat enim. Ut sed porttitor mi, a consectetur massa.</div>
   </div>
   <div class="layout__item one-third">
     <div class="doc-box text--break">Loremipsumdolorsitamet,consecteturadipiscingelit.Nuncvitaeplaceratenim.Utsedporttitormi,aconsecteturmassa.</div>
   </div>
   <div class="layout__item one-third">
     <div class="doc-box text--truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae placerat enim. Ut sed porttitor mi, a consectetur massa.</div>
   </div>
</div>
```
*/
.text--break {
  word-wrap: break-word !important; }

.text--nowrap {
  white-space: nowrap !important; }

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

/*doc
### Vertical Alignment

- `.align--baseline`
- `.align--bottom`
- `.align--middle`
- `.align--top`

```html
<div class="doc-box gamma">Text <span class="milli align--baseline">aligned to baseline</span></div>
<div class="doc-box gamma">Text <span class="milli align--bottom">aligned to bottom</span></div>
<div class="doc-box gamma">Text <span class="milli align--middle">aligned to middle</span></div>
<div class="doc-box gamma">Text <span class="milli align--top">aligned to top</span></div>
```
*/
.align--baseline {
  vertical-align: baseline !important; }

.align--bottom {
  vertical-align: bottom !important; }

.align--middle {
  vertical-align: middle !important; }

.align--top {
  vertical-align: top !important; }

/*doc
### Transitions

Helper classes for providing transitions to your elements in a generic way.

#### `.transition`

Sets a CSS3 transition on **all** properties of the element with a duration set
with the `$transition-duration` variable and easing set by the `$transition-func`
variable.

#### `.transition--slow`

A slower version of the transition helper, set with `$transition-duration--slow`.

#### `.transition--fast`

A faster version of the transition helper, set with `$transition-duration--fast`.
*/
.transition, .btn, .text-input, .input-group, .select, .checkbox:before, .radio:before, .checkbox:after, .radio:after, .pagination__item, .pagination li {
  -webkit-transition: all 200ms cubic-bezier(0.72, 0.01, 0.56, 1) !important;
  -moz-transition: all 200ms cubic-bezier(0.72, 0.01, 0.56, 1) !important;
  -ms-transition: all 200ms cubic-bezier(0.72, 0.01, 0.56, 1) !important;
  -o-transition: all 200ms cubic-bezier(0.72, 0.01, 0.56, 1) !important;
  transition: all 200ms cubic-bezier(0.72, 0.01, 0.56, 1) !important; }

.transition--slow {
  -webkit-transition: all 600ms cubic-bezier(0.72, 0.01, 0.56, 1) !important;
  -moz-transition: all 600ms cubic-bezier(0.72, 0.01, 0.56, 1) !important;
  -ms-transition: all 600ms cubic-bezier(0.72, 0.01, 0.56, 1) !important;
  -o-transition: all 600ms cubic-bezier(0.72, 0.01, 0.56, 1) !important;
  transition: all 600ms cubic-bezier(0.72, 0.01, 0.56, 1) !important; }

.transition--fast {
  -webkit-transition: all 200ms cubic-bezier(0.72, 0.01, 0.56, 1) !important;
  -moz-transition: all 200ms cubic-bezier(0.72, 0.01, 0.56, 1) !important;
  -ms-transition: all 200ms cubic-bezier(0.72, 0.01, 0.56, 1) !important;
  -o-transition: all 200ms cubic-bezier(0.72, 0.01, 0.56, 1) !important;
  transition: all 200ms cubic-bezier(0.72, 0.01, 0.56, 1) !important; }

/*doc
## Base Objects
---------------
*/
/*doc
### Layout System (a.k.a. Grids)

Our layout system uses `box-sizing: border-box` and `display: inline-block` to
create an extremely powerful, flexible alternative to the traditional grid
system. Combine the layout items with the [width classes](#widths).

**Note: Because our layout system uses `inline-block`, any whitespace between
`.layout__item` elements will break the layout. The correct way to solve this
would be to use a build tool like [htmlmin](http://htmlmin.readthedocs.org/en/latest/)
or a templating engine like [Jade]() that strips whitespace automatically. If
you don't want to use these (not recommended), set `$enable-layout-hack: true;`
in your settings before importing uber.base.**

#### `.layout`

All layout systems should be wrapped in the `.layout` class and each child
wrapped in the `.layout__item` class. Below is a basic implementation:

```html
<div class="layout">
   <div class="layout__item one-half"><div class="doc-box"></div></div>
   <div class="layout__item one-half"><div class="doc-box"></div></div>
   <div class="layout__item one-third"><div class="doc-box"></div></div>
   <div class="layout__item one-third"><div class="doc-box doc-box--large"></div></div>
   <div class="layout__item one-third"><div class="doc-box"></div></div>
</div>
```

#### `.layout--flush`

A modifier to remove the layout gutters.

```html
<div class="layout layout--flush">
   <div class="layout__item one-third"><div class="doc-box"></div></div>
   <div class="layout__item one-third"><div class="doc-box doc-box--highlight"></div></div>
   <div class="layout__item one-third"><div class="doc-box"></div></div>
</div>
```

#### `.layout--middle`

A modifier to vertically align the layout items in the middle of the row.

```html
<div class="layout layout--middle">
   <div class="layout__item one-third"><div class="doc-box"></div></div>
   <div class="layout__item one-third"><div class="doc-box doc-box--large"></div></div>
   <div class="layout__item one-third"><div class="doc-box"></div></div>
</div>
```

#### `.layout--bottom`

A modifier to vertically align the layout items to the bottom of the row.

```html
<div class="layout layout--bottom">
   <div class="layout__item one-third"><div class="doc-box"></div></div>
   <div class="layout__item one-third"><div class="doc-box doc-box--large"></div></div>
   <div class="layout__item one-third"><div class="doc-box"></div></div>
</div>
```

#### `.layout--right`

A modifier to make the layout items fill up from the right side of the row.

```html
<div class="layout layout--right">
   <div class="layout__item one-quarter"><div class="doc-box"></div></div>
   <div class="layout__item one-quarter"><div class="doc-box"></div></div>
</div>
```

#### `.layout--center`

A modifier to make the layout items fill up from the center of the row.

```html
<div class="layout layout--center">
   <div class="layout__item one-quarter"><div class="doc-box"></div></div>
   <div class="layout__item one-quarter"><div class="doc-box"></div></div>
</div>
```
*/
/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/
/**
 * The inuitcss layout system uses `box-sizing: border-box;` and
 * `display: inline-block;` to create an extremely powerful, flexible
 * alternative to the traditional grid system. Combine the layout items with
 * the widths found in `trumps.widths`.
 */
/**
 * Begin a layout group.
 */
.layout {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -24px; }

/**
 * 1. Cause columns to stack side-by-side.
 * 2. Space columns apart.
 * 3. Align columns to the tops of each other.
 * 4. Full-width unless told to behave otherwise.
 * 5. Required to combine fluid widths and fixed gutters.
 */
.layout__item {
  display: inline-block;
  /* [1] */
  padding-left: 24px;
  /* [2] */
  vertical-align: top;
  /* [3] */
  width: 100%;
  /* [4] */ }

@media only screen and (max-width: 575px) {
  .layout {
    margin-left: -18px; }
    .layout > .layout__item {
      padding-left: 18px; } }

@media only screen and (min-width: 576px) and (max-width: 768px) {
  .layout {
    margin-left: -24px; }
    .layout > .layout__item {
      padding-left: 24px; } }

@media only screen and (min-width: 769px) and (max-width: 1280px) {
  .layout {
    margin-left: -24px; }
    .layout > .layout__item {
      padding-left: 24px; } }

@media only screen and (min-width: 1281px) {
  .layout {
    margin-left: -30px; }
    .layout > .layout__item {
      padding-left: 30px; } }

/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/
/**
 * The inuitcss layout system uses `box-sizing: border-box;` and
 * `display: inline-block;` to create an extremely powerful, flexible
 * alternative to the traditional grid system. Combine the layout items with
 * the widths found in `trumps.widths`.
 */
/**
 * Layouts with no gutters.
 */
.layout--flush {
  margin-left: 0; }
  .layout--flush > .layout__item {
    padding-left: 0; }

/**
 * Align layout items to the vertical centers of each other.
 */
.layout--middle > .layout__item {
  vertical-align: middle; }

/**
 * Align layout items to the vertical bottoms of each other.
 */
.layout--bottom > .layout__item {
  vertical-align: bottom; }

/**
 * Make the layout items fill up from the right hand side.
 */
.layout--right {
  text-align: right; }
  .layout--right > .layout__item {
    text-align: left; }

/**
 * Make the layout items fill up from the center outward.
 */
.layout--center {
  text-align: center; }
  .layout--center > .layout__item {
    text-align: left; }

.layout {
  font-size: 0; }
  .layout > .layout__item {
    font-size: 14px; }

/*doc
### Flexbox

A way to lay out a row of cells in various ways. This mimicks (in a hacky way)
the native flexbox implementation but works cross-browser.

#### `.flexbox` and `.flexbox__item`

Flexboxes should be wrapped in the `.flexbox` class with each child wrapped in
the `.flexbox__item` class. Below is a basic implementation:

```html
<div class="flexbox">
  <div class="flexbox__item"><div class="doc-box">One cell</div></div>
  <div class="flexbox__item"><div class="doc-box doc-box--large">Two cell</div></div>
</div>
```

#### `.flexbox__item--collapse`

A modifier on a flexbox cell to make it collapse to fit its inner content instead
of expanded to fill the rest of the available space.

```html
<div class="flexbox">
  <div class="flexbox__item"><div class="doc-box">One cell</div></div>
  <div class="flexbox__item flexbox__item--collapse"><div class="doc-box doc-box--large">Two cell</div></div>
</div>
```

#### `.flexbox--vertical`

A modified flexbox that allows for vertical flexing.

```html
<div class="flexbox flexbox--vertical" style="height: 200px;">
  <div class="flexbox__item doc-box--highlight"><div class="doc-box">One cell</div></div>
  <div class="flexbox__item flexbox__item--collapse doc-box--highlight"><div class="doc-box">Two cell</div></div>
</div>
```
*/
/*------------------------------------*\
    $FLEXBOX
\*------------------------------------*/
/**
 * Until we can utilise flexbox natively we can kinda, sorta, attempt to emulate
 * it, in a way... e.g.:
 *
   <header class=flexbox>

       <div class=flexbox__item>
           <b>Welcome to</b>
       </div>

       <div class=flexbox__item>
           <img src="//csswizardry.com/inuitcss/img/logo.jpg" alt="inuit.css">
       </div>

   </header>
 *
 * We can also combine our grid system classes with `.flexbox__item` classes,
 * e.g.:
 *
   <div class=flexbox>
       <div class="flexbox__item  one-quarter">
       </div>
       <div class="flexbox__item  three-quarters">
       </div>
   </div>
 *
 * It’s pretty poorly named I’m afraid, but it works...
 *
 * Demo: jsfiddle.net/inuitcss/ufUh2
 *
 */
.flexbox, .input-group {
  display: table;
  width: 100%; }

/**
 * Nasty hack to circumvent Modernizr conflicts.
 */
html.flexbox, html.input-group {
  display: block;
  width: auto; }

.flexbox__item, .input-group .input-group__input, .input-group .input-group__icon {
  display: table-cell;
  vertical-align: middle; }

/**
 * Additions
 */
.flexbox__item--collapse {
  width: 1px; }

.flexbox--vertical {
  height: 100%; }
  .flexbox--vertical > .flexbox__item, .input-group .flexbox--vertical > .input-group__input, .input-group .flexbox--vertical > .input-group__icon {
    display: table-row;
    vertical-align: top;
    height: 100%; }
  .flexbox--vertical > .flexbox__item--collapse {
    width: auto;
    height: 1px; }

/*doc
### Fixed Ratio

A way to create fixed aspect ratio elements. This is useful when you want
an element to have a responsive width and a set height but only know the
element's aspect ratio (e.g., responsive images and video).

#### `.fixed-ratio` and `.fixed-ratio__content`

The base wrapper class is `.fixed-ratio` which will set up a psuedo element that
provides the aspect ratio. Use the descendent class `.fixed-ratio__content` on
the content you'd like to fill the fixed ratio container.

#### `.fixed-ratio--{ratio}`

Modifier classes to change the aspect ratio. By default, we include `1-1`, `2-1`,
`4-3` and `16-9`. Alter this by changing the `$fixed-ratios` variable with a
mapping of label (`16-9`) to aspect ratio percentage (`56.25%`).

```html
<div class="fixed-ratio fixed-ratio--2-1 one-half">
  <div class="fixed-ratio__content doc-box"></div>
</div>
```
*/
.fixed-ratio {
  display: block;
  position: relative; }
  .fixed-ratio:after {
    display: block;
    width: 100%;
    padding-top: 100%;
    content: ""; }

.fixed-ratio__content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.fixed-ratio--1-1:after {
  padding-top: 100%; }

.fixed-ratio--2-1:after {
  padding-top: 50%; }

.fixed-ratio--4-3:after {
  padding-top: 75%; }

.fixed-ratio--16-9:after {
  padding-top: 56.25%; }

/*------------------------------------*\
    #BUTTONS
\*------------------------------------*/
/**
 * A simple button object.
 */
/**
 * 1. Allow us to style box model properties.
 * 2. Line different sized buttons up a little nicer.
 * 3. Make buttons inherit font styles (often necessary when styling `input`s as
 *    buttons).
 * 4. Reset/normalize some styles.
 * 5. Force all button-styled elements to appear clickable.
 * 6. Fixes odd inner spacing in IE7.
 * 7. Subtract the border size from the padding value so that buttons do not
 *    grow larger as we add borders.
 */
.btn {
  display: inline-block;
  /* [1] */
  vertical-align: middle;
  /* [2] */
  font: inherit;
  /* [3] */
  text-align: center;
  /* [4] */
  border: none;
  /* [4] */
  margin: 0;
  /* [4] */
  cursor: pointer;
  /* [5] */
  overflow: visible;
  /* [6] */
  padding: 11px 23px;
  /* [7] */
  background-color: #40a8c2;
  border: 1px solid #40a8c2; }
  .btn, .btn:hover, .btn:active, .btn:focus {
    text-decoration: none;
    /* [4] */
    color: white; }

/**
 * Fix a Firefox bug whereby `input type="submit"` gains 2px extra padding.
 */
.btn::-moz-focus-inner {
  border: 0;
  padding: 0; }

/*------------------------------------*\
    #TABLES
\*------------------------------------*/
.table {
  width: 100%; }

/**
 * Include v5 Objects
 *
 * - Grids replaced with the v6's Layout object
 * - Flexbox included in the helpers by default
 * - Arrows are included by default as part of the inuit mixins
 * - Beatons replaced with v6's Buttons object
 */
/*------------------------------------*\
    $NAV
\*------------------------------------*/
/**
 * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
 * When used on an `ol` or `ul`, this class throws the list into horizontal mode
 * e.g.:
 *
   <ul class=nav>
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 * Demo: jsfiddle.net/inuitcss/Vnph4
 *
 */
.nav, .list--horizontal, .pagination {
  list-style: none;
  margin-left: 0; }
  .nav > li, .list--horizontal > li, .pagination > li,
  .nav > li > a,
  .list--horizontal > li > a,
  .pagination > li > a {
    display: inline-block;
    *display: inline;
    zoom: 1; }

/**
 * `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.:
 *
   <ul class="nav  nav--stacked">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.nav--stacked > li, .side-nav > li {
  display: list-item; }
  .nav--stacked > li > a, .side-nav > li > a {
    display: block; }

/**
 * `.nav--banner` extends `.nav` and centres the list, e.g.:
 *
   <ul class="nav  nav--banner">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.nav--banner {
  text-align: center; }

/**
 * Give nav links a big, blocky hit area. Extends `.nav`, e.g.:
 *
   <ul class="nav  nav--block">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.nav--block {
  line-height: 1;
  /**
   * Remove whitespace caused by `inline-block`.
   */
  letter-spacing: -0.31em;
  word-spacing: -0.43em;
  white-space: nowrap; }
  .nav--block > li {
    letter-spacing: normal;
    word-spacing: normal; }
    .nav--block > li > a {
      padding: 12px; }

/**
 * Force a nav to occupy 100% of the available width of its parent. Extends
 * `.nav`, e.g.:
 *
   <ul class="nav  nav--fit">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 * Thanks to @pimpl for this idea!
 */
.nav--fit {
  display: table;
  width: 100%; }
  .nav--fit > li {
    display: table-cell; }
    .nav--fit > li > a {
      display: block; }

/**
 * Make a list of keywords. Extends `.nav`, e.g.:
 *
   `<ul class="nav  nav--keywords>`
 *
 */
.nav--keywords > li:after {
  content: "\002C" "\00A0"; }
.nav--keywords > li:last-child:after {
  display: none; }

/* Start Superfine */
/*doc
# Superfine
-----------

<p class="doc-box doc-box--bright-highlight">For detailed information on how Superfine works, please read our [developer documentation](/developers.html) (we keep it concise).</p>

[Superfine](/superfine.html) is a collection of HTML/CSS (upcoming: JS!) components used to build web properties at Uber. It builds upon [uber.base](base.html) to create the Uber styleguide. In upcoming releases, [Superfine](/superfine.html) will include themes for internal and external use.

We currently depend upon [Bower](bower.io) for installation (we will move off of this very soon). To include in your own project, run:

<div>
  <pre class="language-bashprompt"><code>npm install git+ssh://gitolite@code.uber.internal:web/superfine.git#v0.1.2 --save</code></pre>
</div>

Then import the base file in your Sass file:

<div>
  <pre class="language-css"><code>@import "node_modules/superfine/superfine";</code></pre>
</div>

Include our typekit bundle with:

<div>
  <pre class="language-markup"><code>&lt;script type=&quot;text/javascript&quot; src=&quot;//use.typekit.net/jem5umq.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;try{Typekit.load();}catch(e){}&lt;/script&gt;</code></pre>
</div>

To include the icon font, link to the following CSS file:

<div>
  <pre class="language-markup"><code>&lt;link href="https://d1a3f4spazzrp4.cloudfront.net/uber-icons/0.12.0/uber-icons.css" rel="stylesheet"&gt;</code></pre>
</div>

We welcome your [comments](mailto:eng-web-platform@uber.com), [feature requests](https://code.uberinternal.com/maniphest/task/create/), and [pull requests](https://code.uberinternal.com/diffusion/WESUP/).
*/
/*doc
## Colors 
---------
*/
/*doc
### Brand Colors 

```html
<!-- no-show -->
<div class="doc-swatch doc-swatch--uber-black">$uber-black</div>
<div class="doc-swatch doc-swatch--uber-blue">$uber-blue</div>
<div class="doc-swatch doc-swatch--uber-white">$uber-white</div>
```

### Secondary Colors 

```html
<!-- no-show -->
<div class="doc-swatch doc-swatch--shadow-gray">$shadow-gray</div>
<div class="doc-swatch doc-swatch--dark-gray">$dark-gray</div>
<div class="doc-swatch doc-swatch--deep-gray">$deep-gray</div>
<div class="doc-swatch doc-swatch--mid-gray">$mid-gray</div>
<div class="doc-swatch doc-swatch--gray">$gray</div>
<div class="doc-swatch doc-swatch--light-gray">$light-gray</div>
<div class="doc-swatch doc-swatch--pale-gray doc-swatch--dark-text">$pale-gray</div>
<div class="doc-swatch doc-swatch--extra-pale-gray doc-swatch--dark-text">$extra-pale-gray</div>
<div class="doc-swatch doc-swatch--soft-white doc-swatch--dark-text">$soft-white</div>
<div class="doc-swatch doc-swatch--white">$white</div>
```

### Tertiary Colors 

```html
<!-- no-show -->
<div class="doc-swatch doc-swatch--green">$green</div>
<div class="doc-swatch doc-swatch--orange">$orange</div>
<div class="doc-swatch doc-swatch--pink">$pink</div>
```
*/
hr, .rule {
  border: none;
  border-top: 1px solid #e6e6e6;
  margin-bottom: 10px; }

/*doc
## Typography
-------------
*/
.primary-font, html, table thead th, .table thead th {
  font-family: ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400; }

.primary-font--semibold, h4, h5, h6, .text-input, .input-group, .select, .form-caption {
  font-weight: 500; }

.primary-font--bold, table thead th, .table thead th {
  font-weight: 600; }

.secondary-font, h1, h2, h3, .btn, .label {
  font-family: ff-clan-web-pro-wide, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400; }

.secondary-font--semibold, .btn, .label {
  font-weight: 500; }

.tertiary-font, .table--data {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300; }

.monospace-font, code, .code {
  font-family: monospace, serif;
  font-weight: normal; }

/*doc
```html
<h1>Heading 1 50px/58px</h1>
<h2>Heading 2 28px/35px</h2>
<h3>Heading 3 20px/30px</h3>
<h4>Heading 4 16px/24px</h4>
<h5>Heading 5 14px/20px</h5>
<h6>Heading 6 13px/18px</h6>
```
*/
h1 {
  margin-bottom: 48px; }

h2 {
  margin-bottom: 36px; }

h3 {
  margin-bottom: 24px; }

h4 {
  margin-bottom: 18px; }

h5 {
  margin-bottom: 16px; }

h6 {
  margin-bottom: 14px; }

h1, h2 {
  text-transform: uppercase; }

/*doc
```html
<p class="lead">Large/Lead Paragraph 18px/30px #333333. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum magna erat.</p>
<p>Default Paragraph 14px/24px #333333. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
<p class="legal">Legal Paragraph 12px/20px #999999. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica.</p>
<p class="code">Code Text in Monospace at 14px/24px #333333</p>
```
*/
.lead {
  font-size: 18px;
  font-size: 1.28571rem;
  line-height: 1.66667; }

.legal {
  font-size: 12px;
  font-size: 0.85714rem;
  line-height: 1.66667;
  color: #999999; }

code, .code {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1.71429; }

a, .link {
  color: #1fbad6; }

.link--unstyled, .pagination__item a, .pagination li a {
  color: #333333;
  text-decoration: none; }

/*doc
## Buttons
----------
*/
/*doc
### Button Types

```html
<div class="push-large--bottom">
  <button class="btn btn--primary">primary</button>
  <button class="btn btn--secondary">secondary</button>
  <button class="btn btn--tertiary">tertiary</button>
</div>
<div class="push-large--bottom">
  <button class="btn btn--positive">positive</button>
  <button class="btn btn--negative">negative</button>
  <button class="btn btn--inactive">inactive</button>
</div>
<button class="btn btn--outline">outline</button>
<button class="btn btn--outline">
  <i class="icon icon_plus"></i>
  outline with icon
</button>
<a class="btn btn--link" href="/">Link Button</a>
```
*/
.btn {
  text-transform: uppercase;
  border-radius: 3px;
  outline: none;
  font-size: 14px;
  font-size: 1rem;
  line-height: 1.21429; }
  .btn:hover {
    background-color: #40a8c2;
    border: 1px solid #40a8c2; }

.btn--secondary {
  background-color: gray;
  border: 1px solid gray; }
  .btn--secondary:hover {
    background-color: #999999;
    border: 1px solid #999999; }

.btn--tertiary {
  background-color: #f2f2f2;
  border: 1px solid #cccccc;
  color: gray; }
  .btn--tertiary:hover, .btn--tertiary:active, .btn--tertiary:focus {
    color: gray;
    background-color: #f7f7f7;
    border: 1px solid #cccccc; }

.btn--outline {
  background-color: transparent;
  border: 1px solid #1fbad6;
  color: #1fbad6; }
  .btn--outline:hover {
    background-color: #1fbad6;
    border: 1px solid #1fbad6; }

.btn--positive {
  background-color: #27aa0b;
  border: 1px solid #27aa0b; }
  .btn--positive:hover {
    background-color: #2ab80c;
    border: 1px solid #2ab80c; }

.btn--negative {
  background-color: #ed145b;
  border: 1px solid #ed145b; }
  .btn--negative:hover {
    background-color: #ef2c6c;
    border: 1px solid #ef2c6c; }

.btn--inactive {
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  color: #b2b2b2;
  cursor: default; }
  .btn--inactive:hover, .btn--inactive:active, .btn--inactive:focus {
    color: #b2b2b2;
    background-color: #f2f2f2;
    border: 1px solid #f2f2f2; }

.btn--link, .btn--link:hover {
  background-color: transparent;
  color: #1fbad6;
  border: 0;
  text-transform: none;
  font-weight: normal; }
  .btn--link:hover {
    text-decoration: underline; }

/*doc
### Button Sizes

```html
<div class="push-large--bottom">
  <button class="btn">default</button>
  <button class="btn btn--small">small</button>
  <button class="btn btn--large">large</button>
  <button class="btn btn--huge">huge</button>
</div>
<button class="btn btn--huge btn--full">full</button>
```
*/
.btn--small {
  padding: 0.5em 1.5em;
  font-size: 11px; }

.btn--large {
  padding: 1em 3em; }

.btn--huge {
  padding: 1.5em 3.5em; }

.btn--full {
  width: 100%; }

/*doc
## Form Elements
----------------
```html
<div class="layout">
  <div class="layout__item one-half">
    <h3>Radio Buttons</h3>
    <ul class="list--unstyled flush--bottom">
      <li>
        <input type="radio" id="radio-1" class="hidden" />
        <label class="radio" for="radio-1">Radio is off</label>
      </li>
      <li>
        <input type="radio" id="radio-2" class="hidden" checked="checked"/>
        <label class="radio" for="radio-2">Radio is on</label>
      </li>
      <li>
        <input type="radio" id="radio-3" class="hidden" disabled/>
        <label class="radio" for="radio-3">Disabled radio is off</label>
      </li>
      <li>
        <input type="radio" id="radio-4" class="hidden" checked="checked" disabled/>
        <label class="radio" for="radio-4">Disabled radio is on</label>
      </li>
    </ul>
  </div>
  <div class="layout__item one-half">
    <h3>Checkboxes</h3>
    <ul class="list--unstyled flush--bottom"> 
      <li>
        <input type="checkbox" id="checkbox-1" class="hidden" />
        <label class="checkbox" for="checkbox-1">Unchecked</label>
      </li>
      <li>
        <input type="checkbox" id="checkbox-2" class="hidden" checked="checked"/>
        <label class="checkbox" for="checkbox-2">Checked</label>
      </li>
      <li>
        <input type="checkbox" id="checkbox-3" class="hidden" disabled/>
        <label class="checkbox" for="checkbox-3">Disabled unchecked</label>
      </li>
      <li>
        <input type="checkbox" id="checkbox-3" class="hidden" checked="checked" disabled/>
        <label class="checkbox" for="checkbox-3">Disabled checked</label>
      </li>
    </ul>
  </div>
</div>
```
### Input Fields

```html
<label class="label" for="input-1">Default</label>
<input type="text" class="text-input" placeholder="Jane Doe" id="input-1" />

<label class="label" for="input-2">Error</label>
<input type="text" class="text-input error" placeholder="I'm sorry Dave, I'm afraid I can't do that." id="input-2" />

<label class="label" for="input-3">Disabled</label>
<input type="text" class="text-input" value="Jane Doe" id="input-3" disabled/>
```

### Select Boxes (dropdowns) 

``` html
<label class="label" for="select-1">Default</label>
<div class="select">
  <select id="select-1">
    <option value="1">uberX</option>
    <option value="2">Uber Black</option>
    <option value="3">Uber SUV</option>
  </select>
</div>

<label class="label" for="select-2">Error</label>
<div class="select error">
  <select id="select-2">
    <option value="1">uberX</option>
    <option value="2">Uber Black</option>
    <option value="3">Uber SUV</option>
  </select>
</div>

<label class="label" for="select-3">Disabled</label>
<div class="select disabled">
  <select id="select-3" disabled>
    <option value="1">uberX</option>
    <option value="2">Uber Black</option>
    <option value="3">Uber SUV</option>
  </select>
</div>
```

### Textarea

```html
<label class="label" for="textarea-1">Default</label>
<textarea rows="3" id="textarea-1" placeholder="Your Styleguide is arriving now." class="text-input"></textarea>

<label class="label" for="textarea-2">Error</label>
<textarea rows="3" id="textarea-2" placeholder="Your Styleguide is arriving now." class="text-input error"></textarea>

<label class="label" for="textarea-3">Disabled</label>
<textarea rows="3" id="textarea-3" placeholder="Your Styleguide is arriving now." class="text-input" disabled></textarea>
```

### Inputs with icons
```html
<label class="label" for="input-icon-1">Icon Right</label>
<div class="input-group">
  <input class="input-group__input" id="input-icon-1" placeholder="Search">
  <span class="icon icon_search input-group__icon"></span>
</div>

<label class="label" for="input-icon-2">Icon Left</label>
<div class="input-group">
  <span class="icon icon_search input-group__icon" id="input-icon-2"></span>
  <input class="input-group__input" placeholder="Search">
</div>

<label class="label" for="input-icon-3">Icon Left Disabled</label>
<div class="input-group disabled">
  <span class="icon icon_search input-group__icon" id="input-icon-3"></span>
  <input class="input-group__input" placeholder="Search" disabled>
</div>
```

## Forms
--------

Here's an example of a form using all of our styled elements. If you need a different form input, [let us know](mailto:web-platform@uber.com).

```html
<form class="form">
  <div class="form-group">
    <label class="label" for="first-name">Name</label>
    <div class="layout">
      <div class="layout__item one-half palm-one-whole">
        <input type="text" class="text-input" placeholder="First" id="first-name" />
      </div>
      <div class="layout__item one-half palm-one-whole">
        <input type="text" class="text-input" placeholder="Last" id="last-name" />
      </div>
    </div>
  </div>
  <div class="form-group">
    <label class="label" for="email">Email</label>
    <input type="email" class="text-input" placeholder="name@example.com" />
  </div>
  <div class="layout">
    <div class="layout__item one-half palm-one-whole">
      <div class="form-group">
        <label class="label" for="input-error">Error</label>
        <input type="email" class="text-input error" placeholder="name@example.com" id="input-error" />
        <div class="form-caption form-caption--error">This entry is invalid</div>
      </div>
    </div>
    <div class="layout__item one-half palm-one-whole">
      <div class="form-group">
        <label class="label" for="input-disabled">Disabled</label>
        <input type="email" class="text-input" value="name@example.com" id="input-disabled" disabled />
      </div>
    </div>
  </div>
  <div class="form-group push-small--bottom">
    <label class="label" for="country">Country</label>
    <div class="select">
      <select id="country">
        <option value="1">United States</option>
        <option value="2">United Kingdom</option>
      </select>
    </div>
  </div>
  <div class="layout">
    <div class="layout__item one-half palm-one-whole">
      <div class="form-group">
        <input type="checkbox" id="checkbox-1" class="hidden" />
        <label class="checkbox" for="checkbox-1">Unchecked</label>
      </div>
      <div class="form-group">
        <input type="checkbox" id="checkbox-2" class="hidden" checked />
        <label class="checkbox" for="checkbox-2">Checked</label>
      </div>
      <div class="form-group">
        <input type="checkbox" id="checkbox-3" class="hidden" disabled />
        <label class="checkbox" for="checkbox-3">Disabled Unchecked</label>
      </div>
      <div class="form-group">
        <input type="checkbox" id="checkbox-4" class="hidden" disabled checked />
        <label class="checkbox" for="checkbox-4">Disabled Checked</label>
      </div>
    </div>
    <div class="layout__item one-half palm-one-whole">
      <div class="form-group">
        <input type="radio" id="radio-5" class="hidden" />
        <label class="radio" for="radio-5">Radio is off</label>
      </div>
      <div class="form-group">
        <input type="radio" id="radio-6" class="hidden" checked />
        <label class="radio" for="radio-6">Radio is on</label>
      </div>
      <div class="form-group">
        <input type="radio" id="radio-6" class="hidden" disabled />
        <label class="radio" for="radio-6">Disabled radio is off</label>
      </div>
      <div class="form-group">
        <input type="radio" id="radio-7" class="hidden" disabled checked />
        <label class="radio" for="radio-7">Disabled radio is on</label>
      </div>
    </div>
  </div>
</form>
```
*/
/**
 * Form wrapper
 */
.form {
  max-width: 550px; }

.form--full {
  max-width: none; }

/**
 * Grouping of form fields
 */
.form-group {
  margin-bottom: 6px; }

/**
 * Input Groups
 */
.input-group .input-group__input {
  width: 100%;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer; }
.input-group .input-group__icon {
  width: 14px;
  color: #999999; }
  .input-group .input-group__icon:first-child {
    padding: 0 6px 0 0; }
  .input-group .input-group__icon:last-child {
    padding: 0 0 0 6px; }

/**
 * Labels
 */
.label {
  display: block;
  cursor: pointer;
  margin-bottom: 6px;
  font-size: 12px;
  color: #ffffff;
  text-transform: uppercase; }

/**
 * Base form controls
 * (text inputs, textareas, selects)
 */
.text-input, .input-group, .select {
  width: 100%;
  padding: 0.625em 0.75em;
  margin-bottom: 12px;
  background: white;
  border: 1px solid #cccccc;
  border-radius: 3px;
  outline: none;
  line-height: 1.25; }
  .text-input:hover, .input-group:hover, .select:hover {
    border-color: gray; }
  .text-input:focus, .input-group:focus, .select:focus {
    border-color: #1fbad6;
    -webkit-box-shadow: 0 0 5px 0 #71d8ea;
    -moz-box-shadow: 0 0 5px 0 #71d8ea;
    -ms-box-shadow: 0 0 5px 0 #71d8ea;
    -o-box-shadow: 0 0 5px 0 #71d8ea;
    box-shadow: 0 0 5px 0 #71d8ea; }
  .text-input:disabled, .input-group:disabled, .select:disabled, .select.disabled, .text-input.disabled, .disabled.input-group, .disabled.select {
    background: #f2f2f2;
    color: #999999; }
    .text-input:disabled:hover, .input-group:disabled:hover, .select:disabled:hover, .select.disabled:hover, .text-input.disabled:hover, .disabled.input-group:hover, .disabled.select:hover {
      border-color: #cccccc; }
  .text-input.error, .error.input-group, .error.select {
    border-color: #ed145b; }
    .text-input.error:focus, .error.input-group:focus, .error.select:focus {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      -ms-box-shadow: none;
      -o-box-shadow: none;
      box-shadow: none; }

/**
 * Textual inputs
 */
.text-input::-webkit-input-placeholder, .input-group::-webkit-input-placeholder, .select::-webkit-input-placeholder {
  color: #cccccc; }

.text-input::-moz-placeholder, .input-group::-moz-placeholder, .select::-moz-placeholder {
  color: #cccccc; }

.text-input:-ms-input-placeholder, .input-group:-ms-input-placeholder, .select:-ms-input-placeholder {
  color: #cccccc; }

/**
 * Select styles
 */
.select {
  padding: 0;
  position: relative; }
  .select:after {
    content: "▾";
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 0;
    margin: -18px 10px 0 0;
    color: #999999;
    font-size: 18px;
    font-size: 1.28571rem;
    line-height: 1.66667; }
  .select select {
    position: relative;
    width: 100%;
    padding: 0.625em 0.75em;
    z-index: 5;
    background: transparent;
    cursor: pointer;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    -moz-appearance: window;
    text-indent: 0.01px;
    text-overflow: ''; }

/**
 * Checkboxes and radios
 *
 * [1]: Vertically align the checkbox and label text
 */
.checkbox, .radio {
  display: inline-block;
  position: relative;
  padding-left: 36px;
  margin-bottom: 12px;
  line-height: 24px;
  vertical-align: middle;
  cursor: pointer; }
  .checkbox:before, .radio:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: white;
    border: 1px solid #cccccc;
    content: ""; }
  .checkbox:after, .radio:after {
    display: block;
    position: absolute;
    top: 7px;
    left: 7px;
    opacity: 0;
    content: "";
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg); }

.checkbox:after {
  width: 11px;
  height: 7px;
  border-bottom: 3px solid #2b2b2b;
  border-left: 3px solid #2b2b2b; }

.radio:before {
  border-radius: 100%; }
.radio:after {
  width: 10px;
  height: 10px;
  background: #1fbad6;
  border-radius: 100%; }

.checkbox:hover:before,
.radio:hover:before {
  border-color: gray; }
.checkbox:hover:after,
.radio:hover:after {
  opacity: 0.3; }

input[type="checkbox"]:checked + .checkbox:after,
input[type="radio"]:checked + .radio:after {
  opacity: 1; }

input[type="checkbox"]:disabled + .checkbox,
input[type="radio"]:disabled + .radio {
  cursor: default; }
  input[type="checkbox"]:disabled + .checkbox:before, input[type="checkbox"]:disabled + .checkbox:hover:before,
  input[type="radio"]:disabled + .radio:before,
  input[type="radio"]:disabled + .radio:hover:before {
    background: #f2f2f2;
    border-color: #cccccc; }
  input[type="checkbox"]:disabled + .checkbox:hover:after,
  input[type="radio"]:disabled + .radio:hover:after {
    opacity: 0; }

input[type="checkbox"]:disabled + .checkbox:after {
  border-color: #cccccc; }

input[type="radio"]:disabled + .radio:after {
  background: #cccccc; }

input[type="checkbox"]:disabled:checked + .checkbox:hover:after,
input[type="radio"]:disabled:checked + .radio:hover:after {
  opacity: 1; }

/**
 * Form Captions
 */
.form-caption {
  font-size: 12px;
  font-size: 0.85714rem;
  line-height: 1.16667;
  margin-top: -6px; }

.form-caption--error {
  color: #ed145b; }

/*doc
## Lists 
--------
*/
/*doc
### Basic Lists

```html
<div class="layout">
  <div class="layout__item one-quarter">
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </div>
  <div class="layout__item one-quarter">
    <ul class="list--unstyled">
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </div>
  <div class="layout__item one-quarter">
    <ol>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ol>
  </div>
  <div class="layout__item one-quarter">
    <ol class="list--unstyled">
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ol>
  </div>
</div>
```
### Horizontal Lists
Note: Internet Explorer and Opera won’t display list item numbers or bullets when list items are floated, given an explicit width, or set to display inline.

```html
<ul class="list--horizontal">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>
```
*/
ul, ol {
  margin-bottom: 36px;
  margin-left: 48px; }

.list--unstyled, .side-nav, .pagination {
  margin-left: 0;
  list-style: none; }

.list--horizontal li, .pagination li {
  display: inline-block; }

/*doc
## Tables 
---------
*/
/*doc
### Default Table (Horizontal Bordered)

```html
<table class="table--bordered table--bordered-horizontal">
  <tbody>
    <tr>
      <td>
        <a href="">Link Item</a>
      </td>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">0.00</td>
    </tr>
    <tr>
      <td>
        <a href="">Link Item</a>
      </td>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">0.15</td>
    </tr>
    <tr>
      <td>
        <a href="">Link Item</a>
      </td>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">0.33</td>
    </tr>
  </tbody>
</table>
```

### Data Table (Bordered)

```html
<table class="table--data table--bordered">
  <thead>
    <tr>
      <th>Item</th>
      <th>Item</th>
      <th>Item</th>
      <th class="numerical">&pound;0.00</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="">Link Item</a>
      </td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">&pound;0.12</td>
    </tr>
    <tr>
      <td>
        <a href="">Link Item</a>
      </td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">&pound;0.89</td>
    </tr>
    <tr>
      <td>
        <a href="">Link Item</a>
      </td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">&pound;0.40</td>
    </tr>
  </tbody>
</table>
```

### Data Table w/ Row Header (Striped + Bordered) 
<table class="table--bordered table--striped table--data">
  <thead>
    <tr>
      <th>Item</th>
      <th>Item</th>
      <th class="numerical">0.0000</th>
      <th>Item</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3">Item</th>
      <td>Item</td>
      <td class="numerical">0.0788</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td class="numerical">3.0210</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td class="numerical">4.0797</td>
      <td>Item</td>
    </tr>
    <tr>
      <th rowspan="2">Item</th>
      <td>Item</td>
      <td class="numerical">0.0640</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td class="numerical">1.0117</td>
      <td>Item</td>
    </tr>
  </tbody>
</table>

### Data Table w/ Checkboxes (Striped)

```html
<table class="table--striped table--data">
  <thead>
    <tr>
      <th width="20px"></th>
      <th>Item</th>
      <th>Item</th>
      <th>Item</th>
      <th class="numerical">$0.00</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="hidden" id="check6">
        <label class="checkbox" for="check6">&nbsp;</label>
      </td>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.01</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="hidden" id="check7">
        <label class="checkbox" for="check7">&nbsp;</label>
      </td>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.55</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="hidden" id="check8">
        <label class="checkbox" for="check8">&nbsp;</label>
      </td>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.38</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="hidden" id="check9">
        <label class="checkbox" for="check9">&nbsp;</label>
      </td>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.27</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="hidden" id="check10">
        <label class="checkbox" for="check10">&nbsp;</label>
      </td>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.33</td>
    </tr>
  </tbody>
</table>
```

### Small Data Table (Striped + Bordered) 

```html
<table class="table--bordered table--striped table--data table--small">
  <thead>
    <tr>
      <th>Item</th>
      <th>Item</th>
      <th>Item</th>
      <th class="numerical">$0.00</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.50</td>
    </tr>
    <tr>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.66</td>
    </tr>
    <tr>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.80</td>
    </tr>
    <tr>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.99</td>
    </tr>
    <tr>
      <td><a href="">Item</a></td>
      <td>Item</td>
      <td>Item</td>
      <td class="numerical">$0.10</td>
    </tr>
  </tbody>
</table>
```
*/
table, .table {
  width: 100%; }
  table th, table td, .table th, .table td {
    text-align: left;
    padding: 12px;
    border-color: #e6e6e6;
    color: #666666; }
    table th a, table td a, .table th a, .table td a {
      text-decoration: none; }
  table thead th, .table thead th {
    color: #09091a; }
  table thead tr, .table thead tr {
    border-bottom: solid 2px #b2b2b2; }
  table tbody tr:hover td, .table tbody tr:hover td {
    background-color: #efefef; }
  table .checkbox, .table .checkbox {
    margin-bottom: 0; }

.table--bordered tbody td, .table--bordered tbody th {
  border: 1px solid #e6e6e6; }

.table--bordered-horizontal tbody th, .table--bordered-horizontal tbody td, .table--bordered-horizontal thead th, .table--bordered-horizontal thead td {
  border-left: 0;
  border-right: 0; }

.table--striped tbody tr:nth-of-type(odd) {
  background-color: #fafafa; }

.table--data {
  font-size: 13px; }

.table--small th, .table--small td {
  padding: 6px 8px; }

.numerical {
  text-align: right; }

/* TODO: generate these because the icon font will change */
/*doc
## Icons
--------
*/
/*doc
```html
<div class="layout">
  <div class="layout__item one-third">
    <div class="icons__item" data-name="add-person"><i class="icon icon_add-person"></i> icon_add-person</div>
    <div class="icons__item" data-name="alert"><i class="icon icon_alert"></i> icon_alert</div>
    <div class="icons__item" data-name="calendar-2"><i class="icon icon_calendar-2"></i> icon_calendar-2</div>
    <div class="icons__item" data-name="calendar"><i class="icon icon_calendar"></i> icon_calendar</div>
    <div class="icons__item" data-name="cancel"><i class="icon icon_cancel"></i> icon_cancel</div>
    <div class="icons__item" data-name="car-black"><i class="icon icon_car-black"></i> icon_car-black</div>
    <div class="icons__item" data-name="car-suv"><i class="icon icon_car-suv"></i> icon_car-suv</div>
    <div class="icons__item" data-name="car-taxi"><i class="icon icon_car-taxi"></i> icon_car-taxi</div>
    <div class="icons__item" data-name="car-uberx"><i class="icon icon_car-uberx"></i> icon_car-uberx</div>
    <div class="icons__item" data-name="car"><i class="icon icon_car"></i> icon_car</div>
    <div class="icons__item" data-name="chart"><i class="icon icon_chart"></i> icon_chart</div>
    <div class="icons__item" data-name="check-circle"><i class="icon icon_check-circle"></i> icon_check-circle</div>
    <div class="icons__item" data-name="check"><i class="icon icon_check"></i> icon_check</div>
    <div class="icons__item" data-name="cloud"><i class="icon icon_cloud"></i> icon_cloud</div>
    <div class="icons__item" data-name="credit-card"><i class="icon icon_credit-card"></i> icon_credit-card</div>
    <div class="icons__item" data-name="delete"><i class="icon icon_delete"></i> icon_delete</div>
    <div class="icons__item" data-name="down-arrow-2"><i class="icon icon_down-arrow-2"></i> icon_down-arrow-2</div>
    <div class="icons__item" data-name="down-arrow-thin"><i class="icon icon_down-arrow-thin"></i> icon_down-arrow-thin</div>
    <div class="icons__item" data-name="down-arrow"><i class="icon icon_down-arrow"></i> icon_down-arrow</div>
    <div class="icons__item" data-name="download"><i class="icon icon_download"></i> icon_download</div>
  </div><!--
  --><div class="layout__item one-third">
    <div class="icons__item" data-name="email-sent"><i class="icon icon_email-sent"></i> icon_email-sent</div>
    <div class="icons__item" data-name="email"><i class="icon icon_email"></i> icon_email</div>
    <div class="icons__item" data-name="employees"><i class="icon icon_employees"></i> icon_employees</div>
    <div class="icons__item" data-name="facebook"><i class="icon icon_facebook"></i> icon_facebook</div>
    <div class="icons__item" data-name="fare-split"><i class="icon icon_fare-split"></i> icon_fare-split</div>
    <div class="icons__item" data-name="files"><i class="icon icon_files"></i> icon_files</div>
    <div class="icons__item" data-name="graph"><i class="icon icon_graph"></i> icon_graph</div>
    <div class="icons__item" data-name="help"><i class="icon icon_help"></i> icon_help</div>
    <div class="icons__item" data-name="id-card"><i class="icon icon_id-card"></i> icon_id-card</div>
    <div class="icons__item" data-name="key"><i class="icon icon_key"></i> icon_key</div>
    <div class="icons__item" data-name="left-arrow"><i class="icon icon_left-arrow"></i> icon_left-arrow</div>
    <div class="icons__item" data-name="linkedin"><i class="icon icon_linkedin"></i> icon_linkedin</div>
    <div class="icons__item" data-name="lost"><i class="icon icon_lost"></i> icon_lost</div>
    <div class="icons__item" data-name="map"><i class="icon icon_map"></i> icon_map</div>
    <div class="icons__item" data-name="menu"><i class="icon icon_menu"></i> icon_menu</div>
    <div class="icons__item" data-name="picture"><i class="icon icon_picture"></i> icon_picture</div>
    <div class="icons__item" data-name="plane"><i class="icon icon_plane"></i> icon_plane</div>
    <div class="icons__item" data-name="plus"><i class="icon icon_plus"></i> icon_plus</div>
    <div class="icons__item" data-name="profile"><i class="icon icon_profile"></i> icon_profile</div>
    <div class="icons__item" data-name="receipt"><i class="icon icon_receipt"></i> icon_receipt</div>
    <div class="icons__item" data-name="resend"><i class="icon icon_resend"></i> icon_resend</div>
  </div><!--
  --><div class="layout__item one-third">
    <div class="icons__item" data-name="reset"><i class="icon icon_reset"></i> icon_reset</div>
    <div class="icons__item" data-name="right-arrow-2"><i class="icon icon_right-arrow-2"></i> icon_right-arrow-2</div>
    <div class="icons__item" data-name="right-arrow"><i class="icon icon_right-arrow"></i> icon_right-arrow</div>
    <div class="icons__item" data-name="route-dot"><i class="icon icon_route-dot"></i> icon_route-dot</div>
    <div class="icons__item" data-name="search"><i class="icon icon_search"></i> icon_search</div>
    <div class="icons__item" data-name="settings"><i class="icon icon_settings"></i> icon_settings</div>
    <div class="icons__item" data-name="spinner"><i class="icon icon_spinner"></i> icon_spinner</div>
    <div class="icons__item" data-name="star"><i class="icon icon_star"></i> icon_star</div>
    <div class="icons__item" data-name="steering-wheel"><i class="icon icon_steering-wheel"></i> icon_steering-wheel</div>
    <div class="icons__item" data-name="stopwatch"><i class="icon icon_stopwatch"></i> icon_stopwatch</div>
    <div class="icons__item" data-name="support"><i class="icon icon_support"></i> icon_support</div>
    <div class="icons__item" data-name="surge"><i class="icon icon_surge"></i> icon_surge</div>
    <div class="icons__item" data-name="trash"><i class="icon icon_trash"></i> icon_trash</div>
    <div class="icons__item" data-name="trips"><i class="icon icon_trips"></i> icon_trips</div>
    <div class="icons__item" data-name="twitter"><i class="icon icon_twitter"></i> icon_twitter</div>
    <div class="icons__item" data-name="uber-u"><i class="icon icon_uber-u"></i> icon_uber-u</div>
    <div class="icons__item" data-name="uber"><i class="icon icon_uber"></i> icon_uber</div>
    <div class="icons__item" data-name="unstar"><i class="icon icon_unstar"></i> icon_unstar</div>
    <div class="icons__item" data-name="warning"><i class="icon icon_warning"></i> icon_warning</div>
  </div>
</div>
```
*/
/*doc
## Navigation
-------------
*/
/*doc
### Vertical

```html
<ul class="side-nav">
  <li class="active"><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
</ul>
```
*/
.side-nav__item a, .side-nav li a {
  text-decoration: none;
  color: #999999; }
.side-nav__item:hover, .side-nav li:hover, .side-nav__item.active, .side-nav li.active {
  border-left: 2px solid #1fbad6; }
  .side-nav__item:hover a, .side-nav li:hover a, .side-nav__item.active a, .side-nav li.active a {
    color: #09091a; }

/*doc
## Pagination 
----------
*/
/*doc
```html
  <ul class="pagination">
    <li><a href="/">Add</a></li>
    <li><a href="/">Edit</a></li>
    <li><a href="/">Delete</a></li>
  </ul>
  <ul class="pagination">
    <li><a href="/">Previous</a></li>
    <li><a href="/">Next</a></li>
  </ul>
  <ul class="pagination">
    <li><a href="/">Previous</a></li>
    <li><a href="/">1</a></li>
    <li><a href="/">2</a></li>
    <li class="active"><a href="">3</a></li>
    <li><a href="/">Next</a></li>
  </ul>
```
*/
.pagination__item, .pagination li {
  border: 1px solid #cccccc;
  border-right: 0; }
  .pagination__item a, .pagination li a {
    padding: 12px;
    color: #666666; }
  .pagination__item:hover, .pagination li:hover {
    background-color: #f2f2f2; }
  .pagination__item:active, .pagination li:active, .pagination__item.active, .pagination li.active {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
    background-color: #f2f2f2; }
  .pagination__item:first-child, .pagination li:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px; }
  .pagination__item:last-child, .pagination li:last-child {
    border-right: 1px solid #cccccc;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px; }

.pagination {
  font-size: 0; }

.pagination__item, .pagination li {
  font-size: 14px; }

.icon_uber {
  color: white;
  font-size: 23px; }

.icon-uber--small {
  font-size: 14px; }

a {
  text-decoration: none; }

strong, .white {
  color: white; }

.title {
  color: #40a8c2;
  font-size: 1.35em;
  text-transform: uppercase; }

hr {
  border: 0;
  border-bottom: 1px solid #464646; }

.text--capitalize {
  text-transform: capitalize; }

.label {
  color: #ffffff; }

.background-line {
  display: table;
  white-space: nowrap; }
  .background-line:before, .background-line:after {
    border-top: 1px solid #464646;
    content: '';
    display: table-cell;
    position: relative;
    top: 0.8em;
    width: 50%; }
  .background-line > span {
    padding: 0 20px;
    font-family: ff-clan-web-pro-wide, "Helvetica Neue", Helvetica, sans-serif; }

.login-error-title, .login-error {
  text-transform: uppercase;
  font-family: ff-clan-web-pro-wide, "Helvetica Neue", Helvetica, sans-serif;
  color: #ed145b; }

.login-error-title {
  font-size: 20px; }

.login-error {
  font-size: 16px; }

.text-input, .input-group, .select {
  height: 50px;
  font-size:16px;
  font-weight:bold;
  color: #1b5683; }

html, body {
  color: #000;
  background:#2b2b2b;

}

.content {
  margin: 0 auto;
  padding: 0px;
  max-width: 440px;
  margin-top:6%;
}

.btn--facebook {
  border-color: #5d7eb6;
  background-color: #5172ab;
  height: 57px;
  padding-top: 20px;
  background-size: 100% 100%;
  background-image: url(../images/facebook_line.554fd8e42c5eabbcabb9d85c9e79e4f8.png);
  background-position: 25px 0px;
  background-size: 38px 57px;
  background-repeat: no-repeat; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .btn--facebook {
      background-image: url(../images/facebook_line%402x.f2ac7edcbcef91aa8efa86fb68241395.png); } }
  .btn--facebook:hover {
    border-color: #5d7eb6;
    background-color: #5d7eb6; }

@media only screen and (max-width: 575px) {
  .btn--facebook {
    background-image: none; } .form-group { margin:0px 12px;} .btn--full {margin:0 12px; width:93%;}

}
.authorize-content {
  margin: 0 auto;
  max-width: 350px; }
  .authorize-content .btn--outline {
    border-color: #c0c0c8;
    color: #c0c0c8; }
    .authorize-content .btn--outline:hover {
      border-color: #1fbad6;
      color: white; }
  .authorize-content .btn--primary {
    margin-left: -10px; }

.authorize-lead {
  font-size: 15px; }

.scope {
  background-position: 0px 10px;
  background-repeat: no-repeat;
  font-size: 13px;
  line-height: 1.6em;
  padding-left: 50px; }

.scope-profile, .scope-ifttt {
  background-size: 100% 100%;
  background-image: url(../images/profile-icon.5401f491df4260738a936f1597b0daf8.png);
  background-size: 24px 24px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-profile, .scope-ifttt {
      background-image: url(../images/profile-icon%402x.89332e12795a255328bd76db6720d332.png); } }

.scope-history, .scope-history_fare, .scope-history_lite {
  background-size: 100% 100%;
  background-image: url(../images/activity-icon.79c9cc2561b0b2fdfa84718e4185dd20.png);
  background-size: 26px 19px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-history, .scope-history_fare, .scope-history_lite {
      background-image: url(../images/activity-icon%402x.72277c2a8724d4452a5b10b02813b2a7.png); } }

.scope-request {
  background-size: 100% 100%;
  background-image: url(../images/car-icon.576aeee66ef62e1be4830d7bb46c8d93.png);
  background-size: 29px 11px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-request {
      background-image: url(../images/car-icon%402x.fe442f8ab4fc5f34324620d1181e77cd.png); } }

.scope-payment_baidu_wallet {
  background-size: 100% 100%;
  background-image: url(../images/payment_baidu_wallet-icon.4849e9d335a091b4d3d0f3d5cb452e33.png);
  background-size: 26px 19px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-payment_baidu_wallet {
      background-image: url(../images/payment_baidu_wallet-icon%402x.7dc4464ca25021f2b4a5b73b10df07d9.png); } }

.scope-request_receipt {
  background-size: 100% 100%;
  background-image: url(../images/request_receipt-icon.ad0f122aa189d075e627095e1e035029.png);
  background-size: 19px 27px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-request_receipt {
      background-image: url(../images/request_receipt-icon%402x.026bb4b0f7f9c8ddb19e7fd7b557cf83.png); } }

.scope-surge_accept {
  background-size: 100% 100%;
  background-image: url(../images/surge_accept-icon.12841f6b6d88ef92456b4c99423a372d.png);
  background-size: 21px 26px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-surge_accept {
      background-image: url(../images/surge_accept-icon%402x.6d144710b2d299646dd8e93b8e7d52d8.png); } }

.scope-delivery {
  background-size: 100% 100%;
  background-image: url(../images/car-icon.576aeee66ef62e1be4830d7bb46c8d93.png);
  background-size: 29px 11px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-delivery {
      background-image: url(../images/car-icon%402x.fe442f8ab4fc5f34324620d1181e77cd.png); } }

.scope-delivery_sandbox {
  background-size: 100% 100%;
  background-image: url(../images/car-icon.576aeee66ef62e1be4830d7bb46c8d93.png);
  background-size: 29px 11px; }
  @media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5 / 4), (min-resolution: 120dpi) {
    .scope-delivery_sandbox {
      background-image: url(../images/car-icon%402x.fe442f8ab4fc5f34324620d1181e77cd.png); } }


    input[type=password]::-ms-reveal,
        input[type=password]::-ms-clear {
            display: none;
        }
		
		.logo {
			margin-top:50px;
		}
        .tooltip-inner {
            max-width: 200px;
            padding: 3px 8px;
            color: #ffffff;
            text-align: center;
            text-decoration: none;
            background-color: #D11919;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }
        .tooltip {
            position: absolute;
            z-index: 1020;
            display: block;
            visibility: visible;
            padding: 5px;
            font-size: 11px;
            opacity: 0;
            filter: alpha(opacity=0);
        }
            .tooltip.top .tooltip-arrow {
                bottom: 0;
                left: 50%;
                margin-left: -5px;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-top: 5px solid #000000;
            }
        .tooltip-arrow {
            position: absolute;
            width: 0;
            height: 0;
        }
        .tooltip.in {
            opacity: 0.8;
            filter: alpha(opacity=80);
        }
        .fade.in {
            opacity: 1;
        }
        .tooltip {
            position: absolute;
            z-index: 1020;
            display: block;
            visibility: visible;
            padding: 5px;
            font-size: 11px;
            opacity: 0;
            filter: alpha(opacity=0);
        }
        .fade {
            opacity: 0;
            -webkit-transition: opacity .15s linear;
            -o-transition: opacity .15s linear;
            transition: opacity .15s linear;
        }
        footer {
position: relative;
bottom: 0px;
padding: 0px;
margin: 0px;
width: 100%;
padding: 10px 0;
background: #000;
font-size: 11px;
text-align: center;
color: #fff;
}
        footer a.btn {
background: #2fe02b;
color: #ffffff;
position: relative;
padding: 7px 25px;
top: -20px;
font-size: 14px;
}
       
          #footer {
            background: #2d2d2d;
        }
        @media(min-width:481px) and (max-width:797px){
             #footer{
        position:fixed;
        bottom:0px;
        background:#2d2d2d;
    }
             .content{
                 margin-top:20% !important;
             }
            
        }
         @media (min-width:1600px) and (max-width:3000px) {
    #footer{
        position:fixed;
        bottom:0px;
        background:#2d2d2d;
    }
   
   
}
          .error {
            border: 1px solid #b94a48 !important;
        }

        ::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }   
        .header{
            background:#2d2d2d; width:100%;padding:20px 20px 20px 20px; z-index :1; position:fixed;text-align:center;
        }

        .header-logo{
            margin-top:3px;
        }
        .space{
            height:20px;
        }
        .alert-text{
            height: 60px; text-align: center;
        }
        .sign-text{
            padding-top:15px;
        }
        .login-pleasecheck{
            color: #008d4c;font-weight:bold;
        }
        .label-sign{
            color: red; font-weight: bold;
        }
        
        .forgot-text{
            color: #40a8c2;
        }
        .signup-text{
            color: #1a5682;
        }
        .mail-text{
            height:35px; margin-top:15px;
        }
        .reset-text{
            background:#40a8c2;
        }
        .login-text{
            color: #1a5682;
        }