/*! Copyright (c) 2020 Postbox, Inc. */
@charset "UTF-8";
@media screen and (max-width: 940px) {
  .large-only {
    display: none;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

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

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

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

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

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

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

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

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

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

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

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

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

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

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

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

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

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

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

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

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

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

td,
th {
  padding: 0;
}

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

/**
 * Reset default italic items and use the Gotham italic font.
 */
i, cite, em, var, address, dfn {
  font-weight: normal;
  font-style: normal;
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: italic;
}

/**
 * border-box as default
 */
*, *::after, *::before {
  box-sizing: border-box;
}

/**
 * Page level styles.
 *
 * 1. Use advanced typographic features included in some OpenType fonts.
 * 2. Prevent certain mobile browsers from automatically zooming fonts.
 * 3. Fonts on OSX will look more consistent with other systems that do not
 *    render text using sub-pixel anti-aliasing.
 */
html {
  -webkit-font-feature-settings: "kern", "liga", "pnum";
  -moz-font-feature-settings: "kern", "liga", "pnum";
  -ms-font-feature-settings: "kern", "liga", "pnum";
  font-feature-settings: "kern", "liga", "pnum";
  overflow-y: scroll;
  min-height: 100%;
  font-size: 0.875rem;
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  line-height: 1.57143;
  background: #00aaf0;
  color: #333;
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -moz-osx-font-smoothing: grayscale;
  /* 3 */
  -webkit-font-smoothing: antialiased;
  /* 3 */
}

@media screen and (max-width: 1280px) {
  html {
    font-size: 82%;
  }
}

@media screen and (max-width: 860px) {
  html {
    font-size: 80%;
  }
}

html.page-404 {
  background: #137787;
}

body {
  background: #fff;
}

/**
 * Container set up
 */
.container, .pagination > .pagination__wrap, .feature-container {
  max-width: 94.28571em;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2.85714rem;
  /**
   * Narrow container, use as a separate div. `div.container>div.container--narrow`.
   */
}

.container::after, .pagination > .pagination__wrap::after, .feature-container::after {
  clear: both;
  content: "";
  display: table;
}

@media screen and (max-width: 940px) {
  .container, .pagination > .pagination__wrap, .feature-container {
    padding: 0 2.14286rem;
  }
}

@media screen and (max-width: 760px) {
  .container, .pagination > .pagination__wrap, .feature-container {
    padding: 0 1.42857rem;
  }
}

.container--narrow {
  max-width: 58.57143rem;
  margin: auto;
}

/**
 * Clearfix
 */
.cf::after,
.clearfix::after {
  clear: both;
  content: "";
  display: table;
}

.borderless--bottom {
  border-bottom: none !important;
}

.borderless--top {
  border-top: none !important;
}

/**
 * BEGIN Redactor II's Alignment plugin classes
 */
.text-center {
  text-align: center;
}

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

/**
 * END Redactor II's Alignment plugin classes
 */
@font-face {
  font-family: postbox-icons;
  src: url("../fonts/postbox-icons.eot");
  src: url("../fonts/postbox-icons.eot#iefix") format("embedded-opentype"), url("../fonts/postbox-icons.woff") format("woff"), url("../fonts/postbox-icons.ttf") format("truetype"), url("../fonts/postbox-icons.svg#postbox-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'postbox';
    src: url('../font/postbox.svg?67718354#postbox') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "postbox-icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-help:before {
  content: '\e800';
}

/* '?' */
.icon-facebook:before {
  content: '\e801';
}

/* 'f' */
.icon-info:before {
  content: '\e802';
}

/* 'i' */
.icon-left:before {
  content: '\e803';
}

/* 'l' */
.icon-right:before {
  content: '\e804';
}

/* 'r' */
.icon-search:before {
  content: '\e805';
}

/* 's' */
.icon-twitter:before {
  content: '\e806';
}

/* 't' */
/**
 * 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.
 */
h1, h2, h3, h4, h5, h6, hgroup,
ul, ol, dl,
blockquote, p, address,
table,
fieldset, figure,
pre {
  margin-bottom: 1.57143rem;
}

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

/**
 * Rule base
 */
hr.rule,
.rule, hr.rule--btm,
.rule--btm, hr.rule--flush,
.rule--flush {
  border: 0;
  border-top: 1px solid #e3e6e9;
}

/**
 * Standard equal margin rule
 */
hr.rule,
.rule {
  margin: 1.57143rem 0;
}

/**
 * More spacing underneith rule
 */
hr.rule--btm,
.rule--btm {
  margin: 1.57143rem 0 3.14286rem;
}

/**
 * Rule with no margin.
 */
hr.rule--flush,
.rule--flush {
  margin: 0;
}

/**
 * Images responsive by default.
 *
 * 1. Fluid.
 * 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 */
  font-style: italic;
  /* 2 */
  vertical-align: middle;
  /* 3 */
}

/**
 * Styles for non-responsive images.
 *
 * 1. Respect if a `width` and/or `height` attribute have been explicitly defined.
 * 2. Fix Google Maps, doesn't like fluid images.
 */
img[width],
img[height],
.gm-style img {
  /* 2 */
  max-width: none;
}

/**
 * Remove default margin + padding on figure.
 */
figure {
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -.03em;
}

h4, h5, h6 {
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -.03em;
}

/**
 * Headings
 */
h1, .alpha {
  font-size: 34px;
  font-size: 2.42857rem;
  line-height: 1.3;
}

@media screen and (max-width: 1440px) {
  h1, .alpha {
    font-size: 30px;
    font-size: 2.14286rem;
  }
}

h2, .beta {
  font-size: 30px;
  font-size: 2.14286rem;
  line-height: 1.3;
}

@media screen and (max-width: 1440px) {
  h2, .beta {
    font-size: 26px;
    font-size: 1.85714rem;
  }
}

h3, .gamma {
  font-size: 26px;
  font-size: 1.85714rem;
  line-height: 1.3;
}

@media screen and (max-width: 1440px) {
  h3, .gamma {
    font-size: 22px;
    font-size: 1.57143rem;
  }
}

h4, .delta {
  font-size: 22px;
  font-size: 1.57143rem;
  line-height: 1.3;
}

@media screen and (max-width: 1440px) {
  h4, .delta {
    font-size: 20px;
    font-size: 1.42857rem;
  }
}

h5, .epsilon, .media__title, .feature__title {
  font-size: 20px;
  font-size: 1.42857rem;
  line-height: 1.3;
}

@media screen and (max-width: 1440px) {
  h5, .epsilon, .media__title, .feature__title {
    font-size: 18px;
    font-size: 1.28571rem;
  }
}

h6, .zeta {
  font-size: 18px;
  font-size: 1.28571rem;
  line-height: 1.3;
}

@media screen and (max-width: 1440px) {
  h6, .zeta {
    font-size: 17px;
    font-size: 1.21429rem;
  }
}

/**
 * Lede
 */
.lede {
  font-size: 16px;
  font-size: 1.14286rem;
  line-height: 1.6;
}

/**
 * Large type
 */
.giga {
  font-size: 64px;
  font-size: 4.57143rem;
  line-height: 1.3;
}

.mega {
  font-size: 56px;
  font-size: 4rem;
  line-height: 1.3;
}

.kilo {
  font-size: 45px;
  font-size: 3.21429rem;
  line-height: 1.3;
}

/**
 * Small type
 */
small,
.milli,
.content-media__caption {
  font-size: 13px;
  font-size: 0.92857rem;
  line-height: 1.69231;
}

.micro {
  font-size: 12px;
  font-size: 0.85714rem;
  line-height: 1.83333;
}

/**
 * Some wieghts. Gotham requires fonts per weight.
 */
em {
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 400;
}

strong {
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
}

a, a:visited {
  text-decoration: none;
  color: #00aaf0;
  transition: all .3s ease-in-out;
}

a:hover, a:active, a:focus {
  color: #0091cc;
}

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


.list--bare {
  margin-left: 0;
  padding: 0;
}


.list--bare li {
  list-style: none;
}


.list--inline {
  margin-left: 0;
  padding: 0;
}


.list--inline li {
  display: inline;
}


.list--small li {
  margin-bottom: 0.39286rem;
}


.list--medium li {
  margin-bottom: 0.78571rem;
}


.list--large li {
  margin-bottom: 1.57143rem;
}


.list--flush {
  margin: 0;
  margin-left: 1.57143rem;
}

blockquote {
  font-size: 16px;
  font-size: 1.14286rem;
  border-left: 2px solid #FF5938;
  padding-left: 1.57143rem;
}

blockquote cite {
  position: relative;
  display: block;
  padding-left: 1.57143rem;
  font-size: 0.92857rem;
  color: #576d75;
}

blockquote cite:before {
  content: "\2014 \2009";
  position: absolute;
  left: 0;
  top: 0;
}

/**
 * Nicer `q` quotes.
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

input,
label,
select,
.search-input {
  display: block;
}

/**
 * Set up label size
 */
label {
  margin-bottom: 0.78571rem;
  cursor: pointer;
}

label.required {
  font-weight: 500;
}

label.required::after {
  content: " *";
  font-weight: normal;
  color: darkred;
}

label abbr {
  display: none;
}

/**
 * Base styles for all text inputs.
 */
input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea, select, .search-input {
  width: 100%;
  padding: 1.28571rem 0.71429rem 1.07143rem;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1;
  transition: border-color 250ms ease-in-out;
}

input[type="color"]:focus,
input[type="color"] .focused, input[type="date"]:focus,
input[type="date"] .focused, input[type="datetime"]:focus,
input[type="datetime"] .focused, input[type="datetime-local"]:focus,
input[type="datetime-local"] .focused, input[type="email"]:focus,
input[type="email"] .focused, input[type="month"]:focus,
input[type="month"] .focused, input[type="number"]:focus,
input[type="number"] .focused, input[type="password"]:focus,
input[type="password"] .focused, input[type="search"]:focus,
input[type="search"] .focused, input[type="tel"]:focus,
input[type="tel"] .focused, input[type="text"]:focus,
input[type="text"] .focused, input[type="time"]:focus,
input[type="time"] .focused, input[type="url"]:focus,
input[type="url"] .focused, input[type="week"]:focus,
input[type="week"] .focused, input:not([type]):focus,
input:not([type]) .focused, textarea:focus,
textarea .focused, select:focus,
select .focused, .search-input:focus, .search-input .focused {
  border-color: #00aaf0;
  outline: none;
}

textarea {
  resize: vertical;
}

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

input[type="checkbox"],
input[type="radio"] {
  display: inline;
  margin-right: 0.78571rem;
}

input[type="file"] {
  padding-bottom: 0.78571rem;
  width: 100%;
}

select {
  height: 3.57143rem;
  padding: 0 0 0 0.71429rem;
}

/**
 * Wrap inputs with this
 */
.form__group {
  margin-bottom: 1.57143rem;
  background: #fff;
  max-width: 100%;
}

/**
 * Base styles for form feedback.
 */
.form__message {
  font-size: 13px;
  font-size: 0.92857rem;
  line-height: 1.69231;
  font-style: italic;
  display: block;
  margin-top: 0.78571rem;
}

/**
 * Form validation
 */
.form--error input[type="color"], .form--error input[type="date"], .form--error input[type="datetime"], .form--error input[type="datetime-local"], .form--error input[type="email"], .form--error input[type="month"], .form--error input[type="number"], .form--error input[type="password"], .form--error input[type="search"], .form--error input[type="tel"], .form--error input[type="text"], .form--error input[type="time"], .form--error input[type="url"], .form--error input[type="week"], .form--error input:not([type]), .form--error textarea, .form--error select {
  border-color: #FF5938;
}

.form--error label {
  font-weight: 500;
  color: #FF5938;
}

.form--success input[type="color"], .form--success input[type="date"], .form--success input[type="datetime"], .form--success input[type="datetime-local"], .form--success input[type="email"], .form--success input[type="month"], .form--success input[type="number"], .form--success input[type="password"], .form--success input[type="search"], .form--success input[type="tel"], .form--success input[type="text"], .form--success input[type="time"], .form--success input[type="url"], .form--success input[type="week"], .form--success input:not([type]), .form--success textarea, .form--success select {
  border-color: #3fca5f;
}

#vat_number-container .form__message.vat-validation .vat-indicator, #vat_number-container.form--vat-success label:after {
  font-family: "postbox-icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("../images/vat-indicator.png");
  background-repeat: no-repeat;
  background-size: 16px 32px;
  vertical-align: middle;
}

#vat_number-container {
  position: relative;
}

