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

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

table {
  border-collapse: collapse;
  border-spacing: 0; }

/**
 * @description
 * Generates keyframe animations
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/#feat=css-animation
 * @link spec http://www.w3.org/TR/css3-animations/
 *
 * @param values
 * @returns
 *   -webkit-animation: <values>;
 *           animation: <values>;
 *
 * @example
 *   .selector {
 *     @include x-animation(jump 1s ease-out);
 *   }
 */
/*
 * @example
 *    @include x-keyframes(jump) {
 *      from { top: 0; }
 *      to { top: -10px; }
 *   }
 */
/**
 * @description
 * Generates `appearance` for a given element
 *
 * @author romamatusevich
 *
 * @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
 * @link css-tricks http://css-tricks.com/almanac/properties/a/appearance/
 * @link spec http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance
 *
 * @param value
 * @returns
 *   -webkit-appearance: <value>;
 *      -moz-appearance: <value>;
 *           appearance: <value>;
 *
 * @example
 *   .selector {
 *     @include x-appearance(button);
 *   }
 */
/**
 * @description
 * Generates `background-size` output for a given element.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/background-img-opts
 * @link spec http://www.w3.org/TR/css3-background/
 *
 * @param value
 * @returns
 *   -webkit-background-size: $args;
 *           background-size: $args;
 *
 * @example
 *   .selector {
 *     @include x-background-size(100% auto);
 *   }
 */
/**
 * @description
 * Generates cross-browser-compatible `border-radius` for a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/border-radius
 * @link spec http://www.w3.org/TR/css3-background/#corners
 *
 * @param values
 * @returns
 *   -webkit-border-radius: <values>;
 *           border-radius: <values>;
 *
 * @example
 *   .selector {
 *     @include x-border-radius(20px 10px);
 *   }
 */
/**
 * @description
 * Generates cross-browser-compatible `box-shadow` for a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-boxshadow
 * @link spec http://www.w3.org/TR/css3-background/#the-box-shadow
 *
 * @param values
 * @returns
 *   -webkit-box-shadow: <values>;
 *           box-shadow: <values>;
 *
 * @example
 *   .selector {
 *     @include x-box-shadow(5px 5px 10px 5px #aaa);
 *   }
 */
/**
 * @description
 * Generates cross-browser-compatible `box-sizing` output for a given element.
 *
 * @author drublic
 *
 * @link caniuse
 * @link spec
 *
 * @param type
 * @returns
 *   -webkit-box-sizing: <type>;
 *      -moz-box-sizing: <type>;
 *           box-sizing: <type>;
 *
 * @example
 *   .selector {
 *     @include x-box-sizing;
 *   }
 */
/**
 * @description
 * These mixins generates Media Queries
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/#feat=css-mediaqueries
 * @link spec http://www.w3.org/TR/css3-mediaqueries/
 *
 * Note: Please use the CSS unit `em` for device-width in order to stay
 * responsive.
 */
/**
 * @param device-width {number}
 * @content
 * @returns
 *   @media screen and (min-width: <device-width>) {
 *      <content>
 *   }
 *
 * @example
 *   .selector {
 *     x-at-least(40em) { width: 60%; }
 *   }
 */
/**
 * @param device-width {number}
 * @content
 * @returns
 *   @media screen and (max-width: <device-width - 0.01>) {
 *      <content>
 *   }
 *
 * @example
 *   .selector {
 *     x-until(40em) { width: 100%; }
 *   }
 */
/**
 * @author romamatusevich
 *
 * @param point{string}, bp-mobile-width{number}, bp-tablet-width{number}
 * @content
 * @returns
 *   @media (max-width: <bp-mobile-width>) {
 *      <content>
 *   }
 *
 * @example
 *   .selector {
 *     x-breakpoints(mobile,  320px) { width: 100%; }
 *   }
 */
/**
 * @description
 * Generates `calc` function which allows mathematical expressions for a given property
 *
 * @author romamatusevich
 *
 * @link spec http://www.w3.org/TR/css3-values/#calc
 * @link caniuse http://caniuse.com/calc
 *
 * @param property
 * @param expression
 *
 * @returns
 *    <property>: -webkit-calc(<expression>);
 *    <property>: calc(<expression>);
 *
 * @example
 *   .selector {
 *     @include x-calc(width, "600px - 2em");
 *   }
 */
