@charset "UTF-8";
/*!
Theme Name: Schoolbord Boilerplate
*/
/**
 * RGBA to RGB function
 * @source: David Jon
 */
/**
 * px to em function
 */
/**
 * rem function
 * @source: Stephen Rushing
 */
/* -------
	Mixin for clearfixing an element
------- */
/* ----
	GLOBAL OPTIONS
------- */
/* ----
	GLOBAL VARIABLES
------- */
/* ----
	Spacing

  Control the default styling of most elements by modifying these
  variables. Mostly focused on spacing.
  You can add more entries to the $spacers map, should you need more variation.
------- */
/* ----
	Colors

------- */
/* ----
	COMPONENTS

  Define common padding and border radius sizes and more.
------- */
@keyframes rotation {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

/* ----
	Buttons
------- */
/* ----
	Tables

  Customizes the `.table` component with basic values, each used across all table variations.
------- */
/* ----
VENDOR IMPORTS
------- */
/* ----
LIBRARY IMPORTS
------- */
/*  CSS RESET */
/*  Meyer's CSS Reset, Normalized.css, and custom code */
/*  Mobile Screen Resizing */
@-webkit-viewport {
  width: device-width;
  zoom: 1.0; }

@-moz-viewport {
  width: device-width;
  zoom: 1.0; }

@-ms-viewport {
  width: device-width;
  zoom: 1.0; }

@-o-viewport {
  width: device-width;
  zoom: 1.0; }

@viewport {
  width: device-width;
  zoom: 1.0; }

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

/*  Set display type for HTML5 semantic elements */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

/*  Force scrollbar display to prevent jumping on pages.
 *  Fix text resize bug on mobile devices. */
html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

/*  Display audio, canvas, and video elements as inline block elements. */
audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

/*  Prevent modern browsers from displaying audio without controls. */
audio:not([controls]) {
  display: none; }

/*  Prevent img and video elements from spilling
 *  outside of the page on smaller screens. */
img, video {
  max-width: 100%;
  height: auto; }

/*  Prevent iframe, object, and embed elements from
 *  spilling outside of the page on smaller screens. */
iframe, object, embed {
  max-width: 100%; }

/*  Prevents IE from making scaled images look like crap */
img {
  -ms-interpolation-mode: bicubic; }

/*  Address outline inconsistency between Chrome and other browsers. */
a:focus,
button:focus {
  outline: thin dotted;
  outline: .294117647em auto -webkit-focus-ring-color;
  outline-offset: -.142857143em; }

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

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

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

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

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

/**
 * Prevent displaying `audio` without controls in Mobile Safari 4/5/6/7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

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

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

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address inconsistent styling of `abbr[title]`.
 * 1. Correct styling in Firefox 39 and Opera 12.
 * 2. Correct missing styling in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Address inconsistent styling of b and strong.
 * 1. Correct duplicate application of `bolder` in Safari 6.0.2.
 * 2. Correct style set to `bold` in Edge 12+, Safari 6.2+, and Chrome 18+.
 */
b,
strong {
  font-weight: inherit;
  /* 1 */ }

b,
strong {
  font-weight: bolder;
  /* 2 */ }

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

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

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

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

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

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

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

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

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

/**
 * Address inconsistent styling of `hr`.
 * 1. Correct `box-sizing` set to `border-box` in Firefox.
 * 2. Correct `overflow` set to `hidden` in IE 8/9/10/11 and Edge 12.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

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

/**
 * 1. Correct inheritance and scaling of font-size for preformatted text.
 * 2. Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

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

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

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

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

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

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

/**
 * Restore focus style in Firefox 4+ (unset by a rule above)
 */
button:-moz-focusring,
input:-moz-focusring {
  outline: 1px dotted ButtonText; }

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

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

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

/**
 * Address `appearance` set to `searchfield` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield; }

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

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

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

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

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

/* -----------------------------------

	Place webfonts here

	---------------------------------- */
@font-face {
  font-family: 'VAG Rounded Std';
  src: url("../assets/fonts/VAGRoundedStd-Bold.woff2") format("woff2"), url("../assets/fonts/VAGRoundedStd-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'VAG Rounded Std';
  src: url("../assets/fonts/VAGRoundedStd-Thin.woff2") format("woff2"), url("../assets/fonts/VAGRoundedStd-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal; }

/* -----------------------------------

	Standard styling for typographic elements

	---------------------------------- */
html {
  font-family: "VAG Rounded Std", Arial, sans-serif;
  font-size: 16.2px;
  line-height: 1.47059;
  letter-spacing: 0;
  color: #010B19;
  background: #fff;
  font-weight: 700;
  -webkit-font-smoothing: antialiased; }
  @media (min-width: 1250px) {
    html {
      font-size: 18px; } }
  @media (min-width: 1800px) {
    html {
      font-size: 21.6px; } }

p {
  margin-bottom: 2.00001rem; }
  p:last-child {
    margin-bottom: 0; }

/*  Links
 *  Hyperlink styling */
a {
  color: #28A532;
  text-decoration: none;
  transition: color 375ms cubic-bezier(0.52, 0.07, 0.61, 1.19), background 375ms cubic-bezier(0.52, 0.07, 0.61, 1.19); }

a:hover {
  color: #28A532;
  text-decoration: underline; }

a img {
  border: none;
  background: none; }

/*  Prevents border/background on linked image hover.
 *  Adds slight opacity. */
a:hover img {
  border: none;
  background: none; }

/*  Lists
 *  Styling for lists */
ul, ol {
  margin-bottom: 2.00001rem;
  margin-left: 2em; }
  ul li, ol li {
    margin-bottom: .5em; }
    ul li:last-child, ol li:last-child {
      margin-bottom: 0; }

ul ul, ul ol, ol ol, ol ul {
  margin-bottom: 0; }

ul {
  list-style: disc; }
  ul.wp-block-list {
    list-style: none; }
    ul.wp-block-list li::before {
      content: "•";
      color: #641C76;
      display: inline-block;
      width: 1em;
      margin-left: -1em; }

ol {
  list-style: decimal; }
  ol.wp-block-list {
    counter-reset: item; }
    ol.wp-block-list li {
      display: block; }
      ol.wp-block-list li:before {
        content: counter(item) ". ";
        counter-increment: item;
        color: #641C76;
        font-weight: bold;
        margin-left: -1em; }

/*  Removes list styling.
 *  For semantic reasons, should only
 *  be used on unordered lists. */
.list-unstyled {
  margin-left: 0;
  list-style: none; }

/*  Headings
 *  h1 through h6 styling
 *  Heading class lets you use one heading type for semantics
 *  but style it as another heading type. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "VAG Rounded Std", Arial, sans-serif;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 0.66667rem;
  margin-top: 1.33334rem;
  color: #641C76; }

h1, .h1 {
  font-size: 2.33333em;
  line-height: 1.2;
  font-weight: 700; }

h2, .h2 {
  font-size: 1.33333em;
  line-height: 1.2;
  font-weight: 700; }

h3, .h3 {
  font-size: 1.11111em;
  line-height: 1.2;
  font-weight: 700; }

h4, .h4 {
  font-size: 1em;
  line-height: 1.5;
  font-weight: 700; }

h5, .h5 {
  font-size: 0.88889em;
  line-height: 1.2;
  font-weight: 700; }

h6, .h6 {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700; }

.lead, .is-style-intro {
  font-size: 1.33333em;
  font-weight: 700;
  color: #641C76; }

.display-1 {
  font-size: 6rem;
  font-weight: 700;
  line-height: 1.2; }

.display-2 {
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1.2; }

.display-3 {
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1.2; }

.display-4 {
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1.2; }

small, .small {
  font-size: 0.77778em; }

.medium-font-size {
  font-size: 0.88889em; }

.color-primary {
  color: #641C76; }

.color-secondary {
  color: #28A532; }

.color-tertiary {
  color: #C8005A; }

.color-quaternary {
  color: #FFC800; }

.color-success {
  color: #28A532; }

.color-info {
  color: #00ACD9; }

.color-warning {
  color: #FFC800; }

.color-danger {
  color: #FF3867; }

.color-light {
  color: #EFE8F1; }

.color-dark {
  color: #010B19; }

.color-white {
  color: #fff; }

.bgcolor-primary {
  background-color: #641C76; }

.bgcolor-secondary {
  background-color: #28A532; }

.bgcolor-tertiary {
  background-color: #C8005A; }

.bgcolor-quaternary {
  background-color: #FFC800; }

.bgcolor-success {
  background-color: #28A532; }

.bgcolor-info {
  background-color: #00ACD9; }

.bgcolor-warning {
  background-color: #FFC800; }

.bgcolor-danger {
  background-color: #FF3867; }

.bgcolor-light {
  background-color: #EFE8F1; }

.bgcolor-dark {
  background-color: #010B19; }

.bgcolor-white {
  background-color: #fff; }

/*  Lines, Quotes and Emphasis */
/*  Lines */
hr {
  margin: 2em auto;
  border: 0;
  border-top: 1px solid inherit;
  opacity: 0.25; }

/*  Bold */
strong {
  font-weight: bold; }

/*  Italics */
em {
  font-style: italic; }

/*  Subscript & Superscript */
sub,
sup {
  position: relative;
  font-size: 85%;
  font-weight: bold;
  line-height: 0;
  vertical-align: baseline;
  margin-left: .3em; }

figure {
  margin: 0; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/*  Highlighting colors */
::selection {
  color: #fff;
  background: #641C76; }

::-moz-selection {
  color: #fff;
  background: #641C76; }

/* code */
code {
  font-size: .9em; }

/*  Blockquotes */
blockquote, q {
  quotes: none; }

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

.btn--icon-only span, .list--icons a span,
.text--hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.clear {
  clear: both; }

.embed-container, .wp-embed-aspect-16-9 {
  position: relative;
  padding-bottom: 56.25%;
  /* 16/9 ratio */
  padding-top: 30px;
  /* IE6 workaround*/
  height: 0;
  overflow: hidden;
  margin-bottom: 20px; }
  .embed-container iframe, .embed-container object, .embed-container embed, .wp-embed-aspect-16-9 iframe, .wp-embed-aspect-16-9 object, .wp-embed-aspect-16-9 embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.centered, .has-text-align-center {
  text-align: center; }

.centered-flex {
  display: flex;
  justify-content: center; }

.icon {
  width: 1em;
  height: 1em;
  font-size: 1em; }

ul.is-style-check li {
  display: block;
  position: relative; }
  ul.is-style-check li:before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='check' class='svg-inline--fa fa-check fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%230099A2' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'%3E%3C/path%3E%3C/svg%3E");
    color: #641C76;
    background-size: .75em .75em;
    height: .75em;
    width: .75em;
    display: block;
    position: absolute;
    left: -5px;
    top: .25em;
    transform: translateX(-100%);
    margin-left: 0; }

/* ---------------------------------------------------------------------

	DEFAULT FORM STYLING

	-------------------------------------------------------------------- */
form > fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

form label {
  margin-bottom: 0;
  display: block; }

input, textarea, select {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1em;
  line-height: 1.5em;
  height: 1.5em;
  color: #010B19;
  vertical-align: middle;
  border: none;
  padding: 0 10px;
  border: 1px;
  border-radius: 1.5rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  border-color: transparent;
  border-style: solid;
  background: #fff; }
  input.input-warning, textarea.input-warning, select.input-warning {
    border-color: #FF3867;
    background: white; }

input[type=text], input[type=number] {
  border: 3px solid #641C76; }

textarea {
  height: 12em;
  padding: 10px;
  border-width: 1px;
  line-height: 1.2; }

input[type=file] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  cursor: text;
  padding: 10px 15px; }

input[type="image"],
input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 0;
  margin-bottom: .294117647em;
  cursor: pointer; }

input:focus,
textarea:focus {
  box-shadow: 1px 3px 6px 0 rgba(100, 28, 118, 0.2);
  outline: 0; }

input[type="file"]:focus,
input[type="checkbox"]:focus,
select:focus {
  box-shadow: 1px 3px 6px 0 rgba(100, 28, 118, 0.2);
  outline: 0; }

button.btn--submit {
  margin-bottom: 0;
  margin-left: 0; }

::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: rgba(1, 11, 25, 0.5); }

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: rgba(1, 11, 25, 0.5); }

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgba(1, 11, 25, 0.5); }

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgba(1, 11, 25, 0.5); }

:placeholder-shown {
  /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color: rgba(1, 11, 25, 0.5); }

.form .label {
  color: #641C76;
  font-weight: bold;
  font-size: 0.72222em;
  display: block;
  margin-bottom: 10px;
  font-family: "VAG Rounded Std", Arial, sans-serif;
  margin-top: 10px; }

.label--input {
  font-size: 0.72222em;
  letter-spacing: 0.05em;
  font-family: "VAG Rounded Std", Arial, sans-serif;
  position: absolute;
  top: 0;
  left: 20px;
  color: #641C76;
  line-height: 40px;
  height: 40px;
  transition: top 100ms ease-in-out, left 100ms ease-in-out 0ms; }
  .field--textarea .label--input {
    top: 5px; }

.label--hidden {
  position: absolute;
  left: -99999px; }

label.input-warning {
  position: absolute;
  font-size: 0.55556em;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  top: -10px;
  right: 0; }

.label--inline {
  font-weight: bold; }

.field--crazyeight {
  position: absolute !important;
  left: -999999px; }

.field--textarea textarea {
  padding-top: 40px; }

/* ------------------------

		Layout & Structure

		----------------------- */
.form {
  text-align: left;
  position: relative; }
  .form_title {
    font-size: 1.77778em;
    font-weight: bold;
    font-family: "VAG Rounded Std", Arial, sans-serif;
    text-align: left; }
  .form_subtitle {
    font-size: 1em; }
    .form_subtitle a {
      border-bottom: 1px solid #010B19; }
  .form_field {
    margin-top: 20px;
    margin-bottom: 0;
    display: block;
    position: relative;
    width: 100%; }
    .form_field input {
      padding-left: 70px; }
  .form_group:after {
    content: "";
    display: table;
    clear: both; }
  @media (min-width: 700px) {
    .form_group {
      margin-bottom: 0.66667rem; }
      .form_group .form_field {
        float: left;
        padding-right: 1.33334rem;
        margin-bottom: 0; }
        .form_group .form_field:last-child {
          padding-right: 0; } }
  .form_group.group--options {
    padding-top: 0.66667rem;
    border-bottom: 2px solid #EFE8F1;
    padding-bottom: 0.66667rem; }
    .form_group.group--options .label {
      border-bottom: 2px solid #EFE8F1;
      padding-left: 7px;
      margin-bottom: 0; }
    .form_group.group--options .form_field {
      display: inline-block;
      width: auto; }
      .form_group.group--options .form_field:nth-child(2) {
        margin-left: 7px; }
  .form_actions {
    margin-top: 20px; }
    .form_actions small {
      margin-top: 15px;
      display: block;
      font-size: 0.72222em; }
    .form_actions .form_toggler,
    .form_actions a {
      background: none;
      display: block;
      margin: 1.33334rem auto 0;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 0.72222em; }
  .form_submit {
    position: absolute;
    bottom: 0;
    transform: translateY(50%); }
    .form_submit.btn--submit {
      background: #28A532; }
  .form_feedback {
    background: #ffd1dc;
    display: none;
    padding: 20px;
    text-align: center;
    color: #fff;
    font-size: 0.77778em;
    margin-top: 20px; }
    .form_feedback.success {
      background: #fff;
      color: #641C76; }
    .form_feedback.loading {
      background: #28A532; }

/* ------------------------

		Custom Select boxes

		----------------------- */

.custom-select {
  display: block;
  background: #EFE8F1;
  height: 2.00001rem;
  line-height: 2.00001rem;
  position: relative; }
  
  .custom-select select {
    appearance: none;
    line-height: 2.00001rem;
    height: 100%;
    color: #010B19;
    background: transparent; }
  
  .custom-select::after {
    position: absolute;
    right: 10px;
    top: 0;
    display: inline-block;
    pointer-events: none;
    font-size: 18px;
    line-height: 2.00001rem; }
  
  .custom-select--light {
    background: #fff;
    color: #010B19; }
    
    .custom-select--light select {
      color: #010B19; }
  @media (min-width: 1250px) {
    
    .custom-select {
      height: 2.66668rem; }
      
      .custom-select,
      .custom-select::after,
      .custom-select select {
        line-height: 2.66668rem; } }

/* ------------------------

		Custom checkboxed and radio buttons

		----------------------- */
.field--radio span,
.field--checkbox span {
  padding-left: 1.33334rem;
  cursor: pointer; }

.field--radio,
.field--radio span.label--inline,
.field--checkbox,
.field--checkbox span.label--inline {
  position: relative; }

.field--radio span.label--inline::before,
.field--checkbox span.label--inline::before {
  display: block;
  content: '';
  width: 0.8rem;
  height: 0.8rem;
  background-color: #fff;
  position: absolute;
  color: #fff;
  line-height: 0.8rem;
  font-size: 9px;
  text-align: center;
  top: -1px;
  left: 0;
  border: 2px solid #e0d2e4; }

.field--radio span.label--inline::before {
  border-radius: 30px; }

.field--radio input[type=radio]:checked + .label--inline::before,
.field--checkbox input[type=checkbox]:checked + .label--inline::before {
  background: #010B19;
  border-color: #010B19;
  color: #fff; }

.field--radio input[type=radio],
.field--checkbox input[type=checkbox] {
  opacity: 0;
  position: absolute;
  left: -99999px; }

.field--checkbox input[type=checkbox]:focus + .label--inline::before {
  border-color: #010B19; }

.table {
  width: 100%;
  margin-bottom: 1.33334rem;
  color: #010B19;
  border-collapse: collapse; }
  .table th,
  .table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #D8C6DC; }
  .table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #D8C6DC; }
  .table tbody + tbody {
    border-top: 2px solid #D8C6DC; }

.table-sm th,
.table-sm td {
  padding: 0.3rem; }

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

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0; }

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(1, 11, 25, 0.05); }

.table-hover tbody tr:hover {
  color: #010B19;
  background-color: rgba(1, 11, 25, 0.075); }

.table .thead-dark th {
  color: #fff;
  background-color: #1a2330;
  border-color: #273549; }

.table .thead-light th {
  color: #1a2330;
  background-color: #EFE8F1;
  border-color: #D8C6DC; }

.table-dark {
  color: #fff;
  background-color: #1a2330; }
  .table-dark th,
  .table-dark td,
  .table-dark thead th {
    border-color: #273549; }
  .table-dark.table-bordered {
    border: 0; }
  .table-dark.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05); }
  .table-dark.table-hover tbody tr:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.075); }

/*  PRINT STYLES */
/*  Styling for printed content.
 *  Adapted from HTML5BP.
 *  http://html5boilerplate.com/ */
@media print {
  /*  Universal selector.
     *  Reset all content to transparent background,
     *  black color, and remove box and text shadows. */
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important; }
  /*  Specifies page margin */
  @page {
    margin: 0.5cm; }
  /*  Underline all links */
  a, a:visited {
    text-decoration: underline; }
  /*  Show URL after links */
  a[href]:after {
    content: " (" attr(href) ")"; }
  /*  Don't show URL for internal links */
  a[href^="#"]:after {
    content: ""; }
  /*  Specifies the minimum number of lines to print at the top and bottom of a page. */
  p, h1, h2, h3 {
    orphans: 3;
    widows: 3; }
  /*  Avoid inserting a page break after headers */
  h1, h2, h3 {
    page-break-after: avoid; }
  /*  Change border color on blockquotes and preformatted text.
     *  Avoid page breaks inside the content */
  pre, blockquote {
    border-color: #999;
    page-break-inside: avoid; }
  /*  Displayed as a table header row group */
  thead {
    display: table-header-group; }
  /*  Avoid inserting a page break inside table rows and images */
  tr, img {
    page-break-inside: avoid; } }

/**
 * ----------------------------------------
 * animation shake-lr
 * ----------------------------------------
 */
@-webkit-keyframes shake-lr {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%; }
  10% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg); }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg); }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg); }
  80% {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg); }
  90% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg); } }