#vat_number-container .form__message.vat-validation {
  display: inline-block;
  padding-top: 5px;
  margin-left: 35%;
}

@media screen and (max-width: 760px) {
  #vat_number-container .form__message.vat-validation {
    margin-left: 0px;
  }
}

#vat_number-container.form--vat-success label:after {
  content: " ";
  text-indent: -9999px;
  position: relative;
  position: absolute;
  right: 0.39286rem;
  top: 50%;
  margin-top: -2px;
}

@media screen and (max-width: 760px) {
  #vat_number-container.form--vat-success label:after {
    top: 60%;
  }
}

#vat_number-container.form--vat-error .form__message.vat-validation {
  color: #e2b337;
}

#vat_number-container.form--vat-error .form__message.vat-validation .vat-indicator {
  background-position: 0 -16px;
}

#vat_number-container.form--success .form__message.vat-validation {
  color: #3fca5f;
}

/**
 * Form messages
 */
.form__message {
  color: #576d75;
}

/**
 * Form control wrapper, used for wrapping a bunch of radios / checkboxes
 *
 * 1. Force the wrapper to be inline so content doen't flow wierd when floated.
 */
.form__control-wrap {
  display: inline-block;
  /* 1 */
}

/**
 * Form with inline labels
 *
 * 1. Min width for form labels to be inline
 * 2. Offset the label to vertically align with the field.
 */
@media screen and (min-width: 761px) {
  /* 1 */
  .form--inline-label .form__group::after {
    clear: both;
    content: "";
    display: table;
  }
  .form--inline-label .form__group > label {
    display: inline-block;
    width: 35%;
    float: left;
    padding-top: 1rem;
    /* 2 */
    padding-right: 0.71429rem;
  }
  .form--inline-label input[type="color"], .form--inline-label input[type="date"], .form--inline-label input[type="datetime"], .form--inline-label input[type="datetime-local"], .form--inline-label input[type="email"], .form--inline-label input[type="month"], .form--inline-label input[type="number"], .form--inline-label input[type="password"], .form--inline-label input[type="search"], .form--inline-label input[type="tel"], .form--inline-label input[type="text"], .form--inline-label input[type="time"], .form--inline-label input[type="url"], .form--inline-label input[type="week"], .form--inline-label input:not([type]), .form--inline-label textarea, .form--inline-label select {
    width: 65%;
    display: inline-block;
    float: left;
  }
}

.label__radio,
.label__checkbox {
  font-size: 0.85714rem;
}

.label__radio > input[type="radio"],
.label__radio > input[type="checkbox"],
.label__checkbox > input[type="radio"],
.label__checkbox > input[type="checkbox"] {
  padding-right: 8px;
  font-size: 1rem;
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

/**
 * 1: Keep the icon centered at any font-size.
 */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  transition: background .1s, border-color .1s;
}

input[type="checkbox"]::before,
input[type="radio"]::before {
  font-family: "postbox-icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #00aaf0;
  background: #fff;
  content: "\e80a";
  line-height: 1;
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
  color: #00aaf0;
  background: #fff;
  content: "\e809";
}

input[type="checkbox"] {
  border-radius: 5px;
}

input[type="checkbox"]::before {
  content: "\e808";
}

input[type="checkbox"]:checked::before {
  content: "\e807";
}

input::-webkit-input-placeholder {
  color: #bcc5c8;
}

input::-moz-placeholder {
  color: #bcc5c8;
}

input:-moz-placeholder {
  color: #bcc5c8;
}

input:-ms-input-placeholder {
  color: #bcc5c8;
}

table {
  width: 100%;
  background: #fff;
  border-radius: 5px;
}

table th,
table td {
  padding: 1.33571rem;
}

@media screen and (max-width: 760px) {
  table th,
  table td {
    padding: 0.78571rem;
  }
}

table th {
  background: #00aaf0;
  font-weight: 500;
  color: #fff;
  text-align: left;
  border: 1px solid #0091cc;
}

table td {
  border: 1px solid #e3e6e9;
}

/**
 * Header
 */
.page-head {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  height: 75px;
  line-height: 75px;
  border-bottom: 1px solid transparent;
}

@media screen and (max-width: 860px) {
  .page-head {
    height: 55px;
    line-height: 55px;
  }
}

.page-head .hamburger {
  float: right;
  width: 22px;
  cursor: pointer;
  margin-top: 18.5px;
}

@media screen and (min-width: 861px) {
  .page-head .hamburger {
    display: none;
  }
}

.page-head .hamburger span {
  display: block;
  height: 3px;
  background: #00aaf0;
  margin-top: 4px;
  border-radius: 2px;
  transition: 250ms ease-in-out;
}

.page-head .hamburger span:first-child {
  margin-top: 0;
}

.page-head.active .hamburger span {
  opacity: 0;
}

.page-head.active .hamburger span:first-child {
  transform: translateY(7px) rotate(-45deg);
}

.page-head.active .hamburger span:last-child {
  transform: translateY(-7px) rotate(45deg);
}

.page-head.active .hamburger span:first-child, .page-head.active .hamburger span:last-child {
  opacity: 1;
}

/**
 * Logo
 */
.page-logo {
  position: relative;
  z-index: 100;
  float: left;
  width: 12rem;
}

@media screen and (max-width: 860px) {
  .page-logo {
    width: 8.57143rem;
  }
}

.page-logo img {
  max-height: 100%;
}

/**
 * Navigation
 */
.page-nav {
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  float: right;
}

@media screen and (max-width: 860px) {
  .page-nav {
    display: none;
    float: none;
    position: absolute;
    width: 100%;
    top: 55px;
    left: 0;
    transform: translateY(-200%);
    opacity: 0;
    text-align: center;
  }
  .active .page-nav {
    display: block;
    transform: translateY(0);
    opacity: 1;
  }
}

.page-nav a {
  color: #333;
}

.page-nav a:hover, .page-nav a:active, .page-nav a:focus {
  color: #333;
}

.page-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 860px) {
  .page-nav__list {
    background: #fff;
    z-index: 2;
    line-height: 1;
  }
}

.page-nav__item {
  display: inline;
  margin-left: 1.57143rem;
}

@media screen and (max-width: 860px) {
  .page-nav__item {
    display: block;
    margin-left: 0;
    border-bottom: 1px solid #e3e6e9;
    padding: 0 0;
  }
  .page-nav__item a {
    line-height: 55px;
    display: block;
    width: 100%;
    height: 100%;
  }
}

/**
 * Nav button
 *
 * 1. Makes the button 50px, as per design. Same values results
 *    in an odd height px value. Not cool.
 */
a.page-nav__btn,
.page-nav__btn {
  display: inline;
  border: 2px solid #fff;
  border-radius: 5px;
  min-width: 0;
  padding: 0.71429rem 1.0rem;
  /* 1 */
  color: #fff;
}

a.page-nav__btn:hover, a.page-nav__btn:active, a.page-nav__btn:focus,
.page-nav__btn:hover,
.page-nav__btn:active,
.page-nav__btn:focus {
  background: #fff;
  color: #00aaf0;
}

@media screen and (max-width: 860px) {
  a.page-nav__btn,
  .page-nav__btn {
    padding: 0;
    border: none;
    width: 100%;
    display: inline-block;
    border-radius: 0;
  }
}

/**
 * Sky version.
 */
.page-head--sky {
  background: #00aaf0;
}

.page-head--sky .hamburger span {
  background: #fff;
}

@media screen and (max-width: 860px) {
  .page-head--sky .page-nav__list {
    background: #00aaf0;
  }
  .page-head--sky .page-nav__item {
    border-bottom-color: #0091cc;
  }
}

.page-head--sky a:not(.page-nav__btn) {
  color: #fff;
}

.page-head--sky a:not(.page-nav__btn):hover, .page-head--sky a:not(.page-nav__btn):active, .page-head--sky a:not(.page-nav__btn):focus {
  color: #d9f2fd;
}

.page-head--sky a.page-nav__btn,
.page-head--sky .page-nav__btn {
  color: #FFFFFF;
  /* background-color: rgba(255,255,255,0.22); */
  border: none;
}

.page-head--sky a.page-nav__btn:hover, .page-head--sky a.page-nav__btn:active, .page-head--sky a.page-nav__btn:focus,
.page-head--sky .page-nav__btn:hover,
.page-head--sky .page-nav__btn:active,
.page-head--sky .page-nav__btn:focus {
  background: #0091cc;
  color: #fff;
}

.page-head--sky.is-top a.page-nav__btn,
.page-head--sky.is-top .page-nav__btn {
  /* border-color: #00aaf0; */
}

/**
 * White version.
 */
.page-head--white {
  border-color: transparent;
  background: #fff;
}

/**
 * Overlay version, no bg or border.
 */
.js .page-head--overlay.is-top {
  border-color: transparent;
  background: none;
}

@media screen and (min-width: 860px) {
  .js .page-head--overlay.is-top {
    padding: 40px;
  }
}

.page-head--overlay.active {
  background: #00aaf0;
}

/**
 * Pushes the body down.
 */
.page-head-push {
  margin-top: 75px;
}

@media screen and (max-width: 860px) {
  .page-head-push {
    margin-top: 55px;
  }
}

.page-hero {
  padding: 5.71429rem 0;
  background: #fafeff;
  border-bottom: 1px solid #e3e6e9;
  /**
   * 1. Less padding top on the sky version as it blends into the nav.
   */
}

@media screen and (max-width: 860px) {
  .page-hero {
    padding: 4.28571rem 0;
  }
}

.page-hero--sky {
  padding-top: 3.57143rem;
  /* 1 */
  background: #00aaf0;
  border-bottom: 1px solid #0091cc;
  color: #fff;
}

@media screen and (max-width: 860px) {
  .page-hero--sky {
    padding-top: 1.78571rem;
  }
}

.page-hero--sky a {
  color: #fff;
  border-bottom: 1px solid #fff;
}

.page-hero--sky a:hover, .page-hero--sky a:active, .page-hero--sky a:focus {
  color: #d9f2fd;
}

.page-hero--404 {
  background: url(../images/background-404.svg) top center no-repeat;
  background-size: cover;
  min-height: 570px;
  border-bottom: none;
  padding-top: 9.28571rem;
}

.page-hero--404__title {
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #46575e;
}

.page-hero--404__lede {
  font-size: 45px;
  font-size: 3.21429rem;
  line-height: 1.46667;
  color: #4a5d63;
}

.page-hero--404__lede + .lede {
  font-size: 20px;
  font-size: 1.42857rem;
  line-height: 1.1;
}

.page-hero--centered {
  text-align: center;
}

.page-hero--centered .container, .page-hero--centered .pagination > .pagination__wrap, .page-hero--centered .feature-container {
  max-width: 60rem;
}

.page-hero--borderless {
  border: none;
}

.page-hero .container p:last-of-type, .page-hero .pagination > .pagination__wrap p:last-of-type, .page-hero .feature-container p:last-of-type,
.page-hero h1:last-child {
  margin-bottom: 0;
}

.page-foot {
  font-size: 13px;
  font-size: 0.92857rem;
  line-height: 1.69231;
  padding: 5.71429rem 0;
  background: #00aaf0;
  color: #fff;
}

.page-foot--alt {
  background: #137787;
}

.page-404 .page-foot {
  padding: 4.28571rem 0;
}

.page-foot a {
  color: #fff;
}

.page-foot a:hover, .page-foot a:active, .page-foot a:focus {
  color: #d9f2fd;
}

.page-foot__header {
  font-size: 15px;
  font-size: 1.07143rem;
  line-height: 1;
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #004460;
}

