/* ============================================== Styles Juncture 
============================================== */
/** Compass init commands:  `compass watch`  */
/** Fresh.scss setup, including local variable overrides. */
/* ============================================== Variables
============================================== */
/* Brand Specific
------------------------------------ */
/** Set the path to your image folder for use in the `image-ur()` function. The trailing slash must be included! */
/* ============================================== Fresh.css
============================================== */
/* Imports
------------------------------------ */
/** Defaults, utilities, etc. */
/* ============================================== Default Variables
============================================== */
/** IE flag for rendering stylesheet */
/* Layout
------------------------------------ */
/** Shape the `.container` object with max-width and left/right padding */
/** Defines and shapes the `.has-sidebar` object */
/** Media Query breakpoints */
/** Overlays */
/* Typography
------------------------------------ */
/* Objects
------------------------------------ */
/** Split margins for all breakpoints. */
/* Forms
------------------------------------ */
/* ============================================== Functions
============================================== */
/** Shorthand for local image url path for use in backgrounds.  `background: image-url("arrow.png") no-repeat 0 0;`  */
/** Shorthand for quick em calculations.  `font-size: em(24px);`  */
/* ============================================== Mixins
============================================== */
/* Media Queries
------------------------------------ */
/** Breakpoint mixin to easily add media query driven styles inline with given style delcaration blocks.  $breakpoints variable is used in helper classes to create namespaced modifiers to classes. It should reflect the breakpoints available in `include breakpoint()`. The variable is declared in this file for clarity. */
/* Typography
------------------------------------ */
/** Create a fully formed type style (sizing and vertical rhythm) by passing in a single value.  `@include font-size(10px);`  [1] - Fallback for IE < 9 which do not support rem units. */
/** Force overly long spans of text to truncate on a given boundary.  `@include truncate(400px);`  */
/* Box Model and Layout
------------------------------------ */
/** Inline-block shorthand to include fallback for IE7.  ` @include inline-block();`  */
/* CSS3
------------------------------------ */
/** Create vendor-prefixed CSS in one go.  `@include vendor(border-radius, 4px);`  */
/** Shorthand for border-radius. Most commonly used in conjuction with $border-radius variable, this saves a rundant call to the longhand function @include prefix(border-radius, $border-radius);  `@include border-radius;` `@include border-radius(100%);` `@include border-radius(5px);`  */
/** Set a transition with a prefixed property  `@include transition-with-prefix("transform", 1s ease);`  */
/** Create CSS keyframe animations for all vendors in one go, e.g.:  .foo { @include vendor(animation, shrink 3s); }
 @include keyframe(shrink) { from { font-size:5em; } }  */
/** Cross-browser opacity support. It is perfectly acceptable to bypass this mixin for use with transparent PNGs due to IE filter black gunk issues.  `@include opacity(.4);  */
/** Create cross-browser compatible linear gradients. This mixin could be extended in the future to allow for other gradient variations.  `@include gradient("#fff", "ff0000", "fallback-gradient.png")`  */
/** Make CSS Arrows! Provide a direction, overall size, arrow stretch (e.g. length) and color values to turn an element into an arrow.  `@include make-arrow("left", 10px, 15px, #fff);  */
/* ============================================== Refresh
============================================== */
/** A refreshing concoction of reset, normalize, and defacto style suggestions that create solid footing for your site. Contents generously influenced by Eric Meyer's reset.css and Normalize (git.io/normalize) */
/** Whip the box model into shape with border-box!  http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; *behavior: url(/js/vendor/boxsizing.htc); }

/** General margin, padding, and border resets. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; }

/* [1] - Set default font family to sans-serif. [2] - Prevent iOS text size adjust after orientation change, without disabling user zoom.  */
html { font-size: 100%; /* [1] */ -webkit-text-size-adjust: 100%; /* [2] */ -ms-text-size-adjust: 100%; /* [2] */ }

/** Correct `block` display not defined in IE 8/9. */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }

/** Correct `inline-block` display not defined in IE 8/9. */
audio, canvas, video { display: inline-block; *display: inline; vertical-align: middle; *zoom: 1; }

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

/** Remove default list-style from list elements. */
ul, ol { list-style: none; }

/** Address `outline` inconsistency between Chrome and other browsers. */
a:focus { outline: thin dotted; }

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

/** [1] - Remove border when inside `a` element in IE 8/9. [2] - Improve IE's image resizing */
img { border: 0; /* [1] */ -ms-interpolation-mode: bicubic; /* [2] */ }

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

/** Correct font family set oddly in Safari 5 and Chrome. */
code, kbd, pre, samp { font-family: monospace, serif; }

/** Improve readability of pre-formatted text in all browsers. */
pre { white-space: pre-wrap; }

q { quotes: none; }

q:before, q:after { content: ''; content: none; }

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

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/** [1] - Address margins set differently in Firefox 4+, Safari 5, and Chrome. [2] - Correct font family not being inherited in all browsers. [3] - Correct font size not being inherited in all browsers. */
button, input, select, textarea { margin: 0; /* [1] */ font-family: inherit; /* [2] */ font-size: 100%; /* [3] */ }

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

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

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

/** [1] - Remove excess padding in IE 7. [2] - Remove excess padding in IE 8/9. [3] - Address box sizing set to content-box in IE 8/9. */
input[type="checkbox"], input[type="radio"] { *width: 13px; /* [1] */ *height: 13px; /* [1] */ padding: 0; /* [2] */ box-sizing: border-box; /* [3] */ }

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

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

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

/** [1] - Remove default vertical scrollbar in IE 8/9. [2] - Improve readability and alignment in all browsers. [3] - Restrict horizontal resizing. */
textarea { overflow: auto; /* [1] */ vertical-align: top; /* [2] */ resize: vertical; /* [3] */ }

/** Make all labels appear clickable. Labels should include the `for` attribute to allow access to the field they represent. */
label { cursor: pointer; }

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

/** Make `strong` influence bold styling across all browsers. */
strong { font-weight: bold; }

/** Make `em` influence italic styling across all browsers. */
em { font-style: italic; }