@keyframes shake-lr {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%; }
  10% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg); }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg); }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg); }
  80% {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg); }
  90% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg); } }

@keyframes floatingbg {
  0%,
  100% {
    background-position: 100% 0%; }
  50% {
    background-position: 140% 10%; }
  90% {
    background-position: 90% 2%; } }

@keyframes wavingbg {
  0%,
  100% {
    background-position: 100% 100%; }
  50% {
    background-position: 95% 120%; }
  70% {
    background-position: 105% 125%; } }

* {
  box-sizing: border-box; }

body {
  overflow-x: hidden; }

.container {
  padding: 0 5vw; }

/* -----------------------------------

	Styling for buttons

	---------------------------------- */
button,
.btn {
  cursor: pointer;
  text-align: center;
  user-select: none;
  vertical-align: middle;
  -webkit-appearance: none; }

.btn {
  display: inline-block;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0 1.00001rem;
  margin: 0;
  height: 2.40001rem;
  line-height: 2.40001rem;
  font-weight: 700;
  font-family: "VAG Rounded Std", Arial, sans-serif;
  text-transform: none;
  font-size: 1em;
  background-color: #641C76;
  color: #fff;
  border: 2px solid transparent;
  border-radius: 2.40001rem;
  transition: all 375ms cubic-bezier(0.52, 0.07, 0.61, 1.19); }
  .btn:hover, a:hover .btn {
    text-decoration: none;
    color: #fff;
    background-color: #834991; }
  .btn:first-child, .btn input.btn {
    margin-left: 0; }
  .btn:focus, .btn .btn:focus {
    outline: 0 !important;
    background-color: #41124d; }
  .btn:active {
    box-shadow: inset 0 0.14286em 0.23529em rgba(0, 0, 0, 0.15), 0 0.07143em 0.14286em rgba(0, 0, 0, 0.05);
    outline: 0; }
  .btn.disabled, .btn:disabled,
  fieldset:disabled .btn {
    pointer-events: none;
    opacity: .65; }
  strong.btn {
    pointer-events: none; }
  .btn > span {
    padding: 0 5px;
    line-height: 100%; }
  .btn--primary {
    background-color: #641C76;
    color: #fff; }
    .btn--primary-alpha {
      background-color: rgba(100, 28, 118, 0.5); }
      .btn--primary-alpha:hover {
        background-color: #fff;
        color: #641C76; }
    .btn--primary:hover {
      background-color: #834991;
      color: #fff; }
  .btn--secondary {
    background-color: #28A532;
    color: #fff; }
    .btn--secondary-alpha {
      background-color: rgba(40, 165, 50, 0.5); }
      .btn--secondary-alpha:hover {
        background-color: #fff;
        color: #28A532; }
    .btn--secondary:hover {
      background-color: #53b75b;
      color: #fff; }
  .btn--tertiary {
    background-color: #C8005A;
    color: #fff; }
    .btn--tertiary-alpha {
      background-color: rgba(200, 0, 90, 0.5); }
      .btn--tertiary-alpha:hover {
        background-color: #fff;
        color: #C8005A; }
    .btn--tertiary:hover {
      background-color: #d3337b;
      color: #fff; }
  .btn--quaternary {
    background-color: #FFC800;
    color: #fff; }
    .btn--quaternary-alpha {
      background-color: rgba(255, 200, 0, 0.5); }
      .btn--quaternary-alpha:hover {
        background-color: #fff;
        color: #FFC800; }
    .btn--quaternary:hover {
      background-color: #ffd333;
      color: #fff; }
  .btn--success {
    background-color: #28A532;
    color: #fff; }
    .btn--success-alpha {
      background-color: rgba(40, 165, 50, 0.5); }
      .btn--success-alpha:hover {
        background-color: #fff;
        color: #28A532; }
    .btn--success:hover {
      background-color: #53b75b;
      color: #fff; }
  .btn--info {
    background-color: #00ACD9;
    color: #fff; }
    .btn--info-alpha {
      background-color: rgba(0, 172, 217, 0.5); }
      .btn--info-alpha:hover {
        background-color: #fff;
        color: #00ACD9; }
    .btn--info:hover {
      background-color: #33bde1;
      color: #fff; }
  .btn--warning {
    background-color: #FFC800;
    color: #fff; }
    .btn--warning-alpha {
      background-color: rgba(255, 200, 0, 0.5); }
      .btn--warning-alpha:hover {
        background-color: #fff;
        color: #FFC800; }
    .btn--warning:hover {
      background-color: #ffd333;
      color: #fff; }
  .btn--danger {
    background-color: #FF3867;
    color: #fff; }
    .btn--danger-alpha {
      background-color: rgba(255, 56, 103, 0.5); }
      .btn--danger-alpha:hover {
        background-color: #fff;
        color: #FF3867; }
    .btn--danger:hover {
      background-color: #ff6085;
      color: #fff; }
  .btn--light {
    background-color: #EFE8F1;
    color: #fff; }
    .btn--light-alpha {
      background-color: rgba(239, 232, 241, 0.5); }
      .btn--light-alpha:hover {
        background-color: #fff;
        color: #EFE8F1; }
    .btn--light:hover {
      background-color: #f2edf4;
      color: #fff; }
  .btn--dark {
    background-color: #010B19;
    color: #fff; }
    .btn--dark-alpha {
      background-color: rgba(1, 11, 25, 0.5); }
      .btn--dark-alpha:hover {
        background-color: #fff;
        color: #010B19; }
    .btn--dark:hover {
      background-color: #343c47;
      color: #fff; }
  .btn--white {
    background-color: #fff;
    color: #fff; }
    .btn--white-alpha {
      background-color: rgba(255, 255, 255, 0.5); }
      .btn--white-alpha:hover {
        background-color: #fff;
        color: #fff; }
    .btn--white:hover {
      background-color: white;
      color: #fff; }
  .btn--white {
    color: #28A532; }
    .btn--white:hover {
      background: #641C76;
      color: #fff; }
  .btn--gradient {
    color: #fff;
    background: linear-gradient(-44deg, #641C76 0%, #28A532 100%);
    border: none; }
    .btn--gradient:hover {
      background: linear-gradient(-44deg, #641C76 0%, #28A532 100%);
      color: #fff;
      opacity: .8; }
  .btn--bordered {
    background-color: transparent;
    border-color: #641C76;
    color: #641C76; }
    .btn--bordered:hover {
      background-color: transparent;
      border-color: #834991;
      color: #834991; }
    .btn--bordered.btn--primary {
      background-color: transparent;
      color: #641C76;
      border-color: #641C76; }
      .btn--bordered.btn--primary .icon {
        fill: #641C76; }
      .btn--bordered.btn--primary:hover {
        border-color: #834991;
        color: #834991; }
        .btn--bordered.btn--primary:hover .icon {
          fill: #641C76; }
    .btn--bordered.btn--secondary {
      background-color: transparent;
      color: #28A532;
      border-color: #28A532; }
      .btn--bordered.btn--secondary .icon {
        fill: #28A532; }
      .btn--bordered.btn--secondary:hover {
        border-color: #53b75b;
        color: #53b75b; }
        .btn--bordered.btn--secondary:hover .icon {
          fill: #28A532; }
    .btn--bordered.btn--tertiary {
      background-color: transparent;
      color: #C8005A;
      border-color: #C8005A; }
      .btn--bordered.btn--tertiary .icon {
        fill: #C8005A; }
      .btn--bordered.btn--tertiary:hover {
        border-color: #d3337b;
        color: #d3337b; }
        .btn--bordered.btn--tertiary:hover .icon {
          fill: #C8005A; }
    .btn--bordered.btn--quaternary {
      background-color: transparent;
      color: #FFC800;
      border-color: #FFC800; }
      .btn--bordered.btn--quaternary .icon {
        fill: #FFC800; }
      .btn--bordered.btn--quaternary:hover {
        border-color: #ffd333;
        color: #ffd333; }
        .btn--bordered.btn--quaternary:hover .icon {
          fill: #FFC800; }
    .btn--bordered.btn--success {
      background-color: transparent;
      color: #28A532;
      border-color: #28A532; }
      .btn--bordered.btn--success .icon {
        fill: #28A532; }
      .btn--bordered.btn--success:hover {
        border-color: #53b75b;
        color: #53b75b; }
        .btn--bordered.btn--success:hover .icon {
          fill: #28A532; }
    .btn--bordered.btn--info {
      background-color: transparent;
      color: #00ACD9;
      border-color: #00ACD9; }
      .btn--bordered.btn--info .icon {
        fill: #00ACD9; }
      .btn--bordered.btn--info:hover {
        border-color: #33bde1;
        color: #33bde1; }
        .btn--bordered.btn--info:hover .icon {
          fill: #00ACD9; }
    .btn--bordered.btn--warning {
      background-color: transparent;
      color: #FFC800;
      border-color: #FFC800; }
      .btn--bordered.btn--warning .icon {
        fill: #FFC800; }
      .btn--bordered.btn--warning:hover {
        border-color: #ffd333;
        color: #ffd333; }
        .btn--bordered.btn--warning:hover .icon {
          fill: #FFC800; }
    .btn--bordered.btn--danger {
      background-color: transparent;
      color: #FF3867;
      border-color: #FF3867; }
      .btn--bordered.btn--danger .icon {
        fill: #FF3867; }
      .btn--bordered.btn--danger:hover {
        border-color: #ff6085;
        color: #ff6085; }
        .btn--bordered.btn--danger:hover .icon {
          fill: #FF3867; }
    .btn--bordered.btn--light {
      background-color: transparent;
      color: #EFE8F1;
      border-color: #EFE8F1; }
      .btn--bordered.btn--light .icon {
        fill: #EFE8F1; }
      .btn--bordered.btn--light:hover {
        border-color: #f2edf4;
        color: #f2edf4; }
        .btn--bordered.btn--light:hover .icon {
          fill: #EFE8F1; }
    .btn--bordered.btn--dark {
      background-color: transparent;
      color: #010B19;
      border-color: #010B19; }
      .btn--bordered.btn--dark .icon {
        fill: #010B19; }
      .btn--bordered.btn--dark:hover {
        border-color: #343c47;
        color: #343c47; }
        .btn--bordered.btn--dark:hover .icon {
          fill: #010B19; }
    .btn--bordered.btn--white {
      background-color: transparent;
      color: #fff;
      border-color: #fff; }
      .btn--bordered.btn--white .icon {
        fill: #fff; }
      .btn--bordered.btn--white:hover {
        border-color: white;
        color: white; }
        .btn--bordered.btn--white:hover .icon {
          fill: #fff; }
  .btn--large {
    font-family: "VAG Rounded Std", Arial, sans-serif;
    width: 100%;
    justify-content: center; }
    @media (min-width: 700px) {
      .btn--large {
        width: auto; } }
    @media (min-width: 700px) {
      .btn--large {
        height: 3.46668rem;
        min-width: 4.00002rem;
        line-height: 3.46668rem;
        padding: 0 4.66669rem;
        font-size: 1.33333em; }
        .btn--large > span {
          padding: 0 10px; } }
  .btn--small {
    height: 2.00001rem;
    line-height: 2.00001rem;
    padding: 0 0.66667rem;
    font-size: 0.88889em;
    font-family: "VAG Rounded Std", Arial, sans-serif; }
  .btn--xsmall {
    height: 1.50001rem;
    line-height: 1.50001rem;
    padding: 0 0.66667rem;
    font-size: 0.66667em;
    font-family: "VAG Rounded Std", Arial, sans-serif; }
  .btn--with-icon, .btn--icon, .btn--submit.loading,
  .list--icons a, .btn--icon-only, .btn--next, .btn--back, .btn--down {
    position: relative; }
    .btn--with-icon .icon, .btn--icon .icon, .btn--submit.loading .icon, .list--icons a .icon, .btn--icon-only .icon, .btn--next .icon, .btn--back .icon, .btn--down .icon {
      width: .6em;
      height: .6em; }
  .btn--icon .icon, .btn--submit.loading .icon, .list--icons a .icon {
    margin: 0 0.33333rem; }
  .btn--icon-only,
  .list--icons a {
    width: auto;
    padding: 0 0.66667rem; }
  .btn--rounded {
    border-radius: 2.00001rem; }
  .btn--next .icon {
    margin: 0 0 0 0.33333rem; }
  .btn--back .icon {
    transform: rotate(180deg);
    margin: 0 0.33333rem 0 0; }
  .btn--down .icon {
    transform: rotate(90deg);
    margin: 0 0.33333rem 0 0; }
  .btn--submit .icon, button.btn--submit .icon {
    display: none; }
  .btn--submit.loading .icon, button.loading.btn--submit .icon {
    display: block;
    animation: rotation 1600ms infinite linear; }
  .btn--alpha {
    background-color: rgba(255, 255, 255, 0.8); }
    .btn--alpha:hover {
      background-color: rgba(255, 255, 255, 0.8); }

.btn-group .btn {
  border-radius: 0; }
  .btn-group .btn:first-child {
    border-top-left-radius: 2.00001rem;
    border-bottom-left-radius: 2.00001rem; }
  .btn-group .btn:last-child {
    border-top-right-radius: 2.00001rem;
    border-bottom-right-radius: 2.00001rem; }

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.66667rem; }
  .row > * {
    padding-left: 0.66667rem;
    padding-right: 0.66667rem;
    box-sizing: border-box; }
  .row--space-between {
    justify-content: space-between; }

.column {
  flex: 1 0 0;
  width: auto; }

.col-sm-1 {
  flex: 0 0 8.33333%;
  min-width: 8.33333%; }

.col-sm-2 {
  flex: 0 0 16.66667%;
  min-width: 16.66667%; }

.col-sm-3 {
  flex: 0 0 25%;
  min-width: 25%; }

.col-sm-4 {
  flex: 0 0 33.33333%;
  min-width: 33.33333%; }

.col-sm-5 {
  flex: 0 0 41.66667%;
  min-width: 41.66667%; }

.col-sm-6 {
  flex: 0 0 50%;
  min-width: 50%; }

.col-sm-7 {
  flex: 0 0 58.33333%;
  min-width: 58.33333%; }

.col-sm-8 {
  flex: 0 0 66.66667%;
  min-width: 66.66667%; }

.col-sm-9 {
  flex: 0 0 75%;
  min-width: 75%; }

.col-sm-10 {
  flex: 0 0 83.33333%;
  min-width: 83.33333%; }

.col-sm-11 {
  flex: 0 0 91.66667%;
  min-width: 91.66667%; }

.col-sm-12 {
  flex: 0 0 100%;
  min-width: 100%; }

@media screen and (min-width: 40em) {
  .col-md-1 {
    flex: 0 0 8.33333%;
    min-width: 8.33333%; } }

@media screen and (min-width: 40em) {
  .col-md-2 {
    flex: 0 0 16.66667%;
    min-width: 16.66667%; } }

@media screen and (min-width: 40em) {
  .col-md-3 {
    flex: 0 0 25%;
    min-width: 25%; } }

@media screen and (min-width: 40em) {
  .col-md-4 {
    flex: 0 0 33.33333%;
    min-width: 33.33333%; } }

@media screen and (min-width: 40em) {
  .col-md-5 {
    flex: 0 0 41.66667%;
    min-width: 41.66667%; } }

@media screen and (min-width: 40em) {
  .col-md-6 {
    flex: 0 0 50%;
    min-width: 50%; } }

@media screen and (min-width: 40em) {
  .col-md-7 {
    flex: 0 0 58.33333%;
    min-width: 58.33333%; } }

@media screen and (min-width: 40em) {
  .col-md-8 {
    flex: 0 0 66.66667%;
    min-width: 66.66667%; } }

@media screen and (min-width: 40em) {
  .col-md-9 {
    flex: 0 0 75%;
    min-width: 75%; } }

@media screen and (min-width: 40em) {
  .col-md-10 {
    flex: 0 0 83.33333%;
    min-width: 83.33333%; } }

@media screen and (min-width: 40em) {
  .col-md-11 {
    flex: 0 0 91.66667%;
    min-width: 91.66667%; } }

@media screen and (min-width: 40em) {
  .col-md-12 {
    flex: 0 0 100%;
    min-width: 100%; } }

@media screen and (min-width: 64em) {
  .col-log-1 {
    flex: 0 0 8.33333%;
    min-width: 8.33333%; } }

@media screen and (min-width: 64em) {
  .col-log-2 {
    flex: 0 0 16.66667%;
    min-width: 16.66667%; } }

@media screen and (min-width: 64em) {
  .col-log-3 {
    flex: 0 0 25%;
    min-width: 25%; } }

@media screen and (min-width: 64em) {
  .col-log-4 {
    flex: 0 0 33.33333%;
    min-width: 33.33333%; } }

@media screen and (min-width: 64em) {
  .col-log-5 {
    flex: 0 0 41.66667%;
    min-width: 41.66667%; } }

@media screen and (min-width: 64em) {
  .col-log-6 {
    flex: 0 0 50%;
    min-width: 50%; } }

@media screen and (min-width: 64em) {
  .col-log-7 {
    flex: 0 0 58.33333%;
    min-width: 58.33333%; } }

@media screen and (min-width: 64em) {
  .col-log-8 {
    flex: 0 0 66.66667%;
    min-width: 66.66667%; } }

@media screen and (min-width: 64em) {
  .col-log-9 {
    flex: 0 0 75%;
    min-width: 75%; } }

@media screen and (min-width: 64em) {
  .col-log-10 {
    flex: 0 0 83.33333%;
    min-width: 83.33333%; } }

@media screen and (min-width: 64em) {
  .col-log-11 {
    flex: 0 0 91.66667%;
    min-width: 91.66667%; } }

@media screen and (min-width: 64em) {
  .col-log-12 {
    flex: 0 0 100%;
    min-width: 100%; } }

/*--------------------------------
 * Links
 _________________________________ */
.link--border span {
  border-bottom: 1px solid #641C76; }

.link--border:hover span {
  border-color: #28A532; }

.link--small {
  font-size: 0.77778em; }

.link--large {
  font-size: 1.33333em;
  display: block;
  text-align: center;
  width: 100%; }
  @media (min-width: 700px) {
    .link--large {
      display: inline-block;
      text-align: inherit;
      width: auto; } }

.link--icon .icon,
.list--links a .icon {
  display: inline-block;
  margin-right: 10px;
  width: 1.11111em;
  height: 1.11111em; }

.link--next .icon {
  display: inline-block;
  margin-left: 10px;
  width: 1.11111em;
  height: 1.11111em; }

.link--prev .icon {
  display: inline-block;
  margin-right: 10px;
  width: 1.11111em;
  height: 1.11111em;
  transform: rotate(-180deg); }


.list {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0; }
  
  .list li {
    margin-bottom: 0; }
  
  .list--striped {
    list-style: none;
    margin-left: 0; }
    
    .list--striped > li {
      border-color: #28A532;
      border-style: solid;
      padding: 10px 10px;
      border-bottom-width: 1px; }
      
      .list--striped > li:first-of-type {
        border-top-width: 1px; }
  
  .list--margin li {
    margin-bottom: 0.66667rem; }
  
  .list--links li {
    margin-bottom: 0.66667rem; }
  
  .list--links a {
    padding-left: 1.33334rem;
    display: block;
    position: relative; }
    
    .list--links a::before {
      transform: scale(0.8);
      position: absolute;
      left: 0; }
    
    .list--links a span {
      border-bottom: 1px solid #010B19; }
    
    .list--links a:hover {
      color: #010B19; }
      
      .list--links a:hover span {
        color: #D8C6DC;
        border-color: #D8C6DC; }
  
  .list--icon li {
    padding-left: 30px;
    position: relative; }
    
    .list--icon li .icon {
      position: absolute;
      width: 1.11111em;
      height: 1.11111em;
      left: 0; }
  
  .list--nav a {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.77778em;
    letter-spacing: 0.15em; }
  
  .list--btn li {
    margin-bottom: 1.00001rem; }
    
    .list--btn li:last-child {
      margin-bottom: 0; }
    
    .list--btn li a {
      display: inline-block; }
  
  .list--horiz li {
    display: inline-block; }
  
  .list--horiz-padding li {
    margin: 0 1.33334rem 1.33334rem 0; }
  
  .list--icons a {
    margin: 0 0.66667rem 0.66667rem 0;
    padding: 0; }
    
    .list--icons a .icon {
      margin: 0;
      height: 1.77778em;
      width: 1.77778em; }
  
  .list--faqs li {
    padding: 1.00001rem 0; }
    
    .list--faqs li:not(:last-child) {
      border-bottom: 1px solid #f0e8f1; }
    
    .list--faqs li a {
      color: #010B19;
      display: inline-flex;
      align-items: center; }
      
      .list--faqs li a:hover {
        text-decoration: none; }
      
      .list--faqs li a.active .icon {
        color: #641C76; }
    
    .list--faqs li .icon {
      float: left;
      transition: transform 200ms ease-in-out;
      width: 0.77778em;
      height: 0.77778em;
      margin: -0.11111em 0.66667rem 0 0; }
    
    .list--faqs li:hover .icon {
      color: #641C76; }
  
  .list--contact li a {
    color: #010B19;
    display: flex;
    align-items: center; }
  
  .list--contact li .icon {
    float: left;
    width: 0.88889em;
    height: 0.88889em;
    margin: 0 1.00001rem 0 0;
    color: #fff; }
  
  .list--partners li a img {
    height: 1.33333em;
    width: auto; }

.tag {
  display: inline-block;
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-weight: 700;
  text-transform: none;
  background-color: transparent;
  color: #641C76;
  border: 2px solid #e0d2e4;
  border-radius: 4px;
  height: 2.00001rem;
  line-height: 2.00001rem;
  padding: 0 1.00001rem;
  font-size: 0.88889em;
  font-family: "VAG Rounded Std", Arial, sans-serif;
  transition: all 375ms cubic-bezier(0.52, 0.07, 0.61, 1.19);
  margin-bottom: 0.66667rem; }
  .tag:hover, a:hover .tag {
    text-decoration: none;
    background-color: transparent;
    border-color: #641C76;
    color: #641C76; }
  strong.tag {
    pointer-events: none; }
  .tag--xsmall {
    height: 1.70001rem;
    line-height: 1.70001rem;
    padding: 0 0.66667rem;
    font-size: 0.66667em; }
  .tag--primary {
    border-color: #641C76;
    color: #641C76; }
    .tag--primary:hover {
      color: #fff;
      background: #641c76; }
  .tag--white {
    border-color: #fff;
    color: #fff; }
    .tag--white:hover {
      border-color: #fff;
      color: #fff;
      background: rgba(255, 255, 255, 0.15); }
  .tag--active {
    background-color: #641C76;
    border-color: #641C76;
    color: #fff; }

.sb-screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='1280px' height='468px' viewBox='0 0 1280 468' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3ClinearGradient x1='2.22044605e-14%25' y1='56.2059951%25' x2='96.5611761%25' y2='43.3356547%25' id='linearGradient-1'%3E%3Cstop stop-color='%23F3EEF5' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23FDFCFD' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Artboards' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Bouwen-aan-later---Intro-Copy-16' transform='translate(0.000000, -232.000000)' fill='url(%23linearGradient-1)'%3E%3Cpath d='M1280,232.691466 C1037.75746,232.691466 849.433532,507.802193 709.013746,507.802193 C568.572617,507.802193 483.215229,402.688741 356.571713,402.688741 C140.4518,402.688741 0,700 0,700 L1280,699.707657 L1280,232.691466 Z' id='Fill-1'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 120%;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 0;
  overflow: hidden; }
  @media (min-width: 1024px) {
    .sb-screen {
      animation: wavingbg 10s linear infinite; } }
  .has-footer .sb-screen {
    bottom: 72px; }
  .sb-screen__inner {
    position: absolute;
    top: 0px;
    right: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 1.33334rem;
    padding-top: 6.6667rem;
    animation: showSlide 475ms ease forwards;
    opacity: 0; }
    @media (min-width: 700px) {
      .sb-screen__inner {
        padding: 6.6667rem 15%; } }
  .sb-screen__actions {
    margin-top: 1.33334rem;
    position: absolute;
    bottom: 1.33334rem;
    left: 1.33334rem;
    right: 1.33334rem;
    text-align: center; }
    @media (min-width: 700px) {
      .sb-screen__actions {
        bottom: 72px;
        left: 72px;
        right: 72px; }
        .sb-panel .sb-screen__actions {
          text-align: right; }
        .sb-panel--feedback .sb-screen__actions {
          text-align: center; } }
    @media (max-width: 700px) {
      .sb-question .sb-screen__actions {
        position: static; } }
  @media (min-width: 1024px) {
    .sb-screen--centered .sb-screen__inner {
      display: flex;
      flex-direction: column;
      justify-content: center; } }
  .sb-screen--centered .sb-image {
    position: absolute;
    bottom: -1.33334rem;
    right: 0;
    width: 100%;
    z-index: -1; }
  .sb-screen--splash .sb-screen__inner {
    bottom: 0;
    padding-top: 5.33336rem; }
    @media (min-width: 700px) {
      .sb-screen--splash .sb-screen__inner {
        overflow: hidden; } }
  .sb-screen--splash .sb-content {
    text-align: center; }
    @media (min-width: 1024px) {
      .sb-screen--splash .sb-content {
        width: 40%; } }
  .sb-screen--splash .sb-text, .sb-screen--splash .sb-feedback__text {
    position: relative; }
  .sb-screen--splash .sb-screen__actions .btn {
    margin: 0 0.26667rem; }
  @media (max-width: 700px) {
    .sb-screen--splash .sb-screen__actions {
      position: static; }
      .sb-screen--splash .sb-screen__actions .btn {
        margin: 0.26667rem 0; } }
  .sb-screen--splash .sb-logo {
    position: relative;
    z-index: 2;
    width: 100%; }
    @media (min-width: 700px) {
      .sb-screen--splash .sb-logo {
        width: 55vw;
        margin-left: -10%;
        margin-top: 0%;
        margin-bottom: 4.00002rem; }
        .sb-screen--splash .sb-logo img {
          width: 100%; } }
    @media (min-width: 1024px) {
      .sb-screen--splash .sb-logo {
        width: 35vw;
        margin-left: -10%;
        margin-top: 10%; } }
  .sb-screen--splash .sb-illustration {
    display: block;
    margin-top: -15%;
    margin-bottom: -15%; }
    @media (min-width: 700px) {
      .sb-screen--splash .sb-illustration {
        margin-top: -35%; } }
    @media (min-width: 1024px) {
      .sb-screen--splash .sb-illustration {
        position: fixed;
        right: 0;
        left: 40%;
        bottom: 10%;
        margin-bottom: 0; } }
    @media (min-width: 1250px) {
      .sb-screen--splash .sb-illustration {
        bottom: 0%; } }
  .sb-screen--splash .sb-interaction-settings {
    margin: 1.33334rem 0; }
  .sb-screen--splash .list--partners {
    text-align: center;
    margin-top: 2.66668rem; }
    @media (min-width: 700px) {
      .sb-screen--splash .list--partners {
        position: absolute;
        top: 0;
        right: 0; } }
    @media (min-width: 1024px) {
      .sb-screen--splash .list--partners {
        right: 1.33334rem;
        text-align: left; } }
  .sb-screen--splash .sb-screen__actions {
    text-align: center; }
    @media (min-width: 1024px) {
      .sb-screen--splash .sb-screen__actions {
        bottom: 72px; } }
  @media (min-width: 1024px) {
    .sb-screen--splash-outro .sb-content {
      text-align: left;
      width: 50%;
      justify-content: center;
      margin-top: 10%; } }
  .sb-screen--splash-outro .sb-subtitle {
    margin-bottom: 1.33334rem; }
  .sb-screen--splash-outro .list--partners {
    margin-top: 5.33336rem;
    position: relative;
    bottom: inherit;
    right: inherit; }
  .sb-screen--splash-connect .sb-title, .sb-screen--splash-connect .sb-feedback__title {
    font-size: 1.55556em; }
  .sb-screen--splash-connect .field {
    margin: 1.33334rem auto 2.66668rem auto; }
    .sb-screen--splash-connect .field input {
      margin: 0 auto; }
  .sb-screen--video .play-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    z-index: 9; }
    .sb-screen--video .play-video .icon {
      color: #fff;
      height: 10vh;
      width: auto; }
  .sb-screen .timer {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #f0e8f1;
    font-size: 20vh;
    z-index: -1; }
    @media (min-width: 1024px) {
      .sb-screen .timer {
        font-size: 50vh;
        top: 35%;
        left: -5%;
        transform: translate(0%, -50%); } }

.sb-screen--video {
  display: flex;
  align-items: center;
  justify-content: center; }
  .sb-screen--video .sb-video {
    position: relative;
    width: 70%;
    height: auto; }
    .sb-screen--video .sb-video::before {
      content: '';
      padding-top: 56.25%;
      display: block; }
    .sb-screen--video .sb-video video {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 5px;
      box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; }

@media (min-width: 1024px) {
  .type-quizresults .sb-screen__inner {
    padding-left: 8%;
    padding-right: 8%; } }

.sb-bg-image {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; }
  .sb-bg-image img {
    width: 100%;
    display: block; }

.v-align {
  height: 100vh;
  display: flex;
  align-items: center; }

.btn-options .btn {
  margin: 0.66667rem 0; }

@media (min-width: 700px) {
  .btn-options .btn {
    margin: 1.33334rem; } }

.btn-set {
  position: relative;
  display: inline-block;
  margin: 0.66667rem; }
  .btn-set .btn {
    margin: 0; }
  .btn-set .btn-sub {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    display: none; }
    .btn-set .btn-sub .btn {
      width: 100%;
      margin-bottom: -3px;
      background: #641C76;
      color: #fff;
      border-color: #641C76; }
      .btn-set .btn-sub .btn:hover {
        border-color: #41124d;
        background-color: #41124d; }
  .btn-set:hover .btn-sub {
    display: block; }

.sb-screen--splash .sb-text .btn, .sb-screen--splash .sb-feedback__text .btn {
  margin-top: 5.33336rem; }

.sb-footer {
  position: fixed;
  height: 72px;
  left: 0;
  bottom: 0;
  right: 0;
  background: #641C76;
  animation: showPanel 475ms ease forwards; }
  .sb-footer .sb-nav {
    position: absolute;
    height: 100%;
    left: 0; }
    .sb-footer .sb-nav .btn {
      padding: 0 1.33334rem; }
      .sb-footer .sb-nav .btn svg {
        height: 1.2em;
        width: 1.2em; }
  .sb-footer .sb-actions {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); }
  .sb-footer .sb-interaction-settings {
    position: absolute;
    right: 1.33334rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0; }
    .sb-footer .sb-interaction-settings__code {
      margin-left: 1.60001rem; }
    .sb-footer .sb-interaction-settings span {
      font-size: 1.44444em; }
    .sb-footer .sb-interaction-settings .icon {
      margin: 0 0.66667rem 0 0;
      height: 1em;
      width: 1em; }
  .sb-footer .btn {
    border-radius: 0;
    height: 100%; }

.sb-interaction-settings {
  display: flex;
  align-items: center;
  color: #fff;
  background: #641C76;
  display: inline-flex;
  align-self: flex-start;
  padding: 0 2.00001rem;
  height: 3.46668rem;
  border-radius: 3.46668rem; }
  .sb-interaction-settings__code {
    margin-left: 2.00001rem; }
  .sb-interaction-settings span {
    font-size: 1.77778em; }
  .sb-interaction-settings .icon {
    margin: 0 0.66667rem 0 0;
    height: 1.2em;
    width: 1.2em; }

.sb-header .sb-logo {
  position: fixed;
  top: 1.33334rem;
  left: 1.33334rem;
  width: 170px;
  z-index: 2; }

.sb-header .sb-timer {
  position: absolute;
  top: 1.33334rem;
  right: 1.33334rem;
  color: #D8C6DC; }

.sb-header .pagination {
  position: fixed;
  top: 1.33334rem;
  right: 1.33334rem;
  color: #e0d1e3;
  z-index: 2; }

.sb-card {
  padding: 0.66667rem;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  transition: 500ms box-shadow ease; }
  .sb-card.is-done img {
    opacity: 0.2; }
  .sb-card__title {
    margin-top: 1.33334rem;
    display: block;
    text-align: center;
    font-size: 0.88889em;
    line-height: 1.2;
    color: #28A532; }
    @media (min-width: 700px) {
      .sb-card__title {
        font-size: 1em;
        line-height: 1.5; } }
  .sb-card__image {
    position: relative;
    width: 100%;
    border-radius: 50%;
    box-shadow: 1px 3px 6px 0 rgba(100, 28, 118, 0.2);
    transition: 500ms box-shadow ease;
    overflow: hidden;
    height: auto;
    background: white;
    transition: box-shadow 172ms cubic-bezier(0.52, 0.07, 0.61, 1.19), transform 172ms cubic-bezier(0.52, 0.07, 0.61, 1.19); }
    .sb-card__image::before {
      content: '';
      padding-bottom: 100%;
      display: block; }
    .sb-card__image img {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0; }
    .sb-card__image .icon {
      position: absolute;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      left: 50%;
      text-align: center;
      color: #28A532;
      font-size: 48px; }
  .sb-card--basic, .wrap.subtype-buttons .sb-card {
    background: #fff;
    box-shadow: 1px 3px 6px 0 rgba(100, 28, 118, 0.2);
    padding: 2.66668rem; }
    .sb-card--basic .sb-card__title, .wrap.subtype-buttons .sb-card .sb-card__title {
      color: #28A532;
      text-align: center;
      margin-top: 0; }
    .sb-card--basic:hover, .wrap.subtype-buttons .sb-card:hover {
      box-shadow: 1px 4px 8px 0 rgba(100, 28, 118, 0.25); }
  .sb-card:hover {
    text-decoration: none; }
    .sb-card:hover .sb-card__image {
      box-shadow: 1px 4px 8px 0 rgba(100, 28, 118, 0.25);
      transform: scale(1.02); }
  .sb-card-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center; }
    .sb-card-grid .sb-card {
      width: 50%; }
      @media (min-width: 700px) {
        .sb-card-grid .sb-card {
          width: 30%; } }
      @media (min-width: 1024px) {
        .sb-card-grid .sb-card {
          padding: 1.33334rem; } }
      @media (min-width: 1250px) {
        .sb-card-grid .sb-card {
          padding-right: 2.66668rem;
          padding-left: 2.66668rem; } }
    @media (min-width: 700px) {
      .sb-card-grid--4 .sb-card {
        width: 50%; } }
    @media (min-width: 1024px) {
      .sb-card-grid--4 .sb-card {
        width: 25%;
        padding: 1.33334rem; } }
    @media (min-width: 1250px) {
      .sb-card-grid--4 .sb-card {
        width: 25%; } }

.sb-content {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.33334rem; }
  .sb-content--center {
    text-align: center; }
    .sb-content--center > .btn {
      align-self: center; }
  .sb-content:last-child, .sb-content:only-child {
    margin-bottom: 0; }

.sb-title, .sb-feedback__title {
  font-size: 1.55556em;
  color: #641C76;
  line-height: 1.2; }
  .sb-title span, .sb-feedback__title span {
    color: #28A532; }
  .sb-title:last-child, .sb-feedback__title:last-child, .sb-title:only-child, .sb-feedback__title:only-child {
    margin-bottom: 0; }
  @media (min-width: 700px) {
    .sb-title, .sb-feedback__title {
      font-size: 2.33333em; } }

.sb-pretitle {
  position: absolute;
  top: 5.33336rem;
  left: 0;
  width: 100%;
  text-align: center;
  color: #28A532;
  font-size: 1.33333em;
  line-height: 1.2;
  z-index: 2; }

.sb-text, .sb-feedback__text {
  margin-bottom: 1.33334rem; }
  .sb-text:last-child, .sb-feedback__text:last-child, .sb-text:only-child, .sb-feedback__text:only-child {
    margin-bottom: 0; }

.sb-subtitle {
  color: #28A532;
  font-size: 1.11111em;
  margin-bottom: 1.33334rem;
  line-height: 1.2; }
  @media (min-width: 700px) {
    .sb-subtitle {
      font-size: 1.33333em;
      margin-bottom: 2.66668rem; } }
  .sb-subtitle:last-child, .sb-subtitle:only-child {
    margin-bottom: 0; }

.sb-question__input {
  margin-top: 1.33334rem; }

.sb-question__input input,
.field--number input {
  border: 3px solid #641C76;
  color: #28A532;
  height: 64px;
  line-height: 58px;
  border-radius: 64px;
  font-size: 32px;
  padding: 0 32px;
  max-width: 250px; }
  .sb-question__input input:focus,
  .field--number input:focus {
    border-color: #28A532; }

.sb-module__overview {
  height: 100%;
  width: 100%;
  overflow-y: auto; }
  .sb-module__overview .sb-content {
    width: 100%; }
    .sb-panel .sb-module__overview .sb-content {
      margin-top: 80px; }
      @media (min-width: 1024px) {
        .sb-panel .sb-module__overview .sb-content {
          margin-top: 140px; } }
  @media (max-width: 700px) {
    .sb-module__overview .sb-pretitle {
      display: none; } }
  .sb-module__overview .sb-overview {
    display: flex;
    justify-content: center;
    margin: 0 1.33334rem;
    flex-direction: column; }
    @media (min-width: 700px) {
      .sb-module__overview .sb-overview {
        flex-direction: row; } }
    @media (min-width: 1024px) {
      .sb-module__overview .sb-overview {
        padding: 0 15%; } }
    .sb-module__overview .sb-overview > div {
      margin: 12px 0;
      width: 100%;
      text-align: left;
      background: #EFE8F1;
      padding: 1.33334rem;
      border-radius: 10px; }
      .sb-module__overview .sb-overview > div .title {
        margin: 0;
        margin-bottom: 0.66667rem; }
      .sb-module__overview .sb-overview > div .subtitle {
        margin: 0;
        font-size: 1.33333em;
        margin-bottom: 0.66667rem; }
      .sb-module__overview .sb-overview > div ul {
        margin: 0; }
      @media (min-width: 700px) {
        .sb-module__overview .sb-overview > div {
          margin: 0 24px; } }
    .sb-module__overview .sb-overview .option__inner {
      width: auto; }
    .sb-module__overview .sb-overview .list__item {
      margin-bottom: 1.33334rem;
      font-size: 1.11111em; }
      .sb-module__overview .sb-overview .list__item:last-child {
        margin-bottom: 0; }

.list__item {
  position: relative;
  margin-bottom: 1.33334rem;
  padding-left: 1.33334rem;
  line-height: 1.1; }
  .list__item .icon {
    position: absolute;
    left: 0;
    color: #28A532; }

.timeline {
  position: absolute;
  top: 43%;
  left: 0;
  right: 0;
  height: 6px;
  background: #641C76;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  color: #EFE8F1;
  transition: transform 1500ms ease-in-out; }
  .timeline__step {
    position: relative;
    width: 40vw;
    transform: translateX(74%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #641C76; }
    .timeline__step > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative; }
    .timeline__step::before {
      content: '';
      display: block;
      width: 5px;
      height: 16px;
      background: #641C76;
      position: absolute;
      left: 0%; }
    .timeline__step.is-active {
      color: #641C76;
      z-index: 10; }
      .timeline__step.is-active::before {
        background: #641C76; }
    .timeline__step span {
      display: block;
      line-height: 1;
      text-align: center;
      position: absolute;
      top: 110%;
      width: 120%; }
    .timeline__step.is-active span {
      font-size: 24px; }
      @media (max-width: 700px) {
        .timeline__step.is-active span {
          top: 160%;
          width: 200%; } }
  .timeline__image {
    border-radius: 100%;
    overflow: hidden;
    width: 80px;
    height: 80px; }
    .timeline__image img {
      display: block;
      filter: grayscale(100%); }
    .is-active .timeline__image {
      width: 120px;
      height: 120px;
      box-shadow: 1px 3px 6px 0 rgba(100, 28, 118, 0.2); }
      @media (min-width: 700px) {
        .is-active .timeline__image {
          width: 240px;
          height: 240px; } }
      .is-active .timeline__image img {
        filter: none; }

.stat-bar {
  position: relative;
  width: 100%;
  height: 10px;
  background: #e0d2e4;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 5px; }
  .stat-bar__progress {
    position: absolute;
    height: 100%;
    width: 0%;
    background-color: #641C76; }

.stat {
  display: block;
  line-height: 1.1;
  margin-top: 10px; }

.list--stats li {
  margin-bottom: 10px; }

.sb-question {
  padding: 1.33334rem;
  padding-top: 6.6667rem; }
  .sb-pretitle + .sb-question {
    padding-top: 9.33338rem; }
  @media (min-width: 700px) {
    .sb-question {
      padding: 6.6667rem 15%; }
      .sb-pretitle + .sb-question {
        padding-top: 9.33338rem; } }
  @media (min-width: 1024px) {
    .sb-question {
      display: flex;
      height: 100%; }
      .sb-pretitle + .sb-question {
        padding-top: 9.33338rem; } }
  .sb-question__inner {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    animation: showPanel 475ms ease forwards; }
    @media (min-width: 1024px) {
      .sb-question__inner {
        flex-direction: row; } }
  .sb-question__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%; }
    .sb-question__content .btn {
      margin-top: 1.33334rem; }
  .sb-question__counter {
    font-size: 0.94444em;
    margin-bottom: 1.33334rem;
    color: #641C76; }
  .sb-question__moduletitle {
    font-size: 1.55556em;
    color: #28A532;
    margin-bottom: 1.33334rem; }
  .sb-question__question {
    display: inline-block;
    width: 100%;
    color: #641C76;
    font-size: 1.33333em;
    margin-bottom: 1.33334rem;
    line-height: 1.2; }
    .sb-question__question .unit {
      font-size: 1em; }
    @media (min-width: 700px) {
      .sb-question__question {
        font-size: 2.33333em; }
        .sb-question__question .unit {
          font-size: .5em; } }
  .sb-question__heading {
    display: flex;
    flex-direction: column; }
  .sb-question__subtitle {
    display: inline-block;
    width: 100%;
    margin-bottom: 1.33334rem;
    color: #010B19;
    font-size: 1.11111em; }
    @media (min-width: 700px) {
      .sb-question__subtitle {
        font-size: 1.33333em; } }
  .sb-question__input {
    display: block; }
  .sb-question__prev {
    top: 1.33334rem;
    left: 1.33334rem;
    position: absolute;
    z-index: 110; }
    .sb-question__prev .icon {
      transform: rotate(180deg); }
  .sb-question__layout .option {
    min-width: 300px; }
  @media (min-width: 1024px) {
    .sb-question__layout {
      display: flex; }
      .sb-question__layout .sb-question__content {
        text-align: left;
        flex: 1 50%;
        padding: 0 2.66668rem 0 0; }
      .sb-question__layout .sb-question__options {
        flex: 1 50%;
        padding: 0 2.66668rem 0 0; } }
  .sb-question--abc, .sb-question--centered {
    text-align: center; }
    @media (min-width: 700px) {
      .sb-question--abc, .sb-question--centered {
        padding-top: 0; }
        .sb-question--abc .options__inner, .sb-question--centered .options__inner {
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center; }
        .sb-question--abc .sb-question__inner, .sb-question--centered .sb-question__inner {
          justify-content: center;
          align-items: center;
          flex-direction: column;
          margin-top: -72px; } }
  .sb-question--dilemma .sb-question__moduletitle {
    position: absolute;
    top: 4.00002rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9; }
  .sb-question--dilemma .sb-question__counter {
    position: absolute;
    top: 8.00004rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9; }
  .sb-question--dilemma .sb-question__heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    pointer-events: none;
    text-align: center;
    animation: 375ms showQuestion; }
  .sb-question--dilemma .sb-question__image {
    width: 100%;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 1px 3px 6px 0 rgba(100, 28, 118, 0.2);
    margin: 0 auto 1.33334rem auto;
    position: relative; }
    @media (min-width: 700px) {
      .sb-question--dilemma .sb-question__image {
        width: 320px; } }
    .sb-question--dilemma .sb-question__image::before {
      content: '';
      display: block;
      padding-bottom: 100%; }
    .sb-question--dilemma .sb-question__image img {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0; }
  .sb-question--dilemma .options {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    z-index: 1; }
  .sb-question--dilemma .options__inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: row; }
  .sb-question--dilemma .option {
    flex: 1 50%;
    height: 100%;
    border-radius: 0;
    margin: 0;
    border: none;
    background: #fff; }
    .sb-question--dilemma .option__inner {
      position: absolute;
      bottom: 0.66667rem;
      left: 0.66667rem;
      right: 0.66667rem;
      text-align: center;
      width: auto;
      justify-content: center; }
      @media (min-width: 700px) {
        .sb-question--dilemma .option__inner {
          left: 4.00002rem;
          right: 4.00002rem;
          bottom: 4.00002rem; } }
    .sb-question--dilemma .option:first-child {
      border-right: 1px solid #f0e8f1; }
    .sb-module--boss .sb-question--dilemma .option:hover {
      background: #f0e8f1; }
  .sb-module--quiz .sb-question .sb-question__content {
    margin-top: 1.33334rem; }
    @media (min-width: 1024px) {
      .sb-module--quiz .sb-question .sb-question__content {
        width: 55%;
        margin-right: 15%; } }
  .sb-module--quiz .sb-question .sb-question__image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    margin: 1.33334rem;
    border-radius: 50%;
    overflow: hidden; }
    .sb-module--quiz .sb-question .sb-question__image img {
      width: 100%; }
    @media (min-width: 1024px) {
      .sb-module--quiz .sb-question .sb-question__image {
        width: 30%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .sb-module--money-challenge .sb-question {
      margin-left: 50%;
      padding-left: 0; } }
  @media (min-width: 1024px) {
    .sb-module--money-challenge .sb-question .dragbar-cnt {
      position: absolute;
      top: 0%;
      left: 0;
      width: 45%;
      bottom: 0;
      z-index: 1; } }
  .sb-module--money-challenge .sb-question .sb-question__question input {
    color: #28A532;
    display: inline-block;
    width: 200px;
    margin: 0.66667rem 0.66667rem 0 0; }
  .sb-module--money-challenge .sb-question .sb-question__counter {
    position: absolute;
    top: 8.00004rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9; }
  .sb-question.sb-question--dragdropmatch {
    display: flex;
    height: 100%;
    align-items: center;
    padding-bottom: 0; }
    .sb-question.sb-question--dragdropmatch .sb-question__moduletitle {
      text-align: center;
      margin-top: 1.33334rem; }
    .sb-question.sb-question--dragdropmatch .sb-question__question {
      color: #010B19;
      font-size: 1.11111em;
      text-align: center; }
    .sb-question.sb-question--dragdropmatch .options {
      text-align: center;
      position: relative;
      z-index: 1; }

.sb-counter {
  color: #28A532; }

.piramid {
  display: flex;
  flex-direction: column;
  margin-top: 4.00002rem;
  margin-left: -1.33334rem;
  margin-right: -1.33334rem;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 24px solid #EFE8F1; }
  .piramid__bg {
    position: absolute;
    left: 50%;
    width: 750px;
    top: -192px;
    transform: translateX(-50%);
    display: none; }
  @media (min-width: 700px) {
    .piramid {
      margin-left: auto;
      margin-right: auto; } }
  .piramid__layer {
    color: #641C76;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    position: relative; }
    .piramid__layer:nth-of-type(1) {
      background: #f2e8f2; }
    .piramid__layer:nth-of-type(2) {
      background: #e3cbe5; }
    .piramid__layer:nth-of-type(3) {
      background: #c7a4c9; }
    .piramid__layer.is-active {
      border-bottom-color: #f7f4f8; }
  .piramid__content {
    height: 120px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    @media (min-width: 700px) {
      .piramid__content {
        height: 120px;
        justify-content: space-around;
        flex-direction: row; } }
  .piramid__label {
    display: block;
    line-height: 1.2;
    text-align: center;
    margin-top: 1.33334rem;
    font-size: 0.77778em;
    order: 2; }
    @media (min-width: 700px) {
      .piramid__label {
        font-size: 1.33333em;
        width: 40%;
        text-align: right;
        margin-top: 0; } }
  .piramid__input {
    height: 2.66668rem;
    line-height: 2.66668rem;
    font-size: 1.11111em;
    padding: 0 1.33334rem;
    border: 3px dashed #641C76;
    border-radius: 4.00002rem;
    background: #fff;
    width: 100%;
    max-width: 400px;
    color: #28A532;
    text-align: center; }
    @media (min-width: 700px) {
      .piramid__input {
        font-size: 1.33333em;
        width: 50%;
        height: 4.00002rem;
        line-height: 4.00002rem; } }
    .is-active .piramid__input {
      border-color: #28A532;
      height: 4.00002rem;
      line-height: 4.00002rem; }
    .is-done .piramid__input {
      border-style: solid;
      border-color: transparent; }

.progress-bar {
  background: rgba(100, 28, 118, 0.05);
  position: fixed;
  top: 36px;
  left: 50%;
  right: 1.33334rem;
  height: 0.33333rem;
  z-index: 2;
  border-radius: 1.33334rem; }
  @media (min-width: 700px) {
    .progress-bar {
      top: 36px;
      left: 20%;
      right: 20%;
      height: 0.66667rem; } }
  .progress-bar__indicator {
    display: block;
    background: #28A532;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 1.33334rem;
    transition: width 275ms cubic-bezier(0.52, 0.07, 0.61, 1.19); }
  .progress-bar__done {
    position: absolute;
    top: 50%;
    right: 0;
    width: 1.33334rem;
    height: 1.33334rem;
    line-height: 1.33334rem;
    text-align: center;
    border-radius: 2.66668rem;
    color: #fff;
    transform: translateX(50%) translateY(-50%);
    background: #28A532;
    display: inline-flex;
    align-items: center;
    justify-content: center; }
    .progress-bar__done .icon {
      font-size: 14px; }
    @media (min-width: 700px) {
      .progress-bar__done {
        right: -0.66667rem;
        width: 2.66668rem;
        height: 2.66668rem;
        line-height: 2.66668rem; }
        .progress-bar__done .icon {
          font-size: 24px; } }

@keyframes showQuestion {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5); }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); } }

.options {
  list-style: none;
  border: none;
  margin: -5px;
  padding: 0; }
  .options:after {
    content: "";
    display: table;
    clear: both; }
  .options__inner {
    display: flex;
    flex-direction: column; }

.option {
  position: relative;
  display: block;
  margin: 5px;
  background: none;
  -webkit-appearance: none; }
  .option__inner {
    display: block;
    background: #fff;
    border: 3px solid #641C76;
    border-radius: 48px;
    height: 56px;
    font-size: 1em;
    line-height: 1;
    padding: 1.33334rem;
    color: #641C76;
    text-align: left;
    display: inline-flex;
    align-items: center;
    width: 100%; }
    .options--disabled .option__inner {
      border-color: #e0d2e4;
      cursor: default; }
  .option input[type="radio"],
  .option input[type="checkbox"] {
    opacity: 0;
    position: absolute; }
    .option input[type="radio"]:checked + .option__inner,
    .option input[type="checkbox"]:checked + .option__inner {
      color: #fff;
      border-color: #28A532;
      background: #28A532; }
    .option input[type="radio"]:focus + .option__inner,
    .option input[type="checkbox"]:focus + .option__inner {
      outline: 1; }
  .option .score {
    position: absolute;
    right: 0;
    height: 64px;
    width: 64px;
    line-height: 69px;
    color: #fff;
    background: #28A532;
    font-size: 1.11111em;
    font-weight: bold;
    border-radius: 64px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center; }
  .option.is-wrong .option__inner {
    border-color: #FF3867;
    background: #FF3867;
    color: #fff;
    animation: shake-lr 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955) both; }

label.option:hover .option__inner {
  border-color: #28A532;
  color: #28A532;
  cursor: pointer; }
  .options--disabled label.option:hover .option__inner {
    border-color: #e0d2e4;
    color: #641C76; }

label.option:focus .option__inner {
  border-color: #28A532;
  background: #28A532;
  color: #fff; }

.sb-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  animation: showPanel 475ms ease forwards;
  opacity: 0;
  transform: translateY(10%);
  transition: 500ms transform ease;
  z-index: 9; }
  .sb-panel__close {
    font-size: 1.33333em;
    position: absolute;
    top: 1.33334rem;
    left: 1.33334rem;
    z-index: 99; }
  .sb-panel .sb-panel {
    z-index: 999;
    background: #fff; }
  .sb-panel .sb-module__intro,
  .sb-panel .sb-module__outro {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='1280px' height='468px' viewBox='0 0 1280 468' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3ClinearGradient x1='2.22044605e-14%25' y1='56.2059951%25' x2='96.5611761%25' y2='43.3356547%25' id='linearGradient-1'%3E%3Cstop stop-color='%23F3EEF5' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23FDFCFD' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Artboards' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Bouwen-aan-later---Intro-Copy-16' transform='translate(0.000000, -232.000000)' fill='url(%23linearGradient-1)'%3E%3Cpath d='M1280,232.691466 C1037.75746,232.691466 849.433532,507.802193 709.013746,507.802193 C568.572617,507.802193 483.215229,402.688741 356.571713,402.688741 C140.4518,402.688741 0,700 0,700 L1280,699.707657 L1280,232.691466 Z' id='Fill-1'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 110%;
    background-position: center bottom;
    background-repeat: no-repeat; }
    @media (min-width: 1024px) {
      .sb-panel .sb-module__intro,
      .sb-panel .sb-module__outro {
        animation: wavingbg 10s linear infinite; } }

.sb-feedback {
  opacity: 0;
  transform: translateY(-5%);
  animation: showPanelFeedback 275ms ease-in-out forwards, floatingbg 10s linear infinite;
  animation-delay: 175ms; }

.sb-panel--feedback .btn {
  opacity: 0;
  transform: translateY(5%);
  animation: showPanel 475ms ease forwards;
  animation-delay: 1000ms; }

.sb-question__next {
  opacity: 0;
  transform: translateY(5%);
  animation: showPanel 275ms cubic-bezier(0.52, 0.07, 0.61, 1.19) forwards; }

@keyframes showPanelFeedback {
  from {
    opacity: 0;
    transform: translateY(-5%); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes showPanel {
  from {
    opacity: 0;
    transform: translateY(10%); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes showSlide {
  0% {
    opacity: 0;
    transform: translateY(5%); }
  50% {
    opacity: 0;
    transform: translateY(4%); }
  90% {
    opacity: 1;
    transform: translateY(-1%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.sb-module {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }
  .sb-module__inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto; }
  .sb-module__intro, .sb-module__outro {
    padding: 1.33334rem;
    height: 100%;
    overflow-y: auto;
    text-align: center; }
    @media (min-width: 1024px) {
      .sb-module__intro, .sb-module__outro {
        padding: 2.66668rem 10%;
        display: flex;
        align-items: center;
        height: 100%; } }
    .sb-module__intro .sb-title, .sb-module__intro .sb-feedback__title, .sb-module__outro .sb-title, .sb-module__outro .sb-feedback__title {
      color: #28A532;
      margin-bottom: 0.66667rem; }
    .sb-module__intro .sb-text, .sb-module__intro .sb-feedback__text, .sb-module__outro .sb-text, .sb-module__outro .sb-feedback__text {
      font-size: 1.11111em;
      line-height: 1.2;
      color: #641C76; }
      @media (min-width: 700px) {
        .sb-module__intro .sb-text, .sb-module__intro .sb-feedback__text, .sb-module__outro .sb-text, .sb-module__outro .sb-feedback__text {
          font-size: 1.33333em;
          line-height: 1.2; } }
    .sb-module__intro .sb-content, .sb-module__outro .sb-content {
      justify-content: center; }
      .sb-module__intro .sb-content .btn, .sb-module__outro .sb-content .btn {
        margin: 0 auto;
        margin-top: 2.66668rem; }
      @media (min-width: 1024px) {
        .sb-module__intro .sb-content, .sb-module__outro .sb-content {
          width: 40%;
          padding-right: 2.66668rem; } }
    .sb-module__intro .sb-image, .sb-module__outro .sb-image {
      display: block;
      max-width: 500px;
      margin: 0 auto; }
      @media (min-width: 1024px) {
        .sb-module__intro .sb-image, .sb-module__outro .sb-image {
          display: flex;
          align-items: center;
          justify-content: center;
          order: 2;
          width: 60%;
          max-width: none; }
          .sb-module__intro .sb-image img, .sb-module__outro .sb-image img {
            width: 100%; } }
  .sb-module__content {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='621px' height='700px' viewBox='0 0 621 700' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3ClinearGradient x1='96.5611761%25' y1='53.3077001%25' x2='-2.22044605e-14%25' y2='46.4480062%25' id='linearGradient-1'%3E%3Cstop stop-color='%23FDFCFD' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23F3EEF5' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Artboards' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Money-challenge---Question-3' transform='translate(-659.000000, 0.000000)' fill='url(%23linearGradient-1)'%3E%3Cpath d='M1556.01474,640 C1202.77386,640 982.653807,1024.71153 777.892049,1024.71153 C573.09917,1024.71153 448.630038,871.42108 263.956998,871.42108 C-51.1915605,871.42108 -256,1305 -256,1305 L2239,1305 C2239,1305 1995.78803,640 1556.01474,640 Z' id='Fill-1' transform='translate(991.500000, 972.500000) rotate(-90.000000) translate(-991.500000, -972.500000) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: right top;
    background-repeat: no-repeat;
    height: 100%; }
    @media (min-width: 1024px) {
      .sb-module__content {
        animation: floatingbg 10s linear infinite; } }
  .sb-module--loonstrook {
    height: 100%; }
    @media (min-width: 1024px) {
      .sb-module--loonstrook {
        display: flex; } }
    @media (min-width: 1024px) {
      .sb-module--loonstrook .sb-questions {
        height: 100%; } }
    .sb-module--loonstrook .sb-question__question input {
      display: inline-block;
      margin-right: 0.66667rem; }
    @media (min-width: 1024px) {
      .sb-module--loonstrook .sb-question__content {
        width: 45%; } }
    @media (min-width: 1024px) {
      .sb-module--loonstrook .sb-image--zoom {
        position: absolute;
        bottom: 0;
        right: 5.33336rem;
        width: 46%;
        height: 80vh;
        box-shadow: 1px 3px 6px 0 rgba(100, 28, 118, 0.2);
        background: #fff;
        background-position: 50% 50%; } }
    .sb-module--loonstrook .sb-image--zoom img {
      display: block;
      width: auto; }
  .sb-module--money-challenge {
    overflow-y: hidden; }
    @media (min-width: 1250px) {
      .sb-module--money-challenge .sb-module__inner {
        overflow: hidden; } }
    .sb-module--money-challenge .sb-questions {
      height: 100vh; }
    .sb-module--money-challenge .sb-image {
      position: absolute;
      bottom: -250px;
      left: 40%;
      width: 40%;
      transform: translateX(-60%);
      z-index: 1;
      pointer-events: none; }
      @media (min-width: 700px) {
        .sb-module--money-challenge .sb-image {
          bottom: -250px;
          left: 40%;
          width: 40%;
          transform: translateX(-60%); } }
      .sb-module--money-challenge .sb-image img {
        width: 100%; }
  .sb-module--weet-wat-je-verdient .sb-questions, .sb-module--end .sb-questions {
    height: 100%; }
  .sb-module--weet-wat-je-verdient .option, .sb-module--end .option {
    margin: 0.33333rem;
    min-width: 200px; }
  .sb-module--weet-wat-je-verdient .sb-question__next, .sb-module--end .sb-question__next {
    align-self: center;
    margin-top: 2.66668rem; }
  .sb-module--timeline .sb-module__inner, .sb-module--boss .sb-module__inner {
    overflow-y: visible; }

.sb-feedback {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='621px' height='700px' viewBox='0 0 621 700' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3ClinearGradient x1='96.5611761%25' y1='53.3077001%25' x2='-2.22044605e-14%25' y2='46.4480062%25' id='linearGradient-1'%3E%3Cstop stop-color='%23FDFCFD' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23F3EEF5' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Artboards' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Money-challenge---Question-3' transform='translate(-659.000000, 0.000000)' fill='url(%23linearGradient-1)'%3E%3Cpath d='M1556.01474,640 C1202.77386,640 982.653807,1024.71153 777.892049,1024.71153 C573.09917,1024.71153 448.630038,871.42108 263.956998,871.42108 C-51.1915605,871.42108 -256,1305 -256,1305 L2239,1305 C2239,1305 1995.78803,640 1556.01474,640 Z' id='Fill-1' transform='translate(991.500000, 972.500000) rotate(-90.000000) translate(-991.500000, -972.500000) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
  height: 100%;
  flex-direction: column; }
  @media (min-width: 1024px) {
    .sb-feedback {
      flex-direction: row; } }
  .sb-feedback__content {
    max-width: 90%;
    text-align: center; }
    @media (min-width: 1024px) {
      .sb-feedback__content {
        max-width: 60%;
        padding: 4.00002rem;
        order: 2; }
        .sb-feedback--image .sb-feedback__content {
          width: 40%; } }
    .sb-feedback__content .btn {
      align-self: center; }
    .sb-feedback__content ul {
      text-align: left; }
  .sb-feedback__title {
    margin-bottom: 1.33334rem; }
  .sb-feedback__text {
    color: #641C76; }
    @media (min-width: 700px) {
      .sb-feedback__text {
        font-size: 1.33333em; } }
    .sb-feedback__text:not(:last-child) {
      margin-bottom: 2.66668rem; }
  .sb-feedback__image {
    display: flex;
    width: 90%;
    margin: 0 auto;
    margin-top: 1.33334rem;
    order: 1;
    box-shadow: 1px 3px 6px 0 rgba(100, 28, 118, 0.2); }
    .sb-feedback__image img {
      display: block;
      width: 100%;
      height: auto; }
    @media (min-width: 700px) {
      .sb-feedback__image {
        width: 80%; } }
    @media (min-width: 1024px) {
      .sb-feedback__image {
        width: 60%;
        margin: 0; } }
  .sb-feedback--image .sb-screen__actions {
    text-align: right; }

.list {
  margin: 24px 0; }
  .list.list--columns {
    text-align: center; }
    @media (min-width: 700px) {
      .list.list--columns {
        column-count: 2;
        list-style: none; } }

input[type="range"] {
  margin: auto;
  -webkit-appearance: none;
  position: relative;
  overflow: hidden;
  height: 1.33334rem;
  cursor: pointer;
  border-radius: 0;
  /* iOS */
  border-radius: 1.33334rem;
  background: #f0e8f1;
  padding: 0;
  cursor: ew-resize; }
  input[type="range"]:focus {
    box-shadow: none; }

::-webkit-slider-runnable-track {
  background: #f0e8f1;
  border-radius: 1.33334rem; }

/*
 * 1. Set to 0 width and remove border for a slider without a thumb
 */
::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.33334rem;
  /* 1 */
  height: 1.33334rem;
  background: #fff;
  box-shadow: -101vw 0 0 100vw #28A532, 1px 3px 6px 0 rgba(100, 28, 118, 0.2);
  border-radius: 1.33334rem; }

::-moz-range-track {
  height: 1.33334rem;
  background: #ddd; }

::-moz-range-thumb {
  background: #fff;
  height: 40px;
  width: 20px;
  border: 3px solid #999;
  border-radius: 0 !important;
  box-shadow: -100vw 0 0 100vw #28A532;
  box-sizing: border-box; }

::-ms-fill-lower {
  background: #28A532; }

::-ms-thumb {
  background: #fff;
  border: 2px solid #999;
  height: 40px;
  width: 20px;
  box-sizing: border-box; }

::-ms-ticks-after {
  display: none; }

::-ms-ticks-before {
  display: none; }

::-ms-track {
  background: #a277ad;
  color: transparent;
  height: 40px;
  border: none; }

::-ms-tooltip {
  display: none; }

.dragbar-cnt .dragbar-cnt__inner {
  background: #fff;
  padding: 1.33334rem;
  box-shadow: 1px 3px 6px 0 rgba(100, 28, 118, 0.2);
  border-radius: 24px; }
  @media (min-width: 1024px) {
    .dragbar-cnt .dragbar-cnt__inner {
      padding: 2.66668rem;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 5.33336rem;
      right: 5.33336rem; } }

.dragbar-cnt .totalAmount {
  display: block;
  color: #28A532;
  font-size: 2.33333em;
  margin-top: 2.66668rem; }

.dragbar {
  display: block;
  font-size: 1.11111em; }
  .dragbar + .dragbar {
    margin-top: 1.33334rem; }
  .dragbar__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #641C76; }
  .dragbar__value {
    line-height: 1.77778em;
    color: #28A532; }
    .dragbar__value input {
      width: 5.33336rem;
      display: inline-block;
      margin-right: 1.33334rem;
      font-size: 1.33333em;
      color: #28A532;
      -webkit-appearance: none; }
  .dragbar__input {
    margin-top: 0.66667rem; }