.page-foot--alt .page-foot__header {
  color: #083036;
}

.footer-logo {
  max-width: 168px;
}

.footer-nav, .footer-nav ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.footer-nav > li {
  width: 16%;
  vertical-align: top;
  display: inline-block;
  padding-right: 1.57143rem;
}

.footer-nav > li:first-child {
  width: 20%;
  padding-right: 3.14286rem;
}

.footer-nav > li:nth-child(5) {
  width: 10%;
  display:none;
}

.footer-nav > li:last-child {
  width: 30%;
  padding-right: 0;
}

.footer-subnav__item {
  padding-bottom: 0.39286rem;
}

.footer-subnav--social {
  font-size: 32px;
  font-size: 2.28571rem;
  line-height: 1.4;
}

/**
 * Breakpoint for footer. All in one as quite a few things going on.
 */
@media screen and (max-width: 860px) {
  .page-foot {
    padding: 4.28571rem 0;
  }
  .footer-nav {
    text-align: center;
  }
  .footer-nav > li {
    margin-bottom: 1.57143rem;
  }
  .footer-nav > li, .footer-nav > li:first-child, .footer-nav > li:last-child, .footer-nav > li:nth-child(5) {
    width: 100%;
    max-width: 28.57143rem;
    padding-right: 0;
  }
}

/**
 * Sidebar layout has a 1 col gap
 */
.sidebar-layout__body {
  float: left;
  display: block;
  margin-right: 1.6129%;
  width: 57.66129%;
  /**
     * `sidebar-layout--wide` Used for when there is a code block.
     */
}

.sidebar-layout__body:last-child {
  margin-right: 0;
}

.sidebar-layout--wide .sidebar-layout__body {
  float: left;
  display: block;
  margin-right: 1.6129%;
  width: 44.95968%;
}

.sidebar-layout--wide .sidebar-layout__body:last-child {
  margin-right: 0;
}

@media screen and (max-width: 760px) {
  .sidebar-layout__body {
    float: left;
    display: block;
    margin-right: 1.6129%;
    width: 100%;
  }
  .sidebar-layout__body:last-child {
    margin-right: 0;
  }
}

.sidebar-layout__side {
  float: left;
  display: block;
  margin-right: 1.6129%;
  width: 32.25806%;
  margin-left: 8.46774%;
  /**
     * `sidebar-layout--wide` Used for when there is a code block.
     */
}

.sidebar-layout__side:last-child {
  margin-right: 0;
}

.sidebar-layout--wide .sidebar-layout__side {
  float: left;
  display: block;
  margin-right: 1.6129%;
  width: 44.95968%;
}

.sidebar-layout--wide .sidebar-layout__side:last-child {
  margin-right: 0;
}

.sidebar-layout__side--wide {
  float: left;
  display: block;
  margin-right: 1.6129%;
  width: 40.72581%;
  margin-left: 0%;
}

.sidebar-layout__side--wide:last-child {
  margin-right: 0;
}

@media screen and (max-width: 940px) {
  .sidebar-layout__side {
    float: left;
    display: block;
    margin-right: 1.6129%;
    width: 40.72581%;
    margin-left: 0%;
  }
  .sidebar-layout__side:last-child {
    margin-right: 0;
  }
}

@media screen and (max-width: 760px) {
  .sidebar-layout__side {
    float: left;
    display: block;
    margin-right: 1.6129%;
    width: 100%;
    margin-top: 3.14286rem;
  }
  .sidebar-layout__side:last-child {
    margin-right: 0;
  }
}

.article-index__body,
.article-single__body {
  float: left;
  display: block;
  margin-right: 1.6129%;
  width: 66.12903%;
}

.article-index__body:last-child,
.article-single__body:last-child {
  margin-right: 0;
}

@media screen and (max-width: 760px) {
  .article-index__body,
  .article-single__body {
    float: left;
    display: block;
    margin-right: 1.6129%;
    width: 100%;
  }
  .article-index__body:last-child,
  .article-single__body:last-child {
    margin-right: 0;
  }
}

.article-index__side,
.article-single__side {
  float: left;
  display: block;
  margin-right: 1.6129%;
  width: 23.79032%;
  margin-left: 8.46774%;
}

.article-index__side:last-child,
.article-single__side:last-child {
  margin-right: 0;
}

@media screen and (max-width: 940px) {
  .article-index__side,
  .article-single__side {
    float: left;
    display: block;
    margin-right: 1.6129%;
    width: 32.25806%;
    margin-left: 0%;
  }
  .article-index__side:last-child,
  .article-single__side:last-child {
    margin-right: 0;
  }
}

@media screen and (max-width: 760px) {
  .article-index__side,
  .article-single__side {
    float: left;
    display: block;
    margin-right: 1.6129%;
    width: 100%;
    margin-top: 5.71429rem;
  }
  .article-index__side:last-child,
  .article-single__side:last-child {
    margin-right: 0;
  }
}

.article-index__side__section,
.article-single__side__section {
  margin-bottom: 3.14286rem;
}

.article-index__side__section:last-child,
.article-single__side__section:last-child {
  margin-bottom: 0;
}

/* increase size of blog articles */
div.article-full__body > p {
  font-size: 1.1rem;
}

/**
 * Base button styles
 */
.btn,
a.btn,
input.btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  vertical-align: middle;
  font: inherit;
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-align: center;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  .btn,
  a.btn,
  input.btn {
    white-space: nowrap;
  }
}

.btn,
a.btn,
input.btn, .btn:hover, .btn:active, .btn:focus {
  text-decoration: none;
}

.btn,
a.btn,
input.btn {
  padding: 1.14286rem 3.57143rem 1rem;
  max-width: 100%;
  border: 2px solid;
  color: #fff;
  border-radius: 5px;
  /**
   * Buttons to be 100% width at certain size.
   */
}

.btn--sky,
a.btn--sky,
input.btn--sky {
  background-color: #00aaf0;
  border-color: #00aaf0;
  /**
       * 1. Even though we set the BG as the same color as the default state, the outline button
       *    will inherit this background, making it useful to set here whislt we're in the loop.
       */
}

.btn--sky:disabled,
a.btn--sky:disabled,
input.btn--sky:disabled {
  background-color: #0091cc;
  border-color: #0091cc;
}

.btn--sky.btn--outline,
a.btn--sky.btn--outline,
input.btn--sky.btn--outline {
  color: #00aaf0;
}

.btn--sky.btn--outline:hover::after, .btn--sky.btn--outline:active::after, .btn--sky.btn--outline:focus::after,
a.btn--sky.btn--outline:hover::after,
a.btn--sky.btn--outline:active::after,
a.btn--sky.btn--outline:focus::after,
input.btn--sky.btn--outline:hover::after,
input.btn--sky.btn--outline:active::after,
input.btn--sky.btn--outline:focus::after {
  color: #00aaf0;
}

.btn--ketchup,
a.btn--ketchup,
input.btn--ketchup {
  background-color: #FF5938;
  border-color: #FF5938;
  /**
       * 1. Even though we set the BG as the same color as the default state, the outline button
       *    will inherit this background, making it useful to set here whislt we're in the loop.
       */
}

.btn--ketchup:disabled,
a.btn--ketchup:disabled,
input.btn--ketchup:disabled {
  background-color: #ba4f3a;
  border-color: #ba4f3a;
}

.btn--ketchup.btn--outline,
a.btn--ketchup.btn--outline,
input.btn--ketchup.btn--outline {
  color: #FF5938;
}

.btn--ketchup.btn--outline:hover::after, .btn--ketchup.btn--outline:active::after, .btn--ketchup.btn--outline:focus::after,
a.btn--ketchup.btn--outline:hover::after,
a.btn--ketchup.btn--outline:active::after,
a.btn--ketchup.btn--outline:focus::after,
input.btn--ketchup.btn--outline:hover::after,
input.btn--ketchup.btn--outline:active::after,
input.btn--ketchup.btn--outline:focus::after {
  color: #FF5938;
}

.btn--white,
a.btn--white,
input.btn--white {
  background-color: #fff;
  border-color: #fff;
  /**
       * 1. Even though we set the BG as the same color as the default state, the outline button
       *    will inherit this background, making it useful to set here whislt we're in the loop.
       */
}

.btn--white:disabled,
a.btn--white:disabled,
input.btn--white:disabled {
  background-color: #d9d9d9;
  border-color: #d9d9d9;
}

.btn--white.btn--outline,
a.btn--white.btn--outline,
input.btn--white.btn--outline {
  color: #fff;
}

.btn--white.btn--outline:hover::after, .btn--white.btn--outline:active::after, .btn--white.btn--outline:focus::after,
a.btn--white.btn--outline:hover::after,
a.btn--white.btn--outline:active::after,
a.btn--white.btn--outline:focus::after,
input.btn--white.btn--outline:hover::after,
input.btn--white.btn--outline:active::after,
input.btn--white.btn--outline:focus::after {
  color: #fff;
}

.btn::after,
a.btn::after,
input.btn::after {
  font-family: "postbox-icons";
  content: "\e804";
  z-index: 2;
  position: absolute;
  color: #fff;
  width: 30px;
  right: -30px;
  z-index: -1;
  transition: all 0.3s;
}

.btn:hover::after, .btn:active::after, .btn:focus::after,
a.btn:hover::after,
a.btn:active::after,
a.btn:focus::after,
input.btn:hover::after,
input.btn:active::after,
input.btn:focus::after {
  right: 0.78571rem;
}

@media screen and (max-width: 540px) {
  .btn,
  a.btn,
  input.btn {
    width: 100%;
  }
}

.btn--outline,
a.btn--outline,
input.btn--outline {
  background: none;
}

.btn--large,
a.btn--large,
input.btn--large {
  font-size: 1.21429rem;
  padding: 1.28571rem 3.57143rem 1.14286rem;
}

.btn--small,
a.btn--small,
input.btn--small {
  padding: 0.85714rem 3.57143rem 0.71429rem;
}

.btn--fill,
a.btn--fill,
input.btn--fill {
  display: block;
  width: 100%;
}

/**
 * Wrap buttons in this when using multiple in a row.
 *
 * 1. 16px to equal 20px gap, taking into inline-block whitespace.
 */
.btn-group {
  /**
   * Force a width equal to two buttons.
   */
}

.btn-group > .btn {
  margin-right: 1.14286rem;
  /* 1 */
}

.btn-group > .btn:last-child {
  margin-right: 0;
}

@media screen and (max-width: 540px) {
  .btn-group > .btn {
    margin-right: 0;
    width: 100%;
    margin-bottom: 1.57143rem;
  }
}

.btn-group--two-btn {
  width: 542px;
  margin: auto;
}

/**
 * Media object
 *
 * Extention modifiers:
 * - Flip             [flip]   Flips the figure to the opposite side
 * - Stack            [stack]  Stacks the figure on top of the text
 * - Wrap             [wrap]   Wraps the text around the figure
 * - Vertical align   [valign] Vertical aligns the figure with the text
 */
.media {
  margin-bottom: 1.57143rem;
  /**
   *  Figure, The image / video / etc.
   */
  /**
   * Body, where the main text content goes.
   *
   * 1. Prevent text wrapping
   */
  /**
   * Title
   */
  /**
   * Flipped version
   *
   * 1. Resetting the default right margin
   */
  /**
   * Stacked (centered by default)
   */
  /**
   * Wrap text around figure
   */
  /**
   * Vertical align
   */
  /**
   * Large Icon — restricted height
   */
  /**
   * Medium Icon — restricted height
   */
  /**
  * Small Icon — restricted height
  */
}

.media::after {
  clear: both;
  content: "";
  display: table;
}

.media__figure {
  float: left;
  padding-right: 1.57143rem;
}

.media__figure > img {
  display: block;
}

@media screen and (min-width: 761px) {
  .media__figure img.float-image-towards-text {
    float: right;
  }
}

@media screen and (max-width: 940px) {
  .media__figure {
    max-width: 300px;
  }
  .media--valign .media__figure > img {
    width: 278px;
  }
}