/* ============================================== Base
============================================== */
/** General font rules */
html, button, input, select, textarea { font-family: "proxima-nova-alt", "proxima-nova", "Helvetica", "Arial", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: #222222; }

/** [1] - Prevent images from exceding their containers [2] - Remove gap below images */
img { max-width: 100%; /* [1] */ vertical-align: middle; /* [2] */ }

/* ============================================== HELPERS ============================================== */
/** Display helpers based on media queries  `@extend .show--mobile-only;`  */
.hidden, .show--mobile-only, .show--tablet-only, .show--tablet-up, .show--tablet-down, .show--desktop-up, .show--max-only { display: none; }

@media only screen and (max-width: 568px) { .show--mobile-only { display: inherit; } }

@media only screen and (min-width: 569px) and (max-width: 768px) { .show--tablet-only { display: inherit; } }

@media only screen and (min-width: 569px) { .show--tablet-up { display: inherit; } }

@media only screen and (max-width: 768px) { .show--tablet-down { display: inherit; } }

@media only screen and (min-width: 769px) { .show--desktop-up { display: inherit; } }

@media only screen and (min-width: 1016px) { .show--max-only { display: inherit; } }

/**
* Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
* Extend the clearfix class with Sass to avoid the `.cf` class appearing over markup
* `@extend .cf;`
*
*/
.cf, .has-sidebar, .has-sidebar--left, .split, .split--tablet, .split--desktop, .split--max, .g, .main-nav, .tweets, .page-foot, .security { *zoom: 1; }
.cf:after, .has-sidebar:after, .has-sidebar--left:after, .split:after, .split--tablet:after, .split--desktop:after, .split--max:after, .g:after, .main-nav:after, .tweets:after, .page-foot:after, .security:after { content: ""; display: table; clear: both; }

/** Image replacement technique to hide text when adding a background image. This technique is favorable over `text-indent: -9999px;` because we avoid drawing very wide boxes to accomodate the indent.  Note: IE10 does not like the use of the image technique with pseudo elements that do not have a declared height. An example of this would be problems with CSS arrow pseudo elements with parents that contain text.  `@extend .ir;`  */
.ir, .main-nav .main-nav__logo, .download-sources__source, .share__icon, .security-badge { font: 0/0 a; text-shadow: none; color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; }
.ir:before, .main-nav .main-nav__logo:before, .download-sources__source:before, .share__icon:before, .security-badge:before { content: ""; display: block; width: 0; height: 100%; }

/** Visually hide elements, but allow them to be read by screen readers.  `@extend .vh;`  */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; }

/** Text alignment helpers */
.center, .text--center { text-align: center; }

.align--left, .text--left { text-align: left; }

.align--right, .text--right { text-align: right; }

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

/* ============================================== Structure
============================================== */
/** Common page layout structure elements designed for rapid responsive development. */
.container { max-width: 1016px; padding: 0 20px; margin: 0 auto; }

[class*="container--"] { margin-left: auto; margin-right: auto; }

.container--med { max-width: 1000px; }

.container--small { max-width: 800px; }

.container--micro { max-width: 375px; }

/** Fixed sidebar with a flexible content area. This pattern is useful for content folding where the sidebar needs to wrap under the content area, and retain natural sizing.  <div class="has-sidebar"> <div class="has-sidebar__content"> ... </div> <div class="has-sidebar__sidebar"> ... </div> </div>  */
@media only screen and (min-width: 769px) { .has-sidebar { padding-right: 340px; }
  .has-sidebar__sidebar { width: 300px; margin-right: -100%; margin-left: 40px; float: left; }
  .has-sidebar__content { width: 100%; float: left; }
  .has-sidebar--left { padding-left: 340px; }
  .has-sidebar--left .has-sidebar__sidebar { width: 300px; margin-right: 40px; margin-left: -100%; float: right; }
  .has-sidebar--left .has-sidebar__content { float: right; } }
/** Objects and abstractions. */
/* ============================================== Split
============================================== */
/** Set up the splits with two variations, `.split--tablet` and `.split--desktop`. The variation splits will upack faster than regualar `.split` elements, which is useful when used with larger images.  The mixin can be reused to create custom splits for different breakpoints:  .split--widescreen { @include breakpoint("widescreen") { @include split(50px); }      }  */
.split .split__asset { margin: 0 10px 10px 0; float: left; }
.split .split__asset--right { margin: 0 0 10px 10px; float: right; }

.split__asset, .split__asset--right { display: block; }

.split__body { overflow: hidden; }

/** Breakpoint variations for tablet, desktop, and max. */
.split--tablet .split__asset, .split--tablet .split__asset--right, .split--desktop .split__asset, .split--desktop .split__asset--right, .split--max .split__asset, .split--max .split__asset--right { text-align: center; }

@media only screen and (min-width: 569px) { .split--tablet .split__asset { margin: 0 20px 20px 0; float: left; }
  .split--tablet .split__asset--right { margin: 0 0 20px 20px; float: right; } }

@media only screen and (min-width: 769px) { .split--desktop .split__asset { margin: 0 32px 32px 0; float: left; }
  .split--desktop .split__asset--right { margin: 0 0 32px 32px; float: right; } }

@media only screen and (min-width: 1016px) { .split--max .split__asset { margin: 0 40px 40px 0; float: left; }
  .split--max .split__asset--right { margin: 0 0 40px 40px; float: right; } }

/* ============================================== Grid
============================================== */
/** Responsive grid system that allows for the creation of flexible, mobile-first grids.  Example Grid:  <div class="grid thirds"> <div class="grid__item"> ... </div> <div class="grid__item"> ... </div> <div class="grid__item"> ... </div> </div>  */
.g { list-style: none; }

.g > li, .g__item { width: 100%; margin-bottom: 20px; }

