@charset "UTF-8";
/**
 * Support old IE?
 *
 * This is mainly for a fallback pixel value for the rem unit. But this can
 * be used for many things.
 */
/**
 * Support old IE?
 *
 * This is mainly for a fallback pixel value for the rem unit. But this can
 * be used for many things.
 */
/**
 * Settings
 *
 * Global variables
 */
/* ==========================================================================
 * Colors
 * --------------------------------------------------------------------------
 * Global color variables.
 * ========================================================================== */
/**
 * Helper Grayscale
 *
 * Use these when you ned a shade of gray that's not part of the main brand
 * grayscale.
 */
/**
 * Brand grayscale
 *
 * Use these as often as possible. These are mostly used as background/text
 * colors.
 */
/**
 * Colors
 */
/**
 * Brand Colors
 */
/**
 * Links
 */
/**
 * Scafolding
 */
/**
 * Text color styles
 */
/**
 * Social media colors
 */
/* ==========================================================================
 * Global typography variables
 * --------------------------------------------------------------------------
 * These are font/text specific variables that are used throughout the
 * project.
 * ========================================================================== */
/**
 * Font families
 */
/**
 * Font sizes
 *
 * Can't decide how to name these. Lulz.
 */
/**
 * Font weights
 */
/**
 * Letter Spacing
 */
/**
 * Line heights
 */
/* ==========================================================================
 * #SPACING
 * --------------------------------------------------------------------------
 * Global spacing units used to add space between UI elements.
 *
 * Usage scale:
 *
 * *-micro
 * *-smallest
 * *-smaller
 * *-small
 * *-base
 * *-large
 * *-larger
 * *-largest
 * *-jumbo
 * ========================================================================== */
/* ==========================================================================
 * #BREAKPOINTS
 * --------------------------------------------------------------------------
 * These variables are used for media query breakpoints.
 * The breakpoint mixin uses these here: /bluprnt/sass/tools/breakpoint.scss
 * ========================================================================== */
/* ==========================================================================
 * Opacity
 * --------------------------------------------------------------------------
 * Opacity scale
 * ========================================================================== */
/* ==========================================================================
 * Border radius
 * --------------------------------------------------------------------------
 * Various sizes for border radius.
 * ========================================================================== */
/* ==========================================================================
 * Shadows
 * --------------------------------------------------------------------------
 * Box shadow scale. Only use one of these for drop shadow needs.
 * ========================================================================== */
/* ==========================================================================
 * z-index
 * --------------------------------------------------------------------------
 * Global z-index settings
 * ========================================================================== */
/**
 * z-index scale
 *
 * These are the only numbers/vars you should be using for z-index values.
 */
/**
 * Tools
 *
 * Mixins and functions
 */
/* ==========================================================================
 * #UNIT-CONVERSION
 * --------------------------------------------------------------------------
 * Mixins for converting units.
 * ========================================================================== */
/* ==========================================================================
   Em units
   ========================================================================== */
/* ==========================================================================
   Rem units
   ========================================================================== */
/**
 * Convert any px value into its rem equivalent.
 *
 * Usage:
 * rem($pixelValue)
 */
/* ==========================================================================
 * #LINE-HEIGHT
 * --------------------------------------------------------------------------
 * Mixin to generate a no unit line height..
 * ========================================================================== */
/**
 * Usage:
 *   line-height: lineHeight(30px);
 */
/* ==========================================================================
 * #UNIT-CONVERSION
 * --------------------------------------------------------------------------
 * Mixins for converting units.
 * ========================================================================== */
/* ==========================================================================
   Em units
   ========================================================================== */
/**
* Mixin to create a declaration whose value is a em unit.
*
* Usage:
.selector {
  @include em(padding, 10px);
}
*/
/* ==========================================================================
   Rem units
   ========================================================================== */
/**
 * Mixin to create a declaration whose value is a rem unit. Also provide pixel
 * fallback.
 *
 * Usage:
.selector {
  @include rem(padding, 10px);
}
 */
/* ==========================================================================
 * #FONT-SIZE
 * --------------------------------------------------------------------------
 * Mixin to generate a REM font size with a pixel fallback for older browsers.
 * ========================================================================== */
/**
 * Usage:
 *   @include font-size(20px, 28px);
 */
/* ==========================================================================
 * #CLEARFIX
 * --------------------------------------------------------------------------
 * Mixin to drop micro clearfix into a selector. Further reading:
 * http://www.cssmojo.com/the-very-latest-clearfix-reloaded/
 *
 * Usage:

.usage {
  @include clearfix();
}

 * ========================================================================== */
/* ==========================================================================
 * #BREAKPOINT
 * --------------------------------------------------------------------------
 * These mixins makes it easy to use media queries in your code. It uses the
 * variables defined in: bluprnt/sass/settings/_media-queries.scss
 *
 * Usage:

@include breakpointBetween(small, medium) {
  float: left;
}

@include breakpointUp(small) {
  float: left;
}

@include breakpointDown(small) {
  float: none;
}

 * ========================================================================== */
/**
 * Set size breakpoint mixin, for targeting a specific size only.
 */
/**
 * Min width breakpoint mixin, for targeting a specific size and up.
 */
/**
 * Max width breakpoint mixin, for targeting a specific size and down.
 */
/* ==========================================================================
 * #VERTICAL-ALIGN
 * --------------------------------------------------------------------------
 * Vertical align anything.
 * http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 *
 * Usage:
 * @include verticalAlign() or @include verticalAlign(absolute)
 * ========================================================================== */
/* ==========================================================================
 * #TRIANGLE
 * --------------------------------------------------------------------------
 * Mixin to generate a CSS triangle
 * ========================================================================== */
/**
 * Usage:
 *
 *  @include triangle(down, 10px, 6px, $color-grayLight);
 */
/**
 * The following values are used for the tooltips, for example.
 *
 * @include triangle(left, 12px, 8px, $color-grayLight);
 * @include triangle(right, 12px, 8px, $color-grayLight);
 * @include triangle(up, 10px, 6px, $color-grayLight);
 * @include triangle(down, 10px, 6px, $color-grayLight);
 */
/* ==========================================================================
 * #BBICONFONT
 * --------------------------------------------------------------------------
 * Mixin to include basic styles needed to use an icon font.
 *
 * Usage:

&::before {
  @include bbIconFont;

  content: "\e901";
}

 * ========================================================================== */
/**
 * Generic
 *
 * Resets and normalize.
 */
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *  IE on Windows Phone and in iOS.
 */
/* Document
   ========================================================================== */
html {
  /* 1 */
  font-family: sans-serif;
  /* 2 */
  line-height: 1.15;
  /* 3 */
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: .67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}

i {
  font-style: normal;
}