@media screen and (max-width: 760px) {
  .media__figure {
    max-width: 240px;
  }
  .media--valign .media__figure > img {
    width: 218px;
  }
}

@media screen and (max-width: 540px) {
  .media__figure {
    max-width: none;
    float: none;
  }
  .media__figure image.float-image-towards-text {
    float: none;
  }
}

.media__figure--auto {
  width: 50%;
}

.media--valign .media__figure--auto > img {
  width: 100%;
}

.media__body,
.media__body > :last-child {
  margin-bottom: 0;
}

.media__title, .feature__title {
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  margin-bottom: 0.78571rem;
}

.media--flip > .media__figure {
  float: right;
  padding-right: 0;
  /* 1 */
  padding-left: 1.57143rem;
}

.media--flip > .media__figure > img, .media--flip > .media__figure > img.float-image-towards-text {
  float: none;
}

.media--stack {
  text-align: center;
}

.media--stack > .media__figure {
  float: none;
  width: 100%;
  padding-right: 0;
  margin: 0 auto 1.57143rem;
}

.media--stack > .media__figure img {
  display: inline-block;
}

.media--wrap > .media__body {
  overflow: visible;
}

.media--valign {
  display: table;
}

.media--valign > .media__figure,
.media--valign > .media__body {
  display: table-cell;
  vertical-align: middle;
}

.media--valign > .media__figure {
  float: none;
}

.media--valign > .media__figure img {
  max-width: none;
  display: block;
}

.media--valign > .media__body {
  width: 100%;
}

.media--valign.media--flip {
  direction: rtl;
}

.media--valign.media--flip .media__body {
  direction: ltr;
}

.media--lg > .media__figure {
  height: 180px;
}

.media--lg > .media__figure img {
  max-height: 100%;
  max-width: 100%;
}

.media--md > .media__figure {
  height: 130px;
}

.media--md > .media__figure img {
  max-height: 100%;
  max-width: 100%;
}

.media--sm > .media__figure {
  height: 80px;
}

.media--sm > .media__figure img {
  max-height: 100%;
  max-width: 100%;
}

.media.image--bottom.media--stack .media__figure {
  margin-bottom: 0;
}

.media.image--bottom.media--stack .media__body {
  margin-bottom: 1.57143rem;
}

/**
 * Media breaking point. Wrapped in one MQ for sanity.
 */
@media screen and (max-width: 540px) {
  .media {
    text-align: center;
    /**
     * Standard media object resetting.
     *
     * 1. Resets the padding for normal and flipped.
     * 2. So we can center the image.
     */
    /**
     * Vertical aligned media object resetting.
     *
     * 1. Reset setting table layout neccessary for vertical aligning.
     * 2. Resets text direction hack for flipped valign.
     */
  }
  .media > .media__figure {
    float: none;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    /* 1 */
    padding-left: 0;
    /* 1 */
    margin-bottom: 1.57143rem;
  }
  .media > .media__figure img {
    display: inline-block;
    /* 2 */
  }
  .media--valign,
  .media--valign > .media__figure,
  .media--valign > .media__body {
    display: block;
    /* 1 */
  }
  .media--valign.media--flip,
  .media--valign > .media__figure.media--flip,
  .media--valign > .media__body.media--flip {
    direction: ltr;
    /* 2 */
  }
}

/**
 * The 50 padding and 50 margin-bottom box
 */
.box {
  border: 1px solid #e3e6e9;
  border-radius: 5px;
  background: #fff;
  padding: 3.57143rem;
  margin-bottom: 3.57143rem;
}

@media screen and (max-width: 760px) {
  .box {
    padding: 1.57143rem;
    margin-bottom: 1.57143rem;
  }
}

.box:last-of-type {
  margin-bottom: 0;
}

.box--grey {
  background: #f5f8fc;
}

.box--sharp {
  border-radius: 0;
}

.box--attach-top {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.box--attach-bottom {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}

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

/**
 * 1. Same height padding as .btn--small
 */
.alert {
  padding: 1.28571rem 1.71429rem 1.14286rem 1.71429rem;
  /* 1 */
  margin-bottom: 1.57143rem;
  border-radius: 5px;
  margin-bottom: 1.57143rem;
}

.alert--error {
  font-weight: 500;
  color: #fff;
  background-color: #FF5938;
}

.alert--warning {
  font-weight: 500;
  color: #fff;
  background-color: #ffc200;
}

.alert--success {
  font-weight: 500;
  color: #fff;
  background-color: #3fca5f;
}

.alert--info {
  font-weight: 500;
  color: #fff;
  background-color: #00aaf0;
}

.alert::before {
  content: "\e802";
  z-index: 2;
  padding-right: 0.71429rem;
  font-family: "postbox-icons";
  font-weight: normal;
  color: #fff;
}

.alert a {
  color: #ffffff;
  text-decoration: underline;
}

.label {
  display: inline-block;
  margin-left: 0.78571rem;
  padding: 7px 11px 6px;
  color: #fff;
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  text-align: center;
  font-size: 12px;
  background-color: #FF5938;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 5px;
}

.section {
  background: #fff;
  overflow: hidden;
  padding: 5.71429rem 0;
}

/* from .section above border-bottom: 1px solid #e3e6e9; */

@media screen and (max-width: 860px) {
  .section {
    padding: 4.28571rem 0;
  }
}

.section--large {
  padding: 7.14286rem 0;
}

@media screen and (max-width: 860px) {
  .section--large {
    padding: 5.71429rem 0;
  }
}

.section--small, .features--highlighted {
  padding: 4.28571rem 0;
}

@media screen and (max-width: 860px) {
  .section--small, .features--highlighted {
    padding: 2.85714rem;
  }
}

.section--narrow {
  margin-left: 8.46774%;
  float: left;
  display: block;
  margin-right: 1.6129%;
  width: 83.06452%;
  padding: 1;
}

.section--narrow:last-child {
  margin-right: 0;
}

@media screen and (max-width: 1024px) {
  .section--narrow {
    margin-left: 0%;
    float: left;
    display: block;
    margin-right: 1.6129%;
    width: 100%;
    padding: 0;
  }
  .section--narrow:last-child {
    margin-right: 0;
  }
}

.section--attached-top {
  padding-top: 0;
  border-top: 1px solid transparent !important;
}

.section--attached-bottom {
  padding-bottom: 0;
}

.section--grey, .features--highlighted {
  background: #fafeff;
  border-top: 1px solid #E3E6E9;
  border-bottom: 1px solid #E3E6E9;
}

.section--dark {
  background-color: #0F0F0F;
  color: #DBE0E7;
}

.section--dark h1 {
  color: #FFFFFF;
}

.box.box--payment {
  width: 100%;
  padding: 0;
  position: relative;
  border-radius: 0;
  float: left;
}

.box.box--payment .payment__form {
  float: left;
  width: 60%;
  margin-right: -1px;
  border-right: 1px solid #e3e6e9;
  min-height: 850px;
}

@media screen and (max-width: 760px) {
  .box.box--payment .payment__form {
    float: none;
    width: 100%;
    border-right: none;
    margin-right: 0;
  }
}

.box.box--payment .payment__form .input__amount {
  display: inline-block;
  width: 25%;
}

.box.box--payment .payment__form .input__amount + .input__amount__cost {
  display: inline-block;
  padding-top: 1rem;
  margin-left: 0.78571rem;
}

.box.box--payment .payment__form .expires__month {
  display: block;
  width: 35%;
  float: left;
}

@media screen and (max-width: 760px) {
  .box.box--payment .payment__form .expires__month {
    width: 55%;
  }
}

.box.box--payment .payment__form .expires__year {
  display: block;
  width: 25%;
  margin-left: 5%;
  float: left;
}

@media screen and (max-width: 760px) {
  .box.box--payment .payment__form .expires__year {
    width: 40%;
    float: right;
  }
}

.box.box--payment .payment__info {
  float: left;
  width: 40%;
  min-height: 100%;
  border-left: 1px solid #e3e6e9;
}

@media screen and (max-width: 760px) {
  .box.box--payment .payment__info {
    float: none;
    width: 100%;
    border-left: none;
  }
}

.box.box--payment .payment__part {
  padding: 3.57143rem;
  border-top: 1px solid #e3e6e9;
}

@media screen and (max-width: 760px) {
  .box.box--payment .payment__part--wide-only {
    display: none;
  }
}

.box.box--payment .payment__part:first-of-type {
  border-top: none;
}

.box.box--payment .payment__part:last-of-type {
  height: 100%;
}

.box.box--payment .payment__part > *:last-child {
  margin-bottom: 0;
}

.box.box--payment .payment__part [data-discounted-price="true"] {
  color: #FF5938;
  font-weight: 500;
}

.box.box--payment .payment__part .part__heading {
  /* font-weight: bold; */
}

.box.box--payment .payment__part .part__images {
  text-align: center;
}

.box.box--payment .payment__part .part__image {
  display: inline-block;
  margin: 1.57143rem 1.88571rem 0;
  max-width: 60px;
  vertical-align: middle;
  margin-top: 0;
}

.box.box--payment .payment__part--total {
  position: absolute;
  width: 40%;
  bottom: 0;
  right: 0;
  text-align: center;
  padding-bottom: 7.71429rem;
}

@media screen and (max-width: 760px) {
  .box.box--payment .payment__part--total {
    position: relative;
    width: 100%;
    padding-bottom: 3.57143rem;
  }
}

.box.box--payment .payment__part--total > .part__heading,
.box.box--payment .payment__part--total > .part__total,
.box.box--payment .payment__part--total > .part__vat {
  margin-bottom: 0;
}

.box.box--payment .payment__part--total > .discount-string {
  color: #FF5938;
  text-align: center;
  font-weight: 500;
  display: none;
}

.box.box--payment .payment__part--total > .part__total {
  color: #00aaf0;
}

.box.box--payment .payment__submit {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 4.14286rem;
  width: 40%;
}

@media screen and (max-width: 760px) {
  .box.box--payment .payment__submit {
    position: relative;
    width: 100%;
  }
}

.box.box--payment .payment__submit > input[type="submit"] {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.box.box--payment .payment__submit > input[type="submit"]:active {
  background: #0091cc;
}

.box.box--payment .payment__submit > input[type="submit"]:disabled {
  background: #80d5f8;
  border-color: #80d5f8;
}

.box.box--payment #paypal-ui-block {
  padding-top: 10px;
  text-align: center;
  /*@include media*/
  margin-bottom: 0px;
}

@media screen and (max-width: 860px) {
  .box.box--payment #paypal-ui-block {
    margin-bottom: 200px;
  }
}

@media screen and (max-width: 760px) {
  .box.box--payment #paypal-ui-block {
    margin-bottom: 0;
  }
}

.box.box--payment #paypal-ui-block .part__heading {
  margin-bottom: 35px;
}

.box.box--payment #paypal-container {
  display: inline-block;
}

.box.box--payment #paypal-container.block {
  display: block;
}

.box.box--payment .eu-vat-mode-link {
  font-size: 80%;
}

@media screen and (min-width: 761px) {
  .box.box--payment .eu-vat-mode-link {
    margin-left: 35%;
  }
}

.box.box--payment ul#payment-options {
  list-style: none;
  margin: 10px auto 50px;
  width: 100%;
}

.box.box--payment ul#payment-options li {
  background-image: url("../images/payment-option-icons.png");
  background-repeat: no-repeat;
  display: inline-block;
  margin-top: 10px;
  padding-top: 0.65em;
  margin-left: 16px;
}

.box.box--payment ul#payment-options li.braintree-payment-method-cc {
  background-position: 20px 0px;
  width: 210px;
  height: 36px;
}

.box.box--payment ul#payment-options li.braintree-payment-method-paypal {
  background-position: -224px 0px;
  width: 75px;
  height: 36px;
}