/**
 * @description
 * Generates flexbox properties for a given element
 *
 * @author romamatusevich
 *
 * @link MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
 * @link css-tricks http://css-tricks.com/snippets/css/a-guide-to-flexbox/
 * @link spec http://www.w3.org/TR/css3-flexbox/
 */
/**
 * @returns
 *   display: -webkit-box;
 *   display: -moz-box;
 *   display: -ms-flexbox;
 *   display: -webkit-flex;
 *   display: flex;
 *
 * @example
 *   .selector {
 *     @include x-display-flex;
 *   }
 */
/**
 * @param values
 * @returns
 *   -webkit-box-flex: <values>;
 *      -moz-box-flex: <values>;
 *       -webkit-flex: <values>;
 *           -ms-flex: <values>;
 *               flex: <values>;
 *
 * @example
 *   .selector {
 *     @include x-flex(1 1 auto);
 *   }
 */
/**
 * @param value
 * @returns
 *   -webkit-box-ordinal-group: <value>;
 *      -moz-box-ordinal-group: <value>;
 *              -ms-flex-order: <value>;
 *               -webkit-order: <value>;
 *                       order: <value>;
 *
 * @example
 *   .selector {
 *     @include x-order(1);
 *   }
 */
/**
 * @param value
 * @returns
 *    -webkit-flex-wrap: <value>;
 *        -ms-flex-wrap: <value>;
 *            flex-wrap: <value>;
 *
 * @example
 *   .selector {
 *     @include x-flex-wrap(wrap);
 *   }
 */
/**
 * @param value
 * @returns
 *   -webkit-align-content: <value>;
 *      -moz-align-content: <value>;
 *      -ms-flex-line-pack: <value>;
 *           align-content: <value>;
 * @example
 *   .selector {
 *     @include x-align-content(center);
 *   }
 */
/**
 * @param value
 * @returns
 *	  -webkit-box-direction: <value>;
 *		 -moz-box-direction: <value>;
 *       -webkit-box-orient: <value>;
 *		    -moz-box-orient: <value>;
 *   -webkit-flex-direction: <value>;
 *      -moz-flex-direction: <value>;
 *       -ms-flex-direction: <value>;
 *           flex-direction: <value>;
 * @example
 *   .selector {
 *     @include x-flex-direction(row-reverse);
 *   }
 */
/* ToDo: add flex-grow, flex-shrink, flex-basis, flex-flow, align-items, align-self, justify-content mixins */
/**
 * @description
 * Generates a linear gradient for a given element with a fallback color.
 *
 * @author drublic
 *
 * @link caniuse
 * @link spec
 *
 * @dependency helper-gradient-angle
 * @param direction {'to bottom'|'to right'|'to top'|'to left'|<degree>}
 * @param fallback {color}
 * @param from {color}
 * @param to {color}
 * @default 'to bottom', #ccc, #ccc, #aaa
 *
 * @returns
 *   background-color: <fallback>;
 *   background-image: -webkit-gradient(linear, <direction - old converted>, from(<from>), to(<to>));
 *   background-image: -webkit-linear-gradient(<direction - converted>, <from>, <to>);
 *   background-image:         linear-gradient(<direction>, <from>, <to>);
 *
 * @example
 *   .selector {
 *     @include x-linear-gradient("to bottom", #ccc, #ddd, #bbb);
 *   }
 *
 * Note: By default this linear-gradient-mixin encourages people to use the
 * latest CSS-syntax for gradients.
 */
/**
 * @description
 * This mixin generates multiple backgrounds
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-gradients
 * @link spec http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients
 */
/*
 * A function for prefixing gradients
 *
 * @param mode {'webkit-old'|'webkit'|''}
 * @param gradient
 * @returns
 *   -<mode>-linear-gradient(<gradient>);
 */
/*
 * Generates multiple backgrounds
 *
 * @param backgrounds {list}
 *
 * @example
 *   .selector {
 *     @include x-multiple-backgrounds(
 *       rgba(0, 0, 0, 0.3),
 *       url('../img/html5_logo.png') top right no-repeat,
 *       (linear-gradient, to bottom, #aaa, #ddd)
 *     );
 *   }
 */
