/* Set the global compass vars.*/
/* Import the normalize plugin*/
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
/*! normalize.css v3.0.0 | HTML5 Display Definitions | MIT License | git.io/normalize */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }

audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }

audio:not([controls]) { display: none; height: 0; }

[hidden], template { display: none; }

/*! normalize.css v3.0.0 | Base | MIT License | git.io/normalize */
html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; }

/*! normalize.css v3.0.0 | Links | MIT License | git.io/normalize */
a { background: transparent; }

a:active, a:hover { outline: 0; }

/*! normalize.css v3.0.0 | Typography | MIT License | git.io/normalize */
abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

dfn { font-style: italic; }

h1 { font-size: 2em; margin: 0.67em 0; }

mark { background: #ff0; color: #000; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/*! normalize.css v3.0.0 | Embedded Content | MIT License | git.io/normalize */
img { border: 0; }

svg:not(:root) { overflow: hidden; }

/*! normalize.css v3.0.0 | Figures | MIT License | git.io/normalize */
figure { margin: 1em 40px; }

hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }

pre { overflow: auto; }

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

/*! normalize.css v3.0.0 | Forms | MIT License | git.io/normalize */
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }

button { overflow: visible; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

button[disabled], html input[disabled] { cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

input { line-height: normal; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

legend { border: 0; padding: 0; }

textarea { overflow: auto; }

optgroup { font-weight: bold; }

/*! normalize.css v3.0.0 | Tables | MIT License | git.io/normalize */
table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

@font-face { font-family: 'metropolisblack'; src: url("webfont/metropolis-black-webfont.woff2") format("woff2"), url("webfont/metropolis-black-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'metropolislight'; src: url("webfont/metropolis-light-webfont.woff2") format("woff2"), url("webfont/metropolis-light-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }
@-webkit-keyframes an-rotate { 100% { -webkit-transform: rotate(360deg); } }
@keyframes an-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } }
@-webkit-keyframes ripple { /*scale the element to 250% to safely cover the entire link and fade it out*/
  100% { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(2.5); transform: translate(-50%, -50%) scale(2.5); } }
@keyframes ripple { /*scale the element to 250% to safely cover the entire link and fade it out*/
  100% { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(2.5); transform: translate(-50%, -50%) scale(2.5); } }
@-webkit-keyframes fade-in { 0% { opacity: 0; -webkit-transform: translateY(3rem); transform: translateY(3rem); }
  100% { opacity: 1; -webkit-transform: translateY(0rem); transform: translateY(0rem); } }
@keyframes fade-in { 0% { opacity: 0; -webkit-transform: translateY(3rem); transform: translateY(3rem); }
  100% { opacity: 1; -webkit-transform: translateY(0rem); transform: translateY(0rem); } }
@-webkit-keyframes fade-out { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
  100% { opacity: 0; -webkit-transform: translateY(-3rem); transform: translateY(-3rem); } }
@keyframes fade-out { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
  100% { opacity: 0; -webkit-transform: translateY(-3rem); transform: translateY(-3rem); } }
@-webkit-keyframes scroll { 0% { -webkit-transform: translateY(0); transform: translateY(0); }
  80%,100% { -webkit-transform: translateY(1rem); transform: translateY(1rem); opacity: 0; } }
@keyframes scroll { 0% { -webkit-transform: translateY(0); transform: translateY(0); }
  80%,100% { -webkit-transform: translateY(1rem); transform: translateY(1rem); opacity: 0; } }
@-webkit-keyframes animateIn { 0% { top: 50%; left: 4rem; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
  30% { top: 50%; left: 4rem; -webkit-transform: translate(0, -10rem); transform: translate(0, -10rem); opacity: 0; }
  60% { top: 50%; left: 50%; -webkit-transform: translate(-50%, -10rem); transform: translate(-50%, -10rem); opacity: 0; }
  100% { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } }
@keyframes animateIn { 0% { top: 50%; left: 4rem; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
  40% { top: 50%; left: 4rem; opacity: 0; -webkit-transform: translate(0, -10rem); transform: translate(0, -10rem); }
  50% { top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -10rem); transform: translate(-50%, -10rem); }
  100% { top: 50%; left: 50%; opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }
@-webkit-keyframes animateOut { 0% { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  40% { top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -10rem); transform: translate(-50%, -10rem); }
  50% { top: 50%; left: 4rem; opacity: 0; -webkit-transform: translate(0, -10rem); transform: translate(0, -10rem); }
  100% { top: 50%; left: 4rem; opacity: 1; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } }
@keyframes animateOut { 0% { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  40% { top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -10rem); transform: translate(-50%, -10rem); }
  50% { top: 50%; left: 4rem; opacity: 0; -webkit-transform: translate(0, -10rem); transform: translate(0, -10rem); }
  100% { top: 50%; left: 4rem; opacity: 1; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } }
@-webkit-keyframes fadeUp { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { opacity: 0; -webkit-transform: translate(0, -10rem); transform: translate(0, -10rem); } }
@keyframes fadeUp { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  100% { opacity: 0; -webkit-transform: translate(0, -10rem); transform: translate(0, -10rem); } }
@-webkit-keyframes fadeDown { 0% { -webkit-transform: translate(0, -10rem); transform: translate(0, -10rem); }
  100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@keyframes fadeDown { 0% { -webkit-transform: translate(0, -10rem); transform: translate(0, -10rem); }
  100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-webkit-keyframes placeholderSkeleton { 0% { background-position: -468px 0; }
  100% { background-position: 468px 0; } }
@keyframes placeholderSkeleton { 0% { background-position: -468px 0; }
  100% { background-position: 468px 0; } }
@-webkit-keyframes skeletonAnimate { from { background-position: top left; }
  to { background-position: top right; } }
@keyframes skeletonAnimate { from { background-position: top left; }
  to { background-position: top right; } }
body, select, input, textarea { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; font-size: 1.6rem; font-family: 'Archivo', 'metropolislight', "ff-meta-web-pro", sans-serif; font-weight: 300; color: #1E1E48; }

html { font-size: 62.5%; height: 0; }

html, body { position: relative; height: 100%; /*    overflow: hidden;*/ overflow-x: hidden; -webkit-overflow-scrolling: touch; }
html.landing-page, body.landing-page { height: auto; }

body { background-color: #fff; }

body.menu-open { overflow: hidden; }

.wf-loading { /* styles to use when web fonts are loading */ opacity: 0; background-color: #D8C337; -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; }

.wf-active { /* styles to use when web fonts are active */ opacity: 1; }

.wf-inactive { /* styles to use when web fonts are inactive */ }

main { position: relative; height: calc(100% - 20rem); }
.landing-page main { height: auto; }

.center { text-align: center; }

.large p { font-size: 2.4rem; line-height: 3.2rem; margin-top: 2rem; }
@media (max-width: 840px) { .large p { font-size: 2.0rem; line-height: 2.8rem; } }
@media (max-width: 767px) { .large p { font-size: 2.0rem; line-height: 2.6rem; } }

h1, h2, h3 { font-family: 'archivo', 'metropolislight', "ff-meta-web-pro", sans-serif; font-weight: 900; }

h1 { margin: 0; font-size: 4.2rem; line-height: 4.4rem; }
@media (max-width: 767px) { h1 { font-size: 3.1rem; line-height: 3.4rem; margin-bottom: 2rem; } }

h2 { font-size: 3.6rem; line-height: 4.2rem; }
h2.question { font-weight: normal; }

h3.welkom { font-size: 1.8rem; font-weight: normal; }

a.link { text-decoration: none; color: #3D704D; -webkit-transition: color .3s ease-in-out; transition: color .3s ease-in-out; }
a.link:hover, a.link:focus { color: #1E1E48; }
#login a.link { color: #CE5C42; }

button:focus { outline: 0; }

.type--big { font-family: "metropolisblack", "ff-meta-web-pro", sans-serif; font-size: 10rem; line-height: .8; }
@media (max-width: 767px) { .type--big { font-size: 8rem; } }

.secondary { color: #D8C337; }

header { display: block; width: 100%; height: 10rem; opacity: 0; -webkit-transform: translate(0, -100%); transform: translate(0, -100%); -webkit-transition: opacity .65s ease-in-out, -webkit-transform .65s ease-in-out; transition: opacity .65s ease-in-out, -webkit-transform .65s ease-in-out; transition: transform .65s ease-in-out, opacity .65s ease-in-out; transition: transform .65s ease-in-out, opacity .65s ease-in-out, -webkit-transform .65s ease-in-out; }
header.visible { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; }
.landing-page header { position: absolute; z-index: 2; }
header .logo { position: absolute; top: 50%; left: 4.0rem; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
@media (max-width: 767px) { header .logo { left: 2rem; } }
header .logo img { max-height: 5rem; }
@media (max-width: 767px) { header .logo img { max-height: 3.5rem; } }
@media (max-width: 767px) { .landing-page header .logo { left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }
header.scan .logo { -webkit-animation-name: animateIn; animation-name: animateIn; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }
header.no-scan .logo { -webkit-animation-name: animateOut; animation-name: animateOut; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

.container { height: 100%; width: calc(100% - 2rem); margin: 0 1rem; position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; }
@media (max-width: 767px) { .container { width: auto; margin: 0 2rem; } }
.landing-page .container { margin: 0; width: 100%; height: auto; }

.page--header { width: calc(100% + 2rem); margin: 0 -1rem 4rem; height: auto; max-height: 40rem; overflow: hidden; }
@media (max-width: 767px) { .page--header { max-height: 30rem; width: calc(100% + 4rem); margin: 0 -2rem 4rem; } }
.page--header img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.wrapper { position: relative; max-width: 108rem; padding: 0 4rem; margin: 0 auto; box-sizing: border-box; }
@media (max-width: 1024px) { .wrapper { max-width: 90rem; } }
@media (max-width: 767px) { .wrapper { padding: 0 3rem; } }
@media (max-width: 320px) { .wrapper { padding: 0 2rem; } }
.hero .wrapper { height: 100%; padding: 0rem 3rem; }
@media (max-width: 840px) { .hero .wrapper { padding: 25% 3rem; } }
@media (max-width: 767px) { .hero .wrapper { padding: 28% 3rem; } }
@media (max-width: 320px) { .hero .wrapper { padding: 32% 2rem; } }
.title .wrapper { padding: 6rem 4rem; }
.title .wrapper h1 { font-size: 6rem; }
@media (max-width: 767px) { .title .wrapper { padding: 3rem 3rem 2rem; }
  .title .wrapper h1 { font-size: 4rem; } }
.page .wrapper { padding: 4rem 4rem; }
@media (max-width: 767px) { .page .wrapper { padding: 1.5rem 3rem 3rem; } }

.client-page section { top: 0; opacity: 0; visibility: hidden; -webkit-transform: translateY(-3rem); transform: translateY(-3rem); -webkit-transition: visibility 0s .45s; transition: visibility 0s .45s; }
.client-page section.fade-in { -webkit-animation: fade-in .45s ease-in forwards; animation: fade-in .45s ease-in forwards; }
.client-page section.fade-out { -webkit-animation: fade-out .45s ease-out forwards; animation: fade-out .45s ease-out forwards; }
.client-page section.active { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: visibility 0s 0s; transition: visibility 0s 0s; }
section .testimonial { margin: 0 0 10rem; }
section.contact { /*   background-color: rgb(245,154,2); */ /* Old browsers*/ /**/ /* @include filter-gradient(#f59a02, #f56a6f, horizontal); */ /* IE6-9 fallback on horizontal gradient*/ /**/ /* @include background-image(linear-gradient(left top, rgba(245,154,2,1) 0%,rgba(245,106,111,1) 50%));*/ background-color: #D8C337; padding: 6rem 0; position: relative; }
section.contact a:link, section.contact a:visited { color: #ffffff; text-decoration: none; }
section.title { padding-top: 12rem; }
@media (max-width: 767px) { section.title { padding-top: 6rem; } }
section.page { background-color: #f5f5f5; }

.row { margin: 2rem 0; }
.row.intro { margin: 0 0 2rem; padding: 0 10%; }
@media (max-width: 767px) { .row.intro { padding: 0; } }
.row.float { overflow: hidden; }
@media (max-width: 767px) { .row.float { overflow: visible; } }

.animate { -webkit-transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.animate.visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
.animate.invisible { opacity: 0; -webkit-transform: translateY(2rem); transform: translateY(2rem); }

.q--form, .q--begin, .q--submit, .q--results { min-height: 100%; width: 100%; position: absolute; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; }

.q--container { position: absolute; height: 100%; width: 100%; }
.q--container .q--wrapper { position: relative; overflow: hidden; z-index: 1; width: calc(50% - 2rem); height: 100%; background-color: #f9f9f9; padding: 6rem 3rem; margin: 0 1rem; float: left; text-align: center; box-sizing: border-box; cursor: pointer; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -ms-flex-pack: distribute; justify-content: space-around; /*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/ /*animation effect*/ }
@media (max-width: 767px) { .q--container .q--wrapper { width: auto; height: calc(50% - 2rem); margin: 0 1rem 2rem; } }
.q--container .q--wrapper:first-child { -webkit-border-radius: 3rem; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 3rem; -moz-border-radius-bottomleft: 0; border-radius: 3rem; border-bottom-left-radius: 0; }
.q--container .q--wrapper:last-child { -webkit-border-radius: 3rem; -webkit-border-top-right-radius: 0; -moz-border-radius: 3rem; -moz-border-radius-topright: 0; border-radius: 3rem; border-top-right-radius: 0; }
.q--container .q--wrapper .q--img { display: inline-block; width: 22rem; height: 22rem; margin-bottom: 4rem; border-radius: 50%; overflow: hidden; background-color: darkgrey; box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.7); }
@media (max-height: 650px) { .q--container .q--wrapper .q--img { width: 18rem; height: 18rem; margin-bottom: 3rem; } }
@media (max-height: 550px) { .q--container .q--wrapper .q--img { display: none; } }
@media (max-width: 767px) { .q--container .q--wrapper .q--img { display: none; } }
.q--container .q--wrapper .q--img img { height: 100%; }
.q--container .q--wrapper .q--content { min-height: 6rem; font-size: 2.6rem; line-height: 2.8rem; margin-bottom: 3rem; }
@media (max-height: 650px) { .q--container .q--wrapper .q--content { min-height: 5rem; font-size: 2.4rem; line-height: 2.6rem; margin-bottom: 2rem; } }
@media (max-width: 767px) { .q--container .q--wrapper .q--content { min-height: 5rem; font-size: 1.8rem; line-height: 2.2rem; margin-bottom: 2rem; } }
.q--container .q--wrapper .ink { display: block; position: absolute; background-color: #D8C337; border-radius: 100%; -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); z-index: -1; }
.q--container .q--wrapper.selected .ink { -webkit-animation: ripple 0.65s ease-in-out forwards; animation: ripple 0.65s ease-in-out forwards; }

.q--results .name, .q--start .name { text-align: center; z-index: 999; position: relative; }
.q--results .charts, .q--start .charts { width: 100%; max-width: 75rem; margin: 3rem auto 2rem; height: 40rem; position: relative; }
.q--results .charts.img, .q--start .charts.img { height: auto; }
.q--results .charts.img .columnchart, .q--start .charts.img .columnchart { position: relative; }
.q--results .charts.img img, .q--start .charts.img img { width: 100%; }
.q--results .charts.hidden, .q--start .charts.hidden { height: 0; margin: 0; }
.q--results .charts .columnchart, .q--start .charts .columnchart { position: absolute; height: 100%; width: 100%; opacity: 0; visibility: hidden; -webkit-transition: opacity .6s ease-in-out, visibility 0s 0.6s; transition: opacity .6s ease-in-out, visibility 0s 0.6s; }
.q--results .charts .columnchart.visible, .q--start .charts .columnchart.visible { opacity: 1; visibility: visible; -webkit-transition: opacity .6s ease-in-out, visibility 0s 0s; transition: opacity .6s ease-in-out, visibility 0s 0s; }
.q--results .charts .columnchart svg, .q--start .charts .columnchart svg { overflow: visible !important; }
.q--results .results, .q--start .results { width: 100%; max-width: 75rem; margin: 0 auto; padding-bottom: 8rem; }
.q--results .results .intro, .q--start .results .intro { font-size: 2rem; line-height: 2.8rem; margin-bottom: 4rem; }
.q--results .results ul, .q--start .results ul { padding-left: 0; }
.q--results .results ul li, .q--start .results ul li { list-style: none; margin-bottom: 3rem; }
.q--results .results h2, .q--start .results h2 { margin: 0; font-size: 1.9rem; }
.q--results .results p, .q--start .results p { margin: 0; font-size: 1.6rem; line-height: 2.4rem; }
.q--results .buttons, .q--start .buttons { max-width: 75rem; width: 100%; margin: 0 auto 4rem; text-align: center; }

nav#menu { z-index: 2; position: absolute; right: 0; width: 30rem; height: 100%; background-color: #1E1E48; -webkit-transform: translate(100%, 0); transform: translate(100%, 0); -webkit-transition: -webkit-transform .4s ease-in-out; transition: -webkit-transform .4s ease-in-out; transition: transform .4s ease-in-out; transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out; }
nav#menu.open { -webkit-transform: translate(0, 0); transform: translate(0, 0); z-index: 9999; }
nav#menu ul { list-style: none; padding-top: 0rem; }
nav#menu ul li { font-family: "metropolisblack", "ff-meta-web-pro", sans-serif; font-size: 2.0rem; padding: 1.5rem 0; }
nav#menu ul li a:link, nav#menu ul li a:visited { color: white; text-decoration: none; text-transform: capitalize; }
nav#menu ul li a:link:hover, nav#menu ul li a:link:focus, nav#menu ul li a:link:active, nav#menu ul li a:visited:hover, nav#menu ul li a:visited:focus, nav#menu ul li a:visited:active { color: #D8C337; }
nav#menu a:link { -webkit-transition: color 0.3s ease-in; transition: color 0.3s ease-in; }
nav#socialMenu { position: absolute; z-index: 2; right: 4rem; top: 2.5rem; text-align: center; }
nav.arrows { width: 100%; text-align: center; padding: 2.3rem 0; display: none; }
nav.arrows .arrow { vertical-align: middle; display: inline-block; }
nav.arrows .slides { display: inline-block; vertical-align: middle; width: 7.5rem; height: 5rem; font-family: "metropolisblack", "ff-meta-web-pro", sans-serif; line-height: 5rem; }

.toggle-navbar { display: block; position: absolute; right: 2.5rem; top: 3.1rem; background-color: transparent; border: none; margin: 0; width: 3.8rem; height: 3rem; border-radius: 0; z-index: 99999; -webkit-transition: -webkit-transform .4s ease-in-out; transition: -webkit-transform .4s ease-in-out; transition: transform .4s ease-in-out; transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out; }
.toggle-navbar.open { z-index: 99999999; -webkit-transform: translate(-30rem, 0); transform: translate(-30rem, 0); }
.toggle-navbar.open .icon-bar { opacity: 0; -webkit-transition: -webkit-transform .5s .3s, top .3s, opacity 0s .3s; -webkit-transition: top .3s, opacity 0s .3s, -webkit-transform .5s .3s; transition: top .3s, opacity 0s .3s, -webkit-transform .5s .3s; transition: transform .5s .3s, top .3s, opacity 0s .3s; transition: transform .5s .3s, top .3s, opacity 0s .3s, -webkit-transform .5s .3s; }
.toggle-navbar.open .icon-bar:nth-child(1), .toggle-navbar.open .icon-bar:nth-child(3) { opacity: 1; top: 1rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.toggle-navbar.open .icon-bar:nth-child(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.toggle-navbar .icon-bar { position: absolute; left: 0; top: 1rem; display: block; background-color: #3D704D; width: 3.8rem; height: 4px; -webkit-transition: -webkit-transform .5s, top .3s .5s, opacity 0s .3s; -webkit-transition: top .3s .5s, opacity 0s .3s, -webkit-transform .5s; transition: top .3s .5s, opacity 0s .3s, -webkit-transform .5s; transition: transform .5s, top .3s .5s, opacity 0s .3s; transition: transform .5s, top .3s .5s, opacity 0s .3s, -webkit-transform .5s; }
.toggle-navbar .icon-bar:nth-child(1), .toggle-navbar .icon-bar:nth-child(3) { display: block; }
.toggle-navbar .icon-bar:nth-child(1) { top: 0rem; }
.toggle-navbar .icon-bar:nth-child(3) { top: 2rem; }
.scan .toggle-navbar { -webkit-animation: fadeUp .8s ease-in-out forwards; animation: fadeUp .8s ease-in-out forwards; }
.no-scan .toggle-navbar { opacity: 0; -webkit-animation: fadeDown 1s .3s ease-in-out forwards; animation: fadeDown 1s .3s ease-in-out forwards; }

.btn { height: 5rem; min-width: 5rem; margin: 0 .5rem; padding: 0; border: none; border-radius: 2.5rem; background-color: #1E1E48; color: white; box-sizing: border-box; display: inline-block; text-decoration: none; text-transform: uppercase; cursor: pointer; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ -webkit-transition: width .4s ease-in-out, background-color .65s ease-in-out; transition: width .4s ease-in-out, background-color .65s ease-in-out; }
.btn + .btn { margin-top: 1.6rem; }
@media (max-width: 767px) { .btn { height: 4rem; min-width: 4rem; border-radius: 2rem; font-size: 1.4rem; } }
.btn:hover, .btn:focus { background-color: #3c3c90; }
.btn.big { height: 12.5rem; width: 12.5rem; border-radius: 50%; }
.btn.big .material-icons { font-size: 8rem; line-height: 12.5rem; padding: 0 2.2rem; }
@media (max-width: 767px) { .btn.big { height: 10rem; width: 10rem; }
  .btn.big .material-icons { font-size: 7rem; line-height: 10rem; padding: 0; } }
.btn.diap { background-color: white; color: #1E1E48; }
.btn.secondary { background-color: #3D704D; color: white; }
.btn.secondary:hover, .btn.secondary:focus { background-color: #4f9164; }
.btn a:link, .btn a:visited { color: #ffffff; }
.btn .material-icons { font-size: 3.6rem; line-height: 5rem; padding: 0 .7rem; }
@media (max-width: 767px) { .btn .material-icons { font-size: 2.6rem; line-height: 4rem; } }
.btn .material-icons.email { font-size: 3.4rem; }
@media (max-width: 767px) { .btn .material-icons.email { font-size: 2.4rem; } }
.btn svg.material-icons { position: relative; top: .2rem; padding: .7rem; }
@media (max-width: 767px) { .btn svg.material-icons { padding: .5rem; height: 2.4rem; top: .3rem; } }
.btn.toggle-submit, .btn.toggle-reset-pass, .btn.toggle-reset, .btn.toggle-scan-submit, .btn.start-scan, .btn.homepage { min-width: 15rem; margin-top: 2rem; }
.btn.toggle-submit span, .btn.toggle-reset-pass span, .btn.toggle-reset span, .btn.toggle-scan-submit span, .btn.start-scan span, .btn.homepage span { padding: 1.3rem 3rem; display: block; }
@media (max-width: 767px) { .btn.toggle-submit span, .btn.toggle-reset-pass span, .btn.toggle-reset span, .btn.toggle-scan-submit span, .btn.start-scan span, .btn.homepage span { padding: .9rem 2rem; } }
.btn.toggle-submit .submit, .btn.toggle-submit .done, .btn.toggle-reset-pass .submit, .btn.toggle-reset-pass .done, .btn.toggle-reset .submit, .btn.toggle-reset .done, .btn.toggle-scan-submit .submit, .btn.toggle-scan-submit .done, .btn.start-scan .submit, .btn.start-scan .done, .btn.homepage .submit, .btn.homepage .done { display: none; }
.btn.toggle-submit.submit, .btn.toggle-reset-pass.submit, .btn.toggle-reset.submit, .btn.toggle-scan-submit.submit, .btn.start-scan.submit, .btn.homepage.submit { width: 5rem; }
@media (max-width: 767px) { .btn.toggle-submit.submit, .btn.toggle-reset-pass.submit, .btn.toggle-reset.submit, .btn.toggle-scan-submit.submit, .btn.start-scan.submit, .btn.homepage.submit { width: 4rem; } }
.btn.toggle-submit.submit span, .btn.toggle-reset-pass.submit span, .btn.toggle-reset.submit span, .btn.toggle-scan-submit.submit span, .btn.start-scan.submit span, .btn.homepage.submit span { display: none; }
.btn.toggle-submit.submit .submit, .btn.toggle-reset-pass.submit .submit, .btn.toggle-reset.submit .submit, .btn.toggle-scan-submit.submit .submit, .btn.start-scan.submit .submit, .btn.homepage.submit .submit { -webkit-animation: an-rotate 1.5s infinite linear reverse; animation: an-rotate 1.5s infinite linear reverse; display: block; }
.btn.toggle-submit.succes, .btn.toggle-reset-pass.succes, .btn.toggle-reset.succes, .btn.toggle-scan-submit.succes, .btn.start-scan.succes, .btn.homepage.succes { width: 5rem; background-color: #D8C337; }
@media (max-width: 767px) { .btn.toggle-submit.succes, .btn.toggle-reset-pass.succes, .btn.toggle-reset.succes, .btn.toggle-scan-submit.succes, .btn.start-scan.succes, .btn.homepage.succes { width: 4rem; } }
.btn.toggle-submit.succes span, .btn.toggle-reset-pass.succes span, .btn.toggle-reset.succes span, .btn.toggle-scan-submit.succes span, .btn.start-scan.succes span, .btn.homepage.succes span { display: none; }
.btn.toggle-submit.succes .done, .btn.toggle-reset-pass.succes .done, .btn.toggle-reset.succes .done, .btn.toggle-scan-submit.succes .done, .btn.start-scan.succes .done, .btn.homepage.succes .done { display: block; }
.btn.toggle-submit.error, .btn.toggle-reset-pass.error, .btn.toggle-reset.error, .btn.toggle-scan-submit.error, .btn.start-scan.error, .btn.homepage.error { background-color: #f59a02; }
#login .btn.toggle-submit, #profile .btn.toggle-submit, #reset .btn.toggle-submit, #login .btn.toggle-reset-pass, #profile .btn.toggle-reset-pass, #reset .btn.toggle-reset-pass, #login .btn.toggle-reset, #profile .btn.toggle-reset, #reset .btn.toggle-reset, #login .btn.toggle-scan-submit, #profile .btn.toggle-scan-submit, #reset .btn.toggle-scan-submit, #login .btn.start-scan, #profile .btn.start-scan, #reset .btn.start-scan, #login .btn.homepage, #profile .btn.homepage, #reset .btn.homepage { margin-top: 1.5rem; }
.btn.toggle-scan { position: relative; background-color: transparent; }
.btn.toggle-scan::before, .btn.toggle-scan::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; display: block; border-radius: 50%; background-color: #D8C337; -webkit-transition: all 0.4s cubic-bezier(0.61, 1.8, 0.89, 1.62); transition: all 0.4s cubic-bezier(0.61, 1.8, 0.89, 1.62); }
.btn.toggle-scan:hover::before, .btn.toggle-scan:focus::before, .btn.toggle-scan:active::before { background-color: #D8C337; }
.btn.toggle-scan::after { background-color: transparent; box-shadow: inset 0 0 0 35px transparent; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.4s ease-in; transition: all 0.4s ease-in; }
.btn.toggle-scan:hover::after, .btn.toggle-scan:focus::after, .btn.toggle-scan:active::after { -webkit-transform: scale(1.1); transform: scale(1.1); box-shadow: inset 0 0 0 1px #D8C337; }
.btn.toggle-next.disable { cursor: not-allowed; background-color: #dcdcdc; }
.btn.toggle-pdf span, .btn.toggle-download span { padding: 1.5rem 3rem; display: block; }
@media (max-width: 767px) { .btn.toggle-pdf span, .btn.toggle-download span { padding: 1.2rem 2rem; } }
.btn.text-btn span { padding: 1.4rem 3rem; display: block; }
@media (max-width: 767px) { .btn.text-btn span { padding: .9rem 2rem; } }
.btn.start-scan { margin-top: 2rem; }
#socialMenu .btn { width: 4rem; height: 4rem; min-width: 4rem; }
@media (max-width: 767px) { #socialMenu .btn { display: none; } }
#socialMenu .btn .material-icons { font-size: 2.8rem; line-height: 4rem; padding: 0 .7rem; }
#socialMenu .btn .material-icons.email { font-size: 2.6rem; }
#socialMenu .btn svg.material-icons { position: relative; top: .2rem; padding: .5rem; height: 2.4rem; }

.text--wrapper, .form--wrapper, .q--start, .q--intro { position: relative; max-width: 25rem; margin: auto; text-align: center; }
.text--wrapper .message h3, .form--wrapper .message h3, .q--start .message h3, .q--intro .message h3 { margin-bottom: 1rem; }
.text--wrapper .message p, .form--wrapper .message p, .q--start .message p, .q--intro .message p { font-size: 2rem; margin: 0; line-height: 2.7rem; }
.text--wrapper .message a, .form--wrapper .message a, .q--start .message a, .q--intro .message a { color: #3D704D; }
.text--wrapper .logo img, .form--wrapper .logo img, .q--start .logo img, .q--intro .logo img { width: 100%; }

.text--wrapper { max-width: 40rem; }

.q--start { width: 100%; padding-bottom: 10rem; max-width: 1000px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-align-content: center; -moz-align-content: center; -ms-align-content: center; align-content: center; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; }
.q--start .text--wrapper { max-width: 100%; margin-bottom: 4rem; }
.q--start .text--wrapper .message { max-width: 70rem; }
.q--start .start--btn { display: inline-block; padding: 0 4rem; width: 33%; box-sizing: border-box; }
@media (max-width: 767px) { .q--start .start--btn { width: auto; } }

form { margin: 2.5rem 0 2rem; }

fieldset { border: none; padding: 0; margin: 0; margin-bottom: 1rem; }
fieldset:first-child input[type="text"], fieldset:first-child input[type="password"], fieldset:first-child input[type="email"] { border-top-right-radius: 1.5rem; }
fieldset:last-of-type input[type="text"], fieldset:last-of-type input[type="password"], fieldset:last-of-type input[type="email"], fieldset:last-of-type input[type="tel"] { border-bottom-left-radius: 1.5rem; }
fieldset .pw-no-select { padding-left: 1rem; font-size: 1.4rem; line-height: 1.8rem; }
fieldset .pw-no-select a { color: #3D704D; }
fieldset.date_select { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
fieldset.hidden { display: none; }

.checkbox { display: block; position: relative; }
.checkbox label.error { display: none; position: absolute; display: block; white-space: nowrap; line-height: 5rem; right: -20px; top: 0; color: #c27a02; -webkit-transform: translateX(100%); transform: translateX(100%); }
@media (max-width: 767px) { .checkbox label.error { -webkit-transform: translateX(0); transform: translateX(0); position: relative; left: 0; line-height: 4rem; } }

.input-field { display: block; position: relative; }
.input-field input { width: 25rem; height: 5rem; background-color: #f5f5f5; color: #1E1E48; border: 1px solid #f5f5f5; box-sizing: border-box; text-align: center; font-size: 1.8rem; -webkit-appearance: none; outline: 0; padding: 0; margin: 0; -webkit-transition: border-color .3s ease-in; transition: border-color .3s ease-in; }
.input-field input.error { border: 1px solid #f59a02; }
.input-field input.valid { border: 1px solid #D8C337; }
.input-field input:focus { border: 1px solid rgba(30, 30, 72, 0.3); }
.input-field label.error { display: none; position: absolute; display: block; white-space: nowrap; line-height: 5rem; right: -20px; top: 0; color: #c27a02; -webkit-transform: translateX(100%); transform: translateX(100%); }
@media (max-width: 767px) { .input-field label.error { -webkit-transform: translateX(0); transform: translateX(0); position: relative; left: 0; line-height: 4rem; } }

.select { position: relative; float: left; }
.select:last-child { -webkit-box-flex: 1 1 auto; -moz-box-flex: 1 1 auto; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; }
.select select { -webkit-appearance: none; background: white\0 !important; height: 5rem; background-color: #f5f5f5; color: #1E1E48; border: 1px solid #f5f5f5; /* border: none;*/ border-radius: 0; padding: 1rem 0 1rem 1.8rem; outline: none; cursor: pointer; text-align: center; }
.select select#location { width: 100%; }
.select select.error { border: 1px solid #f59a02; }
.select select.valid { border: 1px solid #D8C337; }
.select select:focus { border: 1px solid rgba(30, 30, 72, 0.3); }
.select + .select { margin-left: 1rem; }
.select:nth-child(1) select { width: 5rem; }
.select:nth-child(2) select { width: 5rem; }
.select:nth-child(3) select { width: 100%; }
.select label.error { display: none; position: absolute; display: block; white-space: nowrap; line-height: 5rem; right: -20px; top: 0; color: #c27a02; -webkit-transform: translateX(100%); transform: translateX(100%); }

.input-radio { margin: 1rem 0 1.5rem; position: relative; }
.input-radio label { line-height: 5rem; }
.input-radio label.error { display: none; position: absolute; white-space: nowrap; line-height: 5rem; right: -20px; top: 0; color: #c27a02; -webkit-transform: translateX(100%); transform: translateX(100%); }
@media (max-width: 767px) { .input-radio label.error { -webkit-transform: translateX(0); transform: translateX(0); position: relative; left: 0; line-height: 4rem; } }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, .input-prefix::-webkit-input-placeholder, .input-suffix::-webkit-input-placeholder { color: #dcdcdc; }

input::-moz-placeholder, textarea::-moz-placeholder, .input-prefix::-moz-placeholder, .input-suffix::-moz-placeholder { color: #dcdcdc; }

input:-ms-placeholder, textarea:-ms-placeholder, .input-prefix:-ms-placeholder, .input-suffix:-ms-placeholder { color: #dcdcdc; }

.input-placeholder-label { display: none; }

.s--table { width: 100%; margin: 0 1rem; padding-bottom: 8rem; }

.search { position: relative; width: calc(100% - 4rem); margin: 2rem; }
@media (max-width: 767px) { .search { margin: 2rem 0; width: 100%; } }
.search input { width: 100%; height: 5rem; padding: 0 0 0 5rem; border: 0; background-color: #f5f5f5; position: relative; font-size: 1.8rem; line-height: 5rem; color: #1E1E48; outline: 0; border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; box-sizing: border-box; }
.search::before { position: absolute; content: 'search'; font-family: 'Material Icons'; z-index: 2; font-size: 3.0rem; line-height: 5rem; color: #dcdcdc; left: 1.2rem; }

table { width: 100%; border-collapse: separate; border-spacing: 2rem 0; font-size: 1.6rem; }
@media (max-width: 767px) { table { border-spacing: 0; } }
table th { border-bottom: 2px solid #1E1E48; background-color: #ffffff; padding: 1rem 0; text-align: left; position: relative; cursor: pointer; font-size: 1.5rem; font-family: "metropolisblack", "ff-meta-web-pro", sans-serif; }
table th::before, table th::after { font-family: 'Material Icons'; position: absolute; right: 0; color: #dcdcdc; }
table th::before { content: 'arrow_drop_up'; top: 1.3rem; }
table th::after { content: 'arrow_drop_down'; top: 1.9rem; }
table th.headerSortDown::after { color: #1E1E48; }
table th.headerSortUp::before { color: #1E1E48; }
table th.noSort::before, table th.noSort::after { display: none; }
table th:nth-child(1) { /* Voornaam*/ width: 19%; padding-left: 1rem; }
table th:nth-child(2) { /* Achtenaam*/ width: 21%; }
table th:nth-child(3) { /* Geboortedatum*/ width: 15%; }
table th:nth-child(4) { /* Geslacht*/ width: 10%; }
table th:nth-child(5) { /* Score*/ width: 20%; }
table th:nth-child(6) { /* PDF*/ width: 15%; }
table td { border-bottom: 2px solid #dbdbf0; padding: 1rem 0; text-align: left; }
table td:nth-child(1) { /* Voornaam*/ padding-left: 1rem; }
table td:nth-child(6) { /* PDF*/ color: #c3c3c3; }
table tr.preload td { position: relative; border: none; }
table tr.preload td:after { content: ''; -moz-animation: placeholderSkeleton 1s linear infinite forwards; -webkit-animation: placeholderSkeleton 1s linear infinite forwards; animation: placeholderSkeleton 1s linear infinite forwards; background: #f6f7f8; background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%); background-repeat: no-repeat; background-size: 800px 104px; height: 25px; width: 90%; display: block; position: relative; }

#vidBox.hidden { opacity: 0; visibility: hidden; -webkit-transition: opacity .3s .1s ease-in, visibility 0 .4s; transition: opacity .3s .1s ease-in, visibility 0 .4s; }
#vidBox.hidden #videCont { opacity: 0; visibility: hidden; -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); -webkit-transition: opacity .3s ease-out, visibility 0 .3s, -webkit-transform .3s ease-out; transition: opacity .3s ease-out, visibility 0 .3s, -webkit-transform .3s ease-out; transition: opacity .3s ease-out, visibility 0 .3s, transform .3s ease-out; transition: opacity .3s ease-out, visibility 0 .3s, transform .3s ease-out, -webkit-transform .3s ease-out; }
#vidBox.show { opacity: 1; visibility: visible; -webkit-transition: opacity .3s ease-out, visibility 0s; transition: opacity .3s ease-out, visibility 0s; }
#vidBox.show #videCont { opacity: 1; visibility: visible; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-transition: opacity .3s .2s ease-in, visibility 0s; -webkit-transition: opacity .3s .2s ease-in, visibility 0s, -webkit-transform .5s ease-in-out; transition: opacity .3s .2s ease-in, visibility 0s, -webkit-transform .5s ease-in-out; transition: opacity .3s .2s ease-in, visibility 0s, transform .5s ease-in-out; transition: opacity .3s .2s ease-in, visibility 0s, transform .5s ease-in-out, -webkit-transform .5s ease-in-out; transition: opacity .3s .2s ease-in, visibility 0s, transform .5s ease-in-out, -webkit-transform .3s ease-in-out; }

#closer_videopopup { position: absolute; width: 3.8rem; height: 3.8rem; right: 4.5rem; top: 3.2rem; display: block; cursor: pointer; background: none; border: none; color: #ffffff; z-index: 100004; }
#closer_videopopup .icon-bar { position: absolute; left: 0; top: 1rem; display: block; background-color: #ffffff; width: 3.8rem; height: 4px; }
#closer_videopopup .icon-bar:nth-child(1), #closer_videopopup .icon-bar:nth-child(2) { opacity: 1; top: 1rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#closer_videopopup .icon-bar:nth-child(2) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

#opct { position: fixed; z-index: 100000; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; opacity: 0.9; background-color: #D8C337; }

#videCont { position: absolute; top: 50%; left: 50%; height: 90vh; max-height: 810px; width: 120vh; max-width: 1080px; }
@media (max-width: 767px) { #videCont { max-width: 100vw; max-height: 75vw; } }

video { position: absolute; left: 0; width: 100%; opacity: 1 !important; }

#video1 { cursor: pointer; cursor: hand; }

@media (max-width: 767px) { table, thead, tbody, th, td, tr { display: block; display: grid; }
  table thead tr { position: absolute; top: -9999px; left: -9999px; }
  table tr { /* border: 1px solid $main-light;*/ }
  table tr:nth-of-type(odd) { background-color: #f5f5f5; }
  table td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; }
  table td:nth-child(1) { /* Voornaam*/ padding-left: 50%; }
  table td:nth-child(6) { /* Voornaam*/ padding-left: 0%; text-align: center; }
  table td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 1rem; left: 1rem; width: 45%; padding-right: 10px; white-space: nowrap; font-weight: 600; }
  table td:nth-of-type(1):before { content: "Naam"; }
  table td:nth-of-type(2):before { content: "Achternaam"; }
  table td:nth-of-type(3):before { content: "Geboortedatum"; }
  table td:nth-of-type(4):before { content: "Geslacht"; }
  table td:nth-of-type(5):before { content: "Score"; } }