.box.box--payment ul#payment-options li.braintree-payment-method-bitcoin {
  background-position: -334px 0px;
  width: 75px;
  height: 36px;
}

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
  .box.box--payment ul#payment-options li {
    background-image: url("../images/payment-option-icons-2x.png");
  }
  .box.box--payment ul#payment-options li.braintree-payment-method-cc {
    /*background-size: 220px 35px;*/
    background-size: 402px auto;
  }
  .box.box--payment ul#payment-options li.braintree-payment-method-paypal {
    /*background-size: 80px 35px;*/
    background-size: 402px auto;
  }
  .box.box--payment ul#payment-options li.braintree-payment-method-bitcoin {
    /*background-size: 80px 35px;*/
    background-size: 402px auto;
  }
}

.receipt-info .order-details {
  display: inline-block;
  vertical-align: middle;
  width: 65%;
  height: 100%;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 760px) {
  .receipt-info .order-details {
    display: block;
    width: 100%;
    margin-bottom: 3.14286rem;
  }
}

.receipt-info .order-details .detail {
  display: inline-block;
  width: 50%;
  margin: 0.78571rem 0;
  padding: 0;
}

@media screen and (max-width: 540px) {
  .receipt-info .order-details .detail {
    display: block;
    width: 100%;
    text-align: center;
  }
}

.receipt-info .order-details .detail__heading {
  display: block;
  font-weight: bold;
  margin-bottom: 0.39286rem;
}

.receipt-info .order-details .detail__data {
  display: inline-block;
}

.receipt-info .order-details .detail:last-child {
  margin-bottom: 0;
}

.receipt-info .cost {
  display: inline-block;
  vertical-align: middle;
  width: 35%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

@media screen and (max-width: 760px) {
  .receipt-info .cost {
    display: block;
    width: 100%;
  }
}

.receipt-info .cost__total {
  color: #00aaf0;
}

/**
 * Equal height two column with or without border.
 */
.half-half {
  width: 100%;
}

@media screen and (min-width: 861px) {
  .half-half {
    display: table;
  }
}

.half-half__col {
  margin-bottom: 2.85714rem;
  padding-bottom: 2.85714rem;
}

@media screen and (min-width: 861px) {
  .half-half__col {
    display: table-cell;
    margin-bottom: 0;
    padding: 0 2.85714rem;
    width: 50%;
  }
}

.half-half__col:first-child {
  border-bottom: 1px solid #e3e6e9;
}

@media screen and (min-width: 861px) {
  .half-half__col:first-child {
    border-bottom: none;
    border-right: 1px solid #e3e6e9;
  }
}

.half-half__col > *:last-child {
  margin-bottom: 0;
}

.half-half__col:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}

.no-border .half-half__col {
  border: none !important;
}

.half-half--centered {
  text-align: center;
}

.half-half.use-flex {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.half-half.use-flex.justify-center {
  -ms-flex-pack: center;
      justify-content: center;
}

@media screen and (max-width: 1024px) {
  .half-half.use-flex.collapse-early .half-half__col {
    -ms-flex: 0 0 35% !important;
        flex: 0 0 35% !important;
  }
}

@media screen and (max-width: 860px) {
  .half-half.use-flex.collapse-early .half-half__col {
    -ms-flex: 1 0 100% !important;
        flex: 1 0 100% !important;
  }
}

.half-half.use-flex .half-half__col {
  width: auto;
  -ms-flex: 0 0 50%;
      flex: 0 0 50%;
}

@media screen and (max-width: 860px) {
  .half-half.use-flex .half-half__col {
    -ms-flex: 1 0 100% !important;
        flex: 1 0 100% !important;
  }
}

/**
 * Tab bar
 */
.tab-bar {
  background: #fff;
  border-bottom: 1px solid #e3e6e9;
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
}

/**
 * Tabs core object.
 * 1. Tables (kinda) for layout!
 * 2. This is the magic bit; make all children occupy equal width.
 * 3. Required to make the tabs fill their container.
 * 4. Make each tab pack up horizontally.
 * 5. Ensure the hit area covers the whole tab.
 */
.tabs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: table;
  /* 1 */
  table-layout: fixed;
  /* 2 */
  width: 100%;
  /* 3 */
}

.tabs__item {
  display: table-cell;
  /* 4 */
  vertical-align: middle;
}

@media screen and (max-width: 760px) {
  .tabs__item {
    display: block;
  }
}

.tabs__link {
  display: block;
  /* 5 */
}

/**
 * Themed.
 */
.tabs {
  position: relative;
  bottom: -1px;
  text-align: center;
}

.tabs__item {
  position: relative;
  border-right: 1px solid #e3e6e9;
  border-bottom: 1px solid #e3e6e9;
}

@media screen and (max-width: 760px) {
  .tabs__item {
    border-right: none;
  }
}

.tabs__item:first-child {
  border-left: 1px solid #e3e6e9;
}

@media screen and (max-width: 760px) {
  .tabs__item:first-child {
    border-left: none;
  }
}

.tabs__active {
  background: #fff;
}

.tabs__active::after {
  content: "";
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 4px solid #FF5938;
}

@media screen and (max-width: 760px) {
  .tabs__active::after {
    border-bottom: none;
  }
}

a.tabs__link {
  color: #333;
  padding: 1.57143rem;
}

@media screen and (max-width: 760px) {
  .tabs__active a.tabs__link {
    color: #FF5938;
  }
}

a.tabs__link:hover, a.tabs__link:active, a.tabs__link:focus {
  color: #576d75;
}

.pagination {
  background: #f5f8fc;
  border-bottom: 1px solid #e3e6e9;
  /**
   * 1. Fine padding adjustment to center Gotham and get 148px height equivalent.
   */
}

.pagination > .pagination__wrap {
  display: table;
  width: 100%;
  margin: auto;
}

.pagination .pagination__prev,
.pagination .pagination__next {
  position: relative;
  display: table-cell;
  text-align: right;
  width: 50%;
  margin: 0;
  padding: 2.42857rem 3.57143rem 2.28571rem;
  /* 1 */
  color: #333;
}

.pagination .pagination__prev:hover,
.pagination .pagination__next:hover {
  color: #576d75;
}

.pagination .pagination__prev::before,
.pagination .pagination__next::before {
  font-size: 22px;
  font-size: 1.57143rem;
  line-height: 1;
  position: absolute;
  display: block;
  font-family: postbox-icons;
  color: #00aaf0;
  top: 50%;
  transform: translateY(-50%);
}

.pagination--disabled {
  visibility: hidden;
}

.pagination--disabled + .pagination__next {
  border-left: 1px solid #e3e6e9;
}

.pagination .pagination__prev {
  border-right: 1px solid #e3e6e9;
  text-align: left;
}

.pagination .pagination__prev::before {
  content: "\e803";
  left: 0;
}

.pagination .pagination__next::before {
  content: "\e804";
  right: 0;
}

.pagination .pagination__title {
  margin-bottom: 0.78571rem;
}

.pagination .pagination__description {
  margin-bottom: 0;
}

@media screen and (max-width: 760px) {
  .pagination .pagination__prev,
  .pagination .pagination__next {
    width: 50%;
    vertical-align: middle;
  }
  .pagination .pagination__title {
    font-size: 14px;
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 0;
  }
  .pagination .pagination__description {
    display: none;
  }
}

/**
 * 1. Counter Gothams oddness.
 */
.pagination--post-index {
  position: relative;
  border: 1px solid #e3e6e9;
  border-radius: 5px;
  background: #f5f8fc;
  padding: 2.07143rem 2.14286rem 2rem;
  /* 1 */
  margin-bottom: 1.42857rem;
  text-align: center;
}

.pagination--post-index::after {
  clear: both;
  content: "";
  display: table;
}

.pagination--post-index > .pagination__prev,
.pagination--post-index > .pagination__next,
.pagination--post-index > .pagination__page {
  display: inline-block;
}

.pagination--post-index > .pagination__page {
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  position: absolute;
  left: 0px;
  width: 100%;
  text-align: center;
}

.pagination--post-index > .pagination__prev,
.pagination--post-index > .pagination__next {
  position: relative;
  z-index: 1;
}

.pagination--post-index > .pagination__prev {
  float: left;
}

.pagination--post-index > .pagination__prev::before {
  font-family: "postbox-icons";
  content: "\e803";
  padding-right: 0.78571rem;
}

.pagination--post-index > .pagination__next {
  float: right;
}

.pagination--post-index > .pagination__next::after {
  font-family: "postbox-icons";
  content: "\e804";
  padding-left: 0.78571rem;
}

@media screen and (max-width: 540px) {
  .pagination--post-index > .pagination__page {
    display: none;
  }
}

/**
 * 1. Magic number to vertically align badge
 */
.badge {
  display: inline-block;
  margin-top: -3px;
  /* 1 */
  float: right;
  width: 2.14286rem;
  height: 2.14286rem;
  text-align: center;
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 0.85714rem;
  line-height: 2.14286rem;
  background: #f5f8fc;
  border-radius: 50%;
  border: 1px solid #e3e6e9;
}

.search-input {
  position: relative;
  height: 3.57143rem;
  padding: 0 3.57143rem 0 0;
  overflow: hidden;
}

.search-input::after {
  clear: both;
  content: "";
  display: table;
}

.search-input > .search-input__input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: none;
  float: left;
  width: 100%;
  padding-right: 0;
  margin-right: 0;
}

.search-input__button {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  min-width: 40px;
  height: 3.57143rem;
  background: none;
  border: none;
  outline: none;
}

.search-input__button::after {
  font-family: "postbox-icons";
  content: "\e805";
}

/**
 * 1. Equivalent of 10 columns. Setting a max width means no more shifting the container to center it
 *    and avoids media queries to remove the shift and make it full width.
 */
.title-group {
  font-size: 18px;
  font-size: 1.28571rem;
  line-height: 1.57143;
  width: 100%;
  max-width: 66rem;
  /* 1 */
  margin: 0 auto 5.71429rem;
  text-align: center;
}

.title-group > *:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 760px) {
  .title-group {
    font-size: 17px;
    font-size: 1.21429rem;
    line-height: 1.57143;
  }
}

/**
 * Make tables responsive
 * @link http://elvery.net/demo/responsive-tables/
 */
@media screen and (max-width: 760px) {
  /* Force table to not be like tables anymore */
  .table--responsive table,
  .table--responsive thead,
  .table--responsive tbody,
  .table--responsive th,
  .table--responsive td,
  .table--responsive tr {
    display: block;
  }
  /* Hide table headers (but not display: none;, for accessibility) */
  .table--responsive thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .table--responsive tr {
    border: 1px solid #e3e6e9;
  }
  .table--responsive td {
    /* Behave  like a "row" */
    border: none;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: left;
  }
  .table--responsive td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
  }
  /**
   * Label the data
   */
  .table--responsive td:before {
    content: attr(data-title);
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0.78571rem;
  }
}

/**
 * Feature listing.
 * This primarily uses mobile first so it doesn't look terrible on older browsers.
 */
@media screen and (min-width: 1025px) {
  .feature-container {
    position: relative;
    width: 100%;
    height: 620px;
  }
}

.feature-list {
  position: relative;
  counter-reset: li;
  margin: auto auto 3.14286rem;
}

.feature-list::after {
  clear: both;
  content: "";
  display: table;
}

@media screen and (min-width: 1025px) {
  .feature-list {
    float: left;
    display: block;
    margin-right: 1.6129%;
    width: 49.19355%;
    top: 50%;
    transform: translateY(-50%);
    margin-bottom: 0;
    padding-right: 2.85714rem;
  }
  .feature-list:last-child {
    margin-right: 0;
  }
}

.feature-body {
  position: relative;
  margin: auto auto 3.14286rem;
}

.feature-body::after {
  clear: both;
  content: "";
  display: table;
}

@media screen and (min-width: 1025px) {
  .feature-body {
    float: left;
    display: block;
    margin-right: 1.6129%;
    width: 49.19355%;
    top: 50%;
    transform: translateY(-50%);
    margin-bottom: 0;
    padding-right: 2.85714rem;
  }
  .feature-body:last-child {
    margin-right: 0;
  }
}

.feature {
  float: left;
  display: block;
  margin-right: 1.6129%;
  width: 32.25806%;
  list-style: none;
  position: relative;
  padding-bottom: 2.35714rem;
  text-align: center;
}

