/*!
    ______
   / ____/_  ______ ___  _____
  / /_  / / / / __ `/ / / / _  / __/ / /_/ / /_/ / /_/ /  __/
/_/    \__,_/\__, /\__,_/\___/
            /____/

Main Download Portal Stylesheet
Authors: Henry Harding, henry@fugue.co
         Michael Marcialis, michael@fugue.co
*/
/*********************************************************************************************************
**********************************************************************************************************
***
***  IMPORTS
***
**********************************************************************************************************
*********************************************************************************************************/
/*==========================================================================
  UTILITIES IMPORTS
==========================================================================*/
/*********************************************************************************************************
**********************************************************************************************************
***
***  SASS VARIABLES
***
**********************************************************************************************************
*********************************************************************************************************/
/*==========================================================================
  PIXEL TO REM/EM/UNITLESS CONVERSION FUNCTIONS
==========================================================================*/
/*==========================================================================
  WIDTH VARIABLES
==========================================================================*/
/*GRID WIDTHS---------------------------------*/
/*==========================================================================
  BREAKPOINT VARIABLES
==========================================================================*/
/*==========================================================================
  BASE TYPOGRAPHY VARIABLES
==========================================================================*/
/*==========================================================================
  MODULAR SCALE VARIABLES
==========================================================================*/
/*==========================================================================
  FONT STACK VARIABLES
==========================================================================*/
/*==========================================================================
  BORDER RADIUS VARIABLES
==========================================================================*/
/*==========================================================================
  DISPLAY RATIO VARIABLES
==========================================================================*/
/*==========================================================================
  COLOR VARIABLES
==========================================================================*/
/*BRAND COLORS---------------------------------*/
/*Blue*/
/*Green*/
/*Orange*/
/*Purple*/
/*Red*/
/*TEXT COLORS---------------------------------*/
/*LINK COLORS---------------------------------*/
/*BACKGROUND COLORS---------------------------------*/
/*BORDER COLORS---------------------------------*/
/*Shade*/
/*Tint*/
/*SOCIAL COLORS---------------------------------*/
/*********************************************************************************************************
**********************************************************************************************************
***
***  SASS MIXINS
***
**********************************************************************************************************
*********************************************************************************************************/
/*==========================================================================
  MEDIA QUERY MIXINS
==========================================================================*/
/*Example: @include at-break(em-width or breakpoint-variable) {...}*/
/*Example: @include under-break(em-width or breakpoint-variable) {...}*/
/*Example: @include between-breaks(em-width or breakpoint-variable, em-width or breakpoint-variable) {...}*/
/*==========================================================================
  BROWSER-SPECIFIC MIXINS
==========================================================================*/
/*==========================================================================
  HIDDEN MIXINS
==========================================================================*/
/*==========================================================================
  FLOAT MIXINS
==========================================================================*/
/*==========================================================================
  FLEX GRID MIXINS
==========================================================================*/
/*ADVANCED COLUMN FUNCTIONS---------------------------------*/
/*Calculate Target Width*/
/*Calculate Reference Width*/
/*Calculate Column Width (Percentage)*/
/*DEFINE ROW---------------------------------*/
/*DEFINE COLUMN---------------------------------*/
/*==========================================================================
  ICON MIXINS
==========================================================================*/
/*==========================================================================
  SCROLLBARS
==========================================================================*/
/*==========================================================================
  INCREMENTAL ANIMATION DELAY
==========================================================================*/
/*==========================================================================
  FRAMEWORK IMPORTS
==========================================================================*/
/*********************************************************************************************************
**********************************************************************************************************
***
***  RESET (https://github.com/jaydenseric/Fix)
***
**********************************************************************************************************
*********************************************************************************************************/
html {
  -moz-osx-font-smoothing: grayscale;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; }

body {
  font-family: sans-serif;
  line-height: 1;
  margin: 0; }

iframe {
  border: 0; }

main {
  display: block; }

ul,
ol {
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0; }

li {
  display: block; }

dl {
  margin-bottom: 0;
  margin-top: 0; }

dd {
  margin-left: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: normal;
  margin-bottom: 0;
  margin-top: 0; }

blockquote {
  margin: 0;
  padding: 0; }

p {
  margin-top: 0;
  margin-bottom: 0; }

strong {
  font-weight: bold; }

figure {
  margin: 0; }

img {
  border: 0;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic; }

a {
  color: inherit;
  text-decoration: none; }

button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  overflow: visible;
  padding: 0;
  text-align: inherit;
  text-transform: inherit;
  -webkit-font-smoothing: inherit; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

input,
textarea,
select {
  background: transparent none;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: inherit; }

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=tel],
input[type=search],
textarea {
  appearance: none; }

input {
  margin: 0; }
  input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
    display: none; }

pre,
code {
  font-family: monospace, monospace;
  font-size: 1em; }

pre {
  margin: 0; }

address {
  font-style: normal; }

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

thead th,
thead td {
  vertical-align: bottom; }

tbody th,
tbody td {
  vertical-align: top; }

th,
td {
  padding: 0; }

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

small {
  font-size: 1em; }

abbr {
  text-decoration: none; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  SASS PLACEHOLDERS
***
**********************************************************************************************************
*********************************************************************************************************/
/*==========================================================================
  CAPS
==========================================================================*/
.list-compare__features h4, .button, .header-global__branding p, a.header-global__link, .header-minimal p, .footer-global__nav li,
.footer-global__legal small, .footer-minimal__nav li,
.footer-minimal__legal small, .form-user__strength, .text-longform h5, .browser__list li {
  font-size: 0.75rem;
  letter-spacing: 0.08333em;
  text-transform: uppercase; }

/*==========================================================================
  HEADINGS
==========================================================================*/
.header-page h1,
.interstitial__header h1,
.header-basic h1,
.browser__header h1,
.panel__title h2,
.modal__title h2,
.text-longform h1,
.supplement__header h2,
.list-platform__os h3,
.list-compare__header h3,
.panel__alert h6,
.list-platform__os h4,
.list-compare__features p,
.actions-basic h2,
.form-user__alert h6,
.text-upsell h2,
.modal__quarantine h3,
.notification__content h6,
.list-compare__features h4 {
  text-rendering: optimizeLegibility; }

.header-page h1,
.interstitial__header h1,
.header-basic h1,
.browser__header h1,
.panel__title h2,
.modal__title h2,
.text-longform h1 {
  line-height: 1.2; }

.header-page h1 {
  font-family: "GT Sectra Fine", Georgia, serif;
  font-size: 1.875rem; }
  @media only screen and (min-width: 44.3125em) {
    .header-page h1 {
      font-size: 2.625rem; } }
  @media only screen and (min-width: 58.1875em) {
    .header-page h1 {
      font-size: 3.125rem; } }

.interstitial__header h1, .header-basic h1, .browser__header h1, .panel__title h2, .modal__title h2, .text-longform h1 {
  font-size: 1.5rem;
  font-weight: 300; }
  @media only screen and (min-width: 44.3125em) {
    .interstitial__header h1, .header-basic h1, .browser__header h1, .panel__title h2, .modal__title h2, .text-longform h1 {
      font-size: 1.875rem; } }

.supplement__header h2, .list-platform__os h3, .list-compare__header h3 {
  font-size: 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .supplement__header h2, .list-platform__os h3, .list-compare__header h3 {
      font-size: 1.5rem; } }

.panel__alert h6, .list-platform__os h4, .list-compare__features p, .actions-basic h2, .form-user__alert h6, .text-upsell h2, .modal__quarantine h3, .notification__content h6 {
  font-size: 0.875rem;
  font-weight: bold; }

/*==========================================================================
  SUPERSCRIPT
==========================================================================*/
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  top: -0.5em;
  vertical-align: baseline; }