/**
 * @description
 * This mixin creates (endless) multiple color stops in gradients just with one
 * call for the mixin.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-gradients
 * @link spec http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients
 *
 * @param stops {list}
 * @returns
 *   background-image: -webkit-linear-gradient(top, <stops[1]>, <stops[2]>, ..., <stops[n]>);
 *   background-image:         linear-gradient(to bottom, <stops[1]>, <stops[2]>, ..., <stops[n]>);
 *
 * @example
 *   .selector {
 *     @include x-multiple-colored-gradient(
 *         "top",
 *         #f22 0%,
 *         #f2f 15%,
 *         #22f 30%,
 *         #2ff 45%,
 *         #2f2 60%,
 *         #2f2 75%,
 *         #ff2 90%,
 *         #f22 100%
 *     );
 *   }
 *
 * Note: This mixis does not define a fallback-color for your background as it
 * is likely you want to add an image or something. Please specify one by
 * yourself.
 */
/*
  * Returns whether a value is a valid keyword direction
  *
  * @param value {String}
  * @returns
  *   <Bool>
  */
/**
 * @description
 * Generates `opacity` output for a given element and adds a filter for old IE.
 *
 * @author bartveneman
 *
 * @link caniuse http://caniuse.com/css-opacity
 * @link spec http://www.w3.org/TR/css3-color/#transparency
 *
 * @param value
 * @returns
 *   opacity: <value>;
 *    filter: alpha(opacity=<value * 100>);
 *
 * @example
 *   .selector {
 *     @include x-opacity(0.3);
 *   }
 */
/**
 * @description
 * Generates `placeholder` content for a given element
 *
 * @author romamatusevich
 *
 * @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder
 * @link css-tricks http://css-tricks.com/snippets/css/style-placeholder-text/
 *
 * @returns
 *    &::-webkit-input-placeholder {
 *        <content property 1>: <content value 1>;
 *        ...
 *        <content property n>: <content value n>;
 *    }
 *    &::-moz-placeholder {
 *        <content property 1>: <content value 1>;
 *        ...
 *        <content property n>: <content value n>;
 *    }
 *    &:-ms-input-placeholder {
 *        <content property 1>: <content value 1>;
 *        ...
 *        <content property n>: <content value n>;
 *    }
 *
 * @example
 *   .selector {
 *     @include x-placeholder {
 *         color: #bada55;
 *         font-weight: bold;
 *     }
 *   }
 */
/**
 * @description
 * This mixin enables you to use the CSS3 value `rem`, which lets you define
 * property sizes based on the root element's font-size.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/rem
 * @link spec http://www.w3.org/TR/css3-values/#relative0
 *
 * Note: Depending on the font-size of the root-element `rem` calculates a
 * property of a current element. The fallback solution accepts a
 * `default-font-size`-argument which is 16px by default.
 */
/*
  * Returns a number without unit. E.g. 30px -> 30
  * Borrowed from https://github.com/zurb/foundation/blob/master/scss/foundation/_functions.scss
  *
  * @param value {String}
  * @returns
  *   <Number>
  */
/*
  * Outputs properties that use rem with a px fallback.
  * It also takes px values and converts them to rem.
  *
  * @param property
  * @param values
  * @param default-font-size int optional
  * @returns
  *   <property>: <parsed value>px;
  *   <property>: <parsed value>rem;
  *
  * @example
  *   .selector {
  *     @include x-rem(font-size, 1.3);
  *     @include x-rem(padding, 20px);
  *   }
  */
/**
 * @description
 * Sass-mixin for CSS property `tab-size`, generates cross-browser-compatible
 * `tab-size` output.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css3-tabsize
 * @link spec http://dev.w3.org/csswg/css-text/#tab-size1
 *
 * @param value int optional
 * @default 4
 * @returns
 *   -moz-tab-size: <value>;
 *        tab-size: <value>;
 *
 * @example
 *   .selector {
 *     @include x-tab-size(4);
 *    }
 */
/**
 * @description
 * Generates cross-browser-compatible `transform` for a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/transforms2d http://caniuse.com/transforms3d
 * @link spec
 *
 * @param values
 * @returns
 *   -webkit-transform: <values>;
 *       -ms-transform: <values>;
 *           transform: <values>;
 *
 * @example
 *   .selector {
 *     @include x-transform(rotate(1deg));
 *   }
 */
/**
 * @description
 * Generates cross-browser-compatible `transition` output for a given element.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/css-transitions
 * @link spec
 *
 * @param values
 * @returns
 *   -webkit-transition: <values>;
 *           transition: <values>;
 *
 * @example
 *   .selector {
 *     @include x-transition(background 0.3s ease-in);
 *   }
 */