.feature:last-child {
  margin-right: 0;
}

@media screen and (max-width: 760px) {
  .feature {
    float: left;
    display: block;
    margin-right: 1.6129%;
    width: 100%;
    text-align: center;
  }
  .feature:last-child {
    margin-right: 0;
  }
}

.feature:last-child {
  padding-bottom: 0;
}

.feature p:last-of-type {
  margin-bottom: 0;
}

.feature::before {
  font-size: 16px;
  font-size: 1.14286rem;
  content: counter(li);
  counter-increment: li;
  position: relative;
  z-index: 2;
  left: 0;
  top: -6px;
  margin-bottom: 1.57143rem;
  display: block;
  width: 100%;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  background: #EEF1F4;
  font-weight: 500;
  color: #576d75;
  text-align: center;
  border: 1px solid #EEF1F4;
  border-radius: 50%;
}

@media screen and (min-width: 1025px) {
  .feature::before {
    position: absolute;
  }
}

@media screen and (max-width: 1024px) {
  .feature::before {
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

@media screen and (min-width: 1025px) {
  .feature {
    width: 100%;
    padding-left: 60px;
    text-align: left;
  }
  .feature:not(:last-of-type)::after {
    content: "";
    position: absolute;
    display: inline-block;
    top: 25px;
    left: 20px;
    height: 100%;
    border: 1px dashed #e3e6e9;
    z-index: 1;
  }
}

.feature-img {
  text-align: center;
  height: 100%;
}

.feature-img::after {
  clear: both;
  content: "";
  display: table;
}

@media screen and (min-width: 1025px) {
  .feature-img {
    position: absolute;
    left: 50%;
    width: 1100px;
  }
}

.feature-img img {
  float: left;
}

@media screen and (min-width: 1025px) {
  .feature-img img {
    height: 100%;
    max-width: none;
  }
}

/**
 * Hack to override grid class.
 */
@media screen and (min-width: 1025px) {
  [class^="gw-"].feature {
    width: 100% !important;
  }
}

/**
 * Flipped version, make sure we're in the `$venti-min` breakpoint.
 */
@media screen and (min-width: 1025px) {
  .feature-container--flip .feature {
    margin-right: 0;
  }
  .feature-container--flip .feature-list, .feature-container--flip .feature-body {
    margin-left: 50.80645%;
    padding-right: 0;
    padding-left: 2.85714rem;
  }
  .feature-container--flip .feature-img {
    left: auto;
    right: 50%;
  }
  .feature-container--flip .feature-img img {
    float: right;
  }
}

.section--centered .feature-img {
  position: relative;
  left: auto;
  margin: 0 auto;
}

.section--centered .feature-img img {
  float: none;
  width: 100%;
  height: auto;
}

.testimonial {
  /**
   * 1. Using hard px values as the image is a constant 96px.
   */
  /**
   * 1. As image is in px, we need margins in px too. Requires half the size of the image size.
   */
}

@media screen and (max-width: 760px) {
  .testimonial {
    margin-bottom: 1.57143rem;
  }
}

.testimonial__avatar {
  display: block;
  width: 73px;
  /* 1 */
  height: 73px;
  /* 1 */
  margin: auto;
  border-radius: 50%;
}

.testimonial__content {
  text-align: center;
  /*  margin-top: -36.5px;
 */
  padding: 1.57143rem 1.57143rem;
  /* 1 */
  border: 1px solid #e3e6e9;
  border-radius: 5px;
  background: #fff;
}

.testimonial__quote {
  display: inline-block;
  color: #576d75;
  margin-bottom: 1.57143rem;
}

.testimonial__author, .testimonial__twitter {
  display: block;
}

.testimonial__author {
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 0.39286rem;
}

.testimonial__title {
  position: relative;
  font-size: 20px;
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  padding-bottom: 1.57143rem;
}

.testimonial__title::after {
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #e3e6e9;
  width: 40px;
  content: " ";
}

.testimonial__cite {
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: italic;
}

.testimonial--no-photo {
  margin-top: 0;
  padding: 1.57143rem;
}

.cta {
  padding: 5.71429rem 0;
  /**
   * An inline version of the CTA, text left, buttons to the right.
   */
}

@media screen and (max-width: 860px) {
  .cta {
    padding: 4.28571rem 0;
  }
}

.cta--blue {
  background-color: #00aaf0;
  color: #B2E1FF;
  margin-top: 0px;
}

.cta--blue h1, .cta--blue h2, .cta--blue h3, .cta--blue a, .cta--blue strong {
  color: #fff;
}

.cta--blue.cta .title-group {
  margin-bottom: 1.25714rem;
}

.cta--blue .btn.btn--large {
  font-size: 1.42857rem;
  border-color: #00aaf0;
  background: #FFFFFF;
  color: #448fc7;
  border-radius: 8px;
}

.cta--blue .btn.btn--large:hover, .cta--blue .btn.btn--large:active, .cta--blue .btn.btn--large:focus {
  background: #0091cc;
  color: #fff;
}

.cta--blue .cta__smallprint {
  margin-top: 1.25714rem;
}

.cta--clouds {
  background: #93DFF4;
  background-image: linear-gradient(to bottom, #93DFF4 0%, #EBF7F7 60%, #EBF7F7 100%);
  position: relative;
}

.cta--clouds::before {
  content: "";
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/cta-clouds.svg") center 60px no-repeat;
  background-size: 95%;
}

.cta--clouds .container, .cta--clouds .pagination > .pagination__wrap, .cta--clouds .feature-container {
  position: relative;
  z-index: 2;
}

.cta--inline .container, .cta--inline .pagination > .pagination__wrap, .cta--inline .feature-container {
  display: table;
}

.cta--inline .cta__body {
  width: 49.19355%;
  padding-right: 1.57143rem;
}

.cta--inline .cta__actions {
  width: 49.19355%;
  text-align: right;
}

.cta--inline .cta__body,
.cta--inline .cta__actions {
  display: table-cell;
  vertical-align: middle;
}

@media screen and (max-width: 860px) {
  .cta--inline .cta__body,
  .cta--inline .cta__actions {
    width: 100%;
    display: block;
    text-align: center;
  }
}

@media screen and (max-width: 760px) {
  .cta--inline .container, .cta--inline .pagination > .pagination__wrap, .cta--inline .feature-container {
    display: block;
  }
  .cta--inline .cta__body {
    display: block;
    padding-right: 0;
  }
  .cta--inline .btn-group--two-btn {
    width: auto;
  }
}

.cta__actions {
  text-align: center;
}

.cta__smallprint {
  margin-top: 3.14286rem;
}

.cta__smallprint > p:last-of-type {
  margin-bottom: 0;
}

.cta .title-group {
  margin-bottom: 3.92857rem;
}

.cta--base-size .title-group {
  font-size: 1rem;
  line-height: 1.57143;
}

.code-block {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1.57143;
  background: #333;
  color: #fff;
  padding: 0.78571rem;
  border-radius: 5px;
}

.code-block > pre:last-child {
  margin-bottom: 0;
}

.article-tile {
  margin-bottom: 1.57143rem;
  padding-bottom: 1.57143rem;
  /**
   * 1. Not magic numbers. These add up to be 300px height.
   */
}

.article-tile > *:last-child {
  margin-bottom: 0;
}

.article-tile, .article-tile--large {
  border-bottom: 1px solid #e3e6e9;
}

.article-tile__img-wrap, .article-tile__img, .article-tile__meta {
  margin-bottom: 1.57143rem;
}

.article-tile__img-wrap {
  /* background: #fafeff; */
  /* border: 1px solid #e3e6e9; */
  /* 1 */
  /* border-radius: 5px; */
  text-align: center;
  /* padding: 40px; */
  /* 1 */
}

.article-tile__img-wrap img {
  display: inline-block;
  /* max-height: 218px; */
  /* 1 */
}

.article-tile__title {
  margin: 0.78571rem 0 1.25714rem;
}

.article-tile__title a {
  color: inherit;
}

.article-tile__title a:hover, .article-tile__title a:active, .article-tile__title a:focus {
  color: #00aaf0;
}

.article-tile--large {
  margin-bottom: 4.28571rem;
  padding-bottom: 4.28571rem;
}

@media screen and (max-width: 860px) {
  .article-tile--large {
    margin-bottom: 4.28571rem;
    padding-bottom: 4.28571rem;
  }
}

.article-tile--archive .article-tile__title {
  font-size: 22px;
  font-size: 1.57143rem;
  line-height: 1;
  margin-bottom: 0;
}

.article-tile--archive .article-tile__categories {
  margin-bottom: 0;
  margin-top: 0.71429rem;
}

.article-full__meta {
  border-bottom: 1px solid #e3e6e9;
}

.article-full__title {
  margin: 0.78571rem 0;
}

.article-full__title a {
  color: inherit;
}

.article-full__title a:hover, .article-full__title a:active, .article-full__title a:focus {
  color: #00aaf0;
}

.article-full__body {
  padding: 3.14286rem 0;
}

.content-media__body {
  float: left;
  display: block;
  margin-right: 1.6129%;
  width: 57.66129%;
  clear: left;
}

.content-media__body:last-child {
  margin-right: 0;
}

@media screen and (max-width: 940px) {
  .content-media__body {
    float: left;
    display: block;
    margin-right: 1.6129%;
    width: 66.12903%;
    padding-right: 1.57143rem;
  }
  .content-media__body:last-child {
    margin-right: 0;
  }
}

.content-media__media {
  float: left;
  display: block;
  margin-right: 1.6129%;
  width: 32.25806%;
  margin-left: 8.46774%;
  margin-right: 0;
  clear: right;
  text-align: center;
  margin-bottom: 3.14286rem;
}

.content-media__media:last-child {
  margin-right: 0;
}

@media screen and (max-width: 940px) {
  .content-media__media {
    margin-left: 0%;
  }
}

.content-media__caption {
  margin-top: 0.78571rem;
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: italic;
}

@media screen and (max-width: 760px) {
  .content-media__media,
  .content-media__body {
    float: none;
    clear: none;
    width: 100%;
    margin: 0;
  }
  .content-media__media {
    text-align: center;
    margin-bottom: 1.57143rem;
  }
}

.content-media-block {
  margin-bottom: 10px;
}

input.email-signup__input,
button.email-signup__btn {
  font-size: 15px;
  display: inline-block;
  vertical-align: top;
  padding: 1.28571rem 0.71429rem 1.07143rem;
  height: 50px;
  border: none;
  line-height: 1;
}

button.email-signup__btn {
  width: 20%;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background: #0077a8;
  color: #fff;
  transition: background 250ms ease-in-out;
}

button.email-signup__btn:hover {
  background: #0088c0;
}

.page-foot--alt button.email-signup__btn {
  background: #0d535f;
}

.page-foot--alt button.email-signup__btn:hover {
  background: #0f5f6c;
}

input.email-signup__input {
  padding-left: 0.71429rem;
  width: 80%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  color: #333;
}

.contact-form {
  margin-left: 8.46774%;
  float: left;
  display: block;
  margin-right: 1.6129%;
  width: 83.06452%;
}

.contact-form:last-child {
  margin-right: 0;
}

@media screen and (max-width: 760px) {
  .contact-form {
    margin-left: 0%;
    float: left;
    display: block;
    margin-right: 1.6129%;
    width: 100%;
  }
  .contact-form:last-child {
    margin-right: 0;
  }
}

.contact-form__terms {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1.57143;
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  margin-left: 1.57143rem;
}

@media screen and (max-width: 1000px) {
  .contact-form__terms {
    font-size: 13px;
    font-size: 0.92857rem;
    line-height: 1.69231;
    margin-left: 0.78571rem;
  }
}

@media screen and (max-width: 860px) {
  .contact-form__terms {
    font-size: 14px;
    font-size: 1rem;
    line-height: 1.57143;
    display: block;
    margin-left: 0;
    margin-top: 1.57143rem;
  }
}

@media screen and (max-width: 540px) {
  .contact-form__terms {
    text-align: center;
  }
}

.contact-form__contacts {
  text-align: center;
}

.contact-form__contacts .media__title, .contact-form__contacts .feature__title {
  font-size: 18px;
  font-size: 1.28571rem;
  line-height: 1.22222;
}

.contact-form__contacts .section__description {
  margin-bottom: 0;
}

.retrieval-form__email, .retrieval-form__submit {
  display: inline-block;
  vertical-align: top;
}

.retrieval-form__email {
  max-width: 60%;
  /*
    @include media($grande--skinny) {
      display: inline-block;
      max-width: 70%;
    }

    @include media($tall) {
      max-width: 60%;
    }

    @include media($short) {
      display: block;
      max-width: 100%;
    }
    */
}

@media screen and (max-width: 1280px) {
  .retrieval-form__email {
    max-width: 54%;
  }
}

@media screen and (max-width: 1140px) {
  .retrieval-form__email {
    display: block;
    max-width: 100%;
  }
}

.retrieval-form__submit {
  float: right;
  /*
    @include media($grande--skinny) {
      float: right;
      margin-top: 0;
    }

    @include media($short) {
      float: none;
      margin-top: spacing-unit();
    }
    */
}

@media screen and (max-width: 1140px) {
  .retrieval-form__submit {
    float: none;
    margin-top: 1.57143rem;
  }
}

.twitter-feed {
  list-style: none;
  margin: 0;
  margin-bottom: 1.57143rem;
}

.twitter-feed__tweet {
  border-bottom: 1px solid #e3e6e9;
  margin-top: 1.57143rem;
}

.twitter-feed__tweet:first-child {
  margin-top: 0;
}

.twitter-feed__tweet .media__figure img {
  width: 60px;
  height: 60px;
  border: 1px solid #e3e6e9;
  border-radius: 5px;
}

.twitter-feed__tweet .tweet__handle {
  display: block;
  margin-bottom: 0.39286rem;
}

.instruction-set__image {
  margin-bottom: 1.57143rem;
  height: 130px;
}

@media screen and (min-width: 761px) {
  [data-tooltip] {
    position: relative;
  }
  [data-tooltip]::before {
    font-size: 12px;
    font-size: 0.85714rem;
    line-height: 1.83333;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 50%;
    width: 300px;
    margin-top: 0.39286rem;
    content: attr(data-tooltip);
    background: #fafeff;
    padding: 0.78571rem;
    border-radius: 5px;
    border: 1px solid #e3e6e9;
    pointer-events: none;
    z-index: 10;
  }
  [data-tooltip]::after {
    font-family: "postbox-icons";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;
    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    position: absolute;
    right: 0.39286rem;
    top: 50%;
    margin-top: -2px;
    content: '\e802';
    z-index: 1;
  }
  [data-tooltip]:hover::before {
    visibility: visible;
  }
}

.btn-cta {
  padding: 1.57143rem 0;
  text-align: center;
}

.headroom {
  transition: all 200ms linear;
}

.headroom--pinned {
  transform: translateY(0%);
}

.headroom--unpinned {
  transform: translateY(-100%);
}

/*@import 'components/header-svg';*/
.hero__content.homepage-hero__content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.header-hero-video {
  display: -ms-flexbox;
  display: flex;
  max-width: 100%;
  position: relative;
}

.header-hero-video__icon-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.header-hero-video img {
  max-width: none;
}

@media screen and (max-width: 540px) {
  .header-hero-video img {
    width: 100%;
    min-width: 1200px;
  }
}

.header-hero-video__icons {
  position: absolute;
  transform: translate(0%, 5%);
  left: 0;
  width: 2484px;
}

.js .header-hero-video__icons {
  opacity: 0;
}

.header-hero-video__icons--repeater {
  transform: translate(0%, -100%);
}

.header-hero-video__ocean {
  position: absolute;
  top: 0;
}

.header-hero-video #video-container {
  display: -ms-flexbox;
  display: flex;
  height: 70vh;
  min-height: 400px;
  width: 100%;
}

.header-hero-video #video-container:after {
  background-color: rgba(0, 51, 86, 0.75);
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

.header-hero-video #video-container .hero-video {
  z-index: 0 !important;
}

#watch-vimeo-video {
  background-image: url("../images/play-button%402x.png");
  background-size: 60px auto;
  display: inline-block;
  height: 60px;
  width: 60px;
  display: none;
}