/** Mobile first grids, where grids do not exist below tablet size. White space stripping magic is appreciatively stolen from YUI, Pure, and SUIT. */
@media only screen and (min-width: 569px) { .g { margin-left: -20px; font-size: 0; }
  .g > li, .g__item { padding-left: 20px; display: inline-block; *display: inline; vertical-align: top; *zoom: 1; font-size: 15px; }
  /** Grid Rows should be expected to consume only one row and therefore should not have margins on `.g__item` elements. */
  .g-row > li, .g-row > .g__item { margin-bottom: 0; }
  /** Tight grids will not contain smaller/no gutters. */
  .g--tight { margin-left: 0px; }
  .g--tight > li, .g--tight .g__item { margin-bottom: 0px; padding-left: 0px; }
  /** Tight grids will not contain smaller/no gutters. */
  .g--lrg { margin-left: -50px; }
  .g--lrg > li, .g--lrg .g__item { margin-bottom: 80px; padding-left: 50px; }
  /** Whole grid items, using `!important` so these styles win regardless of its containing grid. */
  .g__whole { width: 100% !important; }
  /** Create the baseline grid. */
  /** Whole grid items, using `!important` so these styles win regardless of its containing grid. */
  .g__whole { width: 100% !important; }
  .g-whole > li, .g-whole > .g__item { width: 100%; }
  /** Halves */
  .g-halves > li, .g-halves > .g__item { width: 50%; }
  .g-thirds > li, .g-thirds > .g__item { width: 33.33%; }
  .g-thirds > .g__item--2-3 { width: 66.66%; }
  .g-fourths > li, .g-fourths > .g__item { width: 25%; }
  .g-fourths > .g__item--2-4 { width: 50%; }
  .g-fourths > .g__item--3-4 { width: 75%; }
  .g-fifths > li, .g-fifths > .g__item { width: 20%; }
  .g-fifths > .g__item--2-5 { width: 40%; }
  .g-fifths > .g__item--3-5 { width: 60%; }
  .g-fifths > .g__item--4-5 { width: 80%; }
  .g-sixths > li, .g-sixths > .g__item { width: 16.66%; }
  .g-sixths > .g__item--2-6 { width: 33.32%; }
  .g-sixths > .g__item--3-6 { width: 49.98%; }
  .g-sixths > .g__item--4-6 { width: 66.64%; }
  .g-sixths > .g__item--5-6 { width: 83.3%; } }
/** Reverse Grids  This hack behavior will slip a grid item above the rest, working best with single row grids. */
@media only screen and (max-width: 768px) { .g--reverse { width: 100%; display: table; table-layout: fixed; }
  .g--reverse .g__item--top { display: table-header-group; } }
/** Tablet only grid. */
@media only screen and (min-width: 569px) and (max-width: 768px) { /** Whole grid items, using `!important` so these styles win regardless of its containing grid. */
  .g__whole--tablet { width: 100% !important; }
  .g-whole--tablet > li, .g-whole--tablet > .g__item { width: 100%; }
  /** Halves */
  .g-halves--tablet > li, .g-halves--tablet > .g__item { width: 50%; }
  .g-thirds--tablet > li, .g-thirds--tablet > .g__item { width: 33.33%; }
  .g-thirds--tablet > .g__item--2-3 { width: 66.66%; }
  .g-fourths--tablet > li, .g-fourths--tablet > .g__item { width: 25%; }
  .g-fourths--tablet > .g__item--2-4 { width: 50%; }
  .g-fourths--tablet > .g__item--3-4 { width: 75%; }
  .g-fifths--tablet > li, .g-fifths--tablet > .g__item { width: 20%; }
  .g-fifths--tablet > .g__item--2-5 { width: 40%; }
  .g-fifths--tablet > .g__item--3-5 { width: 60%; }
  .g-fifths--tablet > .g__item--4-5 { width: 80%; }
  .g-sixths--tablet > li, .g-sixths--tablet > .g__item { width: 16.66%; }
  .g-sixths--tablet > .g__item--2-6 { width: 33.32%; }
  .g-sixths--tablet > .g__item--3-6 { width: 49.98%; }
  .g-sixths--tablet > .g__item--4-6 { width: 66.64%; }
  .g-sixths--tablet > .g__item--5-6 { width: 83.3%; } }
/** Desktop only grid. */
@media only screen and (min-width: 769px) { /** Whole grid items, using `!important` so these styles win regardless of its containing grid. */
  .g__whole--desktop { width: 100% !important; }
  .g-whole--desktop > li, .g-whole--desktop > .g__item { width: 100%; }
  /** Halves */
  .g-halves--desktop > li, .g-halves--desktop > .g__item { width: 50%; }
  .g-thirds--desktop > li, .g-thirds--desktop > .g__item { width: 33.33%; }
  .g-thirds--desktop > .g__item--2-3 { width: 66.66%; }
  .g-fourths--desktop > li, .g-fourths--desktop > .g__item { width: 25%; }
  .g-fourths--desktop > .g__item--2-4 { width: 50%; }
  .g-fourths--desktop > .g__item--3-4 { width: 75%; }
  .g-fifths--desktop > li, .g-fifths--desktop > .g__item { width: 20%; }
  .g-fifths--desktop > .g__item--2-5 { width: 40%; }
  .g-fifths--desktop > .g__item--3-5 { width: 60%; }
  .g-fifths--desktop > .g__item--4-5 { width: 80%; }
  .g-sixths--desktop > li, .g-sixths--desktop > .g__item { width: 16.66%; }
  .g-sixths--desktop > .g__item--2-6 { width: 33.32%; }
  .g-sixths--desktop > .g__item--3-6 { width: 49.98%; }
  .g-sixths--desktop > .g__item--4-6 { width: 66.64%; }
  .g-sixths--desktop > .g__item--5-6 { width: 83.3%; } }
/** Max only grid. */
@media only screen and (min-width: 1016px) { /** Whole grid items, using `!important` so these styles win regardless of its containing grid. */
  .g__whole--max { width: 100% !important; }
  .g-whole--max > li, .g-whole--max > .g__item { width: 100%; }
  /** Halves */
  .g-halves--max > li, .g-halves--max > .g__item { width: 50%; }
  .g-thirds--max > li, .g-thirds--max > .g__item { width: 33.33%; }
  .g-thirds--max > .g__item--2-3 { width: 66.66%; }
  .g-fourths--max > li, .g-fourths--max > .g__item { width: 25%; }
  .g-fourths--max > .g__item--2-4 { width: 50%; }
  .g-fourths--max > .g__item--3-4 { width: 75%; }
  .g-fifths--max > li, .g-fifths--max > .g__item { width: 20%; }
  .g-fifths--max > .g__item--2-5 { width: 40%; }
  .g-fifths--max > .g__item--3-5 { width: 60%; }
  .g-fifths--max > .g__item--4-5 { width: 80%; }
  .g-sixths--max > li, .g-sixths--max > .g__item { width: 16.66%; }
  .g-sixths--max > .g__item--2-6 { width: 33.32%; }
  .g-sixths--max > .g__item--3-6 { width: 49.98%; }
  .g-sixths--max > .g__item--4-6 { width: 66.64%; }
  .g-sixths--max > .g__item--5-6 { width: 83.3%; } }