/**
 * @description
 * Disables selection of content of a given element
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/user-select-none
 *
 * @param value none|auto optional
 * @default none
 * @returns
 *   -webkit-user-select: <value>;
 *      -moz-user-select: <value>;
 *       -ms-user-select: <value>;
 *           user-select: <value>;
 *
 * @example
 *   .selector {
 *     @include x-user-select;
 *   }
 */
/* TEXT SHADOW */
/* General Mobile Touch ----------- */
.mobile-touch-overflow {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  overflow-scrolling: touch; }

.mobile-touch-overflow,
.mobile-touch-overflow * {
  /* some level of transform keeps elements from blinking out of visibility on iOS */
  -webkit-transform: rotateY(0); }

@font-face {
  font-family: 'Avenir Next';
  src: url("../fonts/avenir-next/AvenirNextLTPro-Bold.woff2") format("woff2"), url("../fonts/avenir-next/AvenirNextLTPro-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Avenir Next';
  src: url("../fonts/avenir-next/AvenirNextLTPro-It.woff2") format("woff2"), url("../fonts/avenir-next/AvenirNextLTPro-It.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/avenir-next/AvenirNextLTPro-Medium.woff2") format("woff2"), url("../fonts/avenir-next/AvenirNextLTPro-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Avenir Next';
  src: url("../fonts/avenir-next/AvenirNextLTPro-Regular.woff2") format("woff2"), url("../fonts/avenir-next/AvenirNextLTPro-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'chart-blocks';
  src: url("../fonts/chart-blocks/chart-blocks.eot?v=1.5");
  src: url("../fonts/chart-blocks/chart-blocks.eot?#iefix&v=1.5") format("embedded-opentype"), url("../fonts/chart-blocks/chart-blocks.svg?v=1.5") format("svg"), url("../fonts/chart-blocks/chart-blocks.woff?v=1.5") format("woff"), url("../fonts/chart-blocks/chart-blocks.ttf?v=1.5") format("truetype");
  font-weight: normal;
  font-style: normal; }

.chart-blocks {
  font-family: "chart-blocks"; }

.hi-icon-effect-6 .hi-icon {
  box-shadow: 0 0 0 4px white;
  transition: background 0.2s, color 0.2s; }

.no-touch .hi-icon-effect-6 .hi-icon:hover {
  background: white;
  color: #64bb5d; }

.no-touch .hi-icon-effect-6 .hi-icon:hover:before {
  animation: spinAround 2s linear infinite; }

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

.icon-lock:before {
  content: "\e640"; }

.icon-label:before {
  content: "\e63d"; }

.icon-tooltip:before {
  content: "\e63c"; }

.icon-cut:before {
  content: "\e63b"; }

.icon-clone:before {
  content: "\e600"; }

.icon-area-chart:before {
  content: "\e601"; }

.icon-arrow:before {
  content: "\e602"; }

.icon-axis:before {
  content: "\e603"; }

.icon-bar-chart-horizontal-stacked:before {
  content: "\e604"; }

.icon-bar-chart-horizontal:before {
  content: "\e605"; }

.icon-bar-chart-stacked:before {
  content: "\e606"; }

.icon-bar-chart:before {
  content: "\e607"; }

.icon-canvas:before {
  content: "\e608"; }

.icon-chart-data:before {
  content: "\e609"; }

.icon-chart-series:before {
  content: "\e60a"; }

.icon-chart-tools:before {
  content: "\e60b"; }

.icon-cog:before {
  content: "\e60c"; }

.icon-config:before {
  content: "\e60d"; }

.icon-copy:before {
  content: "\e60e"; }

.icon-data:before {
  content: "\e60f"; }

.icon-donut-chart:before {
  content: "\e610"; }

.icon-download:before {
  content: "\e611"; }

.icon-dribbble:before {
  content: "\e612"; }

.icon-edit:before {
  content: "\e613"; }

.icon-election-chart:before {
  content: "\e614"; }

.icon-embed:before {
  content: "\e615"; }

.icon-envelope:before {
  content: "\e616"; }

.icon-facebook-box:before {
  content: "\e617"; }

.icon-facebook:before {
  content: "\e618"; }

.icon-google:before {
  content: "\e619"; }

.icon-heart:before {
  content: "\e61a"; }

.icon-increase:before {
  content: "\e61b"; }

.icon-legend:before {
  content: "\e61c"; }

.icon-line-chart:before {
  content: "\e61d"; }

.icon-linkedin:before {
  content: "\e61e"; }

.icon-list:before {
  content: "\e61f"; }

.icon-search:before {
  content: "\e620"; }

.icon-minus:before {
  content: "\e621"; }

.icon-new-file:before {
  content: "\e622"; }

.icon-paste:before {
  content: "\e623"; }

.icon-people:before {
  content: "\e624"; }

.icon-pepole:before {
  content: "\e625"; }

.icon-pie-chart:before {
  content: "\e626"; }

.icon-pinterest:before {
  content: "\e627"; }

.icon-plus:before {
  content: "\e628"; }

.icon-redo:before {
  content: "\e629"; }

.icon-scatter-chart:before {
  content: "\e62a"; }

.icon-settings:before {
  content: "\e62c"; }

.icon-share:before {
  content: "\e62d"; }

.icon-show:before {
  content: "\e62e"; }

.icon-sort_down:before {
  content: "\e62f"; }

.icon-sort_up:before {
  content: "\e630"; }

.icon-sort:before {
  content: "\e631"; }

.icon-support:before {
  content: "\e632"; }

.icon-table:before {
  content: "\e633"; }

.icon-text:before {
  content: "\e634"; }

.icon-themes:before {
  content: "\e635"; }

.icon-trash:before {
  content: "\e636"; }

.icon-twitter-box:before {
  content: "\e637"; }

.icon-twitter:before {
  content: "\e638"; }

.icon-undo:before {
  content: "\e639"; }

.icon-upload:before {
  content: "\e63a"; }

i,
.icon {
  display: inline-block;
  font: 16px/1 chart-blocks;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }
  i.icon-huge,
  .icon.icon-huge {
    font-size: 5em; }

.chart-blocks {
  font-family: "chart-blocks";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body {
  font-family: "Avenir Next", sans-serif;
  font-size: 10px;
  line-height: normal; }

a {
  text-decoration: none;
  color: #1B22FA; }
  a:hover {
    color: #050cdd; }


h1,
h4 {
  font-size: 2.8em; }

h3 {
  font-size: 1.125em;
  font-weight: 500;
  margin-bottom: 1.5rem;
  color: #000000; }

h4 {
  font-size: 1.8em;
  margin: 1.0em 0 1.6em 0; }

p {
  margin: 1.0em 0 1.6em 0;
  line-height: 1.2em; }
  p.-small {
    font-size: 0.875rem;
    line-height: 1.25rem; }

li {
  font-family: "Avenir Next", sans-serif; }

a {
  text-decoration: none; }

strong {
  font-weight: 600; }

.text-red {
  color: #FF0000; }

.button,
input[type="submit"] {
  padding: 0 1rem;
  font-size: 0.875rem;
  color: white;
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: 36px;
  background-color: #1B22FA;
  line-height: 36px;
  min-width: 120px;
  border: 0;
  cursor: pointer;
  appearance: none;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  transition: background 0.3s; }
  .button svg,
  input[type="submit"] svg {
    fill: currentColor;
    margin-right: 0.5rem; }
  .button.button-compact,
  input[type="submit"].button-compact {
    padding: 0 10px;
    height: 30px;
    line-height: 30px; }
  .button.huge,
  input[type="submit"].huge {
    height: 45px;
    line-height: 45px;
    margin: 10px 0;
    font-size: 15px; }
  .button:hover,
  input[type="submit"]:hover {
    background-color: #0912C5;
    color: #FFF; }
  .button.green,
  input[type="submit"].green {
    background-color: #8CC63E; }
    .button.green i,
    input[type="submit"].green i {
      background-color: #7fb535; }
    .button.green:hover,
    input[type="submit"].green:hover {
      background-color: #7fb535;
      color: #FFF; }
  .button.red,
  input[type="submit"].red {
    background-color: #FF0000; }
    .button.red:hover,
    input[type="submit"].red:hover {
      background-color: #D11F1F;
      color: #FFF; }
  .button.yellow,
  input[type="submit"].yellow {
    background-color: #FFD006; }
    .button.yellow i,
    input[type="submit"].yellow i {
      color: #FFD006; }
    .button.yellow:hover,
    input[type="submit"].yellow:hover {
      background-color: #ecbf00;
      color: #FFF; }
      .button.yellow:hover i,
      input[type="submit"].yellow:hover i {
        color: #d2aa00; }
  .button.purple,
  input[type="submit"].purple {
    background-color: #BF64A7; }
    .button.purple i,
    input[type="submit"].purple i {
      color: #BF64A7; }
    .button.purple:hover,
    input[type="submit"].purple:hover {
      background-color: #b8529d;
      color: #FFF; }
      .button.purple:hover i,
      input[type="submit"].purple:hover i {
        color: #aa4690; }
  .button.orange,
  input[type="submit"].orange {
    background-color: #E47600; }
    .button.orange i,
    input[type="submit"].orange i {
      color: #E47600; }
    .button.orange:hover,
    input[type="submit"].orange:hover {
      background-color: #cb6900;
      color: #FFF; }
      .button.orange:hover i,
      input[type="submit"].orange:hover i {
        color: #b15c00; }
  .button.white,
  input[type="submit"].white {
    background: none;
    color: #888888;
    border: 1px solid #888888; }
    .button.white i,
    input[type="submit"].white i {
      color: #888888; }
    .button.white:hover,
    input[type="submit"].white:hover {
      border: 1px solid #6f6f6f;
      color: #6f6f6f; }
      .button.white:hover i,
      input[type="submit"].white:hover i {
        color: #6f6f6f; }
  .button.grey,
  input[type="submit"].grey {
    background-color: #888888; }
    .button.grey i,
    input[type="submit"].grey i {
      color: #fff;
      background-color: #7b7b7b; }
    .button.grey:hover,
    input[type="submit"].grey:hover {
      background-color: #7b7b7b;
      color: #FFF; }
      .button.grey:hover i,
      input[type="submit"].grey:hover i {
        background-color: #6f6f6f; }

.button-social {
  width: 100%;
  height: 60px;
  color: #333333;
  padding: 1.25rem 1.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  background: white;
  justify-content: flex-start;
  border: 1px solid #ECECEC;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  appearance: none;
  transition: border-color 0.3s;
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: left 20px center;
  padding-right: 0;
  min-width: auto; }
  .button-social:focus, .button-social:hover {
    color: #000000;
    background-color: white;
    border-color: #000000;
    outline: none; }

.button.-facebook {
  background-image: url("../images/icons/facebook.svg");
  padding-left: 56px; }

.button.-twitter {
  background-image: url("../images/icons/twitter.svg");
  padding-left: 56px; }

.button.-pinterest {
  background-image: url("../images/icons/pinterest.svg"); }

.button-ghost {
  color: #000000;
  background: none;
  border: none; }
  .button-ghost:hover, .button-ghost:focus {
    color: #000000;
    background: none;
    border: none; }

.button-outline {
  color: #1B22FA;
  background: none;
  border: 1px solid #1B22FA; }

.button + .button,
input[type="submit"] + .button,
.button + input[type="submit"],
input[type="submit"] + input[type="submit"] {
  margin-left: 1.5rem; }

.navigation .previousStep,
.navigation .nextStep {
  width: 80px;
  background: #888888;
  line-height: 10px;
  padding: 10px; }

.multiple-buttons {
  padding: 0 18px;
  font-size: 1.4em;
  color: white;
  display: inline-block;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  height: 36px;
  background-color: #1B22FA;
  line-height: 20px;
  border: 0;
  border-right: 1px solid #040ac4;
  cursor: pointer;
  margin: 0; }
  .multiple-buttons:last-child {
    -webkit-border-radius: 0 2px 2px 0;
    border-radius: 0 2px 2px 0;
    border-right: 0; }

.button-round {
  text-align: center;
  height: 40px;
  display: inline-block;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border: 2px solid #1B22FA;
  color: #1B22FA;
  cursor: pointer;
  -webkit-border-radius: 50%;
  border-radius: 50%; }
  .button-round i {
    width: 100%;
    height: 100%;
    padding: 10px;
    vertical-align: text-top !important; }
  .button-round:hover {
    border-color: #050df6;
    color: #050df6; }

.button-round-green {
  border: 2px solid #32BBA6; }
  .button-round-green i {
    color: #32BBA6; }
  .button-round-green:hover {
    border-color: #227f70; }
    .button-round-green:hover i {
      color: #227f70; }

.button-round-grey {
  border: 2px solid #888888; }
  .button-round-grey i {
    color: #888888; }
  .button-round-grey:hover {
    border-color: #7b7b7b; }
    .button-round-grey:hover i {
      color: #6f6f6f; }

.button-green {
  background-color: #8CC63E; }
  .button-green i {
    background-color: #7fb535; }
  .button-green:hover {
    background-color: #7fb535; }

.button-grey {
  background-color: #888888; }
  .button-grey i {
    background-color: #7b7b7b; }
  .button-grey:hover {
    background-color: #7b7b7b; }
    .button-grey:hover i {
      background-color: #6f6f6f; }

.button-simple {
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 24px;
  cursor: pointer;
  padding: 3px;
  margin: 2px;
  background: #888888;
  color: white;
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border-bottom: 3px solid #626262;
  font-family: chart-blocks;
  -webkit-border-radius: 2px;
  border-radius: 2px; }
  .button-simple i {
    font-size: 5em;
    color: #000; }

.social-button {
  position: relative;
  padding: 0 18px;
  font-size: 1em;
  color: white;
  display: inline-block;
  text-align: center;
  height: 33px;
  background-color: #1B22FA;
  line-height: 2.3em;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  -webkit-border-radius: 2px;
  border-radius: 2px; }
  .social-button i {
    display: block;
    float: left;
    margin: 0 12px 0 -18px;
    padding: 0 12px;
    width: 40px;
    height: 40px;
    height: 33px;
    text-shadow: 1px 1px #050df6;
    line-height: 33px;
    border-right: 1px solid #050df6;
    -webkit-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px; }
  .social-button:hover {
    background-color: #050df6;
    color: #FFF; }
    .social-button:hover i {
      background-color: #050cdd; }

.social-twitter {
  background-color: #4099FF;
  text-shadow: 1px 1px #278bff; }
  .social-twitter i {
    border-right: 1px solid #278bff;
    text-shadow: 1px 1px #278bff; }
  .social-twitter:hover {
    background-color: #278bff;
    text-shadow: 1px 1px #0d7eff; }
    .social-twitter:hover i {
      background-color: #0d7eff;
      text-shadow: 1px 1px #0d7eff; }

.social-facebook {
  background-color: #3B5999;
  text-shadow: 1px 1px #344e87; }
  .social-facebook i {
    border-right: 1px solid #344e87;
    text-shadow: 1px 1px #344e87; }
  .social-facebook:hover {
    background-color: #344e87;
    text-shadow: 1px 1px #2d4474; }
    .social-facebook:hover i {
      background-color: #2d4474;
      text-shadow: 1px 1px #2d4474; }

.social-pinterest {
  background-color: #CB2027;
  text-shadow: 1px 1px #b51d23; }
  .social-pinterest i {
    border-right: 1px solid #b51d23;
    text-shadow: 1px 1px #b51d23; }
  .social-pinterest:hover {
    background-color: #b51d23;
    text-shadow: 1px 1px #9f191f; }
    .social-pinterest:hover i {
      background-color: #9f191f;
      text-shadow: 1px 1px #9f191f; }

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

html {
  height: 100%; }

body {
  height: 100%;
  margin: 0;
  padding: 0;
  color: #000000;
  font-family: "Avenir Next", sans-serif;
  font-weight: 500;
  font-size: 10px; }

.register-toolbar {
  position: relative;
  top: 2px;
  padding: 15px;
  height: 50px;
  border-bottom: solid 1px #F2F4F5;
  font-size: 1.3em;
  background: #FFFFFF; }
  .register-toolbar .back {
    float: left; }
  .register-toolbar .have-account {
    float: right; }

h2 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 25px; }

#tryme .loading-spin {
  margin-bottom: 30px; }

.login {
  height: 100%;
  width: 100%;
  display: flex; }
  .login__title {
    font-size: 1.25rem;
    line-height: 1.25rem;
    margin-bottom: 1.75rem;
    text-align: left; }
  .login__left, .login__right {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50%;
    max-width: 50%; }
  .login__left .login-title {
    position: absolute;
    display: none;
    top: 1.875rem;
    left: 1.75rem;
    display: flex;
    align-items: center;
    color: #000000;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem; }
    @media (min-width: 1024px) {
      .login__left .login-title {
        display: flex; } }
    @media (min-width: 1600px) {
      .login__left .login-title {
        top: 3.875rem;
        left: 3.75rem; } }
    .login__left .login-title img {
      margin-right: 1.25rem; }
  .login__right {
    position: relative;
    align-items: flex-end;
    background-color: #F2F2F2; }
    .login__right img {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%; }
  .login__container {
    padding: 2rem;
    width: 490px;
    margin: 0 auto;
    text-align: left; }
  .login__divider {
    color: rgba(51, 51, 51, 0.5);
    display: flex;
    justify-content: center;
    margin: 0 0 1.25rem 0;
    flex: 1; }
    .login__divider span {
      font-size: 0.875rem; }
  .login__row {
    display: flex;
    margin: 0 -1rem; }
  .login__column {
    flex: 0 0 50%;
    padding: 0 1rem;
    max-width: 50%; }
  .login p {
    font-size: 0.875rem;
    margin-bottom: 1.25rem; }
  .login .errors {
    display: none;
    color: #FF0000; }
  .login .success {
    color: #8CC63E; }
  .login .intro {
    margin: 0 0 25px 0;
    font-size: 14px; }
  .login a.button-login {
    position: relative;
    display: block; }
  .login .button-login,
  .login .button {
    padding-left: 0; }
  .login .button.-facebook, .login .button.-twitter, .login .button.-google {
    background-repeat: no-repeat;
    background-size: 29px;
    background-position: left 27px center;
    padding-right: 0; }
  .login .button.-facebook {
    background-image: url("../images/icons/facebook.svg");
    padding-left: 56px; }
  .login .button.-twitter {
    background-image: url("../images/icons/twitter.svg");
    padding-left: 56px; }
  .login .button.-google {
    background-image: url("../images/icons/google.svg"); }
  .login input[type="text"],
  .login input[type="email"],
  .login input[type="password"],
  .login__social .button {
    width: 100%;
    height: 44px;
    color: #333333;
    padding: 1.25rem 1.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    background: white;
    border: 1px solid #ECECEC;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    appearance: none;
    transition: border-color 0.3s; }
    .login input[type="text"]:focus, .login input[type="text"]:hover,
    .login input[type="email"]:focus,
    .login input[type="email"]:hover,
    .login input[type="password"]:focus,
    .login input[type="password"]:hover,
    .login__social .button:focus,
    .login__social .button:hover {
      border-color: #000000;
      outline: none; }
    .lt-ie9 .login input[type="text"], .lt-ie9
    .login input[type="email"], .lt-ie9
    .login input[type="password"], .lt-ie9
    .login__social .button {
      line-height: 48px; }
  .login .button-login {
    height: 50px;
    background-color: #000000; }
  .login .button + .button,
  .login input[type="submit"] + .button,
  .login .button + input[type="submit"],
  .login input[type="submit"] + input[type="submit"] {
    margin-left: 0.5rem; }
  .login div.plan {
    text-align: right; }
  .login label {
    display: inline-block;
    font-size: 17px;
    margin: 5px 10px 0 0; }
  .login select {
    display: inline-block;
    font-size: 17px;
    padding: 2px 5px;
    width: 200px; }
  .login #price {
    font-size: 14px;
    padding: 5px 0 0 0; }
  .login .element {
    margin-bottom: 10px; }
    .login .element:last-child {
      margin: 0; }
    .login .element label {
      color: #979A9B;
      font-size: 0.875rem;
      margin-bottom: 0.5rem; }
  .login .element .messages {
    color: #ff0000; }
  .login .button-login {
    width: 100%; }

#register-form p.demo {
  text-align: center; }

.extra {
  display: block;
  text-align: center;
  margin-top: 8vh; }
  .extra p {
    font-size: 0.875rem;
    margin-bottom: 0.5rem; }

.links {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3.75rem; }
  .links a {
    font-size: 0.875rem;
    color: #979A9B;
    padding: 0 1rem;
    transition: color 0.3s; }
    .links a:hover {
      color: #1B22FA; }

input {
  font-family: inherit;
  color: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

:-moz-placeholder {
  color: #333333;
  font-weight: 500; }

::-moz-placeholder {
  color: #333333;
  opacity: 1;
  font-weight: 500; }

::-webkit-input-placeholder {
  color: #333333;
  font-weight: 500; }

:-ms-input-placeholder {
  color: #333333;
  font-weight: 500; }

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