abbr[title] {
  border-bottom: 0;
  text-decoration: underline;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

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

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
  cursor: pointer;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input:focus,
textarea:focus {
  outline: 0;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *  controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *  `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

[type="password"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

/**
* Prevent margin and border from affecting element width.
* https://goo.gl/pYtbK7
*/
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/**
 * A simple reset that sits on top of Normalize.css.
 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
pre,
dl,
dd,
ol,
ul,
figure,
hr,
fieldset,
legend {
  margin: 0;
  padding: 0;
}

/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */
iframe {
  border: 0;
}

/**
 * Shared declarations for certain elements.
 */
/**
 * 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
 */
/* stylelint-disable selector-list-comma-newline-after */
address,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
pre,
dl,
ol,
ul,
figure,
hr,
table,
fieldset {
  margin-bottom: 1.25rem;
}

/**
 * Consistent indentation for lists.
 */
dd,
ol,
ul {
  margin-left: 1.25rem;
}

/**
 * Elements
 *
 * Default, unclassed elements
 */
html {
  font-size: 87.5%;
}

@media (min-width: 360px) {
  html {
    font-size: 93.8%;
  }
}

@media (min-width: 840px) {
  html {
    font-size: 100%;
  }
}

body {
  font-size: 1rem;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.625;
  background-color: #fff;
  color: #111;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-rendering: optimizeLegibility;
}

/** ==========================================================================
 * Typography
 * --------------------------------------------------------------------------
 * Global default type styles.
 * ========================================================================== */
/*
   Headings
   ========================================================================== */
/**
 * Classes are used here for convence sake. This should be the only place in
 * /elements that contains classes.
 */
h1,
h2,
h3,
h4,
h5,
h6,
.u-h1,
.u-h2,
.u-h3,
.u-h4,
.u-h5,
.u-h6,
.heading {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}

h1,
.u-h1 {
  font-size: 2.375rem;
  line-height: 1.21053;
  margin-top: 0;
}

h2,
.u-h2 {
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 300;
}

h3,
.u-h3 {
  font-size: 1.5rem;
  line-height: 1.33333;
  text-transform: uppercase;
  letter-spacing: .09375rem;
  margin-bottom: .625rem;
}

h4,
.u-h4 {
  font-size: 1.125rem;
  line-height: 1.44444;
  letter-spacing: .03125rem;
  margin-bottom: .625rem;
}

h5,
.u-h5 {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: .01875rem;
  margin-bottom: .625rem;
}

h6,
.u-h6 {
  font-size: .9375rem;
  line-height: 1.53333;
  letter-spacing: .01875rem;
  margin-bottom: .625rem;
}

/*
   Paragraphs
   ========================================================================== */
a {
  color: #0083db;
  text-decoration: none;
  transition: all 250ms ease-out;
}

a:hover {
  color: #00558f;
}

/**
 * Remove trailing margins from nested lists.
 */
li > ol,
li > ul {
  margin-bottom: 0;
}

ol,
ul {
  padding-left: 0;
  margin-top: 0;
  list-style-position: outside;
}

ul {
  padding-left: 0;
  margin-top: 0;
  list-style: disc;
}

ul ul,
ul ol {
  font-size: 95%;
}

ol {
  list-style: decimal;
}

ol ol,
ol ul {
  font-size: 95%;
}

dl {
  margin-bottom: .625rem;
}

dt {
  margin: .625rem 0;
}

dd {
  margin-left: 0;
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

.table th,
.table td {
  padding: 20px;
  vertical-align: top;
  text-align: left;
}

.table thead th {
  vertical-align: bottom;
}

table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
  border-spacing: 0;
}

table th,
table td {
  vertical-align: top;
  text-align: left;
}

table thead th {
  vertical-align: bottom;
}

label {
  display: inline-block;
}

legend {
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
}

input[type="checkbox"],
input[type="radio"] {
  display: inline;
  padding: 0;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  cursor: not-allowed;
}

textarea {
  overflow: auto;
  min-height: 4.0625rem;
  resize: vertical;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/**
 * Suppress the focus outline on elements that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */
[tabindex="-1"]:focus {
  outline: none !important;
}

input[type="search"] {
  -webkit-appearance: none;
}

/* ==========================================================================
   #IMAGES
   ========================================================================== */
/**
 * 1. Fluid images for responsive purposes.
 * 2. Offset `alt` text from surrounding copy.
 * 3. Setting `vertical-align` removes the whitespace that appears under `img`
 *    elements when they are dropped into a page as-is. Safer alternative to
 *    using `display: block;`.
 */
img {
  max-width: 100%;
  /* [1] */
  height: auto;
  font-style: italic;
  /* [2] */
  vertical-align: middle;
  /* [3] */
  -ms-interpolation-mode: bicubic;
}

/**
 * 1. 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;
}

/**
 * Get rid of gap under images by making them display: inline-block; by default
 */
a img {
  display: inline-block;
}

/**
 * Objects
 *
 * Non cosmetic, structural classes. Helps reduce duplicate code.
 */
/* ==========================================================================
 * #WRAPPER
 * ========================================================================== */
.o-wrapper {
  margin: 0 auto;
  padding: 0 calc(.5 * 20px);
  max-width: 1200px;
}

/**
 * Use the o-wrapper object to wrap elements not utilizing the grid.
 *
 * Esample:
 *
<div class="o-wrapper">
  My stuff here
</div>
 *
 */
.o-wrapper:after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

/* ==========================================================================
 * #GRID-FLEX
 * --------------------------------------------------------------------------
 * A responsive grid system based on Flexbox.
 * ========================================================================== */
/**
 * Core grid component
 *
 * DO NOT apply dimension or offset utilities to the `o-grid` element. All cell
 * widths and offsets should be applied to child grid columns.
 */
/* Grid container
   ========================================================================== */
/**
 * All content must be contained within child `o-grid-cell` elements.
 *
 * 1. Account for browser defaults of elements that might be the root node of
 *    the component.
 */
.o-grid {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
}

.o-grid > .o-grid-cell {
  padding: 0 calc(.5 * 20px);
}

.o-grid .o-grid {
  margin-left: calc(-.5 * 20px);
  margin-right: calc(-.5 * 20px);
}

/**
 * Modifier: Make grid span the width of the browser window.
 */
.o-grid--full {
  max-width: 100%;
}

/**
 * Modifier: center align all grid columns
 */
.o-grid--alignCenter {
  -ms-flex-pack: center;
  justify-content: center;
}

/**
 * Modifier: right align all grid columns
 */
.o-grid--alignRight {
  -ms-flex-pack: end;
  justify-content: flex-end;
}

/**
 * Modifier: left align all grid columns
 */
.o-grid--alignLeft {
  -ms-flex-pack: start;
  justify-content: flex-start;
}

/**
 * Modifier: middle-align grid columns
 */
.o-grid--alignTop {
  -ms-flex-align: start;
  align-items: flex-start;
}

/**
 * Modifier: middle-align grid columns
 */
.o-grid--alignMiddle {
  -ms-flex-align: center;
  align-items: center;
}

/**
 * Modifier: bottom-align grid columns
 */
.o-grid--alignBottom {
  -ms-flex-align: end;
  align-items: flex-end;
}

/**
 * Modifier: allow columns to equally distribute width.
 *
 * 1. Provide all values to avoid IE10 bug with shorthand flex
 *    http://git.io/vllC7
 *
 *    Use `0%` to avoid bug in IE10/11 with unitless flex basis
 *    http://git.io/vllWx
 */
.o-grid--autoFit > .o-grid-cell {
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  /* 1 */
}

@media (min-width: 360px) {
  .o-sm-grid--autoFit > .o-grid-cell {
    -ms-flex: 1 1 0;
    flex: 1 1 0;
    /* 1 */
  }
}

@media (min-width: 600px) {
  .o-md-grid--autoFit > .o-grid-cell {
    -ms-flex: 1 1 0;
    flex: 1 1 0;
    /* 1 */
  }
}

@media (min-width: 840px) {
  .o-lg-grid--autoFit > .o-grid-cell {
    -ms-flex: 1 1 0;
    flex: 1 1 0;
    /* 1 */
  }
}

/**
 * Modifier: all columns match height of tallest cell in a row.
 */
.o-grid--equalHeight > .o-grid-cell {
  display: -ms-flexbox;
  display: flex;
}

/**
 * Modifier: Remove gutters in the grid columns.
 */
.o-grid--noGutter {
  padding: 0;
}

.o-grid--noGutter > .o-grid-cell {
  padding: 0;
}

/* Grid cell
   ========================================================================== */
/**
 * No explicit width by default. Rely on combining `o-grid-cell` with a dimension
 * utility or a component class that extends 'o-grid'.
 *
 * 1. Set flex items to full width by default
 * 2. Fix issue where elements with overflow extend past the
 *    `Grid-cell` container - https://git.io/vw5oF
 */
.o-grid-cell {
  box-sizing: inherit;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  /* 1 */
  min-width: 0;
  /* 2 */
}

.o-grid-cell--top {
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.o-grid-cell--bottom {
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.o-grid-cell--middle {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

/**
 * Modifier: horizontally center one unit
 * Set a specific unit to be horizontally centered. Doesn't affect
 * any other units. Can still contain a child `Grid` object.
 */
.o-grid-cell--center {
  margin: 0 auto;
}

/* ==========================================================================
   #BOX
   ========================================================================== */
/**
 * The box object simply boxes off content. Extend with cosmetic styles in the
 * Components layer or through utility classes.
 *
 * 1. So we can apply the `.o-box` class to naturally-inline elements.
 */
.o-box {
  display: block;
  /* [1] */
  padding: 20px;
}

.o-box:after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

.o-box > :last-child {
  margin-bottom: 0;
}

/*
   Padding Directional variants. Extends `o-box`.
   ========================================================================== */
.o-box--y {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.o-box--x {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Padding Size variants. Extends `o-box`.
   ========================================================================== */
.o-box--flush {
  padding: 0;
}

.o-box--tightest {
  padding: 2px;
}

.o-box--tighter {
  padding: 5px;
}

.o-box--tight {
  padding: 10px;
}

.o-box--loose {
  padding: 30px;
}

.o-box--looser {
  padding: 40px;
}

.o-box--loosest {
  padding: 50px;
}

.o-box--huge {
  padding: 60px;
}

/*
   Responsive Variants. Extends `o-box`.
   ========================================================================== */
@media (min-width: 360px) {
  .o-sm-box--flush {
    padding: 0;
  }
  .o-sm-box--tightest {
    padding: 2px;
  }
  .o-sm-box--tighter {
    padding: 5px;
  }
  .o-sm-box--tight {
    padding: 10px;
  }
  .o-sm-box--loose {
    padding: 30px;
  }
  .o-sm-box--looser {
    padding: 40px;
  }
  .o-sm-box--loosest {
    padding: 50px;
  }
  .o-sm-box--huge {
    padding: 60px;
  }
}

@media (min-width: 600px) {
  .o-md-box--flush {
    padding: 0;
  }
  .o-md-box--tightest {
    padding: 2px;
  }
  .o-md-box--tighter {
    padding: 5px;
  }
  .o-md-box--tight {
    padding: 10px;
  }
  .o-md-box--loose {
    padding: 30px;
  }
  .o-md-box--looser {
    padding: 40px;
  }
  .o-md-box--loosest {
    padding: 50px;
  }
  .o-md-box--huge {
    padding: 60px;
  }
}

@media (min-width: 840px) {
  .o-lg-box--flush {
    padding: 0;
  }
  .o-lg-box--tightest {
    padding: 2px;
  }
  .o-lg-box--tighter {
    padding: 5px;
  }
  .o-lg-box--tight {
    padding: 10px;
  }
  .o-lg-box--loose {
    padding: 30px;
  }
  .o-lg-box--looser {
    padding: 40px;
  }
  .o-lg-box--loosest {
    padding: 50px;
  }
  .o-lg-box--huge {
    padding: 60px;
  }
}

/* ==========================================================================
   #LIST-BARE
   ========================================================================== */
/**
 * Strip list-like appearance from lists by removing their bullets, and any
 * indentation.
 */
.o-listReset {
  list-style: none;
  margin-left: 0;
}

/* ==========================================================================
   #LIST-INLINE
   ========================================================================== */
/**
 * The list-inline object simply displays a list of items in one line.
 */
.o-listInline {
  margin-left: 0;
  list-style: none;
}

.o-listInline-item {
  display: inline-block;
}

/* ==========================================================================
   #PACK
   ========================================================================== */
/**
 * The pack object simply causes any number of elements pack up horizontally to
 * automatically fill an equal, fluid width of their parent.
 *
 * 1. Fill all available space.
 * 2. Remove any leftover styling from lists.
 * 3. Cause children to be automatically equally sized.
 *
 * Example:
 *  Create a barebones navigation bar by combining it with o-listBare.
 *
<ul class="list  o-pack">
  <li class="o-pack-item"><a href="#">Home</a></li>
  <li class="o-pack-item"><a href="#">About</a></li>
  <li class="o-pack-item"><a href="#">Portfolio</a></li>
  <li class="o-pack-item"><a href="#">Contact</a></li>
</ul>
 *
 */
.o-pack {
  width: 100%;
  /* [1] */
  margin-left: 0;
  /* [2] */
  display: table;
  table-layout: fixed;
  /* [3] */
}

/**
 * 1. Cause children to adopt table-like structure.
 * 2. Default item alignment is with the tops of each other.
 */
.o-pack-item {
  display: block;
  /**
   * Modifiers: Vertical alignment variants.
   */
}

@media (min-width: 360px) {
  .o-pack-item {
    display: table-cell;
    vertical-align: top;
  }
}

.o-pack--middle > .o-pack-item {
  vertical-align: middle;
}

.o-pack--bottom > .o-pack-item {
  vertical-align: bottom;
}

/**
 * Modifier: Unequal-width items.
 */
.o-pack--auto {
  table-layout: auto;
}

/* Modifier: Size variants.
   ========================================================================== */
.o-pack--smallest {
  border-spacing: 2px;
}

.o-pack--smaller {
  border-spacing: 5px;
}

.o-pack--small {
  border-spacing: 10px;
}

.o-pack--large {
  border-spacing: 30px;
}

.o-pack--larger {
  border-spacing: 40px;
}

/* Modifier: Reversed order.
   ========================================================================== */
/* ==========================================================================
 * Ratio - Flexible media embeds
 * --------------------------------------------------------------------------
 * For use with media embeds – such as videos, slideshows, or even images –
 * that need to retain a specific aspect ratio but adapt to the width of their
 * containing element.
 *
 * Based on: http://alistapart.com/article/creating-intrinsic-ratios-for-video
 *
 * Example:
 *
 <div class="o-ratio  o-ratio--16x9">
   <div class="o-ratio-item">
     <!-- stuff -->
   </div>
 </div>
 * ========================================================================== */
/**
 * Generates the proper percentage for aspect ratios.
 *
 * Usage:
 * padding-bottom: getRatio(16, 9);
 */
/**
 * Default aspect ratio is 1:1.
 */
.o-ratio {
  position: relative;
  display: block;
  overflow: hidden;
  /**
 * Fit the content to the aspect ratio
 */
}

.o-ratio:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
}

.o-ratio > embed,
.o-ratio > iframe,
.o-ratio > object,
.o-ratio > video,
.o-ratio > img,
.o-ratio .o-ratio-item {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/*
   Modifiers
   ========================================================================== */
/**
* Modifier: 2:1 aspect ratio
*/
.o-ratio--2x1:before {
  padding-bottom: 50%;
}

/**
* Modifier: 3:1 aspect ratio
*/
.o-ratio--3x1:before {
  padding-bottom: 33.33333%;
}

/**
* Modifier: 4:3 aspect ratio
*/
.o-ratio--4x3:before {
  padding-bottom: 75%;
}

/**
* Modifier: 16:9 aspect ratio
*/
.o-ratio--16x9:before {
  padding-bottom: 56.25%;
}

/**
 * Components
 *
 * Damn near everything else. Fully styled UI modules, sections, etc.
 */
/* ==========================================================================
   $ICONS
   ========================================================================== */
@font-face {
  font-family: "bluebeam-icons";
  src: url("../fonts/bluebeam-icons.ttf?tlonox") format("truetype"), url("../fonts/bluebeam-icons.woff?tlonox") format("woff"), url("../fonts/bluebeam-icons.svg?tlonox#bluebeam-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

/*
   Core styles
   ========================================================================== */
.icon {
  font-size: 1.5rem;
  font-family: "bluebeam-icons" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  letter-spacing: normal;
  display: inline-block;
  line-height: 1;
  word-wrap: normal;
  white-space: nowrap;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: "liga";
}

/*
   Modifier: Icon type
   ========================================================================== */
.icon--angleRightCircle:before {
  content: "";
}

.icon--checkCircle:before {
  content: "";
}

.icon--arrowDropDown:before {
  content: "";
}

.icon--arrowDropUp:before {
  content: "";
}

.icon--block:before {
  content: "";
}

.icon--check:before {
  content: "";
}

.icon--close:before {
  content: "";
}

.icon--errorCircle:before {
  content: "";
}

.icon--arrowUp:before {
  content: "";
}

.icon--arrowDown:before {
  content: "";
}

.icon--infoCircle:before {
  content: "";
}

.icon--arrowLeft:before {
  content: "";
}

.icon--arrowRight:before {
  content: "";
}

.icon--playCircle:before {
  content: "";
}

.icon--search:before {
  content: "";
}

.icon--cart:before {
  content: "";
}

.icon--mail:before {
  content: "";
}

.icon--facebook:before {
  content: "";
}

.icon--instagram:before {
  content: "";
}

.icon--linkedin:before {
  content: "";
}

.icon--twitter:before {
  content: "";
}

.icon--vine:before {
  content: "";
}

.icon--youtube:before {
  content: "";
}

/*
   Modifier: Icon size
   ========================================================================== */
.icon--sm {
  font-size: 1rem;
}

.icon--lg {
  font-size: 2rem;
}

.icon--xl {
  font-size: 3rem;
}

.icon--xxl {
  font-size: 4rem;
}

/* ==========================================================================
 * .icon
 * --------------------------------------------------------------------------
 * Icons generated from gulp task `sprites`, pulled from /imgs/*
 * If you add more make sure to rerun gulp task and get generated
 * located here: /svg/
 * ========================================================================== */
.featureIcon {
  font-size: 20px;
}

.featureIcon:before {
  content: " ";
  vertical-align: middle;
  display: inline-block;
  background-image: url("../imgs/features/sprite.svg");
  background-repeat: no-repeat;
  background-size: 3.2em 83.2em;
}

.no-svg .featureIcon:before {
  background-image: url("../imgs/features/sprite.png");
}

/*
   Modifiers: Icon types
   ========================================================================== */
.featureIcon--3dPdfs:before {
  background-position: 0 0;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--batchSlipSheet:before {
  background-position: 0 -3.2em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--compareDocs:before {
  background-position: 0 -6.4em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--compareDocuments:before {
  background-position: 0 -9.6em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--customization:before {
  background-position: 0 -12.8em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--fileAccess:before {
  background-position: 0 -16em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--integration:before {
  background-position: 0 -19.2em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--legends:before {
  background-position: 0 -22.4em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--markupsList:before {
  background-position: 0 -25.6em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--measure:before {
  background-position: 0 -28.8em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--navigate:before {
  background-position: 0 -32em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--ocr:before {
  background-position: 0 -35.2em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--overlayPages:before {
  background-position: 0 -38.4em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--pdfCreation:before {
  background-position: 0 -41.6em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--pdfEditing:before {
  background-position: 0 -44.8em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--pdfForms:before {
  background-position: 0 -48em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--pin:before {
  background-position: 0 -51.2em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--redaction:before {
  background-position: 0 -54.4em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--scripts:before {
  background-position: 0 -57.6em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--search:before {
  background-position: 0 -60.8em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--security:before {
  background-position: 0 -64em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--sets:before {
  background-position: 0 -67.2em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--sketchTools:before {
  background-position: 0 -70.4em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--structures:before {
  background-position: 0 -73.6em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--studio:before {
  background-position: 0 -76.8em;
  width: 3.2em;
  height: 3.2em;
}

.featureIcon--toolChest:before {
  background-position: 0 -80;
  width: 3.2em;
  height: 3.2em;
}

/**
 * Horizontal rules, extend `hr`.
 *
 * Example:
 *
<hr class="rule">
 *
 * Change the color and/or width of a rule with a utility classes:
 *
<hr class="rule  u-colorGrayDark  u-border3">
 *
 */
hr,
.rule {
  margin-bottom: 1.25rem;
  color: #e6e6e6;
  border: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

/**
 * Modifier: Dotted rules. Extends `.rule`
 *
<hr class="rule  rule--dotted">
 *
 */
/**
 * Modifier: Dashed rules. Extends `.rule`
 *
<hr class="rule  rule--dashed">
 */
/**
 * Ornamental rules. Places a § over the rule. Extends `.rule`
 *
<hr class="rule  rule--ornament">
 */
/* ==========================================================================
 * Button
 * -----------------------------------------------------------------------------
 * The button classes are best applied to links and buttons.
 * These components can be used in forms, as calls to action, or as part of the
 * general UI of the website.
 * ========================================================================== */
/*
   Settings
   ========================================================================== */
/*
   Core styles
   ========================================================================== */
.button {
  background-color: #f7f7f7;
  border: 1px solid #c4c4c4;
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  margin: 0;
  padding: .8125em 1em;
  position: relative;
  text-align: center;
  text-decoration: none;
  font: inherit;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .9375em;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .3px;
  transition: all 150ms ease-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  transform: translateZ(0);
}

.button:-moz-focus-inner {
  border: 0;
  padding: 0;
}

.button:hover,
.button:active {
  text-decoration: none;
  background-color: #e6e6e6;
}

.button:disabled,
.button.is-disabled {
  cursor: not-allowed;
  opacity: .6;
  color: #999;
  border-color: #999;
  background-color: #e6e6e6;
}

.button:disabled:hover,
.button.is-disabled:hover {
  color: #999;
  -ms-transform: translateY(0) !important;
  transform: translateY(0) !important;
  box-shadow: none !important;
  background-color: #e6e6e6;
  border-color: #999;
}

.button .icon {
  top: -1px;
  position: relative;
  line-height: inherit;
  vertical-align: middle;
}

/*
   Size modifiers
   ========================================================================== */
/**
 * These extend the core `button` class. They must be used *with* the `button` class.
 * Example: <a class="button  button--xs" href="#">click here</a>
 */
.button--xs {
  font-size: 72%;
  padding: .625em;
}

.button--sm {
  font-size: 90%;
  padding: .625em .875em;
}

.button--lg {
  font-size: 110%;
  padding: 1em 1.25em;
}

.button--xl {
  font-size: 130%;
  padding: 1.25em 1.5em;
}

/*
   Button icons
   ========================================================================== */
/*
   Color modifiers
   ========================================================================== */
.button--primary {
  background-color: #0083db;
  border-color: #0083db;
  color: #fff;
}

.button--primary.button--iconOnly > svg {
  fill: #fff;
  display: block;
}

.button--primary:hover {
  background-color: #00579c;
  border-color: #00579c;
  color: #fff;
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .06), 0 3px 6px rgba(0, 0, 0, .13);
}

.button--primary:active {
  -ms-transform: scale(.99);
  transform: scale(.99);
}

.button--secondary {
  background-color: #8bc34a;
  border-color: #8bc34a;
  color: #fff;
}

.button--secondary.button--iconOnly > svg {
  fill: #fff;
  display: block;
}

.button--secondary:hover {
  background-color: #689f38;
  border-color: #689f38;
  color: #fff;
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .06), 0 3px 6px rgba(0, 0, 0, .13);
}

.button--secondary:active {
  -ms-transform: scale(.99);
  transform: scale(.99);
}

.button--altDark,
.button--alt {
  background-color: #4d4d4d;
  border-color: #4d4d4d;
  color: #fff;
}

.button--altDark.button--iconOnly > svg,
.button--alt.button--iconOnly > svg {
  fill: #fff;
  display: block;
}

.button--altDark:hover,
.button--alt:hover {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .06), 0 3px 6px rgba(0, 0, 0, .13);
}

.button--altDark:active,
.button--alt:active {
  -ms-transform: scale(.99);
  transform: scale(.99);
}

.button--link {
  background-color: transparent;
  border-color: transparent;
  color: #0083db;
  background: transparent !important;
}

.button--link.button--iconOnly > svg {
  fill: #0083db;
  display: block;
}

.button--link:hover {
  background-color: transparent;
  border-color: transparent;
  color: #00558f;
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .06), 0 3px 6px rgba(0, 0, 0, .13);
}

.button--link:active {
  -ms-transform: scale(.99);
  transform: scale(.99);
}

/*
   Social Buttons
   ========================================================================== */
.button--social {
  color: #fff !important;
  background-color: #999;
  border: none;
}

.button--social .icon {
  width: 18px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.button--social:hover {
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .06), 0 3px 6px rgba(0, 0, 0, .13);
}

.button--facebook:hover {
  background-color: #3b5998;
}

.button--twitter:hover {
  background-color: #55acee;
}

.button--youtube:hover {
  background-color: #e62117;
}

.button--linkedin:hover {
  background-color: #0077b5;
}

.button--instagram:hover {
  background-color: #bc2a8d;
}

.cta {
  font-size: .9375rem;
}

.cta:after {
  font-size: 1.25rem;
  font-family: "bluebeam-icons" !important;
  vertical-align: middle;
  line-height: 1;
  content: "\e900";
  display: inline-block;
  margin-left: .3125rem;
  position: relative;
  transition: margin-left 150ms ease-out;
}

.cta:hover:after {
  margin-left: .625rem;
}

/* ==========================================================================
   #TABLE
   ========================================================================== */
/*
   Variables
   ========================================================================== */
/*
   Core styles
   ========================================================================== */
.table--sm th,
.table--sm td {
  padding: 10px;
}

.table--xs th,
.table--xs td {
  padding: 5px;
}

.table--bordered {
  border: 1px solid #e6e6e6;
}

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

.table--bordered thead th,
.table--bordered thead td {
  border-bottom-width: 2px;
}

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

/* Equal-width table cells.
   ========================================================================== */
/**
 * `table-layout: fixed` forces all cells within a table to occupy the same
 * width as each other. This also has performance benefits: because the browser
 * does not need to (re)calculate cell dimensions based on content it discovers,
 * the table can be rendered very quickly. Further reading:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
 */
.table--fixed {
  table-layout: fixed;
}

/* Responsive tables
   ========================================================================== */
.table--responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  min-height: 0;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.table--responsive.table-bordered {
  border: 0;
}

/* ==========================================================================
   #LIST
   ========================================================================== */
/*
   Core list styles
   ========================================================================== */
/**
 * Remove margin left and get rid of the bullets by default.
 */
.list {
  list-style: none;
  margin-left: 0;
}

.list-divider {
  list-style: none !important;
  border-bottom: 1px solid #e6e6e6;
}

.list-divider::before {
  display: none !important;
}

/*
   Modifiers
   ========================================================================== */
/**
 * Modifier: Make list items display inline.
 */
.list--inline li {
  display: inline-block;
  margin-left: -.3125em;
}

.list--inline li:first-child {
  margin-left: 0;
}

/**
 * Modifier: Make list items have a pipe after each item.
 */
.list--inlinePipe li {
  display: inline-block;
  margin-right: .3125em;
}

.list--inlinePipe li:after {
  content: " | ";
  padding-left: .3125em;
}

.list--inlinePipe li:last-child {
  margin-right: 0;
}

.list--inlinePipe li:last-child:after {
  content: "";
}

/**
 * Modifier: Add checkmark with circle image to each list item, creating a
 * checklist.
 */
.list--checked {
  margin-left: 1.25rem;
}

.list--checked li {
  position: relative;
  padding-left: 5px;
}

.list--checked li::before {
  font-family: "bluebeam-icons" !important;
  display: inline-block;
  line-height: normal;
  content: "\e901";
  color: #0083db;
  font-size: 18px;
  height: 18px;
  width: 18px;
  position: absolute;
  top: 3px;
  left: -20px;
}

/*
   Definition Lists
   ========================================================================== */
.loader {
  border-radius: 500px;
  border: 3px solid #e6e6e6;
  border-left-color: #0083db;
  display: inline-block;
  vertical-align: middle;
  height: 35px;
  width: 35px;
}

.loader--doubleBars {
  border-left-color: #0083db;
  border-right-color: #0083db;
}

.loader--fill {
  border-color: #0083db;
}

.loader--lg {
  width: 50px;
  height: 50px;
}

.loader--sm {
  width: 25px;
  height: 25px;
  border-width: 2px;
}

.loader--xsm {
  width: 15px;
  height: 15px;
  border-width: 2px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.is-spinning {
  animation-name: spin;
  animation-duration: 700ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes pulse {
  0% {
    transform: scale(.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.is-pulsing {
  animation-name: pulse;
  animation-duration: 900ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

/* ==========================================================================
 * #TOOLTIP
 * --------------------------------------------------------------------------
 * Pure CSS tooltips.
 * Adapted from: Balloon.css
 * ========================================================================== */
/* ==========================================================================
   Tooltip: core
   ========================================================================== */
button[data-tooltip] {
  overflow: visible;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]:before,
[data-tooltip]:after {
  opacity: 0;
  pointer-events: none;
  bottom: 100%;
  left: 50%;
  position: absolute;
  z-index: 900;
  -ms-transform: translate(-50%, 10px);
  transform: translate(-50%, 10px);
  -ms-transform-origin: top;
  transform-origin: top;
  transition: opacity 250ms ease-in-out, transform 250ms cubic-bezier(.71, 1.7, .77, 1.24);
}

/**
 * Tooltip window
 */
[data-tooltip]:after {
  font-size: .875rem;
  background: #e6e6e6;
  border-color: #e6e6e6;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  color: #111;
  content: attr(data-tooltip);
  padding: 10px;
  white-space: nowrap;
  margin-bottom: 10px;
}

[data-tooltip]:before {
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  position: absolute;
  margin-top: 0;
  margin-bottom: 5px;
  border-width: 8px 12px 0;
  border-color: #e6e6e6 transparent transparent;
  content: "";
  margin-bottom: 5px;
}

[data-tooltip]:focus:before,
[data-tooltip]:hover:before,
[data-tooltip][data-tooltip-visible]:before,
[data-tooltip]:focus:after,
[data-tooltip]:hover:after,
[data-tooltip][data-tooltip-visible]:after {
  opacity: 1;
  pointer-events: auto;
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

/*
   Tooltip position: bottom
   ========================================================================== */
[data-tooltip-pos="bottom"]:before,
[data-tooltip-pos="bottom"]:after {
  bottom: auto;
  left: 50%;
  top: 100%;
  -ms-transform: translate(-50%, -10px);
  transform: translate(-50%, -10px);
}

[data-tooltip-pos="bottom"]:after {
  margin-top: 10px;
  background: #e6e6e6;
}

[data-tooltip-pos="bottom"]:before {
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  position: absolute;
  border-width: 0 12px 8px;
  border-color: transparent transparent #e6e6e6;
  margin-top: 5px;
  margin-bottom: 0;
}

[data-tooltip-pos="bottom"]:focus:before,
[data-tooltip-pos="bottom"]:hover:before,
[data-tooltip-pos="bottom"][data-tooltip-visible]:before,
[data-tooltip-pos="bottom"]:focus:after,
[data-tooltip-pos="bottom"]:hover:after,
[data-tooltip-pos="bottom"][data-tooltip-visible]:after {
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

/*
   Tooltip position: Left
   ========================================================================== */
[data-tooltip-pos="left"]:before,
[data-tooltip-pos="left"]:after {
  bottom: auto;
  left: auto;
  right: 100%;
  top: 50%;
  -ms-transform: translate(10px, -50%);
  transform: translate(10px, -50%);
}

[data-tooltip-pos="left"]:after {
  margin-right: 10px;
  background: #e6e6e6;
}

[data-tooltip-pos="left"]:before {
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  position: absolute;
  border-width: 12px 0 12px 8px;
  border-color: transparent transparent transparent #e6e6e6;
  margin-right: 5px;
  margin-bottom: 0;
}

[data-tooltip-pos="left"]:focus:before,
[data-tooltip-pos="left"]:hover:before,
[data-tooltip-pos="left"][data-tooltip-visible]:before,
[data-tooltip-pos="left"]:focus:after,
[data-tooltip-pos="left"]:hover:after,
[data-tooltip-pos="left"][data-tooltip-visible]:after {
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

/*
   Tooltip position: right
   ========================================================================== */
[data-tooltip-pos="right"]:before,
[data-tooltip-pos="right"]:after {
  bottom: auto;
  left: 100%;
  top: 50%;
  -ms-transform: translate(-10px, -50%);
  transform: translate(-10px, -50%);
}

[data-tooltip-pos="right"]:after {
  margin-left: 10px;
  background: #e6e6e6;
}

[data-tooltip-pos="right"]:before {
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  position: absolute;
  border-width: 12px 8px 12px 0;
  border-color: transparent #e6e6e6 transparent transparent;
  margin-bottom: 0;
  margin-left: 5px;
}

[data-tooltip-pos="right"]:focus:before,
[data-tooltip-pos="right"]:hover:before,
[data-tooltip-pos="right"][data-tooltip-visible]:before,
[data-tooltip-pos="right"]:focus:after,
[data-tooltip-pos="right"]:hover:after,
[data-tooltip-pos="right"][data-tooltip-visible]:after {
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

/*
   Tooltip sizing
   ========================================================================== */
[data-tooltip-size]:after {
  white-space: normal;
}

[data-tooltip-size="small"]:after {
  width: 80px;
}

[data-tooltip-size="medium"]:after {
  width: 150px;
}

[data-tooltip-size="large"]:after {
  width: 260px;
}

[data-tooltip-size="xlarge"]:after {
  width: 90vw;
}

@media screen and (min-width: 768px) {
  [data-tooltip-size="xlarge"]:after {
    width: 380px;
  }
}

[data-tooltip-size="fit"]:after {
  width: 100%;
}

/*
   Tooltip theme: Dark
   ========================================================================== */
[data-tooltip-theme="dark"]:after {
  background: #333 !important;
  border-color: #333;
  color: #f1f2f2;
}

[data-tooltip-theme="dark"]:before {
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  position: absolute;
  margin-top: 0;
  margin-bottom: 5px;
  border-width: 6px 10px 0;
  border-color: #333 transparent transparent;
}

[data-tooltip-theme="dark"][data-tooltip-pos="bottom"]:before {
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  position: absolute;
  border-width: 0 10px 6px;
  border-color: transparent transparent #333;
  margin-top: 5px;
  margin-bottom: 0;
}

[data-tooltip-theme="dark"][data-tooltip-pos="left"]:before {
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  position: absolute;
  border-width: 12px 0 12px 8px;
  border-color: transparent transparent transparent #333;
  margin-right: 5px;
  margin-bottom: 0;
}

[data-tooltip-theme="dark"][data-tooltip-pos="right"]:before {
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  position: absolute;
  border-width: 12px 8px 12px 0;
  border-color: transparent #333 transparent transparent;
  margin-bottom: 0;
  margin-left: 5px;
}

/*
   Tooltip theme: Light
   ========================================================================== */
[data-tooltip-theme="light"]:after {
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  color: #111;
}

[data-tooltip-theme="light"]:before {
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  position: absolute;
  margin-top: 0;
  margin-bottom: 5px;
  border-width: 6px 10px 0;
  border-color: #e6e6e6 transparent transparent;
}

[data-tooltip-theme="light"][data-tooltip-pos="bottom"]:before {
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  position: absolute;
  border-width: 0 10px 6px;
  border-color: transparent transparent #e6e6e6;
  margin-top: 5px;
  margin-bottom: 0;
}

[data-tooltip-theme="light"][data-tooltip-pos="left"]:before {
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  position: absolute;
  border-width: 12px 0 12px 8px;
  border-color: transparent transparent transparent #e6e6e6;
  margin-right: 5px;
  margin-bottom: 0;
}

[data-tooltip-theme="light"][data-tooltip-pos="right"]:before {
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  position: absolute;
  border-width: 12px 8px 12px 0;
  border-color: transparent #e6e6e6 transparent transparent;
  margin-bottom: 0;
  margin-left: 5px;
}

/*
   Core styles
   ========================================================================== */
.formLabel {
  font-size: .9375rem;
  line-height: 1.53333;
  margin-bottom: .3125rem;
  font-weight: 400;
  letter-spacing: .3px;
  display: block;
  cursor: pointer;
}

.formLabel.is-invalid {
  color: #ed4337;
}

.formControl {
  display: block;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, .1), inset 0 1px 2px 0 rgba(34, 40, 52, .7);
  border-radius: 3px;
  color: #111;
  border: 0;
  padding: .8125rem 1rem;
  font: inherit;
  font-size: .9375em;
  line-height: 20px;
  letter-spacing: .3px;
  vertical-align: middle;
  transition: all 200ms ease-out;
}

.formControl:disabled,
.formControl.is-disabled {
  opacity: .6;
  color: #999;
  cursor: not-allowed;
}

.formControl--select {
  background-image: url("data:image/svg+xml,<svg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%20488%20285%27><path%20d%3D%27M483.11%2029.381l-24.449-24.485c-2.934-2.938-7.335-4.897-11.246-4.897-3.912%200-8.313%201.959-11.246%204.897l-192.168%20192.448-192.168-192.448c-2.934-2.938-7.335-4.897-11.246-4.897-4.401%200-8.313%201.959-11.246%204.897l-24.449%2024.485c-2.934%202.938-4.89%207.345-4.89%2011.263s1.956%208.325%204.89%2011.263l227.864%20228.196c2.934%202.938%207.335%204.897%2011.246%204.897%203.912%200%208.313-1.959%2011.246-4.897l227.864-228.196c2.934-2.938%204.89-7.345%204.89-11.263s-1.956-8.325-4.89-11.263z%27%20fill%3D%27%23000%27/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 1rem) center !important;
  background-size: .6875rem !important;
  box-shadow: 0 1px 2px 0 rgba(34, 40, 52, .7), inset 0 1px 0 0 rgba(255, 255, 255, .1);
  padding-right: 2.5rem !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

.formRadio,
.formCheck {
  position: relative;
  display: block;
  margin-bottom: .3125rem;
  cursor: pointer;
  padding-left: 1.25rem;
}

.formRadio input,
.formCheck input {
  position: absolute;
  margin-top: .25rem;
  margin-left: -1.25rem;
}

.formInline {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-align: center;
  align-items: center;
}

.formInline .formControl,
.formInline .formRadio,
.formInline .formCheck {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.formInline .formRadio,
.formInline .formCheck {
  margin-right: 1.25rem;
}

/*
   Disabled states
   ========================================================================== */
/*
   Floating Labels
   ========================================================================== */
/* Default styling
 * Usage:
 *
<label class="floatLabel">
  <input class="floatLabel-input  formInput  u-block  u-sizeFull" id="name" name="name" type="text" placeholder="John" required>
  <span class="floatLabel-label">Name</span>
</label>

or

<div class="floatLabel">
  <input class="floatLabel-input  formInput  u-block  u-sizeFull" id="name" name="name" type="text" placeholder="John" required>
  <label class="floatLabel-label" for="name">Name</label>
</div>

or

<div class="floatLabel  u-mb4">
  <select class="floatLabel-select  formControl  formSelect  u-block  u-sizeFull" name="industry">
    <option value="" selected disabled>Select Industry</option>
    <option value="Student">Academic</option>
    <option value="Architectural">Architecture</option>
    <option value="Building Owners">Building Owners and Managers</option>
    <option value="Construction">Construction</option>
    <option value="Engineering">Engineering</option>
    <option value="Government">Government</option>
    <option value="Manufacturing">Manufacturing</option>
    <option value="Oil and Gas">Oil, Gas &amp; Chemical</option>
    <option value="Specialty Contractors">Specialty Contractors</option>
    <option value="Other">Other</option>
  </select>
  <label for="industry">Industry</label>
</div>
 *
 */
/* ==========================================================================
 * #HERO
 * --------------------------------------------------------------------------
 * Hero unit
 * ========================================================================== */
/* ==========================================================================
   Hero: core
   ========================================================================== */
.hero {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 448px;
}

.hero .o-wrapper {
  position: relative;
  min-height: 448px;
}

.hero-card {
  position: static;
  width: 100%;
  height: 100%;
  color: #f1f2f2;
  background-color: rgba(17, 17, 17, .7);
}

@media (min-width: 360px) {
  .hero-card {
    position: absolute;
    left: 0;
    top: 0;
  }
}

@media (min-width: 600px) {
  .hero-card {
    width: 467px;
    height: auto;
  }
}

/*
   Hero sizing
   ========================================================================== */
/* ==========================================================================
 * #SITE-HEADER
 * --------------------------------------------------------------------------
 * Site header
 *
 * Contains:
 *  Logo
 *  Country dropdown
 *  Shopping cart button
 * ========================================================================== */
@media (min-width: 360px) and (max-width: 600px) {
  .bluebeamLogo {
    width: 152px;
  }
}

.bluebeamLogo.bluebeamLogo--mobile {
  width: 30px;
}

.bluebeamLogo path,
.bluebeamLogo polygon {
  fill: #fff;
}

.bluebeamLogo .bluebeamBug path,
.bluebeamLogo .bluebeamBug polygon {
  transition: fill .3s ease;
}

.bluebeamLogo .bluebeamName {
  transition: transform .3s ease, opacity .3s ease;
}

.bluebeamLogo .bluebeamName path,
.bluebeamLogo .bluebeamName polygon {
  transition: fill .3s ease;
}

.bluebeamLogo .bluebeamNoLimits {
  transition: transform .3s ease, opacity .3s ease;
  -ms-transform: translateX(60px) translateY(24px);
  transform: translateX(60px) translateY(24px);
  opacity: 0;
}

.bluebeamLogo:hover .bluebeamBug path,
.bluebeamLogo:hover .bluebeamBug polygon {
  fill: #0083db;
}

/* ==========================================================================
 * #SITE-NAVIGATION
 * --------------------------------------------------------------------------
 * Site Navigation
 *
 * Contains:
 *  Nav Items
 *  Search
 * ========================================================================== */
.navigationToggle {
  position: absolute;
  right: 1rem;
  width: 30px;
  height: 30px;
  border: 1px solid #999;
  border-radius: 3px;
  text-align: center;
}

.navigationToggle .icon-bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  transition: all .3s ease;
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4px;
}

.navigationToggle .icon-bar.icon-bar:nth-child(1) {
  margin-top: 7px;
}

.navigationToggle:focus,
.navigationToggle:hover {
  background-color: #141414;
}

.navigationToggle.is-open {
  background-color: #333;
}

.navigationToggle.is-open .icon-bar:nth-child(1) {
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: relative;
  top: 6px;
}

.navigationToggle.is-open .icon-bar:nth-child(2) {
  opacity: 0;
}

.navigationToggle.is-open .icon-bar:nth-child(3) {
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: relative;
  top: -6px;
}

.navigation {
  display: none;
  position: absolute;
  width: 100%;
  z-index: 1;
}

@media (min-width: 840px) {
  .navigation .navigation-wrapper {
    max-width: 1200px;
    margin: 0 auto;
  }
  .navigation .navigation-wrapper:after {
    content: "" !important;
    display: block !important;
    clear: both !important;
  }
}

@media (min-width: 840px) {
  .navigation {
    display: block !important;
    position: relative;
  }
}

@media (min-width: 840px) {
  .navigation .o-grid-cell {
    text-align: center;
  }
}

.navigation .o-grid-cell:last-child .navigation-item {
  border-bottom: none;
}

.navigation .navigation-item {
  border-bottom: 1px solid #999;
  position: relative;
}

.navigation .navigation-item:last-child {
  border-bottom: none;
}

.navigation .navigation-item.navigation-item--wide {
  position: static;
}

@media (min-width: 840px) {
  .navigation .navigation-item.navigation-item--wide .dropdown {
    width: 100%;
  }
}

@media (min-width: 840px) {
  .navigation .navigation-item {
    border-bottom: none;
    float: left;
    cursor: pointer;
  }
  .navigation .navigation-item .dropdown {
    width: 180%;
  }
}

.navigation .navigation-item > span.is-open .icon {
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

@media (min-width: 840px) {
  .navigation .navigation-item > span.is-open .icon {
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}

.navigation .navigation-item .icon {
  margin-top: -.3125rem;
  transition: all 250ms ease-out;
}

@media (min-width: 840px) {
  .navigation .navigation-item .icon {
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: -.3125rem;
    margin-left: .0625rem;
  }
}

.navigation .navigation-item .dropdown {
  display: none;
}

@media (min-width: 840px) {
  .navigation .navigation-item .dropdown {
    position: absolute;
    left: 0;
    background-color: #333;
  }
}

.navigation .navigation-item .dropdown .o-grid-cell {
  padding-left: 1.875rem;
  padding-right: 1.875rem;
}

.navigation .navigation-item .dropdown .o-grid-cell:first-child {
  border-top: 1px solid #999;
  padding-top: 1.25rem;
}

@media (min-width: 840px) {
  .navigation .navigation-item .dropdown .o-grid-cell:first-child {
    border-top: none;
  }
}

@media (min-width: 840px) {
  .navigation .navigation-item .dropdown .o-grid-cell {
    border-top: none;
    padding: 0;
    text-align: left;
    padding: 1.25rem;
  }
}

.navigation .navigation-item .dropdown h2 {
  margin-bottom: .3125rem;
  color: #f1f2f2;
}

.navigation .navigation-item .dropdown a {
  color: #f1f2f2;
}

.navigation .navigation-item .dropdown ul {
  margin-left: -.4375rem;
}

.navigation .navigation-item .dropdown ul li a {
  padding: .125rem .4375rem;
}

.navigation .navigation-item .dropdown ul li a:hover {
  background-color: #0083db;
}

.navigation .navigation-item .navigation-item-link,
.navigation .navigation-item > span {
  display: block;
  padding: 1.25rem;
  color: #f1f2f2;
  transition: all 250ms ease-out;
}

@media (min-width: 840px) {
  .navigation .navigation-item .navigation-item-link,
  .navigation .navigation-item > span {
    border-top: 1px solid #333;
  }
  .navigation .navigation-item .navigation-item-link:hover,
  .navigation .navigation-item .navigation-item-link.is-open,
  .navigation .navigation-item > span:hover,
  .navigation .navigation-item > span.is-open {
    border-color: #0083db;
  }
}

/*
   The modal overlay
   ========================================================================== */
.blocker {
  padding: 1.25rem;
  overflow: auto;
  z-index: 900;
  background-color: rgba(0, 0, 0, .75);
  text-align: center;
}

.blocker:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -.05em;
}

/*
   Modal core styles
   ========================================================================== */
.bpModal {
  display: none;
  vertical-align: middle;
  position: relative;
  z-index: 1000;
  width: 500px;
  max-width: 99%;
  max-height: 99%;
  overflow-y: auto;
  box-sizing: border-box;
  background: #f1f2f2;
  border: 1px solid #ced1d1;
  border-radius: 3px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .09), 0 6px 6px rgba(0, 0, 0, .13);
  text-align: left;
}

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

.bpModal-header {
  text-align: center;
  border-bottom: 1px solid #ced1d1;
}

.bpModal-body,
.bpModal-header {
  padding: 1.25rem;
}

.bpModal-title {
  font-size: 1.125rem;
  line-height: 1.44444;
  margin: 0;
}

.bpModal-footer {
  padding-top: .625rem;
  padding-bottom: .625rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border-top: 1px solid #ced1d1;
  text-align: right;
}

.bpModal-close {
  position: absolute;
  top: 2px;
  right: 5px;
  display: block;
  color: #999;
  height: 25px;
  width: 25px;
  text-align: center;
}

.bpModal-close::before {
  font-family: "bluebeam-icons" !important;
  display: inline-block;
  line-height: normal;
  font-size: 1.125rem;
  line-height: 1.44444;
  content: "\e5cd";
}

.bpModal-spinner {
  display: none;
  position: fixed;
  left: 50% !important;
  top: 50% !important;
  -ms-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
}

/*
   Tabs core styles
   ========================================================================== */
.bpTabs-tab,
.bpTabs-accordionTitle {
  border: 1px solid transparent;
  border-top-width: 3px;
  border-bottom-color: #999;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .3px;
  transition: border-color 250ms ease-in-out;
}

.bpTabs-tab a,
.bpTabs-accordionTitle a {
  padding: .625rem;
  display: block;
  color: #999;
}

.bpTabs-tab a:hover,
.bpTabs-accordionTitle a:hover {
  color: #0083db;
}

.bpTabs-tab.is-active,
.bpTabs-accordionTitle.is-active {
  border-top: 3px solid #0083db;
  border-left: 1px solid #ced1d1;
  border-right: 1px solid #ced1d1;
  border-bottom-color: transparent;
}

.bpTabs-tab.is-active a,
.bpTabs-accordionTitle.is-active a {
  color: #0083db;
}

.bpTabs-accordionTitle {
  display: none;
  border: 1px solid #ced1d1 !important;
  background-color: #fff;
}

.bpTabs-accordionTitle a {
  padding: 1.25rem;
  display: block;
}

.bpTabs-accordionTitle.is-active {
  background-color: #fff;
  border-bottom: 0 !important;
}

.bpTabs-panel {
  padding: 20px;
  display: none;
}

.bpTabs-panel.is-active {
  display: block;
}

/* Accordion responsive breakpoint */
@media (max-width: 600px) {
  .bpTabs-nav {
    display: none;
  }
  .bpTabs-accordionTitle {
    display: block;
  }
  .bpTabs-panel {
    border-left: 1px solid #ced1d1;
    border-right: 1px solid #ced1d1;
    border-bottom: 1px solid #ced1d1;
  }
}

/**
 * Utils
 *
 * Utility helper classes.
 */
/* ==========================================================================
 * #BGSIZE
 * --------------------------------------------------------------------------
 * Background size utilities. Often used in combination with background image
 * set as an inline style on an html element.
 * ========================================================================== */
.u-bgCover,
.u-bgContain {
  background-repeat: no-repeat;
  background-position: center;
}

/**
 * .u-bgCover will make sure the entire element is covered - but won't
 * guarantee that the entire image will be shown.
 */
.u-bgCover {
  background-size: cover !important;
}

/**
 * .u-bgContain will make sure that the entire image is displayed within the
 * element, regardless of the elements dimensions.
 */
.u-bgContain {
  background-size: contain !important;
}

/*
   Responsive classes
   ========================================================================== */
/* ==========================================================================
 * #BORDERS
 * --------------------------------------------------------------------------
 * Border utilities
 * ========================================================================== */
.u-borderAll {
  border-style: solid !important;
  border-width: 1px !important;
}

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

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

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

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

.u-borderDotted {
  border-style: dotted !important;
}

.u-borderDashed {
  border-style: dashed !important;
}

.u-borderSolid {
  border-style: solid !important;
}

.u-borderTrans {
  border-color: transparent !important;
}

.u-borderPrimary,
.u-hoverBorderPrimary:hover {
  border-color: #0083db !important;
}

.u-borderPrimaryLight,
.u-hoverBorderPrimaryLight:hover {
  border-color: #0ba3e6 !important;
}

.u-borderPrimaryDark,
.u-hoverBorderPrimaryDark:hover {
  border-color: #00579c !important;
}

.u-borderWhite {
  border-color: #fff !important;
}

.u-borderGray,
.u-hoverBorderGray:hover {
  border-color: #ced1d1 !important;
}

.u-borderGrayLightest,
.u-hoverBorderGrayLightest:hover {
  border-color: #f1f2f2 !important;
}

.u-borderGrayLighter,
.u-hoverBorderGrayLighter:hover {
  border-color: #eee !important;
}

.u-borderGrayLight,
.u-hoverBorderGrayLight:hover {
  border-color: #e6e6e6 !important;
}

.u-borderGrayDark,
.u-hoverBorderGrayDark:hover {
  border-color: #999 !important;
}

.u-borderGrayDarker,
.u-hoverBorderGrayDarker:hover {
  border-color: #666 !important;
}

.u-borderGrayDarkest,
.u-hoverBorderGrayDarkest:hover {
  border-color: #333 !important;
}

.u-borderBlackish,
.u-hoverBorderBlackish:hover {
  border-color: #111 !important;
}

.u-borderBlack {
  border-color: #000 !important;
}

.u-borderSuccess {
  border-color: #58ce8a !important;
}

.u-borderError {
  border-color: #ed4337 !important;
}

/**
 * Border thickness
 */
.u-border0 {
  border-style: none !important;
  border-width: 0 !important;
}

.u-border1 {
  border-width: 1px !important;
}

.u-border2 {
  border-width: 2px !important;
}

.u-border3 {
  border-width: 3px !important;
}

.u-border4 {
  border-width: 4px !important;
}

.u-border5 {
  border-width: 5px !important;
}

.u-radius100 {
  border-radius: 100%;
}

.u-radius {
  border-radius: .1875rem !important;
}

/* ==========================================================================
 * #COLORS
 * --------------------------------------------------------------------------
 * Color utilities. Use them to add/modify background and text colors.
 * ========================================================================== */
/*
   Brand Colors
   ========================================================================== */
.u-colorPrimary {
  color: #0083db !important;
}

.u-colorPrimaryLight {
  color: #0ba3e6 !important;
}

.u-colorPrimaryDark {
  color: #00579c !important;
}

.u-bgPrimary {
  background-color: #0083db !important;
}

.u-bgPrimaryLight {
  background-color: #0ba3e6 !important;
}

.u-bgPrimaryDark {
  background-color: #00579c !important;
}

.u-colorSecondary {
  color: #8bc34a !important;
}

.u-colorSecondaryLight {
  color: #dcedc8 !important;
}

.u-colorSecondaryDark {
  color: #689f38 !important;
}

.u-bgSecondary {
  background-color: #8bc34a !important;
}

.u-bgSecondaryLight {
  background-color: #dcedc8 !important;
}

.u-bgSecondaryDark {
  background-color: #689f38 !important;
}

.u-fillPrimary {
  fill: #0083db !important;
}

.u-fillPrimaryLight {
  fill: #0ba3e6 !important;
}

.u-fillPrimaryDark {
  fill: #00579c !important;
}

.u-fillPrimary {
  fill: #0083db !important;
}

.u-fillPrimaryLight {
  fill: #0ba3e6 !important;
}

.u-fillPrimaryDark {
  fill: #00579c !important;
}

.u-fillSecondary {
  fill: #8bc34a !important;
}

.u-fillSecondaryLight {
  fill: #dcedc8 !important;
}

.u-fillSecondaryDark {
  fill: #689f38 !important;
}

.u-fillSecondary {
  fill: #8bc34a !important;
}

.u-fillSecondaryLight {
  fill: #dcedc8 !important;
}

.u-fillSecondaryDark {
  fill: #689f38 !important;
}

/*
   Grayscale
   ========================================================================== */
.u-colorWhite {
  color: #fff !important;
}

.u-colorBlack {
  color: #000 !important;
}

.u-bgWhite,
.u-hoverBgWhite {
  background-color: #fff !important;
}

.u-bgBlack {
  background-color: #000 !important;
}

.u-colorGray {
  color: #ced1d1 !important;
}

.u-colorGrayLightest {
  color: #f1f2f2 !important;
}

.u-colorGrayLighter {
  color: #eee !important;
}

.u-colorGrayLight {
  color: #e6e6e6 !important;
}

.u-colorGrayDark {
  color: #999 !important;
}

.u-colorGrayDarker {
  color: #666 !important;
}

.u-colorGrayDarkest {
  color: #333 !important;
}

.u-colorBlackish {
  color: #111 !important;
}

.u-bgGray {
  background-color: #ced1d1 !important;
}

.u-bgGrayLightest {
  background-color: #f1f2f2 !important;
}

.u-bgGrayLighter {
  background-color: #eee !important;
}

.u-bgGrayLight {
  background-color: #e6e6e6 !important;
}

.u-bgGrayDark {
  background-color: #999 !important;
}

.u-bgGrayDarker {
  background-color: #666 !important;
}

.u-bgGrayDarkest {
  background-color: #333 !important;
}

.u-bgBlackish {
  background-color: #111 !important;
}

.u-fillBlack {
  fill: #000 !important;
}

.u-fillWhite {
  fill: #fff !important;
}

.u-fillGray {
  fill: #ced1d1 !important;
}

.u-fillGrayLightest {
  fill: #f1f2f2 !important;
}

.u-fillGrayLighter {
  fill: #eee !important;
}

.u-fillGrayLight {
  fill: #e6e6e6 !important;
}

.u-fillGrayDark {
  fill: #999 !important;
}

.u-fillGrayDarker {
  fill: #666 !important;
}

.u-fillGrayDarkest {
  fill: #333 !important;
}

.u-fillBlackish {
  fill: #111 !important;
}

/*
   Social networking colors
   ========================================================================== */
/*
   Status colors
   ========================================================================== */
.u-colorSuccess {
  color: #58ce8a !important;
}

.u-colorError {
  color: #ed4337 !important;
}

.u-bgSuccess {
  background-color: #58ce8a !important;
}

.u-bgError {
  background-color: #ed4337 !important;
}

/* ==========================================================================
 * #LINKS
 * --------------------------------------------------------------------------
 * Link utilities
 * ========================================================================== */
.u-linkLightest {
  color: #f1f2f2;
}

.u-linkLightest:hover {
  color: #d1d5d5;
}

.u-linkLighter {
  color: #eee;
}

.u-linkLighter:hover {
  color: #cfcfcf;
}

.u-linkLight {
  color: #e6e6e6;
}

.u-linkLight:hover {
  color: #c7c7c7;
}

.u-linkDark {
  color: #999;
}

.u-linkDark:hover {
  color: #b8b8b8;
}

.u-linkDarker {
  color: #666;
}

.u-linkDarker:hover {
  color: #858585;
}

.u-linkDarkest {
  color: #333;
}

.u-linkDarkest:hover {
  color: #525252;
}

/* ==========================================================================
 * #CURSOR
 * --------------------------------------------------------------------------
 * Utilities for changing mouse cursor.
 * ========================================================================== */
.u-cursorDefault {
  cursor: default !important;
}

.u-cursorPointer {
  cursor: pointer !important;
}

.u-cursorHelp {
  cursor: help !important;
}

.u-cursorText {
  cursor: text !important;
}

.u-cursorNope {
  cursor: not-allowed !important;
}

/* ==========================================================================
 * Flex utility classes
 * --------------------------------------------------------------------------
 * SUIT CSS flexbox utilities - https://github.com/suitcss/utils-flex
 *
 * Need help with flexbox?
 * https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 * ========================================================================== */
/* Classes that apply to the parent (flex container)
   ========================================================================== */
/**
 * Container
 */
.u-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

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

/**
 * Direction: row
 */
.u-flexRow {
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.u-flexRowReverse {
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}

/**
 * Direction: column
 */
.u-flexCol {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.u-flexColReverse {
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}

/**
 * Wrap
 */
.u-flexWrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

.u-flexNoWrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}

.u-flexWrapReverse {
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important;
}

/**
 * Align items along the main axis of the current line of the flex container
 */
.u-justifyStart {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.u-justifyEnd {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

.u-justifyCenter {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.u-justifyBetween {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.u-justifyAround {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}

/**
 * Align items in the cross axis of the current line of the flex container
 * Similar to `justify-content` but in the perpendicular direction
 */
.u-itemsStart {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

.u-itemsEnd {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}

.u-itemsCenter {
  -ms-flex-align: center !important;
  align-items: center !important;
}

.u-itemsStretch {
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}

.u-itemsBaseline {
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}

/**
 * Aligns items within the flex container when there is extra
 * space in the cross-axis
 *
 * Has no effect when there is only one line of flex items.
 */
.u-contentStart {
  -ms-flex-line-pack: start !important;
  align-content: flex-start !important;
}

.u-contentEnd {
  -ms-flex-line-pack: end !important;
  align-content: flex-end !important;
}

.u-contentCenter {
  -ms-flex-line-pack: center !important;
  align-content: center !important;
}

.u-contentStretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important;
}

.u-contentBetween {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important;
}

.u-contentAround {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important;
}

/**
 * 1. Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
 */
.u-flex > *,
.u-inlineFlex > * {
  -ms-flex-negative: 1;
  flex-shrink: 1;
}

/* Classes that apply to the children (flex items)
   ========================================================================== */
/**
 * Override default alignment of single item when specified by `align-items`
 */
.u-selfStart {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}

.u-selfEnd {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}

.u-selfCenter {
  -ms-flex-item-align: center !important;
  -ms-grid-row-align: center !important;
  align-self: center !important;
}

.u-selfStretch {
  -ms-flex-item-align: stretch !important;
  -ms-grid-row-align: stretch !important;
  align-self: stretch !important;
}

.u-selfBaseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}

.u-selfAuto {
  -ms-flex-item-align: auto !important;
  -ms-grid-row-align: auto !important;
  align-self: auto !important;
}

/**
 * Change order without editing underlying HTML
 */
.u-orderNone {
  -ms-flex-order: 0 !important;
  order: 0 !important;
}

.u-orderFirst {
  -ms-flex-order: -1 !important;
  order: -1 !important;
}

.u-orderLast {
  -ms-flex-order: 99999 !important;
  order: 99999 !important;
}

/**
 * Specify the flex grow factor, which determines how much the flex item will
 * grow relative to the rest of the flex items in the flex container.
 *
 * Supports 1-5 proportions
 *
 * 1. Provide all values to avoid IE10 bug with shorthand flex
 *    - http://git.io/vllC7
 *
 *    Use `0%` to avoid bug in IE10/11 with unitless flex basis. Using this
 *    instead of `auto` as this matches what the default would be with `flex`
 *    shorthand - http://git.io/vllWx
 */
.u-flexGrow1 {
  -ms-flex: 1 1 0 !important;
  flex: 1 1 0 !important;
  /* 1 */
}

.u-flexGrow2 {
  -ms-flex: 2 1 0 !important;
  flex: 2 1 0 !important;
}

.u-flexGrow3 {
  -ms-flex: 3 1 0 !important;
  flex: 3 1 0 !important;
}

.u-flexGrow4 {
  -ms-flex: 4 1 0 !important;
  flex: 4 1 0 !important;
}

.u-flexGrow5 {
  -ms-flex: 5 1 0 !important;
  flex: 5 1 0 !important;
}

/**
 * Aligning with `auto` margins
 * http://www.w3.org/TR/css-flexbox-1/#auto-margins
 */
.u-expand {
  margin: auto !important;
}

.u-expandLeft {
  margin-left: auto !important;
}

.u-expandRight {
  margin-right: auto !important;
}

.u-expandTop {
  margin-top: auto !important;
}

.u-expandBottom {
  margin-bottom: auto !important;
}

/* ==========================================================================
   Small breakpoint
   ========================================================================== */
@media (min-width: 360px) {
  .u-sm-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .u-sm-inlineFlex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
  .u-sm-flexRow {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .u-sm-flexRowReverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .u-sm-flexCol {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .u-sm-flexColReverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .u-sm-flexWrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .u-sm-flexNoWrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .u-sm-flexWrapReverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .u-sm-justifyStart {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .u-sm-justifyEnd {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .u-sm-justifyCenter {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .u-sm-justifyBetween {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .u-sm-justifyAround {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .u-sm-itemsStart {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .u-sm-itemsEnd {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .u-sm-itemsCenter {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .u-sm-itemsStretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .u-sm-itemsBaseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .u-sm-contentStart {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .u-sm-contentEnd {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .u-sm-contentCenter {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .u-sm-contentStretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .u-sm-contentBetween {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .u-sm-contentAround {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .u-sm-flex > *,
  .u-sm-inlineFlex > * {
    -ms-flex-negative: 1;
    flex-shrink: 1;
  }
  .u-sm-selfStart {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .u-sm-selfEnd {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .u-sm-selfCenter {
    -ms-flex-item-align: center !important;
    -ms-grid-row-align: center !important;
    align-self: center !important;
  }
  .u-sm-selfStretch {
    -ms-flex-item-align: stretch !important;
    -ms-grid-row-align: stretch !important;
    align-self: stretch !important;
  }
  .u-sm-selfBaseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .u-sm-selfAuto {
    -ms-flex-item-align: auto !important;
    -ms-grid-row-align: auto !important;
    align-self: auto !important;
  }
  .u-sm-orderNone {
    -ms-flex-order: 0 !important;
    order: 0 !important;
  }
  .u-sm-orderFirst {
    -ms-flex-order: -1 !important;
    order: -1 !important;
  }
  .u-sm-orderLast {
    -ms-flex-order: 99999 !important;
    order: 99999 !important;
  }
  .u-sm-flexGrow1 {
    -ms-flex: 1 1 0 !important;
    flex: 1 1 0 !important;
  }
  .u-sm-flexGrow2 {
    -ms-flex: 2 1 0 !important;
    flex: 2 1 0 !important;
  }
  .u-sm-flexGrow3 {
    -ms-flex: 3 1 0 !important;
    flex: 3 1 0 !important;
  }
  .u-sm-flexGrow4 {
    -ms-flex: 4 1 0 !important;
    flex: 4 1 0 !important;
  }
  .u-sm-flexGrow5 {
    -ms-flex: 5 1 0 !important;
    flex: 5 1 0 !important;
  }
  .u-sm-expand {
    margin: auto !important;
  }
  .u-sm-expandLeft {
    margin-left: auto !important;
  }
  .u-sm-expandRight {
    margin-right: auto !important;
  }
  .u-sm-expandTop {
    margin-top: auto !important;
  }
  .u-sm-expandBottom {
    margin-bottom: auto !important;
  }
}

/* ==========================================================================
   Medium breakpoint
   ========================================================================== */
@media (min-width: 600px) {
  .u-md-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .u-md-inlineFlex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
  .u-md-flexRow {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .u-md-flexRowReverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .u-md-flexCol {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .u-md-flexColReverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .u-md-flexWrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .u-md-flexNoWrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .u-md-flexWrapReverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .u-md-justifyStart {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .u-md-justifyEnd {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .u-md-justifyCenter {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .u-md-justifyBetween {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .u-md-justifyAround {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .u-md-itemsStart {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .u-md-itemsEnd {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .u-md-itemsCenter {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .u-md-itemsStretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .u-md-itemsBaseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .u-md-contentStart {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .u-md-contentEnd {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .u-md-contentCenter {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .u-md-contentStretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .u-md-contentBetween {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .u-md-contentAround {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .u-md-flex > *,
  .u-md-inlineFlex > * {
    -ms-flex-negative: 1;
    flex-shrink: 1;
  }
  .u-md-selfStart {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .u-md-selfEnd {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .u-md-selfCenter {
    -ms-flex-item-align: center !important;
    -ms-grid-row-align: center !important;
    align-self: center !important;
  }
  .u-md-selfStretch {
    -ms-flex-item-align: stretch !important;
    -ms-grid-row-align: stretch !important;
    align-self: stretch !important;
  }
  .u-md-selfBaseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .u-md-selfAuto {
    -ms-flex-item-align: auto !important;
    -ms-grid-row-align: auto !important;
    align-self: auto !important;
  }
  .u-md-orderNone {
    -ms-flex-order: 0 !important;
    order: 0 !important;
  }
  .u-md-orderFirst {
    -ms-flex-order: -1 !important;
    order: -1 !important;
  }
  .u-md-orderLast {
    -ms-flex-order: 99999 !important;
    order: 99999 !important;
  }
  .u-md-flexGrow1 {
    -ms-flex: 1 1 0 !important;
    flex: 1 1 0 !important;
  }
  .u-md-flexGrow2 {
    -ms-flex: 2 1 0 !important;
    flex: 2 1 0 !important;
  }
  .u-md-flexGrow3 {
    -ms-flex: 3 1 0 !important;
    flex: 3 1 0 !important;
  }
  .u-md-flexGrow4 {
    -ms-flex: 4 1 0 !important;
    flex: 4 1 0 !important;
  }
  .u-md-flexGrow5 {
    -ms-flex: 5 1 0 !important;
    flex: 5 1 0 !important;
  }
  .u-md-expand {
    margin: auto !important;
  }
  .u-md-expandLeft {
    margin-left: auto !important;
  }
  .u-md-expandRight {
    margin-right: auto !important;
  }
  .u-md-expandTop {
    margin-top: auto !important;
  }
  .u-md-expandBottom {
    margin-bottom: auto !important;
  }
}

/* ==========================================================================
   Large breakpoint
   ========================================================================== */
@media (min-width: 840px) {
  .u-lg-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .u-lg-inlineFlex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
  .u-lg-flexRow {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .u-lg-flexRowReverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .u-lg-flexCol {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .u-lg-flexColReverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .u-lg-flexWrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .u-lg-flexNoWrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .u-lg-flexWrapReverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .u-lg-justifyStart {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .u-lg-justifyEnd {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .u-lg-justifyCenter {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .u-lg-justifyBetween {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .u-lg-justifyAround {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .u-lg-itemsStart {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .u-lg-itemsEnd {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .u-lg-itemsCenter {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .u-lg-itemsStretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .u-lg-itemsBaseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .u-lg-contentStart {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .u-lg-contentEnd {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .u-lg-contentCenter {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .u-lg-contentStretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .u-lg-contentBetween {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .u-lg-contentAround {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .u-lg-flex > *,
  .u-lg-inlineFlex > * {
    -ms-flex-negative: 1;
    flex-shrink: 1;
  }
  .u-lg-selfStart {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .u-lg-selfEnd {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .u-lg-selfCenter {
    -ms-flex-item-align: center !important;
    -ms-grid-row-align: center !important;
    align-self: center !important;
  }
  .u-lg-selfStretch {
    -ms-flex-item-align: stretch !important;
    -ms-grid-row-align: stretch !important;
    align-self: stretch !important;
  }
  .u-lg-selfBaseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .u-lg-selfAuto {
    -ms-flex-item-align: auto !important;
    -ms-grid-row-align: auto !important;
    align-self: auto !important;
  }
  .u-lg-orderNone {
    -ms-flex-order: 0 !important;
    order: 0 !important;
  }
  .u-lg-orderFirst {
    -ms-flex-order: -1 !important;
    order: -1 !important;
  }
  .u-lg-orderLast {
    -ms-flex-order: 99999 !important;
    order: 99999 !important;
  }
  .u-lg-flexGrow1 {
    -ms-flex: 1 1 0 !important;
    flex: 1 1 0 !important;
  }
  .u-lg-flexGrow2 {
    -ms-flex: 2 1 0 !important;
    flex: 2 1 0 !important;
  }
  .u-lg-flexGrow3 {
    -ms-flex: 3 1 0 !important;
    flex: 3 1 0 !important;
  }
  .u-lg-flexGrow4 {
    -ms-flex: 4 1 0 !important;
    flex: 4 1 0 !important;
  }
  .u-lg-flexGrow5 {
    -ms-flex: 5 1 0 !important;
    flex: 5 1 0 !important;
  }
  .u-lg-expand {
    margin: auto !important;
  }
  .u-lg-expandLeft {
    margin-left: auto !important;
  }
  .u-lg-expandRight {
    margin-right: auto !important;
  }
  .u-lg-expandTop {
    margin-top: auto !important;
  }
  .u-lg-expandBottom {
    margin-bottom: auto !important;
  }
}

/* ==========================================================================
 * #HOVERS
 * --------------------------------------------------------------------------
 * Various hover effects
 * ========================================================================== */
/**
 * Dim element on hover by adding the `u-hoverDim` class.
 */
.u-hoverDim {
  opacity: 1;
  transition: opacity 150ms ease-in;
}

.u-hoverDim:hover,
.u-hoverDim:focus {
  opacity: .5;
  transition: opacity 150ms ease-in;
}

.u-hoverDim:active {
  opacity: .8;
  transition: opacity 150ms ease-out;
}

/**
 * Animate opacity to 100% on hover by adding the `u-hoverGlow` class.
 */
.u-hoverGlow {
  transition: opacity 150ms ease-in;
}

.u-hoverGlow:hover,
.u-hoverGlow:focus {
  opacity: 1;
  transition: opacity 150ms ease-in;
}

/**
 * Hide child & reveal on hover:
 *
 * Put the hide-child class on a parent element and any nested element with the
     child class will be hidden and displayed on hover or focus.
 */
/**
 * Can combine this with overflow-hidden to make background images u-hoverGrow
 * on hover even if you are using background-size: cover
 */
.u-hoverGrow,
.u-hoverGrowLarge {
  -moz-osx-font-smoothing: grayscale;
  -webkit-filter: blur(0);
  filter: blur(0);
  transform: perspective(1px) translateZ(0);
  transition: transform 200ms ease-in-out;
}

.u-hoverGrow:hover,
.u-hoverGrow:focus {
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

.u-hoverGrow:active {
  -ms-transform: scale(1);
  transform: scale(1);
}

.u-hoverGrowLarge:hover,
.u-hoverGrowLarge:focus {
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.u-hoverGrowLarge:active {
  -ms-transform: scale(1);
  transform: scale(1);
}

/* Add pointer on hover */
/**
 * Add shadow on hover.
 * Via: http://tobiasahlin.com/blog/how-to-animate-box-shadow/
 */
.u-hoverShadow1,
.u-hoverShadow2,
.u-hoverShadow3,
.u-hoverShadow4,
.u-hoverShadow5 {
  cursor: pointer;
  position: relative;
  transition: all .5s cubic-bezier(.165, .84, .44, 1);
}

.u-hoverShadow1::after,
.u-hoverShadow2::after,
.u-hoverShadow3::after,
.u-hoverShadow4::after,
.u-hoverShadow5::after {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity .5s cubic-bezier(.165, .84, .44, 1);
}

.u-hoverShadow1:hover::after,
.u-hoverShadow1:focus::after,
.u-hoverShadow2:hover::after,
.u-hoverShadow2:focus::after,
.u-hoverShadow3:hover::after,
.u-hoverShadow3:focus::after,
.u-hoverShadow4:hover::after,
.u-hoverShadow4:focus::after,
.u-hoverShadow5:hover::after,
.u-hoverShadow5:focus::after {
  opacity: 1;
}

.u-hoverShadow1::after {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .02), 0 1px 2px rgba(0, 0, 0, .14);
}

.u-hoverShadow2::after {
  box-shadow: 0 3px 6px rgba(0, 0, 0, .06), 0 3px 6px rgba(0, 0, 0, .13);
}

.u-hoverShadow3::after {
  box-shadow: 0 10px 20px rgba(0, 0, 0, .09), 0 6px 6px rgba(0, 0, 0, .13);
}

.u-hoverShadow4::after {
  box-shadow: 0 14px 28px rgba(0, 0, 0, .15), 0 10px 10px rgba(0, 0, 0, .12);
}

.u-hoverShadow5::after {
  box-shadow: 0 19px 38px rgba(0, 0, 0, .2), 0 15px 12px rgba(0, 0, 0, .12);
}

/* ==========================================================================
 * #LAYOUT
 * --------------------------------------------------------------------------
 * Utility classes for low-level CSS layout traits.
 *
 * u-clearfix - Contain floats (micro clearfix).
 * u-nbfc - Create a new block formatting context.
 * u-nbfcAlt - Create a new block formatting context (alternative technique).
 * u-floatLeft - Float left.
 * u-floatRight - Float right.
 * u-floatNone - Dont Float.
 * ========================================================================== */
/**
 * Contain floats
 *
 * Make an element expand to contain floated children.
 * Uses pseudo-elements (micro clearfix).
 *
 * http://www.cssmojo.com/the-very-latest-clearfix-reloaded/
 */
.u-clearfix:after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

/**
 * New block formatting context
 *
 * This affords some useful properties to the element. It won't wrap under
 * floats. Will also contain any floated children.
 * N.B. This will clip overflow. Use the alternative method below if this is
 * problematic.
 */
.u-overflowHidden {
  overflow: hidden !important;
}

/**
 * New block formatting context (alternative)
 *
 * Alternative method when overflow must not be clipped.
 *
 * 1. Create a new block formatting context (NBFC).
 * 2. Avoid shrink-wrap behaviour of table-cell.
 *
 * N.B. This breaks down in some browsers when elements within this element
 * exceed its width.
 */
/**
 * Floats
 */
.u-floatLeft {
  float: left !important;
}

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

.u-floatNone {
  float: none !important;
}

/* ==========================================================================
 * #MARGIN
 * --------------------------------------------------------------------------
 * Margin utility classes.
 *
 * ========================================================================== */
.u-m0 {
  margin: 0;
}

.u-mt0 {
  margin-top: 0;
}

.u-mr0 {
  margin-right: 0;
}

.u-mb0 {
  margin-bottom: 0;
}

.u-ml0 {
  margin-left: 0;
}

.u-mx0 {
  margin-left: 0;
  margin-right: 0;
}

.u-my0 {
  margin-top: 0;
  margin-bottom: 0;
}

.u-m1 {
  margin: .125rem;
}

.u-mt1 {
  margin-top: .125rem;
}

.u-mr1 {
  margin-right: .125rem;
}

.u-mb1 {
  margin-bottom: .125rem;
}

.u-ml1 {
  margin-left: .125rem;
}

.u-mx1 {
  margin-left: .125rem;
  margin-right: .125rem;
}

.u-my1 {
  margin-top: .125rem;
  margin-bottom: .125rem;
}

.u-m2 {
  margin: .3125rem;
}

.u-mt2 {
  margin-top: .3125rem;
}

.u-mr2 {
  margin-right: .3125rem;
}

.u-mb2 {
  margin-bottom: .3125rem;
}

.u-ml2 {
  margin-left: .3125rem;
}

.u-mx2 {
  margin-left: .3125rem;
  margin-right: .3125rem;
}

.u-my2 {
  margin-top: .3125rem;
  margin-bottom: .3125rem;
}

.u-m3 {
  margin: .625rem;
}

.u-mt3 {
  margin-top: .625rem;
}

.u-mr3 {
  margin-right: .625rem;
}

.u-mb3 {
  margin-bottom: .625rem;
}

.u-ml3 {
  margin-left: .625rem;
}

.u-mx3 {
  margin-left: .625rem;
  margin-right: .625rem;
}

.u-my3 {
  margin-top: .625rem;
  margin-bottom: .625rem;
}

.u-m4 {
  margin: 1.25rem;
}

.u-mt4 {
  margin-top: 1.25rem;
}

.u-mr4 {
  margin-right: 1.25rem;
}

.u-mb4 {
  margin-bottom: 1.25rem;
}

.u-ml4 {
  margin-left: 1.25rem;
}

.u-mx4 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.u-my4 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.u-m5 {
  margin: 1.875rem;
}

.u-mt5 {
  margin-top: 1.875rem;
}

.u-mr5 {
  margin-right: 1.875rem;
}

.u-mb5 {
  margin-bottom: 1.875rem;
}

.u-ml5 {
  margin-left: 1.875rem;
}

.u-mx5 {
  margin-left: 1.875rem;
  margin-right: 1.875rem;
}

.u-my5 {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

.u-m6 {
  margin: 2.5rem;
}

.u-mt6 {
  margin-top: 2.5rem;
}

.u-mr6 {
  margin-right: 2.5rem;
}

.u-mb6 {
  margin-bottom: 2.5rem;
}

.u-ml6 {
  margin-left: 2.5rem;
}

.u-mx6 {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

.u-my6 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.u-m7 {
  margin: 3.125rem;
}

.u-mt7 {
  margin-top: 3.125rem;
}

.u-mr7 {
  margin-right: 3.125rem;
}

.u-mb7 {
  margin-bottom: 3.125rem;
}

.u-ml7 {
  margin-left: 3.125rem;
}

.u-mx7 {
  margin-left: 3.125rem;
  margin-right: 3.125rem;
}

.u-my7 {
  margin-top: 3.125rem;
  margin-bottom: 3.125rem;
}

.u-m8 {
  margin: 3.75rem;
}

.u-mt8 {
  margin-top: 3.75rem;
}

.u-mr8 {
  margin-right: 3.75rem;
}

.u-mb8 {
  margin-bottom: 3.75rem;
}

.u-ml8 {
  margin-left: 3.75rem;
}

.u-mx8 {
  margin-left: 3.75rem;
  margin-right: 3.75rem;
}

.u-my8 {
  margin-top: 3.75rem;
  margin-bottom: 3.75rem;
}

.u-mxAuto {
  margin-left: auto;
  margin-right: auto;
}

.u-lastChild0 > :last-child {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   Responsive classes
   ========================================================================== */
/*
   Small breakpoint
   ========================================================================== */
@media (min-width: 360px) {
  .u-sm-m0 {
    margin: 0;
  }
  .u-sm-mt0 {
    margin-top: 0;
  }
  .u-sm-mr0 {
    margin-right: 0;
  }
  .u-sm-mb0 {
    margin-bottom: 0;
  }
  .u-sm-ml0 {
    margin-left: 0;
  }
  .u-sm-mx0 {
    margin-left: 0;
    margin-right: 0;
  }
  .u-sm-my0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .u-sm-m1 {
    margin: .125rem;
  }
  .u-sm-mt1 {
    margin-top: .125rem;
  }
  .u-sm-mr1 {
    margin-right: .125rem;
  }
  .u-sm-mb1 {
    margin-bottom: .125rem;
  }
  .u-sm-ml1 {
    margin-left: .125rem;
  }
  .u-sm-mx1 {
    margin-left: .125rem;
    margin-right: .125rem;
  }
  .u-sm-my1 {
    margin-top: .125rem;
    margin-bottom: .125rem;
  }
  .u-sm-m2 {
    margin: .3125rem;
  }
  .u-sm-mt2 {
    margin-top: .3125rem;
  }
  .u-sm-mr2 {
    margin-right: .3125rem;
  }
  .u-sm-mb2 {
    margin-bottom: .3125rem;
  }
  .u-sm-ml2 {
    margin-left: .3125rem;
  }
  .u-sm-mx2 {
    margin-left: .3125rem;
    margin-right: .3125rem;
  }
  .u-sm-my2 {
    margin-top: .3125rem;
    margin-bottom: .3125rem;
  }
  .u-sm-m3 {
    margin: .625rem;
  }
  .u-sm-mt3 {
    margin-top: .625rem;
  }
  .u-sm-mr3 {
    margin-right: .625rem;
  }
  .u-sm-mb3 {
    margin-bottom: .625rem;
  }
  .u-sm-ml3 {
    margin-left: .625rem;
  }
  .u-sm-mx3 {
    margin-left: .625rem;
    margin-right: .625rem;
  }
  .u-sm-my3 {
    margin-top: .625rem;
    margin-bottom: .625rem;
  }
  .u-sm-m4 {
    margin: 1.25rem;
  }
  .u-sm-mt4 {
    margin-top: 1.25rem;
  }
  .u-sm-mr4 {
    margin-right: 1.25rem;
  }
  .u-sm-mb4 {
    margin-bottom: 1.25rem;
  }
  .u-sm-ml4 {
    margin-left: 1.25rem;
  }
  .u-sm-mx4 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
  .u-sm-my4 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .u-sm-m5 {
    margin: 1.875rem;
  }
  .u-sm-mt5 {
    margin-top: 1.875rem;
  }
  .u-sm-mr5 {
    margin-right: 1.875rem;
  }
  .u-sm-mb5 {
    margin-bottom: 1.875rem;
  }
  .u-sm-ml5 {
    margin-left: 1.875rem;
  }
  .u-sm-mx5 {
    margin-left: 1.875rem;
    margin-right: 1.875rem;
  }
  .u-sm-my5 {
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
  }
  .u-sm-m6 {
    margin: 2.5rem;
  }
  .u-sm-mt6 {
    margin-top: 2.5rem;
  }
  .u-sm-mr6 {
    margin-right: 2.5rem;
  }
  .u-sm-mb6 {
    margin-bottom: 2.5rem;
  }
  .u-sm-ml6 {
    margin-left: 2.5rem;
  }
  .u-sm-mx6 {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }
  .u-sm-my6 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .u-sm-m7 {
    margin: 3.125rem;
  }
  .u-sm-mt7 {
    margin-top: 3.125rem;
  }
  .u-sm-mr7 {
    margin-right: 3.125rem;
  }
  .u-sm-mb7 {
    margin-bottom: 3.125rem;
  }
  .u-sm-ml7 {
    margin-left: 3.125rem;
  }
  .u-sm-mx7 {
    margin-left: 3.125rem;
    margin-right: 3.125rem;
  }
  .u-sm-my7 {
    margin-top: 3.125rem;
    margin-bottom: 3.125rem;
  }
  .u-sm-m8 {
    margin: 3.75rem;
  }
  .u-sm-mt8 {
    margin-top: 3.75rem;
  }
  .u-sm-mr8 {
    margin-right: 3.75rem;
  }
  .u-sm-mb8 {
    margin-bottom: 3.75rem;
  }
  .u-sm-ml8 {
    margin-left: 3.75rem;
  }
  .u-sm-mx8 {
    margin-left: 3.75rem;
    margin-right: 3.75rem;
  }
  .u-sm-my8 {
    margin-top: 3.75rem;
    margin-bottom: 3.75rem;
  }
  .u-sm-mxAuto {
    margin-left: auto;
    margin-right: auto;
  }
}

/*
   Medium breakpoint
   ========================================================================== */
@media (min-width: 600px) {
  .u-md-m0 {
    margin: 0;
  }
  .u-md-mt0 {
    margin-top: 0;
  }
  .u-md-mr0 {
    margin-right: 0;
  }
  .u-md-mb0 {
    margin-bottom: 0;
  }
  .u-md-ml0 {
    margin-left: 0;
  }
  .u-md-mx0 {
    margin-left: 0;
    margin-right: 0;
  }
  .u-md-my0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .u-md-m1 {
    margin: .125rem;
  }
  .u-md-mt1 {
    margin-top: .125rem;
  }
  .u-md-mr1 {
    margin-right: .125rem;
  }
  .u-md-mb1 {
    margin-bottom: .125rem;
  }
  .u-md-ml1 {
    margin-left: .125rem;
  }
  .u-md-mx1 {
    margin-left: .125rem;
    margin-right: .125rem;
  }
  .u-md-my1 {
    margin-top: .125rem;
    margin-bottom: .125rem;
  }
  .u-md-m2 {
    margin: .3125rem;
  }
  .u-md-mt2 {
    margin-top: .3125rem;
  }
  .u-md-mr2 {
    margin-right: .3125rem;
  }
  .u-md-mb2 {
    margin-bottom: .3125rem;
  }
  .u-md-ml2 {
    margin-left: .3125rem;
  }
  .u-md-mx2 {
    margin-left: .3125rem;
    margin-right: .3125rem;
  }
  .u-md-my2 {
    margin-top: .3125rem;
    margin-bottom: .3125rem;
  }
  .u-md-m3 {
    margin: .625rem;
  }
  .u-md-mt3 {
    margin-top: .625rem;
  }
  .u-md-mr3 {
    margin-right: .625rem;
  }
  .u-md-mb3 {
    margin-bottom: .625rem;
  }
  .u-md-ml3 {
    margin-left: .625rem;
  }
  .u-md-mx3 {
    margin-left: .625rem;
    margin-right: .625rem;
  }
  .u-md-my3 {
    margin-top: .625rem;
    margin-bottom: .625rem;
  }
  .u-md-m4 {
    margin: 1.25rem;
  }
  .u-md-mt4 {
    margin-top: 1.25rem;
  }
  .u-md-mr4 {
    margin-right: 1.25rem;
  }
  .u-md-mb4 {
    margin-bottom: 1.25rem;
  }
  .u-md-ml4 {
    margin-left: 1.25rem;
  }
  .u-md-mx4 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
  .u-md-my4 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .u-md-m5 {
    margin: 1.875rem;
  }
  .u-md-mt5 {
    margin-top: 1.875rem;
  }
  .u-md-mr5 {
    margin-right: 1.875rem;
  }
  .u-md-mb5 {
    margin-bottom: 1.875rem;
  }
  .u-md-ml5 {
    margin-left: 1.875rem;
  }
  .u-md-mx5 {
    margin-left: 1.875rem;
    margin-right: 1.875rem;
  }
  .u-md-my5 {
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
  }
  .u-md-m6 {
    margin: 2.5rem;
  }
  .u-md-mt6 {
    margin-top: 2.5rem;
  }
  .u-md-mr6 {
    margin-right: 2.5rem;
  }
  .u-md-mb6 {
    margin-bottom: 2.5rem;
  }
  .u-md-ml6 {
    margin-left: 2.5rem;
  }
  .u-md-mx6 {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }
  .u-md-my6 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .u-md-m7 {
    margin: 3.125rem;
  }
  .u-md-mt7 {
    margin-top: 3.125rem;
  }
  .u-md-mr7 {
    margin-right: 3.125rem;
  }
  .u-md-mb7 {
    margin-bottom: 3.125rem;
  }
  .u-md-ml7 {
    margin-left: 3.125rem;
  }
  .u-md-mx7 {
    margin-left: 3.125rem;
    margin-right: 3.125rem;
  }
  .u-md-my7 {
    margin-top: 3.125rem;
    margin-bottom: 3.125rem;
  }
  .u-md-m8 {
    margin: 3.75rem;
  }
  .u-md-mt8 {
    margin-top: 3.75rem;
  }
  .u-md-mr8 {
    margin-right: 3.75rem;
  }
  .u-md-mb8 {
    margin-bottom: 3.75rem;
  }
  .u-md-ml8 {
    margin-left: 3.75rem;
  }
  .u-md-mx8 {
    margin-left: 3.75rem;
    margin-right: 3.75rem;
  }
  .u-md-my8 {
    margin-top: 3.75rem;
    margin-bottom: 3.75rem;
  }
  .u-md-mxAuto {
    margin-left: auto;
    margin-right: auto;
  }
}

/*
   Large breakpoint
   ========================================================================== */
@media (min-width: 840px) {
  .u-lg-m0 {
    margin: 0;
  }
  .u-lg-mt0 {
    margin-top: 0;
  }
  .u-lg-mr0 {
    margin-right: 0;
  }
  .u-lg-mb0 {
    margin-bottom: 0;
  }
  .u-lg-ml0 {
    margin-left: 0;
  }
  .u-lg-mx0 {
    margin-left: 0;
    margin-right: 0;
  }
  .u-lg-my0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .u-lg-m1 {
    margin: .125rem;
  }
  .u-lg-mt1 {
    margin-top: .125rem;
  }
  .u-lg-mr1 {
    margin-right: .125rem;
  }
  .u-lg-mb1 {
    margin-bottom: .125rem;
  }
  .u-lg-ml1 {
    margin-left: .125rem;
  }
  .u-lg-mx1 {
    margin-left: .125rem;
    margin-right: .125rem;
  }
  .u-lg-my1 {
    margin-top: .125rem;
    margin-bottom: .125rem;
  }
  .u-lg-m2 {
    margin: .3125rem;
  }
  .u-lg-mt2 {
    margin-top: .3125rem;
  }
  .u-lg-mr2 {
    margin-right: .3125rem;
  }
  .u-lg-mb2 {
    margin-bottom: .3125rem;
  }
  .u-lg-ml2 {
    margin-left: .3125rem;
  }
  .u-lg-mx2 {
    margin-left: .3125rem;
    margin-right: .3125rem;
  }
  .u-lg-my2 {
    margin-top: .3125rem;
    margin-bottom: .3125rem;
  }
  .u-lg-m3 {
    margin: .625rem;
  }
  .u-lg-mt3 {
    margin-top: .625rem;
  }
  .u-lg-mr3 {
    margin-right: .625rem;
  }
  .u-lg-mb3 {
    margin-bottom: .625rem;
  }
  .u-lg-ml3 {
    margin-left: .625rem;
  }
  .u-lg-mx3 {
    margin-left: .625rem;
    margin-right: .625rem;
  }
  .u-lg-my3 {
    margin-top: .625rem;
    margin-bottom: .625rem;
  }
  .u-lg-m4 {
    margin: 1.25rem;
  }
  .u-lg-mt4 {
    margin-top: 1.25rem;
  }
  .u-lg-mr4 {
    margin-right: 1.25rem;
  }
  .u-lg-mb4 {
    margin-bottom: 1.25rem;
  }
  .u-lg-ml4 {
    margin-left: 1.25rem;
  }
  .u-lg-mx4 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
  .u-lg-my4 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .u-lg-m5 {
    margin: 1.875rem;
  }
  .u-lg-mt5 {
    margin-top: 1.875rem;
  }
  .u-lg-mr5 {
    margin-right: 1.875rem;
  }
  .u-lg-mb5 {
    margin-bottom: 1.875rem;
  }
  .u-lg-ml5 {
    margin-left: 1.875rem;
  }
  .u-lg-mx5 {
    margin-left: 1.875rem;
    margin-right: 1.875rem;
  }
  .u-lg-my5 {
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
  }
  .u-lg-m6 {
    margin: 2.5rem;
  }
  .u-lg-mt6 {
    margin-top: 2.5rem;
  }
  .u-lg-mr6 {
    margin-right: 2.5rem;
  }
  .u-lg-mb6 {
    margin-bottom: 2.5rem;
  }
  .u-lg-ml6 {
    margin-left: 2.5rem;
  }
  .u-lg-mx6 {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }
  .u-lg-my6 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .u-lg-m7 {
    margin: 3.125rem;
  }
  .u-lg-mt7 {
    margin-top: 3.125rem;
  }
  .u-lg-mr7 {
    margin-right: 3.125rem;
  }
  .u-lg-mb7 {
    margin-bottom: 3.125rem;
  }
  .u-lg-ml7 {
    margin-left: 3.125rem;
  }
  .u-lg-mx7 {
    margin-left: 3.125rem;
    margin-right: 3.125rem;
  }
  .u-lg-my7 {
    margin-top: 3.125rem;
    margin-bottom: 3.125rem;
  }
  .u-lg-m8 {
    margin: 3.75rem;
  }
  .u-lg-mt8 {
    margin-top: 3.75rem;
  }
  .u-lg-mr8 {
    margin-right: 3.75rem;
  }
  .u-lg-mb8 {
    margin-bottom: 3.75rem;
  }
  .u-lg-ml8 {
    margin-left: 3.75rem;
  }
  .u-lg-mx8 {
    margin-left: 3.75rem;
    margin-right: 3.75rem;
  }
  .u-lg-my8 {
    margin-top: 3.75rem;
    margin-bottom: 3.75rem;
  }
  .u-lg-mxAuto {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   #OPACITY
   ========================================================================== */
.u-opacity100 {
  opacity: 1;
}

.u-opacity90 {
  opacity: .9;
}

.u-opacity80 {
  opacity: .8;
}

.u-opacity70 {
  opacity: .7;
}

.u-opacity60 {
  opacity: .6;
}

.u-opacity50 {
  opacity: .5;
}

.u-opacity40 {
  opacity: .4;
}

.u-opacity30 {
  opacity: .3;
}

.u-opacity20 {
  opacity: .2;
}

.u-opacity10 {
  opacity: .1;
}

.u-opacity05 {
  opacity: .05;
}

.u-opacity025 {
  opacity: .025;
}

.u-opacity0 {
  opacity: 0;
}

/* ==========================================================================
 * #MARGIN
 * --------------------------------------------------------------------------
 * Positioning utility classes.
 *
 * u-posAbsolute - Absolutely position an element.
 * u-posAbsoluteCenter - Absolutely position and center an element.
 * u-posFit - Fit an element to the dimensions of its parent
 * u-posFullScreen - Fixes an element over the viewport
 * u-posFixed - Fixed position an element.
 * u-posFixedCenter - Fix an element in the center of the viewport
 * u-posRelative - Relatively position an element.
 * u-posStatic - Static position an element.
 * u-posMiddle - Vertically center an element.
 * ========================================================================== */
.u-p0 {
  padding: 0;
}

.u-pt0 {
  padding-top: 0;
}

.u-pr0 {
  padding-right: 0;
}

.u-pb0 {
  padding-bottom: 0;
}

.u-pl0 {
  padding-left: 0;
}

.u-px0 {
  padding-left: 0;
  padding-right: 0;
}

.u-py0 {
  padding-top: 0;
  padding-bottom: 0;
}

.u-p1 {
  padding: .125rem;
}

.u-pt1 {
  padding-top: .125rem;
}

.u-pr1 {
  padding-right: .125rem;
}

.u-pb1 {
  padding-bottom: .125rem;
}

.u-pl1 {
  padding-left: .125rem;
}

.u-px1 {
  padding-left: .125rem;
  padding-right: .125rem;
}

.u-py1 {
  padding-top: .125rem;
  padding-bottom: .125rem;
}

.u-p2 {
  padding: .3125rem;
}

.u-pt2 {
  padding-top: .3125rem;
}

.u-pr2 {
  padding-right: .3125rem;
}

.u-pb2 {
  padding-bottom: .3125rem;
}

.u-pl2 {
  padding-left: .3125rem;
}

.u-px2 {
  padding-left: .3125rem;
  padding-right: .3125rem;
}

.u-py2 {
  padding-top: .3125rem;
  padding-bottom: .3125rem;
}

.u-p3 {
  padding: .625rem;
}

.u-pt3 {
  padding-top: .625rem;
}

.u-pr3 {
  padding-right: .625rem;
}

.u-pb3 {
  padding-bottom: .625rem;
}

.u-pl3 {
  padding-left: .625rem;
}

.u-px3 {
  padding-left: .625rem;
  padding-right: .625rem;
}

.u-py3 {
  padding-top: .625rem;
  padding-bottom: .625rem;
}

.u-p4 {
  padding: 1.25rem;
}

.u-pt4 {
  padding-top: 1.25rem;
}

.u-pr4 {
  padding-right: 1.25rem;
}

.u-pb4 {
  padding-bottom: 1.25rem;
}

.u-pl4 {
  padding-left: 1.25rem;
}

.u-px4 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.u-py4 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.u-p5 {
  padding: 1.875rem;
}

.u-pt5 {
  padding-top: 1.875rem;
}

.u-pr5 {
  padding-right: 1.875rem;
}

.u-pb5 {
  padding-bottom: 1.875rem;
}

.u-pl5 {
  padding-left: 1.875rem;
}

.u-px5 {
  padding-left: 1.875rem;
  padding-right: 1.875rem;
}

.u-py5 {
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}

.u-p6 {
  padding: 2.5rem;
}

.u-pt6 {
  padding-top: 2.5rem;
}

.u-pr6 {
  padding-right: 2.5rem;
}

.u-pb6 {
  padding-bottom: 2.5rem;
}

.u-pl6 {
  padding-left: 2.5rem;
}

.u-px6 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.u-py6 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.u-p7 {
  padding: 3.125rem;
}

.u-pt7 {
  padding-top: 3.125rem;
}

.u-pr7 {
  padding-right: 3.125rem;
}

.u-pb7 {
  padding-bottom: 3.125rem;
}

.u-pl7 {
  padding-left: 3.125rem;
}

.u-px7 {
  padding-left: 3.125rem;
  padding-right: 3.125rem;
}

.u-py7 {
  padding-top: 3.125rem;
  padding-bottom: 3.125rem;
}

.u-p8 {
  padding: 3.75rem;
}

.u-pt8 {
  padding-top: 3.75rem;
}

.u-pr8 {
  padding-right: 3.75rem;
}

.u-pb8 {
  padding-bottom: 3.75rem;
}

.u-pl8 {
  padding-left: 3.75rem;
}

.u-px8 {
  padding-left: 3.75rem;
  padding-right: 3.75rem;
}

.u-py8 {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}

/* ==========================================================================
   Responsive classes
   ========================================================================== */
/*
   Small breakpoint
   ========================================================================== */
@media (min-width: 360px) {
  .u-sm-p0 {
    padding: 0;
  }
  .u-sm-pt0 {
    padding-top: 0;
  }
  .u-sm-pr0 {
    padding-right: 0;
  }
  .u-sm-pb0 {
    padding-bottom: 0;
  }
  .u-sm-pl0 {
    padding-left: 0;
  }
  .u-sm-px0 {
    padding-left: 0;
    padding-right: 0;
  }
  .u-sm-py0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .u-sm-p1 {
    padding: .125rem;
  }
  .u-sm-pt1 {
    padding-top: .125rem;
  }
  .u-sm-pr1 {
    padding-right: .125rem;
  }
  .u-sm-pb1 {
    padding-bottom: .125rem;
  }
  .u-sm-pl1 {
    padding-left: .125rem;
  }
  .u-sm-px1 {
    padding-left: .125rem;
    padding-right: .125rem;
  }
  .u-sm-py1 {
    padding-top: .125rem;
    padding-bottom: .125rem;
  }
  .u-sm-p2 {
    padding: .3125rem;
  }
  .u-sm-pt2 {
    padding-top: .3125rem;
  }
  .u-sm-pr2 {
    padding-right: .3125rem;
  }
  .u-sm-pb2 {
    padding-bottom: .3125rem;
  }
  .u-sm-pl2 {
    padding-left: .3125rem;
  }
  .u-sm-px2 {
    padding-left: .3125rem;
    padding-right: .3125rem;
  }
  .u-sm-py2 {
    padding-top: .3125rem;
    padding-bottom: .3125rem;
  }
  .u-sm-p3 {
    padding: .625rem;
  }
  .u-sm-pt3 {
    padding-top: .625rem;
  }
  .u-sm-pr3 {
    padding-right: .625rem;
  }
  .u-sm-pb3 {
    padding-bottom: .625rem;
  }
  .u-sm-pl3 {
    padding-left: .625rem;
  }
  .u-sm-px3 {
    padding-left: .625rem;
    padding-right: .625rem;
  }
  .u-sm-py3 {
    padding-top: .625rem;
    padding-bottom: .625rem;
  }
  .u-sm-p4 {
    padding: 1.25rem;
  }
  .u-sm-pt4 {
    padding-top: 1.25rem;
  }
  .u-sm-pr4 {
    padding-right: 1.25rem;
  }
  .u-sm-pb4 {
    padding-bottom: 1.25rem;
  }
  .u-sm-pl4 {
    padding-left: 1.25rem;
  }
  .u-sm-px4 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .u-sm-py4 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .u-sm-p5 {
    padding: 1.875rem;
  }
  .u-sm-pt5 {
    padding-top: 1.875rem;
  }
  .u-sm-pr5 {
    padding-right: 1.875rem;
  }
  .u-sm-pb5 {
    padding-bottom: 1.875rem;
  }
  .u-sm-pl5 {
    padding-left: 1.875rem;
  }
  .u-sm-px5 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
  .u-sm-py5 {
    padding-top: 1.875rem;
    padding-bottom: 1.875rem;
  }
  .u-sm-p6 {
    padding: 2.5rem;
  }
  .u-sm-pt6 {
    padding-top: 2.5rem;
  }
  .u-sm-pr6 {
    padding-right: 2.5rem;
  }
  .u-sm-pb6 {
    padding-bottom: 2.5rem;
  }
  .u-sm-pl6 {
    padding-left: 2.5rem;
  }
  .u-sm-px6 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .u-sm-py6 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .u-sm-p7 {
    padding: 3.125rem;
  }
  .u-sm-pt7 {
    padding-top: 3.125rem;
  }
  .u-sm-pr7 {
    padding-right: 3.125rem;
  }
  .u-sm-pb7 {
    padding-bottom: 3.125rem;
  }
  .u-sm-pl7 {
    padding-left: 3.125rem;
  }
  .u-sm-px7 {
    padding-left: 3.125rem;
    padding-right: 3.125rem;
  }
  .u-sm-py7 {
    padding-top: 3.125rem;
    padding-bottom: 3.125rem;
  }
  .u-sm-p8 {
    padding: 3.75rem;
  }
  .u-sm-pt8 {
    padding-top: 3.75rem;
  }
  .u-sm-pr8 {
    padding-right: 3.75rem;
  }
  .u-sm-pb8 {
    padding-bottom: 3.75rem;
  }
  .u-sm-pl8 {
    padding-left: 3.75rem;
  }
  .u-sm-px8 {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
  }
  .u-sm-py8 {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }
}

/*
   Medium breakpoint
   ========================================================================== */
@media (min-width: 600px) {
  .u-md-p0 {
    padding: 0;
  }
  .u-md-pt0 {
    padding-top: 0;
  }
  .u-md-pr0 {
    padding-right: 0;
  }
  .u-md-pb0 {
    padding-bottom: 0;
  }
  .u-md-pl0 {
    padding-left: 0;
  }
  .u-md-px0 {
    padding-left: 0;
    padding-right: 0;
  }
  .u-md-py0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .u-md-p1 {
    padding: .125rem;
  }
  .u-md-pt1 {
    padding-top: .125rem;
  }
  .u-md-pr1 {
    padding-right: .125rem;
  }
  .u-md-pb1 {
    padding-bottom: .125rem;
  }
  .u-md-pl1 {
    padding-left: .125rem;
  }
  .u-md-px1 {
    padding-left: .125rem;
    padding-right: .125rem;
  }
  .u-md-py1 {
    padding-top: .125rem;
    padding-bottom: .125rem;
  }
  .u-md-p2 {
    padding: .3125rem;
  }
  .u-md-pt2 {
    padding-top: .3125rem;
  }
  .u-md-pr2 {
    padding-right: .3125rem;
  }
  .u-md-pb2 {
    padding-bottom: .3125rem;
  }
  .u-md-pl2 {
    padding-left: .3125rem;
  }
  .u-md-px2 {
    padding-left: .3125rem;
    padding-right: .3125rem;
  }
  .u-md-py2 {
    padding-top: .3125rem;
    padding-bottom: .3125rem;
  }
  .u-md-p3 {
    padding: .625rem;
  }
  .u-md-pt3 {
    padding-top: .625rem;
  }
  .u-md-pr3 {
    padding-right: .625rem;
  }
  .u-md-pb3 {
    padding-bottom: .625rem;
  }
  .u-md-pl3 {
    padding-left: .625rem;
  }
  .u-md-px3 {
    padding-left: .625rem;
    padding-right: .625rem;
  }
  .u-md-py3 {
    padding-top: .625rem;
    padding-bottom: .625rem;
  }
  .u-md-p4 {
    padding: 1.25rem;
  }
  .u-md-pt4 {
    padding-top: 1.25rem;
  }
  .u-md-pr4 {
    padding-right: 1.25rem;
  }
  .u-md-pb4 {
    padding-bottom: 1.25rem;
  }
  .u-md-pl4 {
    padding-left: 1.25rem;
  }
  .u-md-px4 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .u-md-py4 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .u-md-p5 {
    padding: 1.875rem;
  }
  .u-md-pt5 {
    padding-top: 1.875rem;
  }
  .u-md-pr5 {
    padding-right: 1.875rem;
  }
  .u-md-pb5 {
    padding-bottom: 1.875rem;
  }
  .u-md-pl5 {
    padding-left: 1.875rem;
  }
  .u-md-px5 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
  .u-md-py5 {
    padding-top: 1.875rem;
    padding-bottom: 1.875rem;
  }
  .u-md-p6 {
    padding: 2.5rem;
  }
  .u-md-pt6 {
    padding-top: 2.5rem;
  }
  .u-md-pr6 {
    padding-right: 2.5rem;
  }
  .u-md-pb6 {
    padding-bottom: 2.5rem;
  }
  .u-md-pl6 {
    padding-left: 2.5rem;
  }
  .u-md-px6 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .u-md-py6 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .u-md-p7 {
    padding: 3.125rem;
  }
  .u-md-pt7 {
    padding-top: 3.125rem;
  }
  .u-md-pr7 {
    padding-right: 3.125rem;
  }
  .u-md-pb7 {
    padding-bottom: 3.125rem;
  }
  .u-md-pl7 {
    padding-left: 3.125rem;
  }
  .u-md-px7 {
    padding-left: 3.125rem;
    padding-right: 3.125rem;
  }
  .u-md-py7 {
    padding-top: 3.125rem;
    padding-bottom: 3.125rem;
  }
  .u-md-p8 {
    padding: 3.75rem;
  }
  .u-md-pt8 {
    padding-top: 3.75rem;
  }
  .u-md-pr8 {
    padding-right: 3.75rem;
  }
  .u-md-pb8 {
    padding-bottom: 3.75rem;
  }
  .u-md-pl8 {
    padding-left: 3.75rem;
  }
  .u-md-px8 {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
  }
  .u-md-py8 {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }
}

/*
   Large breakpoint
   ========================================================================== */
@media (min-width: 840px) {
  .u-lg-p0 {
    padding: 0;
  }
  .u-lg-pt0 {
    padding-top: 0;
  }
  .u-lg-pr0 {
    padding-right: 0;
  }
  .u-lg-pb0 {
    padding-bottom: 0;
  }
  .u-lg-pl0 {
    padding-left: 0;
  }
  .u-lg-px0 {
    padding-left: 0;
    padding-right: 0;
  }
  .u-lg-py0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .u-lg-p1 {
    padding: .125rem;
  }
  .u-lg-pt1 {
    padding-top: .125rem;
  }
  .u-lg-pr1 {
    padding-right: .125rem;
  }
  .u-lg-pb1 {
    padding-bottom: .125rem;
  }
  .u-lg-pl1 {
    padding-left: .125rem;
  }
  .u-lg-px1 {
    padding-left: .125rem;
    padding-right: .125rem;
  }
  .u-lg-py1 {
    padding-top: .125rem;
    padding-bottom: .125rem;
  }
  .u-lg-p2 {
    padding: .3125rem;
  }
  .u-lg-pt2 {
    padding-top: .3125rem;
  }
  .u-lg-pr2 {
    padding-right: .3125rem;
  }
  .u-lg-pb2 {
    padding-bottom: .3125rem;
  }
  .u-lg-pl2 {
    padding-left: .3125rem;
  }
  .u-lg-px2 {
    padding-left: .3125rem;
    padding-right: .3125rem;
  }
  .u-lg-py2 {
    padding-top: .3125rem;
    padding-bottom: .3125rem;
  }
  .u-lg-p3 {
    padding: .625rem;
  }
  .u-lg-pt3 {
    padding-top: .625rem;
  }
  .u-lg-pr3 {
    padding-right: .625rem;
  }
  .u-lg-pb3 {
    padding-bottom: .625rem;
  }
  .u-lg-pl3 {
    padding-left: .625rem;
  }
  .u-lg-px3 {
    padding-left: .625rem;
    padding-right: .625rem;
  }
  .u-lg-py3 {
    padding-top: .625rem;
    padding-bottom: .625rem;
  }
  .u-lg-p4 {
    padding: 1.25rem;
  }
  .u-lg-pt4 {
    padding-top: 1.25rem;
  }
  .u-lg-pr4 {
    padding-right: 1.25rem;
  }
  .u-lg-pb4 {
    padding-bottom: 1.25rem;
  }
  .u-lg-pl4 {
    padding-left: 1.25rem;
  }
  .u-lg-px4 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .u-lg-py4 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .u-lg-p5 {
    padding: 1.875rem;
  }
  .u-lg-pt5 {
    padding-top: 1.875rem;
  }
  .u-lg-pr5 {
    padding-right: 1.875rem;
  }
  .u-lg-pb5 {
    padding-bottom: 1.875rem;
  }
  .u-lg-pl5 {
    padding-left: 1.875rem;
  }
  .u-lg-px5 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
  .u-lg-py5 {
    padding-top: 1.875rem;
    padding-bottom: 1.875rem;
  }
  .u-lg-p6 {
    padding: 2.5rem;
  }
  .u-lg-pt6 {
    padding-top: 2.5rem;
  }
  .u-lg-pr6 {
    padding-right: 2.5rem;
  }
  .u-lg-pb6 {
    padding-bottom: 2.5rem;
  }
  .u-lg-pl6 {
    padding-left: 2.5rem;
  }
  .u-lg-px6 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .u-lg-py6 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .u-lg-p7 {
    padding: 3.125rem;
  }
  .u-lg-pt7 {
    padding-top: 3.125rem;
  }
  .u-lg-pr7 {
    padding-right: 3.125rem;
  }
  .u-lg-pb7 {
    padding-bottom: 3.125rem;
  }
  .u-lg-pl7 {
    padding-left: 3.125rem;
  }
  .u-lg-px7 {
    padding-left: 3.125rem;
    padding-right: 3.125rem;
  }
  .u-lg-py7 {
    padding-top: 3.125rem;
    padding-bottom: 3.125rem;
  }
  .u-lg-p8 {
    padding: 3.75rem;
  }
  .u-lg-pt8 {
    padding-top: 3.75rem;
  }
  .u-lg-pr8 {
    padding-right: 3.75rem;
  }
  .u-lg-pb8 {
    padding-bottom: 3.75rem;
  }
  .u-lg-pl8 {
    padding-left: 3.75rem;
  }
  .u-lg-px8 {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
  }
  .u-lg-py8 {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }
}

/* ==========================================================================
 * #POSITION
 * --------------------------------------------------------------------------
 * Positioning utility classes.
 *
 * u-posAbsolute - Absolutely position an element.
 * u-posAbsoluteCenter - Absolutely position and center an element.
 * u-posFit - Fit an element to the dimensions of its parent
 * u-posFullScreen - Fixes an element over the viewport
 * u-posFixed - Fixed position an element.
 * u-posFixedCenter - Fix an element in the center of the viewport
 * u-posRelative - Relatively position an element.
 * u-posStatic - Static position an element.
 * ========================================================================== */
.u-posRelative {
  position: relative !important;
}

.u-posStatic {
  position: static !important;
}

.u-posFit,
.u-posAbsoluteCenter,
.u-posAbsolute {
  position: absolute !important;
}

/**
 * Element will be centered to its nearest relatively-positioned
 * ancestor.
 */
.u-posFixedCenter,
.u-posAbsoluteCenter {
  left: 50% !important;
  top: 50% !important;
  -ms-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
}

.u-posFit,
.u-posFullScreen {
  bottom: 0 !important;
  left: 0 !important;
  margin: auto !important;
  right: 0 !important;
  top: 0 !important;
}

/**
 * 1. Make sure fixed elements are promoted into a new layer, for performance
 *    reasons.
 */
.u-posFullScreen,
.u-posFixedCenter,
.u-posFixed {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: fixed !important;
}

/**
 * Specify the proportional offset before an object.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 4, 8, 12 section
 */
.u-push1of12 {
  margin-left: calc(100% * 1 / 12) !important;
}

.u-push1of10 {
  margin-left: 10% !important;
}

.u-push1of8 {
  margin-left: 12.5% !important;
}

.u-push1of6,
.u-push2of12 {
  margin-left: calc(100% * 1 / 6) !important;
}

.u-push1of5,
.u-push2of10 {
  margin-left: 20% !important;
}

.u-push1of4,
.u-push2of8,
.u-push3of12 {
  margin-left: 25% !important;
}

.u-push3of10 {
  margin-left: 30% !important;
}

.u-push1of3,
.u-push2of6,
.u-push4of12 {
  margin-left: calc(100% * 1 / 3) !important;
}

.u-push3of8 {
  margin-left: 37.5% !important;
}

.u-push2of5,
.u-push4of10 {
  margin-left: 40% !important;
}

.u-push5of12 {
  margin-left: calc(100% * 5 / 12) !important;
}

.u-push1of2,
.u-push2of4,
.u-push3of6,
.u-push4of8,
.u-push5of10,
.u-push6of12 {
  margin-left: 50% !important;
}

.u-push7of12 {
  margin-left: calc(100% * 7 / 12) !important;
}

.u-push3of5,
.u-push6of10 {
  margin-left: 60% !important;
}

.u-push5of8 {
  margin-left: 62.5% !important;
}

.u-push2of3,
.u-push4of6,
.u-push8of12 {
  margin-left: calc(100% * 2 / 3) !important;
}

.u-push7of10 {
  margin-left: 70% !important;
}

.u-push3of4,
.u-push6of8,
.u-push9of12 {
  margin-left: 75% !important;
}

.u-push4of5,
.u-push8of10 {
  margin-left: 80% !important;
}

.u-push5of6,
.u-push10of12 {
  margin-left: calc(100% * 5 / 6) !important;
}

.u-push7of8 {
  margin-left: 87.5% !important;
}

.u-push9of10 {
  margin-left: 90% !important;
}

.u-push11of12 {
  margin-left: calc(100% * 11 / 12) !important;
}

/*
   Responsive Small Screen
   ========================================================================== */
@media (min-width: 360px) {
  .u-sm-push1of12 {
    margin-left: calc(100% * 1 / 12) !important;
  }
  .u-sm-push1of10 {
    margin-left: 10% !important;
  }
  .u-sm-push1of8 {
    margin-left: 12.5% !important;
  }
  .u-sm-push1of6,
  .u-sm-push2of12 {
    margin-left: calc(100% * 1 / 6) !important;
  }
  .u-sm-push1of5,
  .u-sm-push2of10 {
    margin-left: 20% !important;
  }
  .u-sm-push1of4,
  .u-sm-push2of8,
  .u-sm-push3of12 {
    margin-left: 25% !important;
  }
  .u-sm-push3of10 {
    margin-left: 30% !important;
  }
  .u-sm-push1of3,
  .u-sm-push2of6,
  .u-sm-push4of12 {
    margin-left: calc(100% * 1 / 3) !important;
  }
  .u-sm-push3of8 {
    margin-left: 37.5% !important;
  }
  .u-sm-push2of5,
  .u-sm-push4of10 {
    margin-left: 40% !important;
  }
  .u-sm-push5of12 {
    margin-left: calc(100% * 5 / 12) !important;
  }
  .u-sm-push1of2,
  .u-sm-push2of4,
  .u-sm-push3of6,
  .u-sm-push4of8,
  .u-sm-push5of10,
  .u-sm-push6of12 {
    margin-left: 50% !important;
  }
  .u-sm-push7of12 {
    margin-left: calc(100% * 7 / 12) !important;
  }
  .u-sm-push3of5,
  .u-sm-push6of10 {
    margin-left: 60% !important;
  }
  .u-sm-push5of8 {
    margin-left: 62.5% !important;
  }
  .u-sm-push2of3,
  .u-sm-push4of6,
  .u-sm-push8of12 {
    margin-left: calc(100% * 2 / 3) !important;
  }
  .u-sm-push7of10 {
    margin-left: 70% !important;
  }
  .u-sm-push3of4,
  .u-sm-push6of8,
  .u-sm-push9of12 {
    margin-left: 75% !important;
  }
  .u-sm-push4of5,
  .u-sm-push8of10 {
    margin-left: 80% !important;
  }
  .u-sm-push5of6,
  .u-sm-push10of12 {
    margin-left: calc(100% * 5 / 6) !important;
  }
  .u-sm-push7of8 {
    margin-left: 87.5% !important;
  }
  .u-sm-push9of10 {
    margin-left: 90% !important;
  }
  .u-sm-push11of12 {
    margin-left: calc(100% * 11 / 12) !important;
  }
}

/*
   Responsive Medium Screen
   ========================================================================== */
@media (min-width: 600px) {
  .u-md-push1of12 {
    margin-left: calc(100% * 1 / 12) !important;
  }
  .u-md-push1of10 {
    margin-left: 10% !important;
  }
  .u-md-push1of8 {
    margin-left: 12.5% !important;
  }
  .u-md-push1of6,
  .u-md-push2of12 {
    margin-left: calc(100% * 1 / 6) !important;
  }
  .u-md-push1of5,
  .u-md-push2of10 {
    margin-left: 20% !important;
  }
  .u-md-push1of4,
  .u-md-push2of8,
  .u-md-push3of12 {
    margin-left: 25% !important;
  }
  .u-md-push3of10 {
    margin-left: 30% !important;
  }
  .u-md-push1of3,
  .u-md-push2of6,
  .u-md-push4of12 {
    margin-left: calc(100% * 1 / 3) !important;
  }
  .u-md-push3of8 {
    margin-left: 37.5% !important;
  }
  .u-md-push2of5,
  .u-md-push4of10 {
    margin-left: 40% !important;
  }
  .u-md-push5of12 {
    margin-left: calc(100% * 5 / 12) !important;
  }
  .u-md-push1of2,
  .u-md-push2of4,
  .u-md-push3of6,
  .u-md-push4of8,
  .u-md-push5of10,
  .u-md-push6of12 {
    margin-left: 50% !important;
  }
  .u-md-push7of12 {
    margin-left: calc(100% * 7 / 12) !important;
  }
  .u-md-push3of5,
  .u-md-push6of10 {
    margin-left: 60% !important;
  }
  .u-md-push5of8 {
    margin-left: 62.5% !important;
  }
  .u-md-push2of3,
  .u-md-push4of6,
  .u-md-push8of12 {
    margin-left: calc(100% * 2 / 3) !important;
  }
  .u-md-push7of10 {
    margin-left: 70% !important;
  }
  .u-md-push3of4,
  .u-md-push6of8,
  .u-md-push9of12 {
    margin-left: 75% !important;
  }
  .u-md-push4of5,
  .u-md-push8of10 {
    margin-left: 80% !important;
  }
  .u-md-push5of6,
  .u-md-push10of12 {
    margin-left: calc(100% * 5 / 6) !important;
  }
  .u-md-push7of8 {
    margin-left: 87.5% !important;
  }
  .u-md-push9of10 {
    margin-left: 90% !important;
  }
  .u-md-push11of12 {
    margin-left: calc(100% * 11 / 12) !important;
  }
}

/*
   Responsive Large Screen
   ========================================================================== */
@media (min-width: 840px) {
  .u-lg-push1of12 {
    margin-left: calc(100% * 1 / 12) !important;
  }
  .u-lg-push1of10 {
    margin-left: 10% !important;
  }
  .u-lg-push1of8 {
    margin-left: 12.5% !important;
  }
  .u-lg-push1of6,
  .u-lg-push2of12 {
    margin-left: calc(100% * 1 / 6) !important;
  }
  .u-lg-push1of5,
  .u-lg-push2of10 {
    margin-left: 20% !important;
  }
  .u-lg-push1of4,
  .u-lg-push2of8,
  .u-lg-push3of12 {
    margin-left: 25% !important;
  }
  .u-lg-push3of10 {
    margin-left: 30% !important;
  }
  .u-lg-push1of3,
  .u-lg-push2of6,
  .u-lg-push4of12 {
    margin-left: calc(100% * 1 / 3) !important;
  }
  .u-lg-push3of8 {
    margin-left: 37.5% !important;
  }
  .u-lg-push2of5,
  .u-lg-push4of10 {
    margin-left: 40% !important;
  }
  .u-lg-push5of12 {
    margin-left: calc(100% * 5 / 12) !important;
  }
  .u-lg-push1of2,
  .u-lg-push2of4,
  .u-lg-push3of6,
  .u-lg-push4of8,
  .u-lg-push5of10,
  .u-lg-push6of12 {
    margin-left: 50% !important;
  }
  .u-lg-push7of12 {
    margin-left: calc(100% * 7 / 12) !important;
  }
  .u-lg-push3of5,
  .u-lg-push6of10 {
    margin-left: 60% !important;
  }
  .u-lg-push5of8 {
    margin-left: 62.5% !important;
  }
  .u-lg-push2of3,
  .u-lg-push4of6,
  .u-lg-push8of12 {
    margin-left: calc(100% * 2 / 3) !important;
  }
  .u-lg-push7of10 {
    margin-left: 70% !important;
  }
  .u-lg-push3of4,
  .u-lg-push6of8,
  .u-lg-push9of12 {
    margin-left: 75% !important;
  }
  .u-lg-push4of5,
  .u-lg-push8of10 {
    margin-left: 80% !important;
  }
  .u-lg-push5of6,
  .u-lg-push10of12 {
    margin-left: calc(100% * 5 / 6) !important;
  }
  .u-lg-push7of8 {
    margin-left: 87.5% !important;
  }
  .u-lg-push9of10 {
    margin-left: 90% !important;
  }
  .u-lg-push11of12 {
    margin-left: calc(100% * 11 / 12) !important;
  }
}

/* ==========================================================================
 * #SHADOWS
 * --------------------------------------------------------------------------
 * Box Shadow utilities.
 * ========================================================================== */
.u-shadow1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .02), 0 1px 2px rgba(0, 0, 0, .14);
}

.u-shadow2 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, .06), 0 3px 6px rgba(0, 0, 0, .13);
}

.u-shadow3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, .09), 0 6px 6px rgba(0, 0, 0, .13);
}

.u-shadow4 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, .15), 0 10px 10px rgba(0, 0, 0, .12);
}

.u-shadow5 {
  box-shadow: 0 19px 38px rgba(0, 0, 0, .2), 0 15px 12px rgba(0, 0, 0, .12);
}

/* ==========================================================================
 * #SIZE
 * --------------------------------------------------------------------------
 * Sizing utility classes. Flexbox based.
 *
 * SUIT CSS Size Utils:
 * https://github.com/suitcss/utils-size
 * ========================================================================== */
/* Proportional widths
   ========================================================================== */
/**
 * Specify the proportional width of an object.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
 *
 * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
 *    http://git.io/vllMD
 */
.u-size1of12 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: calc(100% * 1 / 12) !important;
}

.u-size1of10 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: 10% !important;
}

.u-size1of8 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: 12.5% !important;
}

.u-size1of6,
.u-size2of12 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: calc(100% * 1 / 6) !important;
}

.u-size1of5,
.u-size2of10 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: 20% !important;
}

.u-size1of4,
.u-size2of8,
.u-size3of12 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: 25% !important;
}

.u-size3of10 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: 30% !important;
}

.u-size1of3,
.u-size2of6,
.u-size4of12 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: calc(100% * 1 / 3) !important;
}

.u-size3of8 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: 37.5% !important;
}

.u-size2of5,
.u-size4of10 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: 40% !important;
}

.u-size5of12 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: calc(100% * 5 / 12) !important;
}

.u-size1of2,
.u-size2of4,
.u-size3of6,
.u-size4of8,
.u-size5of10,
.u-size6of12 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: 50% !important;
}

.u-size7of12 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: calc(100% * 7 / 12) !important;
}

.u-size3of5,
.u-size6of10 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: 60% !important;
}

.u-size5of8 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: 62.5% !important;
}

.u-size2of3,
.u-size4of6,
.u-size8of12 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: calc(100% * 2 / 3) !important;
}

.u-size7of10 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: 70% !important;
}

.u-size3of4,
.u-size6of8,
.u-size9of12 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: 75% !important;
}

.u-size4of5,
.u-size8of10 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: 80% !important;
}

.u-size5of6,
.u-size10of12 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: calc(100% * 5 / 6) !important;
}

.u-size7of8 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: 87.5% !important;
}

.u-size9of10 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: 90% !important;
}

.u-size11of12 {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
  width: calc(100% * 11 / 12) !important;
}

/* Intrinsic widths
   ========================================================================== */
/**
 * Make an element shrink wrap its content.
 */
.u-sizeFit {
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
}

/**
 * Make an element fill the remaining space.
 *
 * 1. Be explicit to work around IE10 bug with shorthand flex
 *    http://git.io/vllC7
 * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
 *    http://git.io/vllMt
 */
.u-sizeFill {
  -ms-flex: 1 1 0 !important;
  flex: 1 1 0 !important;
  /* 1 */
  -ms-flex-preferred-size: 0 !important;
  flex-basis: 0 !important;
  /* 2 */
}

/**
 * An alternative method to make an element fill the remaining space.
 * Distributes space based on the initial width and height of the element
 *
 * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
 */
.u-sizeFillAlt {
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
  -ms-flex-preferred-size: auto !important;
  flex-basis: auto !important;
}

/**
 * Make an element the width of its parent.
 */
.u-sizeFull {
  width: 100% !important;
}

/*
   Responsive Small Screen
   ========================================================================== */
@media (min-width: 360px) {
  .u-sm-size1of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 1 / 12) !important;
  }
  .u-sm-size1of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 10% !important;
  }
  .u-sm-size1of8 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 12.5% !important;
  }
  .u-sm-size1of6,
  .u-sm-size2of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 1 / 6) !important;
  }
  .u-sm-size1of5,
  .u-sm-size2of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 20% !important;
  }
  .u-sm-size1of4,
  .u-sm-size2of8,
  .u-sm-size3of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 25% !important;
  }
  .u-sm-size3of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 30% !important;
  }
  .u-sm-size1of3,
  .u-sm-size2of6,
  .u-sm-size4of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 1 / 3) !important;
  }
  .u-sm-size3of8 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 37.5% !important;
  }
  .u-sm-size2of5,
  .u-sm-size4of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 40% !important;
  }
  .u-sm-size5of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 5 / 12) !important;
  }
  .u-sm-size1of2,
  .u-sm-size2of4,
  .u-sm-size3of6,
  .u-sm-size4of8,
  .u-sm-size5of10,
  .u-sm-size6of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 50% !important;
  }
  .u-sm-size7of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 7 / 12) !important;
  }
  .u-sm-size3of5,
  .u-sm-size6of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 60% !important;
  }
  .u-sm-size5of8 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 62.5% !important;
  }
  .u-sm-size2of3,
  .u-sm-size4of6,
  .u-sm-size8of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 2 / 3) !important;
  }
  .u-sm-size7of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 70% !important;
  }
  .u-sm-size3of4,
  .u-sm-size6of8,
  .u-sm-size9of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 75% !important;
  }
  .u-sm-size4of5,
  .u-sm-size8of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 80% !important;
  }
  .u-sm-size5of6,
  .u-sm-size10of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 5 / 6) !important;
  }
  .u-sm-size7of8 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 87.5% !important;
  }
  .u-sm-size9of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 90% !important;
  }
  .u-sm-size11of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 11 / 12) !important;
  }
  .u-sm-sizeFit {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
  }
  .u-sm-sizeFill {
    -ms-flex: 1 1 0 !important;
    flex: 1 1 0 !important;
    -ms-flex-preferred-size: 0 !important;
    flex-basis: 0 !important;
  }
  .u-sm-sizeFillAlt {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
  }
  .u-sm-sizeFull {
    width: 100% !important;
  }
}

/*
   Responsive Medium Screen
   ========================================================================== */
@media (min-width: 600px) {
  .u-md-size1of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 1 / 12) !important;
  }
  .u-md-size1of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 10% !important;
  }
  .u-md-size1of8 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 12.5% !important;
  }
  .u-md-size1of6,
  .u-md-size2of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 1 / 6) !important;
  }
  .u-md-size1of5,
  .u-md-size2of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 20% !important;
  }
  .u-md-size1of4,
  .u-md-size2of8,
  .u-md-size3of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 25% !important;
  }
  .u-md-size3of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 30% !important;
  }
  .u-md-size1of3,
  .u-md-size2of6,
  .u-md-size4of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 1 / 3) !important;
  }
  .u-md-size3of8 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 37.5% !important;
  }
  .u-md-size2of5,
  .u-md-size4of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 40% !important;
  }
  .u-md-size5of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 5 / 12) !important;
  }
  .u-md-size1of2,
  .u-md-size2of4,
  .u-md-size3of6,
  .u-md-size4of8,
  .u-md-size5of10,
  .u-md-size6of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 50% !important;
  }
  .u-md-size7of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 7 / 12) !important;
  }
  .u-md-size3of5,
  .u-md-size6of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 60% !important;
  }
  .u-md-size5of8 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 62.5% !important;
  }
  .u-md-size2of3,
  .u-md-size4of6,
  .u-md-size8of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 2 / 3) !important;
  }
  .u-md-size7of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 70% !important;
  }
  .u-md-size3of4,
  .u-md-size6of8,
  .u-md-size9of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 75% !important;
  }
  .u-md-size4of5,
  .u-md-size8of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 80% !important;
  }
  .u-md-size5of6,
  .u-md-size10of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 5 / 6) !important;
  }
  .u-md-size7of8 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 87.5% !important;
  }
  .u-md-size9of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 90% !important;
  }
  .u-md-size11of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 11 / 12) !important;
  }
  .u-md-sizeFit {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
  }
  .u-md-sizeFill {
    -ms-flex: 1 1 0 !important;
    flex: 1 1 0 !important;
    -ms-flex-preferred-size: 0 !important;
    flex-basis: 0 !important;
  }
  .u-md-sizeFillAlt {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
  }
  .u-md-sizeFull {
    width: 100% !important;
  }
}

/*
   Responsive Large Screen
   ========================================================================== */
@media (min-width: 840px) {
  .u-lg-size1of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 1 / 12) !important;
  }
  .u-lg-size1of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 10% !important;
  }
  .u-lg-size1of8 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 12.5% !important;
  }
  .u-lg-size1of6,
  .u-lg-size2of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 1 / 6) !important;
  }
  .u-lg-size1of5,
  .u-lg-size2of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 20% !important;
  }
  .u-lg-size1of4,
  .u-lg-size2of8,
  .u-lg-size3of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 25% !important;
  }
  .u-lg-size3of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 30% !important;
  }
  .u-lg-size1of3,
  .u-lg-size2of6,
  .u-lg-size4of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 1 / 3) !important;
  }
  .u-lg-size3of8 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 37.5% !important;
  }
  .u-lg-size2of5,
  .u-lg-size4of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 40% !important;
  }
  .u-lg-size5of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 5 / 12) !important;
  }
  .u-lg-size1of2,
  .u-lg-size2of4,
  .u-lg-size3of6,
  .u-lg-size4of8,
  .u-lg-size5of10,
  .u-lg-size6of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 50% !important;
  }
  .u-lg-size7of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 7 / 12) !important;
  }
  .u-lg-size3of5,
  .u-lg-size6of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 60% !important;
  }
  .u-lg-size5of8 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 62.5% !important;
  }
  .u-lg-size2of3,
  .u-lg-size4of6,
  .u-lg-size8of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 2 / 3) !important;
  }
  .u-lg-size7of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 70% !important;
  }
  .u-lg-size3of4,
  .u-lg-size6of8,
  .u-lg-size9of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 75% !important;
  }
  .u-lg-size4of5,
  .u-lg-size8of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 80% !important;
  }
  .u-lg-size5of6,
  .u-lg-size10of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 5 / 6) !important;
  }
  .u-lg-size7of8 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 87.5% !important;
  }
  .u-lg-size9of10 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: 90% !important;
  }
  .u-lg-size11of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 11 / 12) !important;
  }
  .u-lg-sizeFit {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
  }
  .u-lg-sizeFill {
    -ms-flex: 1 1 0 !important;
    flex: 1 1 0 !important;
    -ms-flex-preferred-size: 0 !important;
    flex-basis: 0 !important;
  }
  .u-lg-sizeFillAlt {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
  }
  .u-lg-sizeFull {
    width: 100% !important;
  }
}

/* ==========================================================================
 * Text utility classes
 * --------------------------------------------------------------------------
 * Utilities applied to text elements.
 * ========================================================================== */
/**
 * Text decoration
 */
.u-strike {
  text-decoration: line-through !important;
}

.u-underline {
  text-decoration: underline !important;
}

.u-noDeco {
  text-decoration: none !important;
}

/**
 * Text Transform
 */
.u-caps {
  text-transform: capitalize !important;
}

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

.u-allCaps {
  text-transform: uppercase !important;
}

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

/**
 * Word breaking
 *
 * Break strings when their length exceeds the width of their container.
 */
.u-breakWord {
  word-wrap: break-word !important;
}

/**
 * Horizontal text alignment
 */
.u-txtCenter {
  text-align: center !important;
}

.u-txtLeft {
  text-align: left !important;
}

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

@media (min-width: 360px) {
  .u-sm-txtCenter {
    text-align: center !important;
  }
  .u-sm-txtLeft {
    text-align: left !important;
  }
  .u-sm-txtRight {
    text-align: right !important;
  }
}

@media (min-width: 600px) {
  .u-md-txtCenter {
    text-align: center !important;
  }
  .u-md-txtLeft {
    text-align: left !important;
  }
  .u-md-txtRight {
    text-align: right !important;
  }
}

@media (min-width: 840px) {
  .u-lg-txtCenter {
    text-align: center !important;
  }
  .u-lg-txtLeft {
    text-align: left !important;
  }
  .u-lg-txtRight {
    text-align: right !important;
  }
}

/**
 * Inherit the ancestor's text color.
 */
.u-txtColorInherit {
  color: inherit !important;
}

/**
 * Enables font kerning in all browsers.
 * http://blog.typekit.com/2014/02/05/kerning-on-the-web/
 *
 * 1. Chrome (not Windows), Firefox, IE 10+
 * 2. Safari 7 and future browsers
 * 3. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
 */
/**
 * Prevent whitespace wrapping
 */
.u-noWrap {
  white-space: nowrap !important;
}

/**
 * Text truncation
 *
 * Prevent text from wrapping onto multiple lines, and truncate with an
 * ellipsis.
 *
 * 1. Ensure that the node has a maximum width after which truncation can
 *    occur.
 * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
 *    nodes.
 */
/**
 * Font sizing
 *
 * Change the font size of elements.
 */
.u-txtMicro {
  font-size: .625rem !important;
  line-height: 1.8;
}

.u-txtSmallest {
  font-size: .75rem !important;
  line-height: 1.66667;
}

.u-txtSmaller {
  font-size: .875rem !important;
  line-height: 1.57143;
}

.u-txtSmall {
  font-size: .9375rem !important;
  line-height: 1.53333;
}

.u-txtLarge {
  font-size: 1.125rem !important;
  line-height: 1.44444;
}

.u-txtLarger {
  font-size: 1.5rem !important;
  line-height: 1.33333;
}

.u-txtLargest {
  font-size: 2rem !important;
  line-height: 1.25;
}

.u-txtHuge {
  font-size: 2.375rem !important;
  line-height: 1.21053;
}

/**
 * Font Weights
 */
.u-light {
  font-weight: 300 !important;
}

.u-normal {
  font-weight: normal !important;
}

.u-bold {
  font-weight: 700 !important;
}

.u-txtWhisper {
  color: #b3b3b3 !important;
}

.u-txtQuiet {
  color: #999 !important;
}

.u-txtLoud {
  color: #1a1a1a !important;
}

/**
 * Font Styles
 */
.u-styleNormal {
  font-style: normal;
}

/**
 * Tracking aka Letter spacing
 */
.u-trackNormal {
  letter-spacing: 0 !important;
}

.u-trackLoose {
  letter-spacing: .3px !important;
}

.u-trackLooser {
  letter-spacing: .5px !important;
}

.u-trackLoosest {
  letter-spacing: 1.5px !important;
}

/**
 * Leading aka line height
 */
.u-leadTightest {
  line-height: 20px !important;
}

.u-leadTighter {
  line-height: 22px !important;
}

.u-leadTight {
  line-height: 24px !important;
}

.u-leadNormal {
  line-height: 26px !important;
}

.u-leadLoose {
  line-height: 28px !important;
}

.u-leadLooser {
  line-height: 30px !important;
}

.u-leadLoosest {
  line-height: 32px !important;
}

/**
 * Text shadows
 */
/* ==========================================================================
 * #TRANSITIONS
 * --------------------------------------------------------------------------
 * Transition utilities
 * ========================================================================== */
/* Combine with other classes for many different
transition possibilities. */
.u-transAll,
.u-transAll:hover,
.u-transAll:focus {
  transition: all 250ms ease-in-out;
}

.u-transColor,
.u-transColor:hover,
.u-transColor:focus {
  transition: color 250ms ease-in-out;
}

.u-transBg,
.u-transBg:hover,
.u-transBg:focus {
  transition: background-color 250ms ease-in-out;
}

.u-transBorder,
.u-transBorder:hover,
.u-transBorder:focus {
  transition: border-color 250ms ease-in-out;
}

/* ==========================================================================
   #VERTICAL-ALIGN
   ========================================================================== */
.u-alignBase {
  vertical-align: baseline !important;
}

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

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

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

/**
 * Vertical align middle that actually works on everything via translateY.
 * http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 */
.u-alignMiddleRel {
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.u-alignMiddleAbs {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media (min-width: 360px) {
  .u-sm-alignMiddleRel {
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .u-sm-alignMiddleAbs {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

@media (min-width: 600px) {
  .u-md-alignMiddleRel {
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .u-md-alignMiddleAbs {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

@media (min-width: 840px) {
  .u-lg-alignMiddleRel {
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .u-lg-alignMiddleAbs {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

/* ==========================================================================
 * #DISPLAY
 * --------------------------------------------------------------------------
 * Display utilities.
 *
 * u-block - Display block.
 * u-hidden - Display none.
 * u-hiddenVisually - Visually hidden but available to screenreaders.
 * u-inline - Display inline.
 * u-inlineBlock - Display inline-block.
 * u-table - Display table.
 * u-tableCell - Display table-cell.
 * u-tableRow - Display table-row.
 * ========================================================================== */
.u-block {
  display: block !important;
}

.u-hidden {
  display: none !important;
}

/**
 * Completely remove from the flow but leave available to screen readers.
 */
.u-hiddenVisually {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

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

/**
 * 1. Fix for Firefox bug: an image styled `max-width:100%` within an
 * inline-block will display at its default size, and not limit its width to
 * 100% of an ancestral container.
 */
.u-inlineBlock {
  display: inline-block !important;
  max-width: 100%;
  /* 1 */
}

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

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

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

/* ==========================================================================
   Responsive Visibility
   ========================================================================== */
/*
   Between
   ========================================================================== */
@media (min-width: ) and (max-width: 360px) {
  .u-hide {
    display: none !important;
  }
  .u-show {
    display: inherit !important;
  }
}

@media (min-width: 360px) and (max-width: 600px) {
  .u-sm-hide {
    display: none !important;
  }
  .u-sm-show {
    display: inherit !important;
  }
}

@media (min-width: 600px) and (max-width: 840px) {
  .u-md-hide {
    display: none !important;
  }
  .u-md-show {
    display: inherit !important;
  }
}

@media (min-width: 360px) {
  .u-sm-up-hide {
    display: none !important;
  }
  .u-sm-up-show {
    display: inherit !important;
  }
}

@media (min-width: 600px) {
  .u-md-up-hide {
    display: none !important;
  }
  .u-md-up-show {
    display: inherit !important;
  }
}

@media (min-width: 840px) {
  .u-lg-hide {
    display: none !important;
  }
  .u-lg-up-show {
    display: inherit !important;
  }
}

@media (max-width: 360px) {
  .u-sm-down-hide {
    display: none !important;
  }
  .u-sm-down-show {
    display: inherit !important;
  }
}

@media (max-width: 600px) {
  .u-md-down-hide {
    display: none !important;
  }
  .u-md-down-show {
    display: inherit !important;
  }
}

@media (max-width: 840px) {
  .u-lg-down-hide {
    display: none !important;
  }
  .u-lg-down-show {
    display: inherit !important;
  }
}

/**
 * Shame
 *
 * Hacks and filth go in this file.
 */
/* ==========================================================================
 * Shame
 * --------------------------------------------------------------------------
 * This is where you place your hacks and filth, if you must.
 * ========================================================================== */
/*!
 * IE10 viewport hack for Surface/desktop Windows 8 bug
 * Copyright 2014-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*
 * See the Getting Started docs for more information:
 * http://getbootstrap.com/getting-started/#support-ie10-width
 */
@-ms-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

/**
 * Settings
 *
 * Global variables
 */
/* ==========================================================================
 * #BREAKPOINTS
 * --------------------------------------------------------------------------
 * These variables are used for media query breakpoints.
 * The breakpoint mixin uses these here: /bluprnt/sass/tools/breakpoint.scss
 * ========================================================================== */
/* ==========================================================================
 * Colors
 * --------------------------------------------------------------------------
 * Global color variables.
 * ========================================================================== */
/**
 * Helper Grayscale
 *
 * Use these when you ned a shade of gray that's not part of the main brand
 * grayscale.
 */
/**
 * Brand grayscale
 *
 * Use these as often as possible. These are mostly used as background/text
 * colors.
 */
/**
 * Colors
 */
/**
 * Brand Colors
 */
/**
 * Links
 */
/**
 * Scafolding
 */
/**
 * Text color styles
 */
/**
 * Social media colors
 */
/* ==========================================================================
 * Opacity
 * --------------------------------------------------------------------------
 * Opacity scale
 * ========================================================================== */
/* ==========================================================================
 * Border radius
 * --------------------------------------------------------------------------
 * Various sizes for border radius.
 * ========================================================================== */
/* ==========================================================================
 * Shadows
 * --------------------------------------------------------------------------
 * Box shadow scale. Only use one of these for drop shadow needs.
 * ========================================================================== */
/* ==========================================================================
 * #SPACING
 * --------------------------------------------------------------------------
 * Global spacing units used to add space between UI elements.
 *
 * Usage scale:
 *
 * *-micro
 * *-smallest
 * *-smaller
 * *-small
 * *-base
 * *-large
 * *-larger
 * *-largest
 * *-jumbo
 * ========================================================================== */
/* ==========================================================================
 * Global typography variables
 * --------------------------------------------------------------------------
 * These are font/text specific variables that are used throughout the
 * project.
 * ========================================================================== */
/**
 * Font families
 */
/**
 * Font sizes
 *
 * Can't decide how to name these. Lulz.
 */
/**
 * Font weights
 */
/**
 * Letter Spacing
 */
/**
 * Line heights
 */
/* ==========================================================================
 * z-index
 * --------------------------------------------------------------------------
 * Global z-index settings
 * ========================================================================== */
/**
 * z-index scale
 *
 * These are the only numbers/vars you should be using for z-index values.
 */
/**
 * Tools
 *
 * Mixins and functions
 */
/* ==========================================================================
 * #UNIT-CONVERSION
 * --------------------------------------------------------------------------
 * Mixins for converting units.
 * ========================================================================== */
/* ==========================================================================
   Em units
   ========================================================================== */
/* ==========================================================================
   Rem units
   ========================================================================== */
/**
 * Convert any px value into its rem equivalent.
 *
 * Usage:
 * rem($pixelValue)
 */
/* ==========================================================================
 * #LINE-HEIGHT
 * --------------------------------------------------------------------------
 * Mixin to generate a no unit line height..
 * ========================================================================== */
/**
 * Usage:
 *   line-height: lineHeight(30px);
 */
/* ==========================================================================
 * #BBICONFONT
 * --------------------------------------------------------------------------
 * Mixin to include basic styles needed to use an icon font.
 *
 * Usage:

&::before {
  @include bbIconFont;

  content: "\e901";
}

 * ========================================================================== */
/* ==========================================================================
 * #BREAKPOINT
 * --------------------------------------------------------------------------
 * These mixins makes it easy to use media queries in your code. It uses the
 * variables defined in: bluprnt/sass/settings/_media-queries.scss
 *
 * Usage:

@include breakpointBetween(small, medium) {
  float: left;
}

@include breakpointUp(small) {
  float: left;
}

@include breakpointDown(small) {
  float: none;
}

 * ========================================================================== */
/**
 * Set size breakpoint mixin, for targeting a specific size only.
 */
/**
 * Min width breakpoint mixin, for targeting a specific size and up.
 */
/**
 * Max width breakpoint mixin, for targeting a specific size and down.
 */
/* ==========================================================================
 * #CLEARFIX
 * --------------------------------------------------------------------------
 * Mixin to drop micro clearfix into a selector. Further reading:
 * http://www.cssmojo.com/the-very-latest-clearfix-reloaded/
 *
 * Usage:

.usage {
  @include clearfix();
}

 * ========================================================================== */
/* ==========================================================================
 * #UNIT-CONVERSION
 * --------------------------------------------------------------------------
 * Mixins for converting units.
 * ========================================================================== */
/* ==========================================================================
   Em units
   ========================================================================== */
/**
* Mixin to create a declaration whose value is a em unit.
*
* Usage:
.selector {
  @include em(padding, 10px);
}
*/
/* ==========================================================================
   Rem units
   ========================================================================== */
/**
 * Mixin to create a declaration whose value is a rem unit. Also provide pixel
 * fallback.
 *
 * Usage:
.selector {
  @include rem(padding, 10px);
}
 */
/* ==========================================================================
 * #FONT-SIZE
 * --------------------------------------------------------------------------
 * Mixin to generate a REM font size with a pixel fallback for older browsers.
 * ========================================================================== */
/**
 * Usage:
 *   @include font-size(20px, 28px);
 */
/* ==========================================================================
 * #TRIANGLE
 * --------------------------------------------------------------------------
 * Mixin to generate a CSS triangle
 * ========================================================================== */
/**
 * Usage:
 *
 *  @include triangle(down, 10px, 6px, $color-grayLight);
 */
/**
 * The following values are used for the tooltips, for example.
 *
 * @include triangle(left, 12px, 8px, $color-grayLight);
 * @include triangle(right, 12px, 8px, $color-grayLight);
 * @include triangle(up, 10px, 6px, $color-grayLight);
 * @include triangle(down, 10px, 6px, $color-grayLight);
 */
/* ==========================================================================
 * #VERTICAL-ALIGN
 * --------------------------------------------------------------------------
 * Vertical align anything.
 * http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 *
 * Usage:
 * @include verticalAlign() or @include verticalAlign(absolute)
 * ========================================================================== */
body {
  background-color: #000;
}

/**
 * Elements
 *
 * Default, unclassed elements
 */
/**
 * Objects
 *
 * Non cosmetic, structural classes. Helps reduce duplicate code.
 */
/**
 * Components
 *
 * Damn near everything else. Fully styled UI modules, sections, etc.
 */
.process-header {
  margin-bottom: 350px;
}
@media screen and (max-width: 600px) {
  .process-header {
    margin-bottom: 25px;
  }
}

@media screen and (max-width: 1255px) {
  .process-container {
    padding-left: 120px;
    padding-right: 120px;
  }
}

.process.process--dark:after {
  background-color: #0083db;
}

.process.process--dark .process-point {
  background-color: #fff;
  border-color: #0083db;
}

.process.process--dark .process-tooltipContent {
  color: #111;
}

.process.process--dark .process-item:hover .process-point,
.process.process--dark .process-item.is-active .process-point {
  background-color: #00579c;
}

.process:after {
  content: "";
  width: 100%;
  height: 8px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .02), 0 1px 2px rgba(0, 0, 0, .14);
  background-color: #f1f2f2;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 14px;
}

.process .process-point {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border-color: #f1f2f2;
  background-color: #0083db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .02), 0 1px 2px rgba(0, 0, 0, .14);
  transition: transform 250ms ease-in-out;
}

.process .process-tooltipContent {
  position: absolute;
  top: -287px;
  left: 50%;
  margin-left: -130px;
  width: 260px;
  opacity: 0;
  cursor: auto;
}
.process .process-tooltipContent.animated {
  transition: opacity 250ms ease-in-out;
  transition-delay: 250ms;
}
.process .process-tooltipContent.is-active {
  opacity: 1;
}

.process .process-tooltip {
  z-index: 3;
  width: 310px;
  height: 260px;
  bottom: 125px;
}
.process .process-tooltip.animated {
  transition: transform 250ms ease-in-out;
}
.process .process-tooltip:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 24px 13px 0 13px;
  border-color: #0083db transparent transparent transparent;
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -13px;
}
.process .process-tooltip:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 10px 0 10px;
  border-color: #f1f2f2 transparent transparent transparent;
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -10px;
}

.process .process-item {
  z-index: 4;
}
.process .process-item:hover .process-point,
.process .process-item.is-active .process-point {
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}

.productColumn {
  background-color: #fff;
}

.productColumn-tab {
  background-color: #999;
  position: relative;
  cursor: pointer;
}
.productColumn-tab:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.productColumn-tab:last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.productColumn-tab.is-active {
  background-color: #333;
}
.productColumn-tab.is-active:before {
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  position: absolute;
  margin-top: 0;
  margin-bottom: 5px;
  border-width: 7px 6px 0;
  border-color: #111 transparent transparent;
  left: 50%;
  top: 100%;
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.productColumn-tabPane {
  display: none;
}
.productColumn-tabPane.is-active {
  display: block;
}

@media (min-width: 600px) {
  .productColumn-tabPane {
    display: block;
  }
}

.language-selector .language-dropdown {
  min-width: 150px;
  right: 0;
  z-index: 10;
  display: none;
  padding-left: .9375rem;
  padding-right: .9375rem;
}
.language-selector .language-dropdown a {
  color: #999;
}
.language-selector .language-dropdown a:hover {
  color: #e6e6e6;
}

.language-selector .current-language-container {
  transition: all 250ms ease-out;
}
.language-selector .current-language-container .icon {
  color: #999;
  transition: all 250ms ease-out;
}
.language-selector .current-language-container:hover .icon,
.language-selector .current-language-container.is-active .icon {
  color: #e6e6e6;
}
.language-selector .current-language-container.is-active {
  background-color: #333;
}

.primary-search-button,
.primary-search-close-button {
  transition: all 250ms ease-out;
  color: #999;
}
.primary-search-button:hover,
.primary-search-close-button:hover {
  color: #fff;
}

.primary-search-container .o-grid-cell {
  height: 63px;
}
.primary-search-container .o-grid-cell input {
  width: 100%;
  background: none;
  border: none;
  color: #fff;
}

.navigationToggle {
  top: 20px;
}

#newsletterModal {
  width: 600px;
}

.c-contactUsForm .form-field {
  margin-bottom: 1.25rem;
}
.c-contactUsForm .form-field label {
  font-size: .9375rem;
  line-height: 1.53333;
  margin-bottom: .3125rem;
  font-weight: 400;
  letter-spacing: .3px;
  display: block;
  cursor: pointer;
}

.flag-icon-background {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}

.flag-icon {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em;
}

.flag-icon:before {
  content: "\00a0";
}

.flag-icon-au {
  background-image: url(../images/flags/4x3/au.svg);
}

.flag-icon-ch {
  background-image: url(../images/flags/4x3/ch.svg);
}

.flag-icon-de {
  background-image: url(../images/flags/4x3/de.svg);
}

.flag-icon-dk {
  background-image: url(../images/flags/4x3/dk.svg);
}

.flag-icon-es {
  background-image: url(../images/flags/4x3/es.svg);
}

.flag-icon-fi {
  background-image: url(../images/flags/4x3/fi.svg);
}

.flag-icon-fr {
  background-image: url(../images/flags/4x3/fr.svg);
}

.flag-icon-gb {
  background-image: url(../images/flags/4x3/gb.svg);
}

.flag-icon-it {
  background-image: url(../images/flags/4x3/it.svg);
}

.flag-icon-jp {
  background-image: url(../images/flags/4x3/jp.svg);
}

.flag-icon-kr {
  background-image: url(../images/flags/4x3/kr.svg);
}

.flag-icon-nl {
  background-image: url(../images/flags/4x3/nl.svg);
}

.flag-icon-no {
  background-image: url(../images/flags/4x3/no.svg);
}

.flag-icon-se {
  background-image: url(../images/flags/4x3/se.svg);
}

.flag-icon-us {
  background-image: url(../images/flags/4x3/us.svg);
}

.flag-icon-gb-eng {
  background-image: url(../images/flags/4x3/gb-eng.svg);
}

.c-videoHero {
  background-image: linear-gradient(to bottom, #414141 0%, #242424 100%);
}

/**
 * Utils
 *
 * Utility helper classes.
 */
.u-landingPage [data-ui-component="siteNavigation"] {
  display: none !important;
}

/**
 * Pages
 *
 * Page specific styles.
 */
.by-the-numbers {
  /* Graph 1 */
  /* Graph 2 */
  /* Graph 3 */
  /*Graph 4*/
}
.by-the-numbers .c-btn-graphContainer {
  min-height: 260px;
}
.by-the-numbers .c-btn-graphContainer h3 {
  font-size: 3.875rem !important;
}
.by-the-numbers .btn-usage h2 {
  font-size: 4.5rem !important;
}
.by-the-numbers .btn-usage p {
  font-size: 1.9375rem !important;
}
.by-the-numbers .js-btnSection {
  opacity: .5;
}
.by-the-numbers .js-btnSection.in-view {
  opacity: 1;
}
.by-the-numbers #graph-1 {
  width: 260px;
  height: 260px;
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.by-the-numbers #graph-1 .cls-bg {
  fill: #bdbec0;
}
.by-the-numbers #graph-1 .cls-1,
.by-the-numbers #graph-1 .cls-2 {
  fill: none;
  stroke-miterlimit: 10;
  stroke-width: 5px;
}
.by-the-numbers #graph-1 .cls-1 {
  stroke: #0082da;
  stroke-dasharray: 626.9362299503791;
  stroke-dashoffset: 626.9362299503791;
}
.by-the-numbers #graph-1 .cls-1.animate {
  animation: takeoffs--drawlineinner 1500ms ease-in-out forwards;
}
.by-the-numbers #graph-1 .cls-2 {
  stroke: #10c2fe;
  stroke-dasharray: 656.5928646002668;
  stroke-dashoffset: 656.5928646002668;
}
.by-the-numbers #graph-1 .cls-2.animate {
  animation: takeoffs--drawlineouter 1500ms ease-in-out forwards;
}
.by-the-numbers #graph-2 {
  width: 260px;
  height: 260px;
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.by-the-numbers #graph-2 .cls-bg {
  fill: #bdbec0;
}
.by-the-numbers #graph-2 .cls-1,
.by-the-numbers #graph-2 .cls-2 {
  fill: none;
  stroke-miterlimit: 10;
  stroke-width: 5px;
}
.by-the-numbers #graph-2 .cls-1 {
  stroke: #0082da;
  stroke-dasharray: 626.9362299503791;
  stroke-dashoffset: 626.9362299503791;
}
.by-the-numbers #graph-2 .cls-1.animate {
  animation: punch--drawlineinner 1900ms ease-in-out forwards;
}
.by-the-numbers #graph-2 .cls-2 {
  stroke: #10c2fe;
  stroke-dasharray: 656.5928646002668;
  stroke-dashoffset: 656.5928646002668;
}
.by-the-numbers #graph-2 .cls-2.animate {
  animation: punch--drawlineouter 1900ms ease-in-out forwards;
}
.by-the-numbers #graph-3 {
  width: 260px;
  height: 260px;
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.by-the-numbers #graph-3 .cls-bg {
  fill: #bdbec0;
}
.by-the-numbers #graph-3 .cls-1,
.by-the-numbers #graph-3 .cls-2 {
  fill: none;
  stroke-miterlimit: 10;
  stroke-width: 5px;
}
.by-the-numbers #graph-3 .cls-1 {
  stroke: #0082da;
  stroke-dasharray: 626.9362299503791;
  stroke-dashoffset: 626.9362299503791;
}
.by-the-numbers #graph-3 .cls-1.animate {
  animation: time--drawlineinner 900ms ease-in-out forwards;
}
.by-the-numbers #graph-3 .cls-2 {
  stroke: #10c2fe;
  stroke-dasharray: 656.5928646002668;
  stroke-dashoffset: 656.5928646002668;
}
.by-the-numbers #graph-3 .cls-2.animate {
  animation: time--drawlineouter 900ms ease-in-out forwards;
}
.by-the-numbers #graph-time-1 {
  width: 260px;
  height: 260px;
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.by-the-numbers #graph-time-1 .cls-bg {
  fill: #bdbec0;
}
.by-the-numbers #graph-time-1 .cls-1,
.by-the-numbers #graph-time-1 .cls-2 {
  fill: none;
  stroke-miterlimit: 10;
  stroke-width: 5px;
}
.by-the-numbers #graph-time-1 .cls-1 {
  stroke: #0082da;
  stroke-dasharray: 626.9362299503791;
  stroke-dashoffset: 626.9362299503791;
}
.by-the-numbers #graph-time-1 .cls-1.animate {
  animation: takeoffs-2--drawlineinner 1600ms ease-in-out forwards;
}
.by-the-numbers #graph-time-1 .cls-2 {
  stroke: #10c2fe;
  stroke-dasharray: 656.5928646002668;
  stroke-dashoffset: 656.5928646002668;
}
.by-the-numbers #graph-time-1 .cls-2.animate {
  animation: takeoffs-2--drawlineouter 1600ms ease-in-out forwards;
}
.by-the-numbers .cube {
  width: 190px;
  display: inline-block;
  transition: opacity .5s ease-in;
  opacity: 0;
}
.by-the-numbers .cube.active {
  opacity: 1;
}
.by-the-numbers .cube li {
  width: 82px;
  height: 82px;
  background-color: #fafafc;
  position: relative;
  float: left;
  margin-right: 26px;
  margin-bottom: 26px;
  box-shadow: 8px 8px 0 0 #e4e4e4;
  transition: background-color .3s ease-in, box-shadow .5s ease-in;
}
.by-the-numbers .cube li .week-box {
  position: absolute;
  width: 100%;
  top: -17px;
  left: 0;
  opacity: 0;
  transition: opacity .3s ease-in;
}
.by-the-numbers .cube li .week-box.active {
  opacity: 1;
}
.by-the-numbers .cube li .week-box .digit {
  font-size: 60px;
}
.by-the-numbers .cube li .week-box p {
  text-transform: uppercase;
  font-size: 12px;
  margin-top: -24px;
}
.by-the-numbers .cube li.active {
  background-color: #0083db;
  box-shadow: 8px 8px 0 0 #10c2fe;
}
.by-the-numbers .cube li:nth-child(even) {
  margin-right: 0;
}
.by-the-numbers #graph-time-3 {
  width: 260px;
  height: 260px;
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.by-the-numbers #graph-time-3 .cls-outerbg {
  fill: #fff;
}
.by-the-numbers #graph-time-3 .cls-bg {
  fill: #bebfc1;
}
.by-the-numbers #graph-time-3 .cls-1,
.by-the-numbers #graph-time-3 .cls-2 {
  fill: none;
  stroke-miterlimit: 10;
  stroke-width: 5px;
}
.by-the-numbers #graph-time-3 .cls-alt {
  stroke: #0082da;
  stroke-dasharray: 675.4424205218055;
  stroke-dashoffset: 675.4424205218055;
  fill: none;
  stroke-miterlimit: 10;
  stroke-width: 10px;
}
.by-the-numbers #graph-time-3 .cls-alt.animate {
  animation: hours--drawlineouterrim 1600ms ease-in-out forwards;
}
.by-the-numbers #graph-time-3 .cls-1 {
  stroke: #0082da;
  stroke-dasharray: 540.3539364174444;
  stroke-dashoffset: 540.3539364174444;
}
.by-the-numbers #graph-time-3 .cls-1.animate {
  animation: hours--drawlineinner 1600ms ease-in-out forwards;
}
.by-the-numbers #graph-time-3 .cls-2 {
  stroke: #10c2fe;
  stroke-dasharray: 571.7698629533423;
  stroke-dashoffset: 571.7698629533423;
}
.by-the-numbers #graph-time-3 .cls-2.animate {
  animation: hours--drawlineouter 1600ms ease-in-out forwards;
}
.by-the-numbers .ico-money {
  height: 43px;
}
.by-the-numbers .ico-money path {
  fill: #0082da;
  stroke-width: 10px;
  stroke: #0082da;
}
.by-the-numbers .ico-leaf {
  width: 93px;
  height: 43px;
}
.by-the-numbers .ico-leaf path {
  fill: #0082da;
}
.by-the-numbers .graph-time-mask {
  z-index: 1;
  width: 260px;
  height: 260px;
}

@keyframes takeoffs--drawlineinner {
  from {
    stroke-dashoffset: 629;
  }
  to {
    stroke-dashoffset: 180;
  }
}

@keyframes takeoffs--drawlineouter {
  from {
    stroke-dashoffset: 629;
  }
  to {
    stroke-dashoffset: 189;
  }
}

@keyframes punch--drawlineinner {
  from {
    stroke-dashoffset: 629;
  }
  to {
    stroke-dashoffset: 50;
  }
}

@keyframes punch--drawlineouter {
  from {
    stroke-dashoffset: 629;
  }
  to {
    stroke-dashoffset: 53;
  }
}

@keyframes time--drawlineinner {
  from {
    stroke-dashoffset: 629;
  }
  to {
    stroke-dashoffset: 382;
  }
}

@keyframes time--drawlineouter {
  from {
    stroke-dashoffset: 629;
  }
  to {
    stroke-dashoffset: 400;
  }
}

@keyframes takeoffs-2--drawlineinner {
  from {
    stroke-dashoffset: 629;
  }
  to {
    stroke-dashoffset: 345;
  }
}

@keyframes takeoffs-2--drawlineouter {
  from {
    stroke-dashoffset: 629;
  }
  to {
    stroke-dashoffset: 362;
  }
}

@keyframes hours--drawlineinner {
  from {
    stroke-dashoffset: 540;
  }
  to {
    stroke-dashoffset: 135;
  }
}

@keyframes hours--drawlineouter {
  from {
    stroke-dashoffset: 572;
  }
  to {
    stroke-dashoffset: 143;
  }
}

@keyframes hours--drawlineouterrim {
  from {
    stroke-dashoffset: 675;
  }
  to {
    stroke-dashoffset: 160;
  }
}

.revuAcceleratorSeries .navigation {
  display: none !important;
}

.revuAcceleratorSeries #raceCourse {
  padding: 1rem 2rem 6rem 1rem;
}

.revuAcceleratorSeries .stats {
  margin-top: 30rem;
}
@media (max-width: 840px) {
  .revuAcceleratorSeries .stats {
    margin-top: 0;
    border-radius: 8px;
    border-width: 2px;
  }
}
.revuAcceleratorSeries .stats .o-grid-cell:nth-child(3) {
  margin-top: 5.625rem;
}
@media (max-width: 840px) {
  .revuAcceleratorSeries .stats .o-grid-cell:nth-child(3) {
    margin-top: 0;
  }
}
.revuAcceleratorSeries .stats .o-grid-cell:nth-child(4) {
  margin-top: 8.125rem;
}
@media (max-width: 840px) {
  .revuAcceleratorSeries .stats .o-grid-cell:nth-child(4) {
    margin-top: 0;
  }
}
.revuAcceleratorSeries .stats .statNumber {
  font-size: 3.75rem;
}

.revuAcceleratorSeries .rallySignupForm {
  border-radius: 8px;
  border-width: 10px;
}
@media (max-width: 840px) {
  .revuAcceleratorSeries .rallySignupForm {
    border-width: 2px;
  }
}

.revuAcceleratorSeries footer {
  padding-top: 0;
}
.revuAcceleratorSeries footer .o-grid:nth-child(2) {
  display: none;
}

.revuAcceleratorSeries.rallyIntl #raceCourse {
  padding: 2rem 2rem 6rem 2rem;
}

.revuAcceleratorSeries.rallyIntl .stats {
  margin-top: 36rem;
}
@media (max-width: 840px) {
  .revuAcceleratorSeries.rallyIntl .stats {
    margin-top: 0;
  }
}
.revuAcceleratorSeries.rallyIntl .stats .o-grid-cell:nth-child(2),
.revuAcceleratorSeries.rallyIntl .stats .o-grid-cell:nth-child(3),
.revuAcceleratorSeries.rallyIntl .stats .o-grid-cell:nth-child(4) {
  margin-top: 6.25rem;
}
@media (max-width: 840px) {
  .revuAcceleratorSeries.rallyIntl .stats .o-grid-cell:nth-child(2),
  .revuAcceleratorSeries.rallyIntl .stats .o-grid-cell:nth-child(3),
  .revuAcceleratorSeries.rallyIntl .stats .o-grid-cell:nth-child(4) {
    margin-top: 0;
  }
}

/**
 * Shame
 *
 * Hacks and filth go in this file.
 */
.u-top0 {
  top: 0;
}

.u-top1 {
  top: .0625rem;
}

.u-top2 {
  top: .125rem;
}

.u-top3 {
  top: .1875rem;
}

.u-top4 {
  top: .25rem;
}

.u-top5 {
  top: .3125rem;
}

.u-top6 {
  top: .375rem;
}

.u-top7 {
  top: .4375rem;
}

.u-top8 {
  top: .5rem;
}

.u-top-1 {
  top: -.0625rem;
}

.u-top-2 {
  top: -.125rem;
}

.u-top-3 {
  top: -.1875rem;
}

.u-top-4 {
  top: -.25rem;
}

.u-top-5 {
  top: -.3125rem;
}

.u-top-6 {
  top: -.375rem;
}

.u-top-7 {
  top: -.4375rem;
}

.u-top-8 {
  top: -.5rem;
}

.u-hoverBgWhite:hover {
  background-color: #fff !important;
}

.bpTabs-volumePricing .bpTabs-nav .is-active,
.bpTabs-volumePricing .bpTabs-nav .js-bpTabs-tab:hover {
  background-color: #333 !important;
}

@media (min-width: 840px) {
  .bluebeamLogo svg {
    height: 50px;
  }
}

@media (max-width: 896px) {
  .primary-search-button {
    display: none !important;
  }
}

@media (max-width: 840px) {
  .homePage .hero {
    background-position: -520px center;
  }
}

@media (max-width: 600px) {
  .homePage .hero {
    background-position: -730px center;
  }
}

/* ==========================================================================
 * #SMARTLING
 * --------------------------------------------------------------------------
 * Styles to override stuff specifically for Smartling integrations.
 * ========================================================================== */
/**
 * All country codes here:
 * http://www.lingoes.net/en/translator/langcode.htm
 *
 * The ones we use are below:
 *

da-DK = Danish (Denmark)
de-CH = German (Switzerland)
de-DE = German (Germany)
en-AU = English (Australia)
en-GB = English (United Kingdom)
en-US = English (USA)
es-ES = Spanish (Spain)
fi-FI = Finnish (Finland)
fr-FR = French (France)
it-IT = Italian (Italy)
ja-JP = Japanese (Japan)
ko-KR = Korean (Korea)
nb-NO = Norwegian (Bokm?l) (Norway)
nl-NL = Dutch (Netherlands)
sv-SE = Swedish (Sweden)

CSS Usage:

html:lang(da-DK) { }
html:lang(de-CH) { }
html:lang(de-DE) { }
html:lang(en-AU) { }
html:lang(en-GB) { }
html:lang(es-ES) { }
html:lang(fi-FI) { }
html:lang(fr-FR) { }
html:lang(it-IT) { }
html:lang(ja-JP) { }
html:lang(ko-KR) { }
html:lang(nb-NO) { }
html:lang(nl-NL) { }
html:lang(sv-SE) { }

 *
 */
[data-ui-component="OilGas"],
[data-ui-component="OilAndGas"] {
  display: none !important;
}

html:lang(en-GB) [data-ui-component="OilGas"],
html:lang(en-GB) [data-ui-component="OilAndGas"] {
  display: -ms-flexbox !important;
  display: flex !important;
}

html:lang(es-ES) [data-ui-component="customerTestimonial"],
html:lang(fi-FI) [data-ui-component="customerTestimonial"],
html:lang(fr-FR) [data-ui-component="customerTestimonial"],
html:lang(it-IT) [data-ui-component="customerTestimonial"],
html:lang(ja-JP) [data-ui-component="customerTestimonial"],
html:lang(ko-KR) [data-ui-component="customerTestimonial"] {
  display: none !important;
}

/* ==========================================================================
   Util classes for visiblity
   ========================================================================== */
html:lang(da-DK) .u-hideDK {
  display: none !important;
}

html:lang(da-DK) .u-showDK {
  display: inherit !important;
}

html:lang(de-CH) .u-hideDECH {
  display: none !important;
}

html:lang(de-CH) .u-showDECH {
  display: inherit !important;
}

html:lang(de-DE) .u-hideDE {
  display: none !important;
}

html:lang(de-DE) .u-showDE {
  display: inherit !important;
}

html:lang(en-AU) .u-hideAU {
  display: none !important;
}

html:lang(en-AU) .u-showAU {
  display: inherit !important;
}

html:lang(en-GB) .u-hideGB {
  display: none !important;
}

html:lang(en-GB) .u-showGB {
  display: inherit !important;
}

html:lang(es-ES) .u-hideES {
  display: none !important;
}

html:lang(es-ES) .u-showES {
  display: inherit !important;
}

html:lang(fi-FI) .u-hideFI {
  display: none !important;
}

html:lang(fi-FI) .u-showFI {
  display: inherit !important;
}

html:lang(fr-FR) .u-hideFR {
  display: none !important;
}

html:lang(fr-FR) .u-showFR {
  display: inherit !important;
}

html:lang(it-IT) .u-hideIT {
  display: none !important;
}

html:lang(it-IT) .u-showIT {
  display: inherit !important;
}

html:lang(ja-JP) .u-hideJP {
  display: none !important;
}

html:lang(ja-JP) .u-showJP {
  display: inherit !important;
}

html:lang(ko-KR) .u-hideKR {
  display: none !important;
}

html:lang(ko-KR) .u-showKR {
  display: inherit !important;
}

html:lang(nb-NO) .u-hideNO {
  display: none !important;
}

html:lang(nb-NO) .u-showNO {
  display: inherit !important;
}

html:lang(nl-NL) .u-hideNL {
  display: none !important;
}

html:lang(nl-NL) .u-showNL {
  display: inherit !important;
}

html:lang(sv-SE) .u-hideSE {
  display: none !important;
}

html:lang(sv-SE) .u-showSE {
  display: inherit !important;
}

html:lang(en-AU) [data-ui-component="cardNCC"],
html:lang(en-GB) [data-ui-component="cardNCC"] {
  display: none !important;
}

html:lang(en-AU) .u-hideLevel1Langs,
html:lang(en-GB) .u-hideLevel1Langs {
  display: none !important;
}

html:lang(en-AU) .u-showLevel1Langs,
html:lang(en-GB) .u-showLevel1Langs {
  display: inherit !important;
}

html:lang(da-DK) .u-hideLevel2Langs,
html:lang(de-CH) .u-hideLevel2Langs,
html:lang(de-DE) .u-hideLevel2Langs,
html:lang(en-AU) .u-hideLevel2Langs,
html:lang(en-GB) .u-hideLevel2Langs,
html:lang(nb-NO) .u-hideLevel2Langs,
html:lang(nl-NL) .u-hideLevel2Langs,
html:lang(sv-SE) .u-hideLevel2Langs {
  display: none !important;
}

html:lang(da-DK) .u-showLevel2Langs,
html:lang(de-CH) .u-showLevel2Langs,
html:lang(de-DE) .u-showLevel2Langs,
html:lang(en-AU) .u-showLevel2Langs,
html:lang(en-GB) .u-showLevel2Langs,
html:lang(nb-NO) .u-showLevel2Langs,
html:lang(nl-NL) .u-showLevel2Langs,
html:lang(sv-SE) .u-showLevel2Langs {
  display: inherit !important;
}

html:lang(es-ES) .u-hideLevel3Langs,
html:lang(fi-FI) .u-hideLevel3Langs,
html:lang(fr-FR) .u-hideLevel3Langs,
html:lang(it-IT) .u-hideLevel3Langs,
html:lang(ja-JP) .u-hideLevel3Langs,
html:lang(ko-KR) .u-hideLevel3Langs {
  display: none !important;
}

html:lang(es-ES) .u-showLevel3Langs,
html:lang(fi-FI) .u-showLevel3Langs,
html:lang(fr-FR) .u-showLevel3Langs,
html:lang(it-IT) .u-showLevel3Langs,
html:lang(ja-JP) .u-showLevel3Langs,
html:lang(ko-KR) .u-showLevel3Langs {
  display: inherit !important;
}

html:lang(da-DK) .u-hideNordicLangs,
html:lang(fi-FI) .u-hideNordicLangs,
html:lang(nb-NO) .u-hideNordicLangs,
html:lang(sv-SE) .u-hideNordicLangs {
  display: none !important;
}

html:lang(da-DK) .u-showNordicLangs,
html:lang(fi-FI) .u-showNordicLangs,
html:lang(nb-NO) .u-showNordicLangs,
html:lang(sv-SE) .u-showNordicLangs {
  display: inherit !important;
}

html:not(:lang(en-US)) .u-hideAllIntlLangs {
  display: none !important;
}

html:not(:lang(en-US)) .u-showAllIntlLangs {
  display: inherit !important;
}

@media (min-width: 840px) {
  html:not(:lang(en-US)) .navigation-item .dropdown {
    width: 255px;
  }
}