/** Mobile only grid. Useful for persisting grids down to mobile sizes in a mobile-first stylesheet. */
@media only screen and (max-width: 568px) { .g--mobile { margin-left: -20px; font-size: 0; }
  .g--mobile > li, .g--mobile > .g__item { padding-left: 20px; display: inline-block; *display: inline; vertical-align: top; *zoom: 1; font-family: "proxima-nova-alt", "proxima-nova", "Helvetica", "Arial", sans-serif; font-size: 15px; letter-spacing: normal; word-spacing: normal; text-rendering: auto; }
  /** Whole grid items, using `!important` so these styles win regardless of its containing grid. */
  .g__whole--mobile { width: 100% !important; }
  .g-whole--mobile > li, .g-whole--mobile > .g__item { width: 100%; }
  /** Halves */
  .g-halves--mobile > li, .g-halves--mobile > .g__item { width: 50%; }
  .g-thirds--mobile > li, .g-thirds--mobile > .g__item { width: 33.33%; }
  .g-thirds--mobile > .g__item--2-3 { width: 66.66%; }
  .g-fourths--mobile > li, .g-fourths--mobile > .g__item { width: 25%; }
  .g-fourths--mobile > .g__item--2-4 { width: 50%; }
  .g-fourths--mobile > .g__item--3-4 { width: 75%; }
  .g-fifths--mobile > li, .g-fifths--mobile > .g__item { width: 20%; }
  .g-fifths--mobile > .g__item--2-5 { width: 40%; }
  .g-fifths--mobile > .g__item--3-5 { width: 60%; }
  .g-fifths--mobile > .g__item--4-5 { width: 80%; }
  .g-sixths--mobile > li, .g-sixths--mobile > .g__item { width: 16.66%; }
  .g-sixths--mobile > .g__item--2-6 { width: 33.32%; }
  .g-sixths--mobile > .g__item--3-6 { width: 49.98%; }
  .g-sixths--mobile > .g__item--4-6 { width: 66.64%; }
  .g-sixths--mobile > .g__item--5-6 { width: 83.3%; } }