/*==========================================================================
  CODE
==========================================================================*/
.text-longform *:not(pre) > code {
  background: rgba(108, 93, 144, 0.1);
  border-radius: 0.1875rem;
  color: #6c5d90;
  font-family: "Input Mono", "Courier New", monospace;
  padding: 0.0625rem; }
  a .text-longform *:not(pre) > code, .text-longform a *:not(pre) > code {
    background: rgba(33, 150, 179, 0.1);
    color: #2196b3;
    transition: all 0.3s ease; }
  a:hover .text-longform *:not(pre) > code, .text-longform a:hover *:not(pre) > code,
  a:focus .text-longform *:not(pre) > code, .text-longform
  a:focus *:not(pre) > code {
    background: rgba(90, 198, 224, 0.1);
    color: #5ac6e0; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  BASE STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
*,
*::before,
*::after {
  box-sizing: border-box; }

*::selection {
  background-color: #a297bc;
  color: #333;
  text-shadow: none; }

body {
  background: #f4f4f4;
  color: #333;
  font-family: "Maison Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5; }

a,
a::before,
a::after,
button,
input {
  transition: all 0.3s ease; }

a,
button {
  cursor: pointer; }

a {
  color: #2196b3;
  overflow-wrap: break-word;
  word-wrap: break-word; }
  a:hover, a:focus {
    color: #5ac6e0; }

input::-webkit-input-placeholder {
  color: #999;
  font-style: italic; }

input::-moz-placeholder {
  color: #999;
  font-style: italic; }

input:-ms-input-placeholder {
  color: #999;
  font-style: italic; }

input:-moz-placeholder {
  color: #999;
  font-style: italic; }

pre,
code,
kbd {
  font-family: "Input Mono", "Courier New", monospace; }

hr {
  background-color: #ddd;
  border: none;
  color: #ddd;
  height: 0.0625rem;
  margin-bottom: 3.75rem !important;
  margin-top: 3.75rem !important; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  TYPOGRAPHY STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
/*==========================================================================
  GT SECTRA FINE
==========================================================================*/
@font-face {
  font-family: "GT Sectra Fine";
  src: url(/da7298e8b820dffc281aa81dbeaa7460.woff);
  font-weight: 400;
  font-style: normal; }

/*==========================================================================
  MAISON NEUE
==========================================================================*/
@font-face {
  font-family: "Maison Neue";
  src: url(/9413b2a196b80cc9580657fb444cd5ea.woff);
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: "Maison Neue";
  src: url(/92404b72b28c89567d0f00b9345e6f0a.woff);
  font-weight: 300;
  font-style: italic; }

@font-face {
  font-family: "Maison Neue";
  src: url(/6147b8b5f6c1f161df2cd3d6d4347bcd.woff);
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: "Maison Neue";
  src: url(/26d39e7825de5828e130b76a9fb3020d.woff);
  font-weight: 400;
  font-style: italic; }

@font-face {
  font-family: "Maison Neue";
  src: url(/8a91c2e7a982956e13af9e4d5b2edfbf.woff);
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: "Maison Neue";
  src: url(/902b1fbb99b9707ecdc908a40b0cfdf6.woff);
  font-weight: 700;
  font-style: italic; }

/*==========================================================================
  INPUT MONO
==========================================================================*/
@font-face {
  font-family: "Input Mono";
  src: url(/ad628439ddcf3bd926d90b3a000758e9.ttf);
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: "Input Mono";
  src: url(/57fb8f3fb245a68155b33edc9338737b.ttf);
  font-weight: 400;
  font-style: italic; }

@font-face {
  font-family: "Input Mono";
  src: url(/f64af56cfd8de0953e2d50c125c491c5.ttf);
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: "Input Mono";
  src: url(/0c067bb85b2f10258956229864034856.ttf);
  font-weight: 700;
  font-style: italic; }

/*==========================================================================
  FUGUE ICONS
==========================================================================*/
@font-face {
  font-family: 'fugue';
  src: url(/8850edbe7b6cb214c238a3171a1fdff1.eot);
  src: url(/8850edbe7b6cb214c238a3171a1fdff1.eot#iefix) format("embedded-opentype"), url(/805b471ee8c093a2c30c6d863ba260e9.ttf) format("truetype"), url(/cfb143a1bb256e8449d4786df6c57d22.woff) format("woff"), url(/654ce832c59692a80c61bf6fc59fb174.svg#fugue) format("svg");
  font-weight: 400;
  font-style: normal; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  ICONOGRAPHY STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
/*==========================================================================
  FUGUE ICONS
==========================================================================*/
.icon {
  font-family: "fugue";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  text-transform: none; }

.icon-text {
  position: absolute;
  left: -999rem;
  top: -999rem; }

.icon--logo:before {
  content: "\E900"; }

.icon--menu:before {
  content: "\E901"; }

.icon--close:before {
  content: "\E902"; }

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

.icon--check:before {
  content: "\E904"; }

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

.icon--information:before {
  content: "\E906"; }

.icon--register:before {
  content: "\E907"; }

.icon--mail:before {
  content: "\E908"; }

.icon--key:before {
  content: "\E909"; }

.icon--home:before {
  content: "\E90A"; }

.icon--external:before {
  content: "\E90B"; }

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

.icon--gear:before {
  content: "\E90D"; }

.icon--exit:before {
  content: "\E90E"; }

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

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

.icon--save:before {
  content: "\E911"; }

.icon--select:before {
  content: "\E912"; }

.icon--delete:before {
  content: "\E913"; }

.icon--reset:before {
  content: "\E914"; }

.icon--linux:before {
  content: "\E915"; }

.icon--osx:before {
  content: "\E916"; }

.icon--windows:before {
  content: "\E917"; }

.icon--chrome:before {
  content: "\E918"; }

.icon--firefox:before {
  content: "\E919"; }

.icon--safari:before {
  content: "\E91A"; }

.icon--opera:before {
  content: "\E91B"; }

.icon--edge:before {
  content: "\E91C"; }

.icon--internet-explorer:before {
  content: "\E91D"; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  ANIMATIONS STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.animation:empty {
  display: none; }

/*==========================================================================
    SPIN
==========================================================================*/
@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

/*==========================================================================
    SLIDE UP/DOWN
==========================================================================*/
@keyframes slide-up-down {
  0% {
    opacity: 0;
    transform: translateY(100%); }
  5% {
    opacity: 1;
    transform: translateY(0); }
  95% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0;
    transform: translateY(100%); } }

/*==========================================================================
  LAYOUT IMPORTS
==========================================================================*/
/*********************************************************************************************************
**********************************************************************************************************
***
***  APP STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
@media only screen and (min-width: 58.1875em) {
  .app {
    display: flex; } }

/*==========================================================================
  HEADER
==========================================================================*/
@media only screen and (min-width: 58.1875em) {
  .app__header {
    flex: 0 0 13.9375rem;
    width: 13.9375rem; } }
  @media only screen and (min-width: 58.1875em) and (-ms-high-contrast: none), only screen and (min-width: 58.1875em) and (-ms-high-contrast: active) {
    .app__header {
      flex-basis: auto; } }

/*==========================================================================
  MAIN
==========================================================================*/
.app__main {
  padding: 2.5rem 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .app__main {
      padding-left: 2.5rem;
      padding-right: 2.5rem; } }
  @media only screen and (min-width: 58.1875em) {
    .app__main {
      flex: 1 1 auto;
      margin: 0 auto;
      max-width: 72.3125rem;
      padding-bottom: 3.75rem;
      padding-top: 3.75rem; } }
  @media only screen and (min-width: 58.1875em) and (-ms-high-contrast: none), only screen and (min-width: 58.1875em) and (-ms-high-contrast: active) {
    .app__main {
      overflow: hidden; } }

/*********************************************************************************************************
**********************************************************************************************************
***
***  CONTENT STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
@media only screen and (min-width: 72.5em) {
  .content {
    display: flex;
    justify-content: space-between; } }

@media only screen and (max-width: 72.4375em) {
  .content > * + * {
    margin-top: 2.5rem; } }

.content__primary,
.content__secondary {
  margin-bottom: -2.5rem;
  overflow: hidden; }
  .content__primary > *,
  .content__secondary > * {
    margin-bottom: 2.5rem; }

@media only screen and (min-width: 72.5em) {
  .content__primary {
    flex: 0 0 68.88889%;
    width: 68.88889%; } }
  @media only screen and (min-width: 72.5em) and (-ms-high-contrast: none), only screen and (min-width: 72.5em) and (-ms-high-contrast: active) {
    .content__primary {
      flex-basis: auto; } }

@media only screen and (min-width: 44.3125em) and (max-width: 72.4375em) {
  .content__secondary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; } }

@media only screen and (min-width: 72.5em) {
  .content__secondary {
    flex: 0 0 27.40741%;
    width: 27.40741%; } }
  @media only screen and (min-width: 72.5em) and (-ms-high-contrast: none), only screen and (min-width: 72.5em) and (-ms-high-contrast: active) {
    .content__secondary {
      flex-basis: auto; } }

@media only screen and (min-width: 44.3125em) and (max-width: 72.4375em) {
  .content__secondary > * {
    flex: 0 0 47.31183%;
    width: 47.31183%; } }
  @media only screen and (min-width: 44.3125em) and (max-width: 72.4375em) and (-ms-high-contrast: none), only screen and (min-width: 44.3125em) and (max-width: 72.4375em) and (-ms-high-contrast: active) {
    .content__secondary > * {
      flex-basis: auto; } }

/*********************************************************************************************************
**********************************************************************************************************
***
***  ENTRY STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.entry {
  background: #252525;
  min-height: 100vh;
  padding: 1.25rem 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .entry {
      padding: 2.5rem 2.5rem;
      align-items: center;
      display: flex;
      flex-wrap: nowrap;
      justify-content: center; } }

.entry__inner {
  max-width: 53.3125rem; }
  @media only screen and (min-width: 44.3125em) {
    .entry__inner {
      flex: 0 0 85.71429%;
      width: 85.71429%; } }
  @media only screen and (min-width: 44.3125em) and (-ms-high-contrast: none), only screen and (min-width: 44.3125em) and (-ms-high-contrast: active) {
    .entry__inner {
      flex-basis: auto; } }
  @media only screen and (min-width: 58.1875em) {
    .entry__inner {
      flex: 0 0 88.88889%;
      width: 88.88889%; } }
  @media only screen and (min-width: 58.1875em) and (-ms-high-contrast: none), only screen and (min-width: 58.1875em) and (-ms-high-contrast: active) {
    .entry__inner {
      flex-basis: auto; } }
  @media only screen and (min-width: 72.5em) {
    .entry__inner {
      flex: 0 0 66.66667%;
      width: 66.66667%; } }
  @media only screen and (min-width: 72.5em) and (-ms-high-contrast: none), only screen and (min-width: 72.5em) and (-ms-high-contrast: active) {
    .entry__inner {
      flex-basis: auto; } }
  .entry__inner > * + * {
    margin-top: 1.25rem; }
    @media only screen and (min-width: 44.3125em) {
      .entry__inner > * + * {
        margin-top: 30px; } }

/*********************************************************************************************************
**********************************************************************************************************
***
***  AUTHENTICATE STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.authenticate {
  background: #fff;
  border-radius: 0.3125rem;
  box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.5);
  overflow: hidden; }
  @media only screen and (min-width: 44.3125em) {
    .authenticate {
      display: flex;
      justify-content: space-between; } }

.authenticate__primary,
.authenticate__secondary {
  padding: 1.25rem 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .authenticate__primary,
    .authenticate__secondary {
      padding: 2.5rem 2.5rem;
      flex: 0 0 50%;
      width: 50%; } }
  @media only screen and (min-width: 44.3125em) and (-ms-high-contrast: none), only screen and (min-width: 44.3125em) and (-ms-high-contrast: active) {
    .authenticate__primary,
    .authenticate__secondary {
      flex-basis: auto; } }
  @media only screen and (min-width: 58.1875em) {
    .authenticate__primary,
    .authenticate__secondary {
      flex: 0 0 50%;
      width: 50%; } }
  @media only screen and (min-width: 58.1875em) and (-ms-high-contrast: none), only screen and (min-width: 58.1875em) and (-ms-high-contrast: active) {
    .authenticate__primary,
    .authenticate__secondary {
      flex-basis: auto; } }
  .authenticate__primary > * + *,
  .authenticate__secondary > * + * {
    margin-top: 1.25rem; }
    @media only screen and (min-width: 44.3125em) {
      .authenticate__primary > * + *,
      .authenticate__secondary > * + * {
        margin-top: 1.875rem; } }

@media only screen and (min-width: 44.3125em) {
  .authenticate__primary {
    text-align: center;
    align-items: stretch;
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; } }

@media only screen and (min-width: 44.3125em) {
  .authenticate__primary > * {
    flex: 0 0 100%;
    width: 100%; } }
  @media only screen and (min-width: 44.3125em) and (-ms-high-contrast: none), only screen and (min-width: 44.3125em) and (-ms-high-contrast: active) {
    .authenticate__primary > * {
      flex-basis: auto; } }

@media only screen and (min-width: 58.1875em) {
  .authenticate__primary > * {
    flex: 0 0 100%;
    width: 100%; } }
  @media only screen and (min-width: 58.1875em) and (-ms-high-contrast: none), only screen and (min-width: 58.1875em) and (-ms-high-contrast: active) {
    .authenticate__primary > * {
      flex-basis: auto; } }

.authenticate__primary > * + * {
  padding-top: 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .authenticate__primary > * + * {
      padding-top: 1.875rem; } }

/*==========================================================================
  AUTHENTICATE MODIFIERS
==========================================================================*/
/*USER---------------------------------*/
/*Existing*/
.authenticate--user-existing .authenticate__primary {
  background: #f5f4f8;
  color: #6c5d90; }
  @media only screen and (max-width: 44.25em) {
    .authenticate--user-existing .authenticate__primary {
      border-bottom: 0.0625rem solid #d9d5e4; } }
  @media only screen and (min-width: 44.3125em) {
    .authenticate--user-existing .authenticate__primary {
      border-right: 0.0625rem solid #d9d5e4; } }
  .authenticate--user-existing .authenticate__primary > * + * {
    border-top: 0.0625rem solid #d9d5e4; }

/*New*/
.authenticate--user-new .authenticate__primary {
  background: #e9fbf9;
  color: #1b9789; }
  @media only screen and (max-width: 44.25em) {
    .authenticate--user-new .authenticate__primary {
      border-bottom: 0.0625rem solid #a8efe7; } }
  @media only screen and (min-width: 44.3125em) {
    .authenticate--user-new .authenticate__primary {
      border-right: 0.0625rem solid #a8efe7; } }
  .authenticate--user-new .authenticate__primary > * + * {
    border-top: 0.0625rem solid #a8efe7; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  INTERSTITIAL STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.interstitial {
  background: #fff;
  border-radius: 0.3125rem;
  box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.5);
  overflow: hidden; }
  .interstitial > * {
    padding: 1.25rem 1.25rem; }
    @media only screen and (min-width: 44.3125em) {
      .interstitial > * {
        padding: 2.5rem 2.5rem; } }

.interstitial__content {
  padding-top: 0; }

.interstitial__actions {
  background: #f4f4f4;
  border-top: 0.0625rem solid #ddd; }
  @media only screen and (min-width: 44.3125em) {
    .interstitial__actions ul {
      display: flex;
      justify-content: space-between; } }
  @media only screen and (max-width: 44.25em) {
    .interstitial__actions li + li {
      margin-top: 1.25rem; } }
  @media only screen and (max-width: 44.25em) {
    .interstitial__actions .button {
      display: block;
      width: 100%; } }

/*==========================================================================
  COMPONENT IMPORTS
==========================================================================*/
/*********************************************************************************************************
**********************************************************************************************************
***
***  BUTTON COMPONENT STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.button {
  background: #6c5d90;
  border-radius: 0.3125rem;
  color: #fff !important;
  display: inline-block;
  font-weight: bold;
  overflow: hidden;
  padding: 1em 1.66667em 0.83333em;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 0.0625rem 0 rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease, visibility 1ms linear;
  vertical-align: bottom;
  white-space: nowrap; }
  @media only screen and (min-width: 44.3125em) {
    .button {
      padding: 1.83333em 1.66667em 1.66667em; } }
  .button:hover, .button:focus {
    color: #fff !important;
    background: #78699e; }
  .button:focus {
    outline: none; }
  .button:active {
    background: #605381;
    transform: scale(0.95); }
  .button[disabled] {
    cursor: not-allowed; }
  .button .icon {
    margin-right: 0.25em; }

/*==========================================================================
  BUTTON MODIFIERS
==========================================================================*/
/*COLORS---------------------------------*/
/*Green*/
.button--color-green {
  background: #1b9789; }
  .button--color-green:hover, .button--color-green:focus {
    background: #1fad9d; }
  .button--color-green:active {
    background: #178175; }

/*Red*/
.button--color-red {
  background: #d34836; }
  .button--color-red:hover, .button--color-red:focus {
    background: #d85b4b; }
  .button--color-red:active {
    background: #c43d2b; }

/*HOLLOW---------------------------------*/
/*Default*/
.button--hollow, .button--hollow-blue, .button--hollow-green, .button--hollow-purple {
  background: transparent !important;
  border: 0.0625rem solid #333;
  color: #333 !important;
  padding: 0.91667em 1.58333em 0.75em;
  text-shadow: none; }
  @media only screen and (min-width: 44.3125em) {
    .button--hollow, .button--hollow-blue, .button--hollow-green, .button--hollow-purple {
      padding: 1.75em 1.58333em 1.58333em; } }
  .button--hollow:hover, .button--hollow-blue:hover, .button--hollow-green:hover, .button--hollow-purple:hover, .button--hollow:focus, .button--hollow-blue:focus, .button--hollow-green:focus, .button--hollow-purple:focus {
    border-color: #78699e;
    color: #78699e !important; }
  .button--hollow:active, .button--hollow-blue:active, .button--hollow-green:active, .button--hollow-purple:active {
    border-color: #605381;
    color: #605381 !important; }

/*Blue*/
.button--hollow-blue {
  border-color: #1f89cb;
  color: #1f89cb !important; }
  .button--hollow-blue:hover, .button--hollow-blue:focus {
    border-color: #2697de;
    color: #2697de !important; }
  .button--hollow-blue:active {
    border-color: #1c7ab5;
    color: #1c7ab5 !important; }

/*Green*/
.button--hollow-green {
  border-color: #1b9789;
  color: #1b9789 !important; }
  .button--hollow-green:hover, .button--hollow-green:focus {
    border-color: #1fad9d;
    color: #1fad9d !important; }
  .button--hollow-green:active {
    border-color: #178175;
    color: #178175 !important; }

/*Purple*/
.button--hollow-purple {
  border-color: #6c5d90;
  color: #6c5d90 !important; }

/*BLEED---------------------------------*/
/*Full*/
.button--bleed-full {
  display: block;
  width: 100%; }

/*FONT---------------------------------*/
/*Mono*/
.button--font-mono {
  font-family: "Input Mono", "Courier New", monospace;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none; }

/*LOADING---------------------------------*/
.button--loading {
  cursor: progress;
  position: relative;
  visibility: hidden; }
  .button--loading::before, .button--loading::after {
    content: "";
    display: block;
    position: absolute;
    visibility: visible; }
  .button--loading::before {
    background: inherit;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0; }
  .button--loading::after {
    animation: spin 0.5s linear infinite;
    border: 0.125rem solid rgba(0, 0, 0, 0.2);
    border-left-color: #fff;
    border-radius: 50%;
    height: 1.5em;
    left: 50%;
    margin: -0.75em 0 0 -0.75em;
    top: 50%;
    width: 1.5em;
    z-index: 20; }
  .button--loading.button--hollow::before, .button--loading.button--hollow-blue::before, .button--loading.button--hollow-green::before, .button--loading.button--hollow-purple::before {
    border: inherit;
    border-radius: inherit; }
  .button--loading.button--hollow::after, .button--loading.button--hollow-blue::after, .button--loading.button--hollow-green::after, .button--loading.button--hollow-purple::after {
    border-left-color: inherit; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  FOOTNOTE COMPONENT
***
**********************************************************************************************************
*********************************************************************************************************/
.footnote {
  color: #999;
  font-size: 0.857142857142857em;
  font-weight: normal; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  TOKEN STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.token {
  background: #6c5d90;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  font-size: 0.75em;
  padding: 0.3em 0 0.2em;
  text-align: center;
  text-shadow: 0 0.0625rem 0 rgba(0, 0, 0, 0.2);
  width: 2em; }

.token__text {
  position: absolute;
  left: -999rem;
  top: -999rem; }

/*==========================================================================
  TOKEN MODIFIERS
==========================================================================*/
/*COLORS---------------------------------*/
/*Green*/
.token--color-green {
  background: #1b9789; }

/*Red*/
.token--color-red {
  background: #d34836; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  SPINNER COMPONENT
***
**********************************************************************************************************
*********************************************************************************************************/
.spinner-mc-loadington {
  display: inline-block;
  position: relative;
  text-indent: -999rem; }
  .spinner-mc-loadington, .spinner-mc-loadington::after {
    height: 2em;
    width: 2em; }
  .spinner-mc-loadington::after {
    animation: spin 0.5s linear infinite;
    border: 0.1875rem solid rgba(0, 0, 0, 0.2);
    border-left-color: #6c5d90;
    border-radius: 50%;
    content: "";
    display: block;
    left: 50%;
    margin: -1em 0 0 -1em;
    position: absolute;
    top: 50%;
    z-index: 20; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  FLAG STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.flag {
  background: #1f89cb;
  border-radius: 0.1875rem;
  color: #fff;
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.6;
  margin-left: 0.25em;
  padding: 0 0.3125rem;
  text-shadow: 0 0.0625rem 0 rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  transition: all 0.15s ease;
  vertical-align: middle; }

/*==========================================================================
  MODULE IMPORTS
==========================================================================*/
/*********************************************************************************************************
**********************************************************************************************************
***
***  HEADER GLOBAL STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.header-global {
  background: #252525;
  position: relative; }
  @media only screen and (min-width: 58.1875em) {
    .header-global {
      bottom: 0;
      display: flex;
      flex-direction: column;
      left: 0;
      position: fixed;
      top: 0;
      width: inherit; } }

/*==========================================================================
  BRANDING
==========================================================================*/
.header-global__branding {
  padding: 0.9375rem 5rem 0.9375rem 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .header-global__branding {
      padding-left: 2.5rem; } }
  @media only screen and (min-width: 58.1875em) {
    .header-global__branding {
      flex: 0 0 auto;
      padding: 4.0625rem 2.5rem;
      text-align: center; } }
  .header-global__branding a {
    display: inline-block;
    transition: none; }
  .header-global__branding h1,
  .header-global__branding p {
    line-height: 1; }
  .header-global__branding h1 {
    color: #fff;
    font-size: 1.875rem; }
    @media only screen and (min-width: 58.1875em) {
      .header-global__branding h1 {
        font-size: 3rem; } }
  .header-global__branding p {
    color: #666;
    font-weight: bold;
    margin-top: 0.75rem; }
    @media only screen and (max-width: 58.125em) {
      .header-global__branding p {
        position: absolute;
        left: -999rem;
        top: -999rem; } }

/*==========================================================================
  MENU BUTTON
==========================================================================*/
.header-global__menu {
  border-left: 0.0625rem solid #333;
  color: #fff;
  line-height: 3.75;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 3.75rem; }
  @media only screen and (min-width: 58.1875em) {
    .header-global__menu {
      display: none; } }
  .header-global__menu:hover, .header-global__menu:focus {
    background: #333; }

/*==========================================================================
  NAVIGATION
==========================================================================*/
@media only screen and (max-width: 58.125em) {
  .header-global__nav {
    opacity: 0;
    transform: scale(1.2);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
    left: -999rem;
    top: -999rem; } }

@media only screen and (min-width: 58.1875em) {
  .header-global__nav {
    border-top: 0.0625rem solid #333;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /*Internet Explorer*/
    scrollbar-face-color: rgba(255, 255, 255, 0.1);
    scrollbar-track-color: #333;
    /*Webkit*/ }
    .header-global__nav::-webkit-scrollbar {
      height: 0.5625rem;
      width: 0.5625rem; }
    .header-global__nav::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.1); }
    .header-global__nav::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.3); }
    .header-global__nav::-webkit-scrollbar-thumb:active {
      background: #78699e; }
    .header-global__nav::-webkit-scrollbar-track, .header-global__nav::-webkit-scrollbar-corner {
      background: #333; } }

@media only screen and (max-width: 58.125em) {
  .header-global__nav ul {
    border-top: 0.0625rem solid #333;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%; } }

body.nav-active {
  overflow: hidden; }
  .touchevents body.nav-active {
    position: fixed;
    width: 100%; }
  @media only screen and (max-width: 58.125em) {
    body.nav-active .header-global__nav {
      background: #252525;
      bottom: 0;
      left: 0;
      opacity: 1;
      position: fixed;
      right: 0;
      top: 0;
      transform: scale(1);
      z-index: 100; } }

a.header-global__link {
  border-bottom: 0.0625rem solid #333;
  color: #fff;
  display: block;
  font-weight: bold;
  padding: 1.875rem 1.25rem;
  text-align: center; }
  @media only screen and (min-width: 44.3125em) {
    a.header-global__link {
      padding-left: 2.5rem;
      padding-right: 2.5rem; } }
  @media only screen and (min-width: 58.1875em) {
    a.header-global__link {
      text-align: left; } }
  @media only screen and (max-height: 34.375rem) {
    a.header-global__link {
      padding-bottom: 1.25rem;
      padding-top: 1.25rem; } }
  a.header-global__link:hover, a.header-global__link:focus {
    color: #fff;
    background: #333;
    border-bottom-color: #333; }
  a.header-global__link .icon {
    margin-right: 0.3125rem; }

a.header-global__link--current {
  background: #1a1a1a !important;
  cursor: default;
  position: relative; }
  a.header-global__link--current::before {
    background: #6c5d90;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    width: 0.1875rem; }

/*CLOSE BUTTON---------------------------------*/
.header-global__close {
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.625rem rgba(108, 93, 144, 0);
  color: #fff;
  display: block;
  line-height: 2.5;
  position: absolute;
  right: 1.25rem;
  text-align: center;
  top: 1.25rem;
  width: 2.5rem; }
  @media only screen and (min-width: 44.3125em) {
    .header-global__close {
      right: 2.5rem;
      top: 2.5rem; } }
  @media only screen and (min-width: 58.1875em) {
    .header-global__close {
      display: none; } }
  .header-global__close:hover, .header-global__close:focus {
    box-shadow: inset 0 0 0 0.125rem #6c5d90;
    color: #6c5d90; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  HEADER PAGE STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.header-page {
  border-bottom: 0.0625rem solid #ddd;
  margin-bottom: 2.5rem;
  padding-bottom: 1.875rem; }

.header-page__release > * {
  margin-right: 0.625rem; }
  .header-page__release > *:last-child {
    margin-right: 0; }

.header-page__release dt,
.header-page__release dd {
  display: inline-block;
  font-size: 0.875rem; }

.header-page__release dt {
  font-weight: bold; }

.header-page__breadcrumbs li {
  display: inline-block;
  font-size: 0.875rem; }

.header-page__breadcrumbs li + li::before {
  content: "\BB";
  margin: 0 0.625rem; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  HEADER MINIMAL STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.header-minimal {
  padding: 0 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .header-minimal {
      padding: 0 2.5rem;
      text-align: center; } }
  .header-minimal a {
    display: inline-block;
    transition: none; }
  .header-minimal h1,
  .header-minimal p {
    line-height: 1; }
  .header-minimal h1 {
    color: #fff;
    font-size: 1.875rem; }
    @media only screen and (min-width: 44.3125em) {
      .header-minimal h1 {
        font-size: 3rem; } }
  .header-minimal p {
    color: #666;
    font-weight: bold;
    margin-top: 0.75rem; }
    @media only screen and (max-width: 44.25em) {
      .header-minimal p {
        position: absolute;
        left: -999rem;
        top: -999rem; } }

/*********************************************************************************************************
**********************************************************************************************************
***
***  HEADER BASIC STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
/*********************************************************************************************************
**********************************************************************************************************
***
***  FOOTER GLOBAL STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.footer-global {
  border-top: 0.0625rem solid #ddd;
  margin-top: 2.5rem;
  padding-top: 2.5rem; }
  @media only screen and (min-width: 72.5em) {
    .footer-global {
      display: flex;
      justify-content: space-between; } }
  @media only screen and (max-width: 72.4375em) {
    .footer-global > * + * {
      margin-top: 1.25rem; } }

@media only screen and (min-width: 72.5em) {
  .footer-global__legal {
    text-align: right; } }

.footer-global__nav li,
.footer-global__nav li a,
.footer-global__legal small,
.footer-global__legal small a {
  color: #999; }

.footer-global__nav li,
.footer-global__legal small {
  display: inline-block;
  margin-right: 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .footer-global__nav li,
    .footer-global__legal small {
      margin-right: 1.875rem; } }
  .footer-global__nav li:last-child,
  .footer-global__legal small:last-child {
    margin-right: 0; }

.footer-global__nav li a:hover, .footer-global__nav li a:focus,
.footer-global__legal small a:hover,
.footer-global__legal small a:focus {
  color: #5ac6e0; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  FOOTER MINIMAL STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.footer-minimal {
  padding: 0 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .footer-minimal {
      padding: 0 2.5rem;
      display: flex;
      justify-content: space-between; } }
  @media only screen and (max-width: 44.25em) {
    .footer-minimal > * + * {
      margin-top: 0.625rem; } }

@media only screen and (min-width: 44.3125em) {
  .footer-minimal__legal {
    text-align: right; } }

.footer-minimal__nav li,
.footer-minimal__nav li a,
.footer-minimal__legal small,
.footer-minimal__legal small a {
  color: #666; }

.footer-minimal__nav li,
.footer-minimal__legal small {
  display: inline-block;
  margin-right: 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .footer-minimal__nav li,
    .footer-minimal__legal small {
      margin-right: 1.875rem; } }
  .footer-minimal__nav li:last-child,
  .footer-minimal__legal small:last-child {
    margin-right: 0; }

.footer-minimal__nav li a:hover, .footer-minimal__nav li a:focus,
.footer-minimal__legal small a:hover,
.footer-minimal__legal small a:focus {
  color: #fff; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  PANEL STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.panel, .modal__inner {
  background: #fff;
  border: 0.0625rem solid #ddd;
  border-radius: 0.3125rem;
  box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.05);
  overflow: hidden; }

.panel__header, .modal__header,
.panel__alert {
  border-bottom: 0.0625rem solid #ddd;
  padding: 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .panel__header, .modal__header,
    .panel__alert {
      padding: 1.875rem 2.5rem; } }

.panel__header > * + *, .modal__header > * + * {
  margin-top: 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .panel__header > * + *, .modal__header > * + * {
      margin-top: 1.875rem; } }

@media only screen and (max-width: 44.25em) {
  .panel__summary > * + *, .modal__summary > * + * {
    margin-top: 1.25rem; } }

@media only screen and (min-width: 44.3125em) {
  .panel__summary, .modal__summary {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between; } }

.panel__title > * + *, .modal__title > * + * {
  margin-top: 0.625rem; }

.panel__subheader, .modal__subheader {
  font-size: 0.875rem;
  font-weight: bold; }

.panel__actions, .modal__actions {
  margin-right: -1.25rem; }
  @media only screen and (max-width: 44.25em) {
    .panel__actions, .modal__actions {
      margin-bottom: -1.25rem; } }
  @media only screen and (min-width: 44.3125em) {
    .panel__actions, .modal__actions {
      padding-left: 1.25rem;
      text-align: right;
      white-space: nowrap; } }
  .panel__actions *, .modal__actions * {
    margin-right: 1.25rem; }
    @media only screen and (max-width: 44.25em) {
      .panel__actions *, .modal__actions * {
        margin-bottom: 1.25rem; } }

.panel__intro p, .modal__intro p {
  color: #999;
  font-size: 0.875rem; }

.panel__alert {
  background: #fcf3f2;
  color: #d34836;
  padding: 1.25rem 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .panel__alert {
      padding: 2.5rem 2.5rem; } }
  .panel__alert > * + * {
    margin-top: 1.25rem; }
  .panel__alert p {
    font-size: 0.875rem; }

.panel__content, .modal__content {
  padding: 1.25rem 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .panel__content, .modal__content {
      padding: 2.5rem 2.5rem; } }

/*==========================================================================
  PANEL MODIFIERS
==========================================================================*/
/*BORDER---------------------------------*/
.panel--border-none, .modal__inner {
  border-width: 0 !important; }

/*HEIGHT---------------------------------*/
@media only screen and (min-width: 44.3125em) {
  .panel--height-fixed {
    display: flex;
    flex-direction: column;
    height: 65vh; } }

@media only screen and (min-width: 44.3125em) {
  .panel--height-fixed .panel__content, .panel--height-fixed .modal__content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /*Internet Explorer*/
    scrollbar-face-color: rgba(0, 0, 0, 0.1);
    scrollbar-track-color: #f4f4f4;
    /*Webkit*/ }
    .panel--height-fixed .panel__content::-webkit-scrollbar, .panel--height-fixed .modal__content::-webkit-scrollbar {
      height: 0.5625rem;
      width: 0.5625rem; }
    .panel--height-fixed .panel__content::-webkit-scrollbar-thumb, .panel--height-fixed .modal__content::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.1); }
    .panel--height-fixed .panel__content::-webkit-scrollbar-thumb:hover, .panel--height-fixed .modal__content::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.3); }
    .panel--height-fixed .panel__content::-webkit-scrollbar-thumb:active, .panel--height-fixed .modal__content::-webkit-scrollbar-thumb:active {
      background: #78699e; }
    .panel--height-fixed .panel__content::-webkit-scrollbar-track, .panel--height-fixed .modal__content::-webkit-scrollbar-track, .panel--height-fixed .panel__content::-webkit-scrollbar-corner, .panel--height-fixed .modal__content::-webkit-scrollbar-corner {
      background: #f4f4f4; } }

/*BACKGROUND---------------------------------*/
/*Blue*/
.panel--background-blue {
  background: #edf6fc;
  color: #1f89cb; }
  .panel--background-blue,
  .panel--background-blue .panel__header,
  .panel--background-blue .modal__header {
    border-color: #c1e1f5; }

/*Gray*/
.panel--background-gray .panel__content, .modal--background-gray .panel__content, .panel--background-gray .modal__content, .modal--background-gray .modal__content {
  background: #f4f4f4; }

/*BLEED---------------------------------*/
.panel--bleed-full .panel__content, .modal--bleed-full .panel__content, .panel--bleed-full .modal__content, .modal--bleed-full .modal__content {
  padding: 0; }

/*==========================================================================
  PANEL TRANSITIONS
==========================================================================*/
.panel--leave {
  max-height: 50rem;
  opacity: 1; }

.panel--leave.panel--leave-active {
  max-height: 0;
  opacity: 0;
  transition: all 300ms ease; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  SUPPLEMENT STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.supplement > * + * {
  margin-top: 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .supplement > * + * {
      margin-top: 1.875rem; } }

.supplement__header {
  border-bottom: 0.1875rem solid #6c5d90;
  padding-bottom: 0.625rem; }
  @media only screen and (min-width: 44.3125em) {
    .supplement__header {
      padding-bottom: 1.25rem; } }

@media only screen and (min-width: 44.3125em) {
  .supplement__actions .button {
    display: block;
    width: 100%; } }

.supplement__footer {
  border-top: 0.0625rem solid #ddd;
  padding-top: 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .supplement__footer {
      padding-top: 1.875rem; } }
  .supplement__footer a {
    font-size: 0.75rem; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  MESSAGE BASIC STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.message-basic {
  padding: 1.25rem;
  text-align: center; }
  @media only screen and (min-width: 44.3125em) {
    .message-basic {
      padding: 2.5rem; } }
  .message-basic p {
    color: #999;
    font-size: 0.875rem;
    font-style: italic; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  LIST BASIC STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.list-basic li, .text-longform ul li,
.text-longform ol li {
  font-size: 0.875rem;
  padding-left: 1.25rem;
  position: relative; }

.list-basic li:before, .text-longform ul li:before,
.text-longform ol li:before {
  left: 0;
  position: absolute; }

.list-basic li ul, .text-longform ul li ul,
.text-longform ol li ul,
.list-basic li ol, .text-longform ul li ol,
.text-longform ol li ol,
.list-basic li + li, .text-longform ul li + li,
.text-longform ol li + li {
  margin-top: 1em; }

ul.list-basic li:before, .text-longform ul li:before {
  content: "";
  background: #6c5d90;
  border-radius: 50%;
  display: block;
  height: 0.375rem;
  top: 0.45em;
  width: 0.375rem; }

ol.list-basic,
.text-longform ol {
  counter-reset: numbered-list; }
  ol.list-basic li,
  .text-longform ol li {
    counter-increment: numbered-list; }
  ol.list-basic li:before,
  .text-longform ol li:before {
    color: #6c5d90;
    content: counter(numbered-list) ".";
    font-weight: bold;
    top: 0; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  LIST LINKS STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.list-links li {
  border-bottom: 0.0625rem solid #ddd;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
  padding: 0 0 1.25rem 1.25rem;
  position: relative; }
  @media only screen and (min-width: 44.3125em) {
    .list-links li {
      margin-bottom: 1.875rem;
      padding-bottom: 1.875rem; } }
  .list-links li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0; }
  .list-links li::before {
    color: #6c5d90;
    content: "\E90B";
    left: 0;
    position: absolute;
    top: 0.2em;
    font-family: "fugue";
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    speak: none;
    text-transform: none; }

.list-links a {
  color: #333; }
  .list-links a:hover, .list-links a:focus {
    color: #5ac6e0; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  LIST DOWNLOAD STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
@media only screen and (min-width: 44.3125em) {
  .list-download {
    display: flex;
    justify-content: space-between; } }

.list-download li {
  padding: 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .list-download li {
      padding: 2.5rem; } }

@media only screen and (min-width: 44.3125em) {
  .list-download li:nth-child(even) {
    flex: 0 0 50%;
    width: 50%; } }
  @media only screen and (min-width: 44.3125em) and (-ms-high-contrast: none), only screen and (min-width: 44.3125em) and (-ms-high-contrast: active) {
    .list-download li:nth-child(even) {
      flex-basis: auto; } }

@media only screen and (max-width: 44.25em) {
  .list-download li + li {
    border-top: 0.0625rem solid #ddd; } }

@media only screen and (min-width: 44.3125em) {
  .list-download li + li {
    border-left: 0.0625rem solid #ddd; } }

.list-download li > * + * {
  margin-top: 1.25rem; }

.list-download h3,
.list-download p {
  font-size: 0.875rem; }

.list-download h3 {
  font-weight: bold; }

.list-download p {
  color: #999; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  LIST PACKAGE STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
@media only screen and (min-width: 44.3125em) {
  .list-package {
    display: flex;
    justify-content: space-between; } }

@media only screen and (min-width: 44.3125em) {
  .list-package__header {
    flex: 0 0 20.96774%;
    width: 20.96774%; } }
  @media only screen and (min-width: 44.3125em) and (-ms-high-contrast: none), only screen and (min-width: 44.3125em) and (-ms-high-contrast: active) {
    .list-package__header {
      flex-basis: auto; } }

.list-package__header h3 {
  font-size: 0.875rem;
  font-weight: 700; }

@media only screen and (min-width: 44.3125em) {
  .list-package__items {
    margin-top: -1.25rem;
    flex: 0 0 73.65591%;
    width: 73.65591%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; } }
  @media only screen and (min-width: 44.3125em) and (-ms-high-contrast: none), only screen and (min-width: 44.3125em) and (-ms-high-contrast: active) {
    .list-package__items {
      flex-basis: auto; } }

@media only screen and (max-width: 44.25em) {
  .list-package__items dl {
    border-top: 0.0625rem solid #ddd;
    margin-top: 0.625rem;
    padding-top: 0.625rem; } }

@media only screen and (min-width: 44.3125em) {
  .list-package__items dl {
    margin-top: 1.25rem;
    flex: 0 0 28.46715%;
    width: 28.46715%; } }
  @media only screen and (min-width: 44.3125em) and (-ms-high-contrast: none), only screen and (min-width: 44.3125em) and (-ms-high-contrast: active) {
    .list-package__items dl {
      flex-basis: auto; } }

.list-package__items dt {
  font-size: 0.875rem;
  font-weight: 700; }

.list-package__items dd {
  color: #999;
  font-size: 0.75rem; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  LIST STEPS STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.list-steps {
  counter-reset: steps; }
  @media only screen and (min-width: 44.3125em) {
    .list-steps {
      display: flex;
      justify-content: space-between; } }
  .list-steps li {
    counter-increment: steps;
    padding: 1.25rem; }
    @media only screen and (min-width: 44.3125em) {
      .list-steps li {
        padding: 2.5rem;
        flex: 0 0 50%;
        width: 50%; } }
  @media only screen and (min-width: 44.3125em) and (-ms-high-contrast: none), only screen and (min-width: 44.3125em) and (-ms-high-contrast: active) {
    .list-steps li {
      flex-basis: auto; } }
    .list-steps li > * + * {
      margin-top: 1.5em; }
  @media only screen and (max-width: 44.25em) {
    .list-steps li + li {
      border-top: 0.0625rem solid #c1e1f5; } }
  @media only screen and (min-width: 44.3125em) {
    .list-steps li + li {
      border-left: 0.0625rem solid #c1e1f5; } }
  .list-steps h3,
  .list-steps p {
    color: #1f89cb;
    font-size: 0.875rem; }
  .list-steps h3 {
    font-weight: bold; }
    .list-steps h3::before {
      background: #1f89cb;
      border-radius: 50%;
      color: #fff;
      content: counter(steps);
      display: inline-block;
      margin-right: 0.625rem;
      text-align: center;
      width: 1.5em; }
  .list-steps a {
    color: inherit;
    text-decoration: underline; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  LIST CONDUCTORS STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.list-conductors__item {
  border-left: 0.1875rem solid transparent;
  padding: 1.25rem 1.25rem 1.25rem 1.0625rem;
  position: relative; }
  @media only screen and (min-width: 44.3125em) {
    .list-conductors__item {
      padding: 2.5rem 2.5rem 2.5rem 2.3125rem;
      align-items: center;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between; } }
  .list-conductors__item + .list-conductors__item {
    border-top: 0.0625rem solid #ddd; }
  @media only screen and (max-width: 44.25em) {
    .list-conductors__item > * + * {
      margin-top: 1.25rem; } }

.list-conductors__header h3 {
  font-size: 0.875rem;
  font-weight: bold; }

.list-conductors__header p {
  color: #999;
  font-size: 0.75rem; }

.list-conductors__actions {
  margin-bottom: -1.25rem;
  margin-left: -1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .list-conductors__actions {
      text-align: right; } }
  .list-conductors__actions .button {
    margin: 0 0 1.25rem 1.25rem; }

.list-conductors__item--team {
  border-left-color: #6c5d90; }
  .list-conductors__item--team .list-conductors__edition {
    color: #6c5d90; }

.list-conductors__item--free {
  border-left-color: #1b9789; }
  .list-conductors__item--free .list-conductors__edition {
    color: #1b9789; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  LIST PLATFORM STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
@media only screen and (min-width: 44.3125em) {
  .list-platform {
    display: flex;
    justify-content: space-between; } }

@media only screen and (min-width: 44.3125em) {
  .list-platform__group {
    flex: 0 0 50%;
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; } }
  @media only screen and (min-width: 44.3125em) and (-ms-high-contrast: none), only screen and (min-width: 44.3125em) and (-ms-high-contrast: active) {
    .list-platform__group {
      flex-basis: auto; } }

@media only screen and (max-width: 44.25em) {
  .list-platform__group + .list-platform__group {
    border-top: 1px solid #ddd; } }

@media only screen and (min-width: 44.3125em) {
  .list-platform__group + .list-platform__group {
    border-left: 1px solid #ddd; } }

.list-platform__os {
  padding: 1.25rem 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .list-platform__os {
      padding: 2.5rem 2.5rem;
      text-align: center;
      flex: 0 0 100%;
      width: 100%; } }
  @media only screen and (min-width: 44.3125em) and (-ms-high-contrast: none), only screen and (min-width: 44.3125em) and (-ms-high-contrast: active) {
    .list-platform__os {
      flex-basis: auto; } }
  .list-platform__os + .list-platform__os {
    border-top: 1px solid #ddd; }
  .list-platform__os h3 {
    margin-bottom: 1.25rem; }
    @media only screen and (min-width: 44.3125em) {
      .list-platform__os h3 {
        margin-bottom: 1.875rem; } }
  .list-platform__os li + li {
    margin-top: 1.25rem; }
    @media only screen and (min-width: 44.3125em) {
      .list-platform__os li + li {
        margin-top: 1.875rem; } }
  .list-platform__os li > * + * {
    margin-top: 0.625rem; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  LIST COMPARE STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
@media only screen and (min-width: 44.3125em) {
  .list-compare {
    display: flex;
    justify-content: space-between; } }

.list-compare__edition {
  border-radius: 0.3125rem;
  padding: 1.25rem 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .list-compare__edition {
      padding: 2.5rem 2.5rem;
      text-align: center;
      flex: 0 0 46.83544%;
      width: 46.83544%; } }
  @media only screen and (min-width: 44.3125em) and (-ms-high-contrast: none), only screen and (min-width: 44.3125em) and (-ms-high-contrast: active) {
    .list-compare__edition {
      flex-basis: auto; } }
  @media only screen and (min-width: 58.1875em) {
    .list-compare__edition {
      flex: 0 0 47.66355%;
      width: 47.66355%; } }
  @media only screen and (min-width: 58.1875em) and (-ms-high-contrast: none), only screen and (min-width: 58.1875em) and (-ms-high-contrast: active) {
    .list-compare__edition {
      flex-basis: auto; } }
  @media only screen and (max-width: 44.25em) {
    .list-compare__edition + .list-compare__edition {
      margin-top: 1.25rem; } }

.list-compare__header {
  margin-bottom: 1.25rem; }
  .list-compare__header > * + * {
    margin-top: 0.625rem; }

.list-compare__features {
  border-bottom: 0.0625rem solid; }
  .list-compare__features,
  .list-compare__features li + li {
    border-top: 0.0625rem solid; }
  .list-compare__features li {
    padding: 1.25rem 0; }
  .list-compare__features small {
    font-size: 0.75rem; }

.list-compare__footer {
  margin-top: 1.25rem; }

.list-compare__edition--free {
  background: #e9fbf9;
  border: 0.0625rem solid #a8efe7;
  color: #1b9789; }
  .list-compare__edition--free .list-compare__features,
  .list-compare__edition--free .list-compare__features li + li {
    border-color: #a8efe7; }

.list-compare__edition--team {
  background: #f5f4f8;
  border: 0.0625rem solid #d9d5e4;
  color: #6c5d90; }
  .list-compare__edition--team .list-compare__features,
  .list-compare__edition--team .list-compare__features li + li {
    border-color: #d9d5e4; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  SNIPPET BASIC STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.snippet-basic, .text-longform pre {
  background: #fff;
  border: 0.0625rem solid #ddd;
  font-size: 0.75rem;
  overflow: auto;
  /*Internet Explorer*/
  scrollbar-face-color: rgba(0, 0, 0, 0.1);
  scrollbar-track-color: #f4f4f4;
  /*Webkit*/ }
  .snippet-basic::-webkit-scrollbar, .text-longform pre::-webkit-scrollbar {
    height: 0.5625rem;
    width: 0.5625rem; }
  .snippet-basic::-webkit-scrollbar-thumb, .text-longform pre::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1); }
  .snippet-basic::-webkit-scrollbar-thumb:hover, .text-longform pre::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3); }
  .snippet-basic::-webkit-scrollbar-thumb:active, .text-longform pre::-webkit-scrollbar-thumb:active {
    background: #78699e; }
  .snippet-basic::-webkit-scrollbar-track, .text-longform pre::-webkit-scrollbar-track, .snippet-basic::-webkit-scrollbar-corner, .text-longform pre::-webkit-scrollbar-corner {
    background: #f4f4f4; }
  @media only screen and (min-width: 44.3125em) {
    .snippet-basic, .text-longform pre {
      font-size: 0.875rem; } }
  .snippet-basic code, .text-longform pre code {
    display: block;
    padding: 1.25rem 1.25rem;
    position: relative; }
    .snippet-basic code::before, .text-longform pre code::before {
      background: #6c5d90;
      bottom: 0;
      content: "";
      display: block;
      left: 0;
      position: absolute;
      top: 0;
      width: 0.1875rem;
      z-index: 1; }

.snippet-basic--ide code {
  padding-left: 4.0625rem; }

.snippet-basic--ide .line-numbers-rows {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: 1.5625rem; }

.snippet-basic--ide .line-numbers-rows > span:before {
  color: #666;
  text-align: right; }

.snippet-basic--cli .snippet-basic__line--output {
  color: #999; }

.cssanimations .snippet-basic--cli[data-animatable] .snippet-basic__line--input {
  display: inline-block;
  max-width: 0%;
  overflow: hidden; }

.cssanimations .snippet-basic--cli[data-animatable] .snippet-basic__line--output {
  opacity: 0; }

.cssanimations .snippet-basic--cli[data-animatable].is-anim-in .snippet-basic__line--input {
  animation: typing 0.75s 1 forwards steps(50, end); }

.cssanimations .snippet-basic--cli[data-animatable].is-anim-in .snippet-basic__line--output {
  animation: fadeIn 0.75s 1 forwards ease; }

.cssanimations .snippet-basic--cli[data-animatable].is-anim-in .snippet-basic__line:nth-child(11) {
  animation-delay: 8.25s; }

.cssanimations .snippet-basic--cli[data-animatable].is-anim-in .snippet-basic__line:nth-child(10) {
  animation-delay: 7.5s; }

.cssanimations .snippet-basic--cli[data-animatable].is-anim-in .snippet-basic__line:nth-child(9) {
  animation-delay: 6.75s; }

.cssanimations .snippet-basic--cli[data-animatable].is-anim-in .snippet-basic__line:nth-child(8) {
  animation-delay: 6s; }

.cssanimations .snippet-basic--cli[data-animatable].is-anim-in .snippet-basic__line:nth-child(7) {
  animation-delay: 5.25s; }

.cssanimations .snippet-basic--cli[data-animatable].is-anim-in .snippet-basic__line:nth-child(6) {
  animation-delay: 4.5s; }

.cssanimations .snippet-basic--cli[data-animatable].is-anim-in .snippet-basic__line:nth-child(5) {
  animation-delay: 3.75s; }

.cssanimations .snippet-basic--cli[data-animatable].is-anim-in .snippet-basic__line:nth-child(4) {
  animation-delay: 3s; }

.cssanimations .snippet-basic--cli[data-animatable].is-anim-in .snippet-basic__line:nth-child(3) {
  animation-delay: 2.25s; }

.cssanimations .snippet-basic--cli[data-animatable].is-anim-in .snippet-basic__line:nth-child(2) {
  animation-delay: 1.5s; }

.cssanimations .snippet-basic--cli[data-animatable].is-anim-in .snippet-basic__line:nth-child(1) {
  animation-delay: 0.75s; }

.text-longform pre {
  background: #252525;
  border-color: #1a1a1a;
  color: #fff;
  /*Internet Explorer*/
  scrollbar-face-color: rgba(255, 255, 255, 0.1);
  scrollbar-track-color: #333;
  /*Webkit*/ }
  .text-longform pre::-webkit-scrollbar {
    height: 0.5625rem;
    width: 0.5625rem; }
  .text-longform pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1); }
  .text-longform pre::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3); }
  .text-longform pre::-webkit-scrollbar-thumb:active {
    background: #78699e; }
  .text-longform pre::-webkit-scrollbar-track, .text-longform pre::-webkit-scrollbar-corner {
    background: #333; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  FIGURE BASIC STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.figure-basic img, .text-longform figure img {
  display: block;
  transition: all 0.3s ease;
  width: 100%; }

.figure-basic a:hover img, .text-longform figure a:hover img,
.figure-basic a:focus img, .text-longform figure a:focus img {
  transform: scale(1.03); }

.figure-basic figcaption, .text-longform figure figcaption {
  border-bottom: 1px solid #ddd;
  color: #999;
  font-size: 0.75rem;
  font-style: italic;
  padding: 1.25rem 0; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  ACTIONS BASIC STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.actions-basic > * + * {
  margin-top: 1.25rem; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  FORM USER STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.form-user > * + * {
  margin-top: 1.875rem; }

.form-user__fields li + li {
  margin-top: 1.25rem; }

.form-user__input label {
  display: block;
  transition: all 0.3s ease; }

.form-user__input--text label,
.form-user__input h6 {
  font-size: 0.875rem;
  font-weight: bold;
  margin-bottom: 0.625rem; }
  .form-user__input--text label small,
  .form-user__input h6 small {
    color: #999;
    font-size: 0.75rem;
    font-weight: normal; }
    .form-user__input--text label small::before,
    .form-user__input h6 small::before {
      content: " \2014   "; }

.form-user__input--text {
  position: relative; }
  .form-user__input--text input,
  .form-user__input--text textarea,
  .form-user__input--text select {
    border: 0.0625rem solid #333;
    border-radius: 0.3125rem;
    display: block;
    font-family: "Input Mono", "Courier New", monospace;
    transition: all 0.3s ease;
    width: 100%; }
    .form-user__input--text input:focus,
    .form-user__input--text textarea:focus,
    .form-user__input--text select:focus {
      background: #fff;
      border-color: #6c5d90;
      outline: none; }
    .form-user__input--text input[disabled],
    .form-user__input--text textarea[disabled],
    .form-user__input--text select[disabled] {
      background: #f4f4f4;
      border-color: #ddd;
      color: #999;
      cursor: not-allowed; }
  .form-user__input--text input,
  .form-user__input--text select {
    height: 2.5rem;
    padding: 0 0.625rem; }
  .form-user__input--text input[type="password"] {
    padding-right: 5.625rem; }
  .form-user__input--text textarea {
    height: 7.5rem;
    padding: 0.625rem;
    /*Internet Explorer*/
    scrollbar-face-color: rgba(0, 0, 0, 0.1);
    scrollbar-track-color: #f4f4f4;
    /*Webkit*/ }
    .form-user__input--text textarea::-webkit-scrollbar {
      height: 0.5625rem;
      width: 0.5625rem; }
    .form-user__input--text textarea::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.1); }
    .form-user__input--text textarea::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.3); }
    .form-user__input--text textarea::-webkit-scrollbar-thumb:active {
      background: #78699e; }
    .form-user__input--text textarea::-webkit-scrollbar-track, .form-user__input--text textarea::-webkit-scrollbar-corner {
      background: #f4f4f4; }
  .form-user__input--text.form-user__input--validation-fail input,
  .form-user__input--text.form-user__input--validation-fail textarea,
  .form-user__input--text.form-user__input--validation-fail select {
    border-color: #d34836;
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
  .form-user__input--text.form-user__input--validation-fail label {
    color: #d34836; }

.form-user__input--check,
.form-user__input--radio {
  position: relative; }
  .form-user__input--check li + li,
  .form-user__input--radio li + li {
    margin-top: 0.625rem; }
  .form-user__input--check input,
  .form-user__input--radio input {
    left: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    z-index: -1; }
  .form-user__input--check label,
  .form-user__input--radio label {
    font-size: 0.75rem;
    padding: 0.375rem 0 0.375rem 3.125rem;
    position: relative; }
  .form-user__input--check label:before,
  .form-user__input--radio label:before {
    border: 0.0625rem solid #333;
    color: #fff;
    content: "";
    display: block;
    font-family: "fugue";
    height: 1.875rem;
    line-height: 1.75rem;
    left: 0;
    margin-top: -0.9375rem;
    position: absolute;
    transition: all 0.3s ease;
    text-align: center;
    text-shadow: 0 0.0625rem 0 rgba(0, 0, 0, 0.2);
    top: 50%;
    vertical-align: middle;
    width: 1.875rem; }
  .form-user__input--check input:checked + label:before,
  .form-user__input--radio input:checked + label:before {
    background: #333;
    content: "\E904"; }
  .form-user__input--check input:checked:focus + label:before,
  .form-user__input--radio input:checked:focus + label:before {
    background: #6c5d90;
    border-color: #6c5d90; }

.form-user__input--check label:before {
  border-radius: 0.3125rem; }

.form-user__input--radio label:before {
  border-radius: 50%; }

.form-user__error {
  background: #d34836;
  border-radius: 0.3125rem 0.3125rem 0 0; }
  .form-user__error p {
    color: #fff;
    font-size: 0.75rem;
    padding: 0.625rem; }

.form-user__strength {
  bottom: 0;
  color: #d34836;
  font-weight: bold;
  line-height: 3.33333;
  position: absolute;
  right: 0.625rem;
  z-index: 10; }

.form-user__strength--type-normal {
  color: #e4912d; }

.form-user__strength--type-medium {
  color: #1f89cb; }

.form-user__strength--type-strong {
  color: #1b9789; }

@media only screen and (min-width: 44.3125em) {
  .form-user__actions ul {
    display: flex;
    justify-content: space-between; } }

@media only screen and (max-width: 44.25em) {
  .form-user__actions li + li {
    margin-top: 1.25rem; } }

.form-user__alert {
  background: #edf6fc;
  border: 0.0625rem solid #c1e1f5;
  border-radius: 0.3125rem;
  color: #1f89cb;
  padding: 1.25rem 1.25rem; }
  .form-user__alert p {
    font-size: 0.75rem; }

.form-user__alert--type-error {
  background: #fcf3f2;
  border-color: #f3cdc8;
  color: #d34836; }

.form-user__alert--type-warning {
  background: #fbf0e2;
  border-color: #f5d8b5;
  color: #e4912d; }

.form-user__alert--type-success {
  background: #e9fbf9;
  border-color: #a8efe7;
  color: #1b9789; }

/*==========================================================================
  FORM ERROR TRANSITIONS
==========================================================================*/
.form-user__error--enter {
  max-height: 0;
  opacity: 0; }

.form-user__error--enter.form-user__error--enter-active {
  max-height: 10rem;
  opacity: 1;
  transition: all 300ms ease-in; }

.form-user__error--leave {
  max-height: 10rem;
  opacity: 1; }

.form-user__error--leave.form-user__error--leave-active {
  max-height: 0;
  opacity: 0;
  transition: all 300ms ease-out; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  TEXT BASIC STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.text-basic p {
  color: #999;
  font-size: 0.875rem; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  TEXT BASIC STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.text-upsell {
  text-align: left; }
  .text-upsell > * + *,
  .text-upsell ul > li + li {
    margin-top: 1.5em; }
  .text-upsell p,
  .text-upsell li {
    font-size: 0.875rem; }
  .text-upsell li {
    padding-left: 1.42857em;
    position: relative; }
    .text-upsell li::before {
      color: #6c5d90;
      content: "\E904";
      left: 0;
      position: absolute;
      top: 0.2em;
      font-family: "fugue";
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      line-height: 1;
      speak: none;
      text-transform: none; }
  .text-upsell figure {
    border: 0.0625rem solid #1a1a1a;
    border-radius: 0.3125rem;
    overflow: hidden; }

.text-upsell--color-green li::before {
  color: #1b9789; }

@media only screen and (min-width: 44.3125em) {
  .text-upsell--size-large p,
  .text-upsell--size-large li {
    font-size: 1rem; } }

/*********************************************************************************************************
**********************************************************************************************************
***
***  TEXT LONGFORM STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.text-longform > * + * {
  margin-top: 1.5em; }

.text-longform h2 {
  font-size: 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .text-longform h2 {
      font-size: 1.5rem; } }

.text-longform h3 {
  font-size: 1rem; }
  @media only screen and (min-width: 44.3125em) {
    .text-longform h3 {
      font-size: 1.25rem; } }

.text-longform h4,
.text-longform h5,
.text-longform h6 {
  font-weight: bold; }

.text-longform h4,
.text-longform p {
  font-size: 0.875rem; }

.text-longform h6 {
  font-size: 0.75rem; }

.text-longform blockquote {
  border-left: 0.1875rem solid #6c5d90;
  padding-left: 1.0625rem; }
  .text-longform blockquote p {
    font-size: 1.25rem; }
  .text-longform blockquote.blockquote--text-small p {
    font-size: 0.875rem; }
  .text-longform blockquote p + p,
  .text-longform blockquote footer {
    margin-top: 1.5em; }
  .text-longform blockquote cite {
    color: #999;
    font-size: 0.75rem; }
  .text-longform blockquote cite:before {
    content: "\2014"; }

.text-longform table {
  width: 100%; }
  .text-longform table thead th,
  .text-longform table thead td {
    border-bottom: 0.0625rem solid #ddd; }
  .text-longform table tr + tr > * {
    border-top: 0.0625rem solid #ddd; }
  .text-longform table tr > * + * {
    border-left: 0.0625rem solid #ddd; }
  .text-longform table th,
  .text-longform table td,
  .text-longform table caption {
    text-align: left; }
  .text-longform table th,
  .text-longform table td {
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
    vertical-align: top; }
  .text-longform table th {
    background: #f4f4f4;
    color: #6c5d90; }
  .text-longform table caption {
    border-bottom: 0.0625rem solid #ddd;
    border-top: 0.0625rem solid #ddd;
    caption-side: bottom;
    color: #999;
    font-size: 0.75rem;
    font-style: italic;
    padding: 1.25rem 0; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  MODAL STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.modal {
  background: #fff;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
  -webkit-overflow-scrolling: touch; }
  @media only screen and (min-width: 44.3125em) {
    .modal {
      background: rgba(37, 37, 37, 0.9);
      padding: 10vh 0;
      align-items: flex-start;
      display: flex;
      flex-wrap: nowrap;
      justify-content: center; } }

body.modal-active {
  overflow: hidden; }
  .touchevents body.modal-active {
    position: fixed;
    width: 100%; }

/*==========================================================================
  MODAL INNER
==========================================================================*/
.modal__inner {
  max-width: 39.375rem;
  transform: translate3d(0, 0, 0); }
  @media only screen and (max-width: 44.25em) {
    .modal__inner {
      border-radius: 0;
      box-shadow: none; } }
  @media only screen and (min-width: 44.3125em) {
    .modal__inner {
      box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.5);
      flex: 0 0 84.94624%;
      width: 84.94624%; } }
  @media only screen and (min-width: 44.3125em) and (-ms-high-contrast: none), only screen and (min-width: 44.3125em) and (-ms-high-contrast: active) {
    .modal__inner {
      flex-basis: auto; } }
  @media only screen and (min-width: 58.1875em) {
    .modal__inner {
      flex: 0 0 65.28926%;
      width: 65.28926%; } }
  @media only screen and (min-width: 58.1875em) and (-ms-high-contrast: none), only screen and (min-width: 58.1875em) and (-ms-high-contrast: active) {
    .modal__inner {
      flex-basis: auto; } }
  @media only screen and (min-width: 72.5em) {
    .modal__inner {
      flex: 0 0 48.46626%;
      width: 48.46626%; } }
  @media only screen and (min-width: 72.5em) and (-ms-high-contrast: none), only screen and (min-width: 72.5em) and (-ms-high-contrast: active) {
    .modal__inner {
      flex-basis: auto; } }

.modal__quarantine {
  background: #fcf3f2;
  border-top: 0.0625rem solid #f3cdc8;
  color: #d34836;
  padding: 1.25rem 1.25rem; }
  @media only screen and (max-width: 44.25em) {
    .modal__quarantine {
      border-bottom: 0.0625rem solid #f3cdc8; } }
  @media only screen and (min-width: 44.3125em) {
    .modal__quarantine {
      padding: 2.5rem 2.5rem; } }
  .modal__quarantine > * + * {
    margin-top: 1.25rem; }
  .modal__quarantine p {
    font-size: 0.875rem; }

/*==========================================================================
  MODAL MODIFIERS
==========================================================================*/
/*WIDTH---------------------------------*/
.modal--width-large .modal__inner {
  max-width: 55.75rem; }
  @media only screen and (min-width: 72.5em) {
    .modal--width-large .modal__inner {
      flex: 0 0 88.42975%;
      width: 88.42975%; } }
  @media only screen and (min-width: 72.5em) and (-ms-high-contrast: none), only screen and (min-width: 72.5em) and (-ms-high-contrast: active) {
    .modal--width-large .modal__inner {
      flex-basis: auto; } }
  @media only screen and (min-width: 72.5em) {
    .modal--width-large .modal__inner {
      flex: 0 0 65.64417%;
      width: 65.64417%; } }
  @media only screen and (min-width: 72.5em) and (-ms-high-contrast: none), only screen and (min-width: 72.5em) and (-ms-high-contrast: active) {
    .modal--width-large .modal__inner {
      flex-basis: auto; } }

/*BACKGROUND---------------------------------*/
@media only screen and (max-width: 44.25em) {
  .modal--background-gray .modal__content {
    border-bottom: 0.0625rem solid #ddd; } }

/*BLEED---------------------------------*/
/*==========================================================================
  MODAL TRANSITIONS
==========================================================================*/
.modal--enter,
.modal--enter .modal__inner {
  opacity: 0; }

.modal--enter .modal__inner {
  transform: translateY(10%); }

.modal--enter.modal--enter-active,
.modal--enter.modal--enter-active .modal__inner {
  opacity: 1;
  transition: all 400ms ease-out; }

.modal--enter.modal--enter-active .modal__inner {
  transform: translateY(0);
  transition-delay: 400ms; }

.modal--leave,
.modal--leave .modal__inner {
  opacity: 1; }

.modal--leave .modal__inner {
  transform: translateY(0); }

.modal--leave.modal--leave-active {
  transition-delay: 400ms; }
  .modal--leave.modal--leave-active,
  .modal--leave.modal--leave-active .modal__inner {
    opacity: 0;
    transition: all 400ms ease-in; }
  .modal--leave.modal--leave-active .modal__inner {
    transform: translateY(-10%); }

/*********************************************************************************************************
**********************************************************************************************************
***
***  NOTIFICATION STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.notification {
  background: #1f89cb;
  bottom: 0;
  color: #fff;
  left: 0;
  position: fixed;
  right: 0;
  z-index: 200;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center; }

.notification__content {
  max-width: 55.75rem;
  padding: 1.25rem 1.25rem 1.25rem 3.9375rem;
  position: relative; }
  @media only screen and (min-width: 44.3125em) {
    .notification__content {
      padding-left: 5.1875rem;
      padding-right: 2.5rem; } }
  .notification__content::before {
    content: "\E906";
    font-size: 2em;
    left: 1.25rem;
    margin-top: -0.5em;
    position: absolute;
    top: 50%;
    font-family: "fugue";
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    speak: none;
    text-transform: none; }
    @media only screen and (min-width: 44.3125em) {
      .notification__content::before {
        left: 2.5rem; } }
  .notification__content p {
    font-size: 0.75rem; }

.notification--type-error {
  background: #d34836; }

.notification--type-warning {
  background: #e4912d; }

.notification--type-success {
  background: #1b9789; }

/*==========================================================================
  NOTIFICATION TRANSITIONS
==========================================================================*/
.notification--enter {
  transform: translateY(100%);
  transition: all 250ms ease-out; }

.notification--enter.notification--enter-active {
  transform: translateY(0); }

.notification--leave {
  transform: translateY(0);
  transition: all 250ms ease-in; }

.notification--leave.notification--leave-active {
  transform: translateY(100%); }

/*********************************************************************************************************
**********************************************************************************************************
***
***  LOADING STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.loading {
  min-height: 100vh;
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center; }
  .loading h1 {
    position: relative;
    text-indent: -999rem; }
    .loading h1::after {
      animation: spin 0.5s linear infinite;
      border: 0.3125rem solid rgba(0, 0, 0, 0.2);
      border-left-color: #6c5d90;
      border-radius: 50%;
      content: "";
      display: block;
      height: 10em;
      left: 50%;
      margin: -5em 0 0 -5em;
      position: absolute;
      top: 50%;
      width: 10em;
      z-index: 20; }

/*********************************************************************************************************
**********************************************************************************************************
***
***  BROWSER STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
.browser,
.browser__inner {
  padding: 1.25rem 1.25rem; }
  @media only screen and (min-width: 44.3125em) {
    .browser,
    .browser__inner {
      padding: 2.5rem 2.5rem; } }

.browser {
  text-align: center; }
  .browser,
  .browser a {
    color: #d34836; }

.browser__inner {
  background: #fcf3f2;
  border: 0.0625rem solid #f3cdc8;
  border-radius: 0.3125rem;
  margin: 0 auto;
  max-width: 53.3125rem; }
  .browser__inner > * + * {
    margin-top: 1.875rem; }

.browser__summary {
  font-size: 0.875rem; }

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

.browser__list li {
  float: left;
  font-weight: bold;
  width: 50%; }
  @media only screen and (min-width: 44.3125em) {
    .browser__list li {
      width: 33.333333333333333%; } }
  @media only screen and (max-width: 44.25em) {
    .browser__list li:nth-child(2n+1) {
      clear: left; } }
  @media only screen and (min-width: 44.3125em) {
    .browser__list li:nth-child(3n+1) {
      clear: left; } }

.browser__list a {
  border: 0.0625rem solid transparent;
  display: block;
  padding: 1.25rem; }
  .browser__list a:hover, .browser__list a:focus {
    background: #fff;
    border-color: #f3cdc8;
    border-radius: 0.3125rem; }

.browser__list .icon {
  display: block;
  font-size: 2.625rem;
  margin: 0 auto 0.625rem; }

/*==========================================================================
  MEDIA IMPORTS
==========================================================================*/
/*********************************************************************************************************
**********************************************************************************************************
***
***  PRINT STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
@media print {
  /*==========================================================================
      ELEMENT DEFAULTS
    ==========================================================================*/
  * {
    background: #fff !important;
    box-shadow: none !important;
    color: #000 !important;
    text-shadow: none !important; }
  header,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid; }
  img,
  figure,
  table,
  pre,
  blockquote,
  .text-docs .literal-block-wrapper,
  .text-docs .topic,
  .text-docs .admonition,
  .text-docs .sidebar {
    page-break-inside: avoid; }
  a:link::after {
    content: " <" attr(href) "> "; }
  /*==========================================================================
      REVEAL HIDDEN CONTENT
    ==========================================================================*/
  /*==========================================================================
      HIDE UNECESSARY ELEMENTS
    ==========================================================================*/
  /*==========================================================================
      SET PAGE MARGINS
    ==========================================================================*/
  @page {
    margin: 1cm; } }

@media print and (color) {
  /*==========================================================================
      APPLY COLOR ADJUST OPTIONS
    ==========================================================================*/
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact; } }

/*********************************************************************************************************
**********************************************************************************************************
***
***  TV STYLES
***
**********************************************************************************************************
*********************************************************************************************************/
@media tv {
  html {
    font-size: 150%; } }

/*# sourceMappingURL=app.aa97de94efe69c2b519d.css.map*/