#watch-vimeo-video:hover {
  opacity: 0.8;
  display: none;
}

#hero-vimeo-video {
  width: 60vw !important;
  height: calc(60vw * 0.5625) !important;
  margin: auto !important;
  background-color: black !important;
  left: calc(-50vw + 50%) !important;
  right: calc(-50vw + 50%) !important;
  top: calc(-50vh + 50%) !important;
  bottom: calc(-50vh + 50%) !important;
  overflow: hidden !important;
  border-radius: 5px;
  box-shadow: 0px 20px 90px rgba(0, 0, 0, 0.75);
  display: none;
}

@media screen and (max-width: 940px) {
  #hero-vimeo-video {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
}

#hero-vimeo-video.hero-vimeo-video-on {
  display: block;
  z-index: 999999 !important;
}

#hero-vimeo-video.hero-vimeo-video-on .close-hero-vimeo-video {
  display: inline-block;
}

#hero-vimeo-video .close-hero-vimeo-video {
  display: none;
  background-image: url("../images/close-button%402x.png");
  background-size: 10px auto;
  height: 10px;
  width: 10px;
  position: absolute;
  left: 20px;
  top: 20px;
}

#hero-vimeo-video .close-hero-vimeo-video:after {
  content: "";
  position: absolute;
  width: 2.625em;
  height: 2.625em;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 6.25em;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.1);
}

#hero-vimeo-video .close-hero-vimeo-video:hover:after {
  background: rgba(255, 255, 255, 0.4);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.arrow {
  position: absolute;
  bottom: 10px;
  display: block;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
  background-size: contain;
}

.arrow.bounce {
  animation: bounce 2s infinite;
}

#testimonial-carousel .video-item {
  position: relative;
  background-color: #000000;
}

#testimonial-carousel .video-item .img-wrapper {
  position: relative;
}

@media screen and (max-width: 340px) {
  #testimonial-carousel .video-item .img-wrapper {
    width: 100%;
  }
}

#testimonial-carousel .video-item .img-wrapper img.video-thumb {
  width: 100%;
}

#testimonial-carousel .video-item .img-wrapper:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

#testimonial-carousel .video-item .overlay-text {
  text-align: center;
  color: #ffffff;
  padding: 1.57143rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

#testimonial-carousel .video-item .overlay-text h3 {
  font-size: 40px;
}

#testimonial-carousel .video-item .overlay-text h4 {
  font-size: 25px;
}

@media screen and (max-width: 940px) {
  #testimonial-carousel .video-item .overlay-text h3 {
    font-size: 25px;
    margin-bottom: 0.5rem;
  }
  #testimonial-carousel .video-item .overlay-text h4 {
    font-size: 20px;
  }
}

@media screen and (max-width: 540px) {
  #testimonial-carousel .video-item .overlay-text h3 {
    font-size: 15px;
  }
  #testimonial-carousel .video-item .overlay-text h4 {
    font-size: 12px;
  }
}

#testimonial-carousel .play-button {
  background-image: url("../images/play-button%402x.png");
  background-size: 60px auto;
  display: inline-block;
  height: 60px;
  width: 60px;
}

#testimonial-carousel .play-button:hover {
  opacity: 0.8;
}

@media screen and (max-width: 800px) {
  #testimonial-carousel .play-button {
    background-size: 40px auto;
    height: 40px;
    width: 40px;
  }
}

#dots {
  position: relative;
  margin-bottom: 70px;
}

#dots .slick-dots {
  margin-top: 20px;
  list-style: none;
}

#dots .slick-dots .slider-dot {
  display: inline-block;
  color: #dddddd;
  height: 12px;
  width: 12px;
  border-radius: 6px;
  border: 3px solid #E7ECF1;
  background-color: #E7ECF1;
  outline: none;
}

#dots .slick-dots .slick-active .slider-dot {
  border-color: #00aaf0;
  background-color: transparent;
}

.lity-active,
.lity-active body {
  overflow: hidden;
}

.lity {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  background: #0b0b0b;
  background: rgba(0, 0, 0, 0.9);
  outline: none !important;
  opacity: 0;
  transition: opacity .3s ease;
}

.lity.lity-opened {
  opacity: 1;
}

.lity.lity-closed {
  opacity: 0;
}

.lity * {
  box-sizing: border-box;
}

.lity-wrap {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  outline: none !important;
}

.lity-wrap:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.lity-loader {
  z-index: 9991;
  color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -0.8em;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  opacity: 0;
  transition: opacity .3s ease;
}

.lity-loading .lity-loader {
  opacity: 1;
}

.lity-container {
  z-index: 9992;
  position: relative;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  white-space: normal;
  max-width: 100%;
  max-height: 100%;
  outline: none !important;
}

.lity-content {
  z-index: 9993;
  width: 100%;
  transform: scale(1);
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease;
}

.lity-loading .lity-content,
.lity-closed .lity-content {
  transform: scale(0.8);
}

.lity-content:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.lity-close,
.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited {
  z-index: 9994;
  width: 35px;
  height: 35px;
  /* Change to position: absolute to display close button inside content container */
  position: fixed;
  right: 0;
  top: 0;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, Baskerville, monospace;
  line-height: 35px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border: 0;
  background: none;
  box-shadow: none;
}

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

.lity-close:active {
  top: 1px;
}

/* Image */
.lity-image img {
  max-width: 100%;
  display: block;
  line-height: 0;
  border: 0;
}

/* iFrame */
.lity-iframe .lity-container {
  width: 100%;
  max-width: 964px;
}

.lity-iframe-container {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: auto;
  pointer-events: auto;
  transform: translateZ(0);
  -webkit-overflow-scrolling: touch;
}

.lity-iframe-container iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