/* ============================================== Buttons
============================================== */
.button { padding: 10px 14px; display: inline-block; *display: inline; vertical-align: middle; *zoom: 1; background: #92959e; border: none; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; font-weight: 600; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; white-space: nowrap; }

.button-primary, .button--primary { background: #f68f1e; -webkit-box-shadow: 0 4px 0 #cacaca; -moz-box-shadow: 0 4px 0 #cacaca; -ms-box-shadow: 0 4px 0 #cacaca; -o-box-shadow: 0 4px 0 #cacaca; box-shadow: 0 4px 0 #cacaca; }

.button--no-box-shadow, .button--flat { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; }

.button--disabled { opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 30 ")"; filter: alpha(opacity=30); zoom: 1; cursor: default; }

.button--large { font-size: 16px; }

.button--stroked { padding: 13px 14px; background: none; border: 1px solid #92959e; color: #777; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.button--stroked:hover { background: #92959e; color: #fff; }

.button--cta { white-space: normal; text-align: center; }

.button--lrg { font-size: 16px; }

.button--play { position: relative; padding-right: 36px; }
.button--play:before { content: ""; position: absolute; top: 50%; right: 15px; margin-top: -5px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid #777777; border-right: none; }
.button--play:hover:before { border-left-color: #fff; }

.button--light { color: #fff; }
.button--light.button--stroked { border: 1px solid #fff; }
.button--light.button--stroked:hover { background: #fff; color: #f68f1e; }
.button--light.button--play:before { border-left-color: #fff; }
.button--light.button--play:hover:before { border-left-color: #f68f1e; }

/* ============================================== Buttons
============================================== */
.overlays { display: none; }

.overlay { -webkit-transition: -webkit-transform 0.6s ease; -moz-transition: -moz-transform 0.6s ease; -ms-transition: -moz-transform 0.6s ease; -o-transition: -o-transform 0.6s ease; transition: transform 0.6s ease; }
.no-csstransforms .overlay { display: none; }

.overlay-active { overflow: hidden; }

.overlay-content-heading { margin: 0 -20px 20px; padding: 0 20px 20px; text-align: center; border-bottom: 1px solid #eee; }

@media only screen and (max-width: 568px) { .wrapper { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; }
  .page-main, .page-foot, .page-copyright { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); }
  .overlays { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none; }
  .no-pointerevents .overlays { display: none; }
  .no-pointerevents .overlay-active .overlays { display: block; }
  .overlay-active .overlays { pointer-events: auto; }
  .overlay { width: 100%; height: 100%; background: #fff; -webkit-transform: translate(0, 100%); -moz-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -o-transform: translate(0, 100%); transform: translate(0, 100%); }
  .overlay-show { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); }
  .overlay-header { padding: 12px 15px; background: #333; font-size: 14px; line-height: 1; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: left; }
  .overlay-header .close { padding-left: 28px; display: block; cursor: pointer; position: relative; }
  .overlay-header .close:before { content: ""; width: 21px; height: 16px; background: url("../../img/mobile_dismiss.png") no-repeat 0 0; position: absolute; top: -1px; left: 0; }
  .overlay-content { padding: 0 20px 20px; position: absolute; top: 38px; right: 0; bottom: 0; left: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
  #get-started .overlay-content { bottom: 40px; }
  .overlay-content-body { padding: 20px 0; }
  .overlay-cta { width: 100%; padding: 9px 20px; position: absolute; left: 0; bottom: 0; background: #696c74; color: #c6c7c9; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; }
  .overlay-cta p { margin: 0; }
  .overlay-cta a { margin-left: 2px; color: #e9eaeb; border-bottom: 1px dotted #e9eaeb; }
  .overlay-cta .overlay-cta__note { float: right; }
  .lt-ie8 .overlay-cta { width: auto; right: 0; } }
@media only screen and (min-width: 569px) { .overlays { height: 90%; padding: 0 40px; position: fixed; top: 10%; left: 0; right: 0; z-index: 1001; }
  .overlay { max-width: 900px; height: 90%; max-height: 700px; margin: 0 auto; display: block; background: #fff; position: relative; z-index: 1002; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-transform: translate(0, -1000px); -moz-transform: translate(0, -1000px); -ms-transform: translate(0, -1000px); -o-transform: translate(0, -1000px); transform: translate(0, -1000px); }
  .overlay-show { -webkit-transform: translate(0, 0) !important; -moz-transform: translate(0, 0) !important; -ms-transform: translate(0, 0) !important; -o-transform: translate(0, 0) !important; transform: translate(0, 0) !important; }
  .overlay-bg { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: fixed; top: 0; left: 0; z-index: 1000; }
  .no-rgba .overlay-bg { background: url("../../img/black_40.png") repeat 0 0; }
  .close { width: 35px; height: 35px; display: block; background: #696c74 url("../../img/overlay_close.png") no-repeat center center; position: absolute; top: -14px; right: -14px; z-index: 5; cursor: pointer; font: 0/0 a; text-shadow: none; color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; -webkit-border-radius: 35px; -moz-border-radius: 35px; -ms-border-radius: 35px; -o-border-radius: 35px; border-radius: 35px; }
  .close:before { content: ""; display: block; width: 0; height: 100%; }
  .close:hover { background-color: #565a63; }
  .overlay-content { width: 100%; position: absolute; top: 0; bottom: 52px; overflow: auto; }
  .overlay-content h2 { font-size: 32px; }
  .overlay-content h2 span { margin: 8px 0 0; display: block; }
  .overlay-content-header { padding: 50px; background: #f4f4f4; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; text-align: center; }
  .overlay-content-body { padding: 50px; }
  .overlay-cta { width: 100%; padding: 15px 50px; position: absolute; left: 0; bottom: 0; background: #696c74; color: #c6c7c9; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; }
  .overlay-cta p { margin: 0; }
  .overlay-cta a { margin-left: 2px; color: #e9eaeb; border-bottom: 1px dotted #e9eaeb; }
  .overlay-cta .overlay-cta__note { float: right; }
  .lt-ie8 .overlay-cta { width: auto; right: 0; }
  .overlay-content-heading { margin: 0 -50px 30px; padding-bottom: 30px; }
  .overlay--natural { height: auto; top: 5%; }
  .overlay--natural .overlay-content { height: auto; position: static; }
  .overlay .form-with-placeholders .grid-item { margin-bottom: 0; } }
.overlay-hide { display: none; }

#video-overlay { background: #000; }
#video-overlay .overlay-content-body { min-height: 354px; padding: 0; }
#video-overlay .close { top: 0; right: -45px; }
@media only screen and (max-width: 568px) { #video-overlay { width: 100% !important; }
  #video-overlay iframe, #video-overlay video { max-width: 100% !important; width: 100% !important; height: auto !important; }
  #video-overlay .close { right: 0; } }

.video-cta { padding: 18px 0 20px; text-align: center; }
.video-cta .button { background: #f68f1e; }

.row { padding-top: 40px; }
@media only screen and (min-width: 569px) { .row { padding-top: 50px; } }

@media only screen and (min-width: 569px) { .row__asset { max-width: inherit; float: left; display: block; }
  .row__asset img { max-width: inherit; }
  .row--right .row__asset { float: right; } }

.row__content { max-width: 500px; margin: 0 auto; padding: 0 0 25px; text-align: center; }
.row__content h2 { font-size: 34px; line-height: 1.1; font-weight: 500; }
.row__content p { line-height: 1.2; }
@media only screen and (min-width: 569px) { .row__content { padding: 0 30px 0 0; }
  .row--right .row__content { padding-left: 30px; padding-right: 0; } }

.row__content-text { max-width: 600px; }
.row__content-text h2 { font-size: 34px; line-height: 1.1; font-weight: 500; }
.row__content-text p { line-height: 1.5; }
@media only screen and (min-width: 769px) { .row__content-text h2 { font-size: 40px; } }

/* Feature Row Bottom Sticky
------------------------------------ */
@media only screen and (min-width: 769px) { .row__bottom-sticky-container { position: relative; }
  .row__bottom-sticky-content { padding-bottom: 60px; }
  .row__bottom-sticky { position: absolute; bottom: 0; right: 50%; max-width: none; } }
@media only screen and (min-width: 769px) { .row__bottom-sticky-content { padding-bottom: 120px; } }
/** Custom theme files start here. */
/* ============================================== Sprites
============================================== */
                 /**
* Compass sprite setup for convenient automatic sprites
*  `@import "icons/*.png;"
*
*
* Useful functions:
*
* Extend the icon sprite background-image selector:
* `@extend .icons-sprite;`
*
* Include the background position of a given
* image with optional nudging:
* `@include sprite-background-position($icons-sprites, "image_name");` `@include sprite-background-position($icons-sprites, "image_name", 4px, 4px);`
*
* Change the layout of your sprite map with these options `:diagnoal, :horizontal, :vertical, :smart` `$icons-layout:diagonal;`
*
* Add transparent spacing around images `$icons-spacing: 20px;`
*
*/
.icons-sprite, .main-nav .main-nav__logo, .masthead .learn-more:after, .download-sources__source, .share__icon, .testimonial .split__body .video-play:after, .industry-icon:before, .security-badge { background: url('/sites/all/themes/connect/img/icons-s8654197607.png') no-repeat; }

/* ============================================== MINDBODY Connect Theme
============================================== */
/* General
*******************/
body { text-align: center; }
@media only screen and (min-width: 569px) { body { text-align: left; } }

h1, h2 { font-size: 40px; }
@media only screen and (min-width: 569px) { h1, h2 { font-size: 48px; } }

h4 { font-size: 24px; }
@media only screen and (min-width: 569px) { h4 { font-size: 30px; } }

p { font-size: 22px; line-height: 1.4; color: #747678; font-weight: 300; }
@media only screen and (min-width: 769px) { p { font-size: 30px; } }

a { text-decoration: none; color: #f6a64f; }

/* Main Nav
*******************/
.main-nav .main-nav__logo { width: 279px; height: 31px; margin: 6px auto 0; display: block; float: none; background-position: 0 -38px; }
@media only screen and (min-width: 569px) { .main-nav .main-nav__logo { float: left; margin: 6px 0 0; } }
.main-nav .download-sources { display: none; }
@media only screen and (min-width: 569px) { .main-nav .download-sources { display: block; float: right; } }

/* Masthead
*******************/
.masthead { height: 640px; padding: 2.66667em 0 0; background: url("../../img/bg_masthead_mobile.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; overflow: hidden; }
.masthead .headline h1 { margin-bottom: 8px; font-size: 26px; }
.masthead .headline p { font-size: 16px; color: #fff; }
.masthead .container { height: 100%; position: relative; z-index: 5; }
.masthead .headline { margin: 5.33333em auto; }
.masthead .learn-more { position: absolute; bottom: 0; left: 50%; margin-left: -50px; font-size: 16px; font-weight: 600; color: #FFFFFF; text-transform: uppercase; }
.masthead .learn-more:after { width: 34px; height: 15px; margin: 10px 0 0 33px; content: ""; display: block; background-position: -8px -69px; }
@media only screen and (min-width: 569px) { .masthead { height: 868px; padding: 2.66667em 0; background: #000; }
  .masthead .headline h1 { font-size: 48px; }
  .masthead .headline p { font-size: 20px; } }

.masthead__phones { display: none; }
.mobile--loaded .masthead__phones { display: inline-block; *display: inline; vertical-align: middle; *zoom: 1; }
@media only screen and (min-width: 569px) { .mobile--loaded .masthead__phones { display: none; } }

.button-message { margin: 40px 0; }
.button-message h3 { margin: 0 0 24px; font-size: 18px; font-weight: 500; font-style: italic; color: #f49023; }
@media only screen and (min-width: 569px) { .button-message h3 { margin: 0 0 18px; font-size: 21px; } }
.button-message .button { display: block; max-width: 220px; margin: 0 auto 18px; }
@media only screen and (min-width: 569px) { .button-message .button { display: inline-block; max-width: inherit; margin: 0 8px; } }

/* Sections
*******************/
.section--learn-more .g__item--bottom { margin-top: 30px; }
.section--learn-more .row__content { padding-bottom: 0; }
@media only screen and (min-width: 769px) { .section--learn-more { padding: 0; }
  .section--learn-more p { text-align: left; }
  .section--learn-more .row__content { position: relative; }
  .section--learn-more .g__item { vertical-align: middle; }
  .section--learn-more .g__item--bottom { height: 594px; margin-top: 0; } }

.section--has-testimonial .container { height: 100%; position: relative; }
.section--has-testimonial .banner-testimonial { width: 100%; margin-left: -20px; position: absolute; bottom: 0; right: inherit; }
.section--has-testimonial .banner-testimonial--long-body .split__body { max-width: 215px; margin: 0 auto; }
@media only screen and (min-width: 569px) { .section--has-testimonial .banner-testimonial { width: auto; margin: 0; position: absolute; bottom: 0; right: 20px; }
  .section--has-testimonial .banner-testimonial .split__asset { margin-bottom: 0; } }

.section--bg { height: 676px; background: #f4f4f4 no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; }

.section__favorites { background-image: url("../../img/bg_book_your_favorites_768.jpg"); }
@media only screen and (min-width: 769px) { .section__favorites { background-image: url("../../img/bg_book_your_favorites.jpg"); } }

.section__routine { background-image: url("../../img/bg_its_easier_768.jpg"); }
@media only screen and (min-width: 769px) { .section__routine { background-image: url("../../img/bg_its_easier.jpg"); } }

.section__stylish { background-image: url("../../img/bg_stylish_never_been_768.jpg"); }
@media only screen and (min-width: 769px) { .section__stylish { background-image: url("../../img/bg_stylish_never_been.jpg"); } }

.section__pay-from-app { background-image: url("../../img/bg_you_can_even_pay_768.jpg"); }
@media only screen and (min-width: 769px) { .section__pay-from-app { background-image: url("../../img/bg_you_can_even_pay.jpg"); } }

.section__million-users { background-image: url("../../img/bg_million_users_768.jpg"); }
@media only screen and (min-width: 769px) { .section__million-users { background-image: url("../../img/bg_million_users.jpg"); } }

/* Headline
*******************/
.headline { color: #fff; }
.headline h1, .headline h2, .headline h4 { margin-bottom: 20px; font-weight: 300; text-transform: uppercase; }
.headline p { margin-bottom: 20px; }
.headline.headline--with-subtitle h1, .headline.headline--with-subtitle h2 { margin-bottom: 2px; }

/* Main
*******************/
.page-main { position: relative; padding: 295px 0 0; color: #5e5e5e; text-align: center; }
.page-main p { margin: 0 0 15px; }
@media only screen and (min-width: 569px) { .page-main { min-height: 550px; padding: 80px 0 0; color: #fff; text-align: left; }
  .lt-ie9 .page-main { min-height: 600px; } }

/* Download Sources
*******************/
.download-sources__source { width: 170px; height: 62px; margin: 0 0 10px; display: inline-block; *display: inline; vertical-align: top; *zoom: 1; }
@media only screen and (min-width: 569px) { .download-sources__source { margin: 0 10px 0 0; } }
.download-sources--small .download-sources__source { width: 123px; height: 43px; }

.app-store { background-position: 0 -292px; }
.download-sources--small .app-store { background-position: 0 -187px; }

.google-play { background-position: 0 -230px; }
.download-sources--small .google-play { background-position: -102px -108px; }

/* Share nav
*******************/
.nav li { margin-left: 10px; display: inline-block; *display: inline; vertical-align: middle; *zoom: 1; }
@media only screen and (max-width: 568px) { .nav { margin: 0 0 50px; }
  .nav .nav__title { margin: 0 0 10px; display: block; } }

@media only screen and (min-width: 569px) { .share { float: right; } }

.share__icon { width: 31px; height: 31px; display: block; }

.share__icon--facebook { background-position: 0 0; }

.share__icon--twitter { background-position: -31px 0; }

.share__icon--pinterest { background-position: -62px 0; }

#share-pinterest a { width: 31px !important; height: 31px !important; margin: 0 !important; display: block !important; background: url("../../img/icons/pinterest.png") no-repeat 0 0 !important; }

/* Testimonial
*******************/
.testimonial { margin: 20px 0 0; }
@media only screen and (min-width: 569px) { .testimonial { text-align: left; } }
.testimonial .split__asset { margin-right: 20px; }
.testimonial .split__body { padding-top: 18px; }
.testimonial .split__body h4 { font-size: 20px; color: #868686; font-weight: 300; }
@media only screen and (min-width: 569px) { .testimonial .split__body h4 { font-size: 24px; } }
.testimonial .split__body .video-play { padding: 12px 14px 0 0; position: relative; display: inline-block; *display: inline; vertical-align: middle; *zoom: 1; font-size: 16px; color: #FF7E00; font-weight: 300; }
@media only screen and (min-width: 569px) { .testimonial .split__body .video-play { font-size: 20px; } }
.testimonial .split__body .video-play:after { content: ""; width: 8px; height: 13px; display: block; position: absolute; top: 18px; right: 0; background-position: 0 -69px; }

.banner-testimonial { display: none; }
.banner-testimonial h4 { color: #fff; font-size: 18px; font-weight: 600; }
.banner-testimonial p { color: #fff; font-size: 16px; }
.banner-testimonial .split__body { padding-top: 16px; }
@media only screen and (min-width: 769px) { .banner-testimonial { display: block; } }

/* Industry Icons
*******************/
.industry-icon { position: relative; padding-top: 55px; display: block; }
.industry-icon:before { content: ""; position: absolute; top: 0; left: 50%; display: block; }

.industry-icon--fitness:before { width: 45px; height: 28px; margin-left: -22px; top: 5px; background-position: -42px -69px; }

.industry-icon--salon:before { width: 34px; height: 36px; margin-left: -17px; background-position: -169px 0; }

.industry-icon--dance:before { width: 28px; height: 38px; margin-left: -14px; background-position: -115px -69px; }

.industry-icon--yoga:before { width: 54px; height: 36px; margin-left: -27px; background-position: -93px 0; }

.industry-icon--box-training:before { width: 27px; height: 36px; margin-left: -13px; background-position: -203px 0; }

.industry-icon--wellness:before { width: 22px; height: 38px; margin-left: -11px; background-position: -147px 0; }

.industry-icon--martial-arts:before { width: 27px; height: 37px; margin-left: -13px; background-position: -230px 0; }

.industry-icon--pilates:before { width: 24px; height: 39px; margin-left: -12px; background-position: -143px -69px; }

.industry-icons { max-width: 300px; margin: 40px auto 0; }
.industry-icons li { width: 120px; margin: 0 auto 20px; display: block; }
.industry-icons .industry-icon { color: #c8c8c8; text-transform: uppercase; font-size: 15px; font-weight: 500; }
@media only screen and (min-width: 569px) { .industry-icons { max-width: 600px; }
  .industry-icons li { margin: 0 0 20px 20px; display: inline-block; *display: inline; vertical-align: middle; *zoom: 1; } }
@media only screen and (min-width: 900px) { .industry-icons { max-width: inherit; margin: 40px 0 0 -20px; }
  .industry-icons li { width: auto; min-width: 80px; } }

/* Tweets
*******************/
.section__twitter { overflow: scroll; }

.tweets { width: 1745px; }

.tweet { width: 325px; margin-right: 20px; padding: 30px 20px 23px; border: 1px solid #D5D5D5; float: left; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
.tweet:first-child { margin-left: 20px; }

.tweet__content { margin-bottom: 6px; font-size: 20px; color: #333435; }

.tweet__meta { font-size: 14px; color: #919396; }

.tweet__author { padding-top: 20px; }
.tweet__author img { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
.tweet__author .split__body { margin-top: 5px; }

.tweet__author-name { font-size: 20px; color: #333435; }

.tweet__author-handle { font-size: 16px; color: #626364; }

/* Video Fill
*******************/
.video-fill { position: absolute; top: 0; left: 0; z-index: 1; }

.video-fill__cover { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); }
.no-rgba .video-fill__cover { background: url("../../img/black30.png") repeat left top; }

/** Tabs **/
.tabs-nav { margin: 0 0 40px; letter-spacing: -5px; position: relative; z-index: 4; }

.tabs-nav__item { padding: 4px 8px; display: inline-block; *display: inline; vertical-align: middle; *zoom: 1; border: 1px solid #d3d3d3; border-right-color: #e8e9ec; font-size: 16px; word-spacing: 0; letter-spacing: 0; color: #686b73; background: #e8e9ec; }
.tabs-nav__item:first-child { -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; -ms-border-radius: 3px 0 0 3px; -o-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; border-left-color: #d3d3d3; }
.tabs-nav__item:last-child { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; -ms-border-radius: 0 3px 3px 0; -o-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; border-right-color: #d3d3d3; }
.tabs-nav--menu .tabs-nav__item { display: none; text-align: left; border: 1px solid #d3d3d3; border-top: none; cursor: pointer; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
.tabs-nav--menu .tabs-nav__item:last-child { -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; }
.tabs-nav--menu-open .tabs-nav__item { display: block; }

.tabs-nav__item--active { background: #fff; cursor: default; border-right-color: #fff; border-left-color: #d3d3d3; }
.tabs-nav--menu .tabs-nav__item--active { display: block; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; border-top: 1px solid #d3d3d3; position: absolute; top: 0; left: 0; width: 100%; }
.tabs-nav--menu .tabs-nav__item--active:before { content: ""; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #222222; border-right: none; position: absolute; top: 9px; right: 15px; }
.tabs-nav--menu-open .tabs-nav__item--active { -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; }
.tabs-nav--menu-open .tabs-nav__item--active:before { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #222222; border-bottom: none; top: 11px; }

.tabs-nav--menu { height: 29px; margin: 0 0 40px; }
.tabs-nav--menu .tabs-nav__container { width: 100%; padding: 29px 0 0; position: absolute; }

.tabs__tab { display: none; }

.tabs__tab--active { display: block; }

.page-foot { margin: 0; padding: 0 0 25px; border-bottom: 2px solid #eee; color: #8c8e93; }
.page-foot a { color: #8c8e93; }
.page-foot .faq-toggle { margin: 4px 0 0; padding: 4px 8px; display: inline-block; *display: inline; vertical-align: middle; *zoom: 1; border: 1px solid #d8d8d8; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; cursor: pointer; }
@media only screen and (min-width: 569px) { .page-foot { padding: 40px 0 25px; }
  .page-foot p { margin: 4px 0 0; padding: 4px 8px; float: right; display: block; border: 1px solid #d8d8d8; font-size: 16px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
  .page-foot .page-foot__actions { float: left; }
  .page-foot .faq-toggle { float: left; } }

.nav li { margin-left: 10px; display: inline-block; *display: inline; vertical-align: middle; *zoom: 1; }
@media only screen and (max-width: 568px) { .nav { margin: 0 0 25px; }
  .nav .nav__title { margin: 0 0 10px; display: block; } }

@media only screen and (min-width: 569px) { .share { float: right; } }

.share__icon { width: 31px; height: 31px; display: block; }

.share__icon--facebook { background-position: 0 0; }

.share__icon--twitter { background-position: -31px 0; }

.share__icon--pinterest { background-position: -62px 0; }

#share-pinterest a { width: 31px !important; height: 31px !important; margin: 0 !important; display: block !important; background: url("../../img/icons/pinterest.png") no-repeat 0 0 !important; }

.faq { padding: 40px 0; }
.faq h3 { padding: 0 0 20px; font-size: 29px; font-weight: 300; color: #6caa67; }

.faqs { margin: 0; padding-bottom: 20px; }
.faqs h4 { padding: 20px 0; border-bottom: 1px solid #f0f0f0; font-size: 29px; font-weight: 300; color: #6caa67; }
.faqs dl { border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; text-align: left; }
.faqs dt { padding: 15px 0; border-top: 1px solid #f0f0f0; font-size: 16px; font-weight: 600; color: #696c74; cursor: pointer; }
.faqs dt:hover { color: #6caa67; }
.faqs dt:first-child { border: 0; }
.faqs .active-term { color: #6caa67; }
.faqs dd { margin: 0 0 15px; display: none; }
.faqs dd p { margin: 0 0 .5em; font-size: 16px; font-weight: 400; color: #606060; }
.faqs dd em { font-weight: 600; font-style: italic; color: #5e5e5e; }
.faqs .active-description { display: block; }
.faqs .devices { margin: 15px 0; }
.faqs .device { margin-top: 2px; padding: 0; position: relative; }
.faqs .device:first-child { margin-top: 0; }
.faqs .device__asset { width: 100%; height: 65px; margin: 0 0 2px; position: relative; background: #f1f1f1; background-position: 20px center; background-repeat: no-repeat; }
.faqs .device__asset h5 { text-indent: -9999em; }
.faqs .device__asset--android { background-image: url("../../img/logo_device_android.png"); }
.faqs .device__asset--ios { background-image: url("../../img/logo_device_ios.png"); }
.faqs .device__content { margin: 0; padding: 20px; background: #f8f8f8; overflow: hidden; }
.faqs .device__content p { margin: .5em 0 0; }
.faqs .device__content p:first-child { margin: 0; }
@media only screen and (min-width: 569px) { .faqs { margin: 0; padding-bottom: 35px; }
  .faqs h4 { padding: 35px 0; }
  .faqs dt { padding: 25px 0; }
  .faqs dd { margin: 0 0 25px; }
  .faqs .devices { margin: 25px 0; }
  .faqs .device { padding: 0 0 0 20%; }
  .faqs .device__asset { width: 20%; height: 100%; position: absolute; top: 0; left: 0; background-position: center center; }
  .faqs .device__content { margin-left: 2px; padding: 35px; } }

.faqs--active { display: block; }

.faqs__getting-started { margin: 15px 0 0; padding-bottom: 0; display: block; }
.faqs__getting-started h3 { padding: 20px 0; border-bottom: 1px solid #f0f0f0; font-size: 29px; font-weight: 300; color: #6caa67; }
.faqs__getting-started h4 { padding: 12px 0 8px; font-size: 24px; color: #696C74; border: 0; }
.faqs__getting-started h4:first-child { padding-top: 0; }
.faqs__getting-started dl { margin-top: 20px; }
.faqs__getting-started p { font-size: 16px; color: #606060; }
@media only screen and (min-width: 569px) { .faqs__getting-started { margin: 0; }
  .faqs__getting-started h3 { padding: 35px 0; }
  .faqs__getting-started h4 { padding: 20px 0 8px; }
  .faqs__getting-started dl { margin-top: 20px; } }

/* ============================================== Footer
============================================== */
footer p { font-size: 16px; }

.page-copyright { padding: 25px 0; text-align: left; border-top: 1px solid #eee; }
.page-copyright p { margin: 0 0 6px; line-height: 1.1; }
.page-copyright small { margin-right: 10px; }

.security { margin: 0 0 10px; }
.security li { width: 50%; margin: 0 0 22px; display: block; float: left; text-align: center; }
@media only screen and (min-width: 569px) { .security li { width: auto; margin: 0 0 0 20px; }
  .security li:first-child { margin: 0; }
  .lt-ie8 .security li { width: 110px; zoom: 1; } }
@media only screen and (min-width: 769px) { .security { float: right; } }

.security-badge { margin: 0 auto; display: block; }

.truste { width: 101px; height: 32px; background-position: 0 -151px; }

.pci-compliant { width: 106px; height: 34px; background-position: -167px -69px; }

.bbb { width: 95px; height: 36px; background-position: -101px -151px; }

.inc5000 { width: 102px; height: 38px; background-position: 0 -108px; }

.copyright-links { color: #ccc; }
.copyright-links span { margin: 0 2px; }
.copyright-links a { color: #999; }
.copyright-links a:hover { text-decoration: underline; }

/* ============================================== Page
============================================== */
.page { overflow: hidden; }
.lt-ie9 .page { overflow: visible; }

.wrapper { position: relative; }

/* Sections
------------------------------------ */
section { padding: 2.66667em 0; }
@media only screen and (min-width: 569px) { section { padding: 5.33333em 0; } }

.section--tight { padding: 2.66667em 0; }

.section--tight-top { padding: 2.66667em 0; }

.section--flush-bottom { padding-bottom: 0; }
.section--flush-bottom .g__item--flush { margin-bottom: 0; }

/* Headlines
------------------------------------ */
.headline { margin: 0 auto 5.33333em; text-align: center; }
@media only screen and (max-width: 568px) { .headline { font-size: 80%; } }
.headline .play-button { margin: 50px auto 0; }

.headline--intro { margin-bottom: 0; }

.headline--wide { max-width: 1000px; }

.headline--short { max-width: 700px; }

/* ============================================== Print
============================================== */
@media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  /** Don't show links for images, or javascript/internal links */
  .ir a:after, .main-nav .main-nav__logo a:after, .download-sources__source a:after, .share__icon a:after, .security-badge a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h1, h2, h3 { page-break-after: avoid; } }