.lity-hide {
  display: none;
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero__content {
  width: 100%;
  margin: auto;
  position: absolute;
  text-align: center;
  top: 40%;
}

.hero__title {
  font-size: 45px;
  font-size: 3.21429rem;
  line-height: 1.3;
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #fff;
  text-shadow: 0 2px 0px rgba(0, 0, 0, 0.06);
}

@media screen and (max-width: 760px) {
  .hero__title {
    font-size: 34px;
    font-size: 2.42857rem;
    line-height: 1.29412;
  }
}

.hero__subtitle {
  font-size: 22px;
  font-size: 1.57143rem;
  line-height: 1.57143;
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 2px 0px rgba(0, 0, 0, 0.03);
  margin: 0 20%;
}

.product-statement {
  position: relative;
}

.product-statement__section {
  position: relative;
  color: #fff;
  min-height: 200px;
  padding: 1.57143rem;
  background-color: #00aaf0;
  margin-bottom: 60px;
}

@media screen and (min-width: 541px) {
  .product-statement__section {
    height: 30vh;
  }
}

.product-statement__section .product-statement__bar {
  position: relative;
  width: 100%;
  padding: 1.57143rem;
  max-width: 700px;
}

@media screen and (min-width: 541px) {
  .product-statement__section .product-statement__bar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.product-statement__section .product-statement__title {
  margin-bottom: 1.57143rem;
}

.product-statement__section .product-statement__title h1 {
  font-size: 36px;
  font-size: 2.57143rem;
  line-height: 1.3;
}

@media screen and (max-width: 1440px) {
  .product-statement__section .product-statement__title h1 {
    font-size: 30px;
    font-size: 2.14286rem;
  }
}

.product-statement__section .product-statement__body {
  text-align: center;
  font-size: 20px;
  font-size: 1.42857rem;
  line-height: 1.57143;
  color: rgba(255,255,255,0.72);
}

@media screen and (max-width: 760px) {
  .product-statement__section .product-statement__body {
    font-size: 19px;
    font-size: 1.35714rem;
    line-height: 1.57143;
  }
}

.product-statement__section .product-statement__body p {
  margin-bottom: 0;
}

.product-statement__section .product-statement__body strong {
  color: #fff;
}

.highlighted-feature {
  margin-bottom: 2.85714rem;
}

.features {
  padding-bottom: 5.71429rem;
}

@media screen and (max-width: 940px) {
  .features {
    padding-bottom: 2.85714rem;
  }
}

.features:first-of-type {
  padding-top: 0;
}

.features:last-of-type {
  margin-bottom: 0;
}

.features__figure {
  padding-right: 3.57143rem;
  max-width: 29.28571rem;
}

@media screen and (max-width: 940px) {
  .features__figure {
    padding-right: 1.57143rem;
    max-width: 300px;
  }
}

@media screen and (max-width: 760px) {
  .features__figure {
    max-width: 240px;
  }
}

@media screen and (max-width: 540px) {
  .features__figure {
    max-width: none;
  }
}

.features--highlighted {
  border-top: 1px solid #e3e6e9;
  border-bottom: 1px solid #e3e6e9;
}

.features--highlighted .features__figure {
  max-width: 55rem;
}

@media screen and (max-width: 1140px) {
  .features--highlighted .features__figure {
    padding-right: 1.57143rem;
    max-width: 38.57143rem;
  }
}

@media screen and (max-width: 940px) {
  .features--highlighted .features__figure {
    padding-right: 1.57143rem;
    max-width: 300px;
  }
}

@media screen and (max-width: 760px) {
  .features--highlighted .features__figure {
    max-width: 240px;
  }
}

@media screen and (max-width: 540px) {
  .features--highlighted .features__figure {
    max-width: none;
  }
}

.features .media,
.features--highlighted .media {
  margin-bottom: 0;
}

.features--highlighted + .features {
  padding-top: 5.71429rem;
}

.media--flip > .features__figure {
  padding-left: 3.57143rem;
}

.media--stack > .media__figure.features__figure {
  margin-left: auto;
  margin-right: auto;
}

a.getting-started-block {
  width: 25%;
  display: inline-block;
  vertical-align: top;
  color: #333;
}

@media screen and (max-width: 860px) {
  a.getting-started-block {
    width: 100%;
    border-bottom: 1px solid #e3e6e9;
  }
  a.getting-started-block:last-of-type {
    border-bottom: none;
  }
}

.section--getting-started .media {
  padding: 4.71429rem 3.14286rem;
  margin-bottom: 0;
  transition: background 350ms ease-in-out;
}

.section--getting-started .media:hover {
  background: #f5f8fc;
  cursor: pointer;
}

.section--getting-started .media__title, .section--getting-started .feature__title {
  font-size: 1.28571rem;
  margin-bottom: 0.78571rem;
}

.section--getting-started a.media {
  color: #333;
}

.section--getting-started .rule--flush:last-of-type {
  border: none;
}

@media screen and (max-width: 860px) {
  .section--getting-started .rule--flush {
    display: none;
  }
}

h1 > .getting-started-index {
  font-size: 2.28571rem;
}

.ma {
  margin: 1.57143rem !important;
}

.mt {
  margin-top: 1.57143rem !important;
}

.mr {
  margin-right: 1.57143rem !important;
}

.mb {
  margin-bottom: 1.57143rem !important;
}

.ml {
  margin-left: 1.57143rem !important;
}

.mh {
  margin-top: 1.57143rem !important;
  margin-bottom: 1.57143rem !important;
}

.mv {
  margin-right: 1.57143rem !important;
  margin-left: 1.57143rem !important;
}

.ma\+ {
  margin: 3.14286rem !important;
}

.mt\+ {
  margin-top: 3.14286rem !important;
}

.mr\+ {
  margin-right: 3.14286rem !important;
}

.mb\+ {
  margin-bottom: 3.14286rem !important;
}

.ml\+ {
  margin-left: 3.14286rem !important;
}

.mh\+ {
  margin-top: 3.14286rem !important;
  margin-bottom: 3.14286rem !important;
}

.mv\+ {
  margin-right: 3.14286rem !important;
  margin-left: 3.14286rem !important;
}

.ma- {
  margin: 0.78571rem !important;
}

.mt- {
  margin-top: 0.78571rem !important;
}

.mr- {
  margin-right: 0.78571rem !important;
}

.mb- {
  margin-bottom: 0.78571rem !important;
}

.ml- {
  margin-left: 0.78571rem !important;
}

.mh- {
  margin-top: 0.78571rem !important;
  margin-bottom: 0.78571rem !important;
}

.mv- {
  margin-right: 0.78571rem !important;
  margin-left: 0.78571rem !important;
}

.ma0 {
  margin: 0 !important;
}

.mt0 {
  margin-top: 0 !important;
}

.mr0 {
  margin-right: 0 !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.ml0 {
  margin-left: 0 !important;
}

.mh0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.mv0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/**
 * Text alignment
 */
.ta-l {
  text-align: left   !important;
}

.ta-c {
  text-align: center !important;
}

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

/**
 * Text transforms
 */
.tt-u {
  text-transform: uppercase  !important;
}

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

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

/**
 * Font weights
 */
.fw-l {
  font-weight: 300 !important;
}

.fw-n {
  font-weight: 400 !important;
}

.fw-b {
  font-weight: 500 !important;
}

.fw-b--rounded {
  font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
}

.gw-1 {
  width: 6.85484%;
  margin-right: 1.6129%;
}

.gw-2 {
  width: 15.32258%;
  margin-right: 1.6129%;
}

.gw-3 {
  width: 23.79032%;
  margin-right: 1.6129%;
}

.gw-4 {
  width: 32.25806%;
  margin-right: 1.6129%;
}

.gw-5 {
  width: 40.72581%;
  margin-right: 1.6129%;
}

.gw-6 {
  width: 49.19355%;
  margin-right: 1.6129%;
}

.gw-7 {
  width: 57.66129%;
  margin-right: 1.6129%;
}

.gw-8 {
  width: 66.12903%;
  margin-right: 1.6129%;
}

.gw-9 {
  width: 74.59677%;
  margin-right: 1.6129%;
}

.gw-10 {
  width: 83.06452%;
  margin-right: 1.6129%;
}

.gw-11 {
  width: 91.53226%;
  margin-right: 1.6129%;
}

.gw-12 {
  width: 100%;
  margin-right: 1.6129%;
}

.gw-omega {
  margin-right: 0;
}

[class^="gw"] {
  float: left;
  display: block;
}

[class^="gw"]:last-child {
  margin-right: 0;
}

@media screen and (max-width: 760px) {
  [class^="gw"] {
    width: 100%;
    margin-right: 0;
  }
}

.row {
  display: block;
  margin-bottom: 1.57143rem;
}

.row::after {
  clear: both;
  content: "";
  display: table;
}

.color--sky {
  color: #00aaf0;
}

.color--ketchup {
  color: #FF5938;
}

.color--slate {
  color: #576d75;
}

.color--space {
  color: #333;
}

.section--color-grape h1, .section--color-grape h2, .section--color-grape h3, .section--color-grape h4, .section--color-grape h5, .section--color-grape h6 {
  color: #6d70c3;
}

.color-secondary--grape {
  color: #6d70c3;
}

.section--color-blueberry h1, .section--color-blueberry h2, .section--color-blueberry h3, .section--color-blueberry h4, .section--color-blueberry h5, .section--color-blueberry h6 {
  color: #2ea7ea;
}

.color-secondary--blueberry {
  color: #2ea7ea;
}

.section--color-apple h1, .section--color-apple h2, .section--color-apple h3, .section--color-apple h4, .section--color-apple h5, .section--color-apple h6 {
  color: #3fca5f;
}

.color-secondary--apple {
  color: #3fca5f;
}

.section--color-mint h1, .section--color-mint h2, .section--color-mint h3, .section--color-mint h4, .section--color-mint h5, .section--color-mint h6 {
  color: #40bea6;
}

.color-secondary--mint {
  color: #40bea6;
}

.section--color-banana h1, .section--color-banana h2, .section--color-banana h3, .section--color-banana h4, .section--color-banana h5, .section--color-banana h6 {
  color: #ffc200;
}

.color-secondary--banana {
  color: #ffc200;
}

.section--color-orange h1, .section--color-orange h2, .section--color-orange h3, .section--color-orange h4, .section--color-orange h5, .section--color-orange h6 {
  color: #f88d0a;
}

.color-secondary--orange {
  color: #f88d0a;
}

.section--color-strawberry h1, .section--color-strawberry h2, .section--color-strawberry h3, .section--color-strawberry h4, .section--color-strawberry h5, .section--color-strawberry h6 {
  color: #f84646;
}

.color-secondary--strawberry {
  color: #f84646;
}

.section--color-raspberry h1, .section--color-raspberry h2, .section--color-raspberry h3, .section--color-raspberry h4, .section--color-raspberry h5, .section--color-raspberry h6 {
  color: #d33b85;
}

.color-secondary--raspberry {
  color: #d33b85;
}

.no-wrap {
  white-space: nowrap;
}

.feature_description {
  font-size: 1.1rem;
}
/* home page fonts
div.w-40 > p,
div.w-40 > ul {
  font-size: 1.2rem;
}
*/

/* position of product name on store
#payment-form > div > div.payment__form > div:nth-child(1) > div:nth-child(2) > label {
    margin-top: -10px;
}
*/

/* Some Utility Classes */
.flex {
  display: flex;
}
.center {
  align-items: center;
  justify-content: center;
}
.text-center {
  text-align: center;
}
.bg-center {
  background-position: 50%;
}
.bg-primary {
  background-color: #02aaf0;
}
.bg-cover {
  background-size: cover;
}
.bg-defaults {
  background-repeat: no-repeat;
  background-position: bottom;
}
.py-16 {
  padding-top: 16rem;
  padding-bottom:26rem;
}
.m-h-large {
  min-height: 420px;
}
@media screen and (min-width: 1080px) {
  .py-16 {
      padding-top: 22rem;
      padding-bottom: 32rem;
  }
}
@media screen and (min-width: 1600px) {
  .py-16 {
      padding-top: 28rem;
      padding-bottom: 38rem;
  }
}

/* Alert Banner */
#alert-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
  z-index: 101;
  background-color: #42334c;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 2rem;
  border-top: 1px solid #42334c;
}

#alert-banner .alert-text {
  text-align: center;
  margin-bottom: 10px;
  color: #FFFFFF;
}

#alert-banner .alert-text p {
  margin-bottom: 0;
  font-size: 18px;
}

#alert-banner .alert-text p strong {
  font-weight: bold;
}

#alert-banner .alert-text p em {
  font-style: italic;
}

#alert-banner .alert-actions {
  text-align: center;
  flex-shrink: 0;
}

#alert-banner .alert-actions a {
  display: inline-block;
  margin-right: 1rem;
  padding: 8px 16px;
  background-color: #faa21e;
  color: #42334c;
  border-radius: 5px;
  transition: all .3s ease-in-out;
  text-transform: uppercase;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
  font-weight:600;
}

#alert-banner .alert-actions a:hover {
  background-color: #e5913b;
  color:#FFFFFF;
}

#alert-banner .alert-actions button {
  text-decoration: underline;
  border: 0;
  background-color: transparent;
  color: rgba(255,255,255,0.6);
  display:none;
}

@media screen and (min-width: 700px) {
  #alert-banner {
    flex-direction: row;
  }

  #alert-banner .alert-text {
    margin-bottom: 0;
    padding-right: 24px;
    text-align: left;
  }

  #alert-banner .alert-text p {
    font-size: 22px;
  }
}

.feature-list-button a.btn {
  margin-top: 90px;
}

.feature-list-var {
  margin-top: 0;
  padding-left: 0 !important;
}

.feature-list-var ol {
  margin-top:-4rem;
}

@media screen and (max-width: 1024px) {
  .feature-list-button a.btn {
    margin-top: 40px;
  }

  .feature-list-var ol {
    padding-left: 0;
    margin-left: 0;
  }
}

.three-columns {
  column-count: 3;
}

@media screen and (max-width: 650px) {
  .three-columns {
    column-count: 2;
  }
}

@media screen and (max-width: 350px) {
  .three-columns {
    column-count: 1